Added some checks to avoid duplicated AJAX calls on tab change

gms-ui/src/components/GroupsBreadcrumb.vue

@@ -7,7 +7,7 @@
     </li>
   </ol>
   <span id="breadcrumb-buttons">
-    <a href="#" v-on:click.stop.prevent="openEditGroupModal(currentGroup)" title="Edit" v-if="currentGroup && currentGroup.groupId !== 'ROOT'">
+    <a href="#" v-on:click.stop.prevent="openEditGroupModal(currentGroup)" title="Edit" v-if="currentGroup && isAdmin && currentGroup.groupId !== 'ROOT'">
       <font-awesome-icon icon="edit"></font-awesome-icon>
     </a>
     &nbsp;

gms-ui/src/components/TopMenu.vue

@@ -36,11 +36,12 @@ export default {
   }),
   methods: {
     showMainPage() {
-      if (this.$router.currentRoute.path === '/') {
+      if (this.$store.state.input.selectedGroupId !== 'ROOT') {
         this.$store.dispatch('changeBreadcrumb', 'ROOT');
       } else {
-        this.$router.push('/', () => {});
+        this.$store.dispatch('changeTab', 0);
       }
+      this.$router.push('/', () => {});
     },
     genericSearch() {
       this.$router.push({ path: '/search', query: { q: this.input.genericSearch.filter } }, () => {});

gms-ui/src/store.js

@@ -32,6 +32,7 @@ export default new Vuex.Store({
       paginatorPageSize: 20,
       paginatorPage: 1,
       tabIndex: 0,
+      previousTabIndex: null,
       searchFilter: '',
       genericSearch: {
         filter: '',
@@ -129,8 +130,20 @@ export default new Vuex.Store({
       client.search(state.input)
         .then(results => commit('displaySearchResults', results));
     },
+    /**
+     * tabIndex parameter is equal to state.input.tabIndex when this method
+     * is called as a result of the @input event on the b-tabs component.
+     * For this reason the additional field state.input.previousTabIndex is used
+     * to check if the tab index changed and perform the AJAX calls only when
+     * they are really needed.
+     */
     changeTab({ commit, state }, tabIndex) {
+      let skip = tabIndex === state.input.previousTabIndex;
+      state.input.previousTabIndex = tabIndex;
       state.input.tabIndex = tabIndex;
+      if (skip) {
+        return;
+      }
       // reset paginator
       state.input.paginatorPage = 1;
       switch (tabIndex) {
@@ -155,6 +168,7 @@ export default new Vuex.Store({
         client.fetchGroupsTab(state.input)
           .then(model => {
             commit('updateGroups', model);
+            dispatch('changeTab', 0);
           });
       } else {
         dispatch('changeTab', 0);
@@ -171,14 +185,15 @@ export default new Vuex.Store({
       let input = state.input;
       input.selectedGroupId = groupId;
       input.searchFilter = '';
+      input.paginatorPage = 1;
+      input.tabIndex = 0;
+      input.previousTabIndex = 0;
       client.fetchGroupsTab(input)
         .then(model => {
           commit('updateGroups', model);
           if (model.leaf) {
             // If there are no subgroups show the members panel
             dispatch('changeTab', 1);
-          } else {
-            dispatch('changeTab', 0);
           }
           router.push('/', () => {});
         });

gms/src/main/resources/static/help/help-admin.html

@@ -54,7 +54,7 @@
                 <img src="img/gms-admin-add-group-modal.jpg" alt="" class="mb-3" />
             </p>
 
-            <p>If you select the "allow child groups" checkbox it will be possible to create sub-groups inside it.
+            <p>If you select the "allow child groups" checkbox it will be possible to create sub-groups inside the group.
                 You can change this setting in any moment clicking on the "Edit group" button (pencil icon
                 <img src="img/pencil-icon.jpg" alt="" />).</p>