feat: new nav UI (wip)

client/components/common/page-selector.vue

@@ -10,7 +10,7 @@
         v-icon.mr-3(color='white') mdi-page-next-outline
         .body-1(v-if='mode === `create`') Select New Page Location
         .body-1(v-else-if='mode === `move`') Move / Rename Page Location
-        .body-1(v-else-if='mode === `select`') Select Page
+        .body-1(v-else-if='mode === `select`') Select a Page
         v-spacer
         v-progress-circular(
           indeterminate

client/graph/admin/navigation/navigation-mutation-save-tree.gql

-mutation ($tree: [NavigationItemInput]!) {
-  navigation{
-    updateTree(tree: $tree) {
-      responseResult {
-        succeeded
-        errorCode
-        slug
-        message
-      }
-    }
-  }
-}

client/graph/admin/navigation/navigation-query-tree.gql

-{
-  navigation {
-    tree {
-      id
-      kind
-      label
-      icon
-      targetType
-      target
-    }
-  }
-}

client/themes/default/components/nav-sidebar.vue

 <template lang="pug">
   div
-    //- .blue.darken-3.pa-3.d-flex
-    //-   v-btn(depressed, color='blue darken-2', style='min-width:0;', href='/')
-    //-     v-icon(size='20') mdi-home
-    //-   v-btn.ml-3(depressed, color='blue darken-2', style='flex: 1 1 100%;')
-    //-     v-icon(left) mdi-file-tree
-    //-     .body-2.text-none Browse
-    //- v-divider
-    v-list.py-2(dense, :class='color', :dark='dark')
+    .blue.darken-3.pa-3.d-flex
+      v-btn(depressed, color='blue darken-2', style='min-width:0;', href='/')
+        v-icon(size='20') mdi-home
+      v-btn.ml-3(v-if='currentMode === `custom`', depressed, color='blue darken-2', style='flex: 1 1 100%;', @click='switchMode(`browse`)')
+        v-icon(left) mdi-file-tree
+        .body-2.text-none Browse
+      v-btn.ml-3(v-else-if='currentMode === `browse`', depressed, color='blue darken-2', style='flex: 1 1 100%;', @click='switchMode(`custom`)')
+        v-icon(left) mdi-navigation
+        .body-2.text-none Main Menu
+    v-divider
+    //-> Custom Navigation
+    v-list.py-2(v-if='currentMode === `custom`', dense, :class='color', :dark='dark')
       template(v-for='item of items')
         v-list-item(
           v-if='item.kind === `link`'
@@ -18,9 +22,31 @@
           v-list-item-title {{ item.label }}
         v-divider.my-2(v-else-if='item.kind === `divider`')
         v-subheader.pl-4(v-else-if='item.kind === `header`') {{ item.label }}
+    //-> Browse
+    v-list.py-2(v-else-if='currentMode === `browse`', dense, :class='color', :dark='dark')
+      template(v-if='currentParent.id > 0')
+        v-list-item(v-for='(item, idx) of parents', :key='`parent-` + item.id', @click='fetchBrowseItems(item)', style='min-height: 30px;')
+          v-list-item-avatar(size='18', :style='`padding-left: ` + (idx * 8) + `px; width: auto; margin: 0 5px 0 0;`')
+            v-icon(small) mdi-folder-open
+          v-list-item-title {{ item.title }}
+        v-divider.mt-2
+        v-subheader.pl-4 Current Directory
+      template(v-for='item of currentItems')
+        v-list-item(v-if='item.isFolder', :key='`childfolder-` + item.id', @click='fetchBrowseItems(item)')
+          v-list-item-avatar(size='24')
+            v-icon mdi-folder
+          v-list-item-title {{ item.title }}
+        v-list-item(v-else, :href='`/` + item.path', :key='`childpage-` + item.id', :input-value='path === item.path')
+          v-list-item-avatar(size='24')
+            v-icon mdi-file-document-box
+          v-list-item-title {{ item.title }}
 </template>
 
 <script>
+import _ from 'lodash'
+import gql from 'graphql-tag'
+import { get } from 'vuex-pathify'
+
 export default {
   props: {
     color: {
@@ -34,10 +60,75 @@ export default {
     items: {
       type: Array,
       default: () => []
+    },
+    mode: {
+      type: String,
+      default: 'browse'
     }
   },
   data() {
-    return {}
+    return {
+      currentMode: 'browse',
+      currentItems: [],
+      currentParent: {
+        id: 0,
+        title: '/ (root)'
+      },
+      all: []
+    }
+  },
+  computed: {
+    path: get('page/path'),
+    locale: get('page/locale')
+  },
+  methods: {
+    switchMode (mode) {
+      this.currentMode = mode
+      if (mode === `browse`) {
+        this.fetchBrowseItems()
+      }
+    },
+    async fetchBrowseItems (item) {
+      this.$store.commit(`loadingStart`, 'browse-load')
+      if (!item) {
+        item = this.currentParent
+      } else {
+        if (!_.some(this.parents, ['id', item.id])) {
+          this.parents.push(this.currentParent)
+        }
+        this.currentParent = item
+      }
+      const resp = await this.$apollo.query({
+        query: gql`
+          query ($parent: Int!, $locale: String!) {
+            pages {
+              tree(parent: $parent, mode: ALL, locale: $locale, includeParents: true) {
+                id
+                path
+                title
+                isFolder
+                pageId
+                parent
+              }
+            }
+          }
+        `,
+        fetchPolicy: 'cache-first',
+        variables: {
+          parent: item.id,
+          locale: this.locale
+        }
+      })
+      this.currentItems = _.get(resp, 'data.pages.tree', [])
+      this.all.push(...this.currentItems)
+      this.$store.commit(`loadingStop`, 'browse-load')
+    }
+  },
+  mounted () {
+    this.currentMode = this.mode
+    if (this.mode === 'browse') {
+      this.fetchBrowseItems()
+    }
   }
 }
 </script>

server/graph/resolvers/navigation.js

@@ -11,7 +11,7 @@ module.exports = {
   },
   NavigationQuery: {
     async tree(obj, args, context, info) {
-      return WIKI.models.navigation.getTree()
+      return WIKI.models.navigation.getTree({ cache: false, locale: 'all' })
     }
   },
   NavigationMutation: {

server/graph/schemas/navigation.graphql

@@ -15,7 +15,7 @@ extend type Mutation {
 # -----------------------------------------------
 
 type NavigationQuery {
-  tree: [NavigationItem]!
+  tree: [NavigationTree]!
 }
 
 # -----------------------------------------------
@@ -24,7 +24,7 @@ type NavigationQuery {
 
 type NavigationMutation {
   updateTree(
-    tree: [NavigationItemInput]!
+    tree: [NavigationTreeInput]!
   ): DefaultResponse @auth(requires: ["manage:navigation", "manage:system"])
 }
 
@@ -32,6 +32,16 @@ type NavigationMutation {
 # TYPES
 # -----------------------------------------------
 
+type NavigationTree {
+  locale: String!
+  items: [NavigationItem]!
+}
+
+input NavigationTreeInput {
+  locale: String!
+  items: [NavigationItemInput]!
+}
+
 type NavigationItem {
   id: String!
   kind: String!

server/models/navigation.js

 const Model = require('objection').Model
+const _ = require('lodash')
 
 /* global WIKI */
 
@@ -21,19 +22,29 @@ module.exports = class Navigation extends Model {
     }
   }
 
-  static async getTree({ cache = false } = {}) {
+  static async getTree({ cache = false, locale = 'en' } = {}) {
     if (cache) {
-      const navTreeCached = await WIKI.cache.get('nav:sidebar')
+      const navTreeCached = await WIKI.cache.get(`nav:sidebar:${locale}`)
       if (navTreeCached) {
         return navTreeCached
       }
     }
     const navTree = await WIKI.models.navigation.query().findOne('key', 'site')
     if (navTree) {
+      // Check for pre-2.1 format
+      if (_.has(navTree.config[0], 'kind')) {
+        navTree.config = [{
+          locale: 'en',
+          items: navTree.config
+        }]
+      }
+
+      for (const tree of navTree.config) {
         if (cache) {
-        await WIKI.cache.set('nav:sidebar', navTree.config, 300)
+          await WIKI.cache.set(`nav:sidebar:${tree.locale}`, tree.items, 300)
+        }
       }
-      return navTree.config
+      return locale === 'all' ? navTree.config : WIKI.cache.get(`nav:sidebar:${locale}`)
     } else {
       WIKI.logger.warn('Site Navigation is missing or corrupted.')
       return []