116 lines
3.3 KiB
Vue
116 lines
3.3 KiB
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>
|