flaschengeist-balance/src/pages/BalanceOverviewPage.vue

<template>
  <q-page padding>
    <q-card>
      <q-card-section class="text-center">
        <div class="text-h4">Aktueller Stand</div>
        <div style="font-size: 2em">{{ balance.toFixed(2) }}&#8239;€</div>
      </q-card-section>
      <q-separator />
      <q-card-section>
        <q-table
          v-model:pagination="pagination"
          title="Buchungen"
          flat
          :rows="data"
          :columns="columns"
          row-key="id"
          :loading="loading"
          binary-state-sort
          @request="onRequest"
        >
          <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 }">
              {{ props.value }}
            </q-td>
          </template>
        </q-table>
      </q-card-section>
    </q-card>
  </q-page>
</template>

<script lang="ts">
import { formatDateTime, useMainStore, useUserStore } from '@flaschengeist/api';
import { computed, defineComponent, onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useBalanceStore } from '../store';

export default defineComponent({
  name: 'BalanceOverviewPage',
  setup() {
    const store = useBalanceStore();
    const mainStore = useMainStore();
    const userStore = useUserStore();
    const router = useRouter();
    const route = useRoute();

    onMounted(async () => {
      if (route.query?.showCancelled == 'true') showCancelled.value = true;
      await router.replace({ query: { showCancelled: showCancelled.value } });
      void store.getBalance(mainStore.currentUser);
      void userStore.getUsers().then(() =>
        onRequest({
          pagination: pagination.value,
          filter: undefined,
        })
      );
    });

    const showCancelled = ref(false);
    const data = ref<FG.Transaction[]>([]);
    const loading = ref(false);
    const pagination = ref({
      sortBy: 'time',
      descending: true,
      page: 1,
      rowsPerPage: 10,
      rowsNumber: 10,
    });

    interface PaginationInterface {
      sortBy: string;
      descending: boolean;
      page: number;
      rowsPerPage: number;
      rowsNumber: number;
    }

    async function onRequest(props: { pagination: PaginationInterface; filter?: string }) {
      const { page, rowsPerPage, sortBy, descending } = props.pagination;

      loading.value = true;
      // 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;
      try {
        const result = await store.getTransactions(mainStore.currentUser, {
          offset: startRow,
          limit: fetchCount,
          showCancelled: showCancelled.value,
          showReversals: false,
          descending,
        });
        // clear out existing data and add new
        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;
      } catch (error) {
        // ...
      }
      loading.value = false;
    }

    const balance = computed(() => store.balance?.balance || NaN);

    const columns = [
      {
        name: 'time',
        label: 'Datum',
        field: 'time',
        required: true,
        sortable: true,
        format: (val: Date) => formatDateTime(new Date(val), true, true, true),
      },
      {
        name: 'type',
        label: 'Type',
        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 ${<string>getName(row.sender_id)}`;
              else return `Gesendet an ${<string>getName(row.receiver_id)}`;
            }
          }
        },
      },
      {
        name: 'amount',
        label: 'Betrag',
        field: 'amount',
        format: (val: number) => `${val.toFixed(2)}€`,
      },
      {
        name: 'author_id',
        label: 'Benutzer',
        field: 'author_id',
        format: (val: string) => {
          const user = userStore.users.filter((x) => x.userid == val);
          if (user.length > 0) return user[0].display_name;
          else return val;
        },
      },
    ];

    function getName(userid: string) {
      return userStore.users.find((a) => a.userid === userid)?.display_name;
    }

    watch(showCancelled, async () => {
      await router.replace({ query: { showCancelled: showCancelled.value } });
      await onRequest({
        pagination: pagination.value,
        filter: undefined,
      });
    });

    return { data, pagination, onRequest, loading, balance, columns, showCancelled };
  },
});
</script>