84 lines
2.5 KiB
Vue
84 lines
2.5 KiB
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>
|