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) {
+      fetch (basePath) {
         let self = this
-          $('#notifload').addClass('active')
-          Vue.nextTick(() => {
+        self.$store.dispatch('startLoading')
+        self.$nextTick(() => {
           socket.emit('treeFetch', { basePath }, (data) => {
             if (self.tree.length > 0) {
               let branch = _.last(self.tree)
@@ -28,14 +39,14 @@ module.exports = (alerts, socket) => {
               hasChildren: false,
               pages: data
             })
-              $('#notifload').removeClass('active')
+            self.$store.dispatch('stopLoading')
           })
         })
       },
-        goto: function (entryPath) {
-          window.location.assign(rootUrl + entryPath)
+      goto (entryPath) {
+        window.location.assign(siteRoot + '/' + entryPath)
       },
-        unfold: function (entryPath) {
+      unfold (entryPath) {
         let self = this
         let lastIndex = 0
         _.forEach(self.tree, branch => {
@@ -51,7 +62,7 @@ module.exports = (alerts, socket) => {
           page.isActive = false
         })
       },
-        mainAction: function (page) {
+      mainAction (page) {
         let self = this
         if (page.isActive) {
           self.unfold(page._id)
@@ -62,13 +73,12 @@ module.exports = (alerts, socket) => {
         }
       }
     },
-      mounted: function () {
+    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
@@ -19,22 +14,11 @@ block content
           if !isGuest
             li
               a(href='/admin')
-                  i.icon-head
+                i.icon-cog
                 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)
-              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
+    tree