Move table header positioning into mixin

packages/web-app-files/src/components/AppBar.vue

@@ -93,7 +93,7 @@ import isEmpty from 'lodash-es/isEmpty'
 import Mixins from '../mixins'
 import MixinFileActions from '../mixins/fileActions'
 import MixinRoutes from '../mixins/routes'
-import MixinScrollToResource from '../mixins/scrollToResource'
+import MixinScrollToResource from '../mixins/filesListScrolling'
 import { buildResource } from '../helpers/resources'
 
 import FileUpload from './FileUpload.vue'

packages/web-app-files/src/mixins/filesListPositioning.js

@@ -0,0 +1,13 @@
+export default {
+  data: () => ({
+    headerPosition: 0
+  }),
+  methods: {
+    adjustTableHeaderPosition() {
+      this.$nextTick(() => {
+        const appBar = document.querySelector('#files-app-bar')
+        this.headerPosition = appBar.getBoundingClientRect().bottom
+      })
+    }
+  }
+}

packages/web-app-files/src/store/actions.js

@@ -507,11 +507,9 @@ export default {
         dimensions = 3840
     }
 
-    let davUrl = rootGetters.configuration.server
-
-    davUrl += isPublic
-      ? 'remote.php/dav/public-files'
-      : 'remote.php/dav/files/' + rootGetters.user.id
+    const davUrl =
+      rootGetters.configuration.server +
+      (isPublic ? 'remote.php/dav/public-files' : 'remote.php/dav/files/' + rootGetters.user.id)
 
     const query = {
       x: dimensions,
@@ -522,24 +520,20 @@ export default {
     }
 
     for (const resource of resources) {
-      if (!resource.extension) {
+      if (resource.type === 'folder' || !resource.extension) {
         continue
       }
 
-      const etag = resource.etag
-
+      const etag = (resource.etag || '').replace('"', '')
       if (etag) {
-        query.c = etag.substr(1, etag.length - 2)
+        query.c = etag
       }
 
       const previewUrl = davUrl + resource.path + '?' + queryString.stringify(query)
-
       try {
         resource.preview = await mediaSource(previewUrl, 'url')
         commit('UPDATE_RESOURCE', resource)
-      } catch (error) {
-        console.error(error)
-      }
+      } catch (ignored) {}
     }
   }
 }

packages/web-app-files/src/views/Favorites.vue

@@ -52,6 +52,7 @@ import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
 
 import { buildResource, getResourceSize } from '../helpers/resources'
 import FileActions from '../mixins/fileActions'
+import MixinFilesListPositioning from '../mixins/filesListPositioning'
 
 import QuickActions from '../components/FilesLists/QuickActions.vue'
 import ListLoader from '../components/ListLoader.vue'
@@ -60,11 +61,10 @@ import NoContentMessage from '../components/NoContentMessage.vue'
 export default {
   components: { QuickActions, ListLoader, NoContentMessage },
 
-  mixins: [FileActions],
+  mixins: [FileActions, MixinFilesListPositioning],
 
   data: () => ({
-    loading: true,
-    headerPosition: 60
+    loading: true
   }),
 
   computed: {
@@ -106,7 +106,7 @@ export default {
     }
   },
 
-  watwch: {
+  watch: {
     uploadProgressVisible() {
       this.adjustTableHeaderPosition()
     }
@@ -117,6 +117,10 @@ export default {
     window.onresize = this.adjustTableHeaderPosition
   },
 
+  mounted() {
+    this.adjustTableHeaderPosition()
+  },
+
   methods: {
     ...mapActions('Files', ['setHighlightedFile', 'loadIndicators', 'loadPreviews']),
     ...mapMutations('Files', ['SELECT_RESOURCES', 'LOAD_FILES', 'CLEAR_CURRENT_FILES_LIST']),
@@ -147,12 +151,6 @@ export default {
 
     getResourceSize(size) {
       return getResourceSize(size)
-    },
-
-    adjustTableHeaderPosition() {
-      const appBarPosition = document.querySelector('#files-app-bar')
-
-      this.headerPosition = appBarPosition.getBoundingClientRect().bottom
     }
   }
 }

packages/web-app-files/src/views/Personal.vue

@@ -65,7 +65,8 @@
 import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
 
 import FileActions from '../mixins/fileActions'
-import MixinScrollToResource from '../mixins/scrollToResource'
+import MixinFilesListScrolling from '../mixins/filesListScrolling'
+import MixinFilesListPositioning from '../mixins/filesListPositioning'
 import { buildResource, getResourceSize } from '../helpers/resources'
 
 import QuickActions from '../components/FilesLists/QuickActions.vue'
@@ -76,11 +77,10 @@ import NotFoundMessage from '../components/FilesLists/NotFoundMessage.vue'
 export default {
   components: { QuickActions, ListLoader, NoContentMessage, NotFoundMessage },
 
-  mixins: [FileActions, MixinScrollToResource],
+  mixins: [FileActions, MixinFilesListPositioning, MixinFilesListScrolling],
 
   data: () => ({
-    loading: true,
-    headerPosition: 150
+    loading: true
   }),
 
   computed: {
@@ -138,6 +138,10 @@ export default {
     window.onresize = this.adjustTableHeaderPosition
   },
 
+  mounted() {
+    this.adjustTableHeaderPosition()
+  },
+
   methods: {
     ...mapActions('Files', ['setHighlightedFile', 'loadIndicators', 'loadPreviews']),
     ...mapMutations('Files', [
@@ -187,24 +191,18 @@ export default {
     },
 
     scrollToResourceFromRoute() {
-      let resource = this.$route.query.scrollTo
+      const resourceName = this.$route.query.scrollTo
 
-      if (resource && this.activeFiles.length > 0) {
+      if (resourceName && this.activeFiles.length > 0) {
         this.$nextTick(() => {
-          resource = this.activeFiles.find(r => r.name === resource)
+          const resource = this.activeFiles.find(r => r.name === resourceName)
 
           if (resource) {
             this.setHighlightedFile(resource)
             this.scrollToResource(resource)
           }
         })
       }
-    },
-
-    adjustTableHeaderPosition() {
-      const appBar = document.querySelector('#files-app-bar')
-
-      this.headerPosition = appBar.getBoundingClientRect().bottom
     }
   }
 }

packages/web-app-files/src/views/PublicFiles.vue

@@ -56,6 +56,7 @@ import { mapGetters, mapActions, mapMutations } from 'vuex'
 
 import { getResourceSize, buildResource } from '../helpers/resources'
 import FileActions from '../mixins/fileActions'
+import MixinFilesListPositioning from '../mixins/filesListPositioning'
 
 import ListLoader from '../components/ListLoader.vue'
 import NoContentMessage from '../components/NoContentMessage.vue'
@@ -68,11 +69,10 @@ export default {
     NotFoundMessage
   },
 
-  mixins: [FileActions],
+  mixins: [FileActions, MixinFilesListPositioning],
 
   data: () => ({
-    loading: true,
-    headerPosition: 90
+    loading: true
   }),
 
   computed: {
@@ -123,6 +123,10 @@ export default {
     window.onresize = this.adjustTableHeaderPosition
   },
 
+  mounted() {
+    this.adjustTableHeaderPosition()
+  },
+
   methods: {
     ...mapActions('Files', ['setHighlightedFile', 'loadIndicators', 'loadPreviews']),
     ...mapMutations('Files', ['SET_CURRENT_FOLDER', 'CLEAR_CURRENT_FILES_LIST', 'LOAD_FILES']),
@@ -154,12 +158,6 @@ export default {
 
     getResourceSize(size) {
       return getResourceSize(size)
-    },
-
-    adjustTableHeaderPosition() {
-      const appBarPosition = document.querySelector('#files-app-bar')
-
-      this.headerPosition = appBarPosition.getBoundingClientRect().bottom
     }
   }
 }

packages/web-app-files/src/views/SharedWithMe.vue

@@ -83,6 +83,7 @@ import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
 
 import { aggregateResourceShares, buildResource, getResourceSize } from '../helpers/resources'
 import FileActions from '../mixins/fileActions'
+import MixinFilesListPositioning from '../mixins/filesListPositioning'
 
 import QuickActions from '../components/FilesLists/QuickActions.vue'
 import ListLoader from '../components/ListLoader.vue'
@@ -91,11 +92,10 @@ import NoContentMessage from '../components/NoContentMessage.vue'
 export default {
   components: { QuickActions, ListLoader, NoContentMessage },
 
-  mixins: [FileActions],
+  mixins: [FileActions, MixinFilesListPositioning],
 
   data: () => ({
-    loading: true,
-    headerPosition: 60
+    loading: true
   }),
 
   computed: {
@@ -147,6 +147,10 @@ export default {
     window.onresize = this.adjustTableHeaderPosition
   },
 
+  mounted() {
+    this.adjustTableHeaderPosition()
+  },
+
   methods: {
     ...mapActions('Files', ['setHighlightedFile', 'loadIndicators', 'loadPreviews']),
     ...mapActions(['showMessage']),
@@ -220,12 +224,6 @@ export default {
       return getResourceSize(size)
     },
 
-    adjustTableHeaderPosition() {
-      const appBarPosition = document.querySelector('#files-app-bar')
-
-      this.headerPosition = appBarPosition.getBoundingClientRect().bottom
-    },
-
     async pendingShareAction(resource, type) {
       try {
         await this.$client.requests.ocs({

packages/web-app-files/src/views/SharedWithOthers.vue

@@ -59,6 +59,7 @@ import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
 
 import { aggregateResourceShares, buildResource, getResourceSize } from '../helpers/resources'
 import FileActions from '../mixins/fileActions'
+import MixinFilesListPositioning from '../mixins/filesListPositioning'
 
 import QuickActions from '../components/FilesLists/QuickActions.vue'
 import ListLoader from '../components/ListLoader.vue'
@@ -67,11 +68,10 @@ import NoContentMessage from '../components/NoContentMessage.vue'
 export default {
   components: { QuickActions, ListLoader, NoContentMessage },
 
-  mixins: [FileActions],
+  mixins: [FileActions, MixinFilesListPositioning],
 
   data: () => ({
-    loading: true,
-    headerPosition: 60
+    loading: true
   }),
 
   computed: {
@@ -124,6 +124,10 @@ export default {
     window.onresize = this.adjustTableHeaderPosition
   },
 
+  mounted() {
+    this.adjustTableHeaderPosition()
+  },
+
   methods: {
     ...mapActions('Files', ['setHighlightedFile', 'loadIndicators', 'loadPreviews']),
     ...mapMutations('Files', ['LOAD_FILES', 'SELECT_RESOURCES', 'CLEAR_CURRENT_FILES_LIST']),
@@ -189,12 +193,6 @@ export default {
 
     getResourceSize(size) {
       return getResourceSize(size)
-    },
-
-    adjustTableHeaderPosition() {
-      const appBarPosition = document.querySelector('#files-app-bar')
-
-      this.headerPosition = appBarPosition.getBoundingClientRect().bottom
     }
   }
 }

packages/web-app-files/src/views/Trashbin.vue

@@ -51,16 +51,18 @@
 import { mapGetters, mapActions, mapMutations } from 'vuex'
 
 import { buildDeletedResource, buildResource, getResourceSize } from '../helpers/resources'
+import MixinFilesListPositioning from '../mixins/filesListPositioning'
 
 import ListLoader from '../components/ListLoader.vue'
 import NoContentMessage from '../components/NoContentMessage.vue'
 
 export default {
   components: { ListLoader, NoContentMessage },
 
+  mixins: [MixinFilesListPositioning],
+
   data: () => ({
-    loading: true,
-    headerPosition: 110
+    loading: true
   }),
 
   computed: {
@@ -106,6 +108,10 @@ export default {
     window.onresize = this.adjustTableHeaderPosition
   },
 
+  mounted() {
+    this.adjustTableHeaderPosition()
+  },
+
   methods: {
     ...mapActions('Files', ['setHighlightedFile']),
     ...mapMutations('Files', ['LOAD_FILES', 'SELECT_RESOURCES', 'CLEAR_CURRENT_FILES_LIST']),
@@ -132,12 +138,6 @@ export default {
 
     getResourceSize(size) {
       return getResourceSize(size)
-    },
-
-    adjustTableHeaderPosition() {
-      const appBar = document.querySelector('#files-app-bar')
-
-      this.headerPosition = appBar.getBoundingClientRect().bottom
     }
   }
 }