Urgly way to rebuild the tree object

xiaoluoboding · Aug 19, 2016 · c1ade00 · c1ade00
1 parent 973c0c0
commit c1ade00
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 59 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>repository-tree</title>
+    <title>Repository Tree</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/components/Tree.vue b/src/components/Tree.vue
@@ -1,30 +1,43 @@
 <script>
 export default {
-  data() {
-    return {
-    }
-  },
-  computed: {
-  },
   vuex: {
     getters: {
       repoTree: ({ github }) => github.repoTree
     }
-  },
-  ready() {
-  },
-  methods: {},
-  components: {}
-};
+  }
+}
 </script>
 
 <template lang="html">
-  <div>
-    <pre>
-      {{{ repoTree }}}
-    </pre>
+  <div class="boxed-header">
+    <span class="repo-tree">Repository Tree</span>
+    <button type="button" class="btn btn-sm btn-primary right" @click="copy">Copy to clipboard</button>
+  </div>
+  <div class="boxed-content">
+    <pre class="form-control">{{{ repoTree }}}</pre>
   </div>
 </template>
 
 <style lang="css">
+	.boxed-header {
+	  position: relative;
+	  padding: 10px;
+	  margin-bottom: -1px;
+	  font-size: 13px;
+	  line-height: 26px;
+	  color: #68777d;
+	  background-color: #f2f9fc;
+	  border: 1px solid #c9e6f2;
+	  border-radius: 3px;
+	  border-bottom-right-radius: 0;
+	  border-bottom-left-radius: 0;
+	}
+
+  .boxed-content {
+    margin-bottom: 10px;
+    border: 1px solid #ddd;
+    border-top: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
 </style>
diff --git a/src/components/main.vue b/src/components/main.vue
@@ -49,18 +49,4 @@ export default {
 	  line-height: 26px;
 	  color: #666;
 	}
-
-	.boxed-header {
-	  position: relative;
-	  padding: 10px;
-	  margin-bottom: -1px;
-	  font-size: 13px;
-	  line-height: 20px;
-	  color: #68777d;
-	  background-color: #f2f9fc;
-	  border: 1px solid #c9e6f2;
-	  border-radius: 3px;
-	  border-bottom-right-radius: 0;
-	  border-bottom-left-radius: 0;
-	}
 </style>
diff --git a/src/vuex/modules/github.js b/src/vuex/modules/github.js
@@ -12,7 +12,7 @@ import treeify from 'treeify'
 // initial state
 const state = {
   siteLink: 'https://github.com/',
-  repoLink: '',
+  repoLink: 'https://github.com/xiaoluoboding/vue-stroll',
   userName: '',
   repoName: '',
   repoTree: []
@@ -29,46 +29,48 @@ const mutations = {
     state.repoName = repoName
   },
   [SET_REPOTREE](state, repoTree) {
-    let rootTree = []
-    // set rootBlob
-    let rootBlobArray = filter(repoTree, function(obj) {
-      return !obj.path.includes('/') && obj.type == 'blob'
-    })
-    let rootBlob = {}
-    for (let i in rootBlobArray) {
-      rootBlob[rootBlobArray[i].path] = null
-    }
-    // console.dir(rootBlob)
+    let perttyTree = {}
 
-    let rootTreeArray = filter(repoTree, function(obj) {
-      return obj.type == 'tree'
-    })
-
-    let treeArray = {}
-    for (var i in rootTreeArray) {
+    // set rootTree
+    let rootTreeArray = filter(repoTree, (obj) => !obj.path.includes('/') && obj.type == 'tree')
+    let rootTree = {}
+    for (let i in rootTreeArray) {
       if (rootTreeArray.hasOwnProperty(i)) {
+        rootTree[rootTreeArray[i].path] = []
+      }
+    }
+
+    // console.log(rootTree);
 
+    // set rootBlob
+    let rootBlobArray = filter(repoTree, (obj) => !obj.path.includes('/') && obj.type == 'blob')
+    let rootBlob = {}
+    for (let i in rootBlobArray) {
+      if (rootBlobArray.hasOwnProperty(i)) {
+        rootBlob[rootBlobArray[i].path] = null
       }
     }
 
-    let childBlobArray = filter(repoTree, function(obj) {
-      return obj.path.includes('/') && obj.type == 'blob'
-    })
+    // console.log(rootBlob);
 
-    let childArray = {}
+    // iterate childBlob
+    let childBlobArray = filter(repoTree, (obj) => obj.path.includes('/') && obj.type == 'blob')
     for (var i in childBlobArray) {
       if (childBlobArray.hasOwnProperty(i)) {
         let treeParent = childBlobArray[i].path.split('\/').shift()
         let treeChild = childBlobArray[i].path.split('\/').pop()
-        console.log(childBlobArray[i].path)
-        console.log(treeChild)
-        childArray[treeChild] = null
+        for (var i in rootTreeArray) {
+          if (rootTreeArray.hasOwnProperty(i) && rootTreeArray[i].path == treeParent) {
+            rootTree[treeParent][treeChild] = null
+          }
+        }
       }
     }
-    console.log(childArray)
-    // set rootTree
-    rootTree.push(rootBlob)
-    state.repoTree = treeify.asTree(rootTree)
+
+    // set perttyTree
+    perttyTree = _.merge(rootTree, rootBlob)
+    console.log(perttyTree);
+    state.repoTree = treeify.asTree(perttyTree)
   }
 }