Skip to content

K
kiaisoft_tuananh_nuxt
Commit 2cf94e98 authored by vietanh-0511's avatar vietanh-0511
Browse files
Options

Merge branch 'feature/UI-vuetify' of... 

Merge branch 'feature/UI-vuetify' of https://gitlab.kiaisoft.com/kiaisoft.anh.tran2/kiaisoft_tuananh_nuxt into feature/update-product-UI
parents 529568ba 51ae5777
Show whitespace changes
Inline Side-by-side
Showing with 399 additions and 673 deletions
components/DateDisplay.vue 0 → 100644
View file @ 2cf94e98
<template>
<span v-if="date">
{{ date.getMonth() + 1 }}/{{ date.getDate() }}/{{ date.getFullYear() }}
</span>
</template>
<script>
export default {
props: ['date']
}
</script>
<style>
</style>
components/Footer.vue → components/FooterBar.vue
View file @ 2cf94e98
...@@ -10,30 +10,44 @@ ...@@ -10,30 +10,44 @@
</v-card-text> </v-card-text>
<v-card-text class="white--text pt-0"> <v-card-text class="white--text pt-0">
Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet. Mauris cursus commodo interdum. Praesent ut Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet.
risus eget metus luctus accumsan id ultrices nunc. Sed at orci sed massa consectetur dignissim a sit amet dui. Mauris cursus commodo interdum. Praesent ut risus eget metus luctus
Duis commodo vitae velit et faucibus. Morbi vehicula lacinia malesuada. Nulla placerat augue vel ipsum ultrices, accumsan id ultrices nunc. Sed at orci sed massa consectetur dignissim a
cursus iaculis dui sollicitudin. Vestibulum eu ipsum vel diam elementum tempor vel ut orci. Orci varius natoque sit amet dui. Duis commodo vitae velit et faucibus. Morbi vehicula
penatibus et magnis dis parturient montes, nascetur ridiculus mus. lacinia malesuada. Nulla placerat augue vel ipsum ultrices, cursus
iaculis dui sollicitudin. Vestibulum eu ipsum vel diam elementum tempor
vel ut orci. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</v-card-text> </v-card-text>
<v-divider></v-divider> <v-divider />
<div class="footer-bottom"> <div class="footer-bottom">
<div class="footer-bottom-left"> <div class="footer-bottom-left">
<figure class="payment"> <figure class="payment">
<img src="~/assets/images/payment.png" alt="payment" width="159" height="29"> <img
src="~/assets/images/payment.png"
alt="payment"
width="159"
height="29"
>
</figure> </figure>
</div> </div>
<p class="copyright">Riode eCommerce © 2022. All Rights Reserved</p> <p class="copyright">
Riode eCommerce © 2022. All Rights Reserved
</p>
<div class="footer-bottom-right"> <div class="footer-bottom-right">
<div class="social-link"> <div class="social-link">
<v-btn v-for="icon in icons" :key="icon" class="mx-4 white--text" icon> <v-btn
v-for="icon in icons"
:key="icon"
class="mx-4 white--text"
icon
>
<v-icon size="24px"> <v-icon size="24px">
{{ icon }} {{ icon }}
</v-icon> </v-icon>
</v-btn> </v-btn>
</div> </div>
</div> </div>
</div> </div>
...@@ -44,13 +58,8 @@ ...@@ -44,13 +58,8 @@
<script> <script>
export default { export default {
data: () => ({ data: () => ({
icons: [ icons: ['mdi-facebook', 'mdi-twitter', 'mdi-linkedin', 'mdi-instagram']
'mdi-facebook', })
'mdi-twitter',
'mdi-linkedin',
'mdi-instagram',
],
}),
} }
</script> </script>
...@@ -58,7 +67,6 @@ export default { ...@@ -58,7 +67,6 @@ export default {
.footer-bottom-left { .footer-bottom-left {
position: absolute; position: absolute;
left: 0; left: 0;
} }
.footer-bottom-right { .footer-bottom-right {
...@@ -67,12 +75,10 @@ export default { ...@@ -67,12 +75,10 @@ export default {
} }
.copyright { .copyright {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
</style> </style>
components/Shared/Header/Header.vue deleted 100644 → 0
View file @ 529568ba
<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 @ 529568ba
<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 @ 529568ba
<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
nuxt.config.js
View file @ 2cf94e98
...@@ -27,7 +27,10 @@ export default { ...@@ -27,7 +27,10 @@ export default {
], ],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: ['~/plugins/axios.js'], plugins: [
'~/plugins/axios.js',
'~/plugins/formatTime.js'
],
// Auto import components: https://go.nuxtjs.dev/config-components // Auto import components: https://go.nuxtjs.dev/config-components
components: true, components: true,
......
pages/categories/index.vue
View file @ 2cf94e98
...@@ -9,65 +9,46 @@ ...@@ -9,65 +9,46 @@
</template> </template>
</v-breadcrumbs> </v-breadcrumbs>
</div> </div>
<div style="float: right"> <!-- modal-create -->
<v-dialog <v-dialog
v-model="dialog1" v-model="dialog3"
persistent persistent
max-width="600px" 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>
<v-card-title> <v-card-title>
<span class="text-h5">Create Category</span> <span class="text-h5">Category</span>
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-container> <v-container>
<v-row> <v-row>
<v-col <v-col cols="12">
cols="12"
sm="6"
md="4"
>
<v-text-field <v-text-field
v-model="name" v-model="eName"
label="Name" label="Name"
required readonly
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="ordering" v-model="eOrdering"
label="Ordering" label="Ordering"
type="number" type="number"
required readonly
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-select <v-select
v-model="parent_id" v-model="eParentId"
:items="categories.filter(category => category.parent_id === null)" :items="categories.filter(category => category.id !== eID)"
item-text="name" item-text="name"
item-value="id" item-value="id"
label="Parent*" label="Parent"
readonly
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-file-input <v-img :src="eImage" />
v-model="image"
accept="image/*"
label="Image"
prepend-icon="mdi-camera"
/>
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
...@@ -78,31 +59,21 @@ ...@@ -78,31 +59,21 @@
<v-btn <v-btn
color="blue darken-1" color="blue darken-1"
text text
@click="dialog1 = false" @click="dialog3 = false"
> >
Close Close
</v-btn> </v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog1 = false; createCategory();"
>
Save
</v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
</div>
<!-- modal-create -->
<v-dialog <v-dialog
v-model="dialog3" v-model="dialog2"
persistent persistent
max-width="600px" max-width="600px"
> >
<v-card> <v-card>
<v-card-title> <v-card-title>
<span class="text-h5">Category</span> <span class="text-h5">Category Edit</span>
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-container> <v-container>
...@@ -111,7 +82,7 @@ ...@@ -111,7 +82,7 @@
<v-text-field <v-text-field
v-model="eName" v-model="eName"
label="Name" label="Name"
readonly required
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
...@@ -119,17 +90,16 @@ ...@@ -119,17 +90,16 @@
v-model="eOrdering" v-model="eOrdering"
label="Ordering" label="Ordering"
type="number" type="number"
readonly required
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-select <v-select
v-model="eParentId" 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-text="name"
item-value="id" item-value="id"
label="Parent" label="Parent"
readonly
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
...@@ -138,7 +108,6 @@ ...@@ -138,7 +108,6 @@
accept="image/*" accept="image/*"
label="Image" label="Image"
prepend-icon="mdi-camera" prepend-icon="mdi-camera"
readonly
/> />
</v-col> </v-col>
<v-img v-if="typeof eImage === 'string'" :src="eImage" /> <v-img v-if="typeof eImage === 'string'" :src="eImage" />
...@@ -151,35 +120,65 @@ ...@@ -151,35 +120,65 @@
<v-btn <v-btn
color="blue darken-1" color="blue darken-1"
text text
@click="dialog3 = false" @click="dialog2 = false"
> >
Close Close
</v-btn> </v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog2 = false; updateCategory();"
>
Save
</v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
<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-dialog
v-model="dialog2" v-model="dialog1"
persistent persistent
max-width="600px" 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>
<v-card-title> <v-card-title>
<span class="text-h5">Category Edit</span> <span class="text-h5">Create Category</span>
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-container> <v-container>
<v-row> <v-row>
<v-col cols="12"> <v-col
cols="12"
sm="6"
md="4"
>
<v-text-field <v-text-field
v-model="eName" v-model="name"
label="Name" label="Name"
required required
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="eOrdering" v-model="ordering"
label="Ordering" label="Ordering"
type="number" type="number"
required required
...@@ -187,22 +186,22 @@ ...@@ -187,22 +186,22 @@
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-select <v-select
v-model="eParentId" v-model="parent_id"
:items="categories.filter(category => category.parent_id === null && category.id !== eID)" :items="categories"
item-text="name" item-text="name"
item-value="id" item-value="id"
label="Parent" label="Parent*"
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-file-input <v-file-input
v-model="eImage" v-model="image"
accept="image/*" accept="image/*"
label="Image" label="Image"
prepend-icon="mdi-camera" prepend-icon="mdi-camera"
/> />
</v-col> </v-col>
<v-img v-if="typeof eImage === 'string'" :src="eImage" /> <v-img v-if="typeof image === 'string'" :src="image" />
</v-row> </v-row>
</v-container> </v-container>
<small>*indicates required field</small> <small>*indicates required field</small>
...@@ -212,7 +211,7 @@ ...@@ -212,7 +211,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>
...@@ -220,19 +219,14 @@ ...@@ -220,19 +219,14 @@
color="blue darken-1" color="blue darken-1"
text text
type="submit" type="submit"
@click="dialog2 = false; updateCategory();" @click="dialog1 = false; createCategory();"
> >
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="categories" sort-by="calories" class="elevation-1"> </v-toolbar-title>
<template #top>
<v-toolbar flat>
<v-toolbar-title>Category Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical />
<v-spacer />
<v-dialog v-model="dialog" max-width="500px"> <v-dialog v-model="dialog" max-width="500px">
<v-card> <v-card>
<v-card-title> <v-card-title>
...@@ -280,7 +274,7 @@ ...@@ -280,7 +274,7 @@
<v-btn color="blue darken-1" text @click="closeDelete"> <v-btn color="blue darken-1" text @click="closeDelete">
Cancel Cancel
</v-btn> </v-btn>
<v-btn color="blue darken-1" text @click="deleteItemConfirm"> <v-btn color="blue darken-1" text @click="deleteCategory(); dialogDelete = false">
OK OK
</v-btn> </v-btn>
<v-spacer /> <v-spacer />
...@@ -289,11 +283,17 @@ ...@@ -289,11 +283,17 @@
</v-dialog> </v-dialog>
</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 @click="dialog2 = true; editCategory(item)"> <v-icon :id="item.id" small @click="dialog2 = true; editCategory(item)">
mdi-pencil mdi-pencil
</v-icon> </v-icon>
<v-icon :id="item.id" small @click="deleteCategory(item.id, item)"> <v-icon :id="item.id" small @click="dialogDelete = true; getID(item)">
mdi-delete mdi-delete
</v-icon> </v-icon>
<v-icon :id="item.id" small @click="dialog3 = true; showCategory(item)"> <v-icon :id="item.id" small @click="dialog3 = true; showCategory(item)">
...@@ -310,6 +310,7 @@ ...@@ -310,6 +310,7 @@
</v-app> </v-app>
</template> </template>
<script> <script>
export default { export default {
layout: 'admin', layout: 'admin',
middleware: ['web'], middleware: ['web'],
...@@ -320,6 +321,7 @@ export default { ...@@ -320,6 +321,7 @@ export default {
ordering: '', ordering: '',
image: null, image: null,
error: '', error: '',
dialog: false,
dialog1: false, dialog1: false,
dialog2: false, dialog2: false,
dialog3: false, dialog3: false,
...@@ -329,15 +331,13 @@ export default { ...@@ -329,15 +331,13 @@ export default {
{ {
text: 'Name', text: 'Name',
align: 'start', align: 'start',
sortable: false, value: 'name',
value: 'name' groupable: false
}, },
{ text: 'id', value: 'id' }, { text: 'Odering', value: 'ordering', groupable: false },
{ text: 'ordering', value: 'ordering' }, { text: 'Created', value: 'created_at', groupable: false },
{ text: 'parent', value: 'parent_id', sortable: false }, { text: 'Updated', value: 'updated_at', groupable: false },
{ text: 'created_at', value: 'created_at' }, { text: 'Actions', value: 'actions', sortable: false, groupable: false }
{ text: 'updated_at', value: 'updated_at' },
{ text: 'Actions', value: 'actions', sortable: false }
], ],
categories: [], categories: [],
eID: '', eID: '',
...@@ -396,7 +396,9 @@ export default { ...@@ -396,7 +396,9 @@ export default {
this.getCategories() this.getCategories()
}, },
methods: { methods: {
testLog () {}, indentation (item) {
return `depth-${item.depth}`
},
initialize () { initialize () {
this.users = [] this.users = []
this.categories = [] this.categories = []
...@@ -441,12 +443,12 @@ export default { ...@@ -441,12 +443,12 @@ export default {
this.$axios this.$axios
.get('/categories/', { .get('/categories/', {
headers: { headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}` Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
} }
}) })
.then((response) => { .then((response) => {
this.categories = response.data.data this.categories = response.data.data
console.log(this.categories)
}) })
.catch(function (error) { .catch(function (error) {
console.log(error) console.log(error)
...@@ -458,13 +460,12 @@ export default { ...@@ -458,13 +460,12 @@ export default {
fd.append('name', this.name) fd.append('name', this.name)
fd.append('ordering', this.ordering) fd.append('ordering', this.ordering)
fd.append('parent_id', this.parent_id) fd.append('parent_id', this.parent_id)
fd.append('images', this.image) fd.append('image', this.image)
this.$axios this.$axios
.post('/categories/', .post('/categories/',
fd, fd,
{ {
headers: { headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}` Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
} }
} }
...@@ -484,21 +485,19 @@ export default { ...@@ -484,21 +485,19 @@ export default {
}) })
}) })
}, },
deleteCategory (ID, index) { deleteCategory () {
const self = this const self = this
this.editedIndex = this.categories.indexOf(index) const currentPostIndex = this.editedIndex
if (confirm('Do you really want to delete?')) {
try { try {
this.$axios this.$axios
.delete(`/categories/${ID}`, .delete(`/categories/${this.eID}`,
{ {
headers: { headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}` Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
} }
}) })
.then((response) => { .then((response) => {
this.categories.splice(this.editedIndex, 1) this.categories.splice(currentPostIndex, 1)
self.$toast.success('Category deleted successfully!', { self.$toast.success('Category deleted successfully!', {
duration: 3000 duration: 3000
}) })
...@@ -506,17 +505,19 @@ export default { ...@@ -506,17 +505,19 @@ export default {
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }
}
}, },
getID (item) { getID (item) {
console.log(this.categories.indexOf(item)) console.log(item.id)
console.log(this.editedIndex)
this.eID = item.id
this.editedIndex = this.categories.indexOf(item)
}, },
editCategory (item) { editCategory (item) {
this.eID = item.id this.eID = item.id
this.eName = item.name this.eName = item.name
this.eOrdering = item.ordering this.eOrdering = item.ordering
this.eParentId = item.parent_id this.eParentId = item.parent_id
this.eImage = item.images this.eImage = item.image
this.editedIndex = this.categories.indexOf(item) this.editedIndex = this.categories.indexOf(item)
console.log(this.eID) console.log(this.eID)
console.log(this.eImage) console.log(this.eImage)
...@@ -525,7 +526,7 @@ export default { ...@@ -525,7 +526,7 @@ export default {
this.eName = item.name this.eName = item.name
this.eOrdering = item.ordering this.eOrdering = item.ordering
this.eParentId = item.parent_id this.eParentId = item.parent_id
this.eImage = item.images this.eImage = item.image
}, },
updateCategory (userID) { updateCategory (userID) {
const self = this const self = this
...@@ -538,7 +539,7 @@ export default { ...@@ -538,7 +539,7 @@ export default {
fd.append('name', this.eName) fd.append('name', this.eName)
fd.append('ordering', this.eOrdering) fd.append('ordering', this.eOrdering)
if (typeof this.eImage !== 'string') { if (typeof this.eImage !== 'string') {
fd.append('images', this.eImage) fd.append('image', this.eImage)
} }
try { try {
this.$axios this.$axios
...@@ -546,7 +547,6 @@ export default { ...@@ -546,7 +547,6 @@ export default {
fd, fd,
{ {
headers: { headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}` Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
} }
} }
...@@ -565,3 +565,28 @@ export default { ...@@ -565,3 +565,28 @@ export default {
} }
} }
</script> </script>
<style scope>
.depth-0 {
background-color: rgba(211, 211, 211, 0.555);
}
.depth-1 {
padding-left: 30px !important;
background-color: rgba(211, 211, 211, 0.133);
}
.depth-1 > td:first-child {
padding-left: 30px !important;
}
.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/posts/index.vue
View file @ 2cf94e98
...@@ -83,6 +83,7 @@ ...@@ -83,6 +83,7 @@
small-chips small-chips
dense dense
accept="image/*" accept="image/*"
prepend-icon="mdi-camera"
@change="fileSelected" @change="fileSelected"
/> />
</v-col> </v-col>
...@@ -255,6 +256,7 @@ ...@@ -255,6 +256,7 @@
accept="image/*" accept="image/*"
small-chips small-chips
dense dense
prepend-icon="mdi-camera"
/> />
</v-col> </v-col>
</v-row> </v-row>
......
pages/products/index.vue
View file @ 2cf94e98
...@@ -72,7 +72,6 @@ ...@@ -72,7 +72,6 @@
label="File input" label="File input"
small-chips small-chips
dense dense
accept="image/*"
multiple multiple
/> />
</v-col> </v-col>
...@@ -330,6 +329,7 @@ ...@@ -330,6 +329,7 @@
multiple multiple
/> />
</v-col> </v-col>
<!-- <v-img v-if="typeof eImage === 'string'" :src="eImages" /> -->
<v-col cols="12"> <v-col cols="12">
<v-btn <v-btn
class="mx-2" class="mx-2"
...@@ -479,6 +479,7 @@ export default { ...@@ -479,6 +479,7 @@ export default {
color: '', color: '',
size: '', size: '',
quantity: '', quantity: '',
dialog: false,
dialog1: false, dialog1: false,
dialog2: false, dialog2: false,
dialog3: false, dialog3: false,
......
pages/users/index.vue
View file @ 2cf94e98
...@@ -10,46 +10,24 @@ ...@@ -10,46 +10,24 @@
</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 v-model="dialog2" persistent max-width="600px">
<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 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>
<v-row> <v-row>
<v-col <v-col cols="12" sm="6" md="4">
cols="12" <v-text-field v-model="eName" label="Legal name*" required />
sm="6"
md="4"
>
<v-text-field
v-model="name"
label="Legal name*"
required
/>
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field v-model="eEmail" label="Email*" required />
v-model="email"
label="Email*"
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
...@@ -61,59 +39,95 @@ ...@@ -61,59 +39,95 @@
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-spacer /> <v-spacer />
<v-btn color="blue darken-1" text @click="dialog2 = false">
Close
</v-btn>
<v-btn <v-btn
color="blue darken-1" color="blue darken-1"
text text
@click="dialog1 = false" type="submit"
@click="
dialog2 = false;
updateUser();
"
> >
Close Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- modal-delete -->
<v-dialog v-model="dialogDelete" max-width="500px">
<v-card>
<v-card-title class="text-h5">
Are you sure you want to delete this item?
</v-card-title>
<v-card-actions>
<v-spacer />
<v-btn color="blue darken-1" text @click="closeDelete">
Cancel
</v-btn> </v-btn>
<v-btn <v-btn
color="blue darken-1" color="blue darken-1"
text text
type="submit" @click="
@click="dialog1 = false; createUser();" deleteUser();
dialogDelete = false;
"
> >
Save OK
</v-btn> </v-btn>
<v-spacer />
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
</div> <v-data-table
<!-- modal-create --> :headers="headers"
:items="users"
sort-by="calories"
class="elevation-1"
>
<template #top>
<v-toolbar flat>
<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-dialog
v-model="dialog2" v-model="dialog1"
persistent persistent
max-width="600px" 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>
<v-row> <v-row>
<v-col <v-col cols="12" sm="6" md="4">
cols="12"
sm="6"
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
...@@ -125,37 +139,52 @@ ...@@ -125,37 +139,52 @@
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-spacer /> <v-spacer />
<v-btn <v-btn color="blue darken-1" text @click="dialog1 = false">
color="blue darken-1"
text
@click="dialog2 = false"
>
Close Close
</v-btn> </v-btn>
<v-btn <v-btn
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
</v-icon> </v-icon>
<v-icon :id="item.id" small @click="deleteUser(item.id, item)"> <v-icon
:id="item.id"
small
@click="
dialogDelete = true;
getID(item)
"
>
mdi-delete mdi-delete
</v-icon> </v-icon>
</template> </template>
...@@ -191,8 +220,8 @@ export default { ...@@ -191,8 +220,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: [
...@@ -296,7 +325,9 @@ export default { ...@@ -296,7 +325,9 @@ export default {
.get('/users/', { .get('/users/', {
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}` Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
} }
}) })
.then(response => (this.users = response.data.data.data)) .then(response => (this.users = response.data.data.data))
...@@ -307,14 +338,19 @@ export default { ...@@ -307,14 +338,19 @@ export default {
createUser () { createUser () {
const self = this const self = this
this.$axios this.$axios
.post('/users/', { .post(
'/users/',
{
email: this.email, email: this.email,
password: this.password, password: this.password,
name: this.name name: this.name
}, { },
{
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}` Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
} }
} }
) )
...@@ -336,16 +372,17 @@ export default { ...@@ -336,16 +372,17 @@ export default {
}) })
}) })
}, },
deleteUser (userID, index) { deleteUser () {
const self = this const self = this
this.editedIndex = this.users.indexOf(index) const currentPostIndex = this.editedIndex
if (confirm('Do you really want to delete?')) {
try { try {
this.$axios this.$axios.delete(`/users/${this.eID}`, {
.delete(`/users/${userID}`) headers: {
.then((response) => { Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
}).then((response) => {
console.log(response.data) console.log(response.data)
this.users.splice(this.editedIndex, 1) this.users.splice(currentPostIndex, 1)
self.$toast.success('User deleted successfully!', { self.$toast.success('User deleted successfully!', {
duration: 3000 duration: 3000
}) })
...@@ -353,7 +390,6 @@ export default { ...@@ -353,7 +390,6 @@ export default {
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }
}
}, },
editUser (user) { editUser (user) {
this.eID = user.id this.eID = user.id
...@@ -368,7 +404,8 @@ export default { ...@@ -368,7 +404,8 @@ export default {
console.log(this.eEmail) console.log(this.eEmail)
console.log(this?.eID) console.log(this?.eID)
this.$axios this.$axios
.put(`/users/${this?.eID}`, .put(
`/users/${this?.eID}`,
{ {
email: this.eEmail, email: this.eEmail,
password: this.ePassword, password: this.ePassword,
...@@ -377,7 +414,9 @@ export default { ...@@ -377,7 +414,9 @@ export default {
{ {
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}` Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
} }
} }
) )
...@@ -395,6 +434,10 @@ export default { ...@@ -395,6 +434,10 @@ export default {
duration: 3000 duration: 3000
}) })
}) })
},
getID (item) {
this.eID = item.id
this.editedIndex = this.users.indexOf(item)
} }
} }
} }
......
plugins/formatTime.js 0 → 100644
View file @ 2cf94e98
import Vue from 'vue'
Vue.mixin({
methods: {
formatDate (date) {
const d = new Date(date)
let month = '' + (d.getMonth() + 1)
let day = '' + d.getDate()
const year = d.getFullYear()
if (month.length < 2) { month = '0' + month }
if (day.length < 2) { day = '0' + day }
return [year, month, day].join('-')
}
}
})
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