Skip to content

K
kiaisoft_tuananh_nuxt
Commit 5d069544 authored by TTS Kieu Tuan Anh's avatar TTS Kieu Tuan Anh
Browse files
Options

format user + categories

parent 96408668
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 11708 additions and 10289 deletions
components/Shared/Header/Header.vue deleted 100644 → 0
View file @ 96408668
<template>
<div>
<!-- header top -->
<div class="header-top">
<div class="header-left">
<span class="welcome-message">This is a wellcome message!</span>
</div>
<div class="header-right">
<div class="dropdown">
<span class="mr-1">USD</span>
<b-icon icon="chevron-down" font-scale=".7"></b-icon>
<ul class="dropdown-box">
<li><a href="#USD">USD</a></li>
<li><a href="#EUR">EUR</a></li>
</ul>
</div>
<!-- End DropDown Menu -->
<div class="dropdown ml-4">
<span class="mr-1">ENG</span>
<b-icon icon="chevron-down" font-scale=".7"></b-icon>
<ul class="dropdown-box">
<li>
<a href="#USD">ENG</a>
</li>
<li>
<a href="#EUR">FRH</a>
</li>
</ul>
</div>
<!-- End DropDown Menu -->
<v-divider class="mx-4" vertical></v-divider>
<a href="#" class="contact">
<b-icon icon="geo-alt"></b-icon>
Contact
</a>
<a href="#" class="help">
<b-icon icon="info-circle"></b-icon>
Need Help
</a>
<a @click="openModal" v-b-modal.modal-login class="login-toggle link-to-tab d-md-show">
<b-icon icon="person" font-scale="1.3"></b-icon>
Sign in
</a>
<span class="delimiter">/</span>
<a href="#register" class="register-toggle link-to-tab d-md-show ml-0">Register</a>
</div>
</div>
<!-- end header top -->
<!-- header middle -->
<div class="header-middle d-flex">
<div class="header-left my-4">
<a href="#" class="logo">
<img src="~/assets/images/logo.png" alt="" srcset="" width="160px" />
</a>
<div class="header-search">
<form action="" class="form-input">
<input type="text" name="search" placeholder="Search..." class="form-control" />
<button type="submit" value="btn" class="btn btn-search">
<b-icon icon="search"></b-icon>
</button>
</form>
</div>
</div>
<div class="header-right">
<a href="#" class="hotline d-flex">
<b-icon icon="telephone" font-scale="2"></b-icon>
<div class="icon-box-content ml-2">
<span class="icon-box-title">Call Us Now:</span>
<h6>0(800) 123-456</h6>
</div>
</a>
<div class="d-flex" style="height: 30px">
<v-divider class="mx-3" vertical></v-divider>
</div>
<div class="wishlist">
<a href="#">
<b-icon icon="heart" font-scale="2"></b-icon>
</a>
</div>
<div class="d-flex" style="height: 30px">
<v-divider class="mx-3" vertical></v-divider>
</div>
<div class="cart">
<a href="#" class="d-flex">
<div class="cart-label">
<span class="cart-name">Shopping Cart:</span>
<p class="cart-price">$0.00</p>
</div>
<div class="icon-bag ml-2">
<b-icon icon="bag" font-scale="2.5"> </b-icon>
<span class="cart-count">2</span>
</div>
</a>
</div>
</div>
</div>
<!-- end header middle -->
<div class="header-bottom d-flex">
<div class="header-left">
<NavigationBar />
</div>
<div class="header-right">
</div>
</div>
</div>
</template>
<script>
import NavigationBar from "@/components/Shared/Header/NavigationBar"
import LoginForm from "@/components/Shared/Header/LoginForm"
export default {
name: "Header",
components: {
NavigationBar,
LoginForm,
},
methods: {
openModal() {
this.$bvModal.show('modal-login')
}
}
};
</script>
<style>
:root {
--color: #26c;
}
body {
color: rgb(99, 99, 99);
font-size: 0.8rem;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.header {
height: auto;
}
.header-top {
height: 40px;
width: 100%;
display: flex;
border-bottom: rgba(0, 0, 0, 0.12) 1px solid;
justify-content: space-between;
align-items: center;
}
.header-left {
display: flex;
margin-left: 70px;
align-items: center;
}
.header-left a {
margin-right: 3rem;
display: flex;
}
.header-right {
display: flex;
margin-right: 70px;
align-items: center;
}
.header-right a {
color: inherit;
padding: 0 0.5rem;
align-items: center;
}
.dropdown span {
margin-bottom: 10px;
cursor: pointer;
}
.dropdown:hover span {
color: var(--color);
}
.dropdown-box {
display: none;
position: absolute;
list-style: none;
width: inherit;
padding: 0 5px;
background-color: rgb(255, 255, 255);
box-shadow: 0 5px 30px 2px rgb(0 0 0 / 20%);
}
.dropdown-box li {
margin: 5px 0px;
}
.dropdown-box a {
color: inherit;
padding: 0.4rem 0.2rem;
}
.dropdown:hover .dropdown-box {
display: block;
}
.header-search {
position: relative;
min-width: 500px;
margin: 0 3rem 0 1rem;
}
.header-search .form-input {
display: flex;
position: relative;
}
.header-search .form-input input.form-control {
border: 2px solid var(--color);
font-size: 1rem;
}
.btn-search {
position: absolute;
right: 0px;
}
.header-middle .header-right {
color: #222;
}
.header-right .icon-box-content span {
font-size: 0.7rem;
}
a {
text-decoration: none;
color: #222;
}
a:hover {
text-decoration: none;
color: var(--color);
}
.header-right .cart-label p {
font-weight: bold;
margin-bottom: 0;
}
.header-right .cart .icon-bag {
width: fit-content;
height: fit-content;
}
.cart-count {
position: absolute;
margin-left: -0.7rem;
width: 1rem;
height: 1rem;
font-size: 0.7rem;
line-height: 1.4;
text-align: center;
border-radius: 50%;
background-color: var(--color);
color: #fff;
z-index: 1;
}
.navbar {
padding: 1rem 0;
}
.navbar a {
font-size: 1rem;
font-weight: bold;
margin-bottom: 10px;
}
.category-children {
padding: 5px 10px;
min-width: 10rem;
}
.category-children .category-child a {
margin: 0;
font-size: 0.9rem;
font-weight: normal;
}
.dropdown:hover .category-item>a {
color: var(--color);
}
</style>
\ No newline at end of file
components/Shared/Header/LoginForm.vue deleted 100644 → 0
View file @ 96408668
<template>
<b-modal id="modal-login" title="Create User" class="modal fade" v-if="showModal">
<p class="my-4">
<form>
<label>Name :</label>
<input type="text" class="form-control mb-2" placeholder="name" v-model="name" max="255" min="1" required />
<label>Email :</label>
<input type="email" class="form-control mb-2" placeholder="Email" v-model="email" required />
<label>Password :</label>
<input type="password" class="form-control mb-2" placeholder="password" v-model="password" required />
</form>
</p>
<template #modal-footer>
<button v-b-modal.modal-close_visit @click="$bvModal.hide('modal-login')"
class="btn btn-danger btn-sm m-1">Close</button>
<button @click="" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button>
</template>
</b-modal>
</template>
<script>
export default {
name: 'LoginForm',
data() {
return {
}
},
methods: {
show() {
this.showModal = true
},
hide() {
this.showModal = false
}
}
}
</script>
\ No newline at end of file
components/Shared/Header/NavigationBar.vue deleted 100644 → 0
View file @ 96408668
<template>
<div>
<div class="navbar d-flex">
<a class="" href="#">Home</a>
<div class="dropdown" v-for="(item, index) in categories" :key="index">
<div class="category-item" v-if="item.ordering == 1">
<a href="">{{ item.name }}</a>
<ul class="category-children dropdown-box" v-if="item.children.length > 0">
<li class="category-child" v-for="(children, index) in item.children" :key="index">
<a href="">{{ children.name }}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'NavigationBar',
data() {
return {
categories: [],
}
},
mounted() {
this.getCategories()
},
methods: {
async getCategories() {
try {
const response = await axios.get(
'http://localhost:8000/api/categories'
)
console.log(response.data.data)
this.categories = response.data.data
} catch (error) {
console.error(error)
}
},
},
}
</script>
<style scoped>
</style>
\ No newline at end of file
package-lock.json
View file @ 5d069544
This diff is collapsed.
pages/categories/index.vue
View file @ 5d069544
......@@ -9,91 +9,6 @@
</template>
</v-breadcrumbs>
</div>
<div style="float: right">
<v-dialog
v-model="dialog1"
persistent
max-width="600px"
@submit.prevent="createUser"
>
<template #activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
New Category
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">Create Category</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="name"
label="Name"
required
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="ordering"
label="Ordering"
type="number"
required
/>
</v-col>
<v-col cols="12">
<v-select
v-model="parent_id"
:items="categories.filter(category => category.parent_id === null)"
item-text="name"
item-value="id"
label="Parent*"
/>
</v-col>
<v-col cols="12">
<v-file-input
v-model="image"
accept="image/*"
label="Image"
prepend-icon="mdi-camera"
/>
</v-col>
</v-row>
</v-container>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn
color="blue darken-1"
text
@click="dialog1 = false"
>
Close
</v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog1 = false; createCategory();"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
<!-- modal-create -->
<v-dialog
v-model="dialog3"
......@@ -125,7 +40,7 @@
<v-col cols="12">
<v-select
v-model="eParentId"
:items="categories.filter(category => category.parent_id === null && category.id !== eID)"
:items="categories.filter(category => category.id !== eID)"
item-text="name"
item-value="id"
label="Parent"
......@@ -133,7 +48,7 @@
/>
</v-col>
<v-col cols="12">
<v-img v-if="typeof eImage === 'string'" :src="eImage" />
<v-img :src="eImage" />
</v-col>
</v-row>
</v-container>
......@@ -220,19 +135,97 @@
</v-card-actions>
</v-card>
</v-dialog>
<v-data-table
:headers="headers"
:items="categories"
sort-by="calories"
class="elevation-1"
group-by="parent_id"
show-group-by
>
<v-data-table :headers="headers" :items="categories" :item-class="indentation" sort-by="calories" class="elevation-1">
<template #top>
<v-toolbar flat>
<v-toolbar-title>Category Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical />
<v-spacer />
<v-toolbar-title style="float: right">
<v-dialog
v-model="dialog1"
persistent
max-width="600px"
@submit.prevent="createUser"
>
<template #activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
New Category
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">Create Category</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="name"
label="Name"
required
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="ordering"
label="Ordering"
type="number"
required
/>
</v-col>
<v-col cols="12">
<v-select
v-model="parent_id"
:items="categories"
item-text="name"
item-value="id"
label="Parent*"
/>
</v-col>
<v-col cols="12">
<v-file-input
v-model="image"
accept="image/*"
label="Image"
prepend-icon="mdi-camera"
/>
</v-col>
</v-row>
</v-container>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn
color="blue darken-1"
text
@click="dialog1 = false"
>
Close
</v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog1 = false; createCategory();"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar-title>
<v-dialog v-model="dialog" max-width="500px">
<v-card>
<v-card-title>
......@@ -335,14 +328,12 @@ export default {
options: [],
headers: [
{
text: 'ID',
text: 'Name',
align: 'start',
value: 'id',
value: 'name',
groupable: false
},
{ text: 'Name', value: 'name', sortable: false },
{ text: 'Odering', value: 'ordering', groupable: false },
{ text: 'parent', value: 'parent_id', sortable: false, groupable: false },
{ text: 'Created', value: 'created_at', groupable: false },
{ text: 'Updated', value: 'updated_at', groupable: false },
{ text: 'Actions', value: 'actions', sortable: false, groupable: false }
......@@ -404,7 +395,9 @@ export default {
this.getCategories()
},
methods: {
testLog () {},
indentation (item) {
return `depth-${item.depth}`
},
initialize () {
this.users = []
this.categories = []
......@@ -455,6 +448,7 @@ export default {
})
.then((response) => {
this.categories = response.data.data
console.log(this.categories)
})
.catch(function (error) {
console.log(error)
......@@ -584,3 +578,25 @@ export default {
}
}
</script>
<style scope>
.depth-0 > td:first-child {
background-color: rgba(211, 211, 211, 0.555);
}
.depth-1 > td:first-child {
padding-left: 30px !important;
background-color: rgba(211, 211, 211, 0.133);
}
.depth-2 > td:first-child {
padding-left: 45px !important;
}
.depth-3 > td:first-child {
padding-left: 60px !important;
}
.depth-4 > td:first-child {
padding-left: 75px !important;
}
.depth-5 > td:first-child {
padding-left: 90px !important;
}
</style>
pages/login.vue
View file @ 5d069544
......@@ -58,17 +58,13 @@
</template>
<script>
import notification from "@/components/notification"
export default {
layout: "none",
components: { notification },
components: { NuxtLogo },
};
</script>
<script>
import { reactive } from "vue";
import axios from "axios";
export default {
layout: "none",
data: () => {
......
pages/users/index.vue
View file @ 5d069544
......@@ -10,76 +10,6 @@
</template>
</v-breadcrumbs>
</div>
<div style="float: right">
<v-dialog v-model="dialog1" persistent max-width="600px" @submit.prevent="createUser">
<template #activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
New USER
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">User Profile</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="name"
label="Legal name*"
required
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="email"
label="Email*"
required
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="password"
label="Password*"
type="password"
required
/>
</v-col>
</v-row>
</v-container>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn
color="blue darken-1"
text
@click="dialog1 = false"
>
Close
</v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog1 = false; createUser();"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
<!-- modal-create -->
<v-dialog
v-model="dialog2"
......@@ -149,8 +79,84 @@
<v-toolbar-title>User Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical />
<v-spacer />
<v-toolbar-title style="float: right">
<v-dialog v-model="dialog1" persistent max-width="600px" @submit.prevent="createUser">
<template #activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
New USER
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">User Profile</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="name"
label="Legal name*"
required
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="email"
label="Email*"
required
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="password"
label="Password*"
type="password"
required
/>
</v-col>
</v-row>
</v-container>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn
color="blue darken-1"
text
@click="dialog1 = false"
>
Close
</v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog1 = false; createUser();"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar-title>
</v-toolbar>
</template>
<template #item.created_at="{ item }">
<span>{{ formatDate(item.created_at) }}</span>
</template>
<template #item.updated_at="{ item }">
<span>{{ formatDate(item.updated_at) }}</span>
</template>
<template #[`item.actions`]="{ item }">
<v-icon :id="item.id" small class="mr-2" @click="dialog2 = true; editUser(item);">
mdi-pencil
......@@ -191,8 +197,8 @@ export default {
{ text: 'id', value: 'id' },
{ text: 'email', value: 'email' },
{ text: 'status', value: 'id', sortable: false },
{ text: 'created_at', value: 'created_at' },
{ text: 'updated_at', value: 'updated_at' },
{ text: 'created', value: 'created_at' },
{ text: 'updated', value: 'updated_at' },
{ text: 'Actions', value: 'actions', sortable: false }
],
items: [
......
yarn.lock
View file @ 5d069544
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment