maintain anchor point when tree changes (#807)

* maintain anchor point when tree changes

frontend/src/api/datamanager.js

@@ -188,3 +188,33 @@ export const deleteByQuery = (ids, parentId) => {
   })
 }
 
+export const saveTreeView = (tree) => { 
+  return axios({
+    url: '/api/tree',
+    method: 'POST',
+    data: { tree }
+  })
+}
+
+export const getTreeView = () => { 
+  return axios({
+    url: '/api/tree',
+    method: 'GET'
+  })
+}
+
+export const saveTreeViewOpenNodes = (openNodes) => { 
+  return axios({
+    url: '/api/tree/open-nodes',
+    method: 'POST',
+    data: { openNodes }
+  })
+}
+
+export const getTreeViewOpenNodes = () => { 
+  return axios({
+    url: '/api/tree/open-nodes',
+    method: 'GET'
+  })
+}
+

frontend/src/components/DocumentTree.vue

@@ -15,6 +15,7 @@
       hoverable
 
       :open="groupListOpenNode"
+      item-key="id"
 
       style="padding-left:0px"
     >
@@ -145,6 +146,7 @@ export default {
     resetGroupListOpenNode (payload) {
       for (const node of this.$store.state.dataManager.groupListOpenNode) {
         this.$store.commit('deleteGroupListOpenNode', node.id)
+        this.$store.dispatch('saveTreeViewOpenNodes', this.$store.state.dataManager.groupListOpenNode)
       }
       for (const parent of payload.parent) {
         this.$store.commit('addGroupListOpenNode', parent.id)

frontend/src/components/DocumentTreeNode.vue

@@ -58,7 +58,7 @@
 
         <v-btn
           icon
-          @click="changeMenuStatus"
+          @click="changeMenuStatus(data, $event)"
           class="mr-1"
           v-show="isNodeEditable"
         >
@@ -174,18 +174,21 @@ export default {
       this.$store.commit('setDeleteDialogSource', 'single')
       this.$store.commit('setIsShownDeleteDialog', true)
     },
-    changeMenuStatus (e) {
+    changeMenuStatus (data, e) {
       e.preventDefault()
+      this.$store.commit('setFocusedLeaf', data)
       this.$store.commit('setIsShownNodeMenu', true)
       this.$store.commit('setShownNodeMenuPosition', {'x': e.clientX, 'y': e.clientY})
     },
     onToggleStatusChange () {
       if (this.isNodeOpen) {
         this.$store.commit('deleteGroupListOpenNode', this.data.id)
+        this.$store.dispatch('saveTreeViewOpenNodes', this.$store.state.dataManager.groupListOpenNode)
         return
       } 
       if (!this.isLoadTreeAsync) {
         this.$store.commit('addGroupListOpenNode', this.data.id)
+        this.$store.dispatch('saveTreeViewOpenNodes', this.$store.state.dataManager.groupListOpenNode)
         return
       }
       if (this.isLoading) {
@@ -198,6 +201,8 @@ export default {
           this.data.children = response.data.data
           this.isLoading = false
           this.$store.commit('addGroupListOpenNode', this.data.id)
+          this.$store.dispatch('saveTreeView', this.$store.state.dataManager.treeData)
+          this.$store.dispatch('saveTreeViewOpenNodes', this.$store.state.dataManager.groupListOpenNode)
         })
         .catch(error => {
           this.$bus.$emit('msg.error', 'Load group ' + this.data.name + ' children error: ' + error.data.message)
@@ -207,6 +212,9 @@ export default {
       if (!this.editable) {
         return
       }
+      this.$store.commit('setFocusedLeaf', this.data)
+      this.$store.dispatch('saveTreeViewOpenNodes', this.$store.state.dataManager.groupListOpenNode)
+      this.$store.dispatch('saveTreeView', this.$store.state.dataManager.treeData)
       this.$store.commit('setFocusNodeInfo', this.data)
       if (this.data.type === 'group') {
         this.$store.dispatch('loadGroupDetail', this.data)

frontend/src/components/DocumentTreeNodeMenu.vue

@@ -154,6 +154,8 @@ export default {
     },
     onTreeNodeCut () {
       this.$store.dispatch('cutGroupOrData', this.data)
+      let targetNode = this.findNode(this.$store.state.dataManager.treeData, this.data.parent_id)
+      targetNode.children = targetNode.children.filter(item => item.id != this.data.id)
     },
     onTreeNodeCopy () {
       this.$store.dispatch('copyGroupOrData', this.data)
@@ -166,7 +168,26 @@ export default {
         this.$store.commit('setIsShownDuplicateDialog', true)
         return
       }
-      this.$store.dispatch('duplicateGroupOrData', this.data)
+      let targetNode = this.findNode(this.$store.state.dataManager.treeData, this.data.parent_id)
+      this.$store.dispatch('duplicateGroupOrData', {
+        data: this.data,
+        targetTreeNode: targetNode
+      })
+    },
+    findNode (tree, parent_id) { 
+      if (!tree) { return null}
+      for (let node of tree) { 
+        if (node.id == parent_id) { 
+          return node
+        }
+        if (!this.$store.state.dataManager.groupListOpenNode.includes(node.id)) { 
+          continue
+        }
+        let result = this.findNode(node.children, parent_id)
+        if (result) {
+          return result
+        }
+      }
     },
     onTreeNodeAddGroup () {
       this.$store.commit('setIsShownCreateDialog', true)

frontend/src/store/datamanager.js

@@ -6,7 +6,7 @@ export default {
   state: {
     title: 'Mock Data',
     treeSearchStr: '',
-    groupList: [],
+    treeData: [],
     conflictInfo: null,
     isLoadConflictInfo: false,
     groupListOpenNode: [],
@@ -34,7 +34,6 @@ export default {
     isLabelDisplay: true,
     isDisplayConfiguration: false,
     isLoadTreeAsync: false,
-    isReloadTreeWhenUpdate: false,
     undisplayedKey: ['children', 'type', 'parent_id', 'abs_parent_path', 'parent', 'link'],
     undeletableKey: ['id', 'rule', 'name', 'label', 'category', 'super_by'],
     uneditableKey: ['id', 'rule', 'super_by'],
@@ -43,6 +42,7 @@ export default {
     treeUndeletableId: [],
     temporaryMockDataList: [],
     tempGroupId: 'tmp_group',
+    focusedLeaf: {}
   },
   mutations: {
     setTitle (state, title) {
@@ -51,8 +51,11 @@ export default {
     setTreeSearchStr (state, treeSearchStr) {
       state.treeSearchStr = treeSearchStr
     },
-    setGroupList (state, groupList) {
-      state.groupList = groupList
+    setTreeData (state, treeData) {
+      state.treeData = treeData
+    },
+    setFocusedLeaf (state, focusedLeaf) {
+      state.focusedLeaf = focusedLeaf
     },
     setConflictInfo (state, conflictInfo) {
       state.conflictInfo = conflictInfo
@@ -161,9 +164,6 @@ export default {
     setUndisplayedKey (state, undisplayedKey) {
       state.undisplayedKey = undisplayedKey
     },
-    setIsReloadTreeWhenUpdate (state, isReloadTreeWhenUpdate) {
-      state.isReloadTreeWhenUpdate = isReloadTreeWhenUpdate
-    },
     concatUndisplayedKey (state, undisplayedKey) {
       state.undisplayedKey = state.undisplayedKey.concat(undisplayedKey)
     },
@@ -193,6 +193,40 @@ export default {
     },
   },
   actions: {
+    saveTreeView ({ }, payload) { 
+      api.saveTreeView(payload)
+        .then(response => {
+        })
+        .catch(error => {
+          bus.$emit('msg.error', 'Save treeview failed: ' + error.data.message)
+        })
+    },
+    getTreeView ({ commit }) { 
+      api.getTreeView()
+        .then(response => {
+          commit('setTreeData', response.data.data)
+        })
+        .catch(error => {
+          bus.$emit('msg.error', 'Get treeview failed: ' + error.data.message)
+        })
+    },
+    saveTreeViewOpenNodes ({ }, payload) { 
+      api.saveTreeViewOpenNodes(payload)
+        .then(response => {
+        })
+        .catch(error => {
+          bus.$emit('msg.error', 'Save treeview openNodes failed: ' + error.data.message)
+        })
+    },
+    getTreeViewOpenNodes ({ commit }) { 
+      api.getTreeViewOpenNodes()
+        .then(response => {
+          commit('setGroupListOpenNode', response.data.data)
+        })
+        .catch(error => {
+          bus.$emit('msg.error', 'Get treeview openNodes failed: ' + error.data.message)
+        })
+    },
     loadDataMap ({ state, commit }) {
       return new Promise((resolve, reject) => {
         setTimeout(() => {
@@ -201,18 +235,18 @@ export default {
           if (state.isLoadTreeAsync) {
             api.getGroupMap({labels: state.dataListSelectedLabel})
               .then(response => {
-                commit('setGroupList', [response.data.data])
+                commit('setTreeData', [response.data.data])
                 commit('concatTreeUndeletableId', response.data.data.id)
 
                 api.getGroupChildren(response.data.data.id)
                   .then(r => {
-                    state.groupList[0].children = []
-                    state.groupList[0].children.push(...r.data.data)
+                    state.treeData[0].children = []
+                    state.treeData[0].children.push(...r.data.data)
                     commit('addGroupListOpenNode', response.data.data.id)
                     commit('setIsLoading', false)
                   })
                   .catch(error => {
-                    bus.$emit('msg.error', 'Load group ' + state.groupList[0].name + ' children error: ' + error)
+                    bus.$emit('msg.error', 'Load group ' + state.treeData[0].name + ' children error: ' + error)
                     commit('setIsLoading', false)
                   })
 
@@ -226,7 +260,7 @@ export default {
             api.getGroupMap({labels: state.dataListSelectedLabel})
               .then(response => {
                 commit('addGroupListOpenNode', response.data.data.id)
-                commit('setGroupList', [response.data.data])
+                commit('setTreeData', [response.data.data])
                 commit('concatTreeUndeletableId', response.data.data.id)
                 commit('setIsLoading', false)
               })
@@ -260,11 +294,8 @@ export default {
     saveDataDetail ({ state, commit, dispatch }, payload) {
       api.updateData(payload)
         .then(response => {
+          state.focusedLeaf.name = payload.name
           dispatch('loadDataDetail', payload)
-          if (state.isReloadTreeWhenUpdate) {
-            dispatch('loadDataMap')
-            commit('setIsReloadTreeWhenUpdate', false)
-          }
           bus.$emit('msg.success', 'Data ' + payload.name + ' update!')
         })
         .catch(error => {
@@ -275,7 +306,7 @@ export default {
       if (groupName) {
         api.createGroup(groupName, parentId)
           .then(response => {
-            dispatch('loadDataMap')
+            dispatch('getTreeView')
             bus.$emit('msg.success', 'Group ' + groupName + ' created!')
           })
           .catch(error => {
@@ -289,18 +320,10 @@ export default {
       bus.$emit('msg.loading', 'Updating group ' + payload.name + ' ...')
       api.updateGroup(payload.id, payload)
         .then(response => {
-          if (state.isReloadTreeWhenUpdate) {
-            dispatch('loadDataMap')
-            dispatch('loadDataLabel')
-            commit('setIsReloadTreeWhenUpdate', false)
-          }
+          state.focusedLeaf.name = payload.name
+          commit('setFocusNodeInfo', response.data.message)
           dispatch('loadGroupDetail', payload)
-          bus.$emit('msg.destroy')
-          if (response.data.message && response.data.message.length > 0) {
-            bus.$emit('msg.info', response.data.message)
-          } else {
-            bus.$emit('msg.success', 'Group ' + payload.name + ' update!')
-          }
+          bus.$emit('msg.success', 'Group ' + payload.name + ' update!')
         })
         .catch(error => {
           bus.$emit('msg.error', 'Group ' + payload.name + ' update error: ' + error.data.message)
@@ -419,31 +442,45 @@ export default {
           bus.$emit('msg.error', payload.type + ' ' + payload.name + ' copy error: ' + error.data.message)
         })
     },
-    pasteGroupOrData ({ commit, dispatch }, payload) {
+    pasteGroupOrData ({ state, commit, dispatch }, payload) {
       bus.$emit('msg.loading', `Pasting ${payload.type} ${payload.name} ...`)
       api.pasteGroupOrData(payload.id)
         .then(response => {
           commit('addGroupListOpenNode', payload.id)
-          dispatch('loadDataMap')
-          bus.$emit('msg.destroy')
-          bus.$emit('msg.success', payload.type + ' ' + payload.name + ' paste success')
+          api.getGroupChildren(payload.id)
+            .then(response => {
+              state.focusedLeaf.children = response.data.data
+              commit('addGroupListOpenNode', payload.id)
+            })
+            .catch(error => {
+              bus.$emit('msg.error', 'Load group ' + payload.name + ' children error: ' + error.data.message)
+            })
+            .finally(() => { 
+              bus.$emit('msg.destroy')
+              bus.$emit('msg.success', payload.type + ' ' + payload.name + ' paste success')
+            })
         })
         .catch(error => {
           bus.$emit('msg.error', payload.type + ' ' + payload.name + ' paste error: ' + error.data.message)
         })
     },
-    duplicateGroupOrData ({ commit, dispatch }, payload) {
-      bus.$emit('msg.loading', 'Duplicating group ' + payload.name + ' ...')
-      api.duplicateGroupOrData(payload.id)
+    duplicateGroupOrData ({ state, commit, dispatch }, payload) {
+      bus.$emit('msg.loading', 'Duplicating group ' + payload.data.name + ' ...')
+      api.duplicateGroupOrData(payload.data.id)
         .then(response => {
-          commit('addGroupListOpenNode', payload.parent_id)
-          commit('addGroupListOpenNode', response.data.id)
-          dispatch('loadDataMap')
+          api.getGroupChildren(payload.data.parent_id)
+            .then(_response => {
+              payload.targetTreeNode.children = _response.data.data
+              commit('addGroupListOpenNode', payload.data.parent_id)
+            })
+            .catch(error => {
+              bus.$emit('msg.error', 'Load group ' + payload.data.name + ' children error: ' + error.data)
+            })
           bus.$emit('msg.destroy')
           bus.$emit('msg.info', response.data.message)
         })
         .catch(error => {
-          bus.$emit('msg.error', payload.type + ' ' + payload.name + ' duplicate error: ' + error.data.message)
+          bus.$emit('msg.error', payload.data.type + ' ' + payload.data.name + ' duplicate error: ' + error.data.message)
         })
     },
     importSnapshot ({ state, commit, dispatch }, snapshotId) {
@@ -468,10 +505,12 @@ export default {
           bus.$emit('msg.error', 'Load snapshot information error: ' + err.data.message)
         })
     },
-    deleteByQuery ({ state, commit }, payload) {
+    deleteByQuery ({ state, commit, dispatch }, payload) {
       bus.$emit('msg.loading', 'Deleting ' + payload.length + ' items ...')
       api.deleteByQuery(payload)
         .then(_ => {
+          dispatch('getTreeView')
+          dispatch('getTreeViewOpenNodes')
           commit('setFocusNodeInfo', {})
           commit('setDeleteNode', [])
           commit('setSelectedNode', new Set())

frontend/src/store/inspector.js

@@ -171,7 +171,6 @@ export default {
       api.saveSelectedFlow(state.selectedIds)
         .then(response => {
           bus.$emit('msg.success', state.selectedIds.length + ' flow saved!')
-          dispatch('loadDataMap')
           commit('clearSelectedFlows')
           commit('clearSelectedId')
         })

frontend/src/views/datamanager/DataDetail.vue

@@ -31,9 +31,6 @@ export default {
     DataDetailFolder
   },
   computed: {
-    groupDetail () {
-      return this.$store.state.dataManager.groupDetail
-    },
     nodeInfo () {
       return this.$store.state.dataManager.focusNodeInfo
     },