Skip to content

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

add middleware

parent b8f3a8df
Hide whitespace changes
Inline Side-by-side
Showing with 277 additions and 84 deletions
components/Navbar.vue
View file @ 9f846362
...@@ -86,7 +86,7 @@ export default { ...@@ -86,7 +86,7 @@ export default {
const resp = await this.$axios.post('/logout', { const resp = await this.$axios.post('/logout', {
token: this.$auth.$storage.getUniversal('token') token: this.$auth.$storage.getUniversal('token')
}) })
if (resp.status === '200') { if (resp.status === 200) {
this.$toast.success('Logout!', { this.$toast.success('Logout!', {
duration: 2000 duration: 2000
}) })
......
middleware/web.js
View file @ 9f846362
export default ({ redirect, store }) => { export default ({ redirect, store, $auth }) => {
if (typeof localStorage !== 'undefined' && !localStorage.getItem('token')) { if (!$auth.$storage.getLocalStorage('token')) {
return redirect('/login') return redirect('/login')
} }
} }
pages/categories/index.vue
View file @ 9f846362
...@@ -110,8 +110,18 @@ ...@@ -110,8 +110,18 @@
accept="image/*" accept="image/*"
label="Image" label="Image"
prepend-icon="mdi-camera" prepend-icon="mdi-camera"
@change="fileSelected"
/> />
</v-col> </v-col>
<v-col cols="12">
<img
v-if="file"
contain
max-height="300"
max-width="500"
:src="file"
>
</v-col>
<v-img v-if="typeof eImage === 'string'" :src="eImage" /> <v-img v-if="typeof eImage === 'string'" :src="eImage" />
</v-row> </v-row>
</v-container> </v-container>
...@@ -122,7 +132,7 @@ ...@@ -122,7 +132,7 @@
<v-btn <v-btn
color="blue darken-1" color="blue darken-1"
text text
@click="dialog2 = false" @click="dialog2 = false; clearFile()"
> >
Close Close
</v-btn> </v-btn>
...@@ -140,8 +150,6 @@ ...@@ -140,8 +150,6 @@
<v-data-table :headers="headers" :items="categories" :item-class="indentation" sort-by="calories" class="elevation-1"> <v-data-table :headers="headers" :items="categories" :item-class="indentation" sort-by="calories" class="elevation-1">
<template #top> <template #top>
<v-toolbar flat> <v-toolbar flat>
<v-toolbar-title>Category Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical />
<v-spacer /> <v-spacer />
<v-toolbar-title style="float: right"> <v-toolbar-title style="float: right">
<v-dialog <v-dialog
...@@ -157,7 +165,7 @@ ...@@ -157,7 +165,7 @@
v-bind="attrs" v-bind="attrs"
v-on="on" v-on="on"
> >
New Category CREATE NEW
</v-btn> </v-btn>
</template> </template>
<v-card> <v-card>
...@@ -189,7 +197,7 @@ ...@@ -189,7 +197,7 @@
required required
/> />
</v-col> </v-col>
<v-col cols="12"> <!-- <v-col cols="12">
<v-select <v-select
v-model="parent_id" v-model="parent_id"
:items="categories" :items="categories"
...@@ -198,14 +206,67 @@ ...@@ -198,14 +206,67 @@
label="Parent*" label="Parent*"
:rules="requiredRules" :rules="requiredRules"
/> />
</v-col> -->
<v-col cols="12">
<v-card
class="mx-auto"
max-width="500"
dark
>
<v-sheet class="pa-4">
<v-text-field
v-model="search"
label="Search Company Directory"
dark
flat
solo-inverted
hide-details
clearable
clear-icon="mdi-close-circle-outline"
/>
<v-checkbox
v-model="caseSensitive"
dark
hide-details
label="Case sensitive search"
/>
</v-sheet>
<v-card-text>
<v-treeview
v-model="parent_id"
:items="categories"
:search="search"
:filter="filter"
:open.sync="open"
selectable
item-value="id"
:rule="singleRules"
>
<!-- <template #prepend="{ item }">
<v-icon
v-if="item.children"
v-text="`mdi-${item.id === 1 ? 'home-variant' : 'folder-network'}`"
/>
</template> -->
</v-treeview>
</v-card-text>
</v-card>
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-file-input <v-file-input
v-model="image" v-model="image"
label="Image" label="Image"
prepend-icon="mdi-camera" prepend-icon="mdi-camera"
@change="fileSelected"
/> />
</v-col> </v-col>
<v-col cols="12">
<img
v-if="file"
:src="file"
contain
>
</v-col>
</v-row> </v-row>
</v-container> </v-container>
<small>*indicates required field</small> <small>*indicates required field</small>
...@@ -215,7 +276,7 @@ ...@@ -215,7 +276,7 @@
<v-btn <v-btn
color="blue darken-1" color="blue darken-1"
text text
@click="dialog1 = false" @click="dialog1 = false; clearFile()"
> >
Close Close
</v-btn> </v-btn>
...@@ -323,7 +384,11 @@ export default { ...@@ -323,7 +384,11 @@ export default {
middleware: ['web'], middleware: ['web'],
data: () => { data: () => {
return { return {
parent_id: '', open: [1, 2],
search: null,
caseSensitive: false,
file: null,
parent_id: [],
name: '', name: '',
ordering: '', ordering: '',
image: null, image: null,
...@@ -342,7 +407,7 @@ export default { ...@@ -342,7 +407,7 @@ export default {
groupable: false groupable: false
}, },
{ text: 'Name', value: 'name', groupable: false }, { text: 'Name', value: 'name', groupable: false },
{ text: 'Odering', value: 'ordering', groupable: false }, { text: 'Ordering', 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 },
{ text: 'Actions', value: 'actions', sortable: false, groupable: false } { text: 'Actions', value: 'actions', sortable: false, groupable: false }
...@@ -359,7 +424,7 @@ export default { ...@@ -359,7 +424,7 @@ export default {
name: '', name: '',
id: '', id: '',
ordering: '', ordering: '',
parent_id: '', parent_id: [],
created_at: '', created_at: '',
updated_at: '' updated_at: ''
}, },
...@@ -394,12 +459,21 @@ export default { ...@@ -394,12 +459,21 @@ export default {
numberRules: [ numberRules: [
v => !!v || 'This field is required', v => !!v || 'This field is required',
v => v > 0 || 'value must be a positive integer' v => v > 0 || 'value must be a positive integer'
],
singleRules: [
v => !!v || 'This field is required',
v => (v.length < 2) || 'Chose 1 pls -____-'
] ]
} }
}, },
computed: { computed: {
formTitle () { formTitle () {
return this.editedIndex === -1 ? 'New Item' : 'Edit Item' return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
},
filter () {
return this.caseSensitive
? (item, search, textKey) => item[textKey].includes(search)
: undefined
} }
}, },
watch: { watch: {
...@@ -505,6 +579,7 @@ export default { ...@@ -505,6 +579,7 @@ export default {
}) })
}) })
this.getCategories() this.getCategories()
this.clearFile()
this.clearData() this.clearData()
}, },
deleteCategory () { deleteCategory () {
...@@ -579,17 +654,42 @@ export default { ...@@ -579,17 +654,42 @@ export default {
}) })
this.editedItem = response.data.data this.editedItem = response.data.data
Object.assign(this.categories[this.editedIndex], this.editedItem) Object.assign(this.categories[this.editedIndex], this.editedItem)
this.clearFile()
}) })
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }
}, },
clearData () { clearData () {
// eslint-disable-next-line no-unused-expressions, no-sequences this.parent_id = []
this.parent_id = '', this.name = ''
this.name = '', this.ordering = ''
this.ordering = '',
this.image = null this.image = null
},
fileSelected (event) {
if (event) {
this.file = URL.createObjectURL(event)
console.log(this.file)
} else {
this.file = null
}
},
clearFile () {
this.file = null
},
onOpen (e) {
// ignore initial open
if (!this.__initial) {
this.__initial = true
return
}
console.log('toggle arrow clicked', e)
},
onSelected (e) {
console.log('checkbox clicked', e)
this.parent_id = e[0]
console.log(this.parent_id)
} }
} }
} }
...@@ -618,4 +718,8 @@ export default { ...@@ -618,4 +718,8 @@ export default {
.depth-5 > td:nth-child(2) { .depth-5 > td:nth-child(2) {
padding-left: 150px !important; padding-left: 150px !important;
} }
img {
width: 100%;
height: 100%
}
</style> </style>
pages/posts/index.vue
View file @ 9f846362
<!-- eslint-disable vue/require-v-for-key --> <!-- eslint-disable vue/require-v-for-key -->
<!-- eslint-disable-next-line no-console -->
<template> <template>
<div> <div>
<div> <div>
...@@ -156,8 +157,18 @@ ...@@ -156,8 +157,18 @@
small-chips small-chips
dense dense
prepend-icon="mdi-camera" prepend-icon="mdi-camera"
@change="fileSelected"
/> />
</v-col> </v-col>
<v-col cols="12" class="v-image v-responsive theme--dark">
<img
v-if="file"
contain
max-height="300"
max-width="500"
:src="file"
>
</v-col>
</v-row> </v-row>
</v-container> </v-container>
<small>*indicates required field</small> <small>*indicates required field</small>
...@@ -167,7 +178,7 @@ ...@@ -167,7 +178,7 @@
<v-btn <v-btn
color="blue darken-1" color="blue darken-1"
text text
@click="dialog = false" @click="dialog = false; clearFile()"
> >
Close Close
</v-btn> </v-btn>
...@@ -205,8 +216,6 @@ ...@@ -205,8 +216,6 @@
<v-data-table :headers="headers" :items="posts" sort-by="calories" class="elevation-1"> <v-data-table :headers="headers" :items="posts" sort-by="calories" class="elevation-1">
<template #top> <template #top>
<v-toolbar flat> <v-toolbar flat>
<v-toolbar-title>Post Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical />
<v-spacer /> <v-spacer />
<v-toolbar-title> <v-toolbar-title>
<!-- modal-create --> <!-- modal-create -->
...@@ -224,7 +233,7 @@ ...@@ -224,7 +233,7 @@
v-bind="attrs" v-bind="attrs"
v-on="on" v-on="on"
> >
New Post create new
</v-btn> </v-btn>
</template> </template>
<v-card> <v-card>
...@@ -290,7 +299,7 @@ ...@@ -290,7 +299,7 @@
@change="fileSelected" @change="fileSelected"
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12" class="v-image v-responsive theme--dark">
<img <img
v-if="file" v-if="file"
contain contain
...@@ -308,7 +317,7 @@ ...@@ -308,7 +317,7 @@
<v-btn <v-btn
color="blue darken-1" color="blue darken-1"
text text
@click="dialog1 = false" @click="dialog1 = false; clearFile()"
> >
Close Close
</v-btn> </v-btn>
...@@ -398,9 +407,9 @@ export default { ...@@ -398,9 +407,9 @@ export default {
href: '/home' href: '/home'
}, },
{ {
text: 'Product', text: 'Post',
disabled: false, disabled: false,
href: '/products' href: '/posts'
} }
], ],
statusDefault: [ statusDefault: [
...@@ -593,6 +602,8 @@ export default { ...@@ -593,6 +602,8 @@ export default {
this.editedItem = response.data.data this.editedItem = response.data.data
console.log(this.editedItem) console.log(this.editedItem)
this.posts.push(this.editedItem) this.posts.push(this.editedItem)
this.clearData()
this.clearFile()
}) })
.catch((errors) => { .catch((errors) => {
self.$toast.error('something went wrong while trying create!', { self.$toast.error('something went wrong while trying create!', {
...@@ -682,6 +693,7 @@ export default { ...@@ -682,6 +693,7 @@ export default {
}) })
this.editedItem = response.data.data this.editedItem = response.data.data
Object.assign(this.posts[currentPostIndex], this.editedItem) Object.assign(this.posts[currentPostIndex], this.editedItem)
this.clearFile()
}) })
.catch((error) => { .catch((error) => {
console.log(error) console.log(error)
...@@ -697,11 +709,24 @@ export default { ...@@ -697,11 +709,24 @@ export default {
} else { } else {
this.file = null this.file = null
} }
},
clearData () {
this.title = ''
this.category_id = null
this.content = ''
this.status = null
this.images = []
},
clearFile () {
this.file = null
} }
} }
} }
</script> </script>
<style> <style>
img {
width: 100%;
height: 100%;
}
</style> </style>
pages/products/index.vue
View file @ 9f846362
...@@ -172,9 +172,16 @@ ...@@ -172,9 +172,16 @@
small-chips small-chips
dense dense
multiple multiple
@change="fileSelected"
@click:clear="clearImage"
/> />
</v-col> </v-col>
<v-img v-if="typeof eImages === 'string'" :src="eImages" /> <v-col v-if="files" cols="12">
<v-col v-for="(image, index) in files" :key="index" cols="12">
<v-img :src="image" contain />
</v-col>
</v-col>
<!-- <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"
...@@ -251,7 +258,7 @@ ...@@ -251,7 +258,7 @@
<v-btn <v-btn
color="blue darken-1" color="blue darken-1"
text text
@click="dialog3 = false" @click="dialog3 = false; clearImage();"
> >
Close Close
</v-btn> </v-btn>
...@@ -311,8 +318,6 @@ ...@@ -311,8 +318,6 @@
> >
<template #top> <template #top>
<v-toolbar flat> <v-toolbar flat>
<v-toolbar-title>Product Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical />
<v-spacer /> <v-spacer />
<v-toolbar-title> <v-toolbar-title>
<v-dialog <v-dialog
...@@ -328,7 +333,7 @@ ...@@ -328,7 +333,7 @@
v-bind="attrs" v-bind="attrs"
v-on="on" v-on="on"
> >
New Product create new
</v-btn> </v-btn>
</template> </template>
<v-card> <v-card>
...@@ -388,8 +393,15 @@ ...@@ -388,8 +393,15 @@
:rules="imageRules" :rules="imageRules"
lazy-validation lazy-validation
prepend-icon="mdi-camera" prepend-icon="mdi-camera"
@change="fileSelected"
@click:clear="clearImage"
/> />
</v-col> </v-col>
<v-col v-if="files" cols="12">
<v-col v-for="(image, index) in files" :key="index" cols="12">
<v-img :src="image" contain />
</v-col>
</v-col>
<v-col cols="12"> <v-col cols="12">
<v-btn <v-btn
class="mx-2" class="mx-2"
...@@ -466,7 +478,7 @@ ...@@ -466,7 +478,7 @@
<v-btn <v-btn
color="blue darken-1" color="blue darken-1"
text text
@click="dialog1 = false" @click="dialog1 = false; clearData ();"
> >
Close Close
</v-btn> </v-btn>
...@@ -514,6 +526,7 @@ export default { ...@@ -514,6 +526,7 @@ export default {
middleware: ['web'], middleware: ['web'],
data: () => { data: () => {
return { return {
files: [],
name: '', name: '',
id: '', id: '',
category_id: '', category_id: '',
...@@ -759,6 +772,7 @@ export default { ...@@ -759,6 +772,7 @@ export default {
this.editedItem = response.data.data this.editedItem = response.data.data
console.log(this.editedItem) console.log(this.editedItem)
this.products.push(this.editedItem) this.products.push(this.editedItem)
this.clearData()
}) })
.catch((errors) => { .catch((errors) => {
console.log(errors.response.data.message) console.log(errors.response.data.message)
...@@ -910,6 +924,33 @@ export default { ...@@ -910,6 +924,33 @@ export default {
} }
this.eVariants.splice(currentVariantIndex, 1) this.eVariants.splice(currentVariantIndex, 1)
} }
},
fileSelected (event) {
if (event) {
for (let i = 0; i < event.length; i++) {
console.log(event[i])
this.files.push(URL.createObjectURL(event[i]))
}
}
console.log(this.files)
},
clearData () {
this.name = ''
this.category_id = ''
this.price = ''
this.description = ''
this.images = []
this.variants = [
{
color: '',
size: '',
quantity: ''
}
]
this.files.length = 0
},
clearImage () {
this.files.length = 0
} }
} }
} }
......
pages/users/index.vue
View file @ 9f846362
...@@ -18,29 +18,31 @@ ...@@ -18,29 +18,31 @@
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-container> <v-container>
<v-row> <v-form ref="formEdit">
<v-col cols="12" sm="6" md="4"> <v-row>
<v-text-field v-model="eName" label="Legal name*" :rules="nameRules" required /> <v-col cols="12" sm="6" md="4">
</v-col> <v-text-field v-model="eName" label="Legal name*" :rules="nameRules" required />
<v-col cols="12"> </v-col>
<v-text-field v-model="eEmail" label="Email*" :rules="emailRules" required /> <v-col cols="12">
</v-col> <v-text-field v-model="eEmail" label="Email*" :rules="emailRules" required />
<v-col cols="12"> </v-col>
<v-text-field <v-col cols="12">
v-model="ePassword" <v-text-field
label="Password*" v-model="ePassword"
type="password" label="Password*"
:rules="passwordRules" type="password"
required :rules="passwordRules"
/> required
</v-col> />
</v-row> </v-col>
</v-row>
</v-form>
</v-container> </v-container>
<small>*indicates required field</small> <small>*indicates required field</small>
</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"> <v-btn color="blue darken-1" text @click="dialog2 = false; clearData();">
Close Close
</v-btn> </v-btn>
<v-btn <v-btn
...@@ -48,8 +50,9 @@ ...@@ -48,8 +50,9 @@
text text
type="submit" type="submit"
@click=" @click="
dialog2 = false; // dialog2 = false;
updateUser(); updateUser();
validateForm();
" "
> >
Save Save
...@@ -90,20 +93,17 @@ ...@@ -90,20 +93,17 @@
> >
<template #top> <template #top>
<v-toolbar flat> <v-toolbar flat>
<v-toolbar-title>User Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical />
<v-spacer /> <v-spacer />
<v-toolbar-title style="float: right"> <v-toolbar-title style="float: right">
<v-dialog <v-dialog
v-model="dialog1" v-model="dialog1"
persistent persistent
max-width="600px" max-width="600px"
@submit.prevent="createUser"
lazy-validation 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">
New USER CREATE NEW
</v-btn> </v-btn>
</template> </template>
<v-card> <v-card>
...@@ -112,33 +112,35 @@ ...@@ -112,33 +112,35 @@
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-container> <v-container>
<v-row> <v-form ref="form">
<v-col cols="12" sm="6" md="4"> <v-row>
<v-text-field <v-col cols="12" sm="6" md="4">
v-model="name" <v-text-field
label="Legal name*" v-model="name"
:rules="nameRules" label="Legal name*"
required :rules="nameRules"
/> required
</v-col> />
<v-col cols="12"> </v-col>
<v-text-field <v-col cols="12">
v-model="email" <v-text-field
label="Email*" v-model="email"
:rules="emailRules" label="Email*"
required :rules="emailRules"
/> required
</v-col> />
<v-col cols="12"> </v-col>
<v-text-field <v-col cols="12">
v-model="password" <v-text-field
label="Password*" v-model="password"
type="password" label="Password*"
:rules="passwordRules" type="password"
required :rules="passwordRules"
/> required
</v-col> />
</v-row> </v-col>
</v-row>
</v-form>
</v-container> </v-container>
<small>*indicates required field</small> <small>*indicates required field</small>
</v-card-text> </v-card-text>
...@@ -152,8 +154,9 @@ ...@@ -152,8 +154,9 @@
text text
type="submit" type="submit"
@click=" @click="
dialog1 = false; // dialog1 = false;
createUser(); createUser();
validateForm()
" "
> >
Save Save
...@@ -211,6 +214,7 @@ export default { ...@@ -211,6 +214,7 @@ export default {
middleware: ['web'], middleware: ['web'],
data: () => { data: () => {
return { return {
valid: true,
email: '', email: '',
name: '', name: '',
password: '', password: '',
...@@ -224,9 +228,8 @@ export default { ...@@ -224,9 +228,8 @@ export default {
align: 'start', align: 'start',
value: 'index' value: 'index'
}, },
{ text: 'Name', value: 'name' }, { text: 'Name', value: 'name', sortable: false },
{ text: 'email', value: 'email' }, { text: 'email', value: 'email' },
{ text: 'status', value: 'id', sortable: false },
{ text: 'created', value: 'created_at' }, { text: 'created', value: 'created_at' },
{ text: 'updated', value: 'updated_at' }, { text: 'updated', value: 'updated_at' },
{ text: 'Actions', value: 'actions', sortable: false } { text: 'Actions', value: 'actions', sortable: false }
...@@ -378,6 +381,7 @@ export default { ...@@ -378,6 +381,7 @@ export default {
} }
) )
.then((response) => { .then((response) => {
this.dialog1 = false
self.$toast.success('User created successfully!', { self.$toast.success('User created successfully!', {
duration: 3000 duration: 3000
}) })
...@@ -385,8 +389,11 @@ export default { ...@@ -385,8 +389,11 @@ export default {
this.editedItem = response.data.data this.editedItem = response.data.data
console.log(this.editedItem) console.log(this.editedItem)
this.users.push(this.editedItem) this.users.push(this.editedItem)
this.clearData()
}) })
.catch((errors) => { .catch((errors) => {
this.dialog1 = true
this.validate()
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!', {
...@@ -443,6 +450,7 @@ export default { ...@@ -443,6 +450,7 @@ export default {
} }
) )
.then((response) => { .then((response) => {
this.dialog2 = false
self.$toast.success('User updated successfully!', { self.$toast.success('User updated successfully!', {
duration: 3000 duration: 3000
}) })
...@@ -460,6 +468,21 @@ export default { ...@@ -460,6 +468,21 @@ export default {
getID (item) { getID (item) {
this.eID = item.id this.eID = item.id
this.editedIndex = this.users.indexOf(item) this.editedIndex = this.users.indexOf(item)
},
clearData () {
this.name = ''
this.email = ''
this.password = ''
},
async validate (name) {
const { valid } = await this.$refs.form.validate()
if (valid) { alert('Form is valid') }
},
async validateForm (name) {
const { valid } = await this.$refs.formEdit.validate()
if (valid) { alert('Form is valid') }
} }
} }
} }
......
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