Added button for updating current group

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>
+    &nbsp;
+    <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;

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);

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,

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 => {

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;