Skip to content

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

Setting up user role routes. Creating the role form component, abstracting out... 

Setting up user role routes. Creating the role form component, abstracting out the permissions part.
parent 85cda35f
Hide whitespace changes
Inline Side-by-side
Showing with 290 additions and 0 deletions
Modules/User/Assets/js/UserRoutes.js 0 → 100644
View file @ 217ae6c2
import RoleTable from './components/RoleTable.vue';
import RoleForm from './components/RoleForm.vue';
const locales = window.AsgardCMS.locales;
export default [
{
path: '/user/roles',
name: 'admin.user.roles.index',
component: RoleTable,
},
{
path: '/user/roles/create',
name: 'admin.user.roles.create',
component: RoleForm,
props: {
locales,
pageTitle: 'new-role',
},
},
{
path: '/user/roles/:roleId/edit',
name: 'admin.user.roles.edit',
component: RoleForm,
props: {
locales,
pageTitle: 'title.edit',
},
},
];
Modules/User/Assets/js/components/AsgardPermissions.vue 0 → 100644
View file @ 217ae6c2
<template>
<div>
<div v-for="(value, name) in allPermissions" :key="name">
<h3>{{ name }}</h3>
<div v-for="(permissionActions, subPermissionTitle) in value" :key="subPermissionTitle">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3"><h4 class="pull-left">{{ ucfirst(subPermissionTitle) }}</h4></div>
<div class="col-md-9">
<p style="margin-top: 10px;">
<el-button type="text"
@click="changeState(subPermissionTitle, permissionActions, 1)">
{{ trans('roles.allow all') }}
</el-button>
<el-button type="text"
@click="changeState(subPermissionTitle, permissionActions, 0)">
{{ trans('roles.inherit all') }}
</el-button>
<el-button type="text"
@click="changeState(subPermissionTitle, permissionActions, -1)">
{{ trans('roles.deny all') }}
</el-button>
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" v-for="(label, permissionAction) in permissionActions" :key="permissionAction">
<div class="row">
<div class="col-md-3">
<div class="visible-sm-block visible-md-block visible-lg-block">
<label class="control-label text-right" style="display: block">{{ parseTranslation(label) }}</label>
</div>
<div class="visible-xs-block">
<label class="control-label">{{ parseTranslation(label) }}</label>
</div>
</div>
<div class="col-md-9">
<el-radio-group v-model="permissions[`${subPermissionTitle}.${permissionAction}`]">
<el-radio-button :label="1" @click="triggerEvent">{{ trans('roles.allow') }}</el-radio-button>
<el-radio-button :label="0" @click="triggerEvent">{{ trans('roles.inherit') }}</el-radio-button>
<el-radio-button :label="-1" @click="triggerEvent">{{ trans('roles.deny') }}</el-radio-button>
</el-radio-group>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import StringHelpers from '../../../../Core/Assets/js/mixins/StringHelpers.vue';
export default {
mixins: [StringHelpers],
props: {
currentPermissions: { default: null },
},
data() {
return {
permissions: {},
allPermissions: {},
};
},
methods: {
triggerEvent() {
this.$emit('input', this.permissions);
},
parseTranslation(label) {
return this.trans(label.split('::')[1]);
},
getPermissionKey(subPermissionTitle, permissionAction) {
return `${subPermissionTitle}.${permissionAction}`;
},
changeState(permissionPart, actions, state) {
_.forEach(actions, (translationKey, key) => {
this.permissions[`${permissionPart}.${key}`] = state;
});
},
fetchPermissions() {
axios.get(route('api.user.permissions.index'))
.then((response) => {
this.loading = false;
this.allPermissions = response.data.permissions;
});
},
},
watch: {
currentPermissions() {
if (this.currentPermissions !== null) {
this.permissions = this.currentPermissions;
}
},
},
mounted() {
this.fetchPermissions();
},
};
</script>
Modules/User/Assets/js/components/RoleForm.vue 0 → 100644
View file @ 217ae6c2
<template>
<div>
<div class="content-header">
<h1>
{{ trans(`roles.${pageTitle}`) }} <small>{{ role.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.roles.index'}">{{ trans('roles.title.roles') }}
</el-breadcrumb-item>
<el-breadcrumb-item :to="{name: 'admin.user.roles.create'}">{{ trans(`roles.${pageTitle}`) }}
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<el-form ref="form"
:model="role"
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 type="card">
<el-tab-pane :label="trans('roles.tabs.data')">
<el-form-item :label="trans('roles.form.name')"
:class="{'el-form-item is-error': form.errors.has('name') }">
<el-input v-model="role.name"></el-input>
<div class="el-form-item__error" v-if="form.errors.has('name')"
v-text="form.errors.first('name')"></div>
</el-form-item>
<el-form-item :label="trans('roles.form.slug')"
:class="{'el-form-item is-error': form.errors.has('slug') }">
<el-input v-model="role.slug">
<el-button slot="prepend" @click="generateSlug">Generate</el-button>
</el-input>
<div class="el-form-item__error" v-if="form.errors.has('slug')"
v-text="form.errors.first('slug')"></div>
</el-form-item>
</el-tab-pane>
<el-tab-pane :label="trans('roles.tabs.permissions')">
<asgard-permissions v-model="role.permissions"
:current-permissions="role.permissions"></asgard-permissions>
</el-tab-pane>
<el-tab-pane :label="trans('users.title.users')">
<h3>{{ trans('roles.title.users-with-roles') }}</h3>
<ul>
<li v-for="user in role.users" :key="user.id">{{ user.fullname }} ({{ user.email }})</li>
</ul>
</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 Slugify from '../../../../Core/Assets/js/mixins/Slugify';
import ShortcutHelper from '../../../../Core/Assets/js/mixins/ShortcutHelper';
import AsgardPermissions from './AsgardPermissions.vue';
export default {
mixins: [Slugify, ShortcutHelper],
components: {
'asgard-permissions': AsgardPermissions,
},
props: {
locales: { default: null },
pageTitle: { default: null, String },
},
data() {
return {
role: {
name: '',
slug: '',
permissions: {},
users: {},
},
form: new Form(),
loading: false,
};
},
methods: {
onSubmit() {
this.form = new Form(this.role);
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.roles.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.roles.index' });
},
generateSlug() {
this.role.slug = this.slugify(this.role.name);
},
fetchRole() {
this.loading = true;
let routeUri = '';
if (this.$route.params.roleId !== undefined) {
routeUri = route('api.user.role.find', { role: this.$route.params.roleId });
} else {
routeUri = route('api.user.role.find-new');
}
axios.post(routeUri)
.then((response) => {
this.loading = false;
this.role = response.data.data;
});
},
getRoute() {
if (this.$route.params.roleId !== undefined) {
return route('api.user.role.update', { role: this.$route.params.roleId });
}
return route('api.user.role.store');
},
},
mounted() {
this.fetchRole();
},
};
</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