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
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
<!-- 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 -->
<template>
<div>
......@@ -12,26 +9,16 @@
</template>
</v-breadcrumbs>
</div>
<div style="float: right">
<div style="float: right" />
<!-- modal-show -->
<v-dialog
v-model="dialog1"
v-model="dialog2"
persistent
max-width="600px"
enctype="multipart/form-data"
>
<template #activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
New Post
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">CREAT POST</span>
<span class="text-h5">POST</span>
</v-card-title>
<v-card-text>
<v-container>
......@@ -42,49 +29,49 @@
md="4"
>
<v-text-field
v-model="title"
label="Title*"
required
v-model="sTitle"
label="Title"
readonly
/>
</v-col>
<v-col
cols="12"
>
<v-select
v-model="category_id"
v-model="sCategoryId"
:items="categories"
item-text="name"
item-value="id"
label="Category"
readonly
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="content"
<v-textarea
v-model="sContent"
label="Content"
required
word-break="break-word"
readonly
/>
</v-col>
<v-col
cols="12"
>
<v-select
v-model="status"
v-model="sStatus"
:items="statusDefaul"
item-text="name"
item-value="id"
label="Status"
readonly
/>
</v-col>
<v-col cols="12">
<v-file-input
v-model="images"
label="File input"
small-chips
dense
accept="image/*"
prepend-icon="mdi-camera"
@change="fileSelected"
<!-- <v-col v-for="(image, index) in sImages" :key="index" cols="12">
<v-img :src="image"/> </v-col> -->
<v-img
v-if="typeof sImages == 'string'"
:src="sImages"
/>
</v-col>
</v-row>
......@@ -96,31 +83,23 @@
<v-btn
color="blue darken-1"
text
@click="dialog1 = false"
@click="dialog2 = false"
>
Close
</v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog1 = false; createPost()"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
<!-- modal-show -->
<!-- modal-edit -->
<v-dialog
v-model="dialog2"
v-model="dialog"
persistent
max-width="600px"
lazy-validation
>
<v-card>
<v-card-title>
<span class="text-h5">POST</span>
<span class="text-h5">EDIT POST</span>
</v-card-title>
<v-card-text>
<v-container>
......@@ -131,46 +110,53 @@
md="4"
>
<v-text-field
v-model="sTitle"
label="Title"
disabled
v-model="eTitle"
label="Title*"
:rules="requiredRules"
required
/>
</v-col>
<v-col
cols="12"
>
<v-select
v-model="sCategoryId"
v-model="eCategoryId"
:items="categories"
item-text="name"
item-value="id"
label="Category"
disabled
:rules="requiredRules"
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="sContent"
<v-textarea
v-model="eContent"
label="Content"
disabled
required
:rules="requiredRules"
/>
</v-col>
<v-col
cols="12"
>
<v-select
v-model="sStatus"
v-model="eStatus"
:items="statusDefaul"
item-text="name"
item-value="id"
label="Category"
disabled
label="Status"
:rules="requiredRules"
/>
</v-col>
<v-col cols="12">
<v-col v-for="(image, index) in sImages" :key="index" cols="12">
<v-img :src="image" contain />
</v-col>
<v-file-input
v-model="eImages"
label="File input"
accept="image/*"
small-chips
dense
prepend-icon="mdi-camera"
/>
</v-col>
</v-row>
</v-container>
......@@ -181,7 +167,7 @@
<v-btn
color="blue darken-1"
text
@click="dialog2 = false"
@click="dialog = false"
>
Close
</v-btn>
......@@ -189,22 +175,61 @@
color="blue darken-1"
text
type="submit"
@click="dialog2 = false;"
@click="dialog = false; updatePost()"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- modal-edit -->
<!-- modal-delete -->
<v-dialog v-model="dialogDelete" 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="deletePost(); dialogDelete = false">
OK
</v-btn>
<v-spacer />
</v-card-actions>
</v-card>
</v-dialog>
<!-- table -->
<div>
<v-data-table :headers="headers" :items="posts" sort-by="calories" class="elevation-1">
<template #top>
<v-toolbar flat>
<v-toolbar-title>Post Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical />
<v-spacer />
<v-toolbar-title>
<!-- modal-create -->
<v-dialog
v-model="dialog"
v-model="dialog1"
persistent
max-width="600px"
enctype="multipart/form-data"
lazy-validation
>
<template #activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
New Post
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">EDIT POST</span>
<span class="text-h5">CREAT POST</span>
</v-card-title>
<v-card-text>
<v-container>
......@@ -215,8 +240,9 @@
md="4"
>
<v-text-field
v-model="eTitle"
v-model="title"
label="Title*"
:rules="requiredRules"
required
/>
</v-col>
......@@ -224,17 +250,19 @@
cols="12"
>
<v-select
v-model="eCategoryId"
v-model="category_id"
:items="categories"
item-text="name"
item-value="id"
label="Category"
:rules="requiredRules"
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="eContent"
<v-textarea
v-model="content"
label="Content"
:rules="requiredRules"
required
/>
</v-col>
......@@ -242,21 +270,24 @@
cols="12"
>
<v-select
v-model="eStatus"
v-model="status"
:items="statusDefaul"
item-text="name"
item-value="id"
label="Category"
label="Status"
:rules="requiredRules"
/>
</v-col>
<v-col cols="12">
<v-file-input
v-model="eImages"
v-model="images"
label="File input"
accept="image/*"
small-chips
dense
accept="image/*"
prepend-icon="mdi-camera"
:rules="requiredRules"
@change="fileSelected"
/>
</v-col>
</v-row>
......@@ -268,7 +299,7 @@
<v-btn
color="blue darken-1"
text
@click="dialog = false"
@click="dialog1 = false"
>
Close
</v-btn>
......@@ -276,177 +307,33 @@
color="blue darken-1"
text
type="submit"
@click="dialog = false; updatePost()"
@click="dialog1 = false; createPost()"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- <div style="float: right">
<b-button class="text-white" v-b-modal.modal-create>New Post</b-button>
</div>
<b-modal id="modal-create" title="create Post" class="modal fade">
<div class="w-full mt-4 p-10">
<form>
<label for="input-live">Title :</label>
<b-form-input
id="input-live"
v-model="title"
type="text"
class="form-control mb-2"
placeholder="name"
aria-describedby="input-live-help input-live-feedback"
max="255"
min="1"
trim
/>
<label>Category ID :</label>
<b-form-select v-model="category_id">
<option v-for="item in categories" :value="item.id">
{{ item.name }}
</option>
</b-form-select>
<label>Content :</label>
<input
v-model="content"
type="text"
class="form-control mb-2"
placeholder="Ordering"
size="sm"
required
>
<label>Author :</label>
<input
v-model="user_id"
type="text"
class="form-control mb-2"
placeholder="Description"
size="sm"
required
>
<label>Status :</label>
<b-form-select v-model="status" :options="options" />
<label>Image :</label>
<b-form-file
v-model="images"
multiple
:state="Boolean(images)"
placeholder="Choose a image or drop it here..."
drop-placeholder="Drop file here..."
/>
</form>
</div>
<template #modal-footer>
<button v-b-modal.modal-close_visit class="btn btn-danger btn-sm m-1" @click="$bvModal.hide('modal-create')">
Close
</button>
<button v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1" @click="createPost()">
Submit
</button>
</v-toolbar-title>
</v-toolbar>
</template>
</b-modal> -->
<!-- modal-show -->
<!-- <b-modal id="modal-show" title="POST" class="modal fade">
<div class="w-full mt-4 p-10">
<form>
<label>Title :</label>
<input v-model="sTitle" type="text" class="form-control mb-2" size="sm" disabled>
<label>Category ID :</label>
<input v-model="sCategoryId" type="text" class="form-control mb-2" size="sm" disabled>
<label>Content :</label>
<input v-model="sContent" type="text" class="form-control mb-2" size="sm" disabled>
<label>Author :</label>
<input
v-model="sUserId"
type="text"
class="form-control mb-2"
placeholder="Description"
size="sm"
disabled
>
<label>Status :</label>
<b-form-select v-model="sStatus" :options="options" disabled />
<label>Image :</label>
<div v-for="(image, index) in sImages" :key="index">
<b-img :src="image" fluid alt="Fluid image" />
</div>
</form>
</div>
<template #modal-footer>
<button v-b-modal.modal-close_visit class="btn btn-danger btn-sm m-1" @click="$bvModal.hide('modal-show')">
Close
</button>
<template #[`item.index`]="{ index }">
{{ index + 1 }}
</template>
</b-modal> -->
<!-- modal-edit -->
<!-- <b-modal id="modal-edit" title="Edit Post " class="modal fade">
<div class="w-full mt-4 p-10">
<form>
<label>Title :</label>
<input
v-model="eTitle"
type="text"
class="form-control mb-2"
placeholder="name"
max="255"
min="1"
size="sm"
required
>
<label>Category ID :</label>
<b-form-select v-model="eCategoryId">
<option v-for="item in categories" :value="item.id">
{{ item.name }}
</option>
</b-form-select>
<label>Content :</label>
<input
v-model="eContent"
type="text"
class="form-control mb-2"
placeholder="Ordering"
size="sm"
required
>
<label>Author :</label>
<input v-model="eUserId" type="text" class="form-control mb-2" placeholder="Description" size="sm">
<label>Status :</label>
<b-form-select v-model="eStatus" :options="options" />
<label>Image :</label>
<b-form-file
v-model="eImages"
multiple
:state="Boolean(eImages)"
placeholder="Choose a image or drop it here..."
drop-placeholder="Drop file here..."
/>
</form>
</div>
<template #modal-footer>
<button v-b-modal.modal-close_visit class="btn btn-danger btn-sm m-1" @click="$bvModal.hide('modal-edit')">
Close
</button>
<button v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1" @click="updatePost()">
Submit
</button>
<template #[`item.category_id`]="{ item }">
{{ categories.find(x => x.id === item.category_id)?.name }}
</template>
</b-modal> -->
<!-- table -->
<div>
<v-data-table :headers="headers" :items="posts" sort-by="calories" class="elevation-1">
<template #top>
<v-toolbar flat>
<v-toolbar-title>Post Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical />
<v-spacer />
</v-toolbar>
<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 }}
</template>
<template #[`item.actions`]="{ item }">
<v-icon :id="item.id" small @click="editPost(item)">
mdi-pencil
</v-icon>
<v-icon :id="item.id" small @click="deletePost(item.id, item)">
<v-icon :id="item.id" small @click="dialogDelete = true; getID(item)">
mdi-delete
</v-icon>
<v-icon :id="item.id" small @click="showPost(item)">
......@@ -484,15 +371,14 @@ export default {
dialogDelete: false,
headers: [
{
text: 'Title',
text: '#',
align: 'start',
sortable: false,
value: 'title'
value: 'index'
},
{ text: 'Category ID', value: 'category_id' },
{ text: 'content', value: 'content', sortable: false },
{ text: 'author', value: 'user_id' },
{ text: 'status', value: 'status' },
{ text: 'Title', value: 'title' },
{ text: 'Category', value: 'category_id' },
{ text: 'Author', value: 'user_id' },
{ text: 'Status', value: 'status' },
{ text: 'Actions', value: 'actions', sortable: false }
],
items: [
......@@ -518,18 +404,19 @@ export default {
id: '2'
},
{
name: 'UnPublish',
name: 'Unpublish',
id: '3'
}
],
posts: [],
categories: [],
users: [],
sTitle: '',
sCategoryId: '',
sContent: '',
sUserId: '',
sStatus: null,
sImages: null,
sStatus: [],
sImages: [],
eId: '',
eTitle: '',
eCategoryId: [],
......@@ -553,7 +440,18 @@ export default {
status: '',
created_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: {
......@@ -574,8 +472,9 @@ export default {
},
created () {
this.initialize()
this.getposts()
this.getPosts()
this.getCategories()
this.getUsers()
},
methods: {
initialize () {
......@@ -586,8 +485,8 @@ export default {
this.sCategoryId = ''
this.sContent = ''
this.sUserId = ''
this.sStatus = ''
this.sImages = null
this.sStatus = []
this.sImages = []
},
editItem (item) {
this.editedIndex = this.posts.indexOf(item)
......@@ -625,11 +524,22 @@ export default {
}
this.close()
},
getUsers () {
this.$axios
.get('/users/', {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
.then(response => (this.users = response.data.data.data))
.catch(function (error) {
console.log(error)
})
},
getCategories () {
this.$axios
.get('/categories/', {
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
......@@ -638,11 +548,10 @@ export default {
console.log(error)
})
},
getposts () {
getPosts () {
this.$axios
.get('/posts/', {
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
......@@ -664,7 +573,6 @@ export default {
fd,
{
headers: {
'Content-Type': 'multipart/form-data; application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
}
......@@ -683,19 +591,21 @@ export default {
})
})
},
deletePost (ID, index) {
getID (item) {
this.eID = item.id
this.editedIndex = this.categories.indexOf(item)
},
deletePost () {
const self = this
this.editedIndex = this.posts.indexOf(index)
if (confirm('Do you really want to delete?')) {
const currentPostIndex = this.editedIndex
this.$axios
.delete(`/posts/${ID}`, {
.delete(`/posts/${this.eID}`, {
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
.then((response) => {
this.posts.splice(this.editedIndex, 1)
this.posts.splice(currentPostIndex, 1)
self.$toast.success('Post deleted successfully!', {
duration: 3000
})
......@@ -706,19 +616,15 @@ export default {
duration: 3000
})
})
}
},
async showPost (item) {
const ID = item.id
try {
const resp = await this.$axios.get(`/posts/${ID}`, {
method: 'GET',
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
console.log(resp.data)
this.sTitle = resp.data.data.title
this.sContent = resp.data.data.content
this.sCategoryId = resp.data.data.category_id
......@@ -735,6 +641,7 @@ export default {
this.eCategoryId = item.category_id
this.eContent = item.content
this.eStatus = item.status
this.eImages = []
this.editedIndex = this.posts.indexOf(item)
console.log(this.editedIndex)
this.dialog = true
......@@ -745,9 +652,10 @@ export default {
fd.append('title', this.eTitle)
fd.append('category_id', this.eCategoryId)
fd.append('content', this.eContent)
fd.append('images', this.eImages)
fd.append('status', this.eStatus)
if (typeof this.eImages !== 'string' && this.eImages != null) {
fd.append('images', this.eImages)
}
const currentPostIndex = this.editedIndex
this.$axios
.post(
......@@ -755,9 +663,7 @@ export default {
fd,
{
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`,
Accept: 'application/json, text/plain, */*'
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
}
)
......
pages/products/index.vue
View file @ 7b82a25d
<!-- eslint-disable vue/require-v-for-key -->
<!-- eslint-disable vue/valid-v-slot -->
<template>
<div>
<div>
......@@ -9,25 +7,15 @@
</template>
</v-breadcrumbs>
</div>
<div style="float: right">
<!-- show-modal -->
<v-dialog
v-model="dialog1"
v-model="dialog2"
persistent
max-width="600px"
>
<template #activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
New Product
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">CREAT PRODUCT</span>
<span class="text-h5">PRODUCT</span>
</v-card-title>
<v-card-text>
<v-container>
......@@ -38,59 +26,42 @@
md="4"
>
<v-text-field
v-model="name"
label="Name*"
required
v-model="sName"
label="Name"
readonly
/>
</v-col>
<v-col
cols="12"
>
<v-select
v-model="category_id"
v-model="sCategoryId"
:items="categories"
item-text="name"
item-value="id"
label="Category"
readonly
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="price"
label="Price*"
required
v-model="sPrice"
label="Price"
readonly
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="description"
v-model="sDescription"
label="Description"
readonly
/>
</v-col>
<v-col cols="12">
<v-file-input
v-model="images"
label="File input"
small-chips
dense
multiple
/>
</v-col>
<v-col cols="12">
<v-btn
class="mx-2"
fab
dark
small
color="indigo"
@click="addMore()"
>
<v-icon dark>
mdi-plus
</v-icon>
</v-btn>
<v-col v-for="(image, index) in sImages" :key="index" cols="12">
<v-img :src="image" contain />
</v-col>
<v-row v-for="(variant, index) in variants" :key=" 'B' +index">
<v-col cols="12" />
<v-row v-for="(variant, index) in sVariants" :key="'A' +index">
<v-col
cols="12"
sm="6"
......@@ -98,8 +69,8 @@
>
<v-text-field
v-model="variant.color"
label="Color*"
required
label="Color"
readonly
/>
</v-col>
<v-col
......@@ -109,8 +80,8 @@
>
<v-text-field
v-model="variant.size"
label="Size*"
required
label="Size"
readonly
/>
</v-col>
<v-col
......@@ -120,60 +91,37 @@
>
<v-text-field
v-model="variant.quantity"
label="Quantity*"
required
label="Quantity"
readonly
/>
</v-col>
<v-col>
<v-btn
v-show="index != 0"
class=""
fab
dark
x-small
color="red"
@click="remove(index)"
>
<v-icon dark>
mdi-minus
</v-icon>
</v-btn>
</v-col>
<v-col />
</v-row>
</v-row>
</v-container>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn
color="blue darken-1"
text
@click="dialog1 = false; seeVariant()"
>
Close
</v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog1 = false; createProduct();"
@click="dialog2 = false"
>
Save
Close
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
<!-- show-modal -->
<!-- edit-modal -->
<v-dialog
v-model="dialog2"
v-model="dialog3"
persistent
max-width="600px"
>
<v-card>
<v-card-title>
<span class="text-h5">PRODUCT</span>
<span class="text-h5">EDIT PRODUCT</span>
</v-card-title>
<v-card-text>
<v-container>
......@@ -184,41 +132,64 @@
md="4"
>
<v-text-field
v-model="sName"
label="Name"
disabled
v-model="eName"
label="Name*"
:rules="requiredRules"
required
/>
</v-col>
<v-col
cols="12"
>
<v-select
v-model="sCategoryId"
v-model="eCategoryId"
:items="categories"
item-text="name"
item-value="id"
label="Category"
disabled
:rules="requiredRules"
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="sPrice"
label="Price"
disabled
v-model="ePrice"
label="Price*"
:rules="requiredRules"
required
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="sDescription"
v-model="eDescription"
label="Description"
:rules="requiredRules"
/>
</v-col>
<v-col v-for="(image, index) in sImages" :key="index" cols="12">
<v-img :src="image" contain />
<v-col cols="12">
<v-file-input
v-model="eImages"
label="File input"
small-chips
dense
multiple
/>
</v-col>
<v-col cols="12" />
<v-row v-for="(variant, index) in sVariants" :key="'A' +index">
<v-img v-if="typeof eImages === 'string'" :src="eImages" />
<v-col cols="12">
<v-btn
class="mx-2"
fab
dark
small
color="indigo"
@click="addMoreVariant()"
>
<v-icon dark>
mdi-plus
</v-icon>
</v-btn>
</v-col>
<v-row v-for="(variant, index) in eVariants" :key=" 'B' +index">
<v-col
cols="12"
sm="6"
......@@ -226,8 +197,9 @@
>
<v-text-field
v-model="variant.color"
label="Color"
disabled
label="Color*"
:rules="requiredRules"
required
/>
</v-col>
<v-col
......@@ -237,8 +209,9 @@
>
<v-text-field
v-model="variant.size"
label="Size"
disabled
label="Size*"
:rules="requiredRules"
required
/>
</v-col>
<v-col
......@@ -248,37 +221,119 @@
>
<v-text-field
v-model="variant.quantity"
label="Quantity"
disabled
label="Quantity*"
:rules="numberRules"
required
/>
</v-col>
<v-col />
<v-col>
<v-btn
v-show="index != 0"
class=""
fab
dark
x-small
color="red"
@click="getVariant(index, variant); dialogDeleteVariant = true"
>
<v-icon dark>
mdi-minus
</v-icon>
</v-btn>
</v-col>
</v-row>
</v-row>
</v-container>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog2 = false"
@click="dialog3 = false"
>
Close
</v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog3 = false; updateProduct();"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- edit-modal -->
<!-- delete-modal -->
<v-dialog v-model="dialogDelete" 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="deleteProduct(); dialogDelete = false">
OK
</v-btn>
<v-spacer />
</v-card-actions>
</v-card>
</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 -->
<div>
<v-data-table
:headers="headers"
:items="products"
sort-by="calories"
class="elevation-1"
>
<template #top>
<v-toolbar flat>
<v-toolbar-title>Product Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical />
<v-spacer />
<v-toolbar-title>
<v-dialog
v-model="dialog3"
v-model="dialog1"
persistent
max-width="600px"
lazy-validation
>
<template #activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
New Product
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">EDIT PRODUCT</span>
<span class="text-h5">CREAT PRODUCT</span>
</v-card-title>
<v-card-text>
<v-container>
......@@ -289,45 +344,52 @@
md="4"
>
<v-text-field
v-model="eName"
v-model="name"
label="Name*"
:rules="requiredRules"
required
lazy-validation
/>
</v-col>
<v-col
cols="12"
>
<v-select
v-model="eCategoryId"
v-model="category_id"
:items="categories"
item-text="name"
item-value="id"
label="Category"
:rules="requiredRules"
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="ePrice"
v-model="price"
label="Price*"
:rules="requiredRules"
required
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="eDescription"
v-model="description"
label="Description"
:rules="requiredRules"
/>
</v-col>
<v-col cols="12">
<v-file-input
v-model="eImages"
v-model="images"
label="File input"
small-chips
dense
multiple
:rules="imageRules"
lazy-validation
prepend-icon="mdi-camera"
/>
</v-col>
<!-- <v-img v-if="typeof eImage === 'string'" :src="eImages" /> -->
<v-col cols="12">
<v-btn
class="mx-2"
......@@ -335,14 +397,14 @@
dark
small
color="indigo"
@click="addMoreVariant()"
@click="addMore()"
>
<v-icon dark>
mdi-plus
</v-icon>
</v-btn>
</v-col>
<v-row v-for="(variant, index) in eVariants" :key=" 'B' +index">
<v-row v-for="(variant, index) in variants" :key=" 'B' +index">
<v-col
cols="12"
sm="6"
......@@ -351,6 +413,7 @@
<v-text-field
v-model="variant.color"
label="Color*"
:rules="requiredRules"
required
/>
</v-col>
......@@ -362,6 +425,7 @@
<v-text-field
v-model="variant.size"
label="Size*"
:rules="requiredRules"
required
/>
</v-col>
......@@ -373,6 +437,7 @@
<v-text-field
v-model="variant.quantity"
label="Quantity*"
:rules="numberRules"
required
/>
</v-col>
......@@ -384,7 +449,7 @@
dark
x-small
color="red"
@click="removeVariant(index)"
@click="remove(index)"
>
<v-icon dark>
mdi-minus
......@@ -401,7 +466,7 @@
<v-btn
color="blue darken-1"
text
@click="dialog3 = false"
@click="dialog1 = false"
>
Close
</v-btn>
......@@ -409,33 +474,24 @@
color="blue darken-1"
text
type="submit"
@click="dialog3 = false; updateProduct();"
@click="dialog1 = false; createProduct();"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- table -->
<div>
<v-data-table
:headers="headers"
:items="products"
sort-by="calories"
class="elevation-1"
>
<template #top>
<v-toolbar flat>
<v-toolbar-title>Product Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical />
<v-spacer />
</v-toolbar-title>
</v-toolbar>
</template>
<template #[`item.index`]="{ index }">
{{ index + 1 }}
</template>
<template #[`item.actions`]="{ item }">
<v-icon :id="item.id" small @click="editProduct(item)">
mdi-pencil
</v-icon>
<v-icon :id="item.id" small @click="deleteProduct(item.id,item)">
<v-icon :id="item.id" small @click="dialogDelete = true; getID(item)">
mdi-delete
</v-icon>
<v-icon :id="item.id" small @click="showProduct(item)">
......@@ -460,7 +516,7 @@ export default {
return {
name: '',
id: '',
category_id: null,
category_id: '',
price: '',
stock: '',
description: '',
......@@ -480,19 +536,19 @@ export default {
dialog2: false,
dialog3: false,
dialogDelete: false,
dialogDeleteVariant: false,
options: [],
headers: [
{
text: 'Name',
text: '#',
align: 'start',
sortable: false,
value: 'name'
value: 'index'
},
{ text: 'id', value: 'id' },
{ text: 'category ID', value: 'category_id' },
{ text: 'price', value: 'price', sortable: false },
{ text: 'description', value: 'description' },
{ text: 'stock', value: 'stock' },
{ text: 'Name', value: 'name' },
{ text: 'Category', value: 'category.name' },
{ text: 'Price', value: 'price' },
{ text: 'Stock', value: 'stock' },
{ text: 'Actions', value: 'actions', sortable: false }
],
items: [
......@@ -517,7 +573,7 @@ export default {
sPrice: '',
sDescription: '',
sStock: '',
sImages: null,
sImages: [],
sVariants: [
{
color: '',
......@@ -525,6 +581,8 @@ export default {
quantity: ''
}
],
idVariant: '',
editedVariantIndex: '',
eId: '',
eName: '',
eCategoryId: '',
......@@ -555,7 +613,18 @@ export default {
status: '',
created_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: {
......@@ -584,7 +653,7 @@ export default {
this.images = []
this.products = []
this.product = []
this.categories = []
this.categories = ''
this.sName = ''
this.sCategoryId = ''
this.sPrice = ''
......@@ -596,7 +665,6 @@ export default {
color: '',
size: '',
quantity: ''
}
]
},
......@@ -640,7 +708,6 @@ export default {
this.$axios
.get('/categories/', {
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
......@@ -653,7 +720,6 @@ export default {
this.$axios
.get('/products/', {
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
......@@ -683,9 +749,7 @@ export default {
,
{
headers: {
'Content-Type': 'multipart/form-data ',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`,
Accept: 'application/json; multipart/form-data'
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
.then((response) => {
......@@ -704,20 +768,22 @@ export default {
})
})
},
deleteProduct (ID, index) {
getID (item) {
this.eID = item.id
this.editedIndex = this.products.indexOf(item)
},
deleteProduct () {
const self = this
this.editedIndex = this.products.indexOf(index)
if (confirm('Do you really want to delete?')) {
const currentPostIndex = this.editedIndex
try {
this.$axios
.delete(`/products/${ID}`, {
.delete(`/products/${this.eID}`, {
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
.then((response) => {
this.products.splice(this.editedIndex, 1)
this.products.splice(currentPostIndex, 1)
self.$toast.success('Category deleted successfully!', {
duration: 3000
})
......@@ -725,7 +791,6 @@ export default {
} catch (error) {
console.log(error)
}
}
},
async showProduct (item) {
const ID = item.id
......@@ -733,7 +798,6 @@ export default {
const resp = await this.$axios.get(`/products/${ID}`, {
method: 'GET',
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
......@@ -768,24 +832,25 @@ export default {
fd.append('price', this.ePrice)
fd.append('category_id', this.eCategoryId)
fd.append('description', this.eDescription)
if (this.eVariants) {
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}][color]`, this.eVariants[i].color)
fd.append(`variants[${i}][quantity]`, this.eVariants[i].quantity)
fd.append(`variants[${i}][size]`, this.eVariants[i].size)
}
}
if (this.eImages) {
for (let j = 0; j < this.eImages.length; j++) {
fd.append(`images[${j}]`, this.eImages[j])
}
}
const currentPostIndex = this.editedIndex
try {
this.$axios
.post(`/products/update/${this?.eId}`,
fd, {
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
}
......@@ -819,11 +884,32 @@ export default {
remove (index) {
this.variants.splice(index, 1)
},
removeVariant (index) {
this.eVariants.splice(index, 1)
getVariant (index, item) {
this.editedVariantIndex = index
this.idVariant = item.id
},
seeVariant () {
console.log(this.variants)
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)
}
}
}
}
......
pages/users/index.vue
View file @ 7b82a25d
......@@ -11,11 +11,7 @@
</v-breadcrumbs>
</div>
<!-- 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-title>
<span class="text-h5">User Edit</span>
......@@ -23,29 +19,18 @@
<v-card-text>
<v-container>
<v-row>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="eName"
label="Legal name*"
required
/>
<v-col cols="12" sm="6" md="4">
<v-text-field v-model="eName" label="Legal name*" :rules="nameRules" required />
</v-col>
<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 cols="12">
<v-text-field
v-model="ePassword"
label="Password*"
type="password"
:rules="passwordRules"
required
/>
</v-col>
......@@ -55,39 +40,69 @@
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn color="blue darken-1" text @click="dialog2 = false">
Close
</v-btn>
<v-btn
color="blue darken-1"
text
@click="dialog2 = false"
type="submit"
@click="
dialog2 = false;
updateUser();
"
>
Close
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- modal-delete -->
<v-dialog v-model="dialogDelete" 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
type="submit"
@click="dialog2 = false; updateUser();"
@click="
deleteUser();
dialogDelete = false;
"
>
Save
OK
</v-btn>
<v-spacer />
</v-card-actions>
</v-card>
</v-dialog>
<v-data-table :headers="headers" :items="users" sort-by="calories" class="elevation-1">
<v-data-table
:headers="headers"
:items="users"
sort-by="calories"
class="elevation-1"
>
<template #top>
<v-toolbar flat>
<v-toolbar-title>User Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical />
<v-spacer />
<v-toolbar-title style="float: right">
<v-dialog v-model="dialog1" persistent max-width="600px" @submit.prevent="createUser">
<template #activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
<v-dialog
v-model="dialog1"
persistent
max-width="600px"
@submit.prevent="createUser"
lazy-validation
>
<template #activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">
New USER
</v-btn>
</template>
......@@ -98,14 +113,11 @@
<v-card-text>
<v-container>
<v-row>
<v-col
cols="12"
sm="6"
md="4"
>
<v-col cols="12" sm="6" md="4">
<v-text-field
v-model="name"
label="Legal name*"
:rules="nameRules"
required
/>
</v-col>
......@@ -113,6 +125,7 @@
<v-text-field
v-model="email"
label="Email*"
:rules="emailRules"
required
/>
</v-col>
......@@ -121,6 +134,7 @@
v-model="password"
label="Password*"
type="password"
:rules="passwordRules"
required
/>
</v-col>
......@@ -130,18 +144,17 @@
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn
color="blue darken-1"
text
@click="dialog1 = false"
>
<v-btn color="blue darken-1" text @click="dialog1 = false">
Close
</v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog1 = false; createUser();"
@click="
dialog1 = false;
createUser();
"
>
Save
</v-btn>
......@@ -151,17 +164,35 @@
</v-toolbar-title>
</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 }">
<v-icon :id="item.id" small class="mr-2" @click="dialog2 = true; editUser(item);">
<v-icon
:id="item.id"
small
class="mr-2"
@click="
dialog2 = true;
editUser(item)
"
>
mdi-pencil
</v-icon>
<v-icon :id="item.id" small @click="deleteUser(item.id, item)">
<v-icon
:id="item.id"
small
@click="
dialogDelete = true;
getID(item)
"
>
mdi-delete
</v-icon>
</template>
......@@ -189,12 +220,11 @@ export default {
dialogDelete: false,
headers: [
{
text: 'Name',
text: '#',
align: 'start',
sortable: false,
value: 'name'
value: 'index'
},
{ text: 'id', value: 'id' },
{ text: 'Name', value: 'name' },
{ text: 'email', value: 'email' },
{ text: 'status', value: 'id', sortable: false },
{ text: 'created', value: 'created_at' },
......@@ -236,7 +266,20 @@ export default {
status: '',
created_at: '',
updated_at: ''
}
},
nameRules: [
v => !!v || 'Name is required',
v => (v && v.length <= 255) || 'Name must be less than 255 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',
v => (v && v.length <= 255) || 'Password must be less than 255 characters'
]
}
},
computed: {
......@@ -256,6 +299,9 @@ export default {
this.initialize()
this.getUsers()
},
beforeCreate () {
// this.keepToken()
},
methods: {
initialize () {
this.users = []
......@@ -302,7 +348,9 @@ export default {
.get('/users/', {
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
}
})
.then(response => (this.users = response.data.data.data))
......@@ -313,14 +361,19 @@ export default {
createUser () {
const self = this
this.$axios
.post('/users/', {
.post(
'/users/',
{
email: this.email,
password: this.password,
name: this.name
}, {
},
{
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
}
}
)
......@@ -334,7 +387,6 @@ export default {
this.users.push(this.editedItem)
})
.catch((errors) => {
this.$bvModal.hide('modal-login')
console.log(errors.response.data.message)
this.message = errors.response.data.message
self.$toast.error('something went wrong while trying create!', {
......@@ -342,16 +394,17 @@ export default {
})
})
},
deleteUser (userID, index) {
deleteUser () {
const self = this
this.editedIndex = this.users.indexOf(index)
if (confirm('Do you really want to delete?')) {
const currentPostIndex = this.editedIndex
try {
this.$axios
.delete(`/users/${userID}`)
.then((response) => {
this.$axios.delete(`/users/${this.eID}`, {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
}).then((response) => {
console.log(response.data)
this.users.splice(this.editedIndex, 1)
this.users.splice(currentPostIndex, 1)
self.$toast.success('User deleted successfully!', {
duration: 3000
})
......@@ -359,7 +412,6 @@ export default {
} catch (error) {
console.log(error)
}
}
},
editUser (user) {
this.eID = user.id
......@@ -374,7 +426,8 @@ export default {
console.log(this.eEmail)
console.log(this?.eID)
this.$axios
.put(`/users/${this?.eID}`,
.put(
`/users/${this?.eID}`,
{
email: this.eEmail,
password: this.ePassword,
......@@ -383,7 +436,9 @@ export default {
{
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
}
}
)
......@@ -401,6 +456,10 @@ export default {
duration: 3000
})
})
},
getID (item) {
this.eID = item.id
this.editedIndex = this.users.indexOf(item)
}
}
}
......
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