From e077eb971b5420308a302c840595bd68453ad5e0 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Thu, 28 Nov 2019 16:52:12 -0300
Subject: [PATCH] Changes the name for action to get all collection names and
 adds selector to capabilities list. #274.

---
 .../edition/collection-edition-form.vue       |   6 +-
 .../edition/importer-edition-form.vue         |   4 +-
 src/admin/roles/role-edition-form.vue         | 276 +++++++++++-------
 src/admin/roles/roles-list.vue                |   8 +-
 src/js/store/modules/capability/actions.js    |  15 +
 src/js/store/modules/capability/mutations.js  |  11 +-
 src/js/store/modules/collection/actions.js    |   4 +-
 src/js/store/modules/filter/actions.js        |   2 +-
 8 files changed, 213 insertions(+), 113 deletions(-)

diff --git a/src/admin/components/edition/collection-edition-form.vue b/src/admin/components/edition/collection-edition-form.vue
index af135ffaa..ba0f6bf19 100644
--- a/src/admin/components/edition/collection-edition-form.vue
+++ b/src/admin/components/edition/collection-edition-form.vue
@@ -550,7 +550,7 @@ export default {
             'updateHeaderImage',
             'fetchPages',
             'fetchPage',
-            'fetchCollectionsForParent'
+            'fetchAllCollectionNames'
         ]),
         updateSlug: _.debounce(function() {
             if(!this.form.name || this.form.name.length <= 0){
@@ -668,7 +668,7 @@ export default {
 
                 // Generates options for parent collection
                 this.isFetchingCollections = true;
-                this.fetchCollectionsForParent()
+                this.fetchAllCollectionNames()
                     .then((collections) => {
                         this.collections = collections;
                         this.isFetchingCollections = false;
@@ -848,7 +848,7 @@ export default {
 
                 // Generates options for parent collection
                 this.isFetchingCollections = true;
-                this.fetchCollectionsForParent()
+                this.fetchAllCollectionNames()
                     .then((resp) => {
                         resp.request.then((collections) => {
                             this.collections = collections;
diff --git a/src/admin/components/edition/importer-edition-form.vue b/src/admin/components/edition/importer-edition-form.vue
index f078d1f07..9310dd21b 100644
--- a/src/admin/components/edition/importer-edition-form.vue
+++ b/src/admin/components/edition/importer-edition-form.vue
@@ -216,7 +216,7 @@ export default {
             'runImporter'
         ]),
         ...mapActions('collection', [
-            'fetchCollectionsForParent'
+            'fetchAllCollectionNames'
         ]),
         createImporter() {
             // Puts loading on Draft Importer creation
@@ -386,7 +386,7 @@ export default {
         loadCollections() {
             // Generates options for target collection
             this.isFetchingCollections = true;
-            this.fetchCollectionsForParent()
+            this.fetchAllCollectionNames()
                 .then((resp) => {
                     resp.request.then((collections) => {
                         this.collections = collections;
diff --git a/src/admin/roles/role-edition-form.vue b/src/admin/roles/role-edition-form.vue
index 4445c0275..8b04c591c 100644
--- a/src/admin/roles/role-edition-form.vue
+++ b/src/admin/roles/role-edition-form.vue
@@ -3,7 +3,21 @@
         <h1 class="wp-heading-inline">{{ $route.meta.title }}&nbsp;<strong>{{ role.name }}</strong></h1>
         <hr class="wp-header-end">
         <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">
+            <br>
             <h2>{{ $i18n.get('Role\'s Repository related Capabilities List') }}</h2>
             <table class="wp-list-table widefat fixed striped capabilities">
                 <thead>
@@ -104,103 +118,131 @@
 
             <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>
+            <template v-if="!isLoadingCollections"> 
 
-                <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>
+                <h2>{{ $i18n.get('Role\'s Collection related Capabilities List') }}</h2>
 
-                <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>
+                <div class="tablenav top">
+                    <div class="alignleft collection-selector">
+                        <label 
+                                for="bulk-action-selector-top" 
+                                class="screen-reader-text">
+                            {{ $i18n.get('Select the collection to change capabilities') }}
+                        </label>
+                        <select 
+                                name="collection" 
+                                id="collection-select"
+                                :value="selectedCollection"
+                                @input="selectedCollection = $event.target.value">
+                            <option value="all">{{ $i18n.get('All Collections') }}</option>
+                            <option 
+                                    :key="index"
+                                    v-for="(collection, index) of collections"
+                                    :value="collection.id">
+                                {{ collection.name }}
+                            </option>
+                        </select>    
+                    </div>
+                    <br class="clear">
+                </div>
+
+                <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.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>
     </div>
 </template>
@@ -211,8 +253,12 @@
     export default {
         data() {
             return {
+                isUpdatingRole: false,
                 isLoadingRole: false,
-                isLoadingCapabilities: false
+                isLoadingCapabilities: false,
+                selectedCollection: 'all',
+                collections: [],
+                isLoadingCollections: false
             }
         },
         computed: {
@@ -224,7 +270,7 @@
                 let collectionCapabilities = {}
 
                 for (let [capabilityKey, capability] of Object.entries(capabilities)) {
-                    if (capability.scope === 'repository')
+                    if (capability.scope === 'collection')
                         collectionCapabilities[capabilityKey] = capability;
                 }
                 return collectionCapabilities;
@@ -241,22 +287,40 @@
             }
         },
         methods: {
+            ...mapActions('collection', [
+                'fetchAllCollectionNames'
+            ]),
             ...mapActions('capability', [
+                'updateRole',
                 'fetchRole',
                 'fetchCapabilities',
                 'addCapabilityToRole',
                 'removeCapabilityFromRole'
             ]),
+            ...mapGetters('collection', [
+                'getCollections'
+            ]),
             ...mapGetters('capability', [
                 'getRole',
                 '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) {
                 if (value)
                     this.addCapabilityToRole({ capabilityKey: capabilityKey, role: this.roleSlug })
                 else
                     this.removeCapabilityFromRole({ capabilityKey: capabilityKey, role: this.roleSlug })
-            }
+            },
         },
         created() {
             this.roleSlug = this.$route.params.roleSlug;
@@ -276,6 +340,22 @@
                 }).catch(() => {
                     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>
\ No newline at end of file
diff --git a/src/admin/roles/roles-list.vue b/src/admin/roles/roles-list.vue
index 44ecfe592..883f42524 100644
--- a/src/admin/roles/roles-list.vue
+++ b/src/admin/roles/roles-list.vue
@@ -1,11 +1,15 @@
 <template>
     <div>
         <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') }}
-        </a>
+        </router-link>
         <hr class="wp-header-end">
+        
         <br>
+    
         <h2 class="screen-reader-text">{{ $i18n.get('Roles list') }}</h2>
         <table 
                 v-if="!isLoadingRoles"
diff --git a/src/js/store/modules/capability/actions.js b/src/js/store/modules/capability/actions.js
index 9be7d7422..0ea0364cc 100644
--- a/src/js/store/modules/capability/actions.js
+++ b/src/js/store/modules/capability/actions.js
@@ -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
 export const fetchCapabilities = ({ commit }, { collectionId } ) => {
     return new Promise((resolve, reject) => {
diff --git a/src/js/store/modules/capability/mutations.js b/src/js/store/modules/capability/mutations.js
index d087390f2..abce29f26 100644
--- a/src/js/store/modules/capability/mutations.js
+++ b/src/js/store/modules/capability/mutations.js
@@ -2,7 +2,7 @@ import Vue from 'vue';
 
 // Roles
 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 : {};
         updateRoles[role.slug] = role;
         Vue.set(state.capabilities[capabilityKey], 'roles', updateRoles)
@@ -13,10 +13,11 @@ export const addCapabilityToRole = (state, {capabilityKey, role}) => {
 };
 
 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.capabilities[capabilityKey]) {
+        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]
 };
diff --git a/src/js/store/modules/collection/actions.js b/src/js/store/modules/collection/actions.js
index 28761ba88..ea1e20c07 100644
--- a/src/js/store/modules/collection/actions.js
+++ b/src/js/store/modules/collection/actions.js
@@ -457,12 +457,12 @@ export const fetchPage = ({ commit }, pageId ) => {
 };
 
 // Fetch Collections for choosing Parent Collection
-export const fetchCollectionsForParent = ({ commit }) => {
+export const fetchAllCollectionNames = ({ commit }) => {
     const source = axios.CancelToken.source();
 
     return new Object({ 
         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 => {
                 let collections = res.data;
                 resolve( collections );
diff --git a/src/js/store/modules/filter/actions.js b/src/js/store/modules/filter/actions.js
index c57fb5523..a2a5ad588 100644
--- a/src/js/store/modules/filter/actions.js
+++ b/src/js/store/modules/filter/actions.js
@@ -167,7 +167,7 @@ export const fetchRepositoryCollectionFilters = ({ dispatch, commit } ) => {
 
     return new Promise((resolve, reject) => {
 
-        dispatch('collection/fetchCollectionsForParent', { } ,{ root: true })
+        dispatch('collection/fetchAllCollectionNames', { } ,{ root: true })
             .then((resp) => {
                 resp.request
                     .then((res) => {