Skip to content

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

add create User

parent 87e5e640
Show whitespace changes
Inline Side-by-side
Showing with 158 additions and 224 deletions
components/nav.vue
View file @ 52559b4f
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<b-collapse id="nav-collapse" is-nav> <b-collapse id="nav-collapse" is-nav>
<b-navbar-nav> <b-navbar-nav>
<b-nav-item href="#">USER</b-nav-item> <b-nav-item href="/home/users">USER</b-nav-item>
<b-nav-item href="#">CATEGORY</b-nav-item> <b-nav-item href="#">CATEGORY</b-nav-item>
</b-navbar-nav> </b-navbar-nav>
......
pages/home/user.vue
View file @ 52559b4f
<template> <template>
<div> <div>
<div> <b-form @submit="onSubmit" @reset="onReset" v-if="show">
<Nav /> <b-form-group
</div> id="input-group-1"
<v-data-table label="Email address:"
:headers="headers" label-for="input-1"
:items="users" description="We'll never share your email with anyone else."
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 <b-form-input
</v-btn> id="input-1"
<!-- modal create user --> v-model="form.email"
</template> type="email"
<v-card> placeholder="Enter email"
<v-card-title> required
<span class="text-h5">{{ formTitle }}</span> ></b-form-input>
</v-card-title> </b-form-group>
<v-card-text> <b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
<v-container> <b-form-input
<v-row> id="input-2"
<v-col cols="12" sm="6" md="4"> v-model="form.name"
<v-text-field placeholder="Enter name"
v-model="editedItem.name" required
label="name" ></b-form-input>
></v-text-field> </b-form-group>
</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> <b-form-group id="input-group-3" label="Food:" label-for="input-3">
<v-spacer></v-spacer> <b-form-select
<v-btn color="blue darken-1" text @click="close"> id="input-3"
Cancel v-model="form.food"
</v-btn> :options="foods"
<v-btn color="blue darken-1" text @click="save"> Save </v-btn> required
</v-card-actions> ></b-form-select>
</v-card> </b-form-group>
</v-dialog>
<v-dialog v-model="dialogDelete" max-width="500px"> <b-form-group id="input-group-4" v-slot="{ ariaDescribedby }">
<v-card> <b-form-checkbox-group
<v-card-title class="text-h5" v-model="form.checked"
>Are you sure you want to delete this item?</v-card-title id="checkboxes-4"
> :aria-describedby="ariaDescribedby"
<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> <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-card> </b-form-checkbox-group>
</v-dialog> </b-form-group>
</v-toolbar>
</template> <b-button type="submit" variant="primary">Submit</b-button>
<template v-slot:item.actions="{ item }"> <b-button type="reset" variant="danger">Reset</b-button>
<v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon> </b-form>
<v-icon small @click="deleteItem(item)"> mdi-delete </v-icon> <b-card class="mt-3" header="Form Data Result">
</template> <pre class="m-0">{{ form }}</pre>
<template v-slot:no-data> </b-card>
<v-btn color="primary" @click="initialize"> Reset </v-btn>
</template>
</v-data-table>
</div> </div>
</template>
<script>
import Nav from "@/components/Nav";
import Navigation from "@/components/Navigation";
import axios from "axios";
export default { </template>
components: { Nav },
components: { Navigation },
middleware: ["web"],
data: () => ({ <script>
dialog: false, export default {
dialogDelete: false, data() {
headers: [ return {
{ form: {
text: "Name", email: '',
align: "start", name: '',
sortable: false, food: null,
value: "name", checked: []
}, },
{ text: "id", value: "id" }, foods: [{ text: 'Select One', value: null }, 'Carrots', 'Beans', 'Tomatoes', 'Corn'],
{ text: "email", value: "email" }, show: true
{ text: "status", value: "status", sortable: false }, }
{ text: "created_at", value: "created_at" },
{ text: "updated_at", value: "updated_at" },
],
users: [],
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: {
initialize() { onSubmit(event) {
this.users = []; event.preventDefault()
}, alert(JSON.stringify(this.form))
editItem(item) { },
this.editedIndex = this.users.indexOf(item); onReset(event) {
this.editedItem = Object.assign({}, item); event.preventDefault()
this.dialog = true; // Reset our form values
}, this.form.email = ''
deleteItem(item) { this.form.name = ''
this.editedIndex = this.users.indexOf(item); this.form.food = null
this.editedItem = Object.assign({}, item); this.form.checked = []
this.dialogDelete = true; // Trick to reset/clear native browser form validation state
}, this.show = false
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.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem); this.show = true
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);
});
},
},
created() {
this.getUser();
},
};
</script> </script>
\ No newline at end of file
pages/home/users.vue
View file @ 52559b4f
...@@ -4,12 +4,55 @@ ...@@ -4,12 +4,55 @@
<Nav /> <Nav />
</div> </div>
<b-breadcrumb> <b-breadcrumb>
<b-breadcrumb-item href="#home"> <b-breadcrumb-item href="/home">
<b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon> <b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon>
Home Home
</b-breadcrumb-item> </b-breadcrumb-item>
<b-breadcrumb-item href="#foo">User</b-breadcrumb-item> <b-breadcrumb-item href="/home/users">User</b-breadcrumb-item>
</b-breadcrumb> </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">
<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>
</b-modal>
</div>
<v-data-table <v-data-table
:headers="headers" :headers="headers"
:items="users" :items="users"
...@@ -23,7 +66,7 @@ ...@@ -23,7 +66,7 @@
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-dialog v-model="dialog" max-width="500px"> <v-dialog v-model="dialog" max-width="500px">
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn <!-- <v-btn
color="primary" color="primary"
dark dark
class="mb-2" class="mb-2"
...@@ -32,7 +75,7 @@ ...@@ -32,7 +75,7 @@
v-on:click="getUser" v-on:click="getUser"
> >
New User New User
</v-btn> </v-btn> -->
<!-- modal create user --> <!-- modal create user -->
</template> </template>
<v-card> <v-card>
...@@ -114,18 +157,26 @@ ...@@ -114,18 +157,26 @@
</template> </template>
</v-data-table> </v-data-table>
</div> </div>
</template> </template>
<script> <script>
import Nav from "@/components/Nav"; 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";
export default { export default {
components: { Nav }, components: { Nav },
components: { Navigation }, components: { Navigation },
components: { notification },
middleware: ["web"], middleware: ["web"],
data: () => ({ data: () => {
return {
email:'',
name:'',
password:'',
error: '',
dialog: false, dialog: false,
dialogDelete: false, dialogDelete: false,
headers: [ headers: [
...@@ -150,6 +201,7 @@ export default { ...@@ -150,6 +201,7 @@ export default {
status: "", status: "",
created_at: "", created_at: "",
updated_at: "", updated_at: "",
}, },
defaultItem: { defaultItem: {
name: "", name: "",
...@@ -159,7 +211,8 @@ export default { ...@@ -159,7 +211,8 @@ export default {
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";
...@@ -224,6 +277,20 @@ export default { ...@@ -224,6 +277,20 @@ export default {
console.log(error); console.log(error);
}); });
}, },
createUser() {
console.log('create user');
axios
.post('http://127.0.0.1:8000/api/users/',{
email: this.email,
password: this.password,
name:this.name,
})
.then((response) => (this.res = response.data.data.data))
.catch(function (error) {
this.error = "Username or Password not valid";
console.log(error);
});
},
}, },
created() { created() {
this.getUser(); this.getUser();
......
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