Skip to content

K
kiaisoft_tuananh_nuxt
Commit 5c888d06 authored by TTS Kieu Tuan Anh's avatar TTS Kieu Tuan Anh
Browse files
Options

add base URL + navbar

parent af9a149c
Hide whitespace changes
Inline Side-by-side
Showing with 292 additions and 239 deletions
components/Navbar.vue
View file @ 5c888d06
<template> <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>
</div> -->
<div> <div>
<v-toolbar <v-toolbar
dark dark
prominent prominent
src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg" src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
> >
<v-app-bar-nav-icon></v-app-bar-nav-icon> <v-app-bar-nav-icon />
<v-toolbar-title> <v-toolbar-title>
<v-btn href="/users"> <v-btn href="/users">
...@@ -42,23 +13,23 @@ ...@@ -42,23 +13,23 @@
<v-icon>mdi-account</v-icon> <v-icon>mdi-account</v-icon>
</v-btn> </v-btn>
<v-btn href="/categories"> <v-btn href="/categories">
<span>CATEGORY</span> <span>CATEGORY</span>
<v-icon>mdi-heart</v-icon> <v-icon>mdi-heart</v-icon>
</v-btn> </v-btn>
<v-btn href="/products"> <v-btn href="/products">
<span>PRODUCT</span> <span>PRODUCT</span>
<v-icon> mdi-briefcase</v-icon> <v-icon> mdi-briefcase</v-icon>
</v-btn> </v-btn>
<v-btn href="/posts"> <v-btn href="/posts">
<span>POST</span> <span>POST</span>
<v-icon>mdi-newspaper</v-icon> <v-icon>mdi-newspaper</v-icon>
</v-btn> </v-btn>
</v-toolbar-title> </v-toolbar-title>
<v-spacer></v-spacer> <v-spacer />
<v-toolbar-title>{{ $auth.$storage.getUniversal("userName") }}</v-toolbar-title> <v-toolbar-title>{{ $auth.$storage.getUniversal("userName") }}</v-toolbar-title>
......
nuxt.config.js
View file @ 5c888d06
...@@ -52,7 +52,10 @@ export default { ...@@ -52,7 +52,10 @@ export default {
// Axios module configuration: https://go.nuxtjs.dev/config-axios // Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: { axios: {
// Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308 // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
baseURL: '/', baseURL: 'http://127.0.0.1:8000/api/',
debug: false,
proxyHeaders: true,
credentials: false,
}, },
// Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
......
pages/users/index.vue
View file @ 5c888d06
<template> <template>
<v-app>
<div> <div>
<div />
<div> <div>
<v-breadcrumbs :items="items">
<template #divider>
<v-icon>mdi-chevron-right</v-icon>
</template>
</v-breadcrumbs>
</div> </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"> <div style="float: right">
<b-button v-b-modal.modal-login class="text-white">New User</b-button> <v-dialog
<!-- modal create user --> v-model="dialog1"
<b-modal id="modal-login" title="Create User" class="modal fade"> persistent
<Notification :message="error" v-if="error" /> max-width="600px"
<p class="my-4"> @submit.prevent="createUser"
<form @submit.prevent="createUser"> >
<label>Name :</label> <template #activator="{ on, attrs }">
<input type="text" class="form-control mb-2" placeholder="name" v-model="name" max="255" min="1" required /> <v-btn
<label>Email :</label> color="primary"
<input type="email" class="form-control mb-2" placeholder="Email" v-model="email" required /> dark
<label>Password :</label> v-bind="attrs"
<input type="password" class="form-control mb-2" placeholder="password" v-model="password" required /> v-on="on"
</form> >
</p> New USER
<template #modal-footer> </v-btn>
<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>
</template> </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> </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"> <v-data-table :headers="headers" :items="users" sort-by="calories" class="elevation-1">
<template v-slot:top> <template #top>
<v-toolbar flat> <v-toolbar flat>
<v-toolbar-title>User Manage</v-toolbar-title> <v-toolbar-title>User Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider> <v-divider class="mx-4" inset vertical />
<v-spacer></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-toolbar> </v-toolbar>
</template> </template>
<template v-slot:item.actions="{ item }"> <template #item.actions="{ item }">
<v-icon small class="mr-2" @click="editUser(item)" :id="item.id"> mdi-pencil </v-icon> <v-icon :id="item.id" small class="mr-2" @click="dialog2 = true; editUser(item);">
<v-icon small @click="deleteUser(item.id, item)" :id="item.id"> mdi-delete </v-icon> mdi-pencil
</v-icon>
<v-icon :id="item.id" small @click="deleteUser(item.id, item)">
mdi-delete
</v-icon>
</template> </template>
<template v-slot:no-data> <template #no-data>
<v-btn color="primary" @click="initialize"> Reset </v-btn> <v-btn color="primary" @click="initialize">
Reset
</v-btn>
</template> </template>
</v-data-table> </v-data-table>
</div> </div>
</v-app>
</template> </template>
<script> <script>
export default { export default {
...@@ -127,21 +182,35 @@ export default { ...@@ -127,21 +182,35 @@ export default {
name: '', name: '',
password: '', password: '',
error: '', error: '',
dialog: false, dialog1: false,
dialog2: false,
dialogDelete: false, dialogDelete: false,
headers: [ headers: [
{ {
text: 'Name', text: 'Name',
align: 'start', align: 'start',
sortable: false, sortable: false,
value: 'name', value: 'name'
}, },
{ text: 'id', value: 'id' }, { text: 'id', value: 'id' },
{ text: 'email', value: 'email' }, { text: 'email', value: 'email' },
{ text: 'status', value: 'id', sortable: false }, { text: 'status', value: 'id', sortable: false },
{ text: 'created_at', value: 'created_at' }, { text: 'created_at', value: 'created_at' },
{ text: 'updated_at', value: 'updated_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: [], users: [],
eIndex: [], eIndex: [],
...@@ -156,7 +225,7 @@ export default { ...@@ -156,7 +225,7 @@ export default {
id: '', id: '',
email: '', email: '',
created_at: '', created_at: '',
updated_at: '', updated_at: ''
}, },
defaultItem: { defaultItem: {
name: '', name: '',
...@@ -164,61 +233,61 @@ export default { ...@@ -164,61 +233,61 @@ export default {
email: '', email: '',
status: '', status: '',
created_at: '', created_at: '',
updated_at: '', updated_at: ''
}, }
} }
}, },
computed: { computed: {
formTitle() { formTitle () {
return this.editedIndex === -1 ? 'New Item' : 'Edit Item' return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
}, }
}, },
watch: { watch: {
dialog(val) { dialog (val) {
val || this.close() val || this.close()
}, },
dialogDelete(val) { dialogDelete (val) {
val || this.closeDelete() val || this.closeDelete()
}, }
}, },
created() { created () {
this.initialize() this.initialize()
this.getUsers() this.getUsers()
}, },
methods: { methods: {
initialize() { initialize () {
this.users = [], this.users = []
this.editedItem = {} this.editedItem = {}
}, },
editItem(item) { editItem (item) {
this.editedIndex = this.users.indexOf(item) this.editedIndex = this.users.indexOf(item)
this.editedItem = Object.assign({}, item) this.editedItem = Object.assign({}, item)
this.dialog = true this.dialog = true
}, },
deleteItem(item) { deleteItem (item) {
this.editedIndex = this.users.indexOf(item) this.editedIndex = this.users.indexOf(item)
this.editedItem = Object.assign({}, item) this.editedItem = Object.assign({}, item)
this.dialogDelete = true this.dialogDelete = true
}, },
deleteItemConfirm() { deleteItemConfirm () {
this.users.splice(this.editedIndex, 1) this.users.splice(this.editedIndex, 1)
this.closeDelete() this.closeDelete()
}, },
close() { close () {
this.dialog = false this.dialog = false
this.$nextTick(() => { this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem) this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1 this.editedIndex = -1
}) })
}, },
closeDelete() { closeDelete () {
this.dialogDelete = false this.dialogDelete = false
this.$nextTick(() => { this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem) this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1 this.editedIndex = -1
}) })
}, },
save() { save () {
if (this.editedIndex > -1) { if (this.editedIndex > -1) {
Object.assign(this.users[this.editedIndex], this.editedItem) Object.assign(this.users[this.editedIndex], this.editedItem)
} else { } else {
...@@ -226,101 +295,111 @@ export default { ...@@ -226,101 +295,111 @@ export default {
} }
this.close() this.close()
}, },
getUsers() { getUsers () {
this.$axios this.$axios
.get('/users/',{ .get('/users/', {
headers: { headers: {
'Content-Type': 'application/json', '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)) .then(response => (this.users = response.data.data.data))
.catch(function (error) { .catch(function (error) {
console.log(error) console.log(error)
}) })
}, },
createUser() { createUser () {
const self = this const self = this
this.$axios this.$axios
.post('/users/',{ .post('/users/', {
headers: { email: this.email,
'Content-Type': 'application/json' password: this.password,
}, name: this.name
email: this.email, }, {
password: this.password, headers: {
name:this.name, 'Content-Type': 'application/json',
}) Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
.then(response => { }
// $bvModal.hide('modal-login'); }
this.$bvModal.hide('modal-login') )
self.$toast.success('User created successfully!',{ .then((response) => {
duration: 3000 self.$toast.success('User created successfully!', {
}) duration: 3000
console.log(response) })
this.editedItem = response.data.data console.log(response)
console.log(this.editedItem) this.editedItem = response.data.data
this.users.push(this.editedItem) console.log(this.editedItem)
}) this.users.push(this.editedItem)
.catch(errors => { })
this.$bvModal.hide('modal-login') .catch((errors) => {
console.log(errors.response.data.message) this.$bvModal.hide('modal-login')
this.message = errors.response.data.message console.log(errors.response.data.message)
self.$toast.error('something went wrong while trying create!',{ this.message = errors.response.data.message
duration: 3000 self.$toast.error('something went wrong while trying create!', {
}) duration: 3000
}) })
})
}, },
deleteUser(userID, index) { deleteUser (userID, index) {
const self = this const self = this
this.editedIndex = this.users.indexOf(index) this.editedIndex = this.users.indexOf(index)
if(confirm("Do you really want to delete?")){ if (confirm('Do you really want to delete?')) {
try{ try {
this.$axios this.$axios
.delete(`/users/${userID}`) .delete(`/users/${userID}`)
.then(response => { .then((response) => {
console.log(response.data) console.log(response.data)
this.users.splice(this.editedIndex, 1) this.users.splice(this.editedIndex, 1)
self.$toast.success('User deleted successfully!',{ self.$toast.success('User deleted successfully!', {
duration: 3000 duration: 3000
}) })
}) })
} catch(error){ } catch (error) {
console.log(error) console.log(error)
}
} }
} },
}, editUser (user) {
editUser(user) {
this.$bvModal.show('modal-edit')
this.eID = user.id this.eID = user.id
this.eEmail = user.email this.eEmail = user.email
this.eName = user.name this.eName = user.name
this.editedIndex = this.users.indexOf(user) this.editedIndex = this.users.indexOf(user)
console.log(this?.eID) console.log(this?.eID)
}, },
updateUser(userID) { updateUser (userID) {
const self = this const self = this
console.log(this.eName) console.log(this.eName)
console.log(this.eEmail) console.log(this.eEmail)
console.log(this?.eID) console.log(this?.eID)
try{
this.$axios this.$axios
.put(`/users/${this?.eID}`,{ .put(`/users/${this?.eID}`,
email: this.eEmail, {
password: this.ePassword, email: this.eEmail,
name:this.eName,} ) password: this.ePassword,
.then(response => { name: this.eName
self.$toast.success('User updated successfully!',{ },
duration: 3000 {
}) headers: {
console.log(response) 'Content-Type': 'application/json',
this.editedItem = response.data.data Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
this.$bvModal.hide('modal-edit') }
Object.assign(this.users[this.editedIndex], this.editedItem) }
}) )
} catch(error){ .then((response) => {
console.log(error) self.$toast.success('User updated successfully!', {
} duration: 3000
})
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
})
})
} }
}, }
} }
</script> </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