Skip to content

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

add validation

parent 6afa5824
Show whitespace changes
Inline Side-by-side
Showing with 79 additions and 27 deletions
components/Navbar.vue
View file @ fdd32d6c
...@@ -57,7 +57,6 @@ ...@@ -57,7 +57,6 @@
</template> </template>
<v-list> <v-list>
<v-list-item-group <v-list-item-group
v-model="selectedItem"
color="primary" color="primary"
> >
<v-list-item <v-list-item
......
pages/categories/index.vue
View file @ fdd32d6c
...@@ -82,6 +82,7 @@ ...@@ -82,6 +82,7 @@
<v-text-field <v-text-field
v-model="eName" v-model="eName"
label="Name" label="Name"
:rules="nameRules"
required required
/> />
</v-col> </v-col>
...@@ -90,6 +91,7 @@ ...@@ -90,6 +91,7 @@
v-model="eOrdering" v-model="eOrdering"
label="Ordering" label="Ordering"
type="number" type="number"
:rules="requiredRules"
required required
/> />
</v-col> </v-col>
...@@ -146,7 +148,7 @@ ...@@ -146,7 +148,7 @@
v-model="dialog1" v-model="dialog1"
persistent persistent
max-width="600px" max-width="600px"
@submit.prevent="createUser" lazy-validation
> >
<template #activator="{ on, attrs }"> <template #activator="{ on, attrs }">
<v-btn <v-btn
...@@ -173,6 +175,8 @@ ...@@ -173,6 +175,8 @@
<v-text-field <v-text-field
v-model="name" v-model="name"
label="Name" label="Name"
:rules="nameRules"
lazy-validation
required required
/> />
</v-col> </v-col>
...@@ -181,6 +185,7 @@ ...@@ -181,6 +185,7 @@
v-model="ordering" v-model="ordering"
label="Ordering" label="Ordering"
type="number" type="number"
:rules="numberRules"
required required
/> />
</v-col> </v-col>
...@@ -191,17 +196,16 @@ ...@@ -191,17 +196,16 @@
item-text="name" item-text="name"
item-value="id" item-value="id"
label="Parent*" label="Parent*"
:rules="requiredRules"
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-file-input <v-file-input
v-model="image" v-model="image"
accept="image/*"
label="Image" label="Image"
prepend-icon="mdi-camera" prepend-icon="mdi-camera"
/> />
</v-col> </v-col>
<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>
...@@ -379,6 +383,17 @@ export default { ...@@ -379,6 +383,17 @@ export default {
disabled: false, disabled: false,
href: '/categories' href: '/categories'
} }
],
nameRules: [
v => !!v || 'Name is required',
v => (v && v.length <= 255) || 'Name must be less than 255 characters'
],
requiredRules: [
v => !!v || 'This field is required',
],
numberRules: [
v => !!v || 'This field is required',
v => v > 0 || 'value must be a positive integer'
] ]
} }
}, },
...@@ -452,7 +467,6 @@ export default { ...@@ -452,7 +467,6 @@ export default {
}) })
.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)
...@@ -464,7 +478,9 @@ export default { ...@@ -464,7 +478,9 @@ 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)
if (this.image != null) {
fd.append('image', this.image) fd.append('image', this.image)
}
this.$axios this.$axios
.post('/categories/', .post('/categories/',
fd, fd,
...@@ -489,6 +505,7 @@ export default { ...@@ -489,6 +505,7 @@ export default {
}) })
}) })
this.getCategories() this.getCategories()
this.clearData()
}, },
deleteCategory () { deleteCategory () {
const self = this const self = this
...@@ -543,7 +560,7 @@ export default { ...@@ -543,7 +560,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' && this.eImage != null) {
fd.append('image', this.eImage) fd.append('image', this.eImage)
} }
try { try {
...@@ -566,6 +583,13 @@ export default { ...@@ -566,6 +583,13 @@ export default {
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }
},
clearData () {
// eslint-disable-next-line no-unused-expressions
this.parent_id = '',
this.name = '',
this.ordering = '',
this.image = null
} }
} }
} }
......
pages/products/index.vue
View file @ fdd32d6c
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
<v-text-field <v-text-field
v-model="sName" v-model="sName"
label="Name" label="Name"
disabled readonly
/> />
</v-col> </v-col>
<v-col <v-col
...@@ -40,21 +40,21 @@ ...@@ -40,21 +40,21 @@
item-text="name" item-text="name"
item-value="id" item-value="id"
label="Category" label="Category"
disabled readonly
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="sPrice" v-model="sPrice"
label="Price" label="Price"
disabled readonly
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="sDescription" v-model="sDescription"
label="Description" label="Description"
disabled readonly
/> />
</v-col> </v-col>
<v-col v-for="(image, index) in sImages" :key="index" cols="12"> <v-col v-for="(image, index) in sImages" :key="index" cols="12">
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
<v-text-field <v-text-field
v-model="variant.color" v-model="variant.color"
label="Color" label="Color"
disabled readonly
/> />
</v-col> </v-col>
<v-col <v-col
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
<v-text-field <v-text-field
v-model="variant.size" v-model="variant.size"
label="Size" label="Size"
disabled readonly
/> />
</v-col> </v-col>
<v-col <v-col
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
<v-text-field <v-text-field
v-model="variant.quantity" v-model="variant.quantity"
label="Quantity" label="Quantity"
disabled readonly
/> />
</v-col> </v-col>
<v-col /> <v-col />
...@@ -134,6 +134,7 @@ ...@@ -134,6 +134,7 @@
<v-text-field <v-text-field
v-model="eName" v-model="eName"
label="Name*" label="Name*"
:rules="requiredRules"
required required
/> />
</v-col> </v-col>
...@@ -146,12 +147,14 @@ ...@@ -146,12 +147,14 @@
item-text="name" item-text="name"
item-value="id" item-value="id"
label="Category" label="Category"
:rules="requiredRules"
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="ePrice" v-model="ePrice"
label="Price*" label="Price*"
:rules="requiredRules"
required required
/> />
</v-col> </v-col>
...@@ -159,6 +162,7 @@ ...@@ -159,6 +162,7 @@
<v-text-field <v-text-field
v-model="eDescription" v-model="eDescription"
label="Description" label="Description"
:rules="requiredRules"
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
...@@ -170,7 +174,7 @@ ...@@ -170,7 +174,7 @@
multiple multiple
/> />
</v-col> </v-col>
<v-img v-if="typeof eImage === 'string'" :src="eImages" /> <v-img v-if="typeof eImages === 'string'" :src="eImages" />
<v-col cols="12"> <v-col cols="12">
<v-btn <v-btn
class="mx-2" class="mx-2"
...@@ -194,6 +198,7 @@ ...@@ -194,6 +198,7 @@
<v-text-field <v-text-field
v-model="variant.color" v-model="variant.color"
label="Color*" label="Color*"
:rules="requiredRules"
required required
/> />
</v-col> </v-col>
...@@ -205,6 +210,7 @@ ...@@ -205,6 +210,7 @@
<v-text-field <v-text-field
v-model="variant.size" v-model="variant.size"
label="Size*" label="Size*"
:rules="requiredRules"
required required
/> />
</v-col> </v-col>
...@@ -216,6 +222,7 @@ ...@@ -216,6 +222,7 @@
<v-text-field <v-text-field
v-model="variant.quantity" v-model="variant.quantity"
label="Quantity*" label="Quantity*"
:rules="numberRules"
required required
/> />
</v-col> </v-col>
...@@ -312,6 +319,7 @@ ...@@ -312,6 +319,7 @@
v-model="dialog1" v-model="dialog1"
persistent persistent
max-width="600px" max-width="600px"
lazy-validation
> >
<template #activator="{ on, attrs }"> <template #activator="{ on, attrs }">
<v-btn <v-btn
...@@ -338,7 +346,9 @@ ...@@ -338,7 +346,9 @@
<v-text-field <v-text-field
v-model="name" v-model="name"
label="Name*" label="Name*"
:rules="requiredRules"
required required
lazy-validation
/> />
</v-col> </v-col>
<v-col <v-col
...@@ -350,12 +360,14 @@ ...@@ -350,12 +360,14 @@
item-text="name" item-text="name"
item-value="id" item-value="id"
label="Category" label="Category"
:rules="requiredRules"
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="price" v-model="price"
label="Price*" label="Price*"
:rules="requiredRules"
required required
/> />
</v-col> </v-col>
...@@ -363,6 +375,7 @@ ...@@ -363,6 +375,7 @@
<v-text-field <v-text-field
v-model="description" v-model="description"
label="Description" label="Description"
:rules="requiredRules"
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
...@@ -372,6 +385,9 @@ ...@@ -372,6 +385,9 @@
small-chips small-chips
dense dense
multiple multiple
:rules="imageRules"
lazy-validation
prepend-icon="mdi-camera"
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
...@@ -397,6 +413,7 @@ ...@@ -397,6 +413,7 @@
<v-text-field <v-text-field
v-model="variant.color" v-model="variant.color"
label="Color*" label="Color*"
:rules="requiredRules"
required required
/> />
</v-col> </v-col>
...@@ -408,6 +425,7 @@ ...@@ -408,6 +425,7 @@
<v-text-field <v-text-field
v-model="variant.size" v-model="variant.size"
label="Size*" label="Size*"
:rules="requiredRules"
required required
/> />
</v-col> </v-col>
...@@ -419,6 +437,7 @@ ...@@ -419,6 +437,7 @@
<v-text-field <v-text-field
v-model="variant.quantity" v-model="variant.quantity"
label="Quantity*" label="Quantity*"
:rules="numberRules"
required required
/> />
</v-col> </v-col>
...@@ -528,7 +547,7 @@ export default { ...@@ -528,7 +547,7 @@ export default {
}, },
{ text: 'Name', value: 'name' }, { text: 'Name', value: 'name' },
{ text: 'Category', value: 'category.name' }, { text: 'Category', value: 'category.name' },
{ text: 'Price', value: 'price', sortable: false }, { text: 'Price', value: 'price' },
{ text: 'Stock', value: 'stock' }, { text: 'Stock', value: 'stock' },
{ text: 'Actions', value: 'actions', sortable: false } { text: 'Actions', value: 'actions', sortable: false }
], ],
...@@ -594,7 +613,18 @@ export default { ...@@ -594,7 +613,18 @@ export default {
status: '', status: '',
created_at: '', created_at: '',
updated_at: '' updated_at: ''
} },
requiredRules: [
v => !!v || 'This field is required'
],
numberRules: [
v => !!v || 'This field is required',
v => v > 0 || 'value must be a positive integer'
],
imageRules: [
v => !!v || 'Images is required',
v => (v && v.length > 0) || 'Images is required'
]
} }
}, },
computed: { computed: {
...@@ -857,7 +887,6 @@ export default { ...@@ -857,7 +887,6 @@ export default {
getVariant (index, item) { getVariant (index, item) {
this.editedVariantIndex = index this.editedVariantIndex = index
this.idVariant = item.id this.idVariant = item.id
console.log(this.idVariant)
}, },
removeVariant () { removeVariant () {
const self = this const self = this
...@@ -881,9 +910,6 @@ export default { ...@@ -881,9 +910,6 @@ export default {
} }
this.eVariants.splice(currentVariantIndex, 1) this.eVariants.splice(currentVariantIndex, 1)
} }
},
seeVariant () {
console.log(this.variants)
} }
} }
} }
......
pages/users/index.vue
View file @ fdd32d6c
...@@ -164,6 +164,9 @@ ...@@ -164,6 +164,9 @@
</v-toolbar-title> </v-toolbar-title>
</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>
...@@ -217,12 +220,11 @@ export default { ...@@ -217,12 +220,11 @@ export default {
dialogDelete: false, dialogDelete: false,
headers: [ headers: [
{ {
text: 'Name', text: '#',
align: 'start', align: 'start',
sortable: false, value: 'index'
value: 'name'
}, },
{ text: 'id', value: 'id' }, { text: 'Name', value: 'name' },
{ text: 'email', value: 'email' }, { text: 'email', value: 'email' },
{ text: 'status', value: 'id', sortable: false }, { text: 'status', value: 'id', sortable: false },
{ text: 'created', value: 'created_at' }, { text: 'created', value: 'created_at' },
...@@ -267,7 +269,7 @@ export default { ...@@ -267,7 +269,7 @@ export default {
}, },
nameRules: [ nameRules: [
v => !!v || 'Name is required', v => !!v || 'Name is required',
v => (v && v.length <= 10) || 'Name must be less than 10 characters' v => (v && v.length <= 255) || 'Name must be less than 255 characters'
], ],
emailRules: [ emailRules: [
v => !!v || 'E-mail is required', v => !!v || 'E-mail is required',
...@@ -275,7 +277,8 @@ export default { ...@@ -275,7 +277,8 @@ export default {
], ],
passwordRules: [ passwordRules: [
v => !!v || 'Password is required', v => !!v || 'Password is required',
v => (v && v.length >= 6) || 'Password must be more than 6 characters' v => (v && v.length >= 6) || 'Password must be more than 6 characters',
v => (v && v.length <= 255) || 'Password must be less than 255 characters'
] ]
} }
}, },
......
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