Skip to content

Instantly share code, notes, and snippets.

@bazuzu931

bazuzu931/Users.vue

Created December 16, 2018 20:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bazuzu931/a6c24b724e6b6cdf0831f8e580aa7d58 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bazuzu931/a6c24b724e6b6cdf0831f8e580aa7d58 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Users.vue
<template>
<div class="container">
<div class="row mt-5">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Users</h3>
<div class="card-tools">
<button class="btn btn-success" data-toggle="modal" data-target="#addNew">Add New
<i class="fa fa-user-plus fa-fw"></i>
</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>Email</th>
<th>Type</th>
<th>Modify</th>
</tr>
<tr>
<td>183</td>
<td>John Doe</td>
<td>11-7-2014</td>
<td><span class="tag tag-success">Approved</span></td>
<td>
<a href="#">
<i class="fa fa-edit green"></i>
</a>
/
<a href="#">
<i class="fa fa-trash red"></i>
</a>
</td>
</tr>
</tbody></table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="addNew" tabindex="-1" role="dialog" aria-labelledby="addNewLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addNewLabel">Add new</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form @submit.prevent="createUser">
<div class="modal-body">
<div class="form-group">
<!-- <label>New user</label> -->
<input
v-model="form.name"
:class="{ 'is-invalid': form.errors.has('name') }"
placeholder="Name"
type="text" name="name" class="form-control">
<has-error :form="form" field="name"></has-error>
</div>
<div class="form-group">
<!-- <label>New user</label> -->
<input
v-model="form.email"
:class="{ 'is-invalid': form.errors.has('email') }"
placeholder="Email"
type="email" name="email" class="form-control">
<has-error :form="form" field="email"></has-error>
</div>
<div class="form-group">
<!-- <label>New user</label> -->
<textarea
v-model="form.bio"
:class="{ 'is-invalid': form.errors.has('bio') }"
placeholder="Bio"
name="bio" class="form-control" id="bio"></textarea>
<has-error :form="form" field="bio"></has-error>
</div>
<div class="form-group">
<!-- <label>New user</label> -->
<select
v-model="form.type"
:class="{ 'is-invalid': form.errors.has('type') }"
placeholder="Name"
type="text" name="type" class="form-control" id="type">
<option value="">Select user role</option>
<option value="admin">Admin</option>
<option value="user">Standard User</option>
<option value="author">Author</option>
</select>
<has-error :form="form" field="type"></has-error>
</div>
<div class="form-group">
<!-- <label>New user</label> -->
<input
v-model="form.password"
:class="{ 'is-invalid': form.errors.has('password') }"
placeholder="Password"
type="password" name="password" class="form-control" id="password">
<has-error :form="form" field="password"></has-error>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Create</button>
</div>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
// Create a new form instance
form: new Form({
name: '',
email: '',
password: '',
type: '',
bio: '',
photo: ''
}),
}
},
mounted() {
console.log('Component mounted.')
},
methods: {
createUser() {
// Submit the form via a POST request
this.form.post('api/user')
.then(({ data }) => { console.log(data) })
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment