Skip to content

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

ident

parent a17b034d
Show whitespace changes
Inline Side-by-side
Showing with 0 additions and 319 deletions
pages/home/user.vue deleted 100644 → 0
View file @ a17b034d
<template>
<div>
<div>
<Nav />
</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-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"
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
/>
<!-- <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>
<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>
</template>
<template v-slot:item.actions="{ item }">
<v-icon small class="mr-2" @click="editItem(id)" :id ="item.id"> mdi-pencil </v-icon>
<v-icon small @click="deleteUser(item.id)" :id ="item.id"> mdi-delete </v-icon>
</template>
<template v-slot:no-data>
<v-btn color="primary" @click="initialize"> Reset </v-btn>
</template>
</v-data-table>
</div>
</template>
<script>
import Nav from "@/components/Nav";
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 {
email:'',
name:'',
password:'',
error: '',
dialog: false,
dialogDelete: false,
headers: [
{
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" },
{ text: 'Actions', value: 'actions', sortable: false },
],
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: {
initialize() {
this.users = [];
},
editItem(item) {
this.editedIndex = this.users.indexOf(item);
this.editedItem = Object.assign({}, item);
this.dialog = true;
},
deleteItem(item) {
this.editedIndex = this.users.indexOf(item);
this.editedItem = Object.assign({}, item);
this.dialogDelete = true;
},
deleteItemConfirm() {
this.users.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.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);
});
},
createUser() {
axios
.post('http://127.0.0.1:8000/api/users/',{
headers: {
'Content-Type': 'application/json'
},
email: this.email,
password: this.password,
name:this.name,
})
.then(response => (this.message = response))
.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)
}
},
},
created() {
this.getUser();
},
};
</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