flaschengeist-balance/src/components/BalanceAddBody.vue

<template>
  <div class="col-sm-4 col-xs-12">
    <q-input
      v-model.number="amount"
      ref="refAmount"
      type="number"
      filled
      label="Eigener Betrag"
      step="0.1"
      min="0"
      suffix="€"
      :rules="[check_cent_step]"
    />
  </div>
  <div class="col-sm-4 col-xs-6">
    <q-btn style="width: 100%" color="primary" label="Anschreiben" @click="changeBalance(amount * -1)">
      <q-tooltip v-if="canAddShortcut"> Rechtsklick um Betrag als Verknüpfung hinzuzufügen </q-tooltip>
      <q-menu v-if="canAddShortcut" anchor="bottom middle" self="top middle" context-menu>
        <q-btn label="neue Verknüpfung" @click="addShortcut"></q-btn>
      </q-menu>
    </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>
</template>
<script lang="ts">
import { defineComponent, ref, PropType, computed, watch } from 'vue';
import { QInput } from 'quasar';
import { useBalanceStore } from '../store';
import { hasPermission, useUserStore } from '@flaschengeist/api';
import PERMISSIONS from '../permissions';
import { check_cent_step } from '../utils';
export default defineComponent({
  name: 'BalanceAddBody',
  props: {
    user: {
      type: [Object, String] as PropType<FG.User | string>,
      required: true,
    },
    canAddShortcut: {
      type: Boolean,
      default: false,
    },
  },
  emits: {
    'change-balance': (user: FG.User) => user,
  },
  setup(props, { emit }) {
    const store = useBalanceStore();
    const userStore = useUserStore();
    const amount = ref<number>(0);
    const refAmount = ref<QInput>();
    async function changeBalance(amount: number) {
      await refAmount.value?.validate();
      if (amount != 0 && !refAmount.value?.hasError) await store.changeBalance(amount, user.value);
      emit('change-balance', user.value);
    }
    async function addShortcut() {
      await refAmount.value?.validate();
      if (amount.value != 0 && !refAmount.value?.hasError) void store.createShortcut(amount.value * -1);
    }
    const canAddCredit = hasPermission(PERMISSIONS.CREDIT);
    const user = computed(() =>
      (<FG.User>props.user).userid
        ? <FG.User>props.user
        : <FG.User>userStore.users.find((a) => a.userid === <string>props.user)
    );
    watch(amount, (a) => {
      amount.value = Math.abs(a);
    });
    return { changeBalance, addShortcut, canAddCredit, amount, check_cent_step, refAmount };
  },
});
</script>

<style scoped></style>