refactor: All Pages tree Vue component

client/js/app.js

 'use strict'
 
-/* global alertsData, siteLang */
+/* global siteLang */
 /* eslint-disable no-new */
 
 import $ from 'jquery'
-import _ from 'lodash'
 import Vue from 'vue'
 import VueResource from 'vue-resource'
 import store from './store'
@@ -12,7 +11,6 @@ import io from 'socket.io-client'
 import i18next from 'i18next'
 import i18nextXHR from 'i18next-xhr-backend'
 import VueI18Next from '@panter/vue-i18next'
-// import Alerts from './components/alerts.js'
 import 'jquery-smooth-scroll'
 import 'jquery-sticky'
 
@@ -25,6 +23,7 @@ import anchorComponent from './components/anchor.vue'
 import colorPickerComponent from './components/color-picker.vue'
 import loadingSpinnerComponent from './components/loading-spinner.vue'
 import searchComponent from './components/search.vue'
+import treeComponent from './components/tree.vue'
 
 import adminUsersCreateComponent from './modals/admin-users-create.vue'
 
@@ -62,14 +61,6 @@ $(() => {
     store.dispatch('stopLoading')
   })
 
-  var alerts = {}
-  /*var alerts = new Alerts()
-  if (alertsData) {
-    _.forEach(alertsData, (alertRow) => {
-      alerts.push(alertRow)
-    })
-  }*/
-
   // ====================================
   // Establish WebSocket connection
   // ====================================
@@ -91,34 +82,16 @@ $(() => {
       anchor: anchorComponent,
       colorPicker: colorPickerComponent,
       loadingSpinner: loadingSpinnerComponent,
-      search: searchComponent
-    },
-    directives: {
-      // sticky: VueSticky
+      search: searchComponent,
+      tree: treeComponent
     },
     store,
     i18n,
     el: '#root',
     mounted() {
-      $('a').smoothScroll({
-        speed: 500,
-        offset: -50
-      })
-
+      $('a').smoothScroll({ speed: 500, offset: -50 })
       $('#header').sticky({ topSpacing: 0 })
       $('.sidebar-pagecontents').sticky({ topSpacing: 15, bottomSpacing: 75 })
-
-      // ====================================
-      // Pages logic
-      // ====================================
-
-      require('./pages/view.js')(alerts)
-      require('./pages/all.js')(alerts, socket)
-      require('./pages/create.js')(alerts, socket)
-      require('./pages/edit.js')(alerts, socket)
-      require('./pages/source.js')(alerts)
-      require('./pages/history.js')(alerts)
-      require('./pages/admin.js')(alerts)
     }
   })
 })

client/js/pages/all.js → client/js/components/tree.vue

-'use strict'
+<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>
 
-import $ from 'jquery'
-import Vue from 'vue'
-import _ from 'lodash'
+<script>
+  import * as _ from 'lodash'
 
-const rootUrl = '/'
-
-module.exports = (alerts, socket) => {
-  if ($('#page-type-all').length) {
-    let vueAllPages = new Vue({ // eslint-disable-line no-unused-vars
-      el: '#page-type-all',
-      data: {
+  export default {
+    name: '',
+    data () {
+      return {
         tree: []
-      },
-      methods: {
-        fetch: function (basePath) {
-          let self = this
-          $('#notifload').addClass('active')
-          Vue.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
-              })
-              $('#notifload').removeClass('active')
-            })
-          })
-        },
-        goto: function (entryPath) {
-          window.location.assign(rootUrl + entryPath)
-        },
-        unfold: function (entryPath) {
-          let self = this
-          let lastIndex = 0
-          _.forEach(self.tree, branch => {
-            lastIndex++
-            if (_.find(branch.pages, { _id: entryPath }) !== undefined) {
-              return false
+      }
+    },
+    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')
           })
-          self.tree = _.slice(self.tree, 0, lastIndex)
-          let branch = _.last(self.tree)
-          branch.hasChildren = false
-          branch.pages.forEach(page => {
-            page.isActive = false
-          })
-        },
-        mainAction: function (page) {
-          let self = this
-          if (page.isActive) {
-            self.unfold(page._id)
-          } else if (page.isDirectory) {
-            self.fetch(page._id)
-          } else {
-            self.goto(page._id)
+        })
+      },
+      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
+        })
       },
-      mounted: function () {
-        let basePath = window.location.pathname.slice(0, -4)
-        if (basePath.length > 1) {
-          basePath = basePath.slice(1)
+      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)
         }
-        this.fetch(basePath)
       }
-    })
+    },
+    mounted () {
+      let basePath = window.location.pathname.slice(0, -4)
+      if (basePath.length > 1) {
+        basePath = basePath.slice(1)
+      }
+      this.fetch(basePath)
+    }
   }
-}
+</script>

server/locales/en/browser.json

 {
+  "nav": {
+    "home": "Home"
+  },
   "profile": {
     "displayname": "Display Name",
     "displaynameexample": "John Smith",

server/views/layout.pug

@@ -18,7 +18,9 @@ html
     link(rel='manifest', href='/manifest.json')
 
     //- Site Lang
-    script var siteLang = '!{appconfig.lang}';
+    script.
+      var siteLang = '!{appconfig.lang}';
+      var siteRoot = '!{appconfig.host}';
 
     //- JS / CSS
     script(type='text/javascript', src='/js/libs.min.js')

server/views/pages/all.pug

 extends ../layout.pug
 
-block rootNavRight
-  i.nav-item#notifload
-
 block content
-
-  #page-type-all
-    .container.is-fluid.has-collapsable-nav
-      .sidebar.is-collapsed
-        aside
-          .sidebar-label
-            span= t('sidebar.nav')
-          ul.sidebar-menu
-            li
-              a(href='/')
-                i.icon-home
-                span= t('nav.home')
-            if !isGuest
-              li
-                a(href='/admin')
-                  i.icon-head
-                  span= t('nav.account')
-            else
-              li
-                a(href='/login')
-                  i.icon-unlock
-                  span= t('nav.login')
-      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)
+  .container.is-fluid.has-collapsable-nav
+    .sidebar.is-collapsed
+      aside
+        .sidebar-label
+          span= t('sidebar.nav')
+        ul.sidebar-menu
+          li
+            a(href='/')
               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
+          if !isGuest
+            li
+              a(href='/admin')
+                i.icon-cog
+                span= t('nav.account')
+          else
+            li
+              a(href='/login')
+                i.icon-unlock
+                span= t('nav.login')
+    tree