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

<template>
  <div>
    <q-tabs v-model="tab" v-if="$q.screen.gt.sm">
      <q-tab
        v-for="(tabindex, index) in tabs"
        :key="'tab' + index"
        :name="tabindex.name"
        :label="tabindex.label"
      />
    </q-tabs>
    <div class="fit row justify-end" v-else>
      <q-btn
        flat
        round
        icon="mdi-menu"
        @click="
          showDrawer = !showDrawer;
          show = false;
        "
      />
    </div>
    <q-drawer side="right" v-model="showDrawer" @click="showDrawer = !showDrawer" behavior="mobile">
      <q-list v-model="tab" v-if="!$q.screen.gt.sm && !show">
        <q-item
          v-for="(tabindex, index) in tabs"
          :key="'tab' + index"
          :active="tab == tabindex.name"
          clickable
          @click="tab = tabindex.name"
        >
          <q-item-label>{{ tabindex.label }}</q-item-label>
        </q-item>
      </q-list>
      <q-list v-if="show">
        <div v-for="(transaction, index) in transactions" :key="index" class="col-sm-12">
          <!-- TODO: In Vue3 use v-model:transaction="..." -->
          <Transaction v-model:transaction="transactions[index]" />
        </div>
      </q-list>
    </q-drawer>
    <q-page padding class="fit row justify-left q-col-gutter-sm">
      <q-tab-panels
        v-model="tab"
        style="background-color: transparent"
        class="q-pa-none col-12"
        animated
      >
        <q-tab-panel name="add" class="q-px-xs">
          <BalanceAdd
            @open-history="
              showDrawer = !showDrawer;
              show = true;
            "
          />
        </q-tab-panel>
        <q-tab-panel name="transfer" class="q-px-xs">
          <BalanceTransfer
            @open-history="
              showDrawer = !showDrawer;
              show = true;
            "
          />
        </q-tab-panel>
      </q-tab-panels>
    </q-page>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref, onMounted } from 'vue';
import { Store, useStore } from 'vuex';
import { hasPermissions, hasSomePermissions } from 'src/utils/permission';
import PERMISSIONS from '../permissions';
import { Screen } from 'quasar';
import BalanceAdd from '../components/BalanceAdd.vue';
import BalanceTransfer from '../components/BalanceTransfer.vue';
import Transaction from '../components/Transaction.vue';
import { BalanceInterface, StateInterfaceBalance } from '../store/balance';

export default defineComponent({
  name: 'BalanceManage',
  components: { BalanceAdd, BalanceTransfer, Transaction },
  setup(_, { root }) {
    //const store = <Store<StateInterfaceBalance>>root.$store;
    const store = useStore<Store<StateInterface>>();
    const balanceState = <BalanceInterface>store.state.balance;
    const now = new Date();
    onMounted(() => {
      void store.dispatch('balance/getTransactions', {
        filter: { from: new Date(now.getFullYear(), now.getMonth(), now.getDate()) },
      });
    });
    const transactions = computed(() => {
      const a = balanceState.transactions
        .filter((t) => t.original_id == undefined)
        .filter((t) => t.time > new Date(now.getFullYear(), now.getMonth(), now.getDate()))
        .sort((a, b) => (a.time >= b.time ? -1 : 1));
      console.log(a);
      return a;
    });

    const canAdd = () =>
      hasSomePermissions([PERMISSIONS.DEBIT, PERMISSIONS.CREDIT, PERMISSIONS.DEBIT_OWN], store);

    interface Tab {
      name: string;
      label: string;
    }

    const tabs: Tab[] = [
      ...(canAdd() ? [{ name: 'add', label: 'Anschreiben' }] : []),
      ...(hasSomePermissions([PERMISSIONS.SEND, PERMISSIONS.SEND_OTHER], store)
        ? [{ name: 'transfer', label: 'Übertragen' }]
        : []),
    ];

    const drawer = ref<boolean>(false);

    /*    const showDrawer = computed({
      get: () => {
        return !Screen.gt.sm && drawer.value;
      },
      set: (val: boolean) => {
        drawer.value = val;
      }
    });
*/
    const showDrawer = ref<boolean>(false);
    const tab = ref<string>(canAdd() ? 'add' : 'transfer');
    const show = ref<boolean>(false);
    return {
      showDrawer,
      tab,
      tabs,
      transactions,
      show,
    };
  },
});
</script>