Guest User

Untitled

a guest
May 5th, 2018
158
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.82 KB | None | 0 0
  1. <template>
  2. <!-- Main table element -->
  3. <div class="main-content">
  4. <div class="card">
  5. <header class="card-header">
  6. <h4 class="card-title">
  7. <strong>User</strong> List
  8. </h4>
  9. <div class="card-header-actions">
  10. <div class="btn-group btn-group-sm">
  11. <button class="btn" title="Refresh" @click.stop="refreshTable">
  12. <i class="fa fa-refresh"></i>
  13. </button>
  14. <button class="btn" title="Add new"
  15. @click.stop="openModalForm('create', $event.target)"><i
  16. class="fa fa-plus"></i></button>
  17. </div>
  18. <div class="btn-group btn-group-sm ml-2 d-none d-sm-flex">
  19. <button class="btn dropdown-toggle">Export</button>
  20. <div class="dropdown-menu dropdown-menu-right">
  21. <a class="dropdown-item" href="#">CSV</a>
  22. <a class="dropdown-item" href="#">SQL</a>
  23. <a class="dropdown-item" href="#">PDF</a>
  24. <a class="dropdown-item" href="#">Text</a>
  25. </div>
  26. </div>
  27. </div>
  28. </header>
  29. <div class="card-body">
  30. <div class="flexbox mb-20">
  31. <div class="lookup lookup-sm d-none d-lg-block">
  32. <b-form-input id="field_search"
  33. v-model="filter"
  34. type="text"
  35. placeholder="Search">
  36. </b-form-input>
  37. </div>
  38. <div class="btn-toolbar">
  39. <div>
  40. <b-form-select id="field_perpage_select" class="form-control-sm" :options="pageOptions" v-model="meta.per_page"/>
  41. </div>
  42. </div>
  43. </div>
  44. <b-table id="userTable" striped hover
  45. ref="userTable"
  46. :busy.sync="isBusy"
  47. :items="!filtered ? listAllUsers : searchUser"
  48. :fields="fields"
  49. :current-page="meta.current_page"
  50. :per-page="meta.per_page"
  51. :filter="filtered"
  52. >
  53. <template slot="profile" slot-scope="row">
  54. {{ row.value ? row.value.company : '' }}
  55. </template>
  56. <template slot="is_activated" slot-scope="row">
  57. <span :class="row.value ? 'badge badge-lg badge-pill badge-success bg-success' : 'badge badge-lg badge-pill badge-danger bg-danger'">
  58. <i :class="row.value ? 'fa fa-lg fa-check-circle' : 'fa fa-lg fa-times-circle'"></i>
  59. <template> {{ row.value ? 'Yes' : 'No' }}</template>
  60. </span>
  61. </template>
  62. <template slot="actions" slot-scope="row">
  63. <!-- We use click.stop here to prevent a 'row-clicked' event from also happening -->
  64. <button class="btn btn-w-md btn-round btn-primary"
  65. @click.stop="openModalForm('show', $event.target, row.item)"><i
  66. class="fa fa-search-plus"></i> Details
  67. </button>
  68. </template>
  69. </b-table>
  70. <b-pagination align="center"
  71. :total-rows="meta.total"
  72. :per-page="meta.per_page"
  73. v-model="meta.current_page"/>
  74. <!-- Open modal -->
  75. <!-- Start create modal -->
  76. <b-modal id="createUserForm" size="lg" :ok-disabled="errors.any()" @ok="createUser()"
  77. @hidden="hideModalForm('createUserForm')">
  78. <div class="card">
  79. <header class="card-header no-border">
  80. <h4 class="card-title"><strong>Create </strong>new user</h4>
  81. </header>
  82. <div class="card-body">
  83. <b-form-group horizontal id="field_c_username" label="Username"
  84. :label-cols="2"
  85. :feedback="errors.has('c_username') ? errors.first('c_username') : null"
  86. :state="errors.has('c_username') ? 'invalid' : 'valid'">
  87. <b-input-group>
  88. <b-input name="c_username" id="c_username"
  89. v-model="userDetails.username"
  90. type="text"
  91. :state="errors.has('c_username') ? 'invalid' : 'valid'"
  92. v-validate.initial="{
  93. rules: {
  94. UsernameUnique: true,
  95. regex: /^[a-zA-Z0-9.\-_]{3,30}$/,
  96. required: true
  97. }
  98. }">
  99. </b-input>
  100. </b-input-group>
  101. </b-form-group>
  102. <b-form-group horizontal id="field_c_password" label="Password"
  103. :label-cols="2"
  104. :feedback="errors.first('c_password')">
  105. <b-form-input name="c_password" id="c_password"
  106. v-model="userDetails.password"
  107. type="password"
  108. :state="!errors.has('c_password')"
  109. v-validate.initial="{
  110. rules: {
  111. regex: /^(?=.*[a-zA-Z$*_^-])(?=.*\d).+$/,
  112. required: true,
  113. min: 6
  114. }
  115. }">
  116. </b-form-input>
  117. </b-form-group>
  118. <b-form-group horizontal id="field_c_password_confirmation" label="Password Confirm"
  119. :label-cols="2"
  120. :feedback="errors.first('c_password_confirmation')">
  121. <b-form-input name="c_password_confirmation" id="c_password_confirmation"
  122. v-model="userDetails.password_confirmation" type="password"
  123. :state="!errors.has('c_password_confirmation')"
  124. v-validate.initial="'required|confirmed:c_password'">
  125. </b-form-input>
  126. </b-form-group>
  127. <b-form-group horizontal id="field_c_email" label="Email"
  128. :label-cols="2"
  129. :feedback="errors.first('c_email')">
  130. <b-form-input name="c_email" id="c_email"
  131. v-model="userDetails.email" type="text"
  132. :state="!errors.has('c_email')"
  133. v-validate.initial="'required|email|EmailUnique'">
  134. </b-form-input>
  135. </b-form-group>
  136. <b-form-group horizontal id="field_c_company" label="Company"
  137. :label-cols="2"
  138. :feedback="errors.first('c_company')">
  139. <b-form-input name="c_company" id="c_company"
  140. v-model="userDetails.company"
  141. type="text"
  142. :state="!errors.has('c_company')"
  143. v-validate.initial="'required'">
  144. </b-form-input>
  145. </b-form-group>
  146. <b-form-group horizontal id="field_c_location" label="Location"
  147. :label-cols="2"
  148. :feedback="errors.first('c_location')">
  149. <b-form-input name="c_location" id="c_location"
  150. v-model="userDetails.location"
  151. type="text"
  152. :state="!errors.has('c_location')"
  153. v-validate.initial="{
  154. rules: {
  155. regex:/^[a-zA-Z\d\-_\s]+$/
  156. }
  157. }">
  158. </b-form-input>
  159. </b-form-group>
  160. </div>
  161. </div>
  162. </b-modal>
  163. <!-- End create modal -->
  164.  
  165. <b-modal id="showUserForm" size="lg"
  166. :title="'User detail: ' + userDetails.username"
  167. @ok="editFormToggle ? updateUser():null"
  168. @hidden="hideModalForm('showUserForm')">
  169. <label class="switch switch-lg">
  170. <input type="checkbox" v-model="editFormToggle">
  171. <span class="switch-indicator"></span>
  172. <span class="switch-description">Edit</span>
  173. </label>
  174. <b-form-group id="field_s_username" horizontal label="Username">
  175. <b-form-input name="s_username" id="s_username" v-model.lazy="userDetails.username"
  176. type="text" plaintext>
  177. </b-form-input>
  178. </b-form-group>
  179. <b-form-group id="field_s_password" horizontal label="Password"
  180. :state="errors.has('s_password')"
  181. :feedback="errors.first('s_password')">
  182. <b-form-input name="s_password" id="s_password" v-model.lazy="userDetails.password"
  183. type="password"
  184. :plaintext="!editFormToggle"
  185. v-validate.initial="{
  186. rules: {
  187. regex: /^(?=.*[a-zA-Z$*_^-])(?=.*\d).+$/,
  188. required: true,
  189. min: 6
  190. }
  191. }"
  192. :class="{'input': true, 'is-invalid': errors.has('s_password') }">
  193. </b-form-input>
  194. </b-form-group>
  195. <b-form-group id="field_s_password_confirmation" horizontal label="Password Confirm"
  196. :state="errors.has('s_password_confirmation')"
  197. :feedback="errors.first('s_password_confirmation')">
  198. <b-form-input name="s_password_confirmation" id="s_password_confirmation"
  199. v-model.lazy="userDetails.password_confirmation" type="password"
  200. :plaintext="!editFormToggle"
  201. v-validate.initial="'confirmed:s_password'"
  202. :class="{'input': true, 'is-invalid': errors.has('s_password_confirmation') }">
  203. </b-form-input>
  204. </b-form-group>
  205. <b-form-group id="field_s_email" horizontal label="Email"
  206. :state="errors.has('s_email')"
  207. :feedback="errors.first('s_email')">
  208. <b-form-input name="s_email" id="s_email" v-model.lazy="userDetails.email" type="text"
  209. :plaintext="!editFormToggle"
  210. v-validate.initial="'required|email'"
  211. :class="{'input': true, 'is-invalid': errors.has('s_email') }">
  212. </b-form-input>
  213. </b-form-group>
  214. <b-form-group id="field_s_company" horizontal label="Company"
  215. :state="errors.has('s_company')"
  216. :feedback="errors.first('s_company')">
  217. <b-form-input name="s_company" id="s_company" v-model.lazy="userDetails.company" type="text"
  218. :plaintext="!editFormToggle"
  219. v-validate.initial="'required'"
  220. :class="{'input': true, 'is-invalid': errors.has('s_company') }">
  221. </b-form-input>
  222. </b-form-group>
  223. <b-form-group id="field_s_location" horizontal label="Location">
  224. <b-form-input name="s_location" id="s_location" v-model.lazy="userDetails.location"
  225. type="text"
  226. :plaintext="!editFormToggle">
  227. </b-form-input>
  228. </b-form-group>
  229. </b-modal>
  230. <!-- End modal -->
  231. </div>
  232. <div v-show="isBusy" class="card-loading reveal">
  233. <svg class="spinner-circle-material-svg" viewBox="0 0 50 50">
  234. <circle class="circle" cx="25" cy="25" r="20"></circle>
  235. </svg>
  236. </div>
  237. </div>
  238. </div>
  239. </template>
  240.  
  241. <script>
  242. import axios from 'axios'
  243. import Vue from 'vue'
  244. import BootstrapVue from 'bootstrap-vue'
  245. // import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm'
  246. import VeeValidate from 'vee-validate'
  247. import {Validator} from 'vee-validate';
  248.  
  249. // Config for VeeValidate
  250. const config = {
  251. errorBagName: 'errors', // change if property conflicts.
  252. fieldsBagName: 'fields ', // Default is fields
  253. delay: 0,
  254. locale: 'en',
  255. dictionary: {
  256. en: {
  257. attributes: {
  258. c_username: 'Username',
  259. c_password: 'Password',
  260. c_password_confirmation: 'Password Confirm',
  261. c_email: 'Email Address',
  262. c_company: 'Company Name',
  263. c_location: 'Location',
  264. s_username: 'Username',
  265. s_password: 'Password',
  266. s_password_confirmation: 'Password Confirm',
  267. s_email: 'Email Address',
  268. s_company: 'Company Name',
  269. }
  270. }
  271. },
  272. strict: true,
  273. classes: false,
  274. classNames: {
  275. touched: 'touched', // the control has been blurred
  276. untouched: 'untouched', // the control hasn't been blurred
  277. valid: 'valid', // model is valid
  278. invalid: 'invalid', // model is invalid
  279. pristine: 'pristine', // control has not been interacted with
  280. dirty: 'dirty' // control has been interacted with
  281. },
  282. events: 'input|blur',
  283. inject: true,
  284. validity: false,
  285. aria: true
  286. };
  287. Vue.use(VeeValidate, config);
  288. Vue.use(BootstrapVue);
  289.  
  290. export default {
  291. name: 'user-table',
  292. data: () => ({
  293. items: {},
  294. links: {},
  295. meta: {
  296. current_page: 1,
  297. from: null,
  298. last_page: null,
  299. path: '',
  300. per_page: 15,
  301. to: null,
  302. total: null
  303. },
  304. fields: [
  305. {key: 'username', label: 'Username', sortable: true, 'class': 'text-center'},
  306. {key: 'email', label: 'Email', sortable: true, 'class': 'text-center'},
  307. {key: 'profile', label: 'Company Name', sortable: true, 'class': 'text-center'},
  308. {key: 'is_activated', label: 'Activated?', 'class': 'text-center'},
  309. {key: 'updated_at', label: 'Updated at', 'class': 'text-center'},
  310. {key: 'actions', label: 'Actions', 'class': 'text-center'}
  311. ],
  312. userDetails: {
  313. id: null,
  314. username: '',
  315. password: '',
  316. password_confirmation: '',
  317. email: '',
  318. company: '',
  319. location: '',
  320. is_activated: ''
  321. },
  322. methodForm: '',
  323. editFormToggle: false,
  324. isBusy: false,
  325. pageOptions: [
  326. {value: 15, text: 'Per page : 15 '},
  327. {value: 30, text: ' --- 30 '},
  328. {value: 60, text: ' --- 60 '},
  329. {value: 90, text: ' --- 90 '},
  330. {value: 120, text: ' --- 120 '}
  331. ],
  332. sortBy: '',
  333. sortDesc: false,
  334. filter: null,
  335. filtered: null,
  336. searchTyping: false
  337. }),
  338.  
  339. // Validate method via backend api
  340. created() {
  341. // Validate user exist
  342. const isUsernameUnique = async (value) => {
  343. try {
  344. const promise = await axios.post(route('internal.api.user.validate'), {username: value});
  345. const data = await promise.data;
  346. return {
  347. valid: data.valid,
  348. data: {
  349. message: data.message
  350. }
  351. };
  352. } catch (e) {
  353. console.log('Calling the API has been an error: ', e);
  354. return []
  355. }
  356. };
  357. Validator.extend('UsernameUnique', {
  358. validate: isUsernameUnique,
  359. getMessage: (field, params, data) => {
  360. return data.message;
  361. }
  362. });
  363.  
  364. // Validate email exist
  365. const isEmailUnique = async (value) => {
  366. try {
  367. const promise = await axios.post(route('internal.api.email.validate'), {email: value});
  368. const data = await promise.data;
  369. return {
  370. valid: data.valid,
  371. data: {
  372. message: data.message
  373. }
  374. }
  375. } catch (e) {
  376. console.log('Calling api has been an error: ', e);
  377. }
  378. };
  379. Validator.extend('EmailUnique', {
  380. validate: isEmailUnique,
  381. getMessage: (field, params, data) => {
  382. return data.message;
  383. }
  384. });
  385. },
  386. computed: {},
  387. watch: {
  388. filter: _.debounce(function () {
  389. this.filtered = this.filter;
  390. console.log('Filtered!!')
  391. }, 1000)
  392. },
  393. methods: {
  394. // List all user
  395. async listAllUsers() {
  396. try {
  397. this.isBusy = true;
  398. const promise = await axios.get(route('internal.api.user.all') + "?page=" + this.meta.current_page + "&perPage=" + this.meta.per_page);
  399. const data = await promise.data;
  400. console.log(data);
  401. this.items = data.data;
  402. this.links = data.links;
  403. this.meta = data.meta;
  404. this.isBusy = false;
  405. this.refreshTable();
  406. return (data.data || []);
  407. } catch (e) {
  408. console.log('calling api error: ', e);
  409. return []
  410. }
  411. },
  412. // Search user
  413. async searchUser() {
  414. try {
  415. this.isBusy = true;
  416. const promise = await axios.get(route('internal.api.user.search') + "?q=" + this.filter);
  417. const data = await promise.data;
  418. console.log(data);
  419. this.items = data.data;
  420. this.links = data.links;
  421. this.meta = data.meta;
  422. this.refreshTable();
  423. this.isBusy = false;
  424. return (data.data || [])
  425. } catch (e) {
  426. console.log('calling api error: ', e);
  427. return []
  428. }
  429. },
  430. // Create a new user via api
  431. async createUser() {
  432. try {
  433. this.isBusy = true;
  434. const promise = await axios.post(route('internal.api.user.create'), this.userDetails);
  435. const data = await promise.data;
  436. console.log(data);
  437. this.isBusy = false;
  438. this.refreshTable();
  439. return (data.data || [])
  440. } catch (e) {
  441. console.log('calling api error: ', e);
  442. return []
  443. }
  444. },
  445.  
  446. // Update the user via api
  447. async updateUser() {
  448. try {
  449. this.isBusy = true;
  450. const promise = await axios.post(route('internal.api.user.update', {id: this.userDetails.id}), {
  451. password: this.userDetails.password,
  452. password_confirmation: this.userDetails.password_confirmation,
  453. email: this.userDetails.email,
  454. company: this.userDetails.company,
  455. location: this.userDetails.location
  456. });
  457. const data = await promise.data;
  458. console.log(this.userDetails);
  459. console.log(data);
  460. this.isBusy = false;
  461. this.refreshTable();
  462. return (data.data || [])
  463. } catch (e) {
  464. console.log('calling api error: ', e);
  465. return []
  466. }
  467. },
  468.  
  469. openModalForm(method, button, item = null) {
  470. if (method == 'create') {
  471. this.methodForm = 'create';
  472. this.$root.$emit('bv::show::modal', 'createUserForm', button)
  473. }
  474. if (method == 'show') {
  475. this.methodForm = 'show';
  476. this.userDetails = item;
  477. this.$root.$emit('bv::show::modal', 'showUserForm', button)
  478. }
  479. },
  480. hideModalForm(modal) {
  481. this.userDetails = [];
  482. this.editFormToggle = false;
  483. this.refreshTable();
  484. this.$root.$emit('bv::hide::modal', modal)
  485. },
  486. refreshTable() {
  487. this.$refs.userTable.refresh()
  488. }
  489. }
  490. }
  491. </script>
Add Comment
Please, Sign In to add comment