refactor: All Pages tree Vue component

client/js/components/tree.vue

@@ -0,0 +1,84 @@
+<template lang="pug">
+  transition
+    ul.collapsable-nav(v-for='treeItem in tree', :class='{ "has-children": treeItem.hasChildren }', v-cloak)
+      li(v-for='page in treeItem.pages', :class='{ "is-active": page.isActive }')
+        a(v-on:click='mainAction(page)')
+          template(v-if='page._id !== "home"')
+            i(:class='{ "icon-folder2": page.isDirectory, "icon-file-text-o": !page.isDirectory }')
+            span {{ page.title }}
+          template(v-else)
+            i.icon-home
+            span {{ $t('nav.home') }}
+        a.is-pagelink(v-if='page.isDirectory && page.isEntry', v-on:click='goto(page._id)')
+          i.icon-file-text-o
+          i.icon-arrow-right2
+</template>
+
+<script>
+  import * as _ from 'lodash'
+
+  export default {
+    name: '',
+    data () {
+      return {
+        tree: []
+      }
+    },
+    methods: {
+      fetch (basePath) {
+        let self = this
+        self.$store.dispatch('startLoading')
+        self.$nextTick(() => {
+          socket.emit('treeFetch', { basePath }, (data) => {
+            if (self.tree.length > 0) {
+              let branch = _.last(self.tree)
+              branch.hasChildren = true
+              _.find(branch.pages, { _id: basePath }).isActive = true
+            }
+            self.tree.push({
+              hasChildren: false,
+              pages: data
+            })
+            self.$store.dispatch('stopLoading')
+          })
+        })
+      },
+      goto (entryPath) {
+        window.location.assign(siteRoot + '/' + entryPath)
+      },
+      unfold (entryPath) {
+        let self = this
+        let lastIndex = 0
+        _.forEach(self.tree, branch => {
+          lastIndex++
+          if (_.find(branch.pages, { _id: entryPath }) !== undefined) {
+            return false
+          }
+        })
+        self.tree = _.slice(self.tree, 0, lastIndex)
+        let branch = _.last(self.tree)
+        branch.hasChildren = false
+        branch.pages.forEach(page => {
+          page.isActive = false
+        })
+      },
+      mainAction (page) {
+        let self = this
+        if (page.isActive) {
+          self.unfold(page._id)
+        } else if (page.isDirectory) {
+          self.fetch(page._id)
+        } else {
+          self.goto(page._id)
+        }
+      }
+    },
+    mounted () {
+      let basePath = window.location.pathname.slice(0, -4)
+      if (basePath.length > 1) {
+        basePath = basePath.slice(1)
+      }
+      this.fetch(basePath)
+    }
+  }
+</script>