feat: move page size to view options

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

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,87 @@
+<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="$_filesListPagination_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'
+
+import MixinFilesListPagination from '../../mixins/filesListPagination'
+
+export default {
+  mixins: [MixinFilesListPagination],
+
+  computed: {
+    ...mapState('Files', ['areHiddenFilesShown']),
+
+    viewButtonAriaLabel() {
+      return this.$gettext('Display customization options of the files list')
+    },
+
+    hiddenFilesShownModel: {
+      get() {
+        return this.areHiddenFilesShown
+      },
+
+      set(value) {
+        this.SET_HIDDEN_FILES_VISIBILITY(value)
+      }
+    }
+  },
+
+  methods: {
+    ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY'])
+  }
+}
+</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

@@ -1,23 +1,12 @@
 <template>
-  <div class="files-pagination-container">
-    <!-- Empty block to center the pagination -->
-    <div class="files-pagination-empty" />
-    <oc-pagination
-      v-if="pages > 1"
-      :pages="pages"
-      :current-page="currentPage"
-      :max-displayed="3"
-      :current-route="$_filesListPagination_targetRoute"
-      class="files-pagination uk-flex uk-flex-center oc-my-s"
-    />
-    <oc-page-size
-      v-model="$_filesListPagination_pageItemsLimit"
-      data-testid="files-pagination-size"
-      :label="$gettext('Items per page')"
-      :options="[100, 500, 1000, $gettext('All')]"
-      class="files-pagination-size"
-    />
-  </div>
+  <oc-pagination
+    v-if="pages > 1"
+    :pages="pages"
+    :current-page="currentPage"
+    :max-displayed="3"
+    :current-route="$_filesListPagination_targetRoute"
+    class="files-pagination uk-flex uk-flex-center oc-my-s"
+  />
 </template>
 
 <script>
@@ -41,19 +30,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.files-pagination {
-  justify-self: center;
-
-  &-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  }
-
-  &-size {
-    display: inline-flex;
-    justify-self: end;
-  }
-}
-</style>

packages/web-app-files/tests/unit/store/getters.spec.js

@@ -8,7 +8,8 @@ describe('Getters', () => {
     state = {
       files: FixtureFiles['/'],
       searchTermGlobal: '',
-      filesPageLimit: 10
+      filesPageLimit: 10,
+      areHiddenFilesShown: true
     }
   })
 
@@ -26,5 +27,23 @@ describe('Getters', () => {
 
       expect(result.length).toEqual(5)
     })
+
+    it('returns only a portion of files if files page limit is set', () => {
+      state.filesPageLimit = 2
+
+      const { activeFiles, filesAll } = getters
+      const result = activeFiles(state, { filesAll: filesAll(state) })
+
+      expect(result.length).toEqual(2)
+    })
+
+    it('returns all files if files page limit is of type string', () => {
+      state.filesPageLimit = 'All'
+
+      const { activeFiles, filesAll } = getters
+      const result = activeFiles(state, { filesAll: filesAll(state) })
+
+      expect(result.length).toEqual(5)
+    })
   })
 })

packages/web-app-files/tests/unit/store/mutations.spec.js

@@ -67,4 +67,14 @@ describe('vuex store mutations', () => {
 
     expect(state.areHiddenFilesShown).toEqual(false)
   })
+
+  it('sets the files page limit', () => {
+    const state = { filesPageLimit: 100 }
+    const { SET_FILES_PAGE_LIMIT } = mutations
+
+    SET_FILES_PAGE_LIMIT(state, 500)
+
+    expect(state.filesPageLimit).toEqual(500)
+    expect(window.localStorage.getItem('oc_filesPageLimit')).toEqual('500')
+  })
 })