feat: admin dashboard recent pages + update deps

client/components/admin/admin-dashboard.vue

@@ -54,24 +54,31 @@
             .body-2(v-else) {{$t('admin:dashboard.versionNew', { version: info.latestVersion })}}
       v-flex(xs12, xl6)
         v-card.radius-7.animated.fadeInUp.wait-p2s
-          v-card-title.subtitle-1(:class='$vuetify.theme.dark ? `grey darken-2` : `grey lighten-5`') Recent Pages
+          v-toolbar(:color='$vuetify.theme.dark ? `grey darken-2` : `grey lighten-5`', dense, flat)
+            v-spacer
+            .overline Recent Pages
+            v-spacer
           v-data-table.pb-2(
             :items='recentPages'
+            :headers='headers'
+            :loading='recentPagesLoading'
             hide-default-footer
             hide-default-header
             )
-            template(slot='items' slot-scope='props')
-              td(width='20', style='padding-right: 0;'): v-icon insert_drive_file
+            template(slot='item', slot-scope='props')
+              tr.is-clickable(:active='props.selected', @click='$router.push(`/pages/` + props.item.id)')
                 td
-                .body-2.primary--text {{ props.item.title }}
-                .caption.grey--text.text--darken-2 {{ props.item.description }}
-              td.caption /{{ props.item.path }}
-              td.grey--text.text--darken-2(width='250')
-                .caption: strong Updated {{ props.item.updatedAt | moment('from') }}
-                .caption Created {{ props.item.createdAt | moment('calendar') }}
+                  .body-2: strong {{ props.item.title }}
+                td.admin-pages-path
+                  v-chip(label, small, :color='$vuetify.theme.dark ? `grey darken-4` : `grey lighten-4`') {{ props.item.locale }}
+                  span.ml-2.grey--text(:class='$vuetify.theme.dark ? `text--lighten-1` : `text--darken-2`') / {{ props.item.path }}
+                td.text-right(width='250') {{ props.item.updatedAt | moment('calendar') }}
       v-flex(xs12, xl6)
         v-card.radius-7.animated.fadeInUp.wait-p4s
-          v-card-title.subtitle-1(:class='$vuetify.theme.dark ? `grey darken-2` : `grey lighten-5`') Most Popular Pages
+          v-toolbar(:color='$vuetify.theme.dark ? `grey darken-2` : `grey lighten-5`', dense, flat)
+            v-spacer
+            .overline Most Popular Pages
+            v-spacer
           v-data-table.pb-2(
             :items='popularPages'
             hide-default-footer
@@ -105,6 +112,8 @@ import _ from 'lodash'
 import AnimatedNumber from 'animated-number-vue'
 import { get } from 'vuex-pathify'
 
+import recentPagesQuery from 'gql/admin/dashboard/dashboard-query-recentpages.gql'
+
 export default {
   components: {
     AnimatedNumber
@@ -112,7 +121,14 @@ export default {
   data() {
     return {
       recentPages: [],
-      popularPages: []
+      recentPagesLoading: false,
+      popularPages: [],
+      headers: [
+        { text: 'ID', value: 'id', width: 80 },
+        { text: 'Title', value: 'title' },
+        { text: 'Path', value: 'path' },
+        { text: 'Last Updated', value: 'updatedAt', width: 250 }
+      ]
     }
   },
   computed: {
@@ -133,6 +149,16 @@ export default {
         return _.includes(this.permissions, prm)
       }
     }
+  },
+  apollo: {
+    recentPages: {
+      query: recentPagesQuery,
+      update: (data) => data.pages.list,
+      watchLoading (isLoading) {
+        this.recentPagesLoading = isLoading
+        this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-dashboard-recentpages')
+      }
+    }
   }
 }
 </script>

client/components/admin/admin-groups.vue

@@ -78,7 +78,7 @@ export default {
       pageCount: 0,
       groups: [],
       headers: [
-        { text: 'ID', value: 'id', width: 50, align: 'right' },
+        { text: 'ID', value: 'id', width: 80, sortable: true },
         { text: 'Name', value: 'name' },
         { text: 'Users', value: 'userCount', width: 200 },
         { text: 'Created', value: 'createdAt', width: 250 },

client/components/admin/admin-locale.vue

@@ -187,7 +187,7 @@ export default {
           align: 'center',
           value: 'availability',
           sortable: false,
-          width: 100
+          width: 120
         },
         {
           text: this.$t('admin:locale.download'),

client/components/admin/admin-pages.vue

@@ -56,11 +56,11 @@
               tr.is-clickable(:active='props.selected', @click='$router.push(`/pages/` + props.item.id)')
                 td.text-xs-right {{ props.item.id }}
                 td
-                  .body-2 {{ props.item.title }}
+                  .body-2: strong {{ props.item.title }}
                   .caption {{ props.item.description }}
                 td.admin-pages-path
                   v-chip(label, small, :color='$vuetify.theme.dark ? `grey darken-4` : `grey lighten-4`') {{ props.item.locale }}
-                  span.ml-2.grey--text(:class='$vuetify.theme.dark ? `text--lighten-1` : `text--darken-2`') {{ props.item.path }}
+                  span.ml-2.grey--text(:class='$vuetify.theme.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')
@@ -80,7 +80,7 @@ export default {
       pagination: 1,
       pages: [],
       headers: [
-        { text: 'ID', value: 'id', width: 50, align: 'right' },
+        { text: 'ID', value: 'id', width: 80, sortable: true },
         { text: 'Title', value: 'title' },
         { text: 'Path', value: 'path' },
         { text: 'Created', value: 'createdAt', width: 250 },

client/graph/admin/dashboard/dashboard-query-recentpages.gql

+query {
+  pages {
+    list(limit: 10, orderBy: UPDATED, orderByDirection: DESC) {
+      id
+      locale
+      path
+      title
+      description
+      contentType
+      isPublished
+      isPrivate
+      privateNS
+      createdAt
+      updatedAt
+    }
+  }
+}

dev/webpack/webpack.dev.js

@@ -3,7 +3,6 @@ const path = require('path')
 const fs = require('fs-extra')
 const yargs = require('yargs').argv
 const _ = require('lodash')
-const Fiber = require('fibers')
 
 const { VueLoaderPlugin } = require('vue-loader')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
@@ -85,7 +84,6 @@ module.exports = {
             loader: 'sass-loader',
             options: {
               implementation: require('sass'),
-              fiber: Fiber,
               sourceMap: false
             }
           }
@@ -107,7 +105,6 @@ module.exports = {
             loader: 'sass-loader',
             options: {
               implementation: require('sass'),
-              fiber: Fiber,
               sourceMap: false
             }
           },

dev/webpack/webpack.prod.js

@@ -3,7 +3,6 @@ const path = require('path')
 const fs = require('fs-extra')
 const yargs = require('yargs').argv
 const _ = require('lodash')
-const Fiber = require('fibers')
 
 const { VueLoaderPlugin } = require('vue-loader')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
@@ -88,7 +87,6 @@ module.exports = {
             loader: 'sass-loader',
             options: {
               implementation: require('sass'),
-              fiber: Fiber,
               sourceMap: false
             }
           }
@@ -111,7 +109,6 @@ module.exports = {
             loader: 'sass-loader',
             options: {
               implementation: require('sass'),
-              fiber: Fiber,
               sourceMap: false
             }
           },

package.json

@@ -37,12 +37,12 @@
     "@aoberoi/passport-slack": "1.0.5",
     "@bugsnag/js": "6.4.0",
     "@exlinc/keycloak-passport": "1.0.2",
-    "algoliasearch": "3.33.0",
+    "algoliasearch": "3.34.0",
     "apollo-fetch": "0.7.0",
-    "apollo-server": "2.9.0",
-    "apollo-server-express": "2.9.0",
+    "apollo-server": "2.9.2",
+    "apollo-server-express": "2.9.2",
     "auto-load": "3.0.4",
-    "aws-sdk": "2.518.0",
+    "aws-sdk": "2.521.0",
     "axios": "0.19.0",
     "azure-search-client": "3.1.5",
     "bcryptjs-then": "1.0.1",
@@ -72,13 +72,13 @@
     "filesize": "4.1.2",
     "fs-extra": "8.1.0",
     "getos": "3.1.1",
-    "graphql": "14.5.3",
+    "graphql": "14.5.4",
     "graphql-list-fields": "2.0.2",
     "graphql-rate-limit-directive": "1.1.0",
     "graphql-subscriptions": "1.1.0",
     "graphql-tools": "4.0.5",
     "highlight.js": "9.15.10",
-    "i18next": "17.0.12",
+    "i18next": "17.0.13",
     "i18next-express-middleware": "1.8.1",
     "i18next-node-fs-backend": "2.1.3",
     "image-size": "0.7.4",
@@ -87,7 +87,7 @@
     "js-yaml": "3.13.1",
     "jsonwebtoken": "8.5.1",
     "klaw": "3.0.0",
-    "knex": "0.19.2",
+    "knex": "0.19.3",
     "lodash": "4.17.15",
     "markdown-it": "9.1.0",
     "markdown-it-abbr": "1.0.4",
@@ -107,11 +107,11 @@
     "mime-types": "2.1.24",
     "moment": "2.24.0",
     "moment-timezone": "0.5.26",
-    "mongodb": "3.3.1",
+    "mongodb": "3.3.2",
     "mssql": "5.1.0",
     "multer": "1.4.2",
-    "mysql2": "1.6.5",
-    "nanoid": "2.0.4",
+    "mysql2": "1.7.0",
+    "nanoid": "2.1.0",
     "node-2fa": "1.1.2",
     "node-cache": "4.2.1",
     "nodemailer": "6.3.0",
@@ -148,10 +148,10 @@
     "request-promise": "4.2.4",
     "safe-regex": "2.0.2",
     "sanitize-filename": "1.6.3",
-    "scim-query-filter-parser": "1.1.0",
+    "scim-query-filter-parser": "1.1.1",
     "semver": "6.3.0",
     "serve-favicon": "2.5.0",
-    "simple-git": "1.124.0",
+    "simple-git": "1.126.0",
     "solr-node": "1.2.1",
     "sqlite3": "4.1.0",
     "striptags": "3.1.1",
@@ -212,17 +212,17 @@
     "cssnano": "4.1.10",
     "duplicate-package-checker-webpack-plugin": "3.0.0",
     "epic-spinners": "1.1.0",
-    "eslint": "6.2.2",
+    "eslint": "6.3.0",
     "eslint-config-requarks": "1.0.7",
-    "eslint-config-standard": "14.0.1",
+    "eslint-config-standard": "14.1.0",
     "eslint-plugin-import": "2.18.2",
-    "eslint-plugin-node": "9.1.0",
+    "eslint-plugin-node": "9.2.0",
     "eslint-plugin-promise": "4.2.1",
     "eslint-plugin-standard": "4.0.1",
     "eslint-plugin-vue": "5.2.3",
     "fibers": "4.0.1",
     "file-loader": "4.2.0",
-    "filepond": "4.5.0",
+    "filepond": "4.5.1",
     "filepond-plugin-file-validate-type": "1.2.4",
     "filesize.js": "1.0.2",
     "grapesjs": "0.15.3",
@@ -259,7 +259,7 @@
     "react-dom": "16.9.0",
     "resolve-url-loader": "3.1.0",
     "sass": "1.22.10",
-    "sass-loader": "7.3.1",
+    "sass-loader": "8.0.0",
     "sass-resources-loader": "2.0.1",
     "script-ext-html-webpack-plugin": "2.1.4",
     "simple-progress-webpack-plugin": "1.1.2",
@@ -280,7 +280,7 @@
     "vue-loader": "15.7.1",
     "vue-material-design-icons": "3.4.0",
     "vue-moment": "4.0.0",
-    "vue-router": "3.1.2",
+    "vue-router": "3.1.3",
     "vue-simple-breakpoints": "1.0.3",
     "vue-status-indicator": "1.2.1",
     "vue-template-compiler": "2.6.10",
@@ -288,17 +288,17 @@
     "vue2-animate": "2.1.2",
     "vuedraggable": "2.23.0",
     "vuescroll": "4.14.0",
-    "vuetify": "2.0.10",
+    "vuetify": "2.0.11",
     "vuetify-loader": "1.3.0",
     "vuex": "3.1.1",
     "vuex-pathify": "1.2.4",
     "vuex-persistedstate": "2.5.4",
-    "webpack": "4.39.2",
+    "webpack": "4.39.3",
     "webpack-bundle-analyzer": "3.4.1",
     "webpack-cli": "3.3.7",
     "webpack-dev-middleware": "3.7.0",
     "webpack-hot-middleware": "2.25.0",
-    "webpack-merge": "4.2.1",
+    "webpack-merge": "4.2.2",
     "webpack-subresource-integrity": "1.3.2",
     "webpackbar": "4.0.0",
     "whatwg-fetch": "3.0.0",

server/graph/resolvers/page.js

@@ -41,7 +41,29 @@ module.exports = {
         'contentType',
         'createdAt',
         'updatedAt'
-      ])
+      ]).modify(queryBuilder => {
+        if (args.limit) {
+          queryBuilder.limit(args.limit)
+        }
+        const orderDir = args.orderByDirection === 'DESC' ? 'desc' : 'asc'
+        switch (args.orderBy) {
+          case 'CREATED':
+            queryBuilder.orderBy('createdAt', orderDir)
+            break
+          case 'PATH':
+            queryBuilder.orderBy('path', orderDir)
+            break
+          case 'TITLE':
+            queryBuilder.orderBy('title', orderDir)
+            break
+          case 'UPDATED':
+            queryBuilder.orderBy('updatedAt', orderDir)
+            break
+          default:
+            queryBuilder.orderBy('id', orderDir)
+            break
+        }
+      })
     },
     async single (obj, args, context, info) {
       let page = await WIKI.models.pages.getPageFromDb(args.id)

server/graph/schemas/page.graphql

@@ -27,7 +27,11 @@ type PageQuery {
     locale: String
   ): PageSearchResponse! @auth(requires: ["manage:system", "read:pages"])
 
-  list: [PageListItem!]! @auth(requires: ["manage:system"])
+  list(
+    limit: Int
+    orderBy: PageOrderBy
+    orderByDirection: PageOrderByDirection
+  ): [PageListItem!]! @auth(requires: ["manage:system"])
 
   single(
     id: Int!
@@ -163,3 +167,16 @@ type PageListItem {
   createdAt: Date!
   updatedAt: Date!
 }
+
+enum PageOrderBy {
+  CREATED
+  ID
+  PATH
+  TITLE
+  UPDATED
+}
+
+enum PageOrderByDirection {
+  ASC
+  DESC
+}