Adapts to new role and capability endpoints, lists inherited roles with roles. #274.
This commit is contained in:
parent
7a8dc9c474
commit
477ca6719c
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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' ),
|
||||
|
|
|
@ -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)
|
||||
})
|
||||
});
|
||||
};
|
|
@ -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;
|
||||
};
|
||||
|
|
|
@ -5,7 +5,6 @@ import * as mutations from './mutations';
|
|||
const state = {
|
||||
capabilities: [],
|
||||
capability: {},
|
||||
capabilityName: String,
|
||||
roles: []
|
||||
};
|
||||
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue