Splits collection and repository related capabilities lists into two separate tables. #274.
This commit is contained in:
Mateus Machado Luna
parent
23c268bc1c
commit
1b476732b7
|
|
@ -55,8 +55,8 @@ class Admin {
|
|||
$roles_cap = $dummyEntity->get_capabilities()->edit_posts;
|
||||
$roles_page_suffix = add_submenu_page(
|
||||
$this->menu_slug,
|
||||
__('Roles', 'tainacan'),
|
||||
__('Roles', 'tainacan'),
|
||||
__('User Roles', 'tainacan'),
|
||||
__('User Roles', 'tainacan'),
|
||||
$roles_cap,
|
||||
'tainacan_roles',
|
||||
array( &$this, 'roles_page' )
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@ Vue.use(VueRouter);
|
|||
|
||||
const routes = [
|
||||
{ path: '/', redirect:'/roles' },
|
||||
{ path: '/roles', name: 'RolesList', component: RolesList, meta: { title: __('Tainacan Roles') } },
|
||||
{ path: '/roles/new', name: 'RoleCreationForm', component: RoleEditionForm, meta: { title: __('New Role') } },
|
||||
{ path: '/roles/:roleSlug', name: 'RoleEditionForm', component: RoleEditionForm, meta: { title: __('Editing Role') } },
|
||||
{ path: '/roles', name: 'RolesList', component: RolesList, meta: { title: __('Tainacan User Roles') } },
|
||||
{ path: '/roles/new', name: 'RoleCreationForm', component: RoleEditionForm, meta: { title: __('New User Role') } },
|
||||
{ path: '/roles/:roleSlug', name: 'RoleEditionForm', component: RoleEditionForm, meta: { title: __('Editing User Role') } },
|
||||
|
||||
{ path: '*', redirect: '/'}
|
||||
];
|
||||
|
|
|
|||
|
|
@ -3,105 +3,205 @@
|
|||
<h1 class="wp-heading-inline">{{ $route.meta.title }} <strong>{{ role.name }}</strong></h1>
|
||||
<hr class="wp-header-end">
|
||||
<br>
|
||||
<h2 class="screen-reader-text">{{ $i18n.get('Role Capabilities list') }}</h2>
|
||||
<table
|
||||
v-if="!isLoadingRole"
|
||||
class="wp-list-table widefat fixed striped capabilities">
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="manage-column column-cb check-column">
|
||||
<label
|
||||
class="screen-reader-text"
|
||||
for="cb-select-all">
|
||||
{{ $i18n.get('Selecionar Todos') }}
|
||||
</label>
|
||||
<input
|
||||
id="cb-select-all"
|
||||
type="checkbox">
|
||||
</td>
|
||||
<th
|
||||
scope="col"
|
||||
id="name"
|
||||
class="manage-column column-name">
|
||||
<a>
|
||||
{{ $i18n.get('Name') }}
|
||||
</a>
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
id="description"
|
||||
class="manage-column column-description">
|
||||
<a>
|
||||
{{ $i18n.get('Description') }}
|
||||
</a>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<template v-if="!isLoadingRole && !isLoadingCapabilities">
|
||||
<h2>{{ $i18n.get('Role\'s Repository related Capabilities List') }}</h2>
|
||||
<table class="wp-list-table widefat fixed striped capabilities">
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="manage-column column-cb check-column">
|
||||
<label
|
||||
class="screen-reader-text"
|
||||
for="cb-select-all-repository">
|
||||
{{ $i18n.get('Selecionar Todos') }}
|
||||
</label>
|
||||
<input
|
||||
id="cb-select-all-repository"
|
||||
type="checkbox">
|
||||
</td>
|
||||
<th
|
||||
scope="col"
|
||||
id="name-repository"
|
||||
class="manage-column column-name">
|
||||
<a>
|
||||
{{ $i18n.get('Name') }}
|
||||
</a>
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
id="description-repository"
|
||||
class="manage-column column-description">
|
||||
<a>
|
||||
{{ $i18n.get('Description') }}
|
||||
</a>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody data-wp-lists="list:capabilities">
|
||||
<tr
|
||||
v-for="(capability, index) of capabilities"
|
||||
:key="index"
|
||||
:id="'capability-' + index">
|
||||
<th
|
||||
scope="row"
|
||||
class="check-column">
|
||||
<label
|
||||
class="screen-reader-text"
|
||||
:for="'capability_' + index">
|
||||
{{ $i18n.get('Selecionar') + ' ' + capability.display_name }}
|
||||
</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="roles[]"
|
||||
:id="'capability_'+ index"
|
||||
:value="role.capabilities[index]"
|
||||
:checked="role.capabilities[index]">
|
||||
</th>
|
||||
<td
|
||||
class="name column-name"
|
||||
:data-colname="$i18n.get('Capability name')">
|
||||
<strong>{{ capability.display_name }}</strong>
|
||||
</td>
|
||||
<td
|
||||
class="description column-descritption"
|
||||
:data-colname="$i18n.get('Capabilitiy description')">
|
||||
{{ capability.description }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody data-wp-lists="list:repository-capabilities">
|
||||
<tr
|
||||
v-for="(capability, index) of repositoryCapabilities"
|
||||
:key="index"
|
||||
:id="'capability-' + index">
|
||||
<th
|
||||
scope="row"
|
||||
class="check-column">
|
||||
<label
|
||||
class="screen-reader-text"
|
||||
:for="'capability_' + index">
|
||||
{{ $i18n.get('Selecionar') + ' ' + capability.display_name }}
|
||||
</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="roles[]"
|
||||
:id="'capability_'+ index"
|
||||
:checked="role.capabilities[index]"
|
||||
@input="onUpdateCapability($event.target.checked, index)">
|
||||
</th>
|
||||
<td
|
||||
class="name column-name"
|
||||
:data-colname="$i18n.get('Capability name')">
|
||||
<strong>{{ capability.display_name }}</strong>
|
||||
</td>
|
||||
<td
|
||||
class="description column-descritption"
|
||||
:data-colname="$i18n.get('Capabilitiy description')">
|
||||
{{ capability.description }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td class="manage-column column-cb check-column">
|
||||
<label
|
||||
class="screen-reader-text"
|
||||
for="cb-select-all-2">
|
||||
{{ $i18n.get('Selecionar Todos') }}
|
||||
</label>
|
||||
<input
|
||||
id="cb-select-all-2"
|
||||
type="checkbox">
|
||||
</td>
|
||||
<th
|
||||
scope="col"
|
||||
id="name"
|
||||
class="manage-column column-name column-primary">
|
||||
<a>
|
||||
{{ $i18n.get('Name') }}
|
||||
</a>
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
id="description"
|
||||
class="manage-column column-description">
|
||||
<a>
|
||||
{{ $i18n.get('Description') }}
|
||||
</a>
|
||||
</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td class="manage-column column-cb check-column">
|
||||
<label
|
||||
class="screen-reader-text"
|
||||
for="cb-select-all-repository-2">
|
||||
{{ $i18n.get('Selecionar Todos') }}
|
||||
</label>
|
||||
<input
|
||||
id="cb-select-all-repository-2"
|
||||
type="checkbox">
|
||||
</td>
|
||||
<th
|
||||
scope="col"
|
||||
id="name-repository"
|
||||
class="manage-column column-name column-primary">
|
||||
<a>
|
||||
{{ $i18n.get('Name') }}
|
||||
</a>
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
id="description-repository"
|
||||
class="manage-column column-description">
|
||||
<a>
|
||||
{{ $i18n.get('Description') }}
|
||||
</a>
|
||||
</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
|
||||
<h2>{{ $i18n.get('Role\'s Collection related Capabilities List') }}</h2>
|
||||
<table class="wp-list-table widefat fixed striped capabilities">
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="manage-column column-cb check-column">
|
||||
<label
|
||||
class="screen-reader-text"
|
||||
for="cb-select-all-collection">
|
||||
{{ $i18n.get('Selecionar Todos') }}
|
||||
</label>
|
||||
<input
|
||||
id="cb-select-all-collection"
|
||||
type="checkbox">
|
||||
</td>
|
||||
<th
|
||||
scope="col"
|
||||
id="name-collection"
|
||||
class="manage-column column-name">
|
||||
<a>
|
||||
{{ $i18n.get('Name') }}
|
||||
</a>
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
id="description-collection"
|
||||
class="manage-column column-description">
|
||||
<a>
|
||||
{{ $i18n.get('Description') }}
|
||||
</a>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody data-wp-lists="list:collection-capabilities">
|
||||
<tr
|
||||
v-for="(capability, index) of collectionCapabilities"
|
||||
:key="index"
|
||||
:id="'capability-' + index">
|
||||
<th
|
||||
scope="row"
|
||||
class="check-column">
|
||||
<label
|
||||
class="screen-reader-text"
|
||||
:for="'capability_' + index">
|
||||
{{ $i18n.get('Selecionar') + ' ' + capability.display_name }}
|
||||
</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="roles[]"
|
||||
:id="'capability_'+ index"
|
||||
:checked="role.capabilities[index]"
|
||||
@input="onUpdateCapability($event.target.checked, index)">
|
||||
</th>
|
||||
<td
|
||||
class="name column-name"
|
||||
:data-colname="$i18n.get('Capability name')">
|
||||
<strong>{{ capability.display_name }}</strong>
|
||||
</td>
|
||||
<td
|
||||
class="description column-descritption"
|
||||
:data-colname="$i18n.get('Capabilitiy description')">
|
||||
{{ capability.description }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td class="manage-column column-cb check-column">
|
||||
<label
|
||||
class="screen-reader-text"
|
||||
for="cb-select-all-collection-2">
|
||||
{{ $i18n.get('Selecionar Todos') }}
|
||||
</label>
|
||||
<input
|
||||
id="cb-select-all-collection-2"
|
||||
type="checkbox">
|
||||
</td>
|
||||
<th
|
||||
scope="col"
|
||||
id="name-collection"
|
||||
class="manage-column column-name column-primary">
|
||||
<a>
|
||||
{{ $i18n.get('Name') }}
|
||||
</a>
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
id="description-collection"
|
||||
class="manage-column column-description">
|
||||
<a>
|
||||
{{ $i18n.get('Description') }}
|
||||
</a>
|
||||
</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -119,19 +219,44 @@
|
|||
role() {
|
||||
return this.getRole()
|
||||
},
|
||||
capabilities() {
|
||||
return this.getCapabilities();
|
||||
collectionCapabilities() {
|
||||
const capabilities = this.getCapabilities();
|
||||
let collectionCapabilities = {}
|
||||
|
||||
for (let [capabilityKey, capability] of Object.entries(capabilities)) {
|
||||
if (capability.scope === 'repository')
|
||||
collectionCapabilities[capabilityKey] = capability;
|
||||
}
|
||||
return collectionCapabilities;
|
||||
},
|
||||
repositoryCapabilities() {
|
||||
const capabilities = this.getCapabilities();
|
||||
let repositoryCapabilities = {}
|
||||
|
||||
for (let [capabilityKey, capability] of Object.entries(capabilities)) {
|
||||
if (capability.scope === 'repository')
|
||||
repositoryCapabilities[capabilityKey] = capability;
|
||||
}
|
||||
return repositoryCapabilities;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('capability', [
|
||||
'fetchRole',
|
||||
'fetchCapabilities'
|
||||
'fetchCapabilities',
|
||||
'addCapabilityToRole',
|
||||
'removeCapabilityFromRole'
|
||||
]),
|
||||
...mapGetters('capability', [
|
||||
'getRole',
|
||||
'getCapabilities'
|
||||
]),
|
||||
onUpdateCapability(value, capabilityKey) {
|
||||
if (value)
|
||||
this.addCapabilityToRole({ capabilityKey: capabilityKey, role: this.roleSlug })
|
||||
else
|
||||
this.removeCapabilityFromRole({ capabilityKey: capabilityKey, role: this.roleSlug })
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.roleSlug = this.$route.params.roleSlug;
|
||||
|
|
|
|||
|
|
@ -7,12 +7,18 @@ export const addCapabilityToRole = (state, {capabilityKey, role}) => {
|
|||
updateRoles[role.slug] = role;
|
||||
Vue.set(state.capabilities[capabilityKey], 'roles', updateRoles)
|
||||
}
|
||||
|
||||
if (state.role && state.role.slug && state.role.slug == role)
|
||||
Vue.set(state.role.capabilities, capabilityKey, true)
|
||||
};
|
||||
|
||||
export const removeCapabilityFromRole = (state, {capabilityKey, role}) => {
|
||||
let updateRoles = state.capabilities[capabilityKey].roles;
|
||||
delete updateRoles[role.slug];
|
||||
Vue.set(state.capabilities[capabilityKey], 'roles', updateRoles)
|
||||
|
||||
if (state.role && state.role.slug && state.role.slug == role)
|
||||
delete state.role.capabilities[capabilityKey]
|
||||
};
|
||||
|
||||
export const setRoles = (state, roles) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue