src/boot/axios.ts

@@ -4,8 +4,7 @@ import config from '../config';
 import { Store } from 'vuex';
 import { StateInterface } from 'src/store';
 import { LocalStorage } from 'quasar';
-import {Notify} from 'quasar';
-import {Router} from 'src/router';
+import { Notify } from 'quasar';
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -17,21 +16,22 @@ export const setBaseUrl = (url: string) => {
   LocalStorage.set('baseURL', url);
   axios.defaults.baseURL = url;
   Notify.create({
-    message: "Serveraddresse gespeichert",
-    position: "bottom",
+    message: 'Serveraddresse gespeichert',
+    position: 'bottom',
     caption: `${url}`,
-    color: "positive"
-  })
-  setTimeout(() => {window.location.reload()}, 5000)
-
-}
+    color: 'positive'
+  });
+  setTimeout(() => {
+    window.location.reload();
+  }, 5000);
+};
 
 export default boot<Store<StateInterface>>(({ Vue, store, router }) => {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   Vue.prototype.$axios = axios;
   const baseURL = <string | undefined>LocalStorage.getItem('baseURL');
-  if (baseURL){
-    axios.defaults.baseURL = baseURL
+  if (baseURL) {
+    axios.defaults.baseURL = baseURL;
   } else {
     axios.defaults.baseURL = config.baseURL;
   }

src/pages/Login.vue

@@ -35,13 +35,11 @@
             <q-btn label="Login" type="submit" color="primary" tabindex="3" />
           </div>
         </q-form>
-
       </q-card-section>
       <div class="row justify-end">
-      <q-btn flat round icon="mdi-menu-down" class="cordova-only" @click="openServerSettings"/>
+        <q-btn flat round icon="mdi-menu-down" class="cordova-only" @click="openServerSettings" />
       </div>
       <q-slide-transition class="cordova-only">
-
         <div v-show="visible">
           <q-separator />
           <q-card-section>
@@ -51,7 +49,6 @@
               <q-btn size="xs" dense color="primary" label="Speichern" type="submit" />
             </q-form>
           </q-card-section>
-
         </div>
       </q-slide-transition>
     </q-card>
@@ -72,16 +69,16 @@ export default defineComponent({
     const userid = ref('');
     const password = ref('');
     const rules = [(val: string) => (val && val.length > 0) || 'Feld darf nicht leer sein!'];
-    const server = ref<string|undefined>(root.$axios.defaults.baseURL)
+    const server = ref<string | undefined>(root.$axios.defaults.baseURL);
     const visible = ref(false);
 
     function openServerSettings() {
-      visible.value = !visible.value
+      visible.value = !visible.value;
     }
 
     function changeUrl() {
       if (server.value) {
-        setBaseUrl(server.value)
+        setBaseUrl(server.value);
       }
     }
 
@@ -147,7 +144,17 @@ export default defineComponent({
         });
     }
 
-    return { userid, password, doLogin, doReset, rules, server, changeUrl, visible, openServerSettings };
+    return {
+      userid,
+      password,
+      doLogin,
+      doReset,
+      rules,
+      server,
+      changeUrl,
+      visible,
+      openServerSettings
+    };
   }
 });
 </script>

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>
@@ -24,7 +33,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref } from '@vue/composition-api';
-import { StateInterfaceBalance } from '../store/balance';
+import { StateInterfaceBalance, TransactionsResponse } from '../store/balance';
 import { Store } from 'vuex';
 import { formatDateTime } from 'src/utils/datetime';
 
@@ -41,10 +50,11 @@ export default defineComponent({
       });
     });
 
+    const showCancelled = ref(false);
     const data = ref<FG.Transaction[]>([]);
     const loading = ref(false);
     const pagination = ref({
-      sortBy: 'desc',
+      sortBy: 'time',
       descending: false,
       page: 1,
       rowsPerPage: 3,
@@ -61,34 +71,32 @@ export default defineComponent({
 
     function onRequest(props: { pagination: PaginationInterface; filter?: string }) {
       const { page, rowsPerPage, sortBy, descending } = props.pagination;
-      const filter = props.filter;
 
       loading.value = true;
-
-      void store.dispatch('balance/getTransactionsCount', filter).then((value: number) => {
-        pagination.value.rowsNumber = value;
-
       // get all rows if "All" (0) is selected
       const fetchCount = rowsPerPage === 0 ? pagination.value.rowsNumber : rowsPerPage;
       // calculate starting row of data
       const startRow = (page - 1) * rowsPerPage;
-
-        // fetch data from "server"
       store
         .dispatch('balance/getTransactions', {
-            filter: { row: startRow, limit: fetchCount }
+          filter: {
+            offset: startRow,
+            limit: fetchCount,
+            showCancelled: showCancelled.value,
+            showReversals: false
+          }
         })
-          .then((gotTransactions: FG.Transaction[]) => {
+        .then((result: TransactionsResponse) => {
           // clear out existing data and add new
-            data.value.splice(0, data.value.length, ...gotTransactions);
+          data.value.splice(0, data.value.length, ...result.transactions);
           // don't forget to update local pagination object
           pagination.value.page = page;
           pagination.value.rowsPerPage = rowsPerPage;
           pagination.value.sortBy = sortBy;
           pagination.value.descending = descending;
+          if (result.count) pagination.value.rowsNumber = result.count;
         })
         .finally(() => (loading.value = false));
-      });
     }
 
     const balance = computed(
@@ -134,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

@@ -9,6 +9,11 @@ interface BalanceResponse {
   debit: number;
 }
 
+export interface TransactionsResponse {
+  transactions: Array<FG.Transaction>;
+  count?: number;
+}
+
 export interface UserBalance extends BalanceResponse {
   limit: number | null;
 }
@@ -121,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');
@@ -129,22 +141,13 @@ const actions: ActionTree<BalanceInterface, StateInterface> = {
     if (!payload.filter) payload.filter = { limit: 10 };
     return axios
       .get(`/users/${payload.userid}/balance/transactions`, { params: payload.filter || {} })
-      .then(({ data }: AxiosResponse<[FG.Transaction]>) => {
-        data.forEach(t => fixTransaction(t));
-        commit('addTransactions', data);
+      .then(({ data }: AxiosResponse<TransactionsResponse>) => {
+        data.transactions.forEach(t => fixTransaction(t));
+        commit('addTransactions', data.transactions);
         return data;
       })
       .finally(() => commit('setLoading', false));
   },
-  getTransactionsCount(
-    { state },
-    payload: {
-      userid?: string;
-      filter?: { limit?: number; offset?: number; from?: Date; to?: Date };
-    }
-  ) {
-    return Promise.resolve(3);
-  },
   getLimit({ rootState, commit }) {
     commit('setLoading');
     axios