permission input fields as a sep component

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

@@ -33,18 +33,7 @@
             <h4>
                 Roles that can manage permissions on this folder
             </h4>
-
-            <multiselect
-                v-if="options.roles.length > 0"
-                v-model="value"
-                :options="options.roles"
-                :clear-on-select="true"
-                :preserve-search="true"
-                :multiple="true"
-                label="name"
-                track-by="id"
-            >
-            </multiselect>
+            <PermissionsInputField :folder_id="folder_id" :type="manage_type" :value="manage_ids" @input="setUserPermissionsPreferences(ids, type)"/>
 
             <div class="alert alert-info roles-selection">
                 User with <strong>any</strong> of these roles can manage permissions on this folder.
@@ -52,14 +41,14 @@
             <h4>
                 Roles that can add items to this folder
             </h4>
-            <div id="add_perm" class="add_perm roles-selection"></div>
+            <PermissionsInputField :folder_id="folder_id" :type="add_type" :value="add_ids" @input="setUserPermissionsPreferences(ids, type)" />
             <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>
-            <div id="modify_perm" class="modify_perm roles-selection"></div>
+            <PermissionsInputField :folder_id="folder_id" :type="modify_type" :value="modify_ids" @input="setUserPermissionsPreferences(ids, type)" />
             <div class="alert alert-info roles-selection">
                 User with <strong>any</strong> of these roles can modify this folder (name, etc.).
             </div>
@@ -69,6 +58,7 @@
                 title="Save modifications"
                 class="btn btn-secondary toolbtn_save_permissions primary-button"
                 type="button"
+                @click="postPermissions"
             >
                 <span class="fa fa-floppy-o" />
                 &nbsp;Save
@@ -86,9 +76,12 @@ import Utils from "utils/utils";
 import { Toast } from "ui/toast";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { getGalaxyInstance } from "app";
-import Multiselect from "vue-multiselect";
-import "vue-multiselect/dist/vue-multiselect.min.css";
+import PermissionsInputField from "./PermissionsInputField.vue";
 
+import "vue-multiselect/dist/vue-multiselect.min.css";
+import VueObserveVisibility from "vue-observe-visibility";
+
+Vue.use(VueObserveVisibility);
 Vue.use(BootstrapVue);
 
 export default {
@@ -99,15 +92,20 @@ export default {
         },
     },
     components: {
-        Multiselect,
+        PermissionsInputField,
     },
     data() {
         return {
-            permissisons: undefined,
+            permissions: undefined,
             folder: undefined,
             is_admin: undefined,
-            options: { roles: [] },
             value: null,
+            add_ids: [],
+            modify_ids: [],
+            manage_ids: [],
+            add_type: "add_type",
+            manage_type: "manage_type",
+            modify_type: "moddify_type",
         };
     },
     created() {
@@ -117,27 +115,45 @@ export default {
         this.is_admin = Galaxy.user.attributes.is_admin;
 
         this.services.getFolderPermissions(this.folder_id).then((response) => {
-            this.permissisons = response;
+            this.permissions = response;
         });
         this.services.getFolder(this.folder_id).then((response) => {
             this.folder = response;
         });
-        this.getSelectOptions();
     },
+
     methods: {
-        getSelectOptions() {
-            this.services.getSelectOptions(this.folder_id, true, 1).then((response) => {
-                console.log(response)
-                if (this.options.page > 1) {
-                    this.options.roles.concat(response.roles);
-                } else {
-                    this.options = response;
-                }
-            });
-        },
         getParentLink() {
             return `${this.root}library/folders/${this.folder.parent_id}`;
         },
+        setUserPermissionsPreferences(ids, type) {
+            switch (type) {
+                case "manage":
+                    this.manage_ids = ids;
+                    break;
+                case "add":
+                    this.add_ids = ids;
+                    break;
+                case "modify":
+                    this.modify_ids = ids;
+                    break;
+            }
+        },
+        postPermissions() {
+            this.services.setPermissions(
+                this.add_ids,
+                this.manage_ids,
+                this.modify_ids,
+                (fetched_permissions) => {
+                    Toast.success("Permissions saved.");
+                    this.permissions = fetched_permissions;
+                },
+                (error) => {
+                    Toast.error("An error occurred while attempting to set folder permissions.");
+                    console.error(error);
+                }
+            );
+        },
     },
 };
 </script>

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

@@ -0,0 +1,85 @@
+<template>
+    <div v-if="roles.length > 0">
+        <multiselect
+            v-model="value"
+            :options="roles"
+            :clear-on-select="true"
+            :preserve-search="true"
+            :multiple="true"
+            label="name"
+            track-by="id"
+            @input="valueChanged"
+        >
+            <template slot="afterList">
+                <div v-observe-visibility="reachedEndOfList" v-if="hasMorePages">
+                    <span class="spinner fa fa-spinner fa-spin fa-1x" />
+                </div>
+            </template>
+        </multiselect>
+    </div>
+</template>
+
+<script>
+import Multiselect from "vue-multiselect";
+import { Services } from "./services";
+
+export default {
+    props: {
+        folder_id: {
+            type: String,
+            required: true,
+        },
+        type: {
+            type: String,
+            required: true,
+        },
+    },
+    components: {
+        Multiselect,
+    },
+    data() {
+        return {
+            permissions: undefined,
+            folder: undefined,
+            is_admin: undefined,
+            options: undefined,
+            value: null,
+            page: 1,
+            page_limit: 10,
+            roles: [],
+        };
+    },
+    created() {
+        this.services = new Services({ root: this.root });
+
+        this.getSelectOptions(this.page);
+    },
+    computed: {
+        hasMorePages() {
+            return this.page * this.page_limit < this.options.total;
+        },
+    },
+    methods: {
+        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);
+            });
+        },
+        reachedEndOfList(reached) {
+            if (reached) {
+                this.getSelectOptions(this.page++);
+            }
+        },
+        valueChanged() {
+            this.$emit("input", this.value, this.type);
+        },
+    },
+};
+</script>
+
+<style scoped>
+.spinner {
+    text-align: center;
+}
+</style>

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

@@ -25,8 +25,7 @@ export class Services {
             rethrowSimple(e);
         }
     }
-    async getSelectOptions(id, is_library_access, page, query) {
-        const page_limit = 10;
+    async getSelectOptions(id, is_library_access, page, page_limit, query) {
         const url = `${this.root}api/folders/${id}/permissions?scope=available&is_library_access=${is_library_access}&page_limit=${page_limit}&page=${page}`;
         try {
             const response = await axios.get(url);
@@ -35,4 +34,23 @@ export class Services {
             rethrowSimple(e);
         }
     }
+    async setPermisions(access_ids, 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);
+
+        axios({
+            method: "post",
+            url: "`${getAppRoot()}api/libraries/${self.id}/permissions?action=set_permissions`",
+            data: formData,
+            headers: { "Content-Type": "multipart/form-data" },
+        })
+            .then(function (response) {
+                onSuccess(response);
+            })
+            .catch((response) => {
+                onError(response);
+            });
+    }
 }