76 lines
2.1 KiB
Vue
76 lines
2.1 KiB
Vue
<template>
|
|
<q-card>
|
|
<BalanceHeader v-model="sender" :show-selector="showSelector" @open-history="openHistory" />
|
|
<q-separator />
|
|
<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="Betrag" step="0.1" min="0" />
|
|
</div>
|
|
<div class="col-sm-4 col-xs-6">
|
|
<UserSelector v-model="receiver" label="Empfänger" />
|
|
</div>
|
|
<div class="col-sm-4 col-xs-6">
|
|
<q-btn
|
|
style="width: 100%"
|
|
color="primary"
|
|
:disable="sendDisabled"
|
|
label="Senden"
|
|
@click="sendAmount"
|
|
/>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, ref, defineComponent } from 'vue';
|
|
import { hasPermission } from 'src/utils/permission';
|
|
import UserSelector from 'src/plugins/user/components/UserSelector.vue';
|
|
import BalanceHeader from '../components/BalanceHeader.vue';
|
|
import PERMISSIONS from '../permissions';
|
|
import { useBalanceStore } from '../store';
|
|
import { useMainStore } from 'src/stores';
|
|
|
|
export default defineComponent({
|
|
name: 'BalanceTransfer',
|
|
components: { BalanceHeader, UserSelector },
|
|
emits: { 'open-history': () => true },
|
|
setup(_, { emit }) {
|
|
const store = useBalanceStore();
|
|
const mainStore = useMainStore();
|
|
|
|
const showSelector = computed(() => hasPermission(PERMISSIONS.SEND_OTHER));
|
|
const sender = ref<FG.User | undefined>(mainStore.currentUser);
|
|
const receiver = ref<FG.User | undefined>(undefined);
|
|
const amount = ref<number>(0);
|
|
|
|
const sendDisabled = computed(() => {
|
|
return !(
|
|
receiver.value &&
|
|
sender.value &&
|
|
sender.value.userid != receiver.value.userid &&
|
|
amount.value > 0
|
|
);
|
|
});
|
|
|
|
async function sendAmount() {
|
|
if (receiver.value) await store.changeBalance(amount.value, receiver.value, sender.value);
|
|
}
|
|
|
|
function openHistory() {
|
|
emit('open-history');
|
|
}
|
|
|
|
return {
|
|
sender,
|
|
receiver,
|
|
amount,
|
|
sendAmount,
|
|
showSelector,
|
|
sendDisabled,
|
|
openHistory,
|
|
};
|
|
},
|
|
});
|
|
</script>
|