feat: admin list pages + editor media ui imrprovements

client/components/admin/admin-pages.vue

@@ -8,43 +8,72 @@
             .headline.blue--text.text--darken-2 Pages
             .subheading.grey--text Manage pages #[v-chip(label, color='primary', small).white--text coming soon]
           v-spacer
-          v-btn(color='grey', outline, @click='refresh', large, disabled)
+          v-btn(color='grey', outline, @click='refresh', large)
             v-icon.grey--text refresh
           v-btn(color='primary', depressed, large, @click='newpage', disabled)
             v-icon(left) add
             span New Page
-        v-card.mt-3
+        v-card.wiki-form.mt-3
+          v-toolbar(flat, :color='$vuetify.dark ? `grey darken-3-d5` : `white`', height='80')
+            v-spacer
+            v-text-field(
+              outline
+              v-model='search'
+              append-icon='search'
+              label='Search Pages...'
+              single-line
+              hide-details
+              )
+            v-select.ml-2(
+              outline
+              hide-details
+              single-line
+              label='Locale'
+            )
+            v-select.ml-2(
+              outline
+              hide-details
+              single-line
+              label='Publish State'
+            )
+            v-spacer
+          v-divider
           v-data-table(
-            :items='groups'
+            :items='pages'
             :headers='headers'
             :search='search'
             :pagination.sync='pagination'
             :rows-per-page-items='[15]'
+            :loading='loading'
+            must-sort,
             hide-actions
           )
             template(slot='items', slot-scope='props')
-              tr.is-clickable(:active='props.selected', @click='$router.push("/e/" + props.item.id)')
+              tr.is-clickable(:active='props.selected', @click='$router.push(`/pages/` + props.item.id)')
                 td.text-xs-right {{ props.item.id }}
-                td {{ props.item.name }}
+                td
-                td {{ props.item.userCount }}
+                  .body-2 {{ props.item.title }}
+                  .caption {{ props.item.description }}
+                td.admin-pages-path
+                  v-chip(label, small, :color='$vuetify.dark ? `grey darken-4` : `grey lighten-4`') {{ props.item.locale }}
+                  span.ml-2.grey--text(:class='$vuetify.dark ? `text--lighten-1` : `text--darken-2`') {{ props.item.path }}
                 td {{ props.item.createdAt | moment('calendar') }}
                 td {{ props.item.updatedAt | moment('calendar') }}
             template(slot='no-data')
               v-alert.ma-3(icon='warning', :value='true', outline) No pages to display.
-          .text-xs-center.py-2(v-if='this.pages > 0')
+          .text-xs-center.py-2(v-if='this.pageTotal > 1')
-            v-pagination(v-model='pagination.page', :length='pages')
+            v-pagination(v-model='pagination.page', :length='pageTotal')
-
-    page-selector(v-model='pageSelectorShown', mode='new')
 </template>
 
 <script>
+import pagesQuery from 'gql/admin/pages/pages-query-list.gql'
 
 export default {
   data() {
     return {
-      selectedGroup: {},
+      selectedPage: {},
       pagination: {},
-      groups: [],
+      pages: [],
       headers: [
         { text: 'ID', value: 'id', width: 50, align: 'right' },
         { text: 'Title', value: 'title' },
@@ -53,23 +82,23 @@ export default {
         { text: 'Last Updated', value: 'updatedAt', width: 250 }
       ],
       search: '',
-      pageSelectorShown: false
+      loading: false
     }
   },
   computed: {
-    pages () {
+    pageTotal () {
       if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null) {
         return 0
       }
 
-      return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)
+      return Math.ceil(this.pages.length / this.pagination.rowsPerPage)
     }
   },
   methods: {
     async refresh() {
-      // await this.$apollo.queries.groups.refetch()
+      await this.$apollo.queries.pages.refetch()
       this.$store.commit('showNotification', {
-        message: 'Pages have been refreshed.',
+        message: 'Page list has been refreshed.',
         style: 'success',
         icon: 'cached'
       })
@@ -77,10 +106,26 @@ export default {
     newpage() {
       this.pageSelectorShown = true
     }
+  },
+  apollo: {
+    pages: {
+      query: pagesQuery,
+      fetchPolicy: 'network-only',
+      update: (data) => data.pages.list,
+      watchLoading (isLoading) {
+        this.loading = isLoading
+        this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-pages-refresh')
+      }
+    }
   }
 }
 </script>
 
 <style lang='scss'>
-
+.admin-pages-path {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-family: 'Source Sans Pro', sans-serif;
+}
 </style>

client/components/editor/editor-modal-media.vue

@@ -5,13 +5,13 @@
         v-flex(xs9)
           v-card.radius-7.animated.fadeInLeft.wait-p1s(light)
             v-card-text
-              v-toolbar.radius-7(color='teal lighten-5', dense, flat)
+              .d-flex
+                v-toolbar.radius-7(color='teal lighten-5', dense, flat, height='44')
                   .body-2.teal--text Images
-                v-spacer
+                v-btn.ml-3.my-0.radius-7(outline, large, color='teal', disabled)
-                v-btn(outline, small, color='teal')
                   v-icon(left) keyboard_backspace
                   span Parent Folder
-                v-btn(outline, small, color='teal')
+                v-btn.my-0.radius-7(outline, large, color='teal')
                   v-icon(left) add
                   span New Folder
               v-list.mt-3(dense, two-line)
@@ -26,14 +26,14 @@
                     v-list-tile-action
                       .caption.pr-3 2019-04-07
                     v-list-tile-action
-                      v-chip(label, small) JPG
+                      v-chip.teal--text(label, small, color='teal lighten-5') JPG
                   v-divider(v-if='idx < 10 - 1')
               .d-flex.mt-3
-                v-toolbar.radius-7(flat, color='grey lighten-4', dense)
+                v-toolbar.radius-7(flat, color='grey lighten-4', dense, height='44')
                   .body-2 / universe
                   v-spacer
                   .body-1.grey--text.text--darken-1 10 files
-                v-btn.ml-3(color='teal', dark, @click='insert')
+                v-btn.ml-3.my-0.radius-7(color='teal', large, @click='insert', disabled)
                   v-icon(left) save_alt
                   span Insert
 

client/graph/admin/pages/pages-query-list.gql

@@ -0,0 +1,17 @@
+query {
+  pages {
+    list {
+      id
+      locale
+      path
+      title
+      description
+      contentType
+      isPublished
+      isPrivate
+      privateNS
+      createdAt
+      updatedAt
+    }
+  }
+}

server/graph/resolvers/page.js

@@ -28,6 +28,21 @@ module.exports = {
         }
       }
     },
+    async list (obj, args, context, info) {
+      return WIKI.models.pages.query().column([
+        'id',
+        'path',
+        { locale: 'localeCode' },
+        'title',
+        'description',
+        'isPublished',
+        'isPrivate',
+        'privateNS',
+        'contentType',
+        'createdAt',
+        'updatedAt'
+      ])
+    }
   },
   PageMutation: {
     async create(obj, args, context) {

server/graph/schemas/page.graphql

@@ -26,6 +26,8 @@ type PageQuery {
     path: String
     locale: String
   ): PageSearchResponse! @auth(requires: ["manage:system", "read:pages"])
+
+  list: [PageListItem!]! @auth(requires: ["manage:system"])
 }
 
 # -----------------------------------------------
@@ -108,3 +110,17 @@ type PageSearchResult {
   path: String!
   locale: String!
 }
+
+type PageListItem {
+  id: Int!
+  path: String!
+  locale: String!
+  title: String
+  description: String
+  contentType: String!
+  isPublished: Boolean!
+  isPrivate: Boolean!
+  privateNS: String
+  createdAt: Date!
+  updatedAt: Date!
+}