[chore] add serverside pagination

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 yarn-error.log
 yarn.lock
+
+.idea

src/pages/Admin.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <q-page padding>
-      <q-table :rows="rows" row-key="userid" :columns="columns">
+      <q-table :rows="rows" row-key="userid" :columns="columns" v-model:pagination="pagination" @request="onRequest">
         <template #top-right>
           <div class="full-width row q-gutter-sm">
             <q-input
@@ -18,11 +18,14 @@
         </template>
         <template #body="props">
           <q-tr :props="props">
-            <q-td key="userid" :props="props">
+            <q-td key="firstname" :props="props">
-              {{ getName(props.row.userid) }}
+              {{ getFirstname(props.row.userid) }}
+            </q-td>
+            <q-td key="lastname" :props="props">
+              {{ getLastname(props.row.userid)}}
             </q-td>
             <q-td key="limit" :props="props">
-              {{ getLimit(props.row.userid) }}€
+              {{ getLimit(props.row.userid) || 'Kein Limit' }}
               <q-popup-edit
                 v-slot="scope"
                 v-model="limit"
@@ -105,10 +108,8 @@ export default defineComponent({
     const store = useBalanceStore();
     const userStore = useUserStore();
 
-    onBeforeMount(() => {
+    onBeforeMount( () => {
-      void store.getBalances();
+      void onRequest({pagination: pagination.value, filter: undefined})
-      void userStore.getUsers();
-      void store.getLimits();
     });
 
     const rows = computed(() => store.balances);
@@ -116,32 +117,26 @@ export default defineComponent({
 
     const columns = [
       {
-        name: 'userid',
+        name: 'firstname',
-        label: 'Benutzer ID',
+        label: 'Vorname',
         field: 'userid',
-        required: true,
         align: 'left',
-        sortable: true,
+        sortable: true
-        format: getName,
-      },
-      /*{
-        name: 'credit',
-        label: 'Haben',
-        field: 'credit',
-        format: (val: number) => val.toFixed(2),
       },
       {
-        name: 'debit',
+        name: 'lastname',
-        label: 'Soll',
+        label: 'Vorname',
-        field: 'debit',
+        field: 'userid',
-        format: (val: number) => val.toFixed(2),
+        align: 'left',
-      },*/
+        sortable: true
+      },
       {
         name: 'limit',
         label: 'Limit',
         align: 'right',
         field: 'userid',
         format: (_: undefined, row: { userid: string }) => getLimit(row.userid),
+        sortable: true
       },
       {
         name: 'balance',
@@ -151,25 +146,61 @@ export default defineComponent({
         format: (_: undefined, row: { debit: number; credit: number }) =>
           getBalance(row.debit, row.credit),
         sortable: true,
-        sort: (
-          _: undefined,
-          __: undefined,
-          a: { debit: number; credit: number },
-          b: { debit: number; credit: number }
-        ) => {
-          return (
-            parseFloat(getBalance(a.debit, a.credit)) - parseFloat(getBalance(b.debit, b.credit))
-          );
-        },
       },
     ];
 
+    interface PaginationInterface {
+      sortBy: string;
+      descending: boolean;
+      page: number;
+      rowsPerPage: number;
+      rowsNumber: number;
+    }
+
+    const pagination = ref<PaginationInterface>({
+      sortBy: 'lastname',
+      rowsPerPage: 5,
+      rowsNumber: 10,
+      descending: false,
+      page: 1,
+    })
+
+    const loading = ref(false)
+
+    async function onRequest(props: {pagination: PaginationInterface; filter?: string}) {
+      const {page, rowsPerPage, sortBy, descending} = props.pagination;
+      loading.value = true;
+      const fetchCount = rowsPerPage === 0 ? pagination.value.rowsNumber : rowsPerPage;
+      const startRow = (page - 1) * rowsPerPage;
+
+      try {
+        const result = await store.getBalances({
+          limit: fetchCount,
+          offset: startRow,
+          descending: descending ? true : undefined,
+          sortBy,
+        })
+        pagination.value.page = page;
+        pagination.value.rowsPerPage = rowsPerPage;
+        pagination.value.sortBy = sortBy;
+        pagination.value.descending = descending;
+        if (result.count) pagination.value.rowsNumber = result.count;
+        void userStore.getUsers(true, {userids: result.userids});
+        void store.getLimits({userids: result.userids});
+      } catch (error) {
+        console.warn(error)
+      }
+      console.log(pagination.value)
+      loading.value = false
+    }
+
     function getName(val: string) {
       return userStore.users.find((a) => a.userid === val)?.display_name;
     }
 
     function getLimit(val: string) {
-      return store.user_limits.find((a) => a.userid === val)?.limit?.toFixed(2);
+      const limit = store.user_limits.find((a) => a.userid === val)?.limit?.toFixed(2);
+      return limit ? `${limit} €` : undefined
     }
 
     function getBalance(debit: number, credit: number) {
@@ -194,6 +225,14 @@ export default defineComponent({
       }, 100);
     }
 
+    function getFirstname(userid: string) {
+      return userStore.users.find((a) => a.userid === userid)?.firstname
+    }
+
+    function getLastname(userid: string) {
+      return userStore.users.find((a) => a.userid === userid)?.lastname
+    }
+
     const tab = ref('add');
 
     return {
@@ -208,6 +247,10 @@ export default defineComponent({
       updateBalance,
       updateBalances,
       tab,
+      pagination,
+      onRequest,
+      getFirstname,
+      getLastname,
     };
   },
 });

src/pages/Overview.vue

@@ -10,6 +10,7 @@
         <q-table
           v-model:pagination="pagination"
           title="Buchungen"
+          flat
           :rows="data"
           :columns="columns"
           row-key="id"

src/store.ts

@@ -40,7 +40,7 @@ export const useBalanceStore = defineStore({
   }),
 
   getters: {
-    balance() {
+    balance(): BalancesResponse | undefined {
       const mainStore = useMainStore();
       return this.balances.find((v) => v.userid === mainStore.user?.userid);
     },
@@ -77,12 +77,20 @@ export const useBalanceStore = defineStore({
       return data;
     },
 
-    async getBalances(force = false) {
+    async getBalances(filter?: {limit?: number, offset?: number, sortBy?: string, descending?: boolean}) {
-      if (force || this.balances.length == 0 || new Date().getTime() - this._balances_dirty > 60000) {
+      const { data } = await api.get<{balances: BalancesResponse[], count: number}>('/balance', {
-        const { data } = await api.get<BalancesResponse[]>('/balance');
+        params: filter
-        this.balances = data;
+      });
-      }
+      this.balances = data.balances;
-      return this.balances;
+      let userids = ""
+      data.balances.forEach(response => {
+        userids += `,${response.userid}`
+      })
+      await api.get<FG.User>('/users', {
+          params: {userids: userids},
+        }
+      )
+      return {balances: this.balances, count: data.count, userids};
     },
 
     async changeBalance(amount: number, user: FG.User, sender: FG.User | undefined = undefined) {
@@ -158,8 +166,10 @@ export const useBalanceStore = defineStore({
       this._balances_dirty = 0;
     },
 
-    async getLimits() {
+    async getLimits(filter?: {userids: undefined|string}) {
-      const { data } = await api.get<Array<UserLimit>>('users/balance/limit');
+      const { data } = await api.get<Array<UserLimit>>('users/balance/limit', {
+        params: filter
+      });
       this.user_limits = data;
     },