Skip to content

K
kiaisoft_tuananh_nuxt
Commit 7b82a25d authored by Kemm23's avatar Kemm23
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/UI-vuetify
parents fb0853d5 39666ecf
Expand all Show whitespace changes
Inline Side-by-side
Showing with 819 additions and 675 deletions
components/Navbar.vue
View file @ 7b82a25d
<!-- eslint-disable vue/multi-word-component-names -->
<template> <template>
<div> <div>
<v-toolbar <v-toolbar
...@@ -10,56 +11,106 @@ ...@@ -10,56 +11,106 @@
<v-toolbar-title> <v-toolbar-title>
<v-btn href="/users"> <v-btn href="/users">
<span>USER</span> <span>USER</span>
<v-icon dense>mdi-account</v-icon> <v-icon dense>
mdi-account
</v-icon>
</v-btn> </v-btn>
<v-btn href="/categories"> <v-btn href="/categories">
<span>CATEGORY</span> <span>CATEGORY</span>
<v-icon dense>mdi-heart</v-icon> <v-icon dense>
mdi-heart
</v-icon>
</v-btn> </v-btn>
<v-btn href="/products"> <v-btn href="/products">
<span>PRODUCT</span> <span>PRODUCT</span>
<v-icon dense> mdi-briefcase</v-icon> <v-icon dense>
mdi-briefcase
</v-icon>
</v-btn> </v-btn>
<v-btn href="/posts"> <v-btn href="/posts">
<span>POST</span> <span>POST</span>
<v-icon dense>mdi-newspaper</v-icon> <v-icon dense>
mdi-newspaper
</v-icon>
</v-btn> </v-btn>
</v-toolbar-title> </v-toolbar-title>
<v-spacer /> <v-spacer />
<v-toolbar-title>{{ $auth.$storage.getUniversal("userName") }}</v-toolbar-title> <v-toolbar-title class="profile">
{{ $auth.$storage.getUniversal("userName") }}
<v-btn icon @click="logout"> </v-toolbar-title>
<v-icon>mdi-export</v-icon> <div class="text-center">
<v-menu offset-y>
<template #activator="{ on, attrs }">
<v-btn
icon
dark
v-bind="attrs"
v-on="on"
>
<v-icon>mdi-menu-down</v-icon>
</v-btn> </v-btn>
</template>
<v-list>
<v-list-item-group
color="primary"
>
<v-list-item
@click="logout()"
>
<v-list-item-icon>
<v-icon>
mdi-logout
</v-icon>
</v-list-item-icon>
<v-list-item-title>
Logout
</v-list-item-title>
</v-list-item>
</v-list-item-group>
</v-list>
</v-menu>
</div>
</v-toolbar> </v-toolbar>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
logout () { async logout () {
fetch('http://127.0.0.1:8000/api/logout', { try {
method: 'POST', const resp = await this.$axios.post('/logout', {
headers: {
'Content-Type': 'application/json',
accept: 'application/json'
},
body: JSON.stringify({
token: this.$auth.$storage.getUniversal('token') token: this.$auth.$storage.getUniversal('token')
}) })
if (resp.status === '200') {
this.$toast.success('Logout!', {
duration: 2000
}) })
this.$router.push('/login')
localStorage.setItem('token', '') localStorage.setItem('token', '')
this.$auth.$storage.setUniversal('loggedIn', 'false') this.$auth.$storage.setUniversal('loggedIn', 'false')
this.$auth.$storage.setUniversal('token', '') this.$auth.$storage.setUniversal('token', '')
this.$auth.$storage.setUniversal('userName', '') this.$auth.$storage.setUniversal('userName', '')
this.$router.push('/login') }
} catch (e) {
this.$toast.error('ERR !', {
duration: 2000
})
}
} }
} }
} }
</script> </script>
<style scoped>
.v-toolbar--prominent:not(.v-toolbar--bottom) .v-toolbar__title.profile {
align-self: baseline;
padding-top: 5px;
}
.v-application--is-ltr .v-list-item__action:first-child, .v-application--is-ltr .v-list-item__icon:first-child {
margin-right: 15px;
}
</style>
middleware/auth.js
View file @ 7b82a25d
export default function(context) { export default function (context) {
console.log('[LOG]: middleware is running ...') console.log('[LOG]: middleware is running ...')
} }
middleware/web.js
View file @ 7b82a25d
export default ({ redirect }) => { export default ({ redirect, store }) => {
if (typeof localStorage !== 'undefined' && !localStorage.getItem('token')) { if (typeof localStorage !== 'undefined' && !localStorage.getItem('token')) {
return redirect('/login') return redirect('/login')
} }
......
pages/categories/index.vue
View file @ 7b82a25d
...@@ -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,12 +196,12 @@ ...@@ -191,12 +196,12 @@
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"
/> />
...@@ -282,17 +287,20 @@ ...@@ -282,17 +287,20 @@
</v-dialog> </v-dialog>
</v-toolbar> </v-toolbar>
</template> </template>
<template #item.created_at="{ item }"> <template #[`item.index`]="{ index }">
{{ index + 1 }}
</template>
<template #[`item.created_at`]="{ item }">
<span>{{ formatDate(item.created_at) }}</span> <span>{{ formatDate(item.created_at) }}</span>
</template> </template>
<template #item.updated_at="{ item }"> <template #[`item.updated_at`]="{ item }">
<span>{{ formatDate(item.updated_at) }}</span> <span>{{ formatDate(item.updated_at) }}</span>
</template> </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="dialogDelete = true;getID(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)">
...@@ -328,11 +336,12 @@ export default { ...@@ -328,11 +336,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 },
...@@ -374,6 +383,17 @@ export default { ...@@ -374,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'
] ]
} }
}, },
...@@ -442,13 +462,11 @@ export default { ...@@ -442,13 +462,11 @@ 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)
...@@ -460,13 +478,14 @@ export default { ...@@ -460,13 +478,14 @@ 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,
{ {
headers: { headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}` Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
} }
} }
...@@ -485,6 +504,8 @@ export default { ...@@ -485,6 +504,8 @@ export default {
duration: 3000 duration: 3000
}) })
}) })
this.getCategories()
this.clearData()
}, },
deleteCategory () { deleteCategory () {
const self = this const self = this
...@@ -494,7 +515,6 @@ export default { ...@@ -494,7 +515,6 @@ export default {
.delete(`/categories/${this.eID}`, .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')}`
} }
}) })
...@@ -519,7 +539,7 @@ export default { ...@@ -519,7 +539,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
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)
...@@ -528,7 +548,7 @@ export default { ...@@ -528,7 +548,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
...@@ -540,7 +560,7 @@ export default { ...@@ -540,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 {
...@@ -549,7 +569,6 @@ export default { ...@@ -549,7 +569,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')}`
} }
} }
...@@ -564,6 +583,13 @@ export default { ...@@ -564,6 +583,13 @@ export default {
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }
},
clearData () {
// eslint-disable-next-line no-unused-expressions, no-sequences
this.parent_id = '',
this.name = '',
this.ordering = '',
this.image = null
} }
} }
} }
...@@ -577,19 +603,19 @@ export default { ...@@ -577,19 +603,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/login.vue
View file @ 7b82a25d
...@@ -126,8 +126,8 @@ export default { ...@@ -126,8 +126,8 @@ export default {
return response.json() return response.json()
}) })
console.log(resp.status) console.log(resp.status)
localStorage.setItem('token', 'Bearer ' + resp.data.bearer_token) localStorage.setItem('token', resp.data.bearer_token)
this.$auth.$storage.setUniversal('token', 'Bearer ' + resp.data.bearer_token) this.$auth.$storage.setUniversal('token', resp.data.bearer_token)
this.$auth.$storage.setUniversal('userName', resp.data.name) this.$auth.$storage.setUniversal('userName', resp.data.name)
this.$auth.$storage.setUniversal('loggedIn', 'true') this.$auth.$storage.setUniversal('loggedIn', 'true')
if (resp.status == 'success') { if (resp.status == 'success') {
......
pages/posts/index.vue
View file @ 7b82a25d
This diff is collapsed.
pages/products/index.vue
View file @ 7b82a25d
This diff is collapsed.
pages/users/index.vue
View file @ 7b82a25d
This diff is collapsed.
plugins/axios.js
View file @ 7b82a25d
...@@ -15,7 +15,8 @@ export default function ({ $axios }, inject, redirect) { ...@@ -15,7 +15,8 @@ export default function ({ $axios }, inject, redirect) {
const api = $axios.create({ const api = $axios.create({
headers: { headers: {
common: { common: {
Accept: 'application/json, text/plain, */*' Accept: 'application/json, text/plain, */*',
'Content-Type': 'application/json, text/plain, */*'
} }
} }
}) })
......
plugins/formatTime.js
View file @ 7b82a25d
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
Vue.mixin({ Vue.mixin({
methods: { methods: {
...@@ -12,6 +14,11 @@ Vue.mixin({ ...@@ -12,6 +14,11 @@ Vue.mixin({
if (day.length < 2) { day = '0' + day } if (day.length < 2) { day = '0' + day }
return [year, month, day].join('-') return [year, month, day].join('-')
},
keepToken () {
const TOKEN = localStorage.getItem('token')
this.$auth.$storage.setUniversal('token', TOKEN)
} }
} }
}) })
store/index.js
View file @ 7b82a25d
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
modules: {
}
})
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