Meituan-Dianping · yumiguan · Jul 15, 2019 · Jul 15, 2019 · Jul 15, 2019 · Jul 15, 2019
diff --git a/frontend/src/api/index.js b/frontend/src/api/index.js
@@ -90,6 +90,14 @@ export const getGroupDetail = (groupId) => {
   })
 }
 
+export const createGroup = (name, parentId) => {
+  return axios({
+    url: '/api/group',
+    method: 'POST',
+    data: { name, 'parent_id': parentId }
+  })
+}
+
 export const deleteGroup = (groupId) => {
   return axios({
     url: '/api/group/' + groupId,
@@ -103,18 +111,18 @@ export const getDataDetail = (dataId) => {
   })
 }
 
-export const deleteData = (dataId) => {
+export const createData = (parentId, data) => {
   return axios({
-    url: '/api/data/' + dataId,
-    method: 'DELETE'
+    url: '/api/data',
+    method: 'POST',
+    data: { data, 'parent_id': parentId }
   })
 }
 
-export const createGroup = (name, parent) => {
+export const deleteData = (dataId) => {
   return axios({
-    url: '/api/mock',
-    method: 'POST',
-    data: { name, parent }
+    url: '/api/data/' + dataId,
+    method: 'DELETE'
   })
 }
 
@@ -155,13 +163,6 @@ export const getDataList = (groupId) => {
   })
 }
 
-export const createData = (groupId, name) => {
-  return axios({
-    url: '/api/mock/' + groupId + '/data',
-    data: { name },
-    method: 'POST'
-  })
-}
 
 //------Notice manager------
 /**

diff --git a/frontend/src/components/DocumentTreeNode.vue b/frontend/src/components/DocumentTreeNode.vue
@@ -1,7 +1,7 @@
 <template>
-  <Row :class="rowClass" @mouseover.native="isMouseOver=true" @mouseout.native="isMouseOver=false" @click.native="onTreeNodeClick(data)">
+  <Row :class="rowClass" @mouseover.native="isMouseOver=true" @mouseout.native="isMouseOver=false" @click.native="onTreeNodeClick">
     <Col :span="isMouseOver?21:24">
-      <b v-if="data.children && data.children.length" @click="onToggleStatusChange(data)">
+      <b v-if="data.children && data.children.length" @click="onToggleStatusChange">
         <Icon v-if="data.open" type="md-arrow-dropdown" class="tree-node-inner-button"/>
         <Icon v-else type="md-arrow-dropright" class="tree-node-inner-button"/>
       </b>
@@ -10,17 +10,22 @@
     </Col>
     <Col :span="isMouseOver?2:0" align="right">
       <Tooltip content="Delete this mock data" placement="bottom-end" :delay="500">
-        <Icon v-show="isMouseOver" type="md-trash" class="tree-node-inner-button" color="#ed4014" @click="onTreeNodeDelete(data)"/>
+        <Icon v-show="isMouseOver" type="md-trash" class="tree-node-inner-button" color="#ed4014" @click.stop="onTreeNodeDelete"/>
       </Tooltip>
-      <Dropdown v-show="isMouseOver" placement="bottom-end">
-        <a href="javascript:void(0)">
-          <Icon type="ios-more" class="tree-node-inner-button"></Icon>
-        </a>
-        <DropdownMenu slot="list" style="min-width:60px">
-          <DropdownItem align="center" @click="onTreeNodeCopy(data)">Copy</DropdownItem>
-          <DropdownItem align="center" @click="onTreeNodePaste(data)" :disabled="true">Paste</DropdownItem>
-        </DropdownMenu>
-      </Dropdown>
+      <span @click.stop="">
+        <Dropdown v-show="isMouseOver" placement="bottom-end" @on-click="onDropdownMenuClick" >
+          <a href="javascript:void(0)">
+            <Icon type="ios-more" class="tree-node-inner-button"></Icon>
+          </a>
+          <DropdownMenu slot="list" style="min-width:60px">
+            <DropdownItem align="center" name="delete">Delete</DropdownItem>
+            <DropdownItem align="center" name="copy">Copy</DropdownItem>
+            <DropdownItem align="center" name="paste" :disabled="hasCopyTarget">Paste</DropdownItem>
+            <DropdownItem align="center" name="addGroup">Add group</DropdownItem>
+            <DropdownItem align="center" name="addData">Add data</DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+      </span>
     </Col>
   </Row>
 </template>
@@ -36,47 +41,75 @@ export default {
     }
   },
   computed: {
-    rowClass(){
-      if (this.data.id === this.$store.state.dataManager.focusNodeInfo.id) {
+    rowClass() {
+      if (this.$store.state.dataManager.focusNodeInfo && this.data.id === this.$store.state.dataManager.focusNodeInfo.id) {
         return ["tree-node-inner-row", "tree-node-inner-row-select"]
-      }
-      else if (this.isMouseOver) {
+      } else if (this.isMouseOver) {
         return ["tree-node-inner-row", "tree-node-inner-row-foucs"]
+      } else {
+        return ["tree-node-inner-row"]
       }
-      return ["tree-node-inner-row"]
+    },
+    hasCopyTarget() {
+      return this.$store.state.dataManager.copyTarget === null
     }
   },
   methods: {
-    onToggleStatusChange(payload) {
-      this.treestore.toggleOpen(payload)
-      if (payload.open === true) {
-        this.$store.commit('addGroupListOpenNode', payload.id)
+    onDropdownMenuClick(payload) {
+      if (payload === 'delete') {
+        this.onTreeNodeDelete()
+      } else if (payload === 'copy') {
+        this.onTreeNodeCopy()
+      } else if (payload === 'paste') {
+        this.onTreeNodePaste()
+      } else if (payload === 'addGroup') {
+        this.onCreateGroup()
+      } else if (payload === 'addData') {
+        this.onCreateData()
+      } else {}
+    },
+    onToggleStatusChange() {
+      this.treestore.toggleOpen(this.data)
+      if (this.data.open === true) {
+        this.$store.commit('addGroupListOpenNode', this.data.id)
       } else {
-        this.$store.commit('deleteGroupListOpenNode', payload.id)
+        this.$store.commit('deleteGroupListOpenNode', this.data.id)
       }
     },
-    onTreeChange(payload) {
-      this.$bus.$emit('treeChange', payload)
-    },
-    onTreeNodeClick(payload) {
-      this.$store.commit('setFocusNodeInfo', payload)
-      if (payload.type === 'group') {
-        this.$store.dispatch('loadGroupDetail', payload)
-      } else if (payload.type === 'data') {
-        this.$store.dispatch('loadDataDetail', payload)
+    onTreeNodeClick() {
+      this.$store.commit('setFocusNodeInfo', this.data)
+      if (this.data.type === 'group') {
+        this.$store.dispatch('loadGroupDetail', this.data)
+      } else if (this.data.type === 'data') {
+        this.$store.dispatch('loadDataDetail', this.data)
       } else {}
     },
-    onTreeNodeDelete(payload) {
-      if (payload.type === 'group') {
-        this.$store.dispatch('deleteGroup', payload)
-      } else if (payload.type === 'data') {
-        this.$store.dispatch('deleteData', payload)
+    onTreeNodeDelete() {
+      if (this.data.type === 'group') {
+        this.$store.dispatch('deleteGroup', this.data)
+      } else if (this.data.type === 'data') {
+        this.$store.dispatch('deleteData', this.data)
       } else {}
     },
-    onTreeNodeCopy(payload) {
+    onTreeNodeCopy() {
+      // this.$store.commit('setCopyTarget', this.data)
+    },
+    onTreeNodePaste() {
+      // let copyObj = this.$store.state.dataManager.copyTarget
+      // if (copyObj.type === 'group') {
+      //   this.$store.dispatch('createGroup', {
+      //     groupName: copyObj.name,
+      //     parentId: this.data.id})
+      // } else if (copyObj.type === 'data') {
+      //   this.$store.dispatch('createData', {
+      //     dataName: copyObj.name,
+      //     parentId: this.data.id})
+      // } else {}
+    },
+    onCreateGroup() {
 
     },
-    onTreeNodePaste(payload) {
+    onCreateData() {
 
     }
   }

diff --git a/frontend/src/store/datamanager.js b/frontend/src/store/datamanager.js
@@ -22,12 +22,12 @@ export default {
       selectedDataIdList: []
     },
     jsonPath: null,
-    unshowInfoKey: ['request', 'response', 'children'],
     conflictInfo: null,
     groupListOpenNode: new Set(),
     dataDetail: {},
     groupDetail: {},
-    focusNodeInfo: {}
+    focusNodeInfo: {},
+    copyTarget: null
   },
   mutations: {
     setGroupList(state, groupList) {
@@ -92,6 +92,9 @@ export default {
     },
     setFocusNodeInfo(state, focusNodeInfo) {
       state.focusNodeInfo = focusNodeInfo
+    },
+    setCopyTarget(state, copyTarget) {
+      state.copyTarget = copyTarget
     }
   },
   actions: {
@@ -111,15 +114,6 @@ export default {
         commit('setGroupList', response.data.data.children)
       })
     },
-    loadDataDetail({ commit }, payload) {
-      api.getDataDetail(payload.id)
-        .then(response => {
-          commit('setDataDetail', response.data.data)
-        })
-        .catch(error => {
-          bus.$emit('msg.error', 'Load data ' + payload.name + ' error: ' + error)
-        })
-    },
     loadGroupDetail({ commit }, payload) {
       api.getGroupDetail(payload.id)
         .then(response => {
@@ -140,20 +134,14 @@ export default {
           console.log('Update detail failed', error)
         })
     },
-    newDataGroup({ state, commit, dispatch }, { groupName, parentGroupId }) {
-      api.createGroup(groupName, parentGroupId)
+    createGroup({ dispatch }, { groupName, parentId }) {
+      api.createGroup(groupName, parentId)
         .then(response => {
-          const groupId = response.data.group_id
-          state.groupList.push({
-            id: groupId,
-            name: groupName,
-            parent: parentGroupId
-          })
-          commit('setCurrentDataGroup', groupId)
-          dispatch('loadDataMap', groupId)
+          dispatch('loadDataMap')
+          bus.$emit('msg.success', 'Group ' + groupName+' created!')
         })
         .catch(error => {
-          console.error('Create group failed')
+          bus.$emit('msg.error', 'Group ' + groupName + ' created error: ' + error)
         })
     },
     updateDataGroup({ state, commit, dispatch }, { groupId, groupName, parentGroupId }) {
@@ -171,27 +159,48 @@ export default {
           dispatch('loadDataMap', groupId)
         })
     },
-    deleteGroup({ commit, dispatch }, payload) {
+    deleteGroup({ state, commit, dispatch }, payload) {
       api.deleteGroup(payload.id).then(response => {
         dispatch('loadDataMap')
         commit('deleteGroupListOpenNode', payload.id)
-        commit('setFocusNodeInfo', null)
+        commit('setFocusNodeInfo', {})
+        if (state.copyTarget && payload.id === state.copyTarget.id) {
+          commit('setCopyTarget', null)
+        }
         bus.$emit('msg.success', 'Delete Group ' + payload.name)
       })
       .catch(error => {
         bus.$emit('msg.error', 'Delete group ' + payload.name + ' error: ' + error)
       })
     },
-    newData({ dispatch }, { groupId, name }) {
-      api.createData(groupId, name)
+    createData({ dispatch }, { dataName, parentId }) {
+      api.createData(parentId, {
+        name: dataName
+      })
         .then(response => {
-          dispatch('loadDataMap', groupId)
+          dispatch('loadDataMap')
+          bus.$emit('msg.success', 'Group ' + dataName+' created!')
+        })
+        .catch(error => {
+          bus.$emit('msg.error', 'Group ' + dataName + ' created error: ' + error)
+        })
+    },
+    loadDataDetail({ commit }, payload) {
+      api.getDataDetail(payload.id)
+        .then(response => {
+          commit('setDataDetail', response.data.data)
+        })
+        .catch(error => {
+          bus.$emit('msg.error', 'Load data ' + payload.name + ' error: ' + error)
         })
     },
-    deleteData({ commit, dispatch }, payload) {
+    deleteData({ state, commit, dispatch }, payload) {
       api.deleteData(payload.id).then(response => {
         dispatch('loadDataMap', payload.id)
-        commit('setFocusNodeInfo', null)
+        commit('setFocusNodeInfo', {})
+        if (state.copyTarget && payload.id === state.copyTarget.id) {
+          commit('setCopyTarget', null)
+        }
         bus.$emit('msg.success', 'Delete Data ' + payload.name)
       })
       .catch(error => {

diff --git a/frontend/src/views/datamanager/DataDetail.vue b/frontend/src/views/datamanager/DataDetail.vue
@@ -2,8 +2,10 @@
   <div>
     <Row class="button-bar">
       <Col span="12">
-        <b>Data:</b>
-        <span>{{nodeInfo.name}}</span>
+        <span v-for="(value, index) in nodeParents" :key="value.id">
+          {{value.name}}
+          {{index === nodeParents.length-1 ? '' : ' - '}}
+        </span>
       </Col>
       <Col span="12" align="right">
         <JsonPathBar class="json-path-bar"></JsonPathBar>
@@ -29,17 +31,28 @@ export default {
     JsonPathBar,
     Icon
   },
-  data() {
-    return {
-      currentTab: 'detail'
-    }
-  },
   computed: {
     dataDetail() {
       return this.$store.state.dataManager.dataDetail
     },
     nodeInfo() {
       return this.$store.state.dataManager.focusNodeInfo
+    },
+    nodeParents() {
+      if (this.nodeInfo && this.nodeInfo.id) {
+        let parents = []
+        let tree = this.nodeInfo
+        while(tree.id) {
+          parents.push({
+            id: tree.id,
+            name: tree.name
+          })
+          tree = tree.parent
+        }
+        return parents.reverse()
+      } else {
+        return []
+      }
     }
   },
   methods: {

diff --git a/frontend/src/views/datamanager/DataDetailFolder.vue b/frontend/src/views/datamanager/DataDetailFolder.vue
@@ -82,13 +82,6 @@ export default {
 </script>
 
 <style>
-.button-bar {
-  height: 27px;
-  display: flex;
-  align-items: center;
-  padding: 10px;
-  border-bottom: 1px solid #ddd;
-}
 .data-detail {
   height: calc(100vh - 127px);
   /* total:100vh
@@ -101,5 +94,6 @@ export default {
   footer: 28px
     */
   overflow-y: auto;
+  font-size: 14px;
 }
 </style>