Completed modal for updating groupRead and groupWrite properties

vospace-ui-frontend/src/App.vue

@@ -70,7 +70,7 @@ export default {
   right: 0;
   left: 0;
   background-color: rgba(255, 255, 255, 0.7);
-  z-index: 1000;
+  z-index: 100000;
 }
 
 .spinner-wrapper {

vospace-ui-frontend/src/api/mock/data/sharing.json

+{
+  "people": ["mario.rossi", "bianca.verdi"],
+  "groups": ["group1", "group2", "group3"]
+}

vospace-ui-frontend/src/api/mock/index.js

@@ -4,6 +4,7 @@ import folder2 from './data/nodes/folder2';
 import job from './data/job';
 import jobs from './data/jobs';
 import user from './data/user';
+import sharing from './data/sharing';
 
 import store from '../../store';
 
@@ -59,6 +60,12 @@ export default {
     return fetch({});
   },
   keepalive() {
+    return fetch({}, false);
+  },
+  getSharingInfo() {
+    return fetch(sharing);
+  },
+  setNodeGroups() {
     return fetch({});
   }
 }

vospace-ui-frontend/src/api/server/index.js

@@ -152,5 +152,28 @@ export default {
         'Cache-Control': 'no-cache'
       }
     }, false, false);
+  },
+  getSharingInfo() {
+    let url = BASE_API_URL + 'sharing';
+    return apiRequest({
+      method: 'GET',
+      url: url,
+      withCredentials: true,
+      headers: {
+        'Cache-Control': 'no-cache'
+      }
+    }, true, true);
+  },
+  setNodeGroups(data) {
+    let url = BASE_API_URL + 'sharing';
+    return apiRequest({
+      method: 'POST',
+      url: url,
+      withCredentials: true,
+      headers: {
+        'Cache-Control': 'no-cache'
+      },
+      data
+    }, true, true);
   }
 }

vospace-ui-frontend/src/components/modal/ConfirmDeleteModal.vue

 <template>
-<b-modal id="confirm-delete-modal" title="Confirm delete" okTitle="Yes, delete" @ok="deleteNodes" @hidden="reset" ok-variant="danger">
+<b-modal id="confirm-delete-modal" title="Confirm delete" okTitle="Yes, delete" @ok.prevent="deleteNodes" @hidden="reset" ok-variant="danger">
   <p>Do you really want to delete the following nodes?</p>
   <p>
   <ul>
@@ -19,10 +19,7 @@ export default {
     reset() {
       this.$store.commit('setNodesToDelete', []);
     },
-    deleteNodes(event) {
-      // Prevent modal from closing
-      event.preventDefault();
-
+    deleteNodes() {
       this.$store.dispatch('deleteNodes')
         .then(() => {
           this.$bvModal.hide('confirm-delete-modal');

vospace-ui-frontend/src/components/modal/CreateFolderModal.vue

 <template>
-<b-modal id="create-folder-modal" title="Create folder" okTitle="Create" @show="reset" @shown="afterShow" @ok="createFolder">
+<b-modal id="create-folder-modal" title="Create folder" okTitle="Create" @show="reset" @shown="afterShow" @ok.prevent="createFolder">
   <b-form inline>
     <label class="w-25" for="new-folder-name-input">Folder name</label>
     <b-form-input v-model.trim="newFolderName" id="new-folder-name-input" ref="newFolderNameInput" class="w-75" aria-describedby="new-folder-name-input-feedback" :state="newFolderNameState" v-on:input="resetError"
@@ -37,10 +37,7 @@ export default {
     resetError() {
       this.newFolderNameError = null;
     },
-    createFolder(event) {
-      // Prevent modal from closing
-      event.preventDefault();
-
+    createFolder() {
       if (!this.newFolderName) {
         this.newFolderNameError = "Folder name is required";
       } else if (/[<>?":\\/`|'*]/.test(this.newFolderName)) {

vospace-ui-frontend/src/components/modal/ShareInputGroup.vue

+<template>
+<div>
+  <div class="row">
+    <div class="col-2">
+      <label :for="id + '-input'" class="mt-2 float-right"><strong>{{label}}</strong></label>
+    </div>
+    <div class="col">
+      <b-input-group>
+        <b-form-input :list="id + '-list'" :id="id + '-input'" :placeholder="placeholder" v-model="inputValue" @input="resetError()" @keydown.native.enter="addItem()"></b-form-input>
+        <datalist :id="id + '-list'">
+          <option v-for="option in options" v-bind:key="option">{{option}}</option>
+        </datalist>
+        <b-input-group-append>
+          <b-button variant="success" @click="addItem()">{{buttonText}}</b-button>
+        </b-input-group-append>
+      </b-input-group>
+      <span class="text-danger" v-if="inputError">{{inputError}}</span>
+    </div>
+  </div>
+  <div class="row mb-3 mt-1">
+    <div class="col offset-2">
+      <b-badge variant="primary" v-for="value in values" size="lg" v-bind:key="value" class="mr-1">
+        {{value}}
+        <span class="pointer" @click="removeItem(value)">&times;</span>
+      </b-badge>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  props: {
+    id: String,
+    values: Array,
+    options: Array,
+    label: String,
+    placeholder: String,
+    buttonText: String,
+  },
+  data() {
+    return {
+      inputValue: null,
+      inputError: null,
+    }
+  },
+  methods: {
+    addItem() {
+      if (this.options.indexOf(this.inputValue) === -1) {
+        this.inputError = "Please select one of the available values from the list";
+        return;
+      }
+      const index = this.values.indexOf(this.inputValue);
+      if (index === -1) {
+        this.values.push(this.inputValue);
+      }
+      this.inputError = null;
+      this.inputValue = null;
+    },
+    resetError() {
+      this.inputError = null;
+    },
+    removeItem(value) {
+      const index = this.values.indexOf(value);
+      if (index > -1) {
+        this.values.splice(index, 1);
+      }
+    }
+  }
+}
+</script>

vospace-ui-frontend/src/components/modal/ShareModal.vue

 <template>
-<b-modal id="share-modal" :title="'Share ' + node.path" okTitle="Share" @show="reset" @ok="share" size="lg">
+<b-modal id="share-modal" :title="'Share ' + node.path" okTitle="Save" @show="onShow" @ok.prevent="share" size="lg">
   <h5>Read permissions</h5>
-  <div class="row">
-    <div class="col-2">
-      <label for="user-read-input" class="mt-2 float-right"><strong>Users</strong></label>
-    </div>
-    <div class="col">
-      <b-input-group>
-        <b-form-input list="user-read-list" id="user-read-input" placeholder="Search user..."></b-form-input>
-        <datalist id="user-read-list">
-          <option v-for="user in selectableUserRead" v-bind:key="user.id">{{user.label}}</option>
-        </datalist>
-        <b-input-group-append>
-          <b-button variant="success">Add user</b-button>
-        </b-input-group-append>
-      </b-input-group>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col offset-2">
-      <b-badge variant="light" v-for="user in userRead" v-bind:key="user">{{user}}</b-badge>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col-2">
-      <label for="group-read-input" class="mt-2 float-right"><strong>Groups</strong></label>
-    </div>
-    <div class="col">
-      <b-input-group>
-        <b-form-input list="group-read-list" id="group-read-input" placeholder="Search group..."></b-form-input>
-        <datalist id="group-read-list">
-          <option v-for="group in selectableGroupRead" v-bind:key="group">{{group}}</option>
-        </datalist>
-        <b-input-group-append>
-          <b-button variant="success">Add group</b-button>
-        </b-input-group-append>
-      </b-input-group>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col offset-2">
-      <b-badge variant="primary" v-for="group in groupRead" size="lg" v-bind:key="group">
-        {{group}}
-        <span class="pointer" @click="removeItem(groupRead, group)">&times;</span>
-      </b-badge>
-    </div>
-  </div>
+  <ShareInputGroup id="user-read" :values="userRead" :options="people" label="Users" placeholder="Search user..." buttonText="Add user" />
+  <ShareInputGroup id="group-read" :values="groupRead" :options="groups" label="Groups" placeholder="Search group..." buttonText="Add group" />
   <h5 class="mt-3">Write permissions</h5>
-  <b-form inline>
-  </b-form>
+  <ShareInputGroup id="user-write" :values="userWrite" :options="people" label="Users" placeholder="Search user..." buttonText="Add user" />
+  <ShareInputGroup id="group-write" :values="groupWrite" :options="groups" label="Groups" placeholder="Search group..." buttonText="Add group" />
 </b-modal>
 </template>
 
 <script>
+import ShareInputGroup from './ShareInputGroup';
+import client from 'api-client';
+
+function setArray(array, newValues) {
+  array.splice(0, array.length);
+  for (let value of newValues) {
+    array.push(value);
+  }
+}
+
 export default {
+  components: {
+    ShareInputGroup
+  },
   computed: {
     node() { return this.$store.state.nodeToShare; }
   },
   data() {
     return {
-      userReadInput: null,
-      groupReadInput: null,
-      selectableUserRead: [],
-      selectableGroupRead: [],
       groupRead: [],
       userRead: [],
-      userWriteInput: null,
-      groupWriteInput: null,
-      selectableUserWrite: [],
-      selectableGroupWrite: [],
       groupWrite: [],
-      userWrite: []
+      userWrite: [],
+      people: [],
+      groups: []
     }
   },
   methods: {
-    reset() {
+    onShow() {
       this.setGroups(this.userRead, this.groupRead, this.node.groupRead);
       this.setGroups(this.userWrite, this.groupWrite, this.node.groupWrite);
+      client.getSharingInfo()
+        .then(res => {
+          setArray(this.people, res.people);
+          setArray(this.groups, res.groups);
+        });
     },
     setGroups(userArr, groupArr, nodeArr) {
       userArr.splice(0, userArr.length);
@@ -84,25 +53,23 @@ export default {
       for (let group of nodeArr.split(' ')) {
         if (group.startsWith('people.')) {
           userArr.push(group.substring('people.'.length).replaceAll('\\\\', '\\'));
-        } else {
+        } else if (group.trim() !== '') {
           groupArr.push(group.replaceAll('\\\\', '\\'));
         }
       }
     },
-    addItem(arr, value) {
-      const index = arr.indexOf(value);
-      if (index === -1) {
-        arr.push(value);
-      }
-    },
-    removeItem(arr, value) {
-      const index = arr.indexOf(value);
-      if (index > -1) {
-        arr.splice(index, 1);
-      }
-    },
     share() {
-      // TODO
+      client.setNodeGroups({
+        path: this.$store.state.nodeToShare.path,
+        groupRead: this.groupRead,
+        groupWrite: this.groupWrite,
+        userRead: this.userRead,
+        userWrite: this.userWrite
+      }).then(() => {
+        // Reload current path
+        this.$bvModal.hide('share-modal');
+        this.$store.dispatch('setPath', this.$store.state.path);
+      });
     }
   }
 }

vospace-ui-frontend/src/components/modal/UploadFilesModal.vue

 <template>
-<b-modal id="upload-files-modal" title="Upload file" okTitle="Upload" @show="reset" @ok="uploadFiles">
+<b-modal id="upload-files-modal" title="Upload file" okTitle="Upload" @show="reset" @ok.prevent="uploadFiles">
   <b-form-file v-model="files" :multiple="true" :state="fileState" placeholder="Choose your files or drop them here..." drop-placeholder="Drop files here..." @change="resetError"></b-form-file>
   <b-form-invalid-feedback id="upload-file-input-feedback" class="text-right">{{uploadFileError}}</b-form-invalid-feedback>
   <div class="mt-3">Selected files: {{ selectedFiles }}</div>
@@ -39,10 +39,7 @@ export default {
     resetError() {
       this.uploadFileError = null;
     },
-    uploadFiles(event) {
-      // Prevent modal from closing
-      event.preventDefault();
-
+    uploadFiles() {
       if (this.files.length === 0) {
         this.uploadFileError = "Select at least one file";
       } else {