From a83ba72cfa24bbd62331abd8ae06108a3c78305a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Sat, 17 Apr 2021 20:37:21 +0200
Subject: [PATCH] [balance] fix sort in overview

---
 .../balance/components/BalanceHeader.vue      |  4 +-
 .../balance/components/Transaction.vue        |  2 +-
 src/plugins/balance/pages/Admin.vue           | 12 ++---
 src/plugins/balance/pages/Overview.vue        | 49 ++++++++-----------
 src/plugins/balance/store.ts                  |  1 +
 5 files changed, 30 insertions(+), 38 deletions(-)

diff --git a/src/plugins/balance/components/BalanceHeader.vue b/src/plugins/balance/components/BalanceHeader.vue
index 61a3171..9190523 100644
--- a/src/plugins/balance/components/BalanceHeader.vue
+++ b/src/plugins/balance/components/BalanceHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-card-section class="fit row justify-left content-center items-center q-col-gutter-sm">
+  <q-card-section class="fit row justify-between content-center items-center q-col-gutter-sm">
     <div class="col-5">
       <div v-if="balance" class="text-h6">
         Aktueller Stand: {{ balance.balance.toFixed(2) }} €
@@ -10,7 +10,7 @@
     <div v-if="showSelector" class="col-6">
       <UserSelector v-model="user" />
     </div>
-    <div class="col-1 justify-end">
+    <div class="col-1 justify-end text-right">
       <q-btn round flat icon="mdi-format-list-checks" @click="openHistory" />
     </div>
   </q-card-section>
diff --git a/src/plugins/balance/components/Transaction.vue b/src/plugins/balance/components/Transaction.vue
index 167db0d..0502199 100644
--- a/src/plugins/balance/components/Transaction.vue
+++ b/src/plugins/balance/components/Transaction.vue
@@ -16,7 +16,7 @@
           <q-btn
             :color="isReversed ? 'positive' : 'negative'"
             aria-label="Reverse transaction"
-            :icon="!isReversed ? 'mdi-trash-can' : 'mdi-check-bold'"
+            :icon="!isReversed ? 'mdi-delete' : 'mdi-check-bold'"
             size="sm"
             round
             :disable="!canReverse"
diff --git a/src/plugins/balance/pages/Admin.vue b/src/plugins/balance/pages/Admin.vue
index eeab423..3e770d8 100644
--- a/src/plugins/balance/pages/Admin.vue
+++ b/src/plugins/balance/pages/Admin.vue
@@ -32,28 +32,28 @@ export default defineComponent({
         field: 'userid',
         required: true,
         align: 'left',
-        sortable: true
+        sortable: true,
       },
       {
         name: 'credit',
         label: 'Haben',
         field: 'credit',
-        format: (val: number) => val.toFixed(2)
+        format: (val: number) => val.toFixed(2),
       },
       {
         name: 'debit',
         label: 'Soll',
         field: 'debit',
-        format: (val: number) => val.toFixed(2)
+        format: (val: number) => val.toFixed(2),
       },
       {
         name: 'balance',
         label: 'Kontostand',
         format: (_: undefined, row: { debit: number; credit: number }) =>
-          (row.credit - row.debit).toFixed(2)
-      }
+          (row.credit - row.debit).toFixed(2),
+      },
     ];
     return { rows, columns };
-  }
+  },
 });
 </script>
diff --git a/src/plugins/balance/pages/Overview.vue b/src/plugins/balance/pages/Overview.vue
index d4e4678..d5ac5fb 100644
--- a/src/plugins/balance/pages/Overview.vue
+++ b/src/plugins/balance/pages/Overview.vue
@@ -1,6 +1,6 @@
 <template>
-  <q-page padding>
-    <q-card>
+  <q-page>
+    <q-card flat>
       <q-card-section class="text-center">
         <div class="text-h4">Aktueller Stand</div>
         <div style="font-size: 2em">{{ balance.toFixed(2) }}&#8239;€</div>
@@ -17,8 +17,12 @@
           binary-state-sort
           @request="onRequest"
         >
-          <template #top>
-            <q-toggle v-model="showCancelled" label="Stornierte einblenden" />
+          <template #top="props">
+            <q-toggle
+              v-model="showCancelled"
+              label="Stornierte einblenden"
+              @update:model-value="onRequest({ pagination: props.pagination })"
+            />
           </template>
           <template #body-cell="props">
             <q-td :props="props" :class="{ 'bg-grey': props.row.reversal_id != null }">
@@ -50,7 +54,7 @@ export default defineComponent({
       void userStore.getUsers().then(() =>
         onRequest({
           pagination: pagination.value,
-          filter: undefined
+          filter: undefined,
         })
       );
     });
@@ -60,10 +64,10 @@ export default defineComponent({
     const loading = ref(false);
     const pagination = ref({
       sortBy: 'time',
-      descending: false,
+      descending: true,
       page: 1,
-      rowsPerPage: 3,
-      rowsNumber: 10
+      rowsPerPage: 10,
+      rowsNumber: 10,
     });
 
     interface PaginationInterface {
@@ -87,7 +91,8 @@ export default defineComponent({
           offset: startRow,
           limit: fetchCount,
           showCancelled: showCancelled.value,
-          showReversals: false
+          showReversals: false,
+          descending,
         });
         // clear out existing data and add new
         data.value.splice(0, data.value.length, ...result.transactions);
@@ -112,7 +117,7 @@ export default defineComponent({
         field: 'time',
         required: true,
         sortable: true,
-        format: (val: Date) => formatDateTime(new Date(val), true, true, true)
+        format: (val: Date) => formatDateTime(new Date(val), true, true, true),
       },
       {
         name: 'type',
@@ -126,27 +131,13 @@ export default defineComponent({
               else return 'Gesendet an X';
             }
           }
-        }
-      },
-      {
-        name: 'text',
-        label: 'Text',
-        format: (_: undefined, row: FG.Transaction) => {
-          if (row.sender_id == null) return 'Gutschrift';
-          else {
-            if (row.receiver_id == null) return 'Angeschrieben';
-            else {
-              if (row.receiver_id === mainStore.currentUser.userid) return 'Bekommen von X';
-              else return 'Gesendet an X';
-            }
-          }
-        }
+        },
       },
       {
         name: 'amount',
         label: 'Betrag',
         field: 'amount',
-        format: (val: number) => `${val.toFixed(2)}€`
+        format: (val: number) => `${val.toFixed(2)}€`,
       },
       {
         name: 'author_id',
@@ -156,11 +147,11 @@ export default defineComponent({
           const user = userStore.users.filter((x) => x.userid == val);
           if (user.length > 0) return user[0].display_name;
           else return val;
-        }
-      }
+        },
+      },
     ];
 
     return { data, pagination, onRequest, loading, balance, columns, showCancelled };
-  }
+  },
 });
 </script>
diff --git a/src/plugins/balance/store.ts b/src/plugins/balance/store.ts
index b0f3a5e..3e328ed 100644
--- a/src/plugins/balance/store.ts
+++ b/src/plugins/balance/store.ts
@@ -136,6 +136,7 @@ export const useBalanceStore = defineStore({
             to?: Date;
             showReversals?: boolean;
             showCancelled?: boolean;
+            descending?: boolean;
           }
         | undefined = undefined
     ) {