Skip to content

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

add validate user screen

parents 4fd1bcfe 3ac4c11d
Show whitespace changes
Inline Side-by-side
Showing with 141 additions and 83 deletions
pages/categories/index.vue
View file @ a415f7f3
...@@ -283,6 +283,9 @@ ...@@ -283,6 +283,9 @@
</v-dialog> </v-dialog>
</v-toolbar> </v-toolbar>
</template> </template>
<template #[`item.index`]="{ index }">
{{ index + 1 }}
</template>
<template #item.created_at="{ item }"> <template #item.created_at="{ item }">
<span>{{ formatDate(item.created_at) }}</span> <span>{{ formatDate(item.created_at) }}</span>
</template> </template>
...@@ -329,11 +332,12 @@ export default { ...@@ -329,11 +332,12 @@ export default {
options: [], options: [],
headers: [ headers: [
{ {
text: 'Name', text: '#',
align: 'start', align: 'start',
value: 'name', value: 'index',
groupable: false groupable: false
}, },
{ text: 'Name', value: 'name', groupable: false },
{ text: 'Odering', value: 'ordering', groupable: false }, { text: 'Odering', value: 'ordering', groupable: false },
{ text: 'Created', value: 'created_at', groupable: false }, { text: 'Created', value: 'created_at', groupable: false },
{ text: 'Updated', value: 'updated_at', groupable: false }, { text: 'Updated', value: 'updated_at', groupable: false },
...@@ -484,6 +488,7 @@ export default { ...@@ -484,6 +488,7 @@ export default {
duration: 3000 duration: 3000
}) })
}) })
this.getCategories()
}, },
deleteCategory () { deleteCategory () {
const self = this const self = this
...@@ -574,19 +579,19 @@ export default { ...@@ -574,19 +579,19 @@ export default {
padding-left: 30px !important; padding-left: 30px !important;
background-color: rgba(211, 211, 211, 0.133); background-color: rgba(211, 211, 211, 0.133);
} }
.depth-1 > td:first-child { .depth-1 > td:nth-child(2) {
padding-left: 30px !important; padding-left: 30px !important;
} }
.depth-2 > td:first-child { .depth-2 > td:nth-child(2) {
padding-left: 45px !important;
}
.depth-3 > td:first-child {
padding-left: 60px !important; padding-left: 60px !important;
} }
.depth-4 > td:first-child { .depth-3 > td:nth-child(2) {
padding-left: 75px !important;
}
.depth-5 > td:first-child {
padding-left: 90px !important; padding-left: 90px !important;
} }
.depth-4 > td:nth-child(2) {
padding-left: 120px !important;
}
.depth-5 > td:nth-child(2) {
padding-left: 150px !important;
}
</style> </style>
pages/index.vue
View file @ a415f7f3
...@@ -78,6 +78,7 @@ ...@@ -78,6 +78,7 @@
<script> <script>
export default { export default {
name: 'IndexPage' name: 'IndexPage',
middleware: ['web']
} }
</script> </script>
pages/posts/index.vue
View file @ a415f7f3
<!-- eslint-disable vue/valid-v-slot -->
<!-- eslint-disable no-sequences -->
<!-- eslint-disable no-unused-expressions -->
<!-- eslint-disable no-unused-expressions -->
<!-- eslint-disable vue/require-v-for-key --> <!-- eslint-disable vue/require-v-for-key -->
<template> <template>
<div> <div>
...@@ -50,7 +47,7 @@ ...@@ -50,7 +47,7 @@
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-textarea
v-model="sContent" v-model="sContent"
label="Content" label="Content"
word-break="break-word" word-break="break-word"
...@@ -70,9 +67,12 @@ ...@@ -70,9 +67,12 @@
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-col v-for="(image, index) in sImages" :key="index" cols="12"> <!-- <v-col v-for="(image, index) in sImages" :key="index" cols="12">
<v-img :src="image" contain /> <v-img :src="image"/> -->
</v-col> <v-img
v-if="typeof sImages === 'string'"
:src="sImages"
/>
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
...@@ -87,14 +87,6 @@ ...@@ -87,14 +87,6 @@
> >
Close Close
</v-btn> </v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog2 = false;"
>
Save
</v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
...@@ -134,7 +126,7 @@ ...@@ -134,7 +126,7 @@
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-textarea
v-model="eContent" v-model="eContent"
label="Content" label="Content"
required required
...@@ -148,7 +140,7 @@ ...@@ -148,7 +140,7 @@
:items="statusDefaul" :items="statusDefaul"
item-text="name" item-text="name"
item-value="id" item-value="id"
label="Category" label="Status"
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
...@@ -258,7 +250,7 @@ ...@@ -258,7 +250,7 @@
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-textarea
v-model="content" v-model="content"
label="Content" label="Content"
required required
...@@ -313,10 +305,16 @@ ...@@ -313,10 +305,16 @@
</v-toolbar-title> </v-toolbar-title>
</v-toolbar> </v-toolbar>
</template> </template>
<template #item.category_id="{ item }"> <template #[`item.index`]="{ index }">
{{ index + 1 }}
</template>
<template #[`item.category_id`]="{ item }">
{{ categories.find(x => x.id === item.category_id)?.name }} {{ categories.find(x => x.id === item.category_id)?.name }}
</template> </template>
<template #item.user_id="{ item }"> <template #[`item.status`]="{ item }">
{{ statusDefaul.find(x => x.id == item.status)?.name }}
</template>
<template #[`item.user_id`]="{ item }">
{{ users.find(x => x.id === item.user_id)?.name }} {{ users.find(x => x.id === item.user_id)?.name }}
</template> </template>
<template #[`item.actions`]="{ item }"> <template #[`item.actions`]="{ item }">
...@@ -361,15 +359,14 @@ export default { ...@@ -361,15 +359,14 @@ export default {
dialogDelete: false, dialogDelete: false,
headers: [ headers: [
{ {
text: 'Title', text: '#',
align: 'start', align: 'start',
sortable: false, value: 'index'
value: 'title'
}, },
{ text: 'id', value: 'id' }, { text: 'Title', value: 'title' },
{ text: 'Category ID', value: 'category_id' }, { text: 'Category', value: 'category_id' },
{ text: 'author', value: 'user_id' }, { text: 'Author', value: 'user_id' },
{ text: 'status', value: 'status' }, { text: 'Status', value: 'status' },
{ text: 'Actions', value: 'actions', sortable: false } { text: 'Actions', value: 'actions', sortable: false }
], ],
items: [ items: [
...@@ -406,8 +403,8 @@ export default { ...@@ -406,8 +403,8 @@ export default {
sCategoryId: '', sCategoryId: '',
sContent: '', sContent: '',
sUserId: '', sUserId: '',
sStatus: '', sStatus: [],
sImages: null, sImages: [],
eId: '', eId: '',
eTitle: '', eTitle: '',
eCategoryId: [], eCategoryId: [],
...@@ -465,8 +462,8 @@ export default { ...@@ -465,8 +462,8 @@ export default {
this.sCategoryId = '' this.sCategoryId = ''
this.sContent = '' this.sContent = ''
this.sUserId = '' this.sUserId = ''
this.sStatus = '' this.sStatus = []
this.sImages = null this.sImages = []
}, },
editItem (item) { editItem (item) {
this.editedIndex = this.posts.indexOf(item) this.editedIndex = this.posts.indexOf(item)
...@@ -520,7 +517,6 @@ export default { ...@@ -520,7 +517,6 @@ 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')}`
} }
}) })
...@@ -533,7 +529,6 @@ export default { ...@@ -533,7 +529,6 @@ export default {
this.$axios this.$axios
.get('/posts/', { .get('/posts/', {
headers: { headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}` Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
} }
}) })
...@@ -603,7 +598,6 @@ export default { ...@@ -603,7 +598,6 @@ export default {
const ID = item.id const ID = item.id
try { try {
const resp = await this.$axios.get(`/posts/${ID}`, { const resp = await this.$axios.get(`/posts/${ID}`, {
method: 'GET',
headers: { headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}` Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
} }
......
pages/products/index.vue
View file @ a415f7f3
<!-- eslint-disable vue/require-v-for-key -->
<!-- eslint-disable vue/valid-v-slot -->
<template> <template>
<div> <div>
<div> <div>
...@@ -9,7 +7,6 @@ ...@@ -9,7 +7,6 @@
</template> </template>
</v-breadcrumbs> </v-breadcrumbs>
</div> </div>
<div style="float: right" />
<!-- show-modal --> <!-- show-modal -->
<v-dialog <v-dialog
v-model="dialog2" v-model="dialog2"
...@@ -230,7 +227,7 @@ ...@@ -230,7 +227,7 @@
dark dark
x-small x-small
color="red" color="red"
@click="removeVariant(index, variant)" @click="getVariant(index, variant); dialogDeleteVariant = true"
> >
<v-icon dark> <v-icon dark>
mdi-minus mdi-minus
...@@ -280,6 +277,23 @@ ...@@ -280,6 +277,23 @@
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
<v-dialog v-model="dialogDeleteVariant" 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 @click="removeVariant(); dialogDeleteVariant=false">
OK
</v-btn>
<v-spacer />
</v-card-actions>
</v-card>
</v-dialog>
<!-- table --> <!-- table -->
<div> <div>
<v-data-table <v-data-table
...@@ -451,6 +465,9 @@ ...@@ -451,6 +465,9 @@
</v-toolbar-title> </v-toolbar-title>
</v-toolbar> </v-toolbar>
</template> </template>
<template #[`item.index`]="{ index }">
{{ index + 1 }}
</template>
<template #[`item.actions`]="{ item }"> <template #[`item.actions`]="{ item }">
<v-icon :id="item.id" small @click="editProduct(item)"> <v-icon :id="item.id" small @click="editProduct(item)">
mdi-pencil mdi-pencil
...@@ -480,7 +497,7 @@ export default { ...@@ -480,7 +497,7 @@ export default {
return { return {
name: '', name: '',
id: '', id: '',
category_id: null, category_id: '',
price: '', price: '',
stock: '', stock: '',
description: '', description: '',
...@@ -500,18 +517,19 @@ export default { ...@@ -500,18 +517,19 @@ export default {
dialog2: false, dialog2: false,
dialog3: false, dialog3: false,
dialogDelete: false, dialogDelete: false,
dialogDeleteVariant: false,
options: [], options: [],
headers: [ headers: [
{ {
text: 'Name', text: '#',
align: 'start', align: 'start',
sortable: false, sortable: false,
value: 'name' value: 'index'
}, },
{ text: 'id', value: 'id' }, { text: 'Name', value: 'name' },
{ text: 'category ID', value: 'category_id' }, { text: 'Category', value: 'category.name' },
{ text: 'price', value: 'price', sortable: false }, { text: 'Price', value: 'price', sortable: false },
{ text: 'stock', value: 'stock' }, { text: 'Stock', value: 'stock' },
{ text: 'Actions', value: 'actions', sortable: false } { text: 'Actions', value: 'actions', sortable: false }
], ],
items: [ items: [
...@@ -544,6 +562,8 @@ export default { ...@@ -544,6 +562,8 @@ export default {
quantity: '' quantity: ''
} }
], ],
idVariant: '',
editedVariantIndex: '',
eId: '', eId: '',
eName: '', eName: '',
eCategoryId: '', eCategoryId: '',
...@@ -603,7 +623,7 @@ export default { ...@@ -603,7 +623,7 @@ export default {
this.images = [] this.images = []
this.products = [] this.products = []
this.product = [] this.product = []
this.categories = [] this.categories = ''
this.sName = '' this.sName = ''
this.sCategoryId = '' this.sCategoryId = ''
this.sPrice = '' this.sPrice = ''
...@@ -615,7 +635,6 @@ export default { ...@@ -615,7 +635,6 @@ export default {
color: '', color: '',
size: '', size: '',
quantity: '' quantity: ''
} }
] ]
}, },
...@@ -659,7 +678,6 @@ export default { ...@@ -659,7 +678,6 @@ 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')}`
} }
}) })
...@@ -672,7 +690,6 @@ export default { ...@@ -672,7 +690,6 @@ export default {
this.$axios this.$axios
.get('/products/', { .get('/products/', {
headers: { headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}` Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
} }
}) })
...@@ -702,9 +719,7 @@ export default { ...@@ -702,9 +719,7 @@ export default {
, ,
{ {
headers: { headers: {
'Content-Type': 'multipart/form-data ', Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`,
Accept: 'application/json; multipart/form-data'
} }
}) })
.then((response) => { .then((response) => {
...@@ -734,7 +749,6 @@ export default { ...@@ -734,7 +749,6 @@ export default {
this.$axios this.$axios
.delete(`/products/${this.eID}`, { .delete(`/products/${this.eID}`, {
headers: { headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}` Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
} }
}) })
...@@ -754,7 +768,6 @@ export default { ...@@ -754,7 +768,6 @@ export default {
const resp = await this.$axios.get(`/products/${ID}`, { const resp = await this.$axios.get(`/products/${ID}`, {
method: 'GET', method: 'GET',
headers: { headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}` Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
} }
}) })
...@@ -789,24 +802,25 @@ export default { ...@@ -789,24 +802,25 @@ export default {
fd.append('price', this.ePrice) fd.append('price', this.ePrice)
fd.append('category_id', this.eCategoryId) fd.append('category_id', this.eCategoryId)
fd.append('description', this.eDescription) fd.append('description', this.eDescription)
if (this.eVariants) {
for (let i = 0; i < this.eVariants.length; i++) { for (let i = 0; i < this.eVariants.length; i++) {
if (typeof this.eVariants[i].id !== 'undefined') {
fd.append(`variants[${i}][id]`, this.eVariants[i].id) fd.append(`variants[${i}][id]`, this.eVariants[i].id)
}
fd.append(`variants[${i}][color]`, this.eVariants[i].color) fd.append(`variants[${i}][color]`, this.eVariants[i].color)
fd.append(`variants[${i}][quantity]`, this.eVariants[i].quantity) fd.append(`variants[${i}][quantity]`, this.eVariants[i].quantity)
fd.append(`variants[${i}][size]`, this.eVariants[i].size) fd.append(`variants[${i}][size]`, this.eVariants[i].size)
} }
} if (this.eImages) {
for (let j = 0; j < this.eImages.length; j++) { for (let j = 0; j < this.eImages.length; j++) {
fd.append(`images[${j}]`, this.eImages[j]) fd.append(`images[${j}]`, this.eImages[j])
} }
}
const currentPostIndex = this.editedIndex const currentPostIndex = this.editedIndex
try { try {
this.$axios this.$axios
.post(`/products/update/${this?.eId}`, .post(`/products/update/${this?.eId}`,
fd, { fd, {
headers: { headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}` Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
} }
} }
...@@ -840,8 +854,36 @@ export default { ...@@ -840,8 +854,36 @@ export default {
remove (index) { remove (index) {
this.variants.splice(index, 1) this.variants.splice(index, 1)
}, },
removeVariant (index, variant) { getVariant (index, item) {
this.eVariants.splice(index, 1) this.editedVariantIndex = index
this.idVariant = item.id
console.log(this.idVariant)
},
removeVariant () {
const self = this
const currentVariantIndex = this.editedVariantIndex
if (this.idVariant !== null) {
try {
this.$axios.delete(`/products/delete-variant/${this.idVariant}`,
{
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
}
).then((response) => {
self.$toast.success('Remove variant successfully!', {
duration: 3000
})
})
this.getProducts()
} catch (error) {
console.log(error)
}
this.eVariants.splice(currentVariantIndex, 1)
}
},
seeVariant () {
console.log(this.variants)
} }
} }
} }
......
pages/users/index.vue
View file @ a415f7f3
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
</v-breadcrumbs> </v-breadcrumbs>
</div> </div>
<!-- modal-create --> <!-- modal-create -->
<v-dialog v-model="dialog2" persistent max-width="600px"> <v-dialog v-model="dialog2" persistent max-width="600px" lazy-validation>
<v-card> <v-card>
<v-card-title> <v-card-title>
<span class="text-h5">User Edit</span> <span class="text-h5">User Edit</span>
...@@ -20,16 +20,17 @@ ...@@ -20,16 +20,17 @@
<v-container> <v-container>
<v-row> <v-row>
<v-col cols="12" sm="6" md="4"> <v-col cols="12" sm="6" md="4">
<v-text-field v-model="eName" label="Legal name*" required /> <v-text-field v-model="eName" label="Legal name*" :rules="nameRules" required />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field v-model="eEmail" label="Email*" required /> <v-text-field v-model="eEmail" label="Email*" :rules="emailRules" required />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="ePassword" v-model="ePassword"
label="Password*" label="Password*"
type="password" type="password"
:rules="passwordRules"
required required
/> />
</v-col> </v-col>
...@@ -98,6 +99,7 @@ ...@@ -98,6 +99,7 @@
persistent persistent
max-width="600px" max-width="600px"
@submit.prevent="createUser" @submit.prevent="createUser"
lazy-validation
> >
<template #activator="{ on, attrs }"> <template #activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on"> <v-btn color="primary" dark v-bind="attrs" v-on="on">
...@@ -115,6 +117,7 @@ ...@@ -115,6 +117,7 @@
<v-text-field <v-text-field
v-model="name" v-model="name"
label="Legal name*" label="Legal name*"
:rules="nameRules"
required required
/> />
</v-col> </v-col>
...@@ -122,6 +125,7 @@ ...@@ -122,6 +125,7 @@
<v-text-field <v-text-field
v-model="email" v-model="email"
label="Email*" label="Email*"
:rules="emailRules"
required required
/> />
</v-col> </v-col>
...@@ -130,6 +134,7 @@ ...@@ -130,6 +134,7 @@
v-model="password" v-model="password"
label="Password*" label="Password*"
type="password" type="password"
:rules="passwordRules"
required required
/> />
</v-col> </v-col>
...@@ -259,7 +264,19 @@ export default { ...@@ -259,7 +264,19 @@ export default {
status: '', status: '',
created_at: '', created_at: '',
updated_at: '' updated_at: ''
} },
nameRules: [
v => !!v || 'Name is required',
v => (v && v.length <= 10) || 'Name must be less than 10 characters'
],
emailRules: [
v => !!v || 'E-mail is required',
v => /.+@.+\..+/.test(v) || 'E-mail must be valid'
],
passwordRules: [
v => !!v || 'Password is required',
v => (v && v.length >= 6) || 'Password must be more than 6 characters'
]
} }
}, },
computed: { computed: {
...@@ -367,7 +384,6 @@ export default { ...@@ -367,7 +384,6 @@ export default {
this.users.push(this.editedItem) this.users.push(this.editedItem)
}) })
.catch((errors) => { .catch((errors) => {
this.$bvModal.hide('modal-login')
console.log(errors.response.data.message) console.log(errors.response.data.message)
this.message = errors.response.data.message this.message = errors.response.data.message
self.$toast.error('something went wrong while trying create!', { self.$toast.error('something went wrong while trying create!', {
......
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