Skip to content

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

add delete user

parent 52559b4f
Show whitespace changes
Inline Side-by-side
Showing with 692 additions and 93 deletions
nuxt.config.js
View file @ 694d5e15
...@@ -44,6 +44,7 @@ export default { ...@@ -44,6 +44,7 @@ export default {
'bootstrap-vue/nuxt', 'bootstrap-vue/nuxt',
'@nuxtjs/axios', '@nuxtjs/axios',
'@nuxtjs/auth-next', '@nuxtjs/auth-next',
'@nuxtjs/toast',
], ],
axios: { axios: {
baseURL: process.env.API_URL || ' http://127.0.0.1:8000/api/', baseURL: process.env.API_URL || ' http://127.0.0.1:8000/api/',
...@@ -61,4 +62,16 @@ export default { ...@@ -61,4 +62,16 @@ export default {
// router: { // router: {
// middleware: 'web' // middleware: 'web'
// } // }
toast: {
position: 'top-center',
register: [ // Register custom toasts
{
name: 'my-error',
message: 'Oops...Something went wrong',
options: {
type: 'error'
}
}
]
},
} }
package-lock.json
View file @ 694d5e15
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
"dependencies": { "dependencies": {
"@nuxtjs/auth-next": "5.0.0-1667386184.dfbbb54", "@nuxtjs/auth-next": "5.0.0-1667386184.dfbbb54",
"@nuxtjs/axios": "^5.0.0", "@nuxtjs/axios": "^5.0.0",
"@nuxtjs/toast": "^3.3.1",
"axios": "^1.2.1", "axios": "^1.2.1",
"bootstrap": "^4.6.2", "bootstrap": "^4.6.2",
"bootstrap-vue": "^2.23.1", "bootstrap-vue": "^2.23.1",
...@@ -21,8 +22,10 @@ ...@@ -21,8 +22,10 @@
"prism-themes": "^1.9.0", "prism-themes": "^1.9.0",
"vue": "^2.7.10", "vue": "^2.7.10",
"vue-axios": "^3.5.2", "vue-axios": "^3.5.2",
"vue-notification": "^1.3.20",
"vue-server-renderer": "^2.7.10", "vue-server-renderer": "^2.7.10",
"vue-template-compiler": "^2.7.10", "vue-template-compiler": "^2.7.10",
"vue-toasted": "^1.1.28",
"vuetify": "^2.6.13" "vuetify": "^2.6.13"
}, },
"devDependencies": { "devDependencies": {
...@@ -2430,6 +2433,14 @@ ...@@ -2430,6 +2433,14 @@
"http-proxy-middleware": "^1.0.6" "http-proxy-middleware": "^1.0.6"
} }
}, },
"node_modules/@nuxtjs/toast": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@nuxtjs/toast/-/toast-3.3.1.tgz",
"integrity": "sha512-b9JpyjSw5ZOyjskBvNc4NEebe0qxB6LivBlO84gHOnsaF23rLkJoBfVNDcXwGNDl7vm09yM4WqBGTkm/OQ0ZCQ==",
"dependencies": {
"vue-toasted": "^1.1.28"
}
},
"node_modules/@nuxtjs/vuetify": { "node_modules/@nuxtjs/vuetify": {
"version": "1.12.3", "version": "1.12.3",
"resolved": "https://registry.npmjs.org/@nuxtjs/vuetify/-/vuetify-1.12.3.tgz", "resolved": "https://registry.npmjs.org/@nuxtjs/vuetify/-/vuetify-1.12.3.tgz",
...@@ -12473,6 +12484,14 @@ ...@@ -12473,6 +12484,14 @@
"resolved": "https://registry.npmjs.org/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz", "resolved": "https://registry.npmjs.org/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz",
"integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g==" "integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g=="
}, },
"node_modules/vue-notification": {
"version": "1.3.20",
"resolved": "https://registry.npmjs.org/vue-notification/-/vue-notification-1.3.20.tgz",
"integrity": "sha512-vPj67Ah72p8xvtyVE8emfadqVWguOScAjt6OJDEUdcW5hW189NsqvfkOrctxHUUO9UYl9cTbIkzAEcPnHu+zBQ==",
"peerDependencies": {
"vue": "^2.0.0"
}
},
"node_modules/vue-router": { "node_modules/vue-router": {
"version": "3.6.5", "version": "3.6.5",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz",
...@@ -12561,6 +12580,11 @@ ...@@ -12561,6 +12580,11 @@
"resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz", "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==" "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
}, },
"node_modules/vue-toasted": {
"version": "1.1.28",
"resolved": "https://registry.npmjs.org/vue-toasted/-/vue-toasted-1.1.28.tgz",
"integrity": "sha512-UUzr5LX51UbbiROSGZ49GOgSzFxaMHK6L00JV8fir/CYNJCpIIvNZ5YmS4Qc8Y2+Z/4VVYRpeQL2UO0G800Raw=="
},
"node_modules/vuetify": { "node_modules/vuetify": {
"version": "2.6.13", "version": "2.6.13",
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.6.13.tgz", "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.6.13.tgz",
......
package.json
View file @ 694d5e15
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
"dependencies": { "dependencies": {
"@nuxtjs/auth-next": "5.0.0-1667386184.dfbbb54", "@nuxtjs/auth-next": "5.0.0-1667386184.dfbbb54",
"@nuxtjs/axios": "^5.0.0", "@nuxtjs/axios": "^5.0.0",
"@nuxtjs/toast": "^3.3.1",
"axios": "^1.2.1", "axios": "^1.2.1",
"bootstrap": "^4.6.2", "bootstrap": "^4.6.2",
"bootstrap-vue": "^2.23.1", "bootstrap-vue": "^2.23.1",
...@@ -21,8 +22,10 @@ ...@@ -21,8 +22,10 @@
"prism-themes": "^1.9.0", "prism-themes": "^1.9.0",
"vue": "^2.7.10", "vue": "^2.7.10",
"vue-axios": "^3.5.2", "vue-axios": "^3.5.2",
"vue-notification": "^1.3.20",
"vue-server-renderer": "^2.7.10", "vue-server-renderer": "^2.7.10",
"vue-template-compiler": "^2.7.10", "vue-template-compiler": "^2.7.10",
"vue-toasted": "^1.1.28",
"vuetify": "^2.6.13" "vuetify": "^2.6.13"
}, },
"devDependencies": { "devDependencies": {
......
pages/home/table.vue 0 → 100644
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 @ 694d5e15
<template> <template>
<div> <div>
<b-form @submit="onSubmit" @reset="onReset" v-if="show"> <div>
<b-form-group <Nav />
id="input-group-1" </div>
label="Email address:" <b-breadcrumb>
label-for="input-1" <b-breadcrumb-item href="/home">
description="We'll never share your email with anyone else." <b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon>
> Home
<b-form-input </b-breadcrumb-item>
id="input-1" <b-breadcrumb-item href="/home/users">User</b-breadcrumb-item>
v-model="form.email" </b-breadcrumb>
<div style="float: right">
<b-button v-b-modal.modal-1 >New User</b-button>
<b-modal id="modal-1" 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" type="email"
placeholder="Enter email" class="form-control mb-2"
placeholder="Email"
v-model="email"
required required
></b-form-input> />
</b-form-group>
<b-form-group id="input-group-2" label="Your Name:" label-for="input-2"> <label>Password :</label>
<b-form-input <input
id="input-2" type="password"
v-model="form.name" class="form-control mb-2"
placeholder="Enter name" placeholder="password"
v-model="password"
required required
></b-form-input> />
</b-form-group> <!-- <div class="button">
<button class="w-30 btn btn-sm btn-primary" type="submit">
Create
</button>
</div> -->
</form>
</p>
<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 @click="createUser" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button>
</template>
</b-modal>
</div>
<v-data-table
:headers="headers"
:items="users"
sort-by="calories"
class="elevation-1"
>
<template v-slot: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 }">
<!-- <v-btn
color="primary"
dark
class="mb-2"
v-bind="attrs"
v-on="on"
v-on:click="getUser"
>
New User
</v-btn> -->
<!-- modal create user -->
</template>
<v-card>
<v-card-title>
<span class="text-h5">{{ formTitle }}</span>
</v-card-title>
<b-form-group id="input-group-3" label="Food:" label-for="input-3"> <v-card-text>
<b-form-select <v-container>
id="input-3" <v-row>
v-model="form.food" <v-col cols="12" sm="6" md="4">
:options="foods" <v-text-field
required v-model="editedItem.name"
></b-form-select> label="name"
</b-form-group> ></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>
<b-form-group id="input-group-4" v-slot="{ ariaDescribedby }"> <v-card-actions>
<b-form-checkbox-group <v-spacer></v-spacer>
v-model="form.checked" <v-btn color="blue darken-1" text @click="close">
id="checkboxes-4" Cancel
:aria-describedby="ariaDescribedby" </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
> >
<b-form-checkbox value="me">Check me out</b-form-checkbox> <v-card-actions>
<b-form-checkbox value="that">Check that out</b-form-checkbox> <v-spacer></v-spacer>
</b-form-checkbox-group> <v-btn color="blue darken-1" text @click="closeDelete"
</b-form-group> >Cancel</v-btn
>
<b-button type="submit" variant="primary">Submit</b-button> <v-btn color="blue darken-1" text @click="deleteItemConfirm"
<b-button type="reset" variant="danger">Reset</b-button> >OK</v-btn
</b-form> >
<b-card class="mt-3" header="Form Data Result"> <v-spacer></v-spacer>
<pre class="m-0">{{ form }}</pre> </v-card-actions>
</b-card> </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>
</div> </div>
</template> </template>
<script> <script>
export default { import Nav from "@/components/Nav";
data() { import Navigation from "@/components/Navigation";
import axios from "axios";
import notification from "@/components/notification";
import Toasted from 'vue-toasted';
import { ModalPlugin } from 'bootstrap-vue';
export default {
components: { Nav },
components: { Navigation },
components: { notification },
middleware: ["web"],
data: () => {
return { return {
form: { email:'',
email: '', name:'',
name: '', password:'',
food: null, error: '',
checked: [] dialog: false,
}, dialogDelete: false,
foods: [{ text: 'Select One', value: null }, 'Carrots', 'Beans', 'Tomatoes', 'Corn'], headers: [
show: true {
text: "Name",
align: "start",
sortable: false,
value: "name",
},
{ text: "id", value: "id" },
{ text: "email", value: "email" },
{ text: "status", value: "status", sortable: false },
{ text: "created_at", value: "created_at" },
{ text: "updated_at", value: "updated_at" },
],
users: [],
message: [],
editedIndex: -1,
editedItem: {
name: "",
id: "",
email: "",
status: "",
created_at: "",
updated_at: "",
},
defaultItem: {
name: "",
id: "",
email: "",
status: "",
created_at: "",
updated_at: "",
},
} }
}, },
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: { methods: {
onSubmit(event) { initialize() {
event.preventDefault() this.users = [];
alert(JSON.stringify(this.form)) },
}, editItem(item) {
onReset(event) { this.editedIndex = this.users.indexOf(item);
event.preventDefault() this.editedItem = Object.assign({}, item);
// Reset our form values this.dialog = true;
this.form.email = '' },
this.form.name = '' deleteItem(item) {
this.form.food = null this.editedIndex = this.users.indexOf(item);
this.form.checked = [] this.editedItem = Object.assign({}, item);
// Trick to reset/clear native browser form validation state this.dialogDelete = true;
this.show = false },
deleteItemConfirm() {
this.users.splice(this.editedIndex, 1);
this.closeDelete();
},
close() {
this.dialog = false;
this.$nextTick(() => { this.$nextTick(() => {
this.show = true 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.users[this.editedIndex], this.editedItem);
} else {
this.users.push(this.editedItem);
} }
this.close();
},
getUser() {
axios
.get('http://127.0.0.1:8000/api/users/')
.then((response) => (this.users = response.data.data.data))
.catch(function (error) {
console.log(error);
});
},
async createUser() {
try {
const response = await axios
.post('http://127.0.0.1:8000/api/users/',{
email: this.email,
password: this.password,
name:this.name,
})
console.log(response)
} catch(error) {
console.log(error)
} }
},
created() {
this.getUser();
},
}
};
</script> </script>
pages/home/users.vue
View file @ 694d5e15
...@@ -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-1 >New User</b-button>
<b-modal id="modal-1" title="Create User"> <b-modal id="modal-1" 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" >
...@@ -44,13 +44,17 @@ ...@@ -44,13 +44,17 @@
v-model="password" v-model="password"
required required
/> />
<div class="button"> <!-- <div class="button">
<button class="w-30 btn btn-sm btn-primary" type="submit"> <button class="w-30 btn btn-sm btn-primary" type="submit">
Create Create
</button> </button>
</div> </div> -->
</form> </form>
</p> </p>
<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 @click="createUser" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button>
</template>
</b-modal> </b-modal>
</div> </div>
<v-data-table <v-data-table
...@@ -59,7 +63,7 @@ ...@@ -59,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>
...@@ -149,8 +153,8 @@ ...@@ -149,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>
...@@ -164,6 +168,8 @@ import Nav from "@/components/Nav"; ...@@ -164,6 +168,8 @@ import Nav from "@/components/Nav";
import Navigation from "@/components/Navigation"; import Navigation from "@/components/Navigation";
import axios from "axios"; import axios from "axios";
import notification from "@/components/notification"; import notification from "@/components/notification";
import Toasted from 'vue-toasted';
import { ModalPlugin } from 'bootstrap-vue';
export default { export default {
components: { Nav }, components: { Nav },
...@@ -191,8 +197,10 @@ export default { ...@@ -191,8 +197,10 @@ 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: [],
editedIndex: -1, editedIndex: -1,
editedItem: { editedItem: {
name: "", name: "",
...@@ -278,19 +286,31 @@ export default { ...@@ -278,19 +286,31 @@ export default {
}); });
}, },
createUser() { createUser() {
console.log('create user');
axios 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,
}) })
.then((response) => (this.res = response.data.data.data)) .then(response => (this.message = response))
.catch(function (error) { .catch(function (errors) {
this.error = "Username or Password not valid"; console.log(errors);
console.log(error); this.message = errors;
}); });
}, },
deleteUser(userID) {
try{
axios
.delete(`http://127.0.0.1:8000/api/users/${userID}`)
} catch(error){
console.log(error)
}
},
}, },
created() { created() {
this.getUser(); this.getUser();
......
pages/index.vue
View file @ 694d5e15
...@@ -60,6 +60,7 @@ ...@@ -60,6 +60,7 @@
<script> <script>
import Nav from "@/components/Nav"; import Nav from "@/components/Nav";
import notification from "@/components/notification"; import notification from "@/components/notification";
import Toasted from 'vue-toasted';
export default { export default {
components: { Nav }, components: { Nav },
...@@ -101,10 +102,16 @@ export default { ...@@ -101,10 +102,16 @@ export default {
this.$auth.$storage.setUniversal("userName", resp.data.name); this.$auth.$storage.setUniversal("userName", resp.data.name);
this.$auth.$storage.setUniversal("loggedIn", "true"); this.$auth.$storage.setUniversal("loggedIn", "true");
if (resp.status == "success") { if (resp.status == "success") {
this.$toast.success('Successfully authenticated',{
duration: 2000
});
this.$router.push("home"); this.$router.push("home");
} }
} catch (e) { } catch (e) {
this.error = "Username or Password not valid"; // this.error = "Username or Password not valid";
this.$toast.error('Username or Password not valid',{
duration: 2000
});
this.$router.push("/"); this.$router.push("/");
} }
......
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