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 @@
</v-card-text>
<v-card-text class="white--text pt-0">
Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet. Mauris cursus commodo interdum. Praesent ut
risus eget metus luctus accumsan id ultrices nunc. Sed at orci sed massa consectetur dignissim a sit amet dui.
Duis commodo vitae velit et faucibus. Morbi vehicula 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.
Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet.
Mauris cursus commodo interdum. Praesent ut risus eget metus luctus
accumsan id ultrices nunc. Sed at orci sed massa consectetur dignissim a
sit amet dui. Duis commodo vitae velit et faucibus. Morbi vehicula
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-divider></v-divider>
<v-divider />
<div class="footer-bottom">
<div class="footer-bottom-left">
<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>
</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="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">
{{ icon }}
</v-icon>
</v-btn>
</div>
</div>
</div>
......@@ -44,13 +58,8 @@
<script>
export default {
data: () => ({
icons: [
'mdi-facebook',
'mdi-twitter',
'mdi-linkedin',
'mdi-instagram',
],
}),
icons: ['mdi-facebook', 'mdi-twitter', 'mdi-linkedin', 'mdi-instagram']
})
}
</script>
......@@ -58,7 +67,6 @@ export default {
.footer-bottom-left {
position: absolute;
left: 0;
}
.footer-bottom-right {
......@@ -67,12 +75,10 @@ export default {
}
.copyright {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
</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 {
],
// 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
components: true,
......
pages/categories/index.vue
View file @ 2cf94e98
......@@ -9,65 +9,46 @@
</template>
</v-breadcrumbs>
</div>
<div style="float: right">
<!-- modal-create -->
<v-dialog
v-model="dialog1"
v-model="dialog3"
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>
<span class="text-h5">Category</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col
cols="12"
sm="6"
md="4"
>
<v-col cols="12">
<v-text-field
v-model="name"
v-model="eName"
label="Name"
required
readonly
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="ordering"
v-model="eOrdering"
label="Ordering"
type="number"
required
readonly
/>
</v-col>
<v-col cols="12">
<v-select
v-model="parent_id"
:items="categories.filter(category => category.parent_id === null)"
v-model="eParentId"
:items="categories.filter(category => category.id !== eID)"
item-text="name"
item-value="id"
label="Parent*"
label="Parent"
readonly
/>
</v-col>
<v-col cols="12">
<v-file-input
v-model="image"
accept="image/*"
label="Image"
prepend-icon="mdi-camera"
/>
<v-img :src="eImage" />
</v-col>
</v-row>
</v-container>
......@@ -78,31 +59,21 @@
<v-btn
color="blue darken-1"
text
@click="dialog1 = false"
@click="dialog3 = 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"
v-model="dialog2"
persistent
max-width="600px"
>
<v-card>
<v-card-title>
<span class="text-h5">Category</span>
<span class="text-h5">Category Edit</span>
</v-card-title>
<v-card-text>
<v-container>
......@@ -111,7 +82,7 @@
<v-text-field
v-model="eName"
label="Name"
readonly
required
/>
</v-col>
<v-col cols="12">
......@@ -119,17 +90,16 @@
v-model="eOrdering"
label="Ordering"
type="number"
readonly
required
/>
</v-col>
<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"
readonly
/>
</v-col>
<v-col cols="12">
......@@ -138,7 +108,6 @@
accept="image/*"
label="Image"
prepend-icon="mdi-camera"
readonly
/>
</v-col>
<v-img v-if="typeof eImage === 'string'" :src="eImage" />
......@@ -151,35 +120,65 @@
<v-btn
color="blue darken-1"
text
@click="dialog3 = false"
@click="dialog2 = false"
>
Close
</v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog2 = false; updateCategory();"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</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-model="dialog2"
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">Category Edit</span>
<span class="text-h5">Create Category</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12">
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="eName"
v-model="name"
label="Name"
required
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="eOrdering"
v-model="ordering"
label="Ordering"
type="number"
required
......@@ -187,22 +186,22 @@
</v-col>
<v-col cols="12">
<v-select
v-model="eParentId"
:items="categories.filter(category => category.parent_id === null && category.id !== eID)"
v-model="parent_id"
:items="categories"
item-text="name"
item-value="id"
label="Parent"
label="Parent*"
/>
</v-col>
<v-col cols="12">
<v-file-input
v-model="eImage"
v-model="image"
accept="image/*"
label="Image"
prepend-icon="mdi-camera"
/>
</v-col>
<v-img v-if="typeof eImage === 'string'" :src="eImage" />
<v-img v-if="typeof image === 'string'" :src="image" />
</v-row>
</v-container>
<small>*indicates required field</small>
......@@ -212,7 +211,7 @@
<v-btn
color="blue darken-1"
text
@click="dialog2 = false"
@click="dialog1 = false"
>
Close
</v-btn>
......@@ -220,19 +219,14 @@
color="blue darken-1"
text
type="submit"
@click="dialog2 = false; updateCategory();"
@click="dialog1 = false; createCategory();"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-data-table :headers="headers" :items="categories" 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>
<v-dialog v-model="dialog" max-width="500px">
<v-card>
<v-card-title>
......@@ -280,7 +274,7 @@
<v-btn color="blue darken-1" text @click="closeDelete">
Cancel
</v-btn>
<v-btn color="blue darken-1" text @click="deleteItemConfirm">
<v-btn color="blue darken-1" text @click="deleteCategory(); dialogDelete = false">
OK
</v-btn>
<v-spacer />
......@@ -289,11 +283,17 @@
</v-dialog>
</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 @click="dialog2 = true; editCategory(item)">
mdi-pencil
</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
</v-icon>
<v-icon :id="item.id" small @click="dialog3 = true; showCategory(item)">
......@@ -310,6 +310,7 @@
</v-app>
</template>
<script>
export default {
layout: 'admin',
middleware: ['web'],
......@@ -320,6 +321,7 @@ export default {
ordering: '',
image: null,
error: '',
dialog: false,
dialog1: false,
dialog2: false,
dialog3: false,
......@@ -329,15 +331,13 @@ export default {
{
text: 'Name',
align: 'start',
sortable: false,
value: 'name'
value: 'name',
groupable: false
},
{ text: 'id', value: 'id' },
{ text: 'ordering', value: 'ordering' },
{ text: 'parent', value: 'parent_id', sortable: false },
{ text: 'created_at', value: 'created_at' },
{ text: 'updated_at', value: 'updated_at' },
{ text: 'Actions', value: 'actions', sortable: false }
{ text: 'Odering', value: 'ordering', groupable: false },
{ text: 'Created', value: 'created_at', groupable: false },
{ text: 'Updated', value: 'updated_at', groupable: false },
{ text: 'Actions', value: 'actions', sortable: false, groupable: false }
],
categories: [],
eID: '',
......@@ -396,7 +396,9 @@ export default {
this.getCategories()
},
methods: {
testLog () {},
indentation (item) {
return `depth-${item.depth}`
},
initialize () {
this.users = []
this.categories = []
......@@ -441,12 +443,12 @@ export default {
this.$axios
.get('/categories/', {
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
.then((response) => {
this.categories = response.data.data
console.log(this.categories)
})
.catch(function (error) {
console.log(error)
......@@ -458,13 +460,12 @@ export default {
fd.append('name', this.name)
fd.append('ordering', this.ordering)
fd.append('parent_id', this.parent_id)
fd.append('images', this.image)
fd.append('image', this.image)
this.$axios
.post('/categories/',
fd,
{
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
}
......@@ -484,21 +485,19 @@ export default {
})
})
},
deleteCategory (ID, index) {
deleteCategory () {
const self = this
this.editedIndex = this.categories.indexOf(index)
if (confirm('Do you really want to delete?')) {
const currentPostIndex = this.editedIndex
try {
this.$axios
.delete(`/categories/${ID}`,
.delete(`/categories/${this.eID}`,
{
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
.then((response) => {
this.categories.splice(this.editedIndex, 1)
this.categories.splice(currentPostIndex, 1)
self.$toast.success('Category deleted successfully!', {
duration: 3000
})
......@@ -506,17 +505,19 @@ export default {
} catch (error) {
console.log(error)
}
}
},
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) {
this.eID = item.id
this.eName = item.name
this.eOrdering = item.ordering
this.eParentId = item.parent_id
this.eImage = item.images
this.eImage = item.image
this.editedIndex = this.categories.indexOf(item)
console.log(this.eID)
console.log(this.eImage)
......@@ -525,7 +526,7 @@ export default {
this.eName = item.name
this.eOrdering = item.ordering
this.eParentId = item.parent_id
this.eImage = item.images
this.eImage = item.image
},
updateCategory (userID) {
const self = this
......@@ -538,7 +539,7 @@ export default {
fd.append('name', this.eName)
fd.append('ordering', this.eOrdering)
if (typeof this.eImage !== 'string') {
fd.append('images', this.eImage)
fd.append('image', this.eImage)
}
try {
this.$axios
......@@ -546,7 +547,6 @@ export default {
fd,
{
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
}
......@@ -565,3 +565,28 @@ export default {
}
}
</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 @@
small-chips
dense
accept="image/*"
prepend-icon="mdi-camera"
@change="fileSelected"
/>
</v-col>
......@@ -255,6 +256,7 @@
accept="image/*"
small-chips
dense
prepend-icon="mdi-camera"
/>
</v-col>
</v-row>
......
pages/products/index.vue
View file @ 2cf94e98
......@@ -72,7 +72,6 @@
label="File input"
small-chips
dense
accept="image/*"
multiple
/>
</v-col>
......@@ -330,6 +329,7 @@
multiple
/>
</v-col>
<!-- <v-img v-if="typeof eImage === 'string'" :src="eImages" /> -->
<v-col cols="12">
<v-btn
class="mx-2"
......@@ -479,6 +479,7 @@ export default {
color: '',
size: '',
quantity: '',
dialog: false,
dialog1: false,
dialog2: false,
dialog3: false,
......
pages/users/index.vue
View file @ 2cf94e98
......@@ -10,46 +10,24 @@
</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>
<!-- modal-create -->
<v-dialog v-model="dialog2" persistent max-width="600px">
<v-card>
<v-card-title>
<span class="text-h5">User Profile</span>
<span class="text-h5">User Edit</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 cols="12" sm="6" md="4">
<v-text-field v-model="eName" label="Legal name*" required />
</v-col>
<v-col cols="12">
<v-text-field
v-model="email"
label="Email*"
required
/>
<v-text-field v-model="eEmail" label="Email*" required />
</v-col>
<v-col cols="12">
<v-text-field
v-model="password"
v-model="ePassword"
label="Password*"
type="password"
required
......@@ -61,59 +39,95 @@
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn color="blue darken-1" text @click="dialog2 = false">
Close
</v-btn>
<v-btn
color="blue darken-1"
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
color="blue darken-1"
text
type="submit"
@click="dialog1 = false; createUser();"
@click="
deleteUser();
dialogDelete = false;
"
>
Save
OK
</v-btn>
<v-spacer />
</v-card-actions>
</v-card>
</v-dialog>
</div>
<!-- modal-create -->
<v-data-table
: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-model="dialog2"
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 Edit</span>
<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-col cols="12" sm="6" md="4">
<v-text-field
v-model="eName"
v-model="name"
label="Legal name*"
required
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="eEmail"
v-model="email"
label="Email*"
required
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="ePassword"
v-model="password"
label="Password*"
type="password"
required
......@@ -125,37 +139,52 @@
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn
color="blue darken-1"
text
@click="dialog2 = false"
>
<v-btn color="blue darken-1" text @click="dialog1 = false">
Close
</v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog2 = false; updateUser();"
@click="
dialog1 = false;
createUser();
"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-data-table :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>
</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);">
<v-icon
:id="item.id"
small
class="mr-2"
@click="
dialog2 = true;
editUser(item)
"
>
mdi-pencil
</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
</v-icon>
</template>
......@@ -191,8 +220,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: [
......@@ -296,7 +325,9 @@ export default {
.get('/users/', {
headers: {
'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))
......@@ -307,14 +338,19 @@ export default {
createUser () {
const self = this
this.$axios
.post('/users/', {
.post(
'/users/',
{
email: this.email,
password: this.password,
name: this.name
}, {
},
{
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
}
}
)
......@@ -336,16 +372,17 @@ export default {
})
})
},
deleteUser (userID, index) {
deleteUser () {
const self = this
this.editedIndex = this.users.indexOf(index)
if (confirm('Do you really want to delete?')) {
const currentPostIndex = this.editedIndex
try {
this.$axios
.delete(`/users/${userID}`)
.then((response) => {
this.$axios.delete(`/users/${this.eID}`, {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
}).then((response) => {
console.log(response.data)
this.users.splice(this.editedIndex, 1)
this.users.splice(currentPostIndex, 1)
self.$toast.success('User deleted successfully!', {
duration: 3000
})
......@@ -353,7 +390,6 @@ export default {
} catch (error) {
console.log(error)
}
}
},
editUser (user) {
this.eID = user.id
......@@ -368,7 +404,8 @@ export default {
console.log(this.eEmail)
console.log(this?.eID)
this.$axios
.put(`/users/${this?.eID}`,
.put(
`/users/${this?.eID}`,
{
email: this.eEmail,
password: this.ePassword,
......@@ -377,7 +414,9 @@ export default {
{
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
}
}
)
......@@ -395,6 +434,10 @@ export default {
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