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 Show 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
This diff is collapsed.
pages/login.vue
View file @ 5d069544
...@@ -58,17 +58,13 @@ ...@@ -58,17 +58,13 @@
</template> </template>
<script> <script>
import notification from "@/components/notification"
export default { export default {
layout: "none", layout: "none",
components: { notification },
components: { NuxtLogo },
}; };
</script> </script>
<script> <script>
import { reactive } from "vue"; import { reactive } from "vue";
import axios from "axios";
export default { export default {
layout: "none", layout: "none",
data: () => { data: () => {
......
pages/users/index.vue
View file @ 5d069544
...@@ -10,21 +10,15 @@ ...@@ -10,21 +10,15 @@
</template> </template>
</v-breadcrumbs> </v-breadcrumbs>
</div> </div>
<div style="float: right"> <!-- modal-create -->
<v-dialog v-model="dialog1" persistent max-width="600px" @submit.prevent="createUser"> <v-dialog
<template #activator="{ on, attrs }"> v-model="dialog2"
<v-btn persistent
color="primary" max-width="600px"
dark
v-bind="attrs"
v-on="on"
> >
New USER
</v-btn>
</template>
<v-card> <v-card>
<v-card-title> <v-card-title>
<span class="text-h5">User Profile</span> <span class="text-h5">User Edit</span>
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-container> <v-container>
...@@ -35,21 +29,21 @@ ...@@ -35,21 +29,21 @@
md="4" md="4"
> >
<v-text-field <v-text-field
v-model="name" v-model="eName"
label="Legal name*" label="Legal name*"
required required
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="email" v-model="eEmail"
label="Email*" label="Email*"
required required
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="password" v-model="ePassword"
label="Password*" label="Password*"
type="password" type="password"
required required
...@@ -64,7 +58,7 @@ ...@@ -64,7 +58,7 @@
<v-btn <v-btn
color="blue darken-1" color="blue darken-1"
text text
@click="dialog1 = false" @click="dialog2 = false"
> >
Close Close
</v-btn> </v-btn>
...@@ -72,23 +66,34 @@ ...@@ -72,23 +66,34 @@
color="blue darken-1" color="blue darken-1"
text text
type="submit" type="submit"
@click="dialog1 = false; createUser();" @click="dialog2 = false; updateUser();"
> >
Save Save
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
</div> <v-data-table :headers="headers" :items="users" sort-by="calories" class="elevation-1">
<!-- modal-create --> <template #top>
<v-dialog <v-toolbar flat>
v-model="dialog2" <v-toolbar-title>User Manage</v-toolbar-title>
persistent <v-divider class="mx-4" inset vertical />
max-width="600px" <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>
<v-card-title> <v-card-title>
<span class="text-h5">User Edit</span> <span class="text-h5">User Profile</span>
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-container> <v-container>
...@@ -99,21 +104,21 @@ ...@@ -99,21 +104,21 @@
md="4" md="4"
> >
<v-text-field <v-text-field
v-model="eName" v-model="name"
label="Legal name*" label="Legal name*"
required required
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="eEmail" v-model="email"
label="Email*" label="Email*"
required required
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="ePassword" v-model="password"
label="Password*" label="Password*"
type="password" type="password"
required required
...@@ -128,7 +133,7 @@ ...@@ -128,7 +133,7 @@
<v-btn <v-btn
color="blue darken-1" color="blue darken-1"
text text
@click="dialog2 = false" @click="dialog1 = false"
> >
Close Close
</v-btn> </v-btn>
...@@ -136,21 +141,22 @@ ...@@ -136,21 +141,22 @@
color="blue darken-1" color="blue darken-1"
text text
type="submit" type="submit"
@click="dialog2 = false; updateUser();" @click="dialog1 = false; createUser();"
> >
Save Save
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
<v-data-table :headers="headers" :items="users" sort-by="calories" class="elevation-1"> </v-toolbar-title>
<template #top>
<v-toolbar flat>
<v-toolbar-title>User Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical />
<v-spacer />
</v-toolbar> </v-toolbar>
</template> </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 }"> <template #[`item.actions`]="{ item }">
<v-icon :id="item.id" small class="mr-2" @click="dialog2 = true; editUser(item);"> <v-icon :id="item.id" small class="mr-2" @click="dialog2 = true; editUser(item);">
mdi-pencil mdi-pencil
...@@ -191,8 +197,8 @@ export default { ...@@ -191,8 +197,8 @@ export default {
{ text: 'id', value: 'id' }, { text: 'id', value: 'id' },
{ text: 'email', value: 'email' }, { text: 'email', value: 'email' },
{ text: 'status', value: 'id', sortable: false }, { text: 'status', value: 'id', sortable: false },
{ text: 'created_at', value: 'created_at' }, { text: 'created', value: 'created_at' },
{ text: 'updated_at', value: 'updated_at' }, { text: 'updated', value: 'updated_at' },
{ text: 'Actions', value: 'actions', sortable: false } { text: 'Actions', value: 'actions', sortable: false }
], ],
items: [ 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