From 8b1d92ee7e84d313cbcbc03e2147d79eb647f528 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 12 Jul 2019 00:43:17 +0200
Subject: [PATCH] Implement pagination without a total count

This is necessary, because once we filter the collection, the
`countUsers` is not valid anymore.
---
 webapp/pages/admin/users.vue | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index 3ecb5edf9..de910dd34 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -1,6 +1,9 @@
 <template>
   <ds-card :header="$t('admin.users.name')">
     <ds-table v-if="User && User.length" :data="User" :fields="fields" condensed>
+      <template slot="index" slot-scope="scope">
+        {{ scope.row.index }}.
+      </template>
       <template slot="name" slot-scope="scope">
         <nuxt-link
           :to="{
@@ -34,18 +37,16 @@ export default {
       pageSize,
       first: pageSize,
       User: [],
+      hasNext: false,
     }
   },
   computed: {
-    hasNext() {
-      const { countUsers } = this.statistics
-      return this.offset < countUsers - this.pageSize
-    },
     hasPrevious() {
       return this.offset > 0
     },
     fields() {
       return {
+        index: '#',
         name: this.$t('admin.users.table.columns.name'),
         slug: this.$t('admin.users.table.columns.slug'),
         role: this.$t('admin.users.table.columns.role'),
@@ -53,11 +54,6 @@ export default {
     },
   },
   apollo: {
-    statistics: {
-      query() {
-        return gql('query { statistics { countUsers } }')
-      },
-    },
     User: {
       query() {
         return gql(`
@@ -75,17 +71,19 @@ export default {
         const { offset, first } = this
         return { first, offset }
       },
+      update({ User }) {
+        this.hasNext = User && User.length >= this.pageSize
+        if (User.length <= 0) return this.User // edge case, avoid a blank page
+        return User.map((u, i) => Object.assign({}, u, { index: this.offset + i }))
+      },
     },
   },
   methods: {
     back() {
-      this.offset -= this.pageSize
-      this.offset = Math.max(this.offset, 0)
+      this.offset = Math.max(this.offset - this.pageSize, 0)
     },
     next() {
       this.offset += this.pageSize
-      const { countUsers } = this.statistics
-      this.offset = Math.min(this.offset, countUsers - this.pageSize)
     },
   },
 }