Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <!-- Main table element -->
- <div class="main-content">
- <div class="card">
- <header class="card-header">
- <h4 class="card-title">
- <strong>User</strong> List
- </h4>
- <div class="card-header-actions">
- <div class="btn-group btn-group-sm">
- <button class="btn" title="Refresh" @click.stop="refreshTable">
- <i class="fa fa-refresh"></i>
- </button>
- <button class="btn" title="Add new"
- @click.stop="openModalForm('create', $event.target)"><i
- class="fa fa-plus"></i></button>
- </div>
- <div class="btn-group btn-group-sm ml-2 d-none d-sm-flex">
- <button class="btn dropdown-toggle">Export</button>
- <div class="dropdown-menu dropdown-menu-right">
- <a class="dropdown-item" href="#">CSV</a>
- <a class="dropdown-item" href="#">SQL</a>
- <a class="dropdown-item" href="#">PDF</a>
- <a class="dropdown-item" href="#">Text</a>
- </div>
- </div>
- </div>
- </header>
- <div class="card-body">
- <div class="flexbox mb-20">
- <div class="lookup lookup-sm d-none d-lg-block">
- <b-form-input id="field_search"
- v-model="filter"
- type="text"
- placeholder="Search">
- </b-form-input>
- </div>
- <div class="btn-toolbar">
- <div>
- <b-form-select id="field_perpage_select" class="form-control-sm" :options="pageOptions" v-model="meta.per_page"/>
- </div>
- </div>
- </div>
- <b-table id="userTable" striped hover
- ref="userTable"
- :busy.sync="isBusy"
- :items="!filtered ? listAllUsers : searchUser"
- :fields="fields"
- :current-page="meta.current_page"
- :per-page="meta.per_page"
- :filter="filtered"
- >
- <template slot="profile" slot-scope="row">
- {{ row.value ? row.value.company : '' }}
- </template>
- <template slot="is_activated" slot-scope="row">
- <span :class="row.value ? 'badge badge-lg badge-pill badge-success bg-success' : 'badge badge-lg badge-pill badge-danger bg-danger'">
- <i :class="row.value ? 'fa fa-lg fa-check-circle' : 'fa fa-lg fa-times-circle'"></i>
- <template> {{ row.value ? 'Yes' : 'No' }}</template>
- </span>
- </template>
- <template slot="actions" slot-scope="row">
- <!-- We use click.stop here to prevent a 'row-clicked' event from also happening -->
- <button class="btn btn-w-md btn-round btn-primary"
- @click.stop="openModalForm('show', $event.target, row.item)"><i
- class="fa fa-search-plus"></i> Details
- </button>
- </template>
- </b-table>
- <b-pagination align="center"
- :total-rows="meta.total"
- :per-page="meta.per_page"
- v-model="meta.current_page"/>
- <!-- Open modal -->
- <!-- Start create modal -->
- <b-modal id="createUserForm" size="lg" :ok-disabled="errors.any()" @ok="createUser()"
- @hidden="hideModalForm('createUserForm')">
- <div class="card">
- <header class="card-header no-border">
- <h4 class="card-title"><strong>Create </strong>new user</h4>
- </header>
- <div class="card-body">
- <b-form-group horizontal id="field_c_username" label="Username"
- :label-cols="2"
- :feedback="errors.has('c_username') ? errors.first('c_username') : null"
- :state="errors.has('c_username') ? 'invalid' : 'valid'">
- <b-input-group>
- <b-input name="c_username" id="c_username"
- v-model="userDetails.username"
- type="text"
- :state="errors.has('c_username') ? 'invalid' : 'valid'"
- v-validate.initial="{
- rules: {
- UsernameUnique: true,
- regex: /^[a-zA-Z0-9.\-_]{3,30}$/,
- required: true
- }
- }">
- </b-input>
- </b-input-group>
- </b-form-group>
- <b-form-group horizontal id="field_c_password" label="Password"
- :label-cols="2"
- :feedback="errors.first('c_password')">
- <b-form-input name="c_password" id="c_password"
- v-model="userDetails.password"
- type="password"
- :state="!errors.has('c_password')"
- v-validate.initial="{
- rules: {
- regex: /^(?=.*[a-zA-Z$*_^-])(?=.*\d).+$/,
- required: true,
- min: 6
- }
- }">
- </b-form-input>
- </b-form-group>
- <b-form-group horizontal id="field_c_password_confirmation" label="Password Confirm"
- :label-cols="2"
- :feedback="errors.first('c_password_confirmation')">
- <b-form-input name="c_password_confirmation" id="c_password_confirmation"
- v-model="userDetails.password_confirmation" type="password"
- :state="!errors.has('c_password_confirmation')"
- v-validate.initial="'required|confirmed:c_password'">
- </b-form-input>
- </b-form-group>
- <b-form-group horizontal id="field_c_email" label="Email"
- :label-cols="2"
- :feedback="errors.first('c_email')">
- <b-form-input name="c_email" id="c_email"
- v-model="userDetails.email" type="text"
- :state="!errors.has('c_email')"
- v-validate.initial="'required|email|EmailUnique'">
- </b-form-input>
- </b-form-group>
- <b-form-group horizontal id="field_c_company" label="Company"
- :label-cols="2"
- :feedback="errors.first('c_company')">
- <b-form-input name="c_company" id="c_company"
- v-model="userDetails.company"
- type="text"
- :state="!errors.has('c_company')"
- v-validate.initial="'required'">
- </b-form-input>
- </b-form-group>
- <b-form-group horizontal id="field_c_location" label="Location"
- :label-cols="2"
- :feedback="errors.first('c_location')">
- <b-form-input name="c_location" id="c_location"
- v-model="userDetails.location"
- type="text"
- :state="!errors.has('c_location')"
- v-validate.initial="{
- rules: {
- regex:/^[a-zA-Z\d\-_\s]+$/
- }
- }">
- </b-form-input>
- </b-form-group>
- </div>
- </div>
- </b-modal>
- <!-- End create modal -->
- <b-modal id="showUserForm" size="lg"
- :title="'User detail: ' + userDetails.username"
- @ok="editFormToggle ? updateUser():null"
- @hidden="hideModalForm('showUserForm')">
- <label class="switch switch-lg">
- <input type="checkbox" v-model="editFormToggle">
- <span class="switch-indicator"></span>
- <span class="switch-description">Edit</span>
- </label>
- <b-form-group id="field_s_username" horizontal label="Username">
- <b-form-input name="s_username" id="s_username" v-model.lazy="userDetails.username"
- type="text" plaintext>
- </b-form-input>
- </b-form-group>
- <b-form-group id="field_s_password" horizontal label="Password"
- :state="errors.has('s_password')"
- :feedback="errors.first('s_password')">
- <b-form-input name="s_password" id="s_password" v-model.lazy="userDetails.password"
- type="password"
- :plaintext="!editFormToggle"
- v-validate.initial="{
- rules: {
- regex: /^(?=.*[a-zA-Z$*_^-])(?=.*\d).+$/,
- required: true,
- min: 6
- }
- }"
- :class="{'input': true, 'is-invalid': errors.has('s_password') }">
- </b-form-input>
- </b-form-group>
- <b-form-group id="field_s_password_confirmation" horizontal label="Password Confirm"
- :state="errors.has('s_password_confirmation')"
- :feedback="errors.first('s_password_confirmation')">
- <b-form-input name="s_password_confirmation" id="s_password_confirmation"
- v-model.lazy="userDetails.password_confirmation" type="password"
- :plaintext="!editFormToggle"
- v-validate.initial="'confirmed:s_password'"
- :class="{'input': true, 'is-invalid': errors.has('s_password_confirmation') }">
- </b-form-input>
- </b-form-group>
- <b-form-group id="field_s_email" horizontal label="Email"
- :state="errors.has('s_email')"
- :feedback="errors.first('s_email')">
- <b-form-input name="s_email" id="s_email" v-model.lazy="userDetails.email" type="text"
- :plaintext="!editFormToggle"
- v-validate.initial="'required|email'"
- :class="{'input': true, 'is-invalid': errors.has('s_email') }">
- </b-form-input>
- </b-form-group>
- <b-form-group id="field_s_company" horizontal label="Company"
- :state="errors.has('s_company')"
- :feedback="errors.first('s_company')">
- <b-form-input name="s_company" id="s_company" v-model.lazy="userDetails.company" type="text"
- :plaintext="!editFormToggle"
- v-validate.initial="'required'"
- :class="{'input': true, 'is-invalid': errors.has('s_company') }">
- </b-form-input>
- </b-form-group>
- <b-form-group id="field_s_location" horizontal label="Location">
- <b-form-input name="s_location" id="s_location" v-model.lazy="userDetails.location"
- type="text"
- :plaintext="!editFormToggle">
- </b-form-input>
- </b-form-group>
- </b-modal>
- <!-- End modal -->
- </div>
- <div v-show="isBusy" class="card-loading reveal">
- <svg class="spinner-circle-material-svg" viewBox="0 0 50 50">
- <circle class="circle" cx="25" cy="25" r="20"></circle>
- </svg>
- </div>
- </div>
- </div>
- </template>
- <script>
- import axios from 'axios'
- import Vue from 'vue'
- import BootstrapVue from 'bootstrap-vue'
- // import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm'
- import VeeValidate from 'vee-validate'
- import {Validator} from 'vee-validate';
- // Config for VeeValidate
- const config = {
- errorBagName: 'errors', // change if property conflicts.
- fieldsBagName: 'fields ', // Default is fields
- delay: 0,
- locale: 'en',
- dictionary: {
- en: {
- attributes: {
- c_username: 'Username',
- c_password: 'Password',
- c_password_confirmation: 'Password Confirm',
- c_email: 'Email Address',
- c_company: 'Company Name',
- c_location: 'Location',
- s_username: 'Username',
- s_password: 'Password',
- s_password_confirmation: 'Password Confirm',
- s_email: 'Email Address',
- s_company: 'Company Name',
- }
- }
- },
- strict: true,
- classes: false,
- classNames: {
- touched: 'touched', // the control has been blurred
- untouched: 'untouched', // the control hasn't been blurred
- valid: 'valid', // model is valid
- invalid: 'invalid', // model is invalid
- pristine: 'pristine', // control has not been interacted with
- dirty: 'dirty' // control has been interacted with
- },
- events: 'input|blur',
- inject: true,
- validity: false,
- aria: true
- };
- Vue.use(VeeValidate, config);
- Vue.use(BootstrapVue);
- export default {
- name: 'user-table',
- data: () => ({
- items: {},
- links: {},
- meta: {
- current_page: 1,
- from: null,
- last_page: null,
- path: '',
- per_page: 15,
- to: null,
- total: null
- },
- fields: [
- {key: 'username', label: 'Username', sortable: true, 'class': 'text-center'},
- {key: 'email', label: 'Email', sortable: true, 'class': 'text-center'},
- {key: 'profile', label: 'Company Name', sortable: true, 'class': 'text-center'},
- {key: 'is_activated', label: 'Activated?', 'class': 'text-center'},
- {key: 'updated_at', label: 'Updated at', 'class': 'text-center'},
- {key: 'actions', label: 'Actions', 'class': 'text-center'}
- ],
- userDetails: {
- id: null,
- username: '',
- password: '',
- password_confirmation: '',
- email: '',
- company: '',
- location: '',
- is_activated: ''
- },
- methodForm: '',
- editFormToggle: false,
- isBusy: false,
- pageOptions: [
- {value: 15, text: 'Per page : 15 '},
- {value: 30, text: ' --- 30 '},
- {value: 60, text: ' --- 60 '},
- {value: 90, text: ' --- 90 '},
- {value: 120, text: ' --- 120 '}
- ],
- sortBy: '',
- sortDesc: false,
- filter: null,
- filtered: null,
- searchTyping: false
- }),
- // Validate method via backend api
- created() {
- // Validate user exist
- const isUsernameUnique = async (value) => {
- try {
- const promise = await axios.post(route('internal.api.user.validate'), {username: value});
- const data = await promise.data;
- return {
- valid: data.valid,
- data: {
- message: data.message
- }
- };
- } catch (e) {
- console.log('Calling the API has been an error: ', e);
- return []
- }
- };
- Validator.extend('UsernameUnique', {
- validate: isUsernameUnique,
- getMessage: (field, params, data) => {
- return data.message;
- }
- });
- // Validate email exist
- const isEmailUnique = async (value) => {
- try {
- const promise = await axios.post(route('internal.api.email.validate'), {email: value});
- const data = await promise.data;
- return {
- valid: data.valid,
- data: {
- message: data.message
- }
- }
- } catch (e) {
- console.log('Calling api has been an error: ', e);
- }
- };
- Validator.extend('EmailUnique', {
- validate: isEmailUnique,
- getMessage: (field, params, data) => {
- return data.message;
- }
- });
- },
- computed: {},
- watch: {
- filter: _.debounce(function () {
- this.filtered = this.filter;
- console.log('Filtered!!')
- }, 1000)
- },
- methods: {
- // List all user
- async listAllUsers() {
- try {
- this.isBusy = true;
- const promise = await axios.get(route('internal.api.user.all') + "?page=" + this.meta.current_page + "&perPage=" + this.meta.per_page);
- const data = await promise.data;
- console.log(data);
- this.items = data.data;
- this.links = data.links;
- this.meta = data.meta;
- this.isBusy = false;
- this.refreshTable();
- return (data.data || []);
- } catch (e) {
- console.log('calling api error: ', e);
- return []
- }
- },
- // Search user
- async searchUser() {
- try {
- this.isBusy = true;
- const promise = await axios.get(route('internal.api.user.search') + "?q=" + this.filter);
- const data = await promise.data;
- console.log(data);
- this.items = data.data;
- this.links = data.links;
- this.meta = data.meta;
- this.refreshTable();
- this.isBusy = false;
- return (data.data || [])
- } catch (e) {
- console.log('calling api error: ', e);
- return []
- }
- },
- // Create a new user via api
- async createUser() {
- try {
- this.isBusy = true;
- const promise = await axios.post(route('internal.api.user.create'), this.userDetails);
- const data = await promise.data;
- console.log(data);
- this.isBusy = false;
- this.refreshTable();
- return (data.data || [])
- } catch (e) {
- console.log('calling api error: ', e);
- return []
- }
- },
- // Update the user via api
- async updateUser() {
- try {
- this.isBusy = true;
- const promise = await axios.post(route('internal.api.user.update', {id: this.userDetails.id}), {
- password: this.userDetails.password,
- password_confirmation: this.userDetails.password_confirmation,
- email: this.userDetails.email,
- company: this.userDetails.company,
- location: this.userDetails.location
- });
- const data = await promise.data;
- console.log(this.userDetails);
- console.log(data);
- this.isBusy = false;
- this.refreshTable();
- return (data.data || [])
- } catch (e) {
- console.log('calling api error: ', e);
- return []
- }
- },
- openModalForm(method, button, item = null) {
- if (method == 'create') {
- this.methodForm = 'create';
- this.$root.$emit('bv::show::modal', 'createUserForm', button)
- }
- if (method == 'show') {
- this.methodForm = 'show';
- this.userDetails = item;
- this.$root.$emit('bv::show::modal', 'showUserForm', button)
- }
- },
- hideModalForm(modal) {
- this.userDetails = [];
- this.editFormToggle = false;
- this.refreshTable();
- this.$root.$emit('bv::hide::modal', modal)
- },
- refreshTable() {
- this.$refs.userTable.refresh()
- }
- }
- }
- </script>
Add Comment
Please, Sign In to add comment