Skip to content

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

fix toast

parent 694d5e15
Expand all Show whitespace changes
Inline Side-by-side
Showing with 439 additions and 341 deletions
nuxt.config.js
View file @ b0f0ef05
...@@ -41,7 +41,7 @@ export default { ...@@ -41,7 +41,7 @@ export default {
// Modules: https://go.nuxtjs.dev/config-modules // Modules: https://go.nuxtjs.dev/config-modules
modules: [ modules: [
// https://go.nuxtjs.dev/bootstrap // https://go.nuxtjs.dev/bootstrap
'bootstrap-vue/nuxt', '@nuxtjs/bootstrap-vue',
'@nuxtjs/axios', '@nuxtjs/axios',
'@nuxtjs/auth-next', '@nuxtjs/auth-next',
'@nuxtjs/toast', '@nuxtjs/toast',
......
package-lock.json
View file @ b0f0ef05
This diff is collapsed.
pages/home/table.vue deleted 100644 → 0
View file @ 694d5e15
<template>
<v-data-table
:headers="headers"
:items="desserts"
sort-by="calories"
class="elevation-1"
>
<template v-slot:top>
<v-toolbar
flat
>
<v-toolbar-title>My CRUD</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 }">
<v-btn
color="primary"
dark
class="mb-2"
v-bind="attrs"
v-on="on"
>
New Item
</v-btn>
</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="Dessert name"
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="editedItem.calories"
label="Calories"
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="editedItem.fat"
label="Fat (g)"
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="editedItem.carbs"
label="Carbs (g)"
></v-text-field>
</v-col>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="editedItem.protein"
label="Protein (g)"
></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>
</template>
<template v-slot:item.actions="{ item }">
<v-icon
small
class="mr-2"
@click="editItem(item)"
>
mdi-pencil
</v-icon>
<v-icon
small
@click="deleteItem(item)"
>
mdi-delete
</v-icon>
</template>
<template v-slot:no-data>
<v-btn
color="primary"
@click="initialize"
>
Reset
</v-btn>
</template>
</v-data-table>
</template>
<script>
export default {
data: () => ({
dialog: false,
dialogDelete: false,
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Actions', value: 'actions', sortable: false },
],
desserts: [],
editedIndex: -1,
editedItem: {
name: '',
calories: 0,
fat: 0,
carbs: 0,
protein: 0,
},
defaultItem: {
name: '',
calories: 0,
fat: 0,
carbs: 0,
protein: 0,
},
}),
computed: {
formTitle () {
return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
},
},
watch: {
dialog (val) {
val || this.close()
},
dialogDelete (val) {
val || this.closeDelete()
},
},
created () {
this.initialize()
},
methods: {
initialize () {
this.desserts = [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
},
]
},
editItem (item) {
this.editedIndex = this.desserts.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialog = true
},
deleteItem (item) {
this.editedIndex = this.desserts.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialogDelete = true
},
deleteItemConfirm () {
this.desserts.splice(this.editedIndex, 1)
this.closeDelete()
},
close () {
this.dialog = false
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
})
},
closeDelete () {
this.dialogDelete = false
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
})
},
save () {
if (this.editedIndex > -1) {
Object.assign(this.desserts[this.editedIndex], this.editedItem)
} else {
this.desserts.push(this.editedItem)
}
this.close()
},
},
}
</script>
\ No newline at end of file
pages/home/user.vue
View file @ b0f0ef05
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
sort-by="calories" sort-by="calories"
class="elevation-1" class="elevation-1"
> >
<template v-slot:top> <template v-slot: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-divider>
...@@ -153,8 +153,8 @@ ...@@ -153,8 +153,8 @@
</v-toolbar> </v-toolbar>
</template> </template>
<template v-slot:item.actions="{ item }"> <template v-slot:item.actions="{ item }">
<v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon> <v-icon small class="mr-2" @click="editItem(id)" :id ="item.id"> mdi-pencil </v-icon>
<v-icon small @click="deleteItem(item)"> mdi-delete </v-icon> <v-icon small @click="deleteUser(item.id)" :id ="item.id"> mdi-delete </v-icon>
</template> </template>
<template v-slot:no-data> <template v-slot:no-data>
<v-btn color="primary" @click="initialize"> Reset </v-btn> <v-btn color="primary" @click="initialize"> Reset </v-btn>
...@@ -197,7 +197,7 @@ export default { ...@@ -197,7 +197,7 @@ export default {
{ text: "status", value: "status", sortable: false }, { text: "status", value: "status", 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 },
], ],
users: [], users: [],
message: [], message: [],
...@@ -279,28 +279,41 @@ export default { ...@@ -279,28 +279,41 @@ export default {
}, },
getUser() { getUser() {
axios axios
.get('http://127.0.0.1:8000/api/users/') .get("http://127.0.0.1:8000/api/users/")
.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);
}); });
}, },
async createUser() { createUser() {
try { axios
const response = await axios
.post('http://127.0.0.1:8000/api/users/',{ .post('http://127.0.0.1:8000/api/users/',{
headers: {
'Content-Type': 'application/json'
},
email: this.email, email: this.email,
password: this.password, password: this.password,
name:this.name, name:this.name,
}) })
console.log(response) .then(response => (this.message = response))
} catch(error) { .catch(function (errors) {
console.log(errors);
this.message = errors;
});
},
deleteUser(userID) {
try{
axios
.delete(`http://127.0.0.1:8000/api/users/${userID}`)
} catch(error){
console.log(error) console.log(error)
} }
},
}, },
created() { created() {
this.getUser(); this.getUser();
}, },
}
}; };
</script> </script>
pages/home/users.vue
View file @ b0f0ef05
...@@ -11,9 +11,9 @@ ...@@ -11,9 +11,9 @@
<b-breadcrumb-item href="/home/users">User</b-breadcrumb-item> <b-breadcrumb-item href="/home/users">User</b-breadcrumb-item>
</b-breadcrumb> </b-breadcrumb>
<div style="float: right"> <div style="float: right">
<b-button v-b-modal.modal-1 >New User</b-button> <b-button v-b-modal.modal-login >New User</b-button>
<b-modal id="modal-1" title="Create User" class="modal fade" > <b-modal id="modal-login" title="Create User" class="modal fade" >
<Notification :message="error" v-if="error" /> <Notification :message="error" v-if="error" />
<p class="my-4"> <p class="my-4">
<form @submit.prevent="createUser" > <form @submit.prevent="createUser" >
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
</form> </form>
</p> </p>
<template #modal-footer> <template #modal-footer>
<button v-b-modal.modal-close_visit @click="this.hide('modal-1')" class="btn btn-danger btn-sm m-1">Close</button> <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> <button @click="createUser" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button>
</template> </template>
</b-modal> </b-modal>
...@@ -277,7 +277,7 @@ export default { ...@@ -277,7 +277,7 @@ export default {
} }
this.close(); this.close();
}, },
getUser() { getUsers() {
axios axios
.get("http://127.0.0.1:8000/api/users/") .get("http://127.0.0.1:8000/api/users/")
.then((response) => (this.users = response.data.data.data)) .then((response) => (this.users = response.data.data.data))
...@@ -286,6 +286,7 @@ export default { ...@@ -286,6 +286,7 @@ export default {
}); });
}, },
createUser() { createUser() {
const self = this
axios axios
.post('http://127.0.0.1:8000/api/users/',{ .post('http://127.0.0.1:8000/api/users/',{
headers: { headers: {
...@@ -295,11 +296,20 @@ export default { ...@@ -295,11 +296,20 @@ export default {
password: this.password, password: this.password,
name:this.name, name:this.name,
}) })
.then(response => (this.message = response)) .then(response => {
.catch(function (errors) { // $bvModal.hide('modal-login');
console.log(errors); self.$toast.success('User created successfully!');
this.message = errors; console.log(response);
})
.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!',{
duration: 3000
});
}); });
}, },
deleteUser(userID) { deleteUser(userID) {
...@@ -311,9 +321,12 @@ export default { ...@@ -311,9 +321,12 @@ export default {
} }
}, },
editUser(userID) {
}
}, },
created() { created() {
this.getUser(); this.getUsers();
}, },
}; };
</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