124 lines
3.8 KiB
Vue
124 lines
3.8 KiB
Vue
<template>
|
|
<div>
|
|
<q-tabs v-model="tab" v-if="$q.screen.gt.sm">
|
|
<q-tab
|
|
v-for="(tabindex, index) in tabs"
|
|
:key="'tab' + index"
|
|
:name="tabindex.name"
|
|
:label="tabindex.label"
|
|
/>
|
|
</q-tabs>
|
|
<div class="fit row justify-end" v-else>
|
|
<q-btn flat round icon="mdi-menu" @click="showDrawer = !showDrawer; show = false" />
|
|
</div>
|
|
<q-drawer side="right" v-model="showDrawer" @click="showDrawer = !showDrawer" behavior="mobile">
|
|
<q-list v-model="tab" v-if="!$q.screen.gt.sm && !show">
|
|
<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"
|
|
v-bind:key="index"
|
|
class="col-sm-12"
|
|
>
|
|
<!-- TODO: In Vue3 use v-model:transaction="..." -->
|
|
<Transaction :transaction.sync="transactions[index]" />
|
|
</div>
|
|
</q-list>
|
|
</q-drawer>
|
|
<q-page padding class="fit row justify-left q-col-gutter-sm">
|
|
<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">
|
|
<BalanceAdd @open-history="showDrawer = !showDrawer; show = true"/>
|
|
</q-tab-panel>
|
|
<q-tab-panel name="transfer" class="q-px-xs">
|
|
<BalanceTransfer @open-history="showDrawer = !showDrawer; show = true"/>
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</q-page>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, defineComponent, ref, onMounted } from '@vue/composition-api';
|
|
import { Store } from 'vuex';
|
|
import { hasPermissions, hasSomePermissions } from 'src/utils/permission';
|
|
import PERMISSIONS from '../permissions';
|
|
import { Screen } from 'quasar';
|
|
import BalanceAdd from '../components/BalanceAdd.vue';
|
|
import BalanceTransfer from '../components/BalanceTransfer.vue';
|
|
import Transaction from '../components/Transaction.vue';
|
|
import { StateInterfaceBalance } from '../store/balance';
|
|
|
|
export default defineComponent({
|
|
name: 'BalanceManage',
|
|
components: { BalanceAdd, BalanceTransfer, Transaction },
|
|
setup(_, { root }) {
|
|
const store = <Store<StateInterfaceBalance>>root.$store;
|
|
const now = new Date()
|
|
onMounted(() => {
|
|
void store.dispatch('balance/getTransactions', {filter: {from: new Date(now.getFullYear(), now.getMonth(), now.getDate())}})
|
|
})
|
|
const transactions = computed(() =>
|
|
{
|
|
const a =store.state.balance.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))
|
|
console.log(a)
|
|
return a
|
|
});
|
|
|
|
const canAdd = () =>
|
|
hasSomePermissions([PERMISSIONS.DEBIT, PERMISSIONS.CREDIT, PERMISSIONS.DEBIT_OWN], store);
|
|
|
|
interface Tab {
|
|
name: string;
|
|
label: string;
|
|
}
|
|
|
|
const tabs: Tab[] = [
|
|
...(canAdd() ? [{ name: 'add', label: 'Anschreiben' }] : []),
|
|
...(hasSomePermissions([PERMISSIONS.SEND, PERMISSIONS.SEND_OTHER], store)
|
|
? [{ 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>
|