Merged balance actions into one page
This commit is contained in:
parent
17e640892a
commit
502c40329c
|
|
@ -1,67 +1,59 @@
|
|||
<template>
|
||||
<q-page padding class="fit row justify-left q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<q-card>
|
||||
<BalanceHeader @update:user="userUpdated" :showSelector="showSelector" />
|
||||
<q-separator />
|
||||
<q-card>
|
||||
<BalanceHeader @update:user="userUpdated" :showSelector="showSelector" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="row q-col-gutter-md" v-if="shortCuts">
|
||||
<div :key="index" v-for="(shortcut, index) in shortCuts" class="col-4">
|
||||
<q-btn
|
||||
push
|
||||
v-if="shortcut"
|
||||
color="primary"
|
||||
style="width: 100%"
|
||||
:label="shortcut.toFixed(2).toString() + ' €'"
|
||||
@click="changeBalance(shortcut)"
|
||||
>
|
||||
<q-popup-proxy context-menu>
|
||||
<q-btn label="Entfernen" @click="removeShortcut(shortcut)" />
|
||||
</q-popup-proxy>
|
||||
<q-tooltip>Rechtsklick um Verknüpfung zu entfernen</q-tooltip>
|
||||
</q-btn>
|
||||
</div></q-card-section
|
||||
<q-card-section class="row q-col-gutter-md" v-if="shortCuts">
|
||||
<div :key="index" v-for="(shortcut, index) in shortCuts" class="col-4">
|
||||
<q-btn
|
||||
push
|
||||
v-if="shortcut"
|
||||
color="primary"
|
||||
style="width: 100%"
|
||||
:label="shortcut.toFixed(2).toString() + ' €'"
|
||||
@click="changeBalance(shortcut)"
|
||||
>
|
||||
<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="Eigener Betrag"
|
||||
step="0.1"
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-6">
|
||||
<q-btn
|
||||
style="width: 100%"
|
||||
color="primary"
|
||||
label="Anschreiben"
|
||||
@click="changeBalance(amount * -1)"
|
||||
><q-tooltip>Rechtsklick um Betrag als Verknüpfung hinzuzufügen</q-tooltip>
|
||||
<q-popup-proxy context-menu v-model="showAddShortcut">
|
||||
<q-btn label="neue Verknüpfung" @click="addShortcut"></q-btn>
|
||||
</q-popup-proxy>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-6">
|
||||
<q-btn
|
||||
v-if="canAddCredit"
|
||||
style="width: 100%"
|
||||
color="secondary"
|
||||
label="Gutschreiben"
|
||||
@click="changeBalance(amount)"
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div v-for="(transaction, index) in transactions" v-bind:key="index" class="col-md-4 col-sm-6">
|
||||
<!-- TODO: In Vue3 use v-model:transaction="..." -->
|
||||
<Transaction :transaction.sync="transactions[index]" />
|
||||
</div>
|
||||
</q-page>
|
||||
<q-popup-proxy context-menu>
|
||||
<q-btn label="Entfernen" @click="removeShortcut(shortcut)" />
|
||||
</q-popup-proxy>
|
||||
<q-tooltip>Rechtsklick um Verknüpfung zu entfernen</q-tooltip>
|
||||
</q-btn>
|
||||
</div></q-card-section
|
||||
>
|
||||
<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="Eigener Betrag"
|
||||
step="0.1"
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-6">
|
||||
<q-btn
|
||||
style="width: 100%"
|
||||
color="primary"
|
||||
label="Anschreiben"
|
||||
@click="changeBalance(amount * -1)"
|
||||
><q-tooltip>Rechtsklick um Betrag als Verknüpfung hinzuzufügen</q-tooltip>
|
||||
<q-popup-proxy context-menu v-model="showAddShortcut">
|
||||
<q-btn label="neue Verknüpfung" @click="addShortcut"></q-btn>
|
||||
</q-popup-proxy>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-6">
|
||||
<q-btn
|
||||
v-if="canAddCredit"
|
||||
style="width: 100%"
|
||||
color="secondary"
|
||||
label="Gutschreiben"
|
||||
@click="changeBalance(amount)"
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -69,20 +61,25 @@ import { computed, ref, defineComponent, onBeforeMount } from '@vue/composition-
|
|||
import { hasPermission } from 'src/utils/permission';
|
||||
import { StateInterfaceBalance } from '../store/balance';
|
||||
import { Store } from 'vuex';
|
||||
import Transaction from '../components/Transaction.vue';
|
||||
import BalanceHeader from '../components/BalanceHeader.vue';
|
||||
import PERMISSIONS from '../permissions';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BalanceAdd',
|
||||
components: { Transaction, BalanceHeader },
|
||||
components: { BalanceHeader },
|
||||
setup(_, { root }) {
|
||||
onBeforeMount(() => void store.dispatch('balance/getShortcuts'));
|
||||
onBeforeMount(() => {
|
||||
void store.dispatch('balance/getShortcuts');
|
||||
if (store.state.balance.transactions.length == 0)
|
||||
// No transaction, load at most six since yesterday
|
||||
void store.dispatch('balance/getTransactions', {
|
||||
filter: { limit: 6, from: new Date(new Date().setDate(new Date().getDate() - 1)) }
|
||||
});
|
||||
});
|
||||
const store = <Store<StateInterfaceBalance>>root.$store;
|
||||
|
||||
const amount = ref<number>(0);
|
||||
const showAddShortcut = ref(false);
|
||||
const transactions = computed(() => store.state.balance.transactions.slice().reverse());
|
||||
const user = ref(store.state.user.currentUser);
|
||||
const shortCuts = ref(store.state.balance.shortcuts);
|
||||
|
||||
|
|
@ -113,7 +110,6 @@ export default defineComponent({
|
|||
removeShortcut,
|
||||
showAddShortcut,
|
||||
changeBalance,
|
||||
transactions,
|
||||
amount,
|
||||
showSelector,
|
||||
shortCuts,
|
||||
|
|
|
|||
|
|
@ -1,39 +1,25 @@
|
|||
<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.sync="transactions[index]" />
|
||||
</div>
|
||||
</q-page>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -42,13 +28,12 @@ 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 },
|
||||
components: { BalanceHeader, UserSelector },
|
||||
setup(_, { root }) {
|
||||
const store: Store<StateInterfaceBalance> = <Store<StateInterfaceBalance>>root.$store;
|
||||
|
||||
|
|
@ -56,7 +41,6 @@ export default defineComponent({
|
|||
const sender = ref(store.state.user.currentUser);
|
||||
const receiver = ref<FG.User | undefined>(undefined);
|
||||
const amount = ref<number>(0);
|
||||
const transactions = computed(() => store.state.balance.transactions.slice().reverse());
|
||||
|
||||
const sendDisabled = computed(() => {
|
||||
return !(
|
||||
|
|
@ -90,7 +74,6 @@ export default defineComponent({
|
|||
receiver,
|
||||
amount,
|
||||
sendAmount,
|
||||
transactions,
|
||||
showSelector,
|
||||
senderUpdated,
|
||||
receiverUpdated,
|
||||
|
|
|
|||
|
|
@ -1,48 +1,112 @@
|
|||
<template>
|
||||
<div>
|
||||
<q-page padding v-if="checkMain">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<q-list v-for="(mainRoute, index) in mainRoutes" :key="'mainRoute' + index">
|
||||
<essential-link
|
||||
v-for="(route, index2) in mainRoute.children"
|
||||
:key="'route' + index2"
|
||||
:title="route.title"
|
||||
:icon="route.icon"
|
||||
:link="route.name"
|
||||
:permissions="route.meta.permissions"
|
||||
/>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
<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" />
|
||||
</div>
|
||||
<q-drawer side="right" v-model="showDrawer" @click="showDrawer = !showDrawer" behavior="mobile">
|
||||
<q-list 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-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 />
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="transfer" class="q-px-xs">
|
||||
<BalanceTransfer />
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
<div
|
||||
v-for="(transaction, index) in transactions"
|
||||
v-bind:key="index"
|
||||
class="col-md-4 col-sm-6"
|
||||
>
|
||||
<!-- TODO: In Vue3 use v-model:transaction="..." -->
|
||||
<Transaction :transaction.sync="transactions[index]" />
|
||||
</div>
|
||||
</q-page>
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from '@vue/composition-api';
|
||||
import EssentialLink from 'src/components/navigation/EssentialLink.vue';
|
||||
import mainRoutes from 'src/plugins/balance/routes';
|
||||
import { computed, defineComponent, ref } from '@vue/composition-api';
|
||||
import { Store } from 'vuex';
|
||||
import { BalanceInterface } from 'src/plugins/balance/store/balance';
|
||||
import setLoadingBar from 'src/utils/loading';
|
||||
import { StateInterface } from 'src/store';
|
||||
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: 'PageName'
|
||||
components: { EssentialLink },
|
||||
name: 'BalanceManage',
|
||||
components: { BalanceAdd, BalanceTransfer, Transaction },
|
||||
setup(_, { root }) {
|
||||
const store = <Store<StateInterface>>root.$store;
|
||||
const loading = computed(() => {
|
||||
return (<BalanceInterface>store.state.balance).loading > 0;
|
||||
});
|
||||
const checkMain = computed(() => {
|
||||
return root.$route.matched.length == 2;
|
||||
const store = <Store<StateInterfaceBalance>>root.$store;
|
||||
|
||||
const transactions = computed(() =>
|
||||
store.state.balance.transactions
|
||||
.filter(t => t.original_id == undefined)
|
||||
.sort((a, b) => (a.time >= b.time ? -1 : 1))
|
||||
);
|
||||
|
||||
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;
|
||||
}
|
||||
});
|
||||
|
||||
setLoadingBar(loading);
|
||||
const tab = ref<string>(canAdd() ? 'add' : 'transfer');
|
||||
|
||||
return { checkMain, mainRoutes };
|
||||
return {
|
||||
showDrawer,
|
||||
tab,
|
||||
tabs,
|
||||
transactions
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -7,32 +7,32 @@ const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
|
|||
icon: 'mdi-cash-100',
|
||||
path: 'balance',
|
||||
name: 'balance',
|
||||
redirect: { name: 'balance-add' },
|
||||
redirect: { name: 'balance-view' },
|
||||
meta: { permissions: ['user'] },
|
||||
children: [
|
||||
{
|
||||
title: 'Anschreiben',
|
||||
title: 'Übersicht',
|
||||
icon: 'mdi-cash-plus',
|
||||
path: 'add',
|
||||
name: 'balance-add',
|
||||
shortcut: true,
|
||||
meta: { permissions: [permissions.DEBIT_OWN, permissions.SHOW] },
|
||||
component: () => import('../pages/Add.vue')
|
||||
path: 'overview',
|
||||
name: 'balance-view',
|
||||
meta: { permissions: [permissions.SHOW] },
|
||||
component: () => import('../pages/Overview.vue')
|
||||
},
|
||||
{
|
||||
title: 'Übertragen',
|
||||
icon: 'mdi-cash-refund',
|
||||
path: 'transfer',
|
||||
name: 'balance-transfer',
|
||||
meta: { permissions: [permissions.SEND] },
|
||||
component: () => import('../pages/Transfer.vue')
|
||||
title: 'Buchen',
|
||||
icon: 'mdi-cash-plus',
|
||||
path: 'change',
|
||||
name: 'balance-change',
|
||||
shortcut: true,
|
||||
meta: { permissions: [permissions.DEBIT_OWN, permissions.SHOW] },
|
||||
component: () => import('../pages/MainPage.vue')
|
||||
},
|
||||
{
|
||||
title: 'Verwaltung',
|
||||
icon: 'mdi-account-cash',
|
||||
path: 'admin',
|
||||
name: 'balance-admin',
|
||||
meta: { permissions: [permissions.DEBIT_OWN, permissions.SHOW] },
|
||||
meta: { permissions: [permissions.SET_LIMIT, permissions.SHOW_OTHER] },
|
||||
component: () => import('../pages/Admin.vue')
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,25 +1,5 @@
|
|||
import { FG_Plugin } from 'src/plugins';
|
||||
|
||||
/*const permissions = {
|
||||
// Show own and others balance
|
||||
SHOW: 'balance_show',
|
||||
SHOW_OTHER: 'balance_show_others',
|
||||
// Credit balance (give)
|
||||
CREDIT: 'balance_credit',
|
||||
// Debit balance (take)
|
||||
DEBIT: 'balance_debit',
|
||||
// Debit own balance only
|
||||
DEBIT_OWN: 'balance_debit_own',
|
||||
// Send from to other
|
||||
SEND: 'balance_send',
|
||||
// Send from other to another
|
||||
SEND_OTHER: 'balance_send_others',
|
||||
// Can set limit for users
|
||||
SET_LIMIT: 'balance_set_limit',
|
||||
//Allow sending / sub while exceeding the set limit
|
||||
EXCEED_LIMIT: 'balance_exceed_limit'
|
||||
};*/
|
||||
|
||||
const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
|
||||
{
|
||||
title: 'Dienste',
|
||||
|
|
|
|||
|
|
@ -31,12 +31,7 @@
|
|||
label="Zeit"
|
||||
filled
|
||||
/>
|
||||
<q-select
|
||||
class="col-xs-12 col-sm-6 q-px-sm"
|
||||
:options="options"
|
||||
v-model="option"
|
||||
filled
|
||||
/>
|
||||
<q-select class="col-xs-12 col-sm-6 q-px-sm" :options="options" v-model="option" filled />
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right" v-if="!isEdit">
|
||||
|
|
@ -59,10 +54,10 @@ export default defineComponent({
|
|||
name: 'Sessions',
|
||||
props: {
|
||||
session: {
|
||||
required: true,
|
||||
},
|
||||
required: true
|
||||
}
|
||||
},
|
||||
setup(props: {session: FG.Session}, { root }) {
|
||||
setup(props: { session: FG.Session }, { root }) {
|
||||
const store = <Store<StateInterface>>root.$store;
|
||||
const options = ref(['Minuten', 'Stunden', 'Tage']);
|
||||
const option = ref<string>(options.value[0]);
|
||||
|
|
@ -92,7 +87,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
function deleteSession(token: string) {
|
||||
store.dispatch('session/deleteSession', token).catch((error) => {
|
||||
store.dispatch('session/deleteSession', token).catch(error => {
|
||||
console.warn(error);
|
||||
});
|
||||
}
|
||||
|
|
@ -113,7 +108,7 @@ export default defineComponent({
|
|||
return (lifetime.value / (60 * 60 * 24)).toFixed(2);
|
||||
}
|
||||
},
|
||||
set: (val) => {
|
||||
set: val => {
|
||||
if (val) {
|
||||
switch (option.value) {
|
||||
case options.value[0]:
|
||||
|
|
@ -127,7 +122,7 @@ export default defineComponent({
|
|||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
function edit(value: boolean) {
|
||||
|
|
@ -139,11 +134,8 @@ export default defineComponent({
|
|||
console.log(lifetime.value);
|
||||
isEdit.value = false;
|
||||
void store
|
||||
.dispatch(
|
||||
'session/updateSession',
|
||||
{lifetime: lifetime.value, token: props.session.token}
|
||||
)
|
||||
.catch((error) => {
|
||||
.dispatch('session/updateSession', { lifetime: lifetime.value, token: props.session.token })
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
|
|
@ -159,8 +151,8 @@ export default defineComponent({
|
|||
option,
|
||||
lifetime,
|
||||
computedLifetime,
|
||||
save,
|
||||
save
|
||||
};
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue