Balance: Filter shown transactions in Overview

src/plugins/balance/pages/Overview.vue

@@ -16,7 +16,16 @@
           :loading="loading"
           @request="onRequest"
           binary-state-sort
-        />
+        >
+          <template v-slot:top="props">
+            <q-toggle v-model="showCancelled" label="Stornierte einblenden" />
+          </template>
+          <template v-slot:body-cell="props">
+            <q-td :props="props" v-bind:class="{ 'bg-grey': props.row.reversal_id != null }">
+              {{ props.value }}
+            </q-td>
+          </template>
+        </q-table>
       </q-card-section>
     </q-card>
   </q-page>
@@ -41,6 +50,7 @@ export default defineComponent({
       });
     });
 
+    const showCancelled = ref(false);
     const data = ref<FG.Transaction[]>([]);
     const loading = ref(false);
     const pagination = ref({
@@ -61,7 +71,6 @@ export default defineComponent({
 
     function onRequest(props: { pagination: PaginationInterface; filter?: string }) {
       const { page, rowsPerPage, sortBy, descending } = props.pagination;
-      const filter = props.filter;
 
       loading.value = true;
       // get all rows if "All" (0) is selected
@@ -70,7 +79,12 @@ export default defineComponent({
       const startRow = (page - 1) * rowsPerPage;
       store
         .dispatch('balance/getTransactions', {
-          filter: { offset: startRow, limit: fetchCount }
+          filter: {
+            offset: startRow,
+            limit: fetchCount,
+            showCancelled: showCancelled.value,
+            showReversals: false
+          }
         })
         .then((result: TransactionsResponse) => {
           // clear out existing data and add new
@@ -128,7 +142,7 @@ export default defineComponent({
       }
     ];
 
-    return { data, pagination, onRequest, loading, balance, columns };
+    return { data, pagination, onRequest, loading, balance, columns, showCancelled };
   }
 });
 </script>

src/plugins/balance/store/balance.ts

@@ -126,7 +126,14 @@ const actions: ActionTree<BalanceInterface, StateInterface> = {
     { commit, rootState },
     payload: {
       userid?: string;
-      filter?: { limit?: number; offset?: number; from?: Date; to?: Date };
+      filter?: {
+        limit?: number;
+        offset?: number;
+        from?: Date;
+        to?: Date;
+        showReversals?: boolean;
+        showCancelled?: boolean;
+      };
     }
   ) {
     commit('setLoading');