feat: serve asset from db + editor mobile improvements

client/components/editor/editor-markdown.vue

@@ -1,9 +1,9 @@
 <template lang='pug'>
   .editor-markdown
-    v-toolbar.editor-markdown-toolbar(dense, color='primary', dark, flat)
+    v-toolbar.editor-markdown-toolbar(dense, color='primary', dark, flat, style='overflow-x: hidden;')
       v-btn.animated.fadeInLeft(v-if='isModalShown', flat, @click='closeAllModal')
-        v-icon(left) chevron_left
-        span Back
+        v-icon(left) close
+        span Back to Editor
       template(v-else)
         v-tooltip(bottom, color='primary')
           v-btn.animated.fadeIn(icon, slot='activator', @click='toggleMarkup({ start: `**` })').mx-0
@@ -92,45 +92,42 @@
           span Insert Link
         v-tooltip(right, color='teal')
           v-btn.animated.fadeInLeft.wait-p1s(icon, slot='activator', dark, @click='toggleModal(`editorModalMedia`)').mx-0
-            v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') image
-          span Insert Image
+            v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') burst_mode
+          span Insert Assets
         v-tooltip(right, color='teal')
           v-btn.animated.fadeInLeft.wait-p2s(icon, slot='activator', dark, @click='toggleModal(`editorModalBlocks`)').mx-0
             v-icon(:color='activeModal === `editorModalBlocks` ? `teal` : ``') dashboard
           span Insert Block
         v-tooltip(right, color='teal')
           v-btn.animated.fadeInLeft.wait-p3s(icon, slot='activator', dark, disabled).mx-0
-            v-icon insert_drive_file
-          span Insert File
-        v-tooltip(right, color='teal')
-          v-btn.animated.fadeInLeft.wait-p4s(icon, slot='activator', dark, disabled).mx-0
             v-icon code
           span Insert Code Block
         v-tooltip(right, color='teal')
-          v-btn.animated.fadeInLeft.wait-p5s(icon, slot='activator', dark, disabled).mx-0
+          v-btn.animated.fadeInLeft.wait-p4s(icon, slot='activator', dark, disabled).mx-0
             v-icon play_circle_outline
           span Insert Video / Audio
         v-tooltip(right, color='teal')
-          v-btn.animated.fadeInLeft.wait-p6s(icon, slot='activator', dark, disabled).mx-0
+          v-btn.animated.fadeInLeft.wait-p5s(icon, slot='activator', dark, disabled).mx-0
             v-icon multiline_chart
           span Insert Diagram
         v-tooltip(right, color='teal')
-          v-btn.animated.fadeInLeft.wait-p7s(icon, slot='activator', dark, disabled).mx-0
+          v-btn.animated.fadeInLeft.wait-p6s(icon, slot='activator', dark, disabled).mx-0
             v-icon functions
           span Insert Math Expression
         v-tooltip(right, color='teal')
-          v-btn.animated.fadeInLeft.wait-p8s(icon, slot='activator', dark, disabled).mx-0
+          v-btn.animated.fadeInLeft.wait-p7s(icon, slot='activator', dark, disabled).mx-0
             v-icon border_outer
           span Table Helper
-        v-spacer
-        v-tooltip(right, color='teal')
-          v-btn.animated.fadeInLeft.wait-p9s(icon, slot='activator', dark, @click='toggleFullscreen').mx-0
-            v-icon crop_free
-          span Distraction Free Mode
-        v-tooltip(right, color='teal')
-          v-btn.animated.fadeInLeft.wait-p10s(icon, slot='activator', dark, @click='toggleHelp').mx-0
-            v-icon(:color='helpShown ? `teal` : ``') help
-          span Markdown Formatting Help
+        template(v-if='$vuetify.breakpoint.mdAndUp')
+          v-spacer
+          v-tooltip(right, color='teal')
+            v-btn.animated.fadeInLeft.wait-p8s(icon, slot='activator', dark, @click='toggleFullscreen').mx-0
+              v-icon crop_free
+            span Distraction Free Mode
+          v-tooltip(right, color='teal')
+            v-btn.animated.fadeInLeft.wait-p9s(icon, slot='activator', dark, @click='toggleHelp').mx-0
+              v-icon(:color='helpShown ? `teal` : ``') help
+            span Markdown Formatting Help
       .editor-markdown-editor
         .editor-markdown-editor-title(v-if='previewShown', @click='previewShown = false') Editor
         .editor-markdown-editor-title(v-else='previewShown', @click='previewShown = true'): v-icon(dark) drag_indicator
@@ -143,10 +140,11 @@
     v-system-bar.editor-markdown-sysbar(dark, status, color='grey darken-3')
       .caption.editor-markdown-sysbar-locale {{locale.toUpperCase()}}
       .caption.px-3 /{{path}}
-      v-spacer
-      .caption Markdown
-      v-spacer
-      .caption Ln {{cursorPos.line + 1}}, Col {{cursorPos.ch + 1}}
+      template(v-if='$vuetify.breakpoint.mdAndUp')
+        v-spacer
+        .caption Markdown
+        v-spacer
+        .caption Ln {{cursorPos.line + 1}}, Col {{cursorPos.ch + 1}}
 
     markdown-help(v-if='helpShown')
 </template>
@@ -329,7 +327,11 @@ export default {
         return false
       })
 
-      cm.setSize(null, 'calc(100vh - 112px - 24px)')
+      if (this.$vuetify.breakpoint.mdAndUp) {
+        cm.setSize(null, 'calc(100vh - 112px - 24px)')
+      } else {
+        cm.setSize(null, 'calc(100vh - 112px - 16px)')
+      }
       cm.setOption('extraKeys', keyBindings)
       cm.on('cursorActivity', cm => {
         this.positionSync(cm)
@@ -462,6 +464,7 @@ export default {
 <style lang='scss'>
 
 $editor-height: calc(100vh - 112px - 24px);
+$editor-height-mobile: calc(100vh - 112px - 16px);
 
 .editor-markdown {
   &-main {
@@ -476,6 +479,10 @@ $editor-height: calc(100vh - 112px - 24px);
     height: $editor-height;
     position: relative;
 
+    @include until($tablet) {
+      height: $editor-height-mobile;
+    }
+
     &-title {
       background-color: mc('grey', '800');
       border-bottom-left-radius: 5px;
@@ -531,13 +538,17 @@ $editor-height: calc(100vh - 112px - 24px);
       height: $editor-height;
       overflow-y: scroll;
       padding: 1rem 1rem 1rem 0;
-      width: calc(100% + 1rem + 17px)
+      width: calc(100% + 1rem + 17px);
       // -ms-overflow-style: none;
 
       // &::-webkit-scrollbar {
       //   width: 0px;
       //   background: transparent;
       // }
+
+      @include until($tablet) {
+        height: $editor-height-mobile;
+      }
     }
 
     &-title {
@@ -588,6 +599,11 @@ $editor-height: calc(100vh - 112px - 24px);
     justify-content: flex-start;
     align-items: center;
     padding: 24px 0;
+
+    @include until($tablet) {
+      padding: 12px 0;
+      width: 40px;
+    }
   }
 
   &-sysbar {

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

@@ -2,36 +2,43 @@
   v-card.editor-modal-media.animated.fadeInLeft(flat, tile)
     v-container.pa-3(grid-list-lg, fluid)
       v-layout(row, wrap)
-        v-flex(xs9)
+        v-flex(xs12, xl9)
           v-card.radius-7.animated.fadeInLeft.wait-p1s(light)
             v-card-text
               .d-flex
                 v-toolbar.radius-7(color='teal lighten-5', dense, flat, height='44')
-                  .body-2.teal--text Images
-                v-btn.ml-3.my-0.radius-7(outline, large, color='teal', disabled)
-                  v-icon(left) keyboard_arrow_up
-                  span Parent Folder
-                v-btn.my-0.mr-0.radius-7(outline, large, color='teal')
-                  v-icon(left) add
-                  span New Folder
-              v-list.mt-3(dense, two-line)
-                template(v-for='(asset, idx) of assets')
-                  v-list-tile(@click='')
-                    v-list-tile-avatar
-                      v-avatar.radius-7(color='teal')
-                        v-icon(dark) image
-                    v-list-tile-content
-                      v-list-tile-title {{asset.filename}}
-                      v-list-tile-sub-title 1024x768
-                    v-list-tile-action
-                      .caption {{asset.updatedAt | moment('from')}}
-                    v-divider.mx-3(vertical)
-                    v-list-tile-action(style='flex-basis: 80px;')
-                      .caption {{asset.fileSize | prettyBytes}}
-                    v-divider.mx-3(vertical)
-                    v-list-tile-action(style='flex-basis: 60px;')
-                      v-chip.teal--text(label, small, color='teal lighten-5') {{asset.ext.toUpperCase().substring(1)}}
-                    v-list-tile-action
+                  .body-2.teal--text Assets
+                v-btn.ml-3.my-0.radius-7(outline, large, color='teal', disabled, :icon='$vuetify.breakpoint.xsOnly')
+                  v-icon(:left='$vuetify.breakpoint.mdAndUp') keyboard_arrow_up
+                  span.hidden-sm-and-down Parent Folder
+                v-btn.my-0.mr-0.radius-7(outline, large, color='teal', :icon='$vuetify.breakpoint.xsOnly')
+                  v-icon(:left='$vuetify.breakpoint.mdAndUp') add
+                  span.hidden-sm-and-down New Folder
+              v-data-table(
+                :items='assets'
+                :headers='headers'
+                :pagination.sync='pagination'
+                :rows-per-page-items='[15]'
+                :loading='loading'
+                must-sort,
+                hide-actions
+              )
+                template(slot='items', slot-scope='props')
+                  tr.is-clickable(
+                    @click.left='currentFileId = props.item.id'
+                    @click.right=''
+                    :class='currentFileId === props.item.id ? `teal lighten-5` : ``'
+                    )
+                    td.text-xs-right(v-if='$vuetify.breakpoint.smAndUp') {{ props.item.id }}
+                    td
+                      .body-2(:class='currentFileId === props.item.id ? `teal--text` : ``') {{ props.item.filename }}
+                      .caption {{ props.item.description }}
+                    td.text-xs-center(v-if='$vuetify.breakpoint.lgAndUp')
+                      v-chip(small, :color='$vuetify.dark ? `grey darken-4` : `grey lighten-4`')
+                        .caption {{props.item.ext.toUpperCase().substring(1)}}
+                    td(v-if='$vuetify.breakpoint.mdAndUp') {{ props.item.fileSize | prettyBytes }}
+                    td(v-if='$vuetify.breakpoint.mdAndUp') {{ props.item.updatedAt | moment('from') }}
+                    td(v-if='$vuetify.breakpoint.smAndUp')
                       v-menu(offset-x)
                         v-btn(icon, slot='activator')
                           v-icon(color='grey darken-2') more_horiz
@@ -41,11 +48,12 @@
                               v-icon(color='teal') short_text
                             v-list-tile-content Properties
                           v-divider
-                          v-list-tile
-                            v-list-tile-avatar
-                              v-icon(color='indigo') crop_rotate
-                            v-list-tile-content Edit
-                          v-divider
+                          template(v-if='props.item.kind === `IMAGE`')
+                            v-list-tile
+                              v-list-tile-avatar
+                                v-icon(color='indigo') crop_rotate
+                              v-list-tile-content Edit
+                            v-divider
                           v-list-tile
                             v-list-tile-avatar
                               v-icon(color='blue') keyboard
@@ -55,24 +63,28 @@
                             v-list-tile-avatar
                               v-icon(color='red') delete
                             v-list-tile-content Delete
-                  v-divider(v-if='idx < assets.length - 1')
+                template(slot='no-data')
+                  v-alert.ma-3(icon='warning', :value='true', outline) No assets to display.
+              .text-xs-center.py-2(v-if='this.pageTotal > 1')
+                v-pagination(v-model='pagination.page', :length='pageTotal')
               .d-flex.mt-3
                 v-toolbar.radius-7(flat, color='grey lighten-4', dense, height='44')
                   .body-2 / #[em root]
-                  v-spacer
-                  .body-1.grey--text.text--darken-1 10 files
-                v-btn.ml-3.mr-0.my-0.radius-7(color='teal', large, @click='insert', disabled)
+                  template(v-if='$vuetify.breakpoint.smAndUp')
+                    v-spacer
+                    .body-1.grey--text.text--darken-1 {{assets.length}} files
+                v-btn.ml-3.mr-0.my-0.radius-7(color='teal', large, @click='insert', :disabled='!currentFileId', :dark='currentFileId !== null')
                   v-icon(left) save_alt
                   span Insert
 
-        v-flex(xs3)
+        v-flex(xs12, xl3)
           v-card.radius-7.animated.fadeInRight.wait-p3s(light)
             v-card-text
               .d-flex
                 v-toolbar.radius-7(color='teal lighten-5', dense, flat, height='44')
                   v-icon.mr-3(color='teal') cloud_upload
-                  .body-2.teal--text Upload Images
-                v-btn.my-0.ml-3.mr-0.radius-7(outline, large, color='teal', @click='browse')
+                  .body-2.teal--text Upload Assets
+                v-btn.my-0.ml-3.mr-0.radius-7(outline, large, color='teal', @click='browse', v-if='$vuetify.breakpoint.mdAndUp')
                   v-icon(left) touch_app
                   span Browse
               file-pond.mt-3(
@@ -80,7 +92,6 @@
                 ref='pond'
                 label-idle='Browse or Drop files here...'
                 allow-multiple='true'
-                :accepted-file-types='[`image/jpeg`, `image/png`, `image/gif`, `image/svg`]'
                 :files='files'
                 max-files='10'
                 server='/u'
@@ -116,7 +127,7 @@
             v-card-text.pb-0
               v-toolbar.radius-7(color='teal lighten-5', dense, flat)
                 v-icon.mr-3(color='teal') format_align_left
-                .body-2.teal--text Alignment
+                .body-2.teal--text Image Alignment
               v-select.mt-3(
                 v-model='imageAlignment'
                 :items='imageAlignments'
@@ -133,11 +144,9 @@ import { sync } from 'vuex-pathify'
 import vueFilePond from 'vue-filepond'
 import 'filepond/dist/filepond.min.css'
 
-import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
-
 import listAssetQuery from 'gql/editor/editor-media-query-list.gql'
 
-const FilePond = vueFilePond(FilePondPluginFileValidateType)
+const FilePond = vueFilePond()
 
 export default {
   components: {
@@ -152,6 +161,8 @@ export default {
   data() {
     return {
       files: [],
+      assets: [],
+      pagination: {},
       remoteImageUrl: '',
       imageAlignments: [
         { text: 'None', value: '' },
@@ -159,7 +170,9 @@ export default {
         { text: 'Right', value: 'right' },
         { text: 'Absolute Top Right', value: 'abstopright' }
       ],
-      imageAlignment: ''
+      imageAlignment: '',
+      currentFileId: null,
+      loading: false
     }
   },
   computed: {
@@ -167,7 +180,24 @@ export default {
       get() { return this.value },
       set(val) { this.$emit('input', val) }
     },
-    activeModal: sync('editor/activeModal')
+    activeModal: sync('editor/activeModal'),
+    pageTotal () {
+      if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null) {
+        return 0
+      }
+
+      return Math.ceil(this.assets.length / this.pagination.rowsPerPage)
+    },
+    headers() {
+      return _.compact([
+        this.$vuetify.breakpoint.smAndUp && { text: 'ID', value: 'id', width: 50, align: 'right' },
+        { text: 'Title', value: 'title' },
+        this.$vuetify.breakpoint.lgAndUp && { text: 'Type', value: 'path', width: 50 },
+        this.$vuetify.breakpoint.mdAndUp && { text: 'File Size', value: 'createdAt', width: 150 },
+        this.$vuetify.breakpoint.mdAndUp && { text: 'Last Updated', value: 'updatedAt', width: 150 },
+        this.$vuetify.breakpoint.smAndUp && { text: '', value: '', width: 50, sortable: false }
+      ])
+    }
   },
   filters: {
     prettyBytes(num) {
@@ -198,6 +228,7 @@ export default {
   methods: {
     insert () {
       this.activeModal = ''
+
     },
     browse () {
       this.$refs.pond.browse()
@@ -237,12 +268,13 @@ export default {
     assets: {
       query: listAssetQuery,
       variables: {
-        kind: 'IMAGE'
+        kind: 'ALL'
       },
       throttle: 1000,
       fetchPolicy: 'network-only',
       update: (data) => data.assets.list,
       watchLoading (isLoading) {
+        this.loading = isLoading
         this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'editor-media-list-refresh')
       }
     }
@@ -261,6 +293,12 @@ export default {
   background-color: rgba(darken(mc('grey', '900'), 3%), .9) !important;
   overflow: auto;
 
+  @include until($tablet) {
+    left: 40px;
+    width: calc(100vw - 40px);
+    height: calc(100vh - 112px - 24px);
+  }
+
   .filepond--root {
     margin-bottom: 0;
   }
@@ -272,5 +310,9 @@ export default {
       cursor: pointer;
     }
   }
+
+  .v-btn--icon {
+    padding: 0 20px;
+  }
 }
 </style>

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

@@ -4,6 +4,7 @@
     persistent
     lazy
     width='1100'
+    :fullscreen='$vuetify.breakpoint.smAndDown'
     )
     .dialog-header
       v-icon(color='white') sort_by_alpha

client/components/editor/markdown/help.vue

@@ -2,7 +2,7 @@
   v-card.editor-markdown-help.animated.fadeInLeft(flat, tile)
     v-container.pa-3(grid-list-lg, fluid)
       v-layout(row, wrap)
-        v-flex(xs4)
+        v-flex(xs12, lg6, xl4)
           v-card.radius-7.animated.fadeInUp(light)
             v-card-text
               .d-flex
@@ -98,7 +98,7 @@
                         li Unordered List Item 2
                         li Unordered List Item 3
 
-        v-flex(xs4)
+        v-flex(xs12, lg6, xl4)
           v-card.radius-7.animated.fadeInUp.wait-p1s(light)
             v-card-text
               .d-flex
@@ -196,7 +196,7 @@
                     v-card-text
                       blockquote(style='border: 1px solid #263238; border-radius: .5rem; padding: 1rem 24px;') Lorem ipsum#[br]dolor sit amet#[br]consectetur adipiscing elit
 
-        v-flex(xs4)
+        v-flex(xs12, xl4)
           v-card.radius-7.animated.fadeInUp.wait-p2s(light)
             v-card-text
               v-toolbar.radius-7(color='teal lighten-5', dense, flat)

client/scss/components/v-dialog.scss

@@ -27,3 +27,9 @@
                       radial-gradient(ellipse at bottom, mc('grey', '800'), mc('grey', '900'));
   }
 }
+
+.v-dialog--fullscreen {
+  @include until($tablet) {
+    padding-top: 56px;
+  }
+}

server/graph/resolvers/asset.js

@@ -12,10 +12,13 @@ module.exports = {
   },
   AssetQuery: {
     async list(obj, args, context) {
-      const result = await WIKI.models.assets.query().where({
-        folderId: null,
-        kind: args.kind.toLowerCase()
-      })
+      let cond = {
+        folderId: null
+      }
+      if (args.kind !== 'ALL') {
+        cond.kind = args.kind.toLowerCase()
+      }
+      const result = await WIKI.models.assets.query().where(cond)
       return result.map(a => ({
         ...a,
         kind: a.kind.toUpperCase()

server/graph/schemas/asset.graphql

@@ -56,4 +56,5 @@ type AssetFolder {
 enum AssetKind {
   IMAGE
   BINARY
+  ALL
 }

server/models/assets.js

@@ -96,13 +96,9 @@ module.exports = class Asset extends Model {
   }
 
   static async getAsset(assetPath, res) {
-    let asset = await WIKI.models.assets.getAssetFromCache(assetPath, res)
-    if (!asset) {
-      // asset = await WIKI.models.assets.getAssetFromDb(assetPath, res)
-      // if (asset) {
-      //   await WIKI.models.assets.saveAssetToCache(asset)
-      // }
-      res.sendStatus(404)
+    let assetExists = await WIKI.models.assets.getAssetFromCache(assetPath, res)
+    if (!assetExists) {
+      await WIKI.models.assets.getAssetFromDb(assetPath, res)
     }
   }
 
@@ -121,4 +117,19 @@ module.exports = class Asset extends Model {
       })
     })
   }
+
+  static async getAssetFromDb(assetPath, res) {
+    const fileHash = assetHelper.generateHash(assetPath)
+    const cachePath = path.join(process.cwd(), `data/cache/${fileHash}.dat`)
+
+    const asset = await WIKI.models.assets.query().where('hash', fileHash).first()
+    if (asset) {
+      const assetData = await WIKI.models.knex('assetData').where('id', asset.id).first()
+      res.type(asset.ext)
+      res.send(assetData.data)
+      await fs.outputFile(cachePath, assetData.data)
+    } else {
+      res.sendStatus(404)
+    }
+  }
 }