FE: added permission modal

gms-ui/src/api/server/index.js

@@ -95,5 +95,18 @@ export default {
         'Accept': 'application/json',
       }
     });
+  },
+  searchUser (searchInput) {
+    let url = BASE_API_URL + 'users?search=' + searchInput;
+
+    return apiRequest(url, {
+      method: 'GET',
+      cache: 'no-cache',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+      }
+    });
   }
 };

gms-ui/src/components/GroupsPanel.vue

@@ -5,7 +5,7 @@
         <b-form-input placeholder="Search group" v-model="groupFilter" v-on:input="filterGroups"></b-form-input>
       </b-col>
     </b-row>
-    <div id="groups-list">
+    <div id="groups-list" v-if="model.groupsPanel !== null">
       <b-list-group v-for="group in model.groupsPanel.items">
         <b-list-group-item href="#" v-on:click="openGroup(group)">
           <span class="float-left">{{group.groupName}}</span>
@@ -21,7 +21,7 @@
         </b-list-group-item>
       </b-list-group>
     </div>
-    <div class="row">
+    <div class="row" v-if="model.groupsPanel !== null">
       <div class="col-md-9">
         <b-pagination
           v-model="model.groupsPanel.currentPage"

gms-ui/src/components/Main.vue

@@ -7,13 +7,15 @@
         <MembersPanel />
         <PermissionsPanel />
         <template slot="tabs-end">
-          <b-button variant="primary" class="in-tabs-header-btn" v-b-modal.new-group-modal v-if="showAddGroupBtn">Add group</b-button>
+          <b-button variant="primary" class="in-tabs-header-btn" v-if="showAddGroupBtn" v-on:click="openAddGroupModal">Add group</b-button>
           <b-button variant="primary" class="in-tabs-header-btn" v-if="showAddMemberBtn">Add member</b-button>
           <b-button variant="primary" class="in-tabs-header-btn" v-if="showAddCollaboratorBtn">Add collaborator</b-button>
+          <b-button variant="primary" class="in-tabs-header-btn" v-if="showAddPermissionBtn" v-on:click="openAddPermissionModal">Add permission</b-button>
         </template>
       </b-tabs>
     </b-card>
     <NewGroupModal />
+    <AddPermissionModal />
   </div>
 </template>
 
@@ -23,6 +25,7 @@ import GroupsPanel from './GroupsPanel.vue'
 import MembersPanel from './MembersPanel.vue'
 import PermissionsPanel from './PermissionsPanel.vue'
 import NewGroupModal from './modals/NewGroupModal.vue'
+import AddPermissionModal from './modals/AddPermissionModal.vue'
 import { mapState } from 'vuex';
 
 export default {
@@ -32,13 +35,15 @@ export default {
     GroupsPanel,
     MembersPanel,
     PermissionsPanel,
-    NewGroupModal
+    NewGroupModal,
+    AddPermissionModal
   },
   computed: mapState({
     model: state => state.model,
     showAddMemberBtn: state => state.model.permissions.includes('ADMIN') && state.input.selectedTab === 'members',
     showAddCollaboratorBtn: state => state.model.permissions.includes('MANAGE_MEMBERS') && state.input.selectedTab === 'members',
-    showAddGroupBtn: state => state.model.permissions.includes('ADMIN') && state.input.selectedTab === 'groups'
+    showAddGroupBtn: state => state.model.permissions.includes('ADMIN') && state.input.selectedTab === 'groups',
+    showAddPermissionBtn: state => state.model.permissions.includes('ADMIN') && state.input.selectedTab === 'permissions'
   }),
   methods: {
     tabChanged: function(tabIndex) {
@@ -59,8 +64,14 @@ export default {
         this.$store.commit('fetchGroupsModel');
       }
     },
-    addMember: function() {
+    openAddGroupModal: function() {
+      this.$bvModal.show('new-group-modal');
+    },
+    openAddMemberModal: function() {
 
+    },
+    openAddPermissionModal: function() {
+      this.$bvModal.show('add-permission-modal');
     }
   }
 }

gms-ui/src/components/MembersPanel.vue

@@ -17,9 +17,9 @@
     </div>
     <div class="text-center" v-if="model.membersPanel !== null">
       <b-pagination
-        v-model="model.membersPanel.paginator.page"
-        :total-rows="model.membersPanel.paginator.totalItems"
-        :per-page="model.membersPanel.paginator.pageSize"
+        v-model="model.membersPanel.page"
+        :total-rows="model.membersPanel.totalItems"
+        :per-page="model.membersPanel.pageSize"
         aria-controls="members-list"
         align="center"
         v-on:change="setPage"

gms-ui/src/components/modals/AddPermissionModal.vue

+<template>
+  <b-modal id="add-permission-modal" title="Add permission" ok-title="Add" @ok="addPermission">
+    <SearchUser />
+  </b-modal>
+</template>
+
+<script>
+import client from 'api-client';
+import SearchUser from './SearchUser.vue'
+
+export default {
+  name: 'AddPermissionModal',
+  components: {
+    SearchUser
+  },
+  data: function() {
+    return {
+
+    }
+  },
+  methods: {
+    addPermission: function() {
+
+    }
+  }
+};
+</script>

gms-ui/src/components/modals/ConfirmDeleteGroupModal.vue

 <template>
   <b-modal id="confirm-delete-group-modal" title="Confirm action" ok-title="Delete" @ok="deleteGroup" ok-variant="danger">
-    <b-form inline>
     <p v-if="groupToDelete">Are you sure that you want to delete the group <strong>{{groupToDelete.groupName}}</strong>?</p>
-    </b-form>
   </b-modal>
 </template>
 

gms-ui/src/components/modals/SearchUser.vue

+<template>
+  <b-form inline>
+    <label class="w-25" for="user-input">Search:</label>
+    <b-form-input v-model="searchInput"
+                  id="user-input"
+                  class="w-75 mb-2"
+                  aria-describedby="user-input-feedback"
+                  v-on:input="searchUser"
+                  placeholder="User">
+    </b-form-input>
+    <label class="w-25" for="user-input" v-if="users.length > 0">Selected user:</label>
+    <b-form-select v-model="selectedUser" :options="users" class="w-75" v-if="users.length > 0"></b-form-select>
+    <div class="w-25"></div>
+    <b-form-group label="Permissions:" v-if="users.length > 0" class="w-75 mt-3">
+      <b-form-radio-group
+        id="permissions-radio-group"
+        v-model="permission">
+        <b-form-radio value="ADMIN">Admin</b-form-radio>
+        <b-form-radio value="MANAGE_MEMBERS">Manage members</b-form-radio>
+      </b-form-radio-group>
+    </b-form-group>
+  </b-form>
+</template>
+
+<script>
+import client from 'api-client';
+
+export default {
+  name: 'SearchUser',
+  data: function() {
+    return {
+      searchInput: null,
+      users: [],
+      selectedUser: null,
+      permission: null
+    }
+  },
+  methods: {
+    searchUser: function() {
+      client.searchUser(this.searchInput)
+        .then(res => {
+          // empty users array
+          this.users.splice(0, this.users.length);
+          // fill users array
+          for (let i = 0; i < res.length; i++) {
+            let user = res[i];
+            this.users.push({
+              value: user.id,
+              text: user.displayName
+            });
+          }
+          if (this.users.length > 0) {
+            this.selectedUser = this.users[0].value;
+          }
+        });
+    }
+  }
+};
+</script>