feat: add pagination

owncloud · Jun 9, 2021 · 0df432a · 0df432a
1 parent 81b4be7
commit 0df432a
Show file tree

Hide file tree

Showing 13 changed files with 309 additions and 143 deletions.
diff --git a/packages/web-app-files/src/index.js b/packages/web-app-files/src/index.js
@@ -134,7 +134,7 @@ const routes = [
     children: [
       {
         name: 'personal',
-        path: 'all/:item?',
+        path: 'all/:item?/:page?',
         component: Personal,
         meta: {
           hasBulkActions: true,
@@ -143,7 +143,7 @@ const routes = [
       },
       {
         name: 'favorites',
-        path: 'favorites',
+        path: 'favorites/:page?',
         component: Favorites,
         meta: {
           hideFilelistActions: true,
@@ -152,7 +152,7 @@ const routes = [
         }
       },
       {
-        path: 'shared-with-me',
+        path: 'shared-with-me/:page?',
         component: SharedWithMe,
         name: 'shared-with-me',
         meta: {
@@ -162,7 +162,7 @@ const routes = [
         }
       },
       {
-        path: 'shared-with-others',
+        path: 'shared-with-others/:page?',
         component: SharedWithOthers,
         name: 'shared-with-others',
         meta: {
@@ -172,7 +172,7 @@ const routes = [
         }
       },
       {
-        path: 'shared-via-link',
+        path: 'shared-via-link/:page?',
         component: SharedViaLink,
         name: 'shared-via-link',
         meta: {
@@ -182,7 +182,7 @@ const routes = [
         }
       },
       {
-        path: 'trash-bin',
+        path: 'trash-bin/:page?',
         component: Trashbin,
         name: 'trashbin',
         meta: {
@@ -206,7 +206,7 @@ const routes = [
     children: [
       {
         name: 'public-list',
-        path: 'list/:item',
+        path: 'list/:item/:page?',
         component: PublicFiles,
         meta: {
           auth: false,
@@ -237,7 +237,7 @@ const routes = [
     meta: { hideHeadbar: true, title: $gettext('Resolving private link') }
   },
   {
-    path: '/location-picker/:context/:action/:item?',
+    path: '/location-picker/:context/:action/:item?/:page?',
     name: 'location-picker',
     components: {
       app: LocationPicker

diff --git a/packages/web-app-files/src/mixins/filesListPagination.js b/packages/web-app-files/src/mixins/filesListPagination.js
@@ -0,0 +1,19 @@
+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']),
+
+    $_filesListPagination_updateCurrentPage() {
+      const page = this.$route.params.page || 1
+
+      this.UPDATE_CURRENT_PAGE(page)
+    }
+  }
+}
diff --git a/packages/web-app-files/src/store/getters.js b/packages/web-app-files/src/store/getters.js
@@ -29,12 +29,16 @@ export default {
     return state.searchTermGlobal !== ''
   },
   activeFiles: state => {
-    // if searchTermGlobal is set, replace current file list with search results
     const files = state.searchTermGlobal ? state.filesSearched : state.files
-    // make a copy of array for sorting as sort() would modify the original array
     const direction = state.fileSortDirectionDesc ? 'desc' : 'asc'
-    return [].concat(files).sort(fileSortFunctions[state.fileSortField][direction])
+    const currentPageIndex = (state.currentPage - 1) * state.filesPageLimit
+
+    return []
+      .concat(files)
+      .sort(fileSortFunctions[state.fileSortField][direction])
+      .splice(currentPageIndex, state.filesPageLimit)
   },
+  paginationLength: state => Math.ceil(state.files.length / state.filesPageLimit),
   filesTotalSize: (state, getters) => {
     let totalSize = 0
     for (const file of getters.activeFiles) {

diff --git a/packages/web-app-files/src/store/mutations.js b/packages/web-app-files/src/store/mutations.js
@@ -320,5 +320,9 @@ export default {
       files.splice(index, 1, resource)
       state.files = files
     }
+  },
+
+  UPDATE_CURRENT_PAGE(state, page) {
+    state.currentPage = parseInt(page, 10)
   }
 }
diff --git a/packages/web-app-files/src/store/state.js b/packages/web-app-files/src/store/state.js
@@ -67,5 +67,11 @@ export default {
     permissions: 1,
     hasPassword: false,
     expireDate: null
-  }
+  },
+
+  /**
+   * Pagination
+   */
+  currentPage: 1,
+  filesPageLimit: 100 // TODO: Replace with dynamic value from settings once available
 }
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
@@ -26,22 +26,31 @@
           <quick-actions class="oc-visible@s" :item="props.resource" :actions="app.quickActions" />
         </template>
         <template #footer>
-          <div
-            v-if="activeFilesCount.folders > 0 || activeFilesCount.files > 0"
-            class="uk-text-nowrap oc-text-muted uk-text-center uk-width-1-1"
-          >
-            <span id="files-list-count-folders" v-text="activeFilesCount.folders" />
-            <translate :translate-n="activeFilesCount.folders" translate-plural="folders"
-              >folder</translate
+          <div class="uk-flex uk-flex-middle uk-flex-between">
+            <oc-pagination
+              v-if="paginationLength > 1"
+              :pages="paginationLength"
+              :current-page="currentPage"
+              :max-displayed="2"
+              :current-route="$_filesListPagination_targetRoute"
+            />
+            <div
+              v-if="activeFilesCount.folders > 0 || activeFilesCount.files > 0"
+              class="uk-text-nowrap oc-text-muted uk-text-right uk-flex-1"
             >
-            <translate>and</translate>
-            <span id="files-list-count-files" v-text="activeFilesCount.files" />
-            <translate :translate-n="activeFilesCount.files" translate-plural="files"
-              >file</translate
-            >
-            <template v-if="activeFiles.length > 0">
-              &ndash; {{ getResourceSize(filesTotalSize) }}
-            </template>
+              <span id="files-list-count-folders" v-text="activeFilesCount.folders" />
+              <translate :translate-n="activeFilesCount.folders" translate-plural="folders"
+                >folder</translate
+              >
+              <translate>and</translate>
+              <span id="files-list-count-files" v-text="activeFilesCount.files" />
+              <translate :translate-n="activeFilesCount.files" translate-plural="files"
+                >file</translate
+              >
+              <template v-if="activeFiles.length > 0">
+                &ndash; {{ getResourceSize(filesTotalSize) }}
+              </template>
+            </div>
           </div>
         </template>
       </oc-table-files>
@@ -56,6 +65,7 @@ import { buildResource } from '../helpers/resources'
 import FileActions from '../mixins/fileActions'
 import MixinFilesListPositioning from '../mixins/filesListPositioning'
 import MixinResources from '../mixins/resources'
+import MixinFilesListPagination from '../mixins/filesListPagination'
 
 import QuickActions from '../components/FilesLists/QuickActions.vue'
 import ListLoader from '../components/ListLoader.vue'
@@ -64,22 +74,24 @@ import NoContentMessage from '../components/NoContentMessage.vue'
 export default {
   components: { QuickActions, ListLoader, NoContentMessage },
 
-  mixins: [FileActions, MixinFilesListPositioning, MixinResources],
+  mixins: [FileActions, MixinFilesListPositioning, MixinResources, MixinFilesListPagination],
 
   data: () => ({
     loading: true
   }),
 
   computed: {
     ...mapState(['app']),
+    ...mapState('Files', ['currentPage']),
     ...mapGetters('Files', [
       'davProperties',
       'highlightedFile',
       'activeFiles',
       'selectedFiles',
       'inProgress',
       'activeFilesCount',
-      'filesTotalSize'
+      'filesTotalSize',
+      'paginationLength'
     ]),
     ...mapGetters(['user', 'configuration']),
 
@@ -116,6 +128,11 @@ export default {
   watch: {
     uploadProgressVisible() {
       this.adjustTableHeaderPosition()
+    },
+
+    $route: {
+      handler: '$_filesListPagination_updateCurrentPage',
+      immediate: true
     }
   },
 

diff --git a/packages/web-app-files/src/views/LocationPicker.vue b/packages/web-app-files/src/views/LocationPicker.vue
@@ -54,22 +54,31 @@
             :header-position="headerPosition"
           >
             <template #footer>
-              <div
-                v-if="activeFilesCount.folders > 0 || activeFilesCount.files > 0"
-                class="uk-text-nowrap oc-text-muted uk-text-center uk-width-1-1"
-              >
-                <span id="files-list-count-folders" v-text="activeFilesCount.folders" />
-                <translate :translate-n="activeFilesCount.folders" translate-plural="folders"
-                  >folder</translate
-                >
-                <translate>and</translate>
-                <span id="files-list-count-files" v-text="activeFilesCount.files" />
-                <translate :translate-n="activeFilesCount.files" translate-plural="files"
-                  >file</translate
+              <div class="uk-flex uk-flex-middle uk-flex-between">
+                <oc-pagination
+                  v-if="paginationLength > 1"
+                  :pages="paginationLength"
+                  :current-page="currentPage"
+                  :max-displayed="2"
+                  :current-route="$_filesListPagination_targetRoute"
+                />
+                <div
+                  v-if="activeFilesCount.folders > 0 || activeFilesCount.files > 0"
+                  class="uk-text-nowrap oc-text-muted uk-text-right uk-flex-1"
                 >
-                <template v-if="activeFiles.length > 0">
-                  &ndash; {{ getResourceSize(filesTotalSize) }}
-                </template>
+                  <span id="files-list-count-folders" v-text="activeFilesCount.folders" />
+                  <translate :translate-n="activeFilesCount.folders" translate-plural="folders"
+                    >folder</translate
+                  >
+                  <translate>and</translate>
+                  <span id="files-list-count-files" v-text="activeFilesCount.files" />
+                  <translate :translate-n="activeFilesCount.files" translate-plural="files"
+                    >file</translate
+                  >
+                  <template v-if="activeFiles.length > 0">
+                    &ndash; {{ getResourceSize(filesTotalSize) }}
+                  </template>
+                </div>
               </div>
             </template>
           </oc-table-files>
@@ -87,6 +96,7 @@ import { cloneStateObject } from '../helpers/store'
 import MixinsGeneral from '../mixins'
 import MixinResources from '../mixins/resources'
 import MixinRoutes from '../mixins/routes'
+import MixinFilesListPagination from '../mixins/filesListPagination'
 
 import MoveSidebarMainContent from '../components/LocationPicker/MoveSidebarMainContent.vue'
 import NoContentMessage from '../components/NoContentMessage.vue'
@@ -99,7 +109,7 @@ export default {
     ListLoader
   },
 
-  mixins: [MixinsGeneral, MixinResources, MixinRoutes],
+  mixins: [MixinsGeneral, MixinResources, MixinRoutes, MixinFilesListPagination],
 
   metaInfo() {
     const translated =
@@ -125,7 +135,8 @@ export default {
     ...mapState('Files', [
       'selectedResourcesForMove',
       'locationPickerTargetFolder',
-      'currentFolder'
+      'currentFolder',
+      'currentPage'
     ]),
     ...mapGetters('Files', [
       'activeFiles',
@@ -134,7 +145,8 @@ export default {
       'publicLinkPassword',
       'davProperties',
       'activeFilesCount',
-      'filesTotalSize'
+      'filesTotalSize',
+      'paginationLength'
     ]),
     ...mapGetters('configuration'),
 
@@ -260,7 +272,10 @@ export default {
 
   watch: {
     $route: {
-      handler: 'navigateToTarget',
+      handler: function() {
+        this.navigateToTarget(this.$route)
+        this.$_filesListPagination_updateCurrentPage()
+      },
       immediate: true
     }
   },
@@ -323,6 +338,7 @@ export default {
     },
 
     async navigateToTarget(target) {
+      console.log(this.$route)
       this.loading = true
       this.CLEAR_CURRENT_FILES_LIST()