flaschengeist-frontend/src/plugins/balance/pages/Overview.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
          title="Buchungen"
          :data="data"
          :columns="columns"
          row-key="id"
          v-model:pagination="pagination"
          :loading="loading"
          @request="onRequest"
          binary-state-sort
        >
          <template #top>
            <q-toggle v-model="showCancelled" label="Stornierte einblenden" />
          </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 { computed, defineComponent, onMounted, ref } from 'vue';
import { BalanceInterface, StateInterfaceBalance, TransactionsResponse } from '../store/balance';
import { Store, useStore } from 'vuex';
import { formatDateTime } from 'src/utils/datetime';
import { StateInterface } from 'src/store';
import { UserStateInterface } from 'src/plugins/user/store/user';

export default defineComponent({
  // name: 'PageName'
  setup(_, { root }) {
    //const store = <Store<StateInterfaceBalance>>root.$store;
    const store = useStore<Store<StateInterface>>();
    const userState = <UserStateInterface>store.state.user;
    const balanceState = <BalanceInterface>store.state.balance;

    onMounted(() => {
      void store.dispatch('balance/getBalance');
      void store.dispatch('user/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: false,
      page: 1,
      rowsPerPage: 3,
      rowsNumber: 10,
    });

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

    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;
      store
        .dispatch('balance/getTransactions', {
          filter: {
            offset: startRow,
            limit: fetchCount,
            showCancelled: showCancelled.value,
            showReversals: false,
          },
        })
        .then((result: TransactionsResponse) => {
          // 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;
        })
        .finally(() => (loading.value = false));
    }

    const balance = computed(
      () => balanceState.balances.get(userState.currentUser.userid)?.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 === store.state.user.currentUser?.userid) return 'Bekommen von X';
              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 === userState.currentUser?.userid) return 'Bekommen von X';
              else return 'Gesendet an X';
            }
          }
        },
      },
      {
        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 = userState.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>