diff --git a/gms-ui/src/components/GroupsBreadcrumb.vue b/gms-ui/src/components/GroupsBreadcrumb.vue index 8911d9792d504016a7bb3ecf6d12f3cdd7de1926..faefa3a0e1977201eec8d16aa9a4e74e158d1994 100644 --- a/gms-ui/src/components/GroupsBreadcrumb.vue +++ b/gms-ui/src/components/GroupsBreadcrumb.vue @@ -6,9 +6,15 @@ <span v-if="group.active">{{group.groupName}}</span> </li> </ol> - <a v-if="currentGroup" :href="'group/status?groupId=' + currentGroup.groupId" :download="currentGroup.groupName + '.csv'" id="csv-status-download" title="Download CSV"> - <font-awesome-icon icon="download"></font-awesome-icon> - </a> + <span id="breadcrumb-buttons"> + <a href="#" v-on:click.stop.prevent="openEditGroupModal(currentGroup)" title="Edit" v-if="currentGroup && currentGroup.groupId !== 'ROOT'"> + <font-awesome-icon icon="edit"></font-awesome-icon> + </a> + + <a v-if="currentGroup" :href="'group/status?groupId=' + currentGroup.groupId" :download="currentGroup.groupName + '.csv'" title="Download CSV"> + <font-awesome-icon icon="download"></font-awesome-icon> + </a> + </span> </nav> </template> @@ -54,6 +60,10 @@ export default { } else { this.$store.dispatch('changeTab', 0); } + }, + openEditGroupModal: function(group) { + group.leaf = this.model.leaf; + this.$parent.$refs.editGroupModal.openEditGroupModal(group, false); } } } @@ -65,7 +75,7 @@ export default { position: relative; } -#csv-status-download { +#breadcrumb-buttons { position: absolute; right: 18px; top: 12px; diff --git a/gms-ui/src/components/GroupsPanel.vue b/gms-ui/src/components/GroupsPanel.vue index b77bcb1ca27a893db4ed2e7df81369eda1f004c1..ff78a2ba5afa582730774a61e224df2765ed7705 100644 --- a/gms-ui/src/components/GroupsPanel.vue +++ b/gms-ui/src/components/GroupsPanel.vue @@ -23,13 +23,11 @@ <p v-if="model.groupsPanel.items.length === 0">No groups</p> </div> <Paginator :paginatedPanel="model.groupsPanel" :onUpdate="updatePagination" :paginatorInput="input" /> - <EditGroupModal ref="editGroupModal" /> <ConfirmRemoveGroupModal ref="confirmRemoveGroupModal" /> </b-tab> </template> <script> -import EditGroupModal from './modals/EditGroupModal.vue'; import ConfirmRemoveGroupModal from './modals/ConfirmRemoveGroupModal.vue'; import Paginator from './Paginator.vue'; import { mapState } from 'vuex'; @@ -39,7 +37,6 @@ import debounce from 'debounce'; // for delaying the input event (search filter) export default { name: 'GroupsPanel', components: { - EditGroupModal, ConfirmRemoveGroupModal, Paginator }, @@ -52,7 +49,7 @@ export default { this.$store.dispatch('openGroup', group.groupId); }, openEditGroupModal: function(group) { - this.$refs.editGroupModal.openEditGroupModal(group); + this.$parent.$parent.$refs.editGroupModal.openEditGroupModal(group, true); }, openRemoveGroupModal: function(group) { this.$refs.confirmRemoveGroupModal.openRemoveGroupModal(group); diff --git a/gms-ui/src/components/Main.vue b/gms-ui/src/components/Main.vue index 189dcac16e56183357a02f03711eb9b068b0aa1f..89bf05cc07acc39630d12efa537889db5253c406 100644 --- a/gms-ui/src/components/Main.vue +++ b/gms-ui/src/components/Main.vue @@ -18,6 +18,7 @@ <AddGroupModal /> <AddMemberModal /> <AddPermissionModal /> + <EditGroupModal ref="editGroupModal" /> </div> </template> @@ -30,6 +31,7 @@ import InvitedRegistrationPanel from './InvitedRegistrationPanel.vue' import AddGroupModal from './modals/AddGroupModal.vue' import AddMemberModal from './modals/AddMemberModal.vue' import AddPermissionModal from './modals/AddPermissionModal.vue' +import EditGroupModal from './modals/EditGroupModal.vue'; import { mapState } from 'vuex'; export default { @@ -42,7 +44,8 @@ export default { InvitedRegistrationPanel, AddGroupModal, AddMemberModal, - AddPermissionModal + AddPermissionModal, + EditGroupModal }, computed: mapState({ model: state => state.model, diff --git a/gms-ui/src/components/modals/EditGroupModal.vue b/gms-ui/src/components/modals/EditGroupModal.vue index 8c3d2deba58bdecf140f34022d3ee4c4329c02c8..b2e3536f65cffe8c84a5f842a6fa722197eecc14 100644 --- a/gms-ui/src/components/modals/EditGroupModal.vue +++ b/gms-ui/src/components/modals/EditGroupModal.vue @@ -2,7 +2,7 @@ <b-modal id="edit-group-modal" title="Edit group" ok-title="Update" @ok="updateGroup"> <b-form inline> <label class="w-25" for="new-group-name-input">Group name:</label> - <b-form-input v-model="newGroupName" id="new-group-name-input" class="w-75" aria-describedby="new-group-name-input-feedback" :state="newGroupNameState" v-on:input="resetError"> + <b-form-input v-model="newGroupName" id="new-group-name-input" class="w-75" aria-describedby="new-group-name-input-feedback" :state="newGroupNameState" v-on:input="resetError" @keydown.native.enter.prevent="updateGroup"> </b-form-input> <b-form-invalid-feedback id="new-group-name-input-feedback" class="text-right">{{newGroupNameError}}</b-form-invalid-feedback> <b-form-checkbox class="mt-3 ml-3" v-model="allowChildGroups">allow child groups</b-form-checkbox> @@ -29,18 +29,20 @@ export default { oldGroupName: '', newGroupName: '', newGroupNameError: '', - allowChildGroups: false + allowChildGroups: false, + reloadChildren: false }; }, methods: { resetError: function() { this.newGroupNameError = null; }, - openEditGroupModal: function(group) { + openEditGroupModal: function(group, reloadChildren) { this.newGroupName = group.groupName; this.groupId = group.groupId; this.allowChildGroups = !group.leaf; this.$bvModal.show('edit-group-modal'); + this.reloadChildren = reloadChildren; }, updateGroup: function(event) { // Prevent modal from closing @@ -58,7 +60,14 @@ export default { client.updateGroup(this.groupId, this.newGroupName, !this.allowChildGroups, this.$store.state.input) .then(res => { - this.$store.commit('updateGroupsPanel', res); + if (this.reloadChildren) { + this.$store.commit('updateGroupsPanel', res); + } else { + this.$store.dispatch('updateCurrentGroup', { + newGroupName: this.newGroupName, + leaf: !this.allowChildGroups + }); + } this.$bvModal.hide('edit-group-modal'); }) .catch(res => { diff --git a/gms-ui/src/store.js b/gms-ui/src/store.js index a0e8e3866f725d60e6473a30d920c4d0f1f61b68..d4026005be31b2064fc94f8f165287f3980b4b23 100644 --- a/gms-ui/src/store.js +++ b/gms-ui/src/store.js @@ -140,6 +140,13 @@ export default new Vuex.Store({ break; } }, + updateCurrentGroup({ dispatch, state }, data) { + state.model.breadcrumbs[state.model.breadcrumbs.length - 1].groupName = data.newGroupName; + state.model.leaf = data.leaf; + if (state.input.tabIndex === 0 && state.model.leaf) { + dispatch('changeTab', 1); + } + }, openGroup({ commit, dispatch, state }, groupId) { let input = state.input; input.selectedGroupId = groupId;