Merge pull request #7196 from wandji20/wb-SCI-10345

Add option to reload navigator and all expanded children [SCI-10345]

app/javascript/packs/vue/navigation/navigator.js

@@ -8,7 +8,8 @@ function addNavigationNavigatorContainer() {
     data() {
       return {
         reloadCurrentLevel: false,
-        reloadChildrenLevel: false
+        reloadChildrenLevel: false,
+        reloadExpandedChildrenLevel: false
       }
     },
     created() {
@@ -25,6 +26,14 @@ function addNavigationNavigatorContainer() {
 
         // refresh action toolbar width on navigator toggle, take into account transition time of .4s
         if (window.actionToolbarComponent) setTimeout(window.actionToolbarComponent.setWidth, 401);
+      },
+      reloadNavigator(withExpandedChildren = false) {
+        this.reloadCurrentLevel = true;
+        if (withExpandedChildren) {
+          this.reloadExpandedChildrenLevel = true;
+        } else {
+          this.reloadChildrenLevel = true;
+        }
       }
     },
     watch: {
@@ -41,6 +50,13 @@ function addNavigationNavigatorContainer() {
             this.reloadChildrenLevel = false;
           });
         }
+      },
+      reloadExpandedChildrenLevel() {
+        if (this.reloadExpandedChildrenLevel) {
+          this.$nextTick(() => {
+            this.reloadExpandedChildrenLevel = false;
+          });
+        }
       }
     }
   });

app/javascript/vue/navigation/navigator.vue

@@ -30,6 +30,7 @@
                       :reloadCurrentLevel="reloadCurrentLevel"
                       :paddingLeft="0"
                       :reloadChildrenLevel="reloadChildrenLevel"
+                      :reloadExpandedChildrenLevel="reloadExpandedChildrenLevel"
                       :archived="archived" />
       </perfect-scrollbar>
     </div>
@@ -62,7 +63,8 @@ export default {
   },
   props: {
     reloadCurrentLevel: Boolean,
-    reloadChildrenLevel: Boolean
+    reloadChildrenLevel: Boolean,
+    reloadExpandedChildrenLevel: Boolean
   },
   computed: {
     sortedMenuItems() {

app/javascript/vue/navigation/navigator_item.vue

@@ -33,6 +33,7 @@
                     :paddingLeft="24 + paddingLeft"
                     :reloadCurrentLevel="reloadCurrentLevel"
                     :reloadChildrenLevel="reloadChildrenLevel"
+                    :reloadExpandedChildrenLevel="reloadExpandedChildrenLevel"
                     :item="item"
                     :archived="archived" />
     </div>
@@ -52,7 +53,8 @@ export default {
     archived: Boolean,
     paddingLeft: Number,
     reloadCurrentLevel: Boolean,
-    reloadChildrenLevel: Boolean
+    reloadChildrenLevel: Boolean,
+    reloadExpandedChildrenLevel: Boolean
   },
   data() {
     return {
@@ -112,6 +114,11 @@ export default {
         this.loadChildren();
       }
     },
+    reloadExpandedChildrenLevel() {
+      if (this.reloadExpandedChildrenLevel && this.childrenExpanded) {
+        this.loadChildren();
+      }
+    },
     reloadCurrentLevel() {
       if (this.reloadCurrentLevel && this.children.find((item) => item.id == this.currentItemId)) {
         this.loadChildren();

app/javascript/vue/projects/list.vue

@@ -44,18 +44,18 @@
     ref="exportModal"
   ></ConfirmationModal>
   <EditProjectModal v-if="editProject" :userRolesUrl="userRolesUrl"
-                    :project="editProject" @close="editProject = null" @update="updateTable" />
+                    :project="editProject" @close="editProject = null" @update="updateTable(); updateNavigator()" />
   <EditFolderModal v-if="editFolder" :folder="editFolder"
-                   @close="editFolder = null" @update="updateTable" />
+                   @close="editFolder = null" @update="updateTable(); updateNavigator()" />
   <NewProjectModal v-if="newProject" :createUrl="createUrl"
                    :currentFolderId="currentFolderId" :userRolesUrl="userRolesUrl"
-                   @close="newProject = false" @create="updateTable" />
+                   @close="newProject = false" @create="updateTable(); updateNavigator()" />
   <NewFolderModal v-if="newFolder" :createFolderUrl="createFolderUrl"
                   :currentFolderId="currentFolderId" :viewMode="currentViewMode"
-                  @close="newFolder = false" @create="updateTable" />
+                  @close="newFolder = false" @create="updateTable(); updateNavigator()" />
   <MoveModal v-if="objectsToMove" :moveToUrl="moveToUrl"
              :selectedObjects="objectsToMove" :foldersTreeUrl="foldersTreeUrl"
-             @close="objectsToMove = null" @move="updateTable" />
+             @close="objectsToMove = null" @move="updateTable(); updateNavigator(true)" />
   <AccessModal v-if="accessModalParams" :params="accessModalParams"
                @close="accessModalParams = null" @refresh="this.reloadingTable = true" />
 </template>
@@ -305,6 +305,9 @@ export default {
       this.objectsToMove = null;
       this.reloadingTable = true;
     },
+    updateNavigator(withExpanedChildren = false) {
+      window.navigatorContainer.reloadNavigator(withExpanedChildren);
+    },
     async deleteFolder(event, rows) {
       const description = `
         <p>${this.i18n.t('projects.index.modal_delete_folders.description_1_html', { number: rows.length })}</p>

app/views/shared/navigation/_navigator.html.erb

@@ -11,5 +11,6 @@
     @navigator:colapse="toggleNavigatorState(true)"
     :reload-current-level="reloadCurrentLevel"
     :reload-children-level="reloadChildrenLevel"
+    :reload-expanded-children-level="reloadExpandedChildrenLevel"
   />
 </div>