Changes the name for action to get all collection names and adds selector to capabilities list. #274.

This commit is contained in:
Mateus Machado Luna 2019-11-28 16:52:12 -03:00
parent 5d503465f7
commit e077eb971b
8 changed files with 213 additions and 113 deletions

View File

@ -550,7 +550,7 @@ export default {
'updateHeaderImage', 'updateHeaderImage',
'fetchPages', 'fetchPages',
'fetchPage', 'fetchPage',
'fetchCollectionsForParent' 'fetchAllCollectionNames'
]), ]),
updateSlug: _.debounce(function() { updateSlug: _.debounce(function() {
if(!this.form.name || this.form.name.length <= 0){ if(!this.form.name || this.form.name.length <= 0){
@ -668,7 +668,7 @@ export default {
// Generates options for parent collection // Generates options for parent collection
this.isFetchingCollections = true; this.isFetchingCollections = true;
this.fetchCollectionsForParent() this.fetchAllCollectionNames()
.then((collections) => { .then((collections) => {
this.collections = collections; this.collections = collections;
this.isFetchingCollections = false; this.isFetchingCollections = false;
@ -848,7 +848,7 @@ export default {
// Generates options for parent collection // Generates options for parent collection
this.isFetchingCollections = true; this.isFetchingCollections = true;
this.fetchCollectionsForParent() this.fetchAllCollectionNames()
.then((resp) => { .then((resp) => {
resp.request.then((collections) => { resp.request.then((collections) => {
this.collections = collections; this.collections = collections;

View File

@ -216,7 +216,7 @@ export default {
'runImporter' 'runImporter'
]), ]),
...mapActions('collection', [ ...mapActions('collection', [
'fetchCollectionsForParent' 'fetchAllCollectionNames'
]), ]),
createImporter() { createImporter() {
// Puts loading on Draft Importer creation // Puts loading on Draft Importer creation
@ -386,7 +386,7 @@ export default {
loadCollections() { loadCollections() {
// Generates options for target collection // Generates options for target collection
this.isFetchingCollections = true; this.isFetchingCollections = true;
this.fetchCollectionsForParent() this.fetchAllCollectionNames()
.then((resp) => { .then((resp) => {
resp.request.then((collections) => { resp.request.then((collections) => {
this.collections = collections; this.collections = collections;

View File

@ -3,7 +3,21 @@
<h1 class="wp-heading-inline">{{ $route.meta.title }}&nbsp;<strong>{{ role.name }}</strong></h1> <h1 class="wp-heading-inline">{{ $route.meta.title }}&nbsp;<strong>{{ role.name }}</strong></h1>
<hr class="wp-header-end"> <hr class="wp-header-end">
<br> <br>
<template v-if="!isLoadingRole">
<div class="name-edition-box">
<h2 id="role-name-label">{{ $i18n.get('Role name') }}</h2>
<input
aria-labelledby="role-name-label"
type="text"
id="rolen-name-input"
name="name"
@input="onUpdateRoleName($event.target.value)"
:value="role.name"
:placeholder="$i18n.get('Type here the role name...')">
</div>
</template>
<template v-if="!isLoadingRole && !isLoadingCapabilities"> <template v-if="!isLoadingRole && !isLoadingCapabilities">
<br>
<h2>{{ $i18n.get('Role\'s Repository related Capabilities List') }}</h2> <h2>{{ $i18n.get('Role\'s Repository related Capabilities List') }}</h2>
<table class="wp-list-table widefat fixed striped capabilities"> <table class="wp-list-table widefat fixed striped capabilities">
<thead> <thead>
@ -104,103 +118,131 @@
<br> <br>
<h2>{{ $i18n.get('Role\'s Collection related Capabilities List') }}</h2> <template v-if="!isLoadingCollections">
<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"> <h2>{{ $i18n.get('Role\'s Collection related Capabilities List') }}</h2>
<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> <div class="tablenav top">
<tr> <div class="alignleft collection-selector">
<td class="manage-column column-cb check-column"> <label
<label for="bulk-action-selector-top"
class="screen-reader-text" class="screen-reader-text">
for="cb-select-all-collection-2"> {{ $i18n.get('Select the collection to change capabilities') }}
{{ $i18n.get('Selecionar Todos') }} </label>
</label> <select
<input name="collection"
id="cb-select-all-collection-2" id="collection-select"
type="checkbox"> :value="selectedCollection"
</td> @input="selectedCollection = $event.target.value">
<th <option value="all">{{ $i18n.get('All Collections') }}</option>
scope="col" <option
id="name-collection" :key="index"
class="manage-column column-name column-primary"> v-for="(collection, index) of collections"
<a> :value="collection.id">
{{ $i18n.get('Name') }} {{ collection.name }}
</a> </option>
</th> </select>
<th </div>
scope="col" <br class="clear">
id="description-collection" </div>
class="manage-column column-description">
<a> <table class="wp-list-table widefat fixed striped capabilities">
{{ $i18n.get('Description') }} <thead>
</a> <tr>
</th> <td class="manage-column column-cb check-column">
</tr> <label
</tfoot> class="screen-reader-text"
</table> 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.replace('%d', selectedCollection)">
<th
scope="row"
class="check-column">
<label
class="screen-reader-text"
:for="'capability_' + index.replace('%d', selectedCollection)">
{{ $i18n.get('Selecionar') + ' ' + capability.display_name }}
</label>
<input
type="checkbox"
name="roles[]"
:id="'capability_'+ index.replace('%d', selectedCollection)"
:checked="role.capabilities[index.replace('%d', selectedCollection)]"
@input="onUpdateCapability($event.target.checked, index.replace('%d', selectedCollection))">
</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>
</template> </template>
</div> </div>
</template> </template>
@ -211,8 +253,12 @@
export default { export default {
data() { data() {
return { return {
isUpdatingRole: false,
isLoadingRole: false, isLoadingRole: false,
isLoadingCapabilities: false isLoadingCapabilities: false,
selectedCollection: 'all',
collections: [],
isLoadingCollections: false
} }
}, },
computed: { computed: {
@ -224,7 +270,7 @@
let collectionCapabilities = {} let collectionCapabilities = {}
for (let [capabilityKey, capability] of Object.entries(capabilities)) { for (let [capabilityKey, capability] of Object.entries(capabilities)) {
if (capability.scope === 'repository') if (capability.scope === 'collection')
collectionCapabilities[capabilityKey] = capability; collectionCapabilities[capabilityKey] = capability;
} }
return collectionCapabilities; return collectionCapabilities;
@ -241,22 +287,40 @@
} }
}, },
methods: { methods: {
...mapActions('collection', [
'fetchAllCollectionNames'
]),
...mapActions('capability', [ ...mapActions('capability', [
'updateRole',
'fetchRole', 'fetchRole',
'fetchCapabilities', 'fetchCapabilities',
'addCapabilityToRole', 'addCapabilityToRole',
'removeCapabilityFromRole' 'removeCapabilityFromRole'
]), ]),
...mapGetters('collection', [
'getCollections'
]),
...mapGetters('capability', [ ...mapGetters('capability', [
'getRole', 'getRole',
'getCapabilities' 'getCapabilities'
]), ]),
onUpdateRoleName: _.debounce(function(newName) {
const updatedRole = JSON.parse(JSON.stringify(this.role));
updatedRole['name'] = newName;
this.isUpdatingRole = true;
this.updateRole(updatedRole)
.then(() => {
this.isUpdatingRole = false;
}).catch(() => {
this.isUpdatingRole = false;
});
}, 800),
onUpdateCapability(value, capabilityKey) { onUpdateCapability(value, capabilityKey) {
if (value) if (value)
this.addCapabilityToRole({ capabilityKey: capabilityKey, role: this.roleSlug }) this.addCapabilityToRole({ capabilityKey: capabilityKey, role: this.roleSlug })
else else
this.removeCapabilityFromRole({ capabilityKey: capabilityKey, role: this.roleSlug }) this.removeCapabilityFromRole({ capabilityKey: capabilityKey, role: this.roleSlug })
} },
}, },
created() { created() {
this.roleSlug = this.$route.params.roleSlug; this.roleSlug = this.$route.params.roleSlug;
@ -276,6 +340,22 @@
}).catch(() => { }).catch(() => {
this.isLoadingCapabilities = false; this.isLoadingCapabilities = false;
}); });
this.isLoadingCollections = true;
this.fetchAllCollectionNames()
.then((resp) => {
resp.request
.then((collections) => {
this.collections = collections;
this.isLoadingCollections = false;
}).catch(() => {
this.isLoadingCollections = false;
});
})
.catch(() => {
this.isLoadingCollections = false;
});
} }
} }
</script> </script>

View File

@ -1,11 +1,15 @@
<template> <template>
<div> <div>
<h1 class="wp-heading-inline">{{ $route.meta.title }}</h1> <h1 class="wp-heading-inline">{{ $route.meta.title }}</h1>
<a class="page-title-action"> <router-link
to="/roles/new"
class="page-title-action">
{{ $i18n.get('Add new role') }} {{ $i18n.get('Add new role') }}
</a> </router-link>
<hr class="wp-header-end"> <hr class="wp-header-end">
<br> <br>
<h2 class="screen-reader-text">{{ $i18n.get('Roles list') }}</h2> <h2 class="screen-reader-text">{{ $i18n.get('Roles list') }}</h2>
<table <table
v-if="!isLoadingRoles" v-if="!isLoadingRoles"

View File

@ -59,6 +59,21 @@ export const fetchRole = ({ commit }, roleSlug) => {
}); });
}; };
export const updateRole = ({ commit }, role) => {
return new Promise((resolve, reject) => {
axios.tainacan.patch('/roles/' + role.slug, role)
.then(res => {
const role = res.data
commit('setRole', role);
resolve(role);
})
.catch(error => {
reject(error);
});
});
};
// CAPABILITIES // CAPABILITIES
export const fetchCapabilities = ({ commit }, { collectionId } ) => { export const fetchCapabilities = ({ commit }, { collectionId } ) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {

View File

@ -2,7 +2,7 @@ import Vue from 'vue';
// Roles // Roles
export const addCapabilityToRole = (state, {capabilityKey, role}) => { export const addCapabilityToRole = (state, {capabilityKey, role}) => {
if (state.capabilities[capabilityKey].roles[role.slug] == undefined) { if (state.capabilities[capabilityKey] && state.capabilities[capabilityKey].roles[role.slug] == undefined) {
let updateRoles = state.capabilities[capabilityKey].roles.length ? state.capabilities[capabilityKey].roles : {}; let updateRoles = state.capabilities[capabilityKey].roles.length ? state.capabilities[capabilityKey].roles : {};
updateRoles[role.slug] = role; updateRoles[role.slug] = role;
Vue.set(state.capabilities[capabilityKey], 'roles', updateRoles) Vue.set(state.capabilities[capabilityKey], 'roles', updateRoles)
@ -13,10 +13,11 @@ export const addCapabilityToRole = (state, {capabilityKey, role}) => {
}; };
export const removeCapabilityFromRole = (state, {capabilityKey, role}) => { export const removeCapabilityFromRole = (state, {capabilityKey, role}) => {
let updateRoles = state.capabilities[capabilityKey].roles; if (state.capabilities[capabilityKey]) {
delete updateRoles[role.slug]; let updateRoles = state.capabilities[capabilityKey].roles;
Vue.set(state.capabilities[capabilityKey], 'roles', updateRoles) delete updateRoles[role.slug];
Vue.set(state.capabilities[capabilityKey], 'roles', updateRoles)
}
if (state.role && state.role.slug && state.role.slug == role) if (state.role && state.role.slug && state.role.slug == role)
delete state.role.capabilities[capabilityKey] delete state.role.capabilities[capabilityKey]
}; };

View File

@ -457,12 +457,12 @@ export const fetchPage = ({ commit }, pageId ) => {
}; };
// Fetch Collections for choosing Parent Collection // Fetch Collections for choosing Parent Collection
export const fetchCollectionsForParent = ({ commit }) => { export const fetchAllCollectionNames = ({ commit }) => {
const source = axios.CancelToken.source(); const source = axios.CancelToken.source();
return new Object({ return new Object({
request: new Promise((resolve, reject) => { request: new Promise((resolve, reject) => {
axios.tainacan.get('/collections/?nopaging=1fetch_only=name,id', { cancelToken: source.token }) axios.tainacan.get('/collections/?nopaging=1&fetch_only=name,id', { cancelToken: source.token })
.then(res => { .then(res => {
let collections = res.data; let collections = res.data;
resolve( collections ); resolve( collections );

View File

@ -167,7 +167,7 @@ export const fetchRepositoryCollectionFilters = ({ dispatch, commit } ) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
dispatch('collection/fetchCollectionsForParent', { } ,{ root: true }) dispatch('collection/fetchAllCollectionNames', { } ,{ root: true })
.then((resp) => { .then((resp) => {
resp.request resp.request
.then((res) => { .then((res) => {