Adapts to new role and capability endpoints, lists inherited roles with roles. #274.

This commit is contained in:
Mateus Machado Luna 2019-11-06 11:47:53 -03:00
parent 7a8dc9c474
commit 477ca6719c
7 changed files with 130 additions and 81 deletions

View File

@ -66,23 +66,26 @@
v-html="capability.description"/>
</td>
<!-- Associated Roles -->
<td
class="table-creation column-small-width"
:label="$i18n.get('label_associated_roles')"
:aria-label="$i18n.get('label_associated_roles') + ': ' + capability.roles.length">
<p
v-tooltip="{
delay: {
show: 500,
hide: 300,
},
content: capability.roles.length,
autoHide: false,
classes: ['tooltip'],
placement: 'auto-start'
}"
v-html="capability.roles.length ? JSON.stringify(capability.roles) : '<span class=is-italic>' + $i18n.get('info_no_associated_role') + '</span>'"/>
</td>
<complete-roles-list :complete-roles-list="getCompleteRolesList(capability.roles, capability.roles_inherited)">
<td
slot-scope="props"
class="table-creation column-small-width"
:label="$i18n.get('label_associated_roles')"
:aria-label="$i18n.get('label_associated_roles') + ': ' + props['complete-roles-list']">
<p
v-tooltip="{
delay: {
show: 500,
hide: 300,
},
content: props['complete-roles-list'],
autoHide: false,
classes: ['tooltip'],
placement: 'auto-start'
}"
v-html="props['complete-roles-list']"/>
</td>
</complete-roles-list>
<!-- Actions -->
<td
class="actions-cell column-default-width"
@ -116,7 +119,7 @@
v-if="index == editingCapability"
class="tainacan-form"
colspan="4">
<template v-if="capability.roles">
<template v-if="existingRoles && existingRoles.length">
<b-field :addons="false">
<label class="label is-inline-block">
{{ $i18n.get('label_associated_roles') }}
@ -124,18 +127,32 @@
:title="$i18n.get('label_associated_roles')"
:message="$i18n.get('info_associated_roles')"/>
</label>
<b-checkbox
v-for="(role, roleIndex) of capability.roles"
:key="roleIndex"
size="is-small"
:value="role.slug"
@input="($event) => updateRole(role.slug, index, $event)"
name="roles">
{{ role.name }}
</b-checkbox>
<b-checkbox
v-for="(role, roleIndex) of existingRoles"
:key="roleIndex"
size="is-small"
:value="capability.roles[role.slug] || capability.roles_inherited[role.slug] ? true : false"
@input="($event) => updateRole(role.slug, index, $event)"
name="roles"
disabled="true">
{{ role.name }}
</b-checkbox>
<b-checkbox
v-for="(role, roleIndex) of capability.roles"
:key="roleIndex"
size="is-small"
:value="role.slug"
@input="($event) => updateRole(role.slug, index, $event)"
name="roles">
{{ role.name }}
</b-checkbox>
</b-field>
</template>
<p v-else>{{ $i18n.get('info_no_role_associated_capability') }}</p>
<p
v-else
class="is-italic has-text-gray">
{{ $i18n.get('info_no_role_associated_capability') }}
</p>
</td>
</transition>
</tr>
@ -143,24 +160,18 @@
</tbody>
</table>
</div>
<!-- Empty state image -->
<div v-if="capabilities.length <= 0 && !isLoading">
<section class="section">
<div class="content has-text-grey has-text-centered">
<span class="icon">
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-user"/>
</span>
<p class="is-italic has-text-gray">{{ $i18n.get('info_no_capability_found') }}</p>
</div>
</section>
</div>
</div>
</template>
<script>
import { mapActions } from 'vuex';
// Auxiliary component for avoinding multiple calls to getCompleteRolesList
const CompleteRolesList = {
render() {
return this.$scopedSlots.default(this.$attrs)
}
}
export default {
name: 'CapabilitiesList',
props: {
@ -169,10 +180,19 @@
capabilities: Array,
editingCapability: ''
},
components: {
CompleteRolesList
},
data() {
return {
existingRoles: []
}
},
methods: {
...mapActions('capability', [
'associateCapabilityWithRole',
'disassociateCapabilityWithRole'
'fetchRoles',
'addCapabilityToRole',
'removeCapabilityFromRole'
]),
toggleEditForm(capabilityKey) {
if (this.editingCapability == capabilityKey)
@ -182,10 +202,36 @@
},
updateRole(role, capabilityKey, value) {
if (value)
this.associateCapabilityWithRole({ capabilityKey: capabilityKey, role: role })
this.addCapabilityToRole({ capabilityKey: capabilityKey, role: role })
else
this.disassociateCapabilityWithRole({ capabilityKey: capabilityKey, role: role })
this.removeCapabilityFromRole({ capabilityKey: capabilityKey, role: role })
},
getCompleteRolesList(roles, rolesInherited) {
const rolesArray = roles && !Array.isArray(roles) ? Object.values(roles) : [];
const rolesInheritedArray = rolesInherited && !Array.isArray(rolesInherited) ? Object.values(rolesInherited) : [];
if (rolesArray.length || rolesInheritedArray.length) {
const completeRoles = rolesArray.map(role => role.name).concat(rolesInheritedArray.map(roleInherited => roleInherited.name))
let completeRolesString = '';
for (let i = 0; i < completeRoles.length; i++) {
completeRolesString += completeRoles[i];
if (completeRoles.length > 2 && i < completeRoles.length - 1) {
if (i < completeRoles.length - 2)
completeRolesString += ', '
else
completeRolesString += ' ' + this.$i18n.get('label_and') + ' ';
} else if (completeRoles.length == 2 && i == 0) {
completeRolesString += ' ' + this.$i18n.get('label_and') + ' ';
}
}
return completeRolesString
}
else
return '<span class=is-italic>' + this.$i18n.get('info_no_associated_role') + '</span>';
}
},
created() {
this.fetchRoles().then(roles => this.roles = roles);
}
}
</script>

View File

@ -323,7 +323,7 @@
for (let i = 0; i < collections.length; i++) {
htmlList += `<a target="_blank" href=${ this.adminUrl + 'admin.php?page=tainacan_admin#' + this.$routerHelper.getCollectionPath(collections[i].id)}>${collections[i].name}</a>`;
if (collections.length > 2 && i > 0 && i < collections.length - 1) {
if (collections.length > 2 && i < collections.length - 1) {
if (i < collections.length - 2)
htmlList += ', '
else

View File

@ -571,6 +571,7 @@ return apply_filters( 'tainacan-admin-i18n', [
'info_showing_activities' => __( 'Showing activities ', 'tainacan' ),
'info_showing_processes' => __( 'Showing processes ', 'tainacan' ),
'info_showing_capabilities' => __( 'Showing capabilities ', 'tainacan' ),
'info_no_capabilities_found' => __( 'No capabilities found.', 'tainacan' ),
'info_no_role_associated_capability' => __( 'No role associated to this capability', 'tainacan' ),
'info_associated_roles' => __( 'These are the roles that have this capability.', 'tainacan' ),
'info_warning_remove_from_trash_first' => __( 'Remove this item from trash first' ),

View File

@ -1,12 +1,12 @@
import axios from '../../../axios/axios'
// CAPABILITIES
export const associateCapabilityWithRole = ({ commit }, { capabilityKey, role }) => {
// ROLES
export const addCapabilityToRole = ({ commit }, { capabilityKey, role }) => {
return new Promise(( resolve, reject ) => {
axios.tainacan.patch('/roles/' + role + '?add_cap=' + capabilityKey)
.then( res => {
let role = res.data;
commit('associateCapabilityWithRole', {capabilityKey, role });
commit('addCapabilityToRole', {capabilityKey, role });
resolve(role);
})
.catch(error => {
@ -15,12 +15,12 @@ export const associateCapabilityWithRole = ({ commit }, { capabilityKey, role })
});
};
export const disassociateCapabilityWithRole = ({ commit }, { capabilityKey, role }) => {
export const removeCapabilityFromRole = ({ commit }, { capabilityKey, role }) => {
return new Promise(( resolve, reject ) => {
axios.tainacan.patch('/roles/' + role + '?remove_cap=' + capabilityKey)
.then( res => {
let role = res.data;
commit('disassociateCapabilityWithRole', {capabilityKey, role });
commit('removeCapabilityFromRole', {capabilityKey, role });
resolve(role);
})
.catch(error => {
@ -29,10 +29,27 @@ export const disassociateCapabilityWithRole = ({ commit }, { capabilityKey, role
});
};
export const fetchRoles = ({ commit }) => {
return new Promise((resolve, reject) => {
axios.tainacan.get('/roles')
.then(res => {
const roles = res.data
commit('setRoles', roles);
resolve(roles);
})
.catch(error => {
reject(error);
});
});
};
// CAPABILITIES
export const fetchCapabilities = ({ commit }, { collectionId } ) => {
return new Promise((resolve, reject) => {
axios.tainacan.get(`/collection/${collectionId}/roles`)
axios.tainacan.get(`/collection/${collectionId}/capabilities`)
.then(res => {
let capabilities = res.data.capabilities;
@ -61,19 +78,4 @@ export const fetchCapability = ({ commit }, capabilityId) => {
reject(error);
})
});
};
export const fetchCapabilityName = ({ commit }, capabilityId) => {
return new Promise((resolve, reject) => {
axios.tainacan.get(`/capabilities/${capabilityId}?fetch_only=name`)
.then(res => {
let name = res.data;
commit('setCapabilityName');
resolve(name.name)
})
.catch(error => {
reject(error)
})
});
};

View File

@ -1,3 +1,7 @@
export const getRoles = state => {
return state.roles;
};
export const getCapability = state => {
return state.capability;
};
@ -5,7 +9,3 @@ export const getCapability = state => {
export const getCapabilities = state => {
return state.capabilities;
};
export const getCapabilityName = state => {
return state.capabilityName;
};

View File

@ -5,7 +5,6 @@ import * as mutations from './mutations';
const state = {
capabilities: [],
capability: {},
capabilityName: String,
roles: []
};

View File

@ -1,28 +1,29 @@
import Vue from 'vue';
// CAPABILITIES
export const setCapability = (state, capability) => {
state.capability = capability;
};
export const associateCapabilityWithRole = (state, {capabilityKey, role}) => {
// Roles
export const addCapabilityToRole = (state, {capabilityKey, role}) => {
const existingRoleIndex = state.capabilities[capabilityKey].roles.findIndex((aRole) => role == aRole)
if (existingRoleIndex < 0)
state.capabilities[capabilityKey].roles.push(role)
};
export const disassociateCapabilityWithRole = (state, {capabilityKey, role}) => {
export const removeCapabilityFromRole = (state, {capabilityKey, role}) => {
const existingRoleIndex = state.capabilities[capabilityKey].roles.findIndex((aRole) => role == aRole)
if (existingRoleIndex >= 0)
state.capabilities[capabilityKey].splice(existingRoleIndex, 1)
};
export const setRoles = (state, roles) => {
state.roles = roles;
};
// CAPABILITIES
export const setCapabilities = (state, capabilities) => {
state.capabilities = capabilities;
};
export const setCapabilityName = (state, name) => {
state.capabilityName = name;
};
export const setCapability = (state, capability) => {
state.capability = capability;
};