Added FileItem wrapper around oc-file

Better encapsulation of formatting methods as computed properties instead of using the mixin.
owncloud · Mar 17, 2020 · 2fbdb54 · 2fbdb54
1 parent b6be75c
commit 2fbdb54
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 66 deletions.
diff --git a/apps/files/src/components/AllFilesList.vue b/apps/files/src/components/AllFilesList.vue
@@ -48,14 +48,12 @@
         <oc-star class="uk-display-block" @click.native.stop="toggleFileFavorite(item)" :shining="item.starred" />
       </div>
       <div class="uk-text-truncate uk-width-expand" :ref="index === 0 ? 'firstRowNameColumn' : null">
-        <oc-file
+        <file-item
           @click.native.stop="item.type === 'folder' ? navigateTo(item.path.substr(1)) : openFileActionBar(item)"
-          :name="$_ocFileName(item)"
-          :extension="item.extension"
+          :item="item"
+          :show-path="$_isFavoritesList"
           class="file-row-name"
-          :icon="fileTypeIcon(item)"
-          :iconUrl="previewUrl(item)"
-          :filename="item.name" :key="item.id"/>
+          :key="item.id"/>
         <oc-spinner
           v-if="actionInProgress(item)"
           size="small"
@@ -116,6 +114,7 @@
 </template>
 <script>
 import FileList from './FileList.vue'
+import FileItem from './FileItem.vue'
 import NoContentMessage from './NoContentMessage.vue'
 import { mapGetters, mapActions, mapState } from 'vuex'
 
@@ -129,6 +128,7 @@ export default {
   name: 'AllFilesList',
   components: {
     FileList,
+    FileItem,
     StatusIndicators,
     NoContentMessage,
     SortableColumnHeader
@@ -242,14 +242,6 @@ export default {
         file: item
       })
     },
-    $_ocFileName (item) {
-      if (this.$_isFavoritesList) {
-        const pathSplit = item.path.substr(1).split('/')
-        if (pathSplit.length === 2) return `${pathSplit[pathSplit.length - 2]}/${item.basename}`
-        if (pathSplit.length > 2) return `…/${pathSplit[pathSplit.length - 2]}/${item.basename}`
-      }
-      return item.basename
-    },
 
     isActionEnabled (item, action) {
       return action.isEnabled(item, this.parentFolder)

diff --git a/apps/files/src/components/FileItem.vue b/apps/files/src/components/FileItem.vue
@@ -0,0 +1,97 @@
+<template>
+  <oc-file
+    :name="fileName"
+    :extension="item.extension"
+    :icon="fileTypeIcon"
+    :iconUrl="previewUrl"
+    :filename="item.name"
+    />
+</template>
+<script>
+import queryString from 'query-string'
+import fileTypeIconMappings from '../fileTypeIconMappings.json'
+
+export default {
+  name: 'FileItem',
+  props: {
+    /**
+         * The html element used for the avatar container.
+         * `div, span`
+         */
+    item: {
+      type: Object
+    },
+    showPath: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: function () {
+    return {
+      previewUrl: undefined
+    }
+  },
+  computed: {
+    fileName () {
+      if (this.showPath) {
+        const pathSplit = this.item.path.substr(1).split('/')
+        if (pathSplit.length === 2) return `${pathSplit[pathSplit.length - 2]}/${this.item.basename}`
+        if (pathSplit.length > 2) return `…/${pathSplit[pathSplit.length - 2]}/${this.item.basename}`
+      }
+      return this.item.basename
+    },
+    // FIXME: duplicate in mixin
+    fileTypeIcon () {
+      if (this.item.type === 'folder') {
+        return 'folder'
+      }
+      const icon = fileTypeIconMappings[this.item.extension]
+      if (icon) return `${icon}`
+      return 'x-office-document'
+    }
+  },
+  mounted () {
+    console.log('FileItem: mounted()')
+    this.loadPreview()
+  },
+  methods: {
+    loadPreview () {
+      // TODO: check if previews are globally enabled (requires capability entry)
+      if (this.item.type === 'folder') {
+        return
+      }
+      const query = queryString.stringify({
+        x: this.thumbDimensions,
+        y: this.thumbDimensions,
+        c: this.item.etag,
+        scalingup: 0,
+        preview: 1,
+        a: 1
+      })
+
+      let previewPath
+      if (this.publicPage()) {
+        previewPath = [
+          '..',
+          'dav',
+          'public-files',
+          this.item.path
+        ].join('/')
+      } else {
+        previewPath = [
+          '..',
+          'dav',
+          'files',
+          this.$store.getters.user.id,
+          this.item.path
+        ].join('/')
+      }
+      console.log('loading preview for: ', this.item.name)
+      const previewUrl = this.$client.files.getFileUrl(previewPath) + '?' + query
+      this.mediaSource(previewUrl, 'url', this.requestHeaders).then(dataUrl => {
+        this.previewUrl = dataUrl
+      })
+    }
+  }
+}
+</script>
diff --git a/apps/files/src/mixins.js b/apps/files/src/mixins.js
@@ -2,7 +2,6 @@ import filesize from 'filesize'
 import pathUtil from 'path'
 import moment from 'moment'
 import fileTypeIconMappings from './fileTypeIconMappings.json'
-import queryString from 'query-string'
 import { mapActions, mapGetters } from 'vuex'
 const { default: PQueue } = require('p-queue')
 
@@ -49,11 +48,6 @@ export default {
       return this.highlightedFile !== null
     },
 
-    isPreviewsEnabled () {
-      // FIXME: retrieve from capabilities when ready
-      return true
-    },
-
     requestHeaders () {
       if (!this.publicPage()) {
         return null
@@ -109,52 +103,6 @@ export default {
       }
       return 'x-office-document'
     },
-    loadPreviewUrl (file) {
-      if (!this.isPreviewsEnabled || file.type === 'folder') {
-        return null
-      }
-      const query = queryString.stringify({
-        x: this.thumbDimensions,
-        y: this.thumbDimensions,
-        c: file.etag,
-        scalingup: 0,
-        preview: 1,
-        a: 1
-      })
-
-      let previewPath
-      if (this.publicPage()) {
-        previewPath = [
-          '..',
-          'dav',
-          'public-files',
-          file.path
-        ].join('/')
-      } else {
-        previewPath = [
-          '..',
-          'dav',
-          'files',
-          this.$store.getters.user.id,
-          file.path
-        ].join('/')
-      }
-      const previewUrl = this.$client.files.getFileUrl(previewPath) + '?' + query
-      return this.mediaSource(previewUrl, 'url', this.requestHeaders)
-    },
-
-    previewUrl (file) {
-      if (!file._previewPromise) {
-        file._previewPromise = this.loadPreviewUrl(file)
-        if (file._previewPromise) {
-          file._previewPromise.then(imageUrl => {
-            file.previewData = imageUrl
-          })
-        }
-      }
-      return file.previewData
-    },
-
     label (string) {
       const cssClass = ['uk-label']