Skip to content

P
Platform
Unverified Commit b6b42988 authored by Nicolas Widart's avatar Nicolas Widart
Browse files
Options

Creating the user components: table and form

parent 7da31ff7
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 440 additions and 0 deletions
Modules/User/Assets/js/UserRoutes.js
View file @ b6b42988
import RoleTable from './components/RoleTable.vue'; import RoleTable from './components/RoleTable.vue';
import RoleForm from './components/RoleForm.vue'; import RoleForm from './components/RoleForm.vue';
import UserTable from './components/UserTable.vue';
import UserForm from './components/UserForm.vue';
const locales = window.AsgardCMS.locales; const locales = window.AsgardCMS.locales;
export default [ export default [
// Role Routes
{ {
path: '/user/roles', path: '/user/roles',
name: 'admin.user.roles.index', name: 'admin.user.roles.index',
...@@ -28,4 +31,28 @@ export default [ ...@@ -28,4 +31,28 @@ export default [
pageTitle: 'title.edit', pageTitle: 'title.edit',
}, },
}, },
// User Routes
{
path: '/user/users',
name: 'admin.user.users.index',
component: UserTable,
},
{
path: '/user/users/create',
name: 'admin.user.users.create',
component: UserForm,
props: {
locales,
pageTitle: 'title.new-user',
},
},
{
path: '/user/users/:userId/edit',
name: 'admin.user.users.edit',
component: UserForm,
props: {
locales,
pageTitle: 'title.edit-user',
},
},
]; ];
Modules/User/Assets/js/components/UserForm.vue 0 → 100644
View file @ b6b42988
This diff is collapsed.
Modules/User/Assets/js/components/UserTable.vue 0 → 100644
View file @ b6b42988
<template>
<div>
<div class="content-header">
<h1>
{{ trans('users.title.users') }}
</h1>
<el-breadcrumb separator="/">
<el-breadcrumb-item>
<a href="/backend">{{ trans('core.breadcrumb.home') }}</a>
</el-breadcrumb-item>
<el-breadcrumb-item :to="{name: 'admin.user.users.index'}">{{ trans('users.title.users') }}
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="row">
<div class="col-xs-12">
<div class="box box-primary">
<div class="box-body">
<div class="sc-table">
<div class="tool-bar el-row" style="padding-bottom: 20px;">
<div class="actions el-col el-col-8">
<router-link :to="{name: 'admin.user.users.create'}">
<el-button type="primary"><i class="el-icon-edit"></i>
{{ trans('users.button.new-user') }}
</el-button>
</router-link>
</div>
<div class="search el-col el-col-5">
<el-input icon="search" @change="performSearch" v-model="searchQuery">
</el-input>
</div>
</div>
<el-table
:data="data"
stripe
style="width: 100%"
ref="pageTable"
v-loading.body="tableIsLoading"
@sort-change="handleSortChange">
<el-table-column prop="id" label="Id" width="75" sortable="custom">
</el-table-column>
<el-table-column prop="first_name" :label="trans('users.table.first-name')" sortable="custom">
<template scope="scope">
<a @click.prevent="goToEdit(scope)" href="#">
{{ scope.row.first_name }}
</a>
</template>
</el-table-column>
<el-table-column prop="last_name" :label="trans('users.table.last-name')" sortable="custom">
<template scope="scope">
<a @click.prevent="goToEdit(scope)" href="#">
{{ scope.row.last_name }}
</a>
</template>
</el-table-column>
<el-table-column prop="email" :label="trans('users.table.email')" sortable="custom">
<template scope="scope">
<a @click.prevent="goToEdit(scope)" href="#">
{{ scope.row.email }}
</a>
</template>
</el-table-column>
<el-table-column prop="created_at" :label="trans('core.table.created at')"
sortable="custom">
</el-table-column>
<el-table-column prop="actions" :label="trans('core.table.actions')">
<template scope="scope">
<el-button-group>
<edit-button
:to="{name: 'admin.user.users.edit', params: {roleId: scope.row.id}}"></edit-button>
<delete-button :scope="scope" :rows="data"></delete-button>
</el-button-group>
</template>
</el-table-column>
</el-table>
<div class="pagination-wrap" style="text-align: center; padding-top: 20px;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="meta.current_page"
:page-sizes="[10, 20, 50, 100]"
:page-size="parseInt(meta.per_page)"
layout="total, sizes, prev, pager, next, jumper"
:total="meta.total">
</el-pagination>
</div>
</div>
</div>
</div>
</div>
</div>
<button v-shortkey="['c']" @shortkey="pushRoute({name: 'admin.user.users.create'})" v-show="false"></button>
</div>
</template>
<script>
import axios from 'axios';
import _ from 'lodash';
import ShortcutHelper from '../../../../Core/Assets/js/mixins/ShortcutHelper';
export default {
mixins: [ShortcutHelper],
data() {
return {
data: [],
meta: {
current_page: 1,
per_page: 10,
},
order_meta: {
order_by: '',
order: '',
},
links: {},
searchQuery: '',
tableIsLoading: false,
};
},
methods: {
queryServer(customProperties) {
const properties = {
page: this.meta.current_page,
per_page: this.meta.per_page,
order_by: this.order_meta.order_by,
order: this.order_meta.order,
search: this.searchQuery,
};
axios.get(route('api.user.user.index', _.merge(properties, customProperties)))
.then((response) => {
this.tableIsLoading = false;
this.data = response.data.data;
this.meta = response.data.meta;
this.links = response.data.links;
this.order_meta.order_by = properties.order_by;
this.order_meta.order = properties.order;
});
},
fetchData() {
this.tableIsLoading = true;
this.queryServer();
},
handleSizeChange(event) {
console.log(`per page :${event}`);
this.tableIsLoading = true;
this.queryServer({ per_page: event });
},
handleCurrentChange(event) {
console.log(`current page :${event}`);
this.tableIsLoading = true;
this.queryServer({ page: event });
},
handleSortChange(event) {
console.log('sorting', event);
this.tableIsLoading = true;
this.queryServer({ order_by: event.prop, order: event.order });
},
performSearch(query) {
console.log(`searching:${query}`);
this.tableIsLoading = true;
this.queryServer({ search: query });
},
goToEdit(scope) {
this.$router.push({ name: 'admin.user.users.edit', params: { userId: scope.row.id } });
},
},
mounted() {
this.fetchData();
},
};
</script>
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

Technounit-GROUP 2023