flaschengeist-frontend/src/plugins/balance/pages/Admin.vue

<template>
  <div>
    <q-page padding>
      <q-table :rows="rows" row-key="userid" :columns="columns">
        <template #top-right>
          <div class="full-width row q-gutter-sm">
            <q-input
              v-model.number="limit"
              label="Limit"
              type="number"
              step="0.01"
              suffix="€"
              filled
              dense
            />
            <q-btn label="Limits Setzen" color="primary" dense @click="setLimits(limit)" />
          </div>
        </template>
        <template #body="props">
          <q-tr :props="props">
            <q-td key="userid" :props="props">
              {{ getName(props.row.userid) }}
            </q-td>
            <q-td key="limit" :props="props"> {{ getLimit(props.row.userid) }}€ </q-td>
            <q-td key="balance" :props="props">
              {{ getBalance(props.row.debit, props.row.credit) }}€
              <q-menu anchor="bottom middle" self="top middle">
                <q-card>
                  <q-card-section>
                    <q-tab-panels v-model="tab" animated>
                      <q-tab-panel name="add" class="fit column q-gutter-sm">
                        <balance-add-body
                          :user="props.row.userid"
                          :can-add-shortcut="false"
                          @changeBalance="updateBalance"
                        />
                      </q-tab-panel>
                      <q-tab-panel name="transfer" class="fit column q-gutter-sm">
                        <balance-transfer-body
                          :user="props.row.userid"
                          @changeBalance="updateBalances"
                        />
                      </q-tab-panel>
                    </q-tab-panels>
                  </q-card-section>
                  <q-tabs
                    v-model="tab"
                    dense
                    class="text-grey"
                    active-color="primary"
                    indicator-color="primary"
                    align="justify"
                    narrow-indicator
                  >
                    <q-tab name="add" label="Anschreiben" />
                    <q-tab name="transfer" label="Übertragen" />
                  </q-tabs>
                </q-card>
              </q-menu>
            </q-td>
          </q-tr>
        </template>
      </q-table>
    </q-page>
  </div>
</template>

<script lang="ts">
// TODO: Fill usefull data

import { ref, defineComponent, computed, onBeforeMount } from 'vue';
import { useBalanceStore } from '../store';
import { useUserStore } from 'src/plugins/user/store';
import BalanceAddBody from 'src/plugins/balance/components/BalanceAddBody.vue';
import BalanceTransferBody from 'src/plugins/balance/components/BalanceTransferBody.vue';

export default defineComponent({
  components: { BalanceTransferBody, BalanceAddBody },
  // name: 'PageName'
  setup() {
    const store = useBalanceStore();
    const userStore = useUserStore();

    onBeforeMount(() => {
      void store.getBalances();
      void userStore.getUsers();
      void store.getLimits();
    });

    const rows = computed(() => store.balances);
    const limit = ref<number>();

    const columns = [
      {
        name: 'userid',
        label: 'Benutzer ID',
        field: 'userid',
        required: true,
        align: 'left',
        sortable: true,
        format: getName,
      },
      /*{
        name: 'credit',
        label: 'Haben',
        field: 'credit',
        format: (val: number) => val.toFixed(2),
      },
      {
        name: 'debit',
        label: 'Soll',
        field: 'debit',
        format: (val: number) => val.toFixed(2),
      },*/
      {
        name: 'limit',
        label: 'Limit',
        align: 'right',
        format: (_: undefined, row: { userid: string }) => getLimit(row.userid),
      },
      {
        name: 'balance',
        label: 'Kontostand',
        align: 'right',
        format: (_: undefined, row: { debit: number; credit: number }) =>
          getBalance(row.debit, row.credit),
      },
    ];

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

    function getLimit(val: string) {
      return store.user_limits.find((a) => a.userid === val)?.limit?.toFixed(2);
    }

    function getBalance(debit: number, credit: number) {
      return (credit - debit).toFixed(2);
    }

    function updateBalance(user: FG.User) {
      void store.getBalance(user);
    }

    function updateBalances(sender: FG.User, receiver: FG.User) {
      updateBalance(sender);
      updateBalance(receiver);
    }

    const tab = ref('add');

    return {
      rows,
      columns,
      limit,
      setLimits: store.setLimits,
      getName,
      getLimit,
      getBalance,
      updateBalance,
      updateBalances,
      tab,
    };
  },
});
</script>