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
Show 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 RoleForm from './components/RoleForm.vue';
import UserTable from './components/UserTable.vue';
import UserForm from './components/UserForm.vue';
const locales = window.AsgardCMS.locales;
export default [
// Role Routes
{
path: '/user/roles',
name: 'admin.user.roles.index',
......@@ -28,4 +31,28 @@ export default [
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
<template>
<div>
<div class="content-header">
<h1>
{{ trans(`users.${pageTitle}`) }} <small>{{ user.first_name }} {{ user.last_name }}</small>
</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-item :to="{name: 'admin.user.users.create'}">{{ trans(`users.${pageTitle}`) }}
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<el-form ref="form"
:model="user"
label-width="120px"
label-position="top"
v-loading.body="loading"
@keydown="form.errors.clear($event.target.name);">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-body">
<el-tabs>
<el-tab-pane :label="trans('users.tabs.data')">
<span slot="label"
:class="{'error' : form.errors.any()}">
{{ trans('users.tabs.data') }}
</span>
<el-form-item :label="trans('users.form.first-name')"
:class="{'el-form-item is-error': form.errors.has('first_name') }">
<el-input v-model="user.first_name"></el-input>
<div class="el-form-item__error" v-if="form.errors.has('first_name')"
v-text="form.errors.first('first_name')"></div>
</el-form-item>
<el-form-item :label="trans('users.form.last-name')"
:class="{'el-form-item is-error': form.errors.has('last_name') }">
<el-input v-model="user.last_name"></el-input>
<div class="el-form-item__error" v-if="form.errors.has('last_name')"
v-text="form.errors.first('last_name')"></div>
</el-form-item>
<el-form-item :label="trans('users.form.email')"
:class="{'el-form-item is-error': form.errors.has('email') }">
<el-input v-model="user.email"></el-input>
<div class="el-form-item__error" v-if="form.errors.has('email')"
v-text="form.errors.first('email')"></div>
</el-form-item>
<el-form-item :label="trans('users.form.is activated')"
:class="{'el-form-item is-error': form.errors.has('activated') }">
<el-checkbox v-model="user.activated">Activated</el-checkbox>
<div class="el-form-item__error" v-if="form.errors.has('activated')"
v-text="form.errors.first('activated')"></div>
</el-form-item>
<div v-if="user.is_new">
<el-form-item :label="trans('users.form.password')"
:class="{'el-form-item is-error': form.errors.has('password') }">
<el-input v-model="user.password"
type="password"></el-input>
<div class="el-form-item__error" v-if="form.errors.has('password')"
v-text="form.errors.first('password')"></div>
</el-form-item>
<el-form-item :label="trans('users.form.password-confirmation')"
:class="{'el-form-item is-error': form.errors.has('password_confirmation') }">
<el-input v-model="user.password_confirmation"
type="password"></el-input>
<div class="el-form-item__error" v-if="form.errors.has('password_confirmation')"
v-text="form.errors.first('password_confirmation')"></div>
</el-form-item>
</div>
</el-tab-pane>
<el-tab-pane :label="trans('users.tabs.roles')">
<el-form-item :label="trans('users.form.password')"
:class="{'el-form-item is-error': form.errors.has('password') }">
<el-select v-model="user.roles" multiple placeholder="Select">
<el-option
v-for="role in roles"
:key="role.id"
:label="role.name"
:value="role.id">
</el-option>
</el-select>
<div class="el-form-item__error" v-if="form.errors.has('password')"
v-text="form.errors.first('password')"></div>
</el-form-item>
</el-tab-pane>
<el-tab-pane :label="trans('users.tabs.permissions')">
<asgard-permissions v-model="user.permissions"
:current-permissions="user.permissions"></asgard-permissions>
</el-tab-pane>
<el-tab-pane :label="trans('users.tabs.new password')" v-if="! user.is_new">
<div v-if="! user.is_new">
<div class="col-md-6">
<el-form-item :label="trans('users.form.password')"
:class="{'el-form-item is-error': form.errors.has('password') }">
<el-input v-model="user.password"
type="password"></el-input>
<div class="el-form-item__error" v-if="form.errors.has('password')"
v-text="form.errors.first('password')"></div>
</el-form-item>
<el-form-item :label="trans('users.form.password-confirmation')"
:class="{'el-form-item is-error': form.errors.has('password_confirmation') }">
<el-input v-model="user.password_confirmation"
type="password"></el-input>
<div class="el-form-item__error" v-if="form.errors.has('password_confirmation')"
v-text="form.errors.first('password_confirmation')"></div>
</el-form-item>
</div>
<div class="col-md-6">
<h4>{{ trans('users.tabs.or send reset password mail') }}</h4>
<el-button type="info"
:loading="resetEmailIsLoading"
@click="sendResetEmail">
{{ trans('users.send reset password email') }}
</el-button>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
<div class="box-footer">
<el-form-item>
<el-button type="primary" @click="onSubmit()" :loading="loading">
{{ trans('core.save') }}
</el-button>
<el-button @click="onCancel()">{{ trans('core.button.cancel') }}
</el-button>
</el-form-item>
</div>
</div>
</div>
</div>
</el-form>
</div>
</template>
<script>
import axios from 'axios';
import Form from 'form-backend-validation';
import ShortcutHelper from '../../../../Core/Assets/js/mixins/ShortcutHelper';
import AsgardPermissions from './AsgardPermissions.vue';
export default {
mixins: [ShortcutHelper],
components: {
'asgard-permissions': AsgardPermissions,
},
props: {
locales: { default: null },
pageTitle: { default: null, String },
},
data() {
return {
user: {
first_name: '',
last_name: '',
permissions: {},
roles: {},
is_new: false,
},
roles: {},
form: new Form(),
loading: false,
resetEmailIsLoading: false,
};
},
methods: {
onSubmit() {
this.form = new Form(this.user);
this.loading = true;
this.form.post(this.getRoute())
.then((response) => {
this.loading = false;
this.$message({
type: 'success',
message: response.message,
});
this.$router.push({ name: 'admin.user.users.index' });
})
.catch((error) => {
console.log(error);
this.loading = false;
this.$notify.error({
title: 'Error',
message: 'There are some errors in the form.',
});
});
},
onCancel() {
this.$router.push({ name: 'admin.user.users.index' });
},
fetchUser() {
this.loading = true;
let routeUri = '';
if (this.$route.params.userId !== undefined) {
routeUri = route('api.user.user.find', { user: this.$route.params.userId });
} else {
routeUri = route('api.user.user.find-new');
}
axios.post(routeUri)
.then((response) => {
this.loading = false;
this.user = response.data.data;
});
},
getRoute() {
if (this.$route.params.userId !== undefined) {
return route('api.user.user.update', { user: this.$route.params.userId });
}
return route('api.user.user.store');
},
fetchRoles() {
axios.get(route('api.user.role.all'))
.then((response) => {
this.roles = response.data.data;
});
},
sendResetEmail() {
this.resetEmailIsLoading = true;
axios.get(route('api.user.user.sendResetPassword', { user: this.$route.params.userId }))
.then((response) => {
this.resetEmailIsLoading = false;
this.$notify.success({
title: 'Success',
message: response.data.message,
});
});
},
},
mounted() {
this.fetchUser();
this.fetchRoles();
},
};
</script>
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