112 lines
3.4 KiB
Vue
112 lines
3.4 KiB
Vue
|
<template>
|
||
|
|
<q-page padding class="fit row justify-left q-col-gutter-sm">
|
||
|
|
<div class="col-12">
|
||
|
|
<q-card>
|
||
|
|
<BalanceHeader @update:user="senderUpdated" :showSelector="showSelector" />
|
||
|
|
<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 :user="receiver" @update:user="receiverUpdated" 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>
|
||
|
|
</div>
|
||
|
|
<div v-for="(transaction, index) in transactions" v-bind:key="index" class="col-sm-4 col-xs-6">
|
||
|
|
<Transaction :transaction="transaction" @reversed="reversed" />
|
||
|
|
</div>
|
||
|
|
</q-page>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { computed, ref, defineComponent } from '@vue/composition-api';
|
||
|
|
import { hasPermission } from 'src/utils/permission';
|
||
|
|
import { StateInterfaceBalance } from '../store/balance';
|
||
|
|
import { Store } from 'vuex';
|
||
|
|
import UserSelector from 'src/plugins/user/components/UserSelector.vue';
|
||
|
|
import Transaction from '../components/Transaction.vue';
|
||
|
|
import BalanceHeader from '../components/BalanceHeader.vue';
|
||
|
|
import PERMISSIONS from '../permissions';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'BalanceTransfer',
|
||
|
|
components: { Transaction, BalanceHeader, UserSelector },
|
||
|
|
setup(_, { root }) {
|
||
|
|
const store: Store<StateInterfaceBalance> = <Store<StateInterfaceBalance>>root.$store;
|
||
|
|
|
||
|
|
const showSelector = computed(() => hasPermission(PERMISSIONS.SEND_OTHER, store));
|
||
|
|
const sender = ref(store.state.user.currentUser);
|
||
|
|
const receiver = ref<FG.User | undefined>(undefined);
|
||
|
|
const amount = ref<number>(0);
|
||
|
|
const transactions = ref<FG.Transaction[]>([]);
|
||
|
|
|
||
|
|
const sendDisabled = computed(() => {
|
||
|
|
return !(
|
||
|
|
receiver.value &&
|
||
|
|
sender.value &&
|
||
|
|
sender.value.userid != receiver.value.userid &&
|
||
|
|
amount.value > 0
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
function senderUpdated(selectedUser: FG.User) {
|
||
|
|
console.log(selectedUser);
|
||
|
|
sender.value = selectedUser;
|
||
|
|
}
|
||
|
|
function receiverUpdated(selectedUser: FG.User) {
|
||
|
|
receiver.value = selectedUser;
|
||
|
|
}
|
||
|
|
|
||
|
|
function reversed(id: number) {
|
||
|
|
transactions.value = transactions.value.filter(value => value.id != id);
|
||
|
|
}
|
||
|
|
|
||
|
|
function sendAmount() {
|
||
|
|
store
|
||
|
|
.dispatch('balance/changeBalance', {
|
||
|
|
amount: amount.value,
|
||
|
|
sender: sender.value?.userid,
|
||
|
|
user: receiver.value?.userid
|
||
|
|
})
|
||
|
|
.then((transaction: FG.Transaction) => {
|
||
|
|
if (transactions.value.length > 5) transactions.value.pop();
|
||
|
|
transaction.time = new Date(transaction.time);
|
||
|
|
transactions.value.unshift(transaction);
|
||
|
|
})
|
||
|
|
.catch(err => console.log(err));
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
sender,
|
||
|
|
receiver,
|
||
|
|
amount,
|
||
|
|
sendAmount,
|
||
|
|
transactions,
|
||
|
|
showSelector,
|
||
|
|
senderUpdated,
|
||
|
|
receiverUpdated,
|
||
|
|
sendDisabled,
|
||
|
|
reversed
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|