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>
<div>
<v-toolbar
......@@ -10,56 +11,106 @@
<v-toolbar-title>
<v-btn href="/users">
<span>USER</span>
<v-icon dense>mdi-account</v-icon>
<v-icon dense>
mdi-account
</v-icon>
</v-btn>
<v-btn href="/categories">
<span>CATEGORY</span>
<v-icon dense>mdi-heart</v-icon>
<v-icon dense>
mdi-heart
</v-icon>
</v-btn>
<v-btn href="/products">
<span>PRODUCT</span>
<v-icon dense> mdi-briefcase</v-icon>
<v-icon dense>
mdi-briefcase
</v-icon>
</v-btn>
<v-btn href="/posts">
<span>POST</span>
<v-icon dense>mdi-newspaper</v-icon>
<v-icon dense>
mdi-newspaper
</v-icon>
</v-btn>
</v-toolbar-title>
<v-spacer />
<v-toolbar-title>{{ $auth.$storage.getUniversal("userName") }}</v-toolbar-title>
<v-btn icon @click="logout">
<v-icon>mdi-export</v-icon>
<v-toolbar-title class="profile">
{{ $auth.$storage.getUniversal("userName") }}
</v-toolbar-title>
<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>
</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>
</div>
</template>
<script>
export default {
methods: {
logout () {
fetch('http://127.0.0.1:8000/api/logout', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
accept: 'application/json'
},
body: JSON.stringify({
async logout () {
try {
const resp = await this.$axios.post('/logout', {
token: this.$auth.$storage.getUniversal('token')
})
if (resp.status === '200') {
this.$toast.success('Logout!', {
duration: 2000
})
this.$router.push('/login')
localStorage.setItem('token', '')
this.$auth.$storage.setUniversal('loggedIn', 'false')
this.$auth.$storage.setUniversal('token', '')
this.$auth.$storage.setUniversal('userName', '')
this.$router.push('/login')
}
} catch (e) {
this.$toast.error('ERR !', {
duration: 2000
})
}
}
}
}
</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 ...')
}
middleware/web.js
View file @ 7b82a25d
export default ({ redirect }) => {
export default ({ redirect, store }) => {
if (typeof localStorage !== 'undefined' && !localStorage.getItem('token')) {
return redirect('/login')
}
......
pages/categories/index.vue
View file @ 7b82a25d
......@@ -82,6 +82,7 @@
<v-text-field
v-model="eName"
label="Name"
:rules="nameRules"
required
/>
</v-col>
......@@ -90,6 +91,7 @@
v-model="eOrdering"
label="Ordering"
type="number"
:rules="requiredRules"
required
/>
</v-col>
......@@ -146,7 +148,7 @@
v-model="dialog1"
persistent
max-width="600px"
@submit.prevent="createUser"
lazy-validation
>
<template #activator="{ on, attrs }">
<v-btn
......@@ -173,6 +175,8 @@
<v-text-field
v-model="name"
label="Name"
:rules="nameRules"
lazy-validation
required
/>
</v-col>
......@@ -181,6 +185,7 @@
v-model="ordering"
label="Ordering"
type="number"
:rules="numberRules"
required
/>
</v-col>
......@@ -191,12 +196,12 @@
item-text="name"
item-value="id"
label="Parent*"
:rules="requiredRules"
/>
</v-col>
<v-col cols="12">
<v-file-input
v-model="image"
accept="image/*"
label="Image"
prepend-icon="mdi-camera"
/>
......@@ -282,17 +287,20 @@
</v-dialog>
</v-toolbar>
</template>
<template #item.created_at="{ item }">
<template #[`item.index`]="{ index }">
{{ index + 1 }}
</template>
<template #[`item.created_at`]="{ item }">
<span>{{ formatDate(item.created_at) }}</span>
</template>
<template #item.updated_at="{ item }">
<template #[`item.updated_at`]="{ item }">
<span>{{ formatDate(item.updated_at) }}</span>
</template>
<template #item.actions="{ item }">
<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="dialogDelete = true;getID(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)">
......@@ -328,11 +336,12 @@ export default {
options: [],
headers: [
{
text: 'Name',
text: '#',
align: 'start',
value: 'name',
value: 'index',
groupable: false
},
{ text: 'Name', value: 'name', groupable: false },
{ text: 'Odering', value: 'ordering', groupable: false },
{ text: 'Created', value: 'created_at', groupable: false },
{ text: 'Updated', value: 'updated_at', groupable: false },
......@@ -374,6 +383,17 @@ export default {
disabled: false,
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 {
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)
......@@ -460,13 +478,14 @@ export default {
fd.append('name', this.name)
fd.append('ordering', this.ordering)
fd.append('parent_id', this.parent_id)
if (this.image != null) {
fd.append('image', this.image)
}
this.$axios
.post('/categories/',
fd,
{
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
}
......@@ -485,6 +504,8 @@ export default {
duration: 3000
})
})
this.getCategories()
this.clearData()
},
deleteCategory () {
const self = this
......@@ -494,7 +515,6 @@ export default {
.delete(`/categories/${this.eID}`,
{
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
......@@ -519,7 +539,7 @@ export default {
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)
......@@ -528,7 +548,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
......@@ -540,7 +560,7 @@ export default {
}
fd.append('name', this.eName)
fd.append('ordering', this.eOrdering)
if (typeof this.eImage !== 'string') {
if (typeof this.eImage !== 'string' && this.eImage != null) {
fd.append('image', this.eImage)
}
try {
......@@ -549,7 +569,6 @@ export default {
fd,
{
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
}
......@@ -564,6 +583,13 @@ export default {
} catch (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 {
padding-left: 30px !important;
background-color: rgba(211, 211, 211, 0.133);
}
.depth-1 > td:first-child {
.depth-1 > td:nth-child(2) {
padding-left: 30px !important;
}
.depth-2 > td:first-child {
padding-left: 45px !important;
}
.depth-3 > td:first-child {
.depth-2 > td:nth-child(2) {
padding-left: 60px !important;
}
.depth-4 > td:first-child {
padding-left: 75px !important;
}
.depth-5 > td:first-child {
.depth-3 > td:nth-child(2) {
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>
pages/login.vue
View file @ 7b82a25d
......@@ -126,8 +126,8 @@ export default {
return response.json()
})
console.log(resp.status)
localStorage.setItem('token', 'Bearer ' + resp.data.bearer_token)
this.$auth.$storage.setUniversal('token', 'Bearer ' + resp.data.bearer_token)
localStorage.setItem('token', 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('loggedIn', 'true')
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) {
const api = $axios.create({
headers: {
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 Vuex from 'vuex'
Vue.use(Vuex)
Vue.mixin({
methods: {
......@@ -12,6 +14,11 @@ Vue.mixin({
if (day.length < 2) { day = '0' + day }
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