125 lines
3.7 KiB
Vue
125 lines
3.7 KiB
Vue
<template>
|
|
<q-page padding class="fit row justify-center content-start items-start q-gutter-sm">
|
|
<q-tabs v-if="$q.screen.gt.sm" v-model="tab">
|
|
<q-tab v-for="(tabindex, index) in tabs" :key="'tab' + index" :name="tabindex.name" :label="tabindex.label" />
|
|
</q-tabs>
|
|
<div v-else class="fit row justify-end">
|
|
<q-btn
|
|
flat
|
|
round
|
|
icon="mdi-menu"
|
|
@click="
|
|
showDrawer = !showDrawer;
|
|
show = false;
|
|
"
|
|
/>
|
|
</div>
|
|
<q-drawer v-model="showDrawer" side="right" behavior="mobile" @click="showDrawer = !showDrawer">
|
|
<q-list v-if="!$q.screen.gt.sm && !show" v-model="tab">
|
|
<q-item
|
|
v-for="(tabindex, index) in tabs"
|
|
:key="'tab' + index"
|
|
:active="tab == tabindex.name"
|
|
clickable
|
|
@click="tab = tabindex.name"
|
|
>
|
|
<q-item-label>{{ tabindex.label }}</q-item-label>
|
|
</q-item>
|
|
</q-list>
|
|
<q-list v-if="show">
|
|
<div v-for="(transaction, index) in transactions" :key="index" class="col-sm-12">
|
|
<balance-transaction v-model:transaction="transactions[index]" />
|
|
</div>
|
|
</q-list>
|
|
</q-drawer>
|
|
<q-tab-panels v-model="tab" style="background-color: transparent" class="q-pa-none col-12" animated>
|
|
<q-tab-panel name="add" class="q-px-xs">
|
|
<balance-add
|
|
@open-history="
|
|
showDrawer = !showDrawer;
|
|
show = true;
|
|
"
|
|
/>
|
|
</q-tab-panel>
|
|
<q-tab-panel name="transfer" class="q-px-xs">
|
|
<balance-transfer
|
|
@open-history="
|
|
showDrawer = !showDrawer;
|
|
show = true;
|
|
"
|
|
/>
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</q-page>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, defineComponent, ref, onMounted } from 'vue';
|
|
import { hasSomePermissions, useMainStore } from '@flaschengeist/api';
|
|
import { useBalanceStore } from '../store';
|
|
import PERMISSIONS from '../permissions';
|
|
|
|
import BalanceTransaction from '../components/BalanceTransaction.vue';
|
|
import BalanceTransfer from '../components/BalanceTransfer.vue';
|
|
import BalanceAdd from '../components/BalanceAdd.vue';
|
|
|
|
export default defineComponent({
|
|
name: 'BalanceManage',
|
|
components: { BalanceAdd, BalanceTransfer, BalanceTransaction },
|
|
setup() {
|
|
const balanceStore = useBalanceStore();
|
|
const mainStore = useMainStore();
|
|
|
|
const now = new Date();
|
|
onMounted(() => {
|
|
void balanceStore.getTransactions(mainStore.currentUser, {
|
|
from: new Date(now.getFullYear(), now.getMonth(), now.getDate()),
|
|
});
|
|
});
|
|
|
|
const transactions = computed(() => {
|
|
return balanceStore.transactions
|
|
.filter((t) => t.original_id == undefined)
|
|
.filter((t) => t.time > new Date(now.getFullYear(), now.getMonth(), now.getDate()))
|
|
.sort((a, b) => (a.time >= b.time ? -1 : 1));
|
|
});
|
|
|
|
const canAdd = () => hasSomePermissions([PERMISSIONS.DEBIT, PERMISSIONS.CREDIT, PERMISSIONS.DEBIT_OWN]);
|
|
|
|
interface Tab {
|
|
name: string;
|
|
label: string;
|
|
}
|
|
|
|
const tabs: Tab[] = [
|
|
...(canAdd() ? [{ name: 'add', label: 'Anschreiben' }] : []),
|
|
...(hasSomePermissions([PERMISSIONS.SEND, PERMISSIONS.SEND_OTHER])
|
|
? [{ name: 'transfer', label: 'Übertragen' }]
|
|
: []),
|
|
];
|
|
|
|
//const drawer = ref<boolean>(false);
|
|
|
|
/* const showDrawer = computed({
|
|
get: () => {
|
|
return !Screen.gt.sm && drawer.value;
|
|
},
|
|
set: (val: boolean) => {
|
|
drawer.value = val;
|
|
}
|
|
});
|
|
*/
|
|
const showDrawer = ref<boolean>(false);
|
|
const tab = ref<string>(canAdd() ? 'add' : 'transfer');
|
|
const show = ref<boolean>(false);
|
|
return {
|
|
showDrawer,
|
|
tab,
|
|
tabs,
|
|
transactions,
|
|
show,
|
|
};
|
|
},
|
|
});
|
|
</script>
|