feat: add page size

__fixtures__/deletedFiles.js

@@ -8,22 +8,22 @@ export default [
     tusSupport: null
   },
   {
-    name: '/trash-bin/alice/3871',
+    name: '/trash-bin/alice/3875',
     type: 'dir',
     fileInfo: {
-      '{http://owncloud.org/ns}trashbin-original-filename': 'Documents',
-      '{http://owncloud.org/ns}trashbin-original-location': 'Documents',
+      '{http://owncloud.org/ns}trashbin-original-filename': '.hidden-folder',
+      '{http://owncloud.org/ns}trashbin-original-location': '.hidden-folder',
       '{http://owncloud.org/ns}trashbin-delete-datetime': 'Mon, 14 Jun 2021 12:15:33 GMT',
       '{DAV:}resourcetype': ['{DAV:}collection']
     },
     tusSupport: null
   },
   {
-    name: '/trash-bin/alice/3875',
+    name: '/trash-bin/alice/3871',
     type: 'dir',
     fileInfo: {
-      '{http://owncloud.org/ns}trashbin-original-filename': '.hidden-folder',
-      '{http://owncloud.org/ns}trashbin-original-location': '.hidden-folder',
+      '{http://owncloud.org/ns}trashbin-original-filename': 'Documents',
+      '{http://owncloud.org/ns}trashbin-original-location': 'Documents',
       '{http://owncloud.org/ns}trashbin-delete-datetime': 'Mon, 14 Jun 2021 12:15:33 GMT',
       '{DAV:}resourcetype': ['{DAV:}collection']
     },

__fixtures__/favoriteFiles.js

@@ -1,36 +1,36 @@
 export default [
   {
-    name: '/Documents',
+    name: '/.hidden-folder',
     type: 'dir',
     fileInfo: {
       '{http://owncloud.org/ns}permissions': 'RDNVCK',
       '{http://owncloud.org/ns}favorite': '1',
-      '{http://owncloud.org/ns}fileid': '3867',
-      '{http://owncloud.org/ns}owner-id': 'alice',
-      '{http://owncloud.org/ns}owner-display-name': 'alice',
+      '{http://owncloud.org/ns}fileid': '14',
+      '{http://owncloud.org/ns}owner-id': 'admin',
+      '{http://owncloud.org/ns}owner-display-name': 'admin',
       '{http://owncloud.org/ns}share-types': '',
-      '{http://owncloud.org/ns}privatelink': 'http://host.docker.internal:8080/f/3867',
-      '{http://owncloud.org/ns}size': '36227',
-      '{DAV:}getlastmodified': 'Mon, 14 Jun 2021 09:41:16 GMT',
-      '{DAV:}getetag': '"60c7243c2e7f1"',
+      '{http://owncloud.org/ns}privatelink': 'http://localhost:8080/f/14',
+      '{http://owncloud.org/ns}size': '0',
+      '{DAV:}getlastmodified': 'Thu, 24 Jun 2021 15:03:58 GMT',
+      '{DAV:}getetag': '"60d49edf01ab8"',
       '{DAV:}resourcetype': ['{DAV:}collection']
     },
     tusSupport: null
   },
   {
-    name: '/.hidden folder',
+    name: '/Documents',
     type: 'dir',
     fileInfo: {
       '{http://owncloud.org/ns}permissions': 'RDNVCK',
       '{http://owncloud.org/ns}favorite': '1',
-      '{http://owncloud.org/ns}fileid': '14',
-      '{http://owncloud.org/ns}owner-id': 'admin',
-      '{http://owncloud.org/ns}owner-display-name': 'admin',
+      '{http://owncloud.org/ns}fileid': '3867',
+      '{http://owncloud.org/ns}owner-id': 'alice',
+      '{http://owncloud.org/ns}owner-display-name': 'alice',
       '{http://owncloud.org/ns}share-types': '',
-      '{http://owncloud.org/ns}privatelink': 'http://localhost:8080/f/14',
-      '{http://owncloud.org/ns}size': '0',
-      '{DAV:}getlastmodified': 'Thu, 24 Jun 2021 15:03:58 GMT',
-      '{DAV:}getetag': '"60d49edf01ab8"',
+      '{http://owncloud.org/ns}privatelink': 'http://host.docker.internal:8080/f/3867',
+      '{http://owncloud.org/ns}size': '36227',
+      '{DAV:}getlastmodified': 'Mon, 14 Jun 2021 09:41:16 GMT',
+      '{DAV:}getetag': '"60c7243c2e7f1"',
       '{DAV:}resourcetype': ['{DAV:}collection']
     },
     tusSupport: null

__fixtures__/files.js

@@ -19,7 +19,7 @@ export default {
       tusSupport: null
     },
     {
-      name: '/.hidden folder',
+      name: '/.hidden-folder',
       type: 'dir',
       fileInfo: {
         '{http://owncloud.org/ns}permissions': 'RDNVCK',

changelog/unreleased/enhancement-add-page-size

@@ -0,0 +1,6 @@
+Enhancement: add page size view option
+
+We've added a new item into the view options which can be used to set the number of items displayed per page.
+This value is persisted in the local storage so that the user doesn't have to update it every time he visits the app.
+
+https://github.com/owncloud/web/pull/5470

package.json

@@ -41,6 +41,8 @@
     "@rollup/plugin-html": "^0.2.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-typescript": "^8.2.1",
+    "@testing-library/jest-dom": "^5.13.0",
+    "@testing-library/vue": "^5.6.2",
     "@types/jest": "^26.0.23",
     "@types/jest-axe": "^3.5.2",
     "@typescript-eslint/eslint-plugin": "^4.26.0",
@@ -78,6 +80,7 @@
     "jest-serializer-vue": "^2.0.2",
     "jest-svg-transformer": "^1.0.0",
     "join-path": "^1.1.1",
+    "jsdom": "^16.6.0",
     "ldapjs": "^2.2.3",
     "lodash": "^4.17.21",
     "nightwatch": "1.5.1",
@@ -104,13 +107,10 @@
     "rollup-plugin-ts": "^1.4.0",
     "rollup-plugin-visualizer": "^5.5.1",
     "rollup-plugin-vue": "^5.1.4",
+    "sync-fetch": "^0.3.0",
     "ts-jest": "^26.5.6",
     "tslib": "^2.2.0",
     "typescript": "^4.3.2",
-    "@testing-library/jest-dom": "^5.13.0",
-    "@testing-library/vue": "^5.6.2",
-    "jsdom": "^16.6.0",
-    "sync-fetch": "^0.3.0",
     "url-search-params-polyfill": "^8.0.0",
     "vue-jest": "^3.0.7",
     "vue-template-compiler": "^2.6.12",

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

@@ -99,35 +99,7 @@
           <size-info v-if="selectedFiles.length > 0" class="oc-mr-s uk-visible@l" />
           <batch-actions />
         </div>
-        <oc-button
-          id="files-view-options-btn"
-          key="files-view-options-btn"
-          data-testid="files-view-options-btn"
-          :aria-label="viewButtonAriaLabel"
-          variation="passive"
-          appearance="raw"
-          size="small"
-          gap-size="xsmall"
-        >
-          <oc-icon name="tune" size="small" />
-          <translate>View</translate>
-        </oc-button>
-        <oc-drop
-          drop-id="files-view-options-drop"
-          toggle="#files-view-options-btn"
-          mode="click"
-          class="uk-width-auto"
-        >
-          <oc-list>
-            <li>
-              <oc-switch
-                v-model="hiddenFilesShownModel"
-                data-testid="files-switch-hidden-files"
-                :label="$gettext('Show hidden files')"
-              />
-            </li>
-          </oc-list>
-        </oc-drop>
+        <view-options />
       </div>
     </div>
   </div>
@@ -149,14 +121,16 @@ import FileDrop from './Upload/FileDrop.vue'
 import FileUpload from './Upload/FileUpload.vue'
 import FolderUpload from './Upload/FolderUpload.vue'
 import SizeInfo from './SelectedResources/SizeInfo.vue'
+import ViewOptions from './ViewOptions.vue'
 
 export default {
   components: {
     BatchActions,
     FileDrop,
     FileUpload,
     FolderUpload,
-    SizeInfo
+    SizeInfo,
+    ViewOptions
   },
   mixins: [Mixins, MixinFileActions, MixinRoutes, MixinScrollToResource],
   data: () => ({
@@ -194,10 +168,6 @@ export default {
       return this.$gettext('Add files or folders')
     },
 
-    viewButtonAriaLabel() {
-      return this.$gettext('Display customization options of the files list')
-    },
-
     currentPath() {
       const path = this.$route.params.item || ''
       if (path.endsWith('/')) {
@@ -304,16 +274,6 @@ export default {
         this.selectedFiles.length
       )
       return this.$gettextInterpolate(translated, { amount: this.selectedFiles.length })
-    },
-
-    hiddenFilesShownModel: {
-      get() {
-        return this.areHiddenFilesShown
-      },
-
-      set(value) {
-        this.SET_HIDDEN_FILES_VISIBILITY(value)
-      }
     }
   },
 

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

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <oc-button
+      id="files-view-options-btn"
+      key="files-view-options-btn"
+      data-testid="files-view-options-btn"
+      :aria-label="viewButtonAriaLabel"
+      variation="passive"
+      appearance="raw"
+      size="small"
+      gap-size="xsmall"
+    >
+      <oc-icon name="tune" size="small" />
+      <translate>View</translate>
+    </oc-button>
+    <oc-drop
+      drop-id="files-view-options-drop"
+      toggle="#files-view-options-btn"
+      mode="click"
+      class="uk-width-auto"
+    >
+      <oc-list>
+        <li class="files-view-options-list-item">
+          <oc-switch
+            v-model="hiddenFilesShownModel"
+            data-testid="files-switch-hidden-files"
+            :label="$gettext('Show hidden files')"
+          />
+        </li>
+        <li class="files-view-options-list-item">
+          <oc-page-size
+            v-model="pageItemsLimit"
+            data-testid="files-pagination-size"
+            :label="$gettext('Items per page')"
+            :options="[100, 500, 1000, $gettext('All')]"
+            class="files-pagination-size"
+          />
+        </li>
+      </oc-list>
+    </oc-drop>
+  </div>
+</template>
+
+<script>
+import { mapMutations, mapState } from 'vuex'
+
+export default {
+  computed: {
+    ...mapState('Files', ['areHiddenFilesShown', 'filesPageLimit']),
+
+    viewButtonAriaLabel() {
+      return this.$gettext('Display customization options of the files list')
+    },
+
+    hiddenFilesShownModel: {
+      get() {
+        return this.areHiddenFilesShown
+      },
+
+      set(value) {
+        this.SET_HIDDEN_FILES_VISIBILITY(value)
+      }
+    },
+
+    pageItemsLimit: {
+      get() {
+        return this.filesPageLimit
+      },
+
+      set(value) {
+        this.updateQuery(value)
+      }
+    }
+  },
+
+  watch: {
+    $route: {
+      handler(route) {
+        if (Object.prototype.hasOwnProperty.call(route.query, 'items-limit')) {
+          this.SET_FILES_PAGE_LIMIT(route.query['items-limit'])
+
+          return
+        }
+
+        this.updateQuery()
+      },
+      immediate: true
+    }
+  },
+
+  methods: {
+    ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY', 'SET_FILES_PAGE_LIMIT']),
+
+    updateQuery(limit = this.pageItemsLimit) {
+      const query = { ...this.$route.query, 'items-limit': limit }
+
+      this.SET_FILES_PAGE_LIMIT(limit)
+      this.$router.replace({ query }).catch(() => {})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.files-view-options-list-item {
+  & > * {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  & + & {
+    margin-top: var(--oc-space-small);
+  }
+}
+</style>

packages/web-app-files/src/components/FilesList/Pagination.vue

@@ -0,0 +1,21 @@
+<template>
+  <oc-pagination
+    v-if="pages > 1"
+    :pages="pages"
+    :current-page="currentPage"
+    :max-displayed="3"
+    :current-route="$route"
+    class="files-pagination uk-flex uk-flex-center oc-my-s"
+  />
+</template>
+
+<script>
+import { mapState, mapGetters } from 'vuex'
+
+export default {
+  computed: {
+    ...mapState('Files', ['currentPage']),
+    ...mapGetters('Files', ['pages'])
+  }
+}
+</script>

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

@@ -1,12 +1,6 @@
 import { mapMutations } from 'vuex'
 
 export default {
-  computed: {
-    $_filesListPagination_targetRoute() {
-      return { name: this.$route.name, query: this.$route.query, params: this.$route.params }
-    }
-  },
-
   methods: {
     ...mapMutations('Files', ['UPDATE_CURRENT_PAGE']),
 

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

@@ -28,13 +28,19 @@ export default {
   },
   pages: (state, getters) => Math.ceil(getters.filesAll.length / state.filesPageLimit),
   activeFiles: (state, getters) => {
-    let files = getters.filesAll
-    const firstElementIndex = (state.currentPage - 1) * state.filesPageLimit
+    let files = [].concat(getters.filesAll)
 
     if (!state.areHiddenFilesShown) {
       files = files.filter(file => !file.name.startsWith('.'))
     }
-    return [].concat(files).splice(firstElementIndex, state.filesPageLimit)
+
+    if (state.filesPageLimit > 0) {
+      const firstElementIndex = (state.currentPage - 1) * state.filesPageLimit
+
+      return files.splice(firstElementIndex, state.filesPageLimit)
+    }
+
+    return files
   },
   activeFilesSize: (state, getters) => {
     return $_fileSizes(getters.activeFiles)