flaschengeist-frontend/src/plugins/balance/components/BalanceAdd.vue

<template>
  <q-card>
    <BalanceHeader v-model="user" :show-selector="showSelector" @open-history="openHistory" />
    <q-separator />

    <q-card-section v-if="shortCuts" class="row q-col-gutter-md">
      <div v-for="(shortcut, index) in shortCuts" :key="index" class="col-4">
        <q-btn
          v-if="shortcut"
          push
          color="primary"
          style="width: 100%"
          :label="shortcut.toFixed(2).toString() + ' €'"
          @click="changeBalance(shortcut)"
        >
          <q-popup-proxy context-menu>
            <q-btn label="Entfernen" @click="removeShortcut(shortcut)" />
          </q-popup-proxy>
          <q-tooltip>Rechtsklick um Verknüpfung zu entfernen</q-tooltip>
        </q-btn>
      </div></q-card-section
    >
    <q-card-section class="row q-col-gutter-md items-center">
      <div class="col-sm-4 col-xs-12">
        <q-input
          v-model.number="amount"
          type="number"
          filled
          label="Eigener Betrag"
          step="0.1"
          min="0"
        />
      </div>
      <div class="col-sm-4 col-xs-6">
        <q-btn
          style="width: 100%"
          color="primary"
          label="Anschreiben"
          @click="changeBalance(amount * -1)"
          ><q-tooltip>Rechtsklick um Betrag als Verknüpfung hinzuzufügen</q-tooltip>
          <q-popup-proxy v-model="showAddShortcut" context-menu>
            <q-btn label="neue Verknüpfung" @click="addShortcut"></q-btn>
          </q-popup-proxy>
        </q-btn>
      </div>
      <div class="col-sm-4 col-xs-6">
        <q-btn
          v-if="canAddCredit"
          style="width: 100%"
          color="secondary"
          label="Gutschreiben"
          @click="changeBalance(amount)"
        />
      </div>
    </q-card-section>
  </q-card>
</template>

<script lang="ts">
import { computed, ref, defineComponent, onBeforeMount } from 'vue';
import { hasPermission } from 'src/utils/permission';
import BalanceHeader from '../components/BalanceHeader.vue';
import PERMISSIONS from '../permissions';
import { useBalanceStore } from '../store';
import { useMainStore } from 'src/stores';

export default defineComponent({
  name: 'BalanceAdd',
  components: { BalanceHeader },
  emits: { 'open-history': () => true },
  setup(_, { emit }) {
    const store = useBalanceStore();
    const mainStore = useMainStore();

    onBeforeMount(() => {
      void store.getShortcuts();
    });

    const amount = ref<number>(0);
    const showAddShortcut = ref(false);
    const user = ref(mainStore.currentUser);
    const shortCuts = computed(() => store.shortcuts);

    const canAddCredit = hasPermission(PERMISSIONS.CREDIT);
    const showSelector = hasPermission(PERMISSIONS.DEBIT) || hasPermission(PERMISSIONS.CREDIT);

    function addShortcut() {
      if (amount.value != 0) void store.createShortcut(amount.value * -1);
    }
    function removeShortcut(shortcut: number) {
      void store.removeShortcut(shortcut);
    }
    async function changeBalance(amount: number) {
      await store.changeBalance(amount, user.value);
    }

    function openHistory() {
      emit('open-history');
    }

    return {
      user,
      addShortcut,
      canAddCredit,
      removeShortcut,
      showAddShortcut,
      changeBalance,
      amount,
      showSelector,
      shortCuts,
      openHistory,
    };
  },
});
</script>