butify view, fix bugs

client/src/components/LibraryFolder/LibraryFolderPermissions/LibraryFolderPermissions.vue

@@ -1,69 +1,81 @@
 <template>
     <div>
         <div>
-            <a :href="getParentLink">
+            <b-button variant="primary" :href="getParentLink()">
+                <font-awesome-icon icon="angle-double-left">1</font-awesome-icon>
+            </b-button>
+        </div>
+        <b-jumbotron bg-variant="white">
+            <template v-if="folder" #header> {{ folder.name }}</template>
+            <template #lead>
+                <div class="alert alert-warning">
+                    <div v-if="is_admin">
+                        You are logged in as an <strong>administrator</strong> therefore you can manage any folder on
+                        this Galaxy instance. Please make sure you understand the consequences.
+                    </div>
+                    <div v-else>
+                        You can assign any number of roles to any of the following permission types. However please read
+                        carefully the implications of such actions.
+                    </div>
+                </div>
+            </template>
+            <hr class="my-4" />
+
+            <div class="dataset_table">
+                <h2>Folder permissions</h2>
+                <h4>
+                    Roles that can manage permissions on this folder
+                </h4>
+                <PermissionsInputField
+                    v-if="manage_folder_role_list"
+                    :folder_id="folder_id"
+                    :permission_type="manage_type"
+                    :initial_value="manage_folder_role_list"
+                    @input="setUserPermissionsPreferences"
+                />
+
+                <div class="alert alert-info roles-selection">
+                    User with <strong>any</strong> of these roles can manage permissions on this folder.
+                </div>
+                <h4>
+                    Roles that can add items to this folder
+                </h4>
+                <PermissionsInputField
+                    v-if="add_library_item_role_list"
+                    :folder_id="folder_id"
+                    :permission_type="add_type"
+                    :initial_value="add_library_item_role_list"
+                    @input="setUserPermissionsPreferences"
+                />
+                <div class="alert alert-info roles-selection">
+                    User with <strong>any</strong> of these roles can add items to this folder (folders and datasets).
+                </div>
+                <h4>
+                    Roles that can modify this folder
+                </h4>
+                <PermissionsInputField
+                    v-if="modify_folder_role_list"
+                    :folder_id="folder_id"
+                    :permission_type="modify_type"
+                    :initial_value="modify_folder_role_list"
+                    @input="setUserPermissionsPreferences"
+                />
+                <div class="alert alert-info roles-selection">setUserPermissionsPreferences
+                    User with <strong>any</strong> of these roles can modify this folder (name, etc.).
+                </div>
                 <button
                     data-toggle="tooltip"
                     data-placement="top"
-                    title="Go back to the parent folder"
-                    class="btn btn-secondary primary-button"
+                    title="Save modifications"
+                    class="btn btn-secondary toolbtn_save_permissions primary-button"
                     type="button"
+                    @click="postPermissions"
                 >
-                    <span class="fa fa-caret-left fa-lg" />
-                    &nbsp;Parent folder
+                    <font-awesome-icon :icon="['far', 'save']" />
+                    &nbsp;Save
                 </button>
-            </a>
-        </div>
-
-        <h1>Folder: {{ folder.name }}</h1>
-
-        <div class="alert alert-warning">
-            <div v-if="is_admin">
-                You are logged in as an <strong>administrator</strong> therefore you can manage any folder on this
-                Galaxy instance. Please make sure you understand the consequences.
             </div>
-            <div v-else>
-                You can assign any number of roles to any of the following permission types. However please read
-                carefully the implications of such actions.
-            </div>
-        </div>
-
-        <div class="dataset_table">
-            <h2>Folder permissions</h2>
-            <h4>
-                Roles that can manage permissions on this folder
-            </h4>
-            <PermissionsInputField :folder_id="folder_id" :type="manage_type" :value="manage_ids" @input="setUserPermissionsPreferences"/>
-
-            <div class="alert alert-info roles-selection">
-                User with <strong>any</strong> of these roles can manage permissions on this folder.
-            </div>
-            <h4>
-                Roles that can add items to this folder
-            </h4>
-            <PermissionsInputField :folder_id="folder_id" :type="add_type" :value="add_ids" @input="setUserPermissionsPreferences" />
-            <div class="alert alert-info roles-selection">
-                User with <strong>any</strong> of these roles can add items to this folder (folders and datasets).
-            </div>
-            <h4>
-                Roles that can modify this folder
-            </h4>
-            <PermissionsInputField :folder_id="folder_id" :type="modify_type" :value="modify_ids" @input="setUserPermissionsPreferences" />
-            <div class="alert alert-info roles-selection">
-                User with <strong>any</strong> of these roles can modify this folder (name, etc.).
-            </div>
-            <button
-                data-toggle="tooltip"
-                data-placement="top"
-                title="Save modifications"
-                class="btn btn-secondary toolbtn_save_permissions primary-button"
-                type="button"
-                @click="postPermissions"
-            >
-                <span class="fa fa-floppy-o" />
-                &nbsp;Save
-            </button>
-        </div>
+        </b-jumbotron>
     </div>
 </template>
 
@@ -72,17 +84,18 @@ import Vue from "vue";
 import { getAppRoot } from "onload/loadConfig";
 import BootstrapVue from "bootstrap-vue";
 import { Services } from "./services";
-import Utils from "utils/utils";
 import { Toast } from "ui/toast";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { getGalaxyInstance } from "app";
 import PermissionsInputField from "./PermissionsInputField.vue";
+import { initManageFolderIcons } from "components/LibraryFolder/icons";
 
 import "vue-multiselect/dist/vue-multiselect.min.css";
 import VueObserveVisibility from "vue-observe-visibility";
 
 Vue.use(VueObserveVisibility);
 Vue.use(BootstrapVue);
+initManageFolderIcons();
 
 export default {
     props: {
@@ -93,16 +106,16 @@ export default {
     },
     components: {
         PermissionsInputField,
+        FontAwesomeIcon,
     },
     data() {
         return {
             permissions: undefined,
             folder: undefined,
             is_admin: undefined,
-            value: null,
-            add_ids: [],
-            modify_ids: [],
-            manage_ids: [],
+            add_library_item_role_list: undefined,
+            modify_folder_role_list: undefined,
+            manage_folder_role_list: undefined,
             add_type: "add_type",
             manage_type: "manage_type",
             modify_type: "modify_type",
@@ -113,9 +126,10 @@ export default {
         this.root = getAppRoot();
         this.services = new Services({ root: this.root });
         this.is_admin = Galaxy.user.attributes.is_admin;
-
-        this.services.getFolderPermissions(this.folder_id).then((response) => {
-            this.permissions = response;
+        this.services.getFolderPermissions(this.folder_id).then((fetched_permissions) => {
+            this.add_library_item_role_list = this._serializeRoles(fetched_permissions.add_library_item_role_list);
+            this.manage_folder_role_list = this._serializeRoles(fetched_permissions.manage_folder_role_list);
+            this.modify_folder_role_list = this._serializeRoles(fetched_permissions.modify_folder_role_list);
         });
         this.services.getFolder(this.folder_id).then((response) => {
             this.folder = response;
@@ -126,24 +140,25 @@ export default {
         getParentLink() {
             return `${this.root}library/folders/${this.folder.parent_id}`;
         },
-        setUserPermissionsPreferences(ids, type) {
-            switch (type) {
-                case "manage":
-                    this.manage_ids = ids;
+        setUserPermissionsPreferences(ids, permission_type) {
+            switch (permission_type) {
+                case "manage_type":
+                    this.manage_folder_role_list = ids;
                     break;
-                case "add":
-                    this.add_ids = ids;
+                case "add_type":
+                    this.add_library_item_role_list = ids;
                     break;
-                case "modify":
-                    this.modify_ids = ids;
+                case "modify_type":
+                    this.modify_folder_role_list = ids;
                     break;
             }
         },
         postPermissions() {
             this.services.setPermissions(
-                this.add_ids,
-                this.manage_ids,
-                this.modify_ids,
+                this.folder_id,
+                this.add_library_item_role_list,
+                this.manage_folder_role_list,
+                this.modify_folder_role_list,
                 (fetched_permissions) => {
                     Toast.success("Permissions saved.");
                     this.permissions = fetched_permissions;
@@ -154,6 +169,15 @@ export default {
                 }
             );
         },
+
+        _serializeRoles: function (role_list) {
+            const selected_roles = [];
+            role_list.forEach((item) => {
+                selected_roles.push({ name: item[0], id: item[1] });
+            });
+
+            return selected_roles;
+        },
     },
 };
 </script>

client/src/components/LibraryFolder/LibraryFolderPermissions/PermissionsInputField.vue

@@ -1,8 +1,8 @@
 <template>
-    <div v-if="roles.length > 0">
+    <div v-if="fetched_options.length > 0 && value">
         <multiselect
             v-model="value"
-            :options="roles"
+            :options="fetched_options"
             :clear-on-select="true"
             :preserve-search="true"
             :multiple="true"
@@ -29,10 +29,14 @@ export default {
             type: String,
             required: true,
         },
-        type: {
+        permission_type: {
             type: String,
             required: true,
         },
+        initial_value: {
+            type: Array,
+            required: true,
+        },
     },
     components: {
         Multiselect,
@@ -43,15 +47,17 @@ export default {
             folder: undefined,
             is_admin: undefined,
             options: undefined,
-            value: null,
+            value: undefined,
             page: 1,
             page_limit: 10,
-            roles: [],
+            fetched_options: [],
+
         };
     },
     created() {
         this.services = new Services({ root: this.root });
-
+        // Avoid mutating a prop directly
+        this.value = this.initial_value;
         this.getSelectOptions(this.page);
     },
     computed: {
@@ -63,7 +69,7 @@ export default {
         getSelectOptions(page) {
             this.services.getSelectOptions(this.folder_id, true, page, this.page_limit).then((response) => {
                 this.options = response;
-                this.roles = this.roles.concat(this.options.roles);
+                this.fetched_options = this.fetched_options.concat(this.options.roles);
             });
         },
         reachedEndOfList(reached) {
@@ -73,7 +79,7 @@ export default {
         },
         valueChanged() {
             console.log(this.value)
-            this.$emit("input", this.value, this.type);
+            this.$emit("input", this.value, this.permission_type);
         },
     },
 };

client/src/components/LibraryFolder/LibraryFolderPermissions/services.js

@@ -34,15 +34,24 @@ export class Services {
             rethrowSimple(e);
         }
     }
-    async setPermissions(access_ids, add_ids, manage_ids, modify_ids, onSuccess, onError) {
+    async setPermissions(id, add_ids, manage_ids, modify_ids, onSuccess, onError) {
         var formData = new FormData();
-        formData.append("add_ids[]", access_ids);
-        formData.append("manage_ids[]", manage_ids);
-        formData.append("modify_ids[]", modify_ids);
+        formData.append(
+            "add_ids[]",
+            add_ids.map((a) => a.id)
+        );
+        formData.append(
+            "manage_ids[]",
+            manage_ids.map((a) => a.id)
+        );
+        formData.append(
+            "modify_ids[]",
+            modify_ids.map((a) => a.id)
+        );
 
         axios({
             method: "post",
-            url: "`${getAppRoot()}api/libraries/${self.id}/permissions?action=set_permissions`",
+            url: `${getAppRoot()}api/folders/${id}/permissions?action=set_permissions`,
             data: formData,
             headers: { "Content-Type": "multipart/form-data" },
         })

client/src/components/LibraryFolder/icons.js

@@ -16,6 +16,7 @@ import {
     faDownload,
     faBook,
     faMinusSquare,
+    faAngleDoubleLeft,
 } from "@fortawesome/free-solid-svg-icons";
 import { library } from "@fortawesome/fontawesome-svg-core";
 
@@ -36,6 +37,8 @@ const tableIcons = [
     faSquare,
     faMinusSquare,
 ];
+
+const manageIcons = [faAngleDoubleLeft, faSave];
 const topBarIcons = [faHome, faPlus, faInfoCircle, faTrash, faDownload, faBook];
 
 export function initFolderTableIcons() {
@@ -44,6 +47,12 @@ export function initFolderTableIcons() {
     });
 }
 
+export function initManageFolderIcons() {
+    manageIcons.forEach((icon) => {
+        library.add(icon);
+    });
+}
+
 export function initTopBarIcons() {
     topBarIcons.forEach((icon) => {
         library.add(icon);