Commit ee8f9bac authored by vietanh-0511's avatar vietanh-0511

Merge branch 'dev' of...

Merge branch 'dev' of https://gitlab.kiaisoft.com/kiaisoft.anh.tran2/kiaisoft_tuananh_nuxt into feature/user-login
parents 5a873b10 ef3630f7
<template>
<div>
<b-navbar toggleable="lg" type="dark" variant="info" style="background-color: #6f2ca6 !important">
<SideBar />
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item href="/users">USER</b-nav-item>
<b-nav-item href="/categories">CATEGORY</b-nav-item>
<b-nav-item href="/products">PRODUCT</b-nav-item>
<b-nav-item href="/posts">POST</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-item-dropdown right>
<!-- Using 'button-content' slot -->
<template #button-content>
<em>{{ $auth.$storage.getUniversal("userName") }}</em>
</template>
<b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#" @click="logout">Sign Out</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<v-toolbar
dark
prominent
src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
>
<v-app-bar-nav-icon />
<v-toolbar-title>
<v-btn href="/users">
<span>USER</span>
<v-icon dense>mdi-account</v-icon>
</v-btn>
<v-btn href="/categories">
<span>CATEGORY</span>
<v-icon dense>mdi-heart</v-icon>
</v-btn>
<v-btn href="/products">
<span>PRODUCT</span>
<v-icon dense> mdi-briefcase</v-icon>
</v-btn>
<v-btn href="/posts">
<span>POST</span>
<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-btn>
</v-toolbar>
</div>
</template>
<script>
import SideBar from '@/components/SideBar'
export default {
components: {
SideBar
},
methods: {
logout () {
fetch('http://127.0.0.1:8000/api/logout', {
......
......@@ -246,7 +246,11 @@ export default {
},
getCategories() {
this.$axios
.get('/categories/')
.get("/categories/",{
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
}})
.then((response) => (this.categories = response.data.data))
.catch(function (error) {
console.log(error)
......@@ -257,34 +261,37 @@ export default {
const image = Array.from(set)
const self = this
this.$axios
.post('/categories/', {
.post('/categories/',
{
name: this.name,
ordering: this.ordering,
parent_id: this.parent_id,
images: image,
}, {
},
{
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': this.$auth.$storage.getUniversal('token')
}
})
.then(response => {
this.$bvModal.hide('modal-create')
self.$toast.success('Category created successfully!', {
duration: 3000
})
this.editedItem = response.data.data
console.log(this.editedItem)
this.categories.push(this.editedItem)
"Content-Type": "multipart/form-data",
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
},
}
)
.then(response => {
this.$bvModal.hide('modal-create')
self.$toast.success('Category created successfully!', {
duration: 3000
})
.catch(errors => {
this.$bvModal.hide('modal-create')
console.log(errors.response.data.message)
this.message = errors.response.data.message
self.$toast.error('something went wrong while trying create!', {
duration: 3000
})
this.editedItem = response.data.data
console.log(this.editedItem)
this.categories.push(this.editedItem)
})
.catch(errors => {
this.$bvModal.hide('modal-create')
console.log(errors.response.data.message)
this.message = errors.response.data.message
self.$toast.error('something went wrong while trying create!',{
duration: 3000
})
})
},
fileSelected(event) {
console.log(event)
......@@ -297,20 +304,26 @@ export default {
deleteCategory(ID, index) {
const self = this
this.editedIndex = this.categories.indexOf(index)
if (confirm('Do you really want to delete?')) {
try {
this.$axios
.delete(`/categories/${ID}`)
.then(response => {
this.categories.splice(this.editedIndex, 1)
self.$toast.success('Category deleted successfully!', {
duration: 3000
})
})
} catch (error) {
console.log(error)
}
if(confirm("Do you really want to delete?")){
try{
this.$axios
.delete(`/categories/${ID}`,
{
headers: {
"Content-Type": "multipart/form-data",
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
},
})
.then(response => {
this.categories.splice(this.editedIndex, 1)
self.$toast.success('Category deleted successfully!',{
duration: 3000
})
})
} catch(error){
console.log(error)
}
}
},
getID(item) {
console.log(this.categories.indexOf(item))
......@@ -333,29 +346,31 @@ export default {
console.log(this.eName)
console.log(this.eOrdering)
console.log(this?.eID)
try {
this.$axios
.post(`categories/update/${this?.eID}`, {
try{
this.$axios
.post(`categories/update/${this?.eID}`,
{
name: this.eName,
ordering: this.eOrdering,
parent_id: this.eParentId,
images: image
}, {
images: image },
{
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': this.$auth.$storage.getUniversal('token')
"Content-Type": "multipart/form-data",
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
}
})
.then(response => {
self.$toast.success('User updated successfully!', {
duration: 3000
})
console.log(response)
this.editedItem = response.data.data
this.$bvModal.hide('modal-edit')
Object.assign(this.categories[this.editedIndex], this.editedItem)
})
} catch (error) {
}
)
.then(response => {
self.$toast.success('User updated successfully!',{
duration: 3000
})
console.log(response)
this.editedItem = response.data.data
this.$bvModal.hide('modal-edit')
Object.assign(this.categories[this.editedIndex], this.editedItem)
})
} catch(error){
console.log(error)
}
}
......
......@@ -268,7 +268,11 @@ export default {
},
getCategories() {
this.$axios
.get('/categories/')
.get("/categories/",{
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
}})
.then((response) => (this.categories = response.data.data))
.catch(function (error) {
console.log(error)
......@@ -276,7 +280,11 @@ export default {
},
getposts() {
this.$axios
.get('/posts/')
.get("/posts/",{
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
}})
.then((response) => (this.posts = response.data.data))
.catch(function (error) {
console.log(error)
......@@ -296,8 +304,8 @@ export default {
},
{
headers: {
'Content-Type': 'multipart/form-data',
Authorization: this.$auth.$storage.getUniversal('token'),
"Content-Type": "multipart/form-data",
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
},
}
)
......@@ -324,7 +332,11 @@ export default {
this.editedIndex = this.posts.indexOf(index)
if (confirm('Do you really want to delete?')) {
this.$axios
.delete(`/posts/${ID}`)
.delete(`/posts/${ID}`,{
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
}})
.then((response) => {
this.posts.splice(this.editedIndex, 1)
self.$toast.success('Post deleted successfully!', {
......@@ -345,8 +357,8 @@ export default {
const resp = await this.$axios.get(`/posts/${ID}`, {
method: 'GET',
headers: {
'Content-Type': 'multipart/form-data',
Authorization: this.$auth.$storage.getUniversal('token'),
"Content-Type": "multipart/form-data",
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
},
})
console.log(resp.data)
......@@ -386,8 +398,8 @@ export default {
},
{
headers: {
'Content-Type': 'multipart/form-data',
Authorization: this.$auth.$storage.getUniversal('token'),
"Content-Type": "multipart/form-data",
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
},
}
)
......
......@@ -481,7 +481,11 @@ export default {
},
getCategories() {
this.$axios
.get('/categories/')
.get("/categories/",{
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
}})
.then((response) => (this.categories = response.data.data))
.catch(function (error) {
console.log(error)
......@@ -489,7 +493,11 @@ export default {
},
getProducts() {
this.$axios
.get('/products/')
.get("/products/",{
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
}})
.then((response) => (this.products = response.data.data))
.catch(function (error) {
console.log(error)
......@@ -510,7 +518,7 @@ export default {
}, {
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': this.$auth.$storage.getUniversal('token')
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
}
})
.then(response => {
......@@ -537,7 +545,11 @@ export default {
if(confirm('Do you really want to delete?')){
try{
this.$axios
.delete(`/products/${ID}`)
.delete(`/products/${ID}`,{
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
}})
.then(response => {
this.products.splice(this.editedIndex, 1)
self.$toast.success('Category deleted successfully!',{
......@@ -555,8 +567,8 @@ export default {
const resp = await this.$axios.get(`/products/${ID}`, {
method: 'GET',
headers: {
'Content-Type': 'multipart/form-data',
Authorization: this.$auth.$storage.getUniversal('token'),
"Content-Type": "multipart/form-data",
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
},
})
this.sName = resp.data.data.name
......@@ -594,11 +606,12 @@ export default {
images: this.eImages,
variants: this.eVariants,
}, {
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': this.$auth.$storage.getUniversal('token')
headers: {
"Content-Type": "multipart/form-data",
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
}
}
} )
)
.then(response => {
self.$toast.success('User updated successfully!',{
duration: 3000
......
<template>
<!-- <template>
<div style="background-color: #8fc2ff">
<div class="container" style="
display: flex;
......@@ -57,7 +57,7 @@ export default {
confirm_password: this.confirm_password,
}),
})
this.$router.push('/')
this.$router.push("/login")
},
},
}
......@@ -81,4 +81,4 @@ export default {
justify-content: center;
margin-left: 50px;
}
</style>
</style> -->
<template>
<v-app>
<div>
<div />
<div>
<v-breadcrumbs :items="items">
<template #divider>
<v-icon>mdi-chevron-right</v-icon>
</template>
</v-breadcrumbs>
</div>
<b-breadcrumb>
<b-breadcrumb-item href="/home">
<b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon>
Home
</b-breadcrumb-item>
<b-breadcrumb-item href="/home/users">User</b-breadcrumb-item>
</b-breadcrumb>
<div style="float: right">
<b-button v-b-modal.modal-login class="text-white">New User</b-button>
<!-- modal create user -->
<b-modal id="modal-login" title="Create User" class="modal fade">
<Notification :message="error" v-if="error" />
<p class="my-4">
<form @submit.prevent="createUser">
<label>Name :</label>
<input type="text" class="form-control mb-2" placeholder="name" v-model="name" max="255" min="1" required />
<label>Email :</label>
<input type="email" class="form-control mb-2" placeholder="Email" v-model="email" required />
<label>Password :</label>
<input type="password" class="form-control mb-2" placeholder="password" v-model="password" required />
</form>
</p>
<template #modal-footer>
<button v-b-modal.modal-close_visit @click="$bvModal.hide('modal-login')"
class="btn btn-danger btn-sm m-1">Close</button>
<button @click="createUser" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button>
</template>
</b-modal>
<!-- modal edit user -->
<b-modal id="modal-edit" title="Edit User" class="modal fade">
<p class="my-4">
<form @submit.prevent="">
<label>Name :</label>
<input type="text" class="form-control mb-2" placeholder="name" v-model="eName" max="255" min="1" required />
<label>Email :</label>
<input type="email" class="form-control mb-2" placeholder="Email" v-model="eEmail" required />
<label>Password :</label>
<input type="password" class="form-control mb-2" placeholder="password" v-model="ePassword" required />
</form>
</p>
<template #modal-footer>
<button v-b-modal.modal-close_visit @click="$bvModal.hide('modal-edit')"
class="btn btn-danger btn-sm m-1">Close</button>
<button @click="updateUser(this?.eID)" v-b-modal.modal-close_visit
class="btn btn-success btn-sm m-1">Submit</button>
<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"
>
New USER
</v-btn>
</template>
</b-modal>
<v-card>
<v-card-title>
<span class="text-h5">User Profile</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="name"
label="Legal name*"
required
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="email"
label="Email*"
required
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="password"
label="Password*"
type="password"
required
/>
</v-col>
</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"
>
Close
</v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog1 = false; createUser();"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
<!-- modal-create -->
<v-dialog
v-model="dialog2"
persistent
max-width="600px"
>
<v-card>
<v-card-title>
<span class="text-h5">User Edit</span>
</v-card-title>
<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>
<v-col cols="12">
<v-text-field
v-model="eEmail"
label="Email*"
required
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="ePassword"
label="Password*"
type="password"
required
/>
</v-col>
</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="dialog2 = false"
>
Close
</v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog2 = false; updateUser();"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-data-table :headers="headers" :items="users" sort-by="calories" class="elevation-1">
<template v-slot:top>
<template #top>
<v-toolbar flat>
<v-toolbar-title>User Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider>
<v-spacer></v-spacer>
<v-dialog v-model="dialog" max-width="500px">
<template v-slot:activator="{ on, attrs }">
<!-- modal create user -->
</template>
<v-card>
<v-card-title>
<span class="text-h5">{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12" sm="6" md="4">
<v-text-field v-model="editedItem.name" label="name"></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="4">
<v-text-field v-model="editedItem.id" label="id"></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="4">
<v-text-field v-model="editedItem.email" label="email"></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="4">
<v-text-field v-model="editedItem.created_at" label="created_at"></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="4">
<v-text-field v-model="editedItem.updated_at" label="updated_at"></v-text-field>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="close">
Cancel
</v-btn>
<v-btn color="blue darken-1" text @click="save"> Save </v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<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-spacer>
<v-btn color="blue darken-1" text @click="closeDelete">Cancel</v-btn>
<v-btn color="blue darken-1" text @click="deleteItemConfirm">OK</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>
<v-divider class="mx-4" inset vertical />
<v-spacer />
</v-toolbar>
</template>
<template v-slot:item.actions="{ item }">
<v-icon small class="mr-2" @click="editUser(item)" :id="item.id"> mdi-pencil </v-icon>
<v-icon small @click="deleteUser(item.id, item)" :id="item.id"> mdi-delete </v-icon>
<template #item.actions="{ 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)">
mdi-delete
</v-icon>
</template>
<template v-slot:no-data>
<v-btn color="primary" @click="initialize"> Reset </v-btn>
<template #no-data>
<v-btn color="primary" @click="initialize">
Reset
</v-btn>
</template>
</v-data-table>
</div>
</v-app>
</template>
<script>
export default {
......@@ -127,21 +182,35 @@ export default {
name: '',
password: '',
error: '',
dialog: false,
dialog1: false,
dialog2: false,
dialogDelete: false,
headers: [
{
text: 'Name',
align: 'start',
sortable: false,
value: 'name',
value: 'name'
},
{ text: 'id', value: 'id' },
{ text: 'email', value: 'email' },
{ text: 'status', value: 'id', sortable: false },
{ text: 'created_at', value: 'created_at' },
{ text: 'updated_at', value: 'updated_at' },
{ text: 'Actions', value: 'actions', sortable: false },
{ text: 'Actions', value: 'actions', sortable: false }
],
items: [
{
icon: 'mdi-home',
text: 'Home',
disabled: false,
href: '/home'
},
{
text: 'User',
disabled: false,
href: '/users'
}
],
users: [],
eIndex: [],
......@@ -156,7 +225,7 @@ export default {
id: '',
email: '',
created_at: '',
updated_at: '',
updated_at: ''
},
defaultItem: {
name: '',
......@@ -164,61 +233,61 @@ export default {
email: '',
status: '',
created_at: '',
updated_at: '',
},
updated_at: ''
}
}
},
computed: {
formTitle() {
formTitle () {
return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
},
}
},
watch: {
dialog(val) {
dialog (val) {
val || this.close()
},
dialogDelete(val) {
dialogDelete (val) {
val || this.closeDelete()
},
}
},
created() {
created () {
this.initialize()
this.getUsers()
},
methods: {
initialize() {
this.users = [],
this.editedItem = {}
initialize () {
this.users = []
this.editedItem = {}
},
editItem(item) {
editItem (item) {
this.editedIndex = this.users.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialog = true
},
deleteItem(item) {
deleteItem (item) {
this.editedIndex = this.users.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialogDelete = true
},
deleteItemConfirm() {
deleteItemConfirm () {
this.users.splice(this.editedIndex, 1)
this.closeDelete()
},
close() {
close () {
this.dialog = false
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
})
},
closeDelete() {
closeDelete () {
this.dialogDelete = false
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
})
},
save() {
save () {
if (this.editedIndex > -1) {
Object.assign(this.users[this.editedIndex], this.editedItem)
} else {
......@@ -226,28 +295,34 @@ export default {
}
this.close()
},
getUsers() {
getUsers () {
this.$axios
.get('/users/')
.then((response) => (this.users = response.data.data.data))
.get('/users/', {
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
.then(response => (this.users = response.data.data.data))
.catch(function (error) {
console.log(error)
})
},
createUser() {
createUser () {
const self = this
this.$axios
.post('/users/', {
headers: {
'Content-Type': 'application/json'
},
email: this.email,
password: this.password,
name: this.name,
})
.then(response => {
// $bvModal.hide('modal-login')
this.$bvModal.hide('modal-login')
name: this.name
}, {
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
}
)
.then((response) => {
self.$toast.success('User created successfully!', {
duration: 3000
})
......@@ -256,7 +331,7 @@ export default {
console.log(this.editedItem)
this.users.push(this.editedItem)
})
.catch(errors => {
.catch((errors) => {
this.$bvModal.hide('modal-login')
console.log(errors.response.data.message)
this.message = errors.response.data.message
......@@ -265,14 +340,14 @@ export default {
})
})
},
deleteUser(userID, index) {
deleteUser (userID, index) {
const self = this
this.editedIndex = this.users.indexOf(index)
if (confirm('Do you really want to delete?')) {
try {
this.$axios
.delete(`/users/${userID}`)
.then(response => {
.then((response) => {
console.log(response.data)
this.users.splice(this.editedIndex, 1)
self.$toast.success('User deleted successfully!', {
......@@ -284,39 +359,47 @@ export default {
}
}
},
editUser(user) {
this.$bvModal.show('modal-edit')
editUser (user) {
this.eID = user.id
this.eEmail = user.email
this.eName = user.name
this.editedIndex = this.users.indexOf(user)
console.log(this?.eID)
},
updateUser(userID) {
updateUser (userID) {
const self = this
console.log(this.eName)
console.log(this.eEmail)
console.log(this?.eID)
try {
this.$axios
.put(`/users/${this?.eID}`, {
this.$axios
.put(`/users/${this?.eID}`,
{
email: this.eEmail,
password: this.ePassword,
name: this.eName,
name: this.eName
},
{
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
}
)
.then((response) => {
self.$toast.success('User updated successfully!', {
duration: 3000
})
.then(response => {
self.$toast.success('User updated successfully!', {
duration: 3000
})
console.log(response)
this.editedItem = response.data.data
this.$bvModal.hide('modal-edit')
Object.assign(this.users[this.editedIndex], this.editedItem)
console.log(response)
this.editedItem = response.data.data
Object.assign(this.users[this.editedIndex], this.editedItem)
})
.catch((error) => {
console.log(error)
self.$toast.error('something went wrong while trying update!', {
duration: 3000
})
} catch (error) {
console.log(error)
}
})
}
},
}
}
</script>
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