Last active
April 18, 2019 13:46
-
-
Save lordgape/b297899856190e2cd477e868f0f1ee55 to your computer and use it in GitHub Desktop.
Bootstrap User Component in Vue js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="container"> | |
<div class="row mt-5"> | |
<div class="col-12"> | |
<div class="card"> | |
<div class="card-header"> | |
<h3 class="card-title">Users</h3> | |
<div class="card-tools"> | |
<button class="btn btn-primary" @click="addNewUser">Add New</button> | |
</div> | |
</div> | |
<!-- /.card-header --> | |
<div class="card-body table-responsive p-0"> | |
<table class="table table-hover"> | |
<tbody><tr> | |
<th>ID</th> | |
<th>name</th> | |
<th>Type</th> | |
<th>Registered At</th> | |
<th>Modify</th> | |
</tr> | |
<tr v-for="user in users" :key="user.id"> | |
<td>{{user.id}}</td> | |
<td>{{user.name }}</td> | |
<td>{{user.type | capFirstLetter}}</td> | |
<td>{{user.created_at | companyDateFormat}}</td> | |
<td> | |
<a href="#" @click="editUser(user)"> | |
<i class="fa fa-edit"></i> | |
</a> | |
<a href="#" @click="deleteUser(user.id)" > | |
<i class="fa fa-trash"></i> | |
</a> | |
</td> | |
</tr> | |
</tbody></table> | |
</div> | |
<!-- /.card-body --> | |
</div> | |
<!-- /.card --> | |
</div> | |
</div> | |
<!-- User Modal --> | |
<!-- Modal --> | |
<div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> | |
<div class="modal-dialog modal-dialog-centered" role="document"> | |
<div class="modal-content"> | |
<div class="modal-header"> | |
<h5 v-show="!editMode" class="modal-title" id="exampleModalLabel">Add New</h5> | |
<h5 v-show="editMode" class="modal-title" id="updateModalLabel">Update User's Info</h5> | |
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
<span aria-hidden="true">×</span> | |
</button> | |
</div> | |
<!-- Users form start here --> | |
<form @submit.prevent="editMode ? updateUser() : createUser() "> | |
<div class="modal-body"> | |
<div class="form-group"> | |
<label>Name</label> | |
<input required v-model="form.name" type="text" name="name" | |
class="form-control" :class="{ 'is-invalid': form.errors.has('name') }"> | |
<has-error :form="form" field="name"></has-error> | |
</div> | |
<div class="form-group"> | |
<label>Email</label> | |
<input v-model="form.email" type="email" name="email" | |
class="form-control" :class="{ 'is-invalid': form.errors.has('email') }"> | |
<has-error :form="form" field="email"></has-error> | |
</div> | |
<div class="form-group" v-show="!editMode"> | |
<label>Password</label> | |
<input v-model="form.password" type="password" name="password" | |
class="form-control" :class="{ 'is-invalid': form.errors.has('password') }"> | |
<has-error :form="form" field="password"></has-error> | |
</div> | |
<div class="form-group" v-show="!editMode"> | |
<label>Confirm Password</label> | |
<input v-model="form.password_confirmation" type="password" name="password_confirmation" | |
class="form-control" :class="{ 'is-invalid': form.errors.has('password_confirmation') }"> | |
<has-error :form="form" field="password_confirmation"></has-error> | |
</div> | |
<div class="form-group"> | |
<label>Type</label> | |
<select v-model="form.type" type="text" id="type" name="type" | |
class="form-control" :class="{ 'is-invalid': form.errors.has('type') }"> | |
<option value="">Select User role</option> | |
<option value="admin">Admin</option> | |
<option value="author">Author</option> | |
<option value="user">Standard User</option> | |
</select> | |
<has-error :form="form" field="type"></has-error> | |
</div> | |
<div class="form-group"> | |
<label>Bio</label> | |
<textarea v-model="form.bio" name="bio" | |
class="form-control" :class="{ 'is-invalid': form.errors.has('bio') }"></textarea> | |
<has-error :form="form" field="type"></has-error> | |
</div> | |
</div> | |
<div class="modal-footer"> | |
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> | |
<button v-show="editMode" :disabled="form.busy" type="submit" class="btn btn-success">Update</button> | |
<button v-show="!editMode" :disabled="form.busy" type="submit" class="btn btn-primary">Create</button> | |
</div> | |
</form> | |
</div> | |
</div> | |
</div> | |
</div> | |
</template> | |
<script> | |
export default { | |
data(){ | |
return { | |
editMode:false, | |
users: {}, | |
form : new Form({ | |
id:'', | |
name:'', | |
email:'', | |
password:'', | |
password_confirmation:'', | |
type:'', | |
bio:'', | |
photo:'' | |
}) | |
} | |
}, | |
methods: { | |
addNewUser(){ | |
this.editMode = false; | |
this.form.clear(); | |
this.form.reset(); | |
$("#userModal").modal('show'); | |
}, | |
editUser(user){ | |
this.editMode = true; | |
this.form.clear(); // remove all error on form | |
this.form.reset(); // remove all form data | |
this.form.fill(user); // Populate form with new data | |
$("#userModal").modal('show'); | |
}, | |
updateUser() | |
{ | |
this.$Progress.start(); | |
this.form.put("api/users/" + this.form.id) | |
.then(() => { | |
Fire.$emit("loadUserEvent"); | |
toast.fire({ | |
type:"success", | |
title:"Update was successfully" | |
}); | |
$("#userModal").modal('hide'); | |
this.$Progress.finish() | |
}) | |
.catch(()=>{ | |
toast.fire({ | |
type:'error', | |
title: "Oops!! Fail to Update User" | |
}); | |
this.$Progress.fail(); | |
}); | |
}, | |
deleteUser(id){ | |
Swal.fire({ | |
title: 'Are you sure?', | |
text: "You won't be able to revert this!", | |
type: 'warning', | |
showCancelButton: true, | |
confirmButtonColor: '#3085d6', | |
cancelButtonColor: '#d33', | |
confirmButtonText: 'Yes, delete it!' | |
}).then((result) => { | |
if (result.value) { | |
this.form.delete("api/users/"+ id) | |
.then(() => { | |
Fire.$emit("loadUserEvent"); | |
toast.fire({ | |
type:'success', | |
title: "User Deleted Successfully" | |
}); | |
}) | |
.catch(() => { | |
toast.fire({ | |
type:'error', | |
title: "Oops!! Fail to delete User" | |
}); | |
}) | |
} | |
}); | |
}, | |
getUsers(){ | |
axios.get('api/users').then(( {data} ) => {this.users = data.data}) | |
}, | |
createUser(){ | |
this.$Progress.start(); | |
this.form.post('api/users') | |
.then((data) => { | |
Fire.$emit("loadUserEvent"); | |
$('#userModal').modal('hide'); | |
toast.fire({ | |
type:'success', | |
title: "User Created Successfully" | |
}); | |
this.$Progress.finish() | |
}) | |
.catch((err) => { | |
this.$Progress.fail(); | |
toast.fire({ | |
type:'error', | |
title: "Fail to create user" | |
}); | |
}); | |
} | |
}, | |
created(){ | |
this.getUsers(); | |
Fire.$on("loadUserEvent",() => { this.getUsers()}) | |
}, | |
mounted() { | |
console.log('Component mounted.') | |
} | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment