From 417a88f5384ef93a9b7614c83177e164dae52509 Mon Sep 17 00:00:00 2001
From: Sonia Zorba <sonia.zorba@inaf.it>
Date: Tue, 6 Aug 2019 10:18:46 +0200
Subject: [PATCH] FE: added permission modal
---
gms-ui/src/api/server/index.js | 13 ++++
gms-ui/src/components/GroupsPanel.vue | 4 +-
gms-ui/src/components/Main.vue | 19 ++++--
gms-ui/src/components/MembersPanel.vue | 6 +-
.../components/modals/AddPermissionModal.vue | 27 +++++++++
.../modals/ConfirmDeleteGroupModal.vue | 4 +-
gms-ui/src/components/modals/SearchUser.vue | 59 +++++++++++++++++++
7 files changed, 120 insertions(+), 12 deletions(-)
create mode 100644 gms-ui/src/components/modals/AddPermissionModal.vue
create mode 100644 gms-ui/src/components/modals/SearchUser.vue
diff --git a/gms-ui/src/api/server/index.js b/gms-ui/src/api/server/index.js
index 00c8879..b5f321a 100644
--- a/gms-ui/src/api/server/index.js
+++ b/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',
+ }
+ });
}
};
diff --git a/gms-ui/src/components/GroupsPanel.vue b/gms-ui/src/components/GroupsPanel.vue
index bc37ed9..ad0ee16 100644
--- a/gms-ui/src/components/GroupsPanel.vue
+++ b/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"
diff --git a/gms-ui/src/components/Main.vue b/gms-ui/src/components/Main.vue
index aa04da6..f7b8791 100644
--- a/gms-ui/src/components/Main.vue
+++ b/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');
}
}
}
diff --git a/gms-ui/src/components/MembersPanel.vue b/gms-ui/src/components/MembersPanel.vue
index 1b83ea7..3e28e93 100644
--- a/gms-ui/src/components/MembersPanel.vue
+++ b/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"
diff --git a/gms-ui/src/components/modals/AddPermissionModal.vue b/gms-ui/src/components/modals/AddPermissionModal.vue
new file mode 100644
index 0000000..7fccb7e
--- /dev/null
+++ b/gms-ui/src/components/modals/AddPermissionModal.vue
@@ -0,0 +1,27 @@
+<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>
diff --git a/gms-ui/src/components/modals/ConfirmDeleteGroupModal.vue b/gms-ui/src/components/modals/ConfirmDeleteGroupModal.vue
index 05d2183..e563c53 100644
--- a/gms-ui/src/components/modals/ConfirmDeleteGroupModal.vue
+++ b/gms-ui/src/components/modals/ConfirmDeleteGroupModal.vue
@@ -1,8 +1,6 @@
<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>
+ <p v-if="groupToDelete">Are you sure that you want to delete the group <strong>{{groupToDelete.groupName}}</strong>?</p>
</b-modal>
</template>
diff --git a/gms-ui/src/components/modals/SearchUser.vue b/gms-ui/src/components/modals/SearchUser.vue
new file mode 100644
index 0000000..391a54b
--- /dev/null
+++ b/gms-ui/src/components/modals/SearchUser.vue
@@ -0,0 +1,59 @@
+<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>
--
GitLab