feat: page selector (wip)

client/client-app.js

@@ -128,9 +128,10 @@ Vue.component('login', () => import(/* webpackPrefetch: true, webpackChunkName:
 Vue.component('nav-footer', () => import(/* webpackMode: "eager" */ './components/common/nav-footer.vue'))
 Vue.component('nav-header', () => import(/* webpackMode: "eager" */ './components/common/nav-header.vue'))
 Vue.component('nav-sidebar', () => import(/* webpackMode: "eager" */ './components/common/nav-sidebar.vue'))
+Vue.component('page', () => import(/* webpackChunkName: "theme-page" */ './themes/' + process.env.CURRENT_THEME + '/components/app.vue'))
+Vue.component('page-selector', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/page-selector.vue'))
 Vue.component('profile', () => import(/* webpackChunkName: "profile" */ './components/profile.vue'))
 Vue.component('v-card-chin', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/v-card-chin.vue'))
-Vue.component('page', () => import(/* webpackChunkName: "theme-page" */ './themes/' + process.env.CURRENT_THEME + '/components/app.vue'))
 
 let bootstrap = () => {
   // ====================================

client/components/admin/admin-pages.vue

@@ -10,7 +10,7 @@
           v-spacer
           v-btn(color='grey', outline, @click='refresh', large)
             v-icon.grey--text refresh
-          v-btn(color='primary', depressed, @click='save', large)
+          v-btn(color='primary', depressed, large, @click='newpage')
             v-icon(left) add
             span New Page
         v-card.mt-3
@@ -33,6 +33,8 @@
               v-alert.ma-3(icon='warning', :value='true', outline) No pages to display.
           .text-xs-center.py-2(v-if='groups.length > 15')
             v-pagination(v-model='pagination.page', :length='pages')
+
+    page-selector(v-model='pageSelectorShown', mode='new')
 </template>
 
 <script>
@@ -50,7 +52,8 @@ export default {
         { text: 'Created', value: 'createdAt', width: 250 },
         { text: 'Last Updated', value: 'updatedAt', width: 250 }
       ],
-      search: ''
+      search: '',
+      pageSelectorShown: false
     }
   },
   computed: {
@@ -70,6 +73,9 @@ export default {
         style: 'success',
         icon: 'cached'
       })
+    },
+    newpage() {
+      this.pageSelectorShown = true
     }
   }
 }

client/components/common/page-selector.vue

+<template lang="pug">
+  v-dialog(v-model='isShown', lazy, max-width='850px')
+    v-card
+      .dialog-header
+        span Select Page Location
+        v-spacer
+        v-text-field.mr-3(
+          solo
+          flat
+          background-color='blue darken-2'
+          dark
+          prepend-inner-icon='search'
+          label='Search...'
+          clearable
+          :height='20'
+          hide-details
+          )
+        v-progress-circular(
+          indeterminate
+          color='white'
+          :size='20'
+          :width='2'
+          v-show='searchLoading'
+          )
+      .d-flex(style='min-height:400px;')
+        v-flex(xs4).grey.lighten-3
+          v-toolbar(color='grey lighten-2', dense, flat)
+            v-btn(icon): v-icon(color='grey') arrow_upward
+            v-spacer
+            v-btn(icon): v-icon(color='grey darken-2') create_new_folder
+          v-list.grey.lighten-3(dense)
+            v-list-tile.primary(dark)
+              v-list-tile-avatar: v-icon folder_open
+              v-list-tile-title.white--text / (Site Root)
+            v-divider
+            v-list-tile
+              v-list-tile-avatar: v-icon folder
+              v-list-tile-title Folder B
+        v-flex(xs8)
+          v-toolbar(color='grey lighten-4', dense, flat)
+            v-spacer
+            v-btn(icon): v-icon(color='grey') forward
+            v-btn(icon): v-icon(color='grey') delete
+          v-list(dense)
+            v-list-tile
+              v-list-tile-avatar: v-icon insert_drive_file
+              v-list-tile-title File A
+            v-divider
+            v-list-tile
+              v-list-tile-avatar: v-icon insert_drive_file
+              v-list-tile-title File B
+            v-divider
+            v-list-tile
+              v-list-tile-avatar: v-icon insert_drive_file
+              v-list-tile-title File C
+            v-divider
+            v-list-tile
+              v-list-tile-avatar: v-icon insert_drive_file
+              v-list-tile-title File D
+      v-card-text.grey.lighten-2.pa-2
+        v-text-field(
+          solo
+          hide-details
+          v-model='location'
+        )
+      v-card-chin
+        v-spacer
+        v-btn(outline, @click='close') Cancel
+        v-btn(color='primary')
+          v-icon(left) check
+          span Select
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      searchLoading: true,
+      location: '/new-page'
+    }
+  },
+  computed: {
+    isShown: {
+      get() { return this.value },
+      set(val) { this.$emit('input', val) }
+    }
+  },
+  methods: {
+    close() {
+      this.isShown = false
+    }
+  }
+}
+</script>