[balance] modify balance transfer in admin page

This commit is contained in:
Tim Gröger 2021-04-17 23:48:28 +02:00
parent 955942ac8d
commit 561025d646
3 changed files with 120 additions and 41 deletions

View File

@ -3,21 +3,7 @@
<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>
<balance-transfer-body :user="sender" />
</q-card-section>
</q-card>
</template>
@ -25,37 +11,20 @@
<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 BalanceTransferBody from 'src/plugins/balance/components/BalanceTransferBody.vue';
import PERMISSIONS from '../permissions';
import { useBalanceStore } from '../store';
import { useMainStore } from 'src/stores';
export default defineComponent({
name: 'BalanceTransfer',
components: { BalanceHeader, UserSelector },
components: { BalanceHeader, BalanceTransferBody },
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');
@ -63,11 +32,7 @@ export default defineComponent({
return {
sender,
receiver,
amount,
sendAmount,
showSelector,
sendDisabled,
openHistory,
};
},

View File

@ -0,0 +1,82 @@
<template>
<div class="col-sm-4 col-xs-12">
<q-input
v-model.number="amount"
type="number"
filled
label="Betrag"
step="0.1"
min="0"
suffix="€"
/>
</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
v-close-popup
style="width: 100%"
color="primary"
:disable="sendDisabled"
label="Senden"
@click="sendAmount"
/>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType, ref } from 'vue';
import UserSelector from 'src/plugins/user/components/UserSelector.vue';
import { useBalanceStore } from '../store';
import { useUserStore } from '../../user/store';
export default defineComponent({
name: 'BalanceTransferBody',
components: { UserSelector },
props: {
user: {
type: [Object, String] as PropType<FG.User | string>,
required: true,
},
},
emits: {
changeBalance: (sender: FG.User, receiver: FG.User) => sender && receiver,
},
setup(props, { emit }) {
const store = useBalanceStore();
const userStore = useUserStore();
const receiver = ref<FG.User | undefined>(undefined);
const amount = ref<number>(0);
const sender = computed(() =>
(<FG.User>props.user).userid
? <FG.User>props.user
: <FG.User>userStore.users.find((a) => a.userid === <string>props.user)
);
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);
emit('changeBalance', sender.value, receiver.value);
}
}
return {
receiver,
sender,
amount,
sendAmount,
sendDisabled,
};
},
});
</script>
<style scoped></style>

View File

@ -26,9 +26,31 @@
{{ getBalance(props.row.debit, props.row.credit) }}
<q-menu anchor="bottom middle" self="top middle">
<q-card>
<q-card-section class="fit column q-gutter-sm">
<q-card-section>
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="add" class="fit column q-gutter-sm">
<balance-add-body :user="props.row.userid" @changeBalance="updateBalance" />
</q-tab-panel>
<q-tab-panel name="transfer" class="fit column q-gutter-sm">
<balance-transfer-body
:user="props.row.userid"
@changeBalance="updateBalances"
/>
</q-tab-panel>
</q-tab-panels>
</q-card-section>
<q-tabs
v-model="tab"
dense
class="text-grey"
active-color="primary"
indicator-color="primary"
align="justify"
narrow-indicator
>
<q-tab name="add" label="Anschreiben" />
<q-tab name="transfer" label="Übertragen" />
</q-tabs>
</q-card>
</q-menu>
</q-td>
@ -46,9 +68,10 @@ import { ref, defineComponent, computed, onBeforeMount } from 'vue';
import { useBalanceStore } from '../store';
import { useUserStore } from 'src/plugins/user/store';
import BalanceAddBody from 'src/plugins/balance/components/BalanceAddBody.vue';
import BalanceTransferBody from 'src/plugins/balance/components/BalanceTransferBody.vue';
export default defineComponent({
components: { BalanceAddBody },
components: { BalanceTransferBody, BalanceAddBody },
// name: 'PageName'
setup() {
const store = useBalanceStore();
@ -116,6 +139,13 @@ export default defineComponent({
void store.getBalance(user);
}
function updateBalances(sender: FG.User, receiver: FG.User) {
updateBalance(sender);
updateBalance(receiver);
}
const tab = ref('add');
return {
rows,
columns,
@ -125,6 +155,8 @@ export default defineComponent({
getLimit,
getBalance,
updateBalance,
updateBalances,
tab,
};
},
});