update balance from last local commit 3b185e677ca6055bfb9ad7d9a6ed2e0deca66725
This commit is contained in:
parent
2ce882f78f
commit
a1a8285a36
|
@ -20,16 +20,16 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@flaschengeist/types": "^1.0.0-alpha.1",
|
"@flaschengeist/types": "^1.0.0-alpha.1",
|
||||||
"@quasar/app": "^3.0.0-beta.25",
|
"@quasar/app": "^3.0.0",
|
||||||
"@typescript-eslint/eslint-plugin": "^4.24.0",
|
"@typescript-eslint/eslint-plugin": "^4.24.0",
|
||||||
"@typescript-eslint/parser": "^4.24.0",
|
"@typescript-eslint/parser": "^4.24.0",
|
||||||
"axios": "^0.21.1",
|
"axios": "^0.21.1",
|
||||||
"eslint": "^7.26.0",
|
"eslint": "^7.26.0",
|
||||||
"eslint-config-prettier": "^8.3.0",
|
"eslint-config-prettier": "^8.3.0",
|
||||||
"eslint-plugin-vue": "^7.9.0",
|
"eslint-plugin-vue": "^7.9.0",
|
||||||
"pinia": "^2.0.0-alpha.19",
|
"pinia": "^2.0.0-beta.3",
|
||||||
"prettier": "^2.3.0",
|
"prettier": "^2.3.0",
|
||||||
"quasar": "^2.0.0-beta.18",
|
"quasar": "^2.0.0",
|
||||||
"typescript": "^4.2.4"
|
"typescript": "^4.2.4"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
|
@ -43,4 +43,3 @@
|
||||||
"arrowParens": "always"
|
"arrowParens": "always"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,45 +13,15 @@
|
||||||
:label="shortcut.toFixed(2).toString() + ' €'"
|
:label="shortcut.toFixed(2).toString() + ' €'"
|
||||||
@click="changeBalance(shortcut)"
|
@click="changeBalance(shortcut)"
|
||||||
>
|
>
|
||||||
<q-popup-proxy context-menu>
|
<q-menu anchor="bottom middle" self="top middle" context-menu>
|
||||||
<q-btn label="Entfernen" @click="removeShortcut(shortcut)" />
|
<q-btn label="Entfernen" @click="removeShortcut(shortcut)" />
|
||||||
</q-popup-proxy>
|
</q-menu>
|
||||||
<q-tooltip>Rechtsklick um Verknüpfung zu entfernen</q-tooltip>
|
<q-tooltip> Rechtsklick um Verknüpfung zu entfernen </q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
</div></q-card-section
|
</div>
|
||||||
>
|
</q-card-section>
|
||||||
<q-card-section class="row q-col-gutter-md items-center">
|
<q-card-section class="row q-col-gutter-md items-center">
|
||||||
<div class="col-sm-4 col-xs-12">
|
<balance-add-body :user="user" />
|
||||||
<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 v-model="showAddShortcut" context-menu>
|
|
||||||
<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-section>
|
||||||
</q-card>
|
</q-card>
|
||||||
</template>
|
</template>
|
||||||
|
@ -60,12 +30,13 @@
|
||||||
import { computed, ref, defineComponent, onBeforeMount } from 'vue';
|
import { computed, ref, defineComponent, onBeforeMount } from 'vue';
|
||||||
import { hasPermission, useMainStore } from '@flaschengeist/api';
|
import { hasPermission, useMainStore } from '@flaschengeist/api';
|
||||||
import BalanceHeader from '../components/BalanceHeader.vue';
|
import BalanceHeader from '../components/BalanceHeader.vue';
|
||||||
|
import BalanceAddBody from '../components/BalanceAddBody.vue';
|
||||||
import PERMISSIONS from '../permissions';
|
import PERMISSIONS from '../permissions';
|
||||||
import { useBalanceStore } from '../store';
|
import { useBalanceStore } from '../store';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'BalanceAdd',
|
name: 'BalanceAdd',
|
||||||
components: { BalanceHeader },
|
components: { BalanceHeader, BalanceAddBody },
|
||||||
emits: { 'open-history': () => true },
|
emits: { 'open-history': () => true },
|
||||||
setup(_, { emit }) {
|
setup(_, { emit }) {
|
||||||
const store = useBalanceStore();
|
const store = useBalanceStore();
|
||||||
|
@ -75,39 +46,29 @@ export default defineComponent({
|
||||||
void store.getShortcuts();
|
void store.getShortcuts();
|
||||||
});
|
});
|
||||||
|
|
||||||
const amount = ref<number>(0);
|
|
||||||
const showAddShortcut = ref(false);
|
|
||||||
const user = ref(mainStore.currentUser);
|
const user = ref(mainStore.currentUser);
|
||||||
const shortCuts = computed(() => store.shortcuts);
|
const shortCuts = computed(() => store.shortcuts);
|
||||||
|
|
||||||
const canAddCredit = hasPermission(PERMISSIONS.CREDIT);
|
|
||||||
const showSelector = hasPermission(PERMISSIONS.DEBIT) || hasPermission(PERMISSIONS.CREDIT);
|
const showSelector = hasPermission(PERMISSIONS.DEBIT) || hasPermission(PERMISSIONS.CREDIT);
|
||||||
|
|
||||||
function addShortcut() {
|
|
||||||
if (amount.value != 0) void store.createShortcut(amount.value * -1);
|
|
||||||
}
|
|
||||||
function removeShortcut(shortcut: number) {
|
function removeShortcut(shortcut: number) {
|
||||||
void store.removeShortcut(shortcut);
|
void store.removeShortcut(shortcut);
|
||||||
}
|
}
|
||||||
async function changeBalance(amount: number) {
|
|
||||||
await store.changeBalance(amount, user.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function openHistory() {
|
function openHistory() {
|
||||||
emit('open-history');
|
emit('open-history');
|
||||||
}
|
}
|
||||||
|
async function changeBalance(amount: number) {
|
||||||
|
await store.changeBalance(amount, user.value);
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
user,
|
user,
|
||||||
addShortcut,
|
|
||||||
canAddCredit,
|
|
||||||
removeShortcut,
|
removeShortcut,
|
||||||
showAddShortcut,
|
|
||||||
changeBalance,
|
|
||||||
amount,
|
|
||||||
showSelector,
|
showSelector,
|
||||||
shortCuts,
|
shortCuts,
|
||||||
openHistory,
|
openHistory,
|
||||||
|
changeBalance,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -0,0 +1,82 @@
|
||||||
|
<template>
|
||||||
|
<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"
|
||||||
|
suffix="€"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 col-xs-6">
|
||||||
|
<q-btn
|
||||||
|
v-close-popup
|
||||||
|
style="width: 100%"
|
||||||
|
color="primary"
|
||||||
|
label="Anschreiben"
|
||||||
|
@click="changeBalance(amount * -1)"
|
||||||
|
>
|
||||||
|
<q-tooltip v-if="canAddShortcut">
|
||||||
|
Rechtsklick um Betrag als Verknüpfung hinzuzufügen
|
||||||
|
</q-tooltip>
|
||||||
|
<q-menu v-if="canAddShortcut" anchor="bottom middle" self="top middle" context-menu>
|
||||||
|
<q-btn label="neue Verknüpfung" @click="addShortcut"></q-btn>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 col-xs-6">
|
||||||
|
<q-btn
|
||||||
|
v-if="canAddCredit"
|
||||||
|
v-close-popup
|
||||||
|
style="width: 100%"
|
||||||
|
color="secondary"
|
||||||
|
label="Gutschreiben"
|
||||||
|
@click="changeBalance(amount)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref, PropType, computed } from 'vue';
|
||||||
|
import { useBalanceStore } from '../store';
|
||||||
|
import { hasPermission, useUserStore } from '@flaschengeist/api';
|
||||||
|
import PERMISSIONS from '../permissions';
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'BalanceAddBody',
|
||||||
|
props: {
|
||||||
|
user: {
|
||||||
|
type: [Object, String] as PropType<FG.User | string>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
canAddShortcut: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: {
|
||||||
|
changeBalance: (user: FG.User) => user,
|
||||||
|
},
|
||||||
|
setup(props, { emit }) {
|
||||||
|
const store = useBalanceStore();
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const amount = ref<number>(0);
|
||||||
|
async function changeBalance(amount: number) {
|
||||||
|
await store.changeBalance(amount, user.value);
|
||||||
|
emit('changeBalance', user.value);
|
||||||
|
}
|
||||||
|
function addShortcut() {
|
||||||
|
if (amount.value != 0) void store.createShortcut(amount.value * -1);
|
||||||
|
}
|
||||||
|
const canAddCredit = hasPermission(PERMISSIONS.CREDIT);
|
||||||
|
const user = computed(() =>
|
||||||
|
(<FG.User>props.user).userid
|
||||||
|
? <FG.User>props.user
|
||||||
|
: <FG.User>userStore.users.find((a) => a.userid === <string>props.user)
|
||||||
|
);
|
||||||
|
return { changeBalance, addShortcut, canAddCredit, amount };
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
|
@ -2,7 +2,7 @@
|
||||||
<q-card-section class="fit row justify-left content-center items-center q-col-gutter-sm">
|
<q-card-section class="fit row justify-left content-center items-center q-col-gutter-sm">
|
||||||
<div class="col-5">
|
<div class="col-5">
|
||||||
<div v-if="balance" class="text-h6">
|
<div v-if="balance" class="text-h6">
|
||||||
Aktueller Stand: {{ balance.balance.toFixed(2) }} €
|
Aktueller Stand: {{ balance.balance ? balance.balance.toFixed(2) : "" }} €
|
||||||
<q-badge v-if="isLocked" color="negative" align="top"> gesperrt </q-badge>
|
<q-badge v-if="isLocked" color="negative" align="top"> gesperrt </q-badge>
|
||||||
</div>
|
</div>
|
||||||
<q-spinner v-else color="primary" size="3em" />
|
<q-spinner v-else color="primary" size="3em" />
|
||||||
|
|
|
@ -3,21 +3,7 @@
|
||||||
<BalanceHeader v-model="sender" :show-selector="showSelector" @open-history="openHistory" />
|
<BalanceHeader v-model="sender" :show-selector="showSelector" @open-history="openHistory" />
|
||||||
<q-separator />
|
<q-separator />
|
||||||
<q-card-section class="row q-col-gutter-md items-center">
|
<q-card-section class="row q-col-gutter-md items-center">
|
||||||
<div class="col-sm-4 col-xs-12">
|
<balance-transfer-body :user="sender" />
|
||||||
<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>
|
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
</q-card>
|
</q-card>
|
||||||
</template>
|
</template>
|
||||||
|
@ -25,36 +11,20 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { computed, ref, defineComponent } from 'vue';
|
import { computed, ref, defineComponent } from 'vue';
|
||||||
import { hasPermission, useMainStore } from '@flaschengeist/api';
|
import { hasPermission, useMainStore } from '@flaschengeist/api';
|
||||||
import UserSelector from '@flaschengeist/users/src/components/UserSelector.vue';
|
|
||||||
import BalanceHeader from '../components/BalanceHeader.vue';
|
import BalanceHeader from '../components/BalanceHeader.vue';
|
||||||
|
import BalanceTransferBody from '../components/BalanceTransferBody.vue';
|
||||||
|
|
||||||
import PERMISSIONS from '../permissions';
|
import PERMISSIONS from '../permissions';
|
||||||
import { useBalanceStore } from '../store';
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'BalanceTransfer',
|
name: 'BalanceTransfer',
|
||||||
components: { BalanceHeader, UserSelector },
|
components: { BalanceHeader, BalanceTransferBody },
|
||||||
emits: { 'open-history': () => true },
|
emits: { 'open-history': () => true },
|
||||||
setup(_, { emit }) {
|
setup(_, { emit }) {
|
||||||
const store = useBalanceStore();
|
|
||||||
const mainStore = useMainStore();
|
const mainStore = useMainStore();
|
||||||
|
|
||||||
const showSelector = computed(() => hasPermission(PERMISSIONS.SEND_OTHER));
|
const showSelector = computed(() => hasPermission(PERMISSIONS.SEND_OTHER));
|
||||||
const sender = ref<FG.User | undefined>(mainStore.currentUser);
|
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() {
|
function openHistory() {
|
||||||
emit('open-history');
|
emit('open-history');
|
||||||
|
@ -62,11 +32,7 @@ export default defineComponent({
|
||||||
|
|
||||||
return {
|
return {
|
||||||
sender,
|
sender,
|
||||||
receiver,
|
|
||||||
amount,
|
|
||||||
sendAmount,
|
|
||||||
showSelector,
|
showSelector,
|
||||||
sendDisabled,
|
|
||||||
openHistory,
|
openHistory,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
|
@ -0,0 +1,81 @@
|
||||||
|
<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 '@flaschengeist/users/src/components/UserSelector.vue';
|
||||||
|
import { useBalanceStore } from '../store';
|
||||||
|
import { useUserStore } from '@flaschengeist/api';
|
||||||
|
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>
|
|
@ -1,11 +1,90 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<q-page padding>
|
<q-page padding>
|
||||||
|
<q-table :rows="rows" row-key="userid" :columns="columns">
|
||||||
|
<template #top-right>
|
||||||
|
<div class="full-width row q-gutter-sm">
|
||||||
|
<q-input
|
||||||
|
v-model.number="limit"
|
||||||
|
label="Limit"
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
suffix="€"
|
||||||
|
filled
|
||||||
|
dense
|
||||||
|
/>
|
||||||
|
<q-btn label="Limits Setzen" color="primary" dense @click="setLimits(limit)" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #body="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-td key="userid" :props="props">
|
||||||
|
{{ getName(props.row.userid) }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="limit" :props="props">
|
||||||
|
{{ getLimit(props.row.userid) }}€
|
||||||
|
<q-popup-edit
|
||||||
|
v-slot="scope"
|
||||||
|
v-model="limit"
|
||||||
|
buttons
|
||||||
|
label-cancel="Abbrechen"
|
||||||
|
label-set="Speichern"
|
||||||
|
@save="setLimit(props.row.userid)"
|
||||||
|
@cancel="limit = undefined"
|
||||||
|
>
|
||||||
|
<q-input
|
||||||
|
v-model.number="scope.value"
|
||||||
|
label="Limit"
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
suffix="€"
|
||||||
|
filled
|
||||||
|
dense
|
||||||
|
/>
|
||||||
|
</q-popup-edit>
|
||||||
|
</q-td>
|
||||||
|
<q-td key="balance" :props="props">
|
||||||
|
{{ getBalance(props.row.debit, props.row.credit) }}€
|
||||||
|
<q-menu anchor="bottom middle" self="top middle" :persistent="$q.platform.is.mobile">
|
||||||
<q-card>
|
<q-card>
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<q-table :rows="rows" row-key="userid" :columns="columns" />
|
<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"
|
||||||
|
:can-add-shortcut="false"
|
||||||
|
@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-card-section>
|
||||||
|
<div v-if="$q.platform.is.mobile" class="full-width row justify-center">
|
||||||
|
<q-btn v-close-popup label="Abbrechen" flat color="primary" />
|
||||||
|
</div>
|
||||||
|
<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-card>
|
||||||
|
</q-menu>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</q-table>
|
||||||
</q-page>
|
</q-page>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -13,17 +92,27 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
// TODO: Fill usefull data
|
// TODO: Fill usefull data
|
||||||
|
|
||||||
import { ref, defineComponent, onMounted } from 'vue';
|
import { ref, defineComponent, computed, onBeforeMount } from 'vue';
|
||||||
import { useBalanceStore } from '../store';
|
import { useBalanceStore } from '../store';
|
||||||
|
import {useUserStore} from '@flaschengeist/api';
|
||||||
|
import BalanceAddBody from '../components/BalanceAddBody.vue';
|
||||||
|
import BalanceTransferBody from '../components/BalanceTransferBody.vue';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
components: { BalanceTransferBody, BalanceAddBody },
|
||||||
// name: 'PageName'
|
// name: 'PageName'
|
||||||
setup() {
|
setup() {
|
||||||
const store = useBalanceStore();
|
const store = useBalanceStore();
|
||||||
|
const userStore = useUserStore();
|
||||||
|
|
||||||
onMounted(() => void store.getBalances().then((balances) => rows.value.push(...balances)));
|
onBeforeMount(() => {
|
||||||
|
void store.getBalances();
|
||||||
|
void userStore.getUsers();
|
||||||
|
void store.getLimits();
|
||||||
|
});
|
||||||
|
|
||||||
const rows = ref(store.balances);
|
const rows = computed(() => store.balances);
|
||||||
|
const limit = ref<number>();
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{
|
||||||
|
@ -32,28 +121,94 @@ export default defineComponent({
|
||||||
field: 'userid',
|
field: 'userid',
|
||||||
required: true,
|
required: true,
|
||||||
align: 'left',
|
align: 'left',
|
||||||
sortable: true
|
sortable: true,
|
||||||
|
format: getName,
|
||||||
},
|
},
|
||||||
{
|
/*{
|
||||||
name: 'credit',
|
name: 'credit',
|
||||||
label: 'Haben',
|
label: 'Haben',
|
||||||
field: 'credit',
|
field: 'credit',
|
||||||
format: (val: number) => val.toFixed(2)
|
format: (val: number) => val.toFixed(2),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'debit',
|
name: 'debit',
|
||||||
label: 'Soll',
|
label: 'Soll',
|
||||||
field: 'debit',
|
field: 'debit',
|
||||||
format: (val: number) => val.toFixed(2)
|
format: (val: number) => val.toFixed(2),
|
||||||
|
},*/
|
||||||
|
{
|
||||||
|
name: 'limit',
|
||||||
|
label: 'Limit',
|
||||||
|
align: 'right',
|
||||||
|
field: 'userid',
|
||||||
|
format: (_: undefined, row: { userid: string }) => getLimit(row.userid),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'balance',
|
name: 'balance',
|
||||||
label: 'Kontostand',
|
label: 'Kontostand',
|
||||||
|
align: 'right',
|
||||||
|
field: 'userid',
|
||||||
format: (_: undefined, row: { debit: number; credit: number }) =>
|
format: (_: undefined, row: { debit: number; credit: number }) =>
|
||||||
(row.credit - row.debit).toFixed(2)
|
getBalance(row.debit, row.credit),
|
||||||
}
|
sortable: true,
|
||||||
|
sort: (
|
||||||
|
_: undefined,
|
||||||
|
__: undefined,
|
||||||
|
a: { debit: number; credit: number },
|
||||||
|
b: { debit: number; credit: number }
|
||||||
|
) => {
|
||||||
|
return (
|
||||||
|
parseFloat(getBalance(a.debit, a.credit)) - parseFloat(getBalance(b.debit, b.credit))
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
];
|
];
|
||||||
return { rows, columns };
|
|
||||||
|
function getName(val: string) {
|
||||||
|
return userStore.users.find((a) => a.userid === val)?.display_name;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getLimit(val: string) {
|
||||||
|
return store.user_limits.find((a) => a.userid === val)?.limit?.toFixed(2);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getBalance(debit: number, credit: number) {
|
||||||
|
return (credit - debit).toFixed(2);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateBalance(user: FG.User) {
|
||||||
|
void store.getBalance(user);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateBalances(sender: FG.User, receiver: FG.User) {
|
||||||
|
updateBalance(sender);
|
||||||
|
updateBalance(receiver);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setLimit(userid: string) {
|
||||||
|
setTimeout(() => {
|
||||||
|
void store.setLimit(<number>limit.value, userid);
|
||||||
|
}, 50);
|
||||||
|
setTimeout(() => {
|
||||||
|
limit.value = undefined;
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
const tab = ref('add');
|
||||||
|
|
||||||
|
return {
|
||||||
|
rows,
|
||||||
|
columns,
|
||||||
|
limit,
|
||||||
|
setLimits: store.setLimits,
|
||||||
|
getName,
|
||||||
|
getLimit,
|
||||||
|
setLimit,
|
||||||
|
getBalance,
|
||||||
|
updateBalance,
|
||||||
|
updateBalances,
|
||||||
|
tab,
|
||||||
|
};
|
||||||
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -17,8 +17,12 @@
|
||||||
binary-state-sort
|
binary-state-sort
|
||||||
@request="onRequest"
|
@request="onRequest"
|
||||||
>
|
>
|
||||||
<template #top>
|
<template #top="props">
|
||||||
<q-toggle v-model="showCancelled" label="Stornierte einblenden" />
|
<q-toggle
|
||||||
|
v-model="showCancelled"
|
||||||
|
label="Stornierte einblenden"
|
||||||
|
@update:model-value="onRequest({ pagination: props.pagination })"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
<template #body-cell="props">
|
<template #body-cell="props">
|
||||||
<q-td :props="props" :class="{ 'bg-grey': props.row.reversal_id != null }">
|
<q-td :props="props" :class="{ 'bg-grey': props.row.reversal_id != null }">
|
||||||
|
@ -48,7 +52,7 @@ export default defineComponent({
|
||||||
void userStore.getUsers().then(() =>
|
void userStore.getUsers().then(() =>
|
||||||
onRequest({
|
onRequest({
|
||||||
pagination: pagination.value,
|
pagination: pagination.value,
|
||||||
filter: undefined
|
filter: undefined,
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -58,10 +62,10 @@ export default defineComponent({
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const pagination = ref({
|
const pagination = ref({
|
||||||
sortBy: 'time',
|
sortBy: 'time',
|
||||||
descending: false,
|
descending: true,
|
||||||
page: 1,
|
page: 1,
|
||||||
rowsPerPage: 3,
|
rowsPerPage: 10,
|
||||||
rowsNumber: 10
|
rowsNumber: 10,
|
||||||
});
|
});
|
||||||
|
|
||||||
interface PaginationInterface {
|
interface PaginationInterface {
|
||||||
|
@ -85,7 +89,8 @@ export default defineComponent({
|
||||||
offset: startRow,
|
offset: startRow,
|
||||||
limit: fetchCount,
|
limit: fetchCount,
|
||||||
showCancelled: showCancelled.value,
|
showCancelled: showCancelled.value,
|
||||||
showReversals: false
|
showReversals: false,
|
||||||
|
descending,
|
||||||
});
|
});
|
||||||
// clear out existing data and add new
|
// clear out existing data and add new
|
||||||
data.value.splice(0, data.value.length, ...result.transactions);
|
data.value.splice(0, data.value.length, ...result.transactions);
|
||||||
|
@ -110,7 +115,7 @@ export default defineComponent({
|
||||||
field: 'time',
|
field: 'time',
|
||||||
required: true,
|
required: true,
|
||||||
sortable: true,
|
sortable: true,
|
||||||
format: (val: Date) => formatDateTime(new Date(val), true, true, true)
|
format: (val: Date) => formatDateTime(new Date(val), true, true, true),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'type',
|
name: 'type',
|
||||||
|
@ -120,31 +125,18 @@ export default defineComponent({
|
||||||
else {
|
else {
|
||||||
if (row.receiver_id == null) return 'Angeschrieben';
|
if (row.receiver_id == null) return 'Angeschrieben';
|
||||||
else {
|
else {
|
||||||
if (row.receiver_id === mainStore.currentUser.userid) return 'Bekommen von X';
|
if (row.receiver_id === mainStore.currentUser.userid)
|
||||||
else return 'Gesendet an X';
|
return `Bekommen von ${<string>getName(row.sender_id)}`;
|
||||||
}
|
else return `Gesendet an ${<string>getName(row.receiver_id)}`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name: 'text',
|
|
||||||
label: 'Text',
|
|
||||||
format: (_: undefined, row: FG.Transaction) => {
|
|
||||||
if (row.sender_id == null) return 'Gutschrift';
|
|
||||||
else {
|
|
||||||
if (row.receiver_id == null) return 'Angeschrieben';
|
|
||||||
else {
|
|
||||||
if (row.receiver_id === mainStore.currentUser.userid) return 'Bekommen von X';
|
|
||||||
else return 'Gesendet an X';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'amount',
|
name: 'amount',
|
||||||
label: 'Betrag',
|
label: 'Betrag',
|
||||||
field: 'amount',
|
field: 'amount',
|
||||||
format: (val: number) => `${val.toFixed(2)}€`
|
format: (val: number) => `${val.toFixed(2)}€`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'author_id',
|
name: 'author_id',
|
||||||
|
@ -154,11 +146,15 @@ export default defineComponent({
|
||||||
const user = userStore.users.filter((x) => x.userid == val);
|
const user = userStore.users.filter((x) => x.userid == val);
|
||||||
if (user.length > 0) return user[0].display_name;
|
if (user.length > 0) return user[0].display_name;
|
||||||
else return val;
|
else return val;
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
return { data, pagination, onRequest, loading, balance, columns, showCancelled };
|
function getName(userid: string) {
|
||||||
|
return userStore.users.find((a) => a.userid === userid)?.display_name;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return { data, pagination, onRequest, loading, balance, columns, showCancelled };
|
||||||
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
60
src/store.ts
60
src/store.ts
|
@ -1,4 +1,4 @@
|
||||||
import { api, useMainStore } from '@flaschengeist/api';
|
import { api, useMainStore, useUserStore } from '@flaschengeist/api';
|
||||||
import { defineStore } from 'pinia';
|
import { defineStore } from 'pinia';
|
||||||
import { AxiosResponse } from 'axios';
|
import { AxiosResponse } from 'axios';
|
||||||
import { Notify } from 'quasar';
|
import { Notify } from 'quasar';
|
||||||
|
@ -19,6 +19,11 @@ export interface TransactionsResponse {
|
||||||
count?: number;
|
count?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface UserLimit {
|
||||||
|
userid: string;
|
||||||
|
limit?: number;
|
||||||
|
}
|
||||||
|
|
||||||
function fixTransaction(t: FG.Transaction) {
|
function fixTransaction(t: FG.Transaction) {
|
||||||
t.time = new Date(t.time);
|
t.time = new Date(t.time);
|
||||||
}
|
}
|
||||||
|
@ -31,10 +36,11 @@ export const useBalanceStore = defineStore({
|
||||||
shortcuts: [] as number[],
|
shortcuts: [] as number[],
|
||||||
transactions: [] as FG.Transaction[],
|
transactions: [] as FG.Transaction[],
|
||||||
_balances_dirty: 0,
|
_balances_dirty: 0,
|
||||||
|
user_limits: [] as Array<UserLimit>,
|
||||||
}),
|
}),
|
||||||
|
|
||||||
getters: {
|
getters: {
|
||||||
balance(): BalancesResponse | undefined {
|
balance() {
|
||||||
const mainStore = useMainStore();
|
const mainStore = useMainStore();
|
||||||
return this.balances.find((v) => v.userid === mainStore.user?.userid);
|
return this.balances.find((v) => v.userid === mainStore.user?.userid);
|
||||||
},
|
},
|
||||||
|
@ -58,9 +64,7 @@ export const useBalanceStore = defineStore({
|
||||||
async getShortcuts(force = false) {
|
async getShortcuts(force = false) {
|
||||||
if (force || this.shortcuts.length == 0) {
|
if (force || this.shortcuts.length == 0) {
|
||||||
const mainStore = useMainStore();
|
const mainStore = useMainStore();
|
||||||
const { data } = await api.get<number[]>(
|
const { data } = await api.get<number[]>(`/users/${mainStore.currentUser.userid}/balance/shortcuts`);
|
||||||
`/users/${mainStore.currentUser.userid}/balance/shortcuts`
|
|
||||||
);
|
|
||||||
this.shortcuts = data;
|
this.shortcuts = data;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -74,11 +78,7 @@ export const useBalanceStore = defineStore({
|
||||||
},
|
},
|
||||||
|
|
||||||
async getBalances(force = false) {
|
async getBalances(force = false) {
|
||||||
if (
|
if (force || this.balances.length == 0 || new Date().getTime() - this._balances_dirty > 60000) {
|
||||||
force ||
|
|
||||||
this.balances.length == 0 ||
|
|
||||||
new Date().getTime() - this._balances_dirty > 60000
|
|
||||||
) {
|
|
||||||
const { data } = await api.get<BalancesResponse[]>('/balance');
|
const { data } = await api.get<BalancesResponse[]>('/balance');
|
||||||
this.balances = data;
|
this.balances = data;
|
||||||
}
|
}
|
||||||
|
@ -94,10 +94,7 @@ export const useBalanceStore = defineStore({
|
||||||
sender: sender?.userid,
|
sender: sender?.userid,
|
||||||
});
|
});
|
||||||
fixTransaction(data);
|
fixTransaction(data);
|
||||||
if (
|
if (user.userid === mainStore.currentUser.userid || sender?.userid === mainStore.currentUser.userid)
|
||||||
user.userid === mainStore.currentUser.userid ||
|
|
||||||
sender?.userid === mainStore.currentUser.userid
|
|
||||||
)
|
|
||||||
this.transactions.push(data);
|
this.transactions.push(data);
|
||||||
const f = this.balances.find((x) => x.userid === user.userid);
|
const f = this.balances.find((x) => x.userid === user.userid);
|
||||||
if (f) f.balance += amount;
|
if (f) f.balance += amount;
|
||||||
|
@ -134,14 +131,14 @@ export const useBalanceStore = defineStore({
|
||||||
to?: Date;
|
to?: Date;
|
||||||
showReversals?: boolean;
|
showReversals?: boolean;
|
||||||
showCancelled?: boolean;
|
showCancelled?: boolean;
|
||||||
|
descending?: boolean;
|
||||||
}
|
}
|
||||||
| undefined = undefined
|
| undefined = undefined
|
||||||
) {
|
) {
|
||||||
if (!filter) filter = { limit: 10 };
|
if (!filter) filter = { limit: 10 };
|
||||||
const { data } = await api.get<TransactionsResponse>(
|
const { data } = await api.get<TransactionsResponse>(`/users/${user.userid}/balance/transactions`, {
|
||||||
`/users/${user.userid}/balance/transactions`,
|
params: filter,
|
||||||
{ params: filter }
|
});
|
||||||
);
|
|
||||||
data.transactions.forEach((t) => fixTransaction(t));
|
data.transactions.forEach((t) => fixTransaction(t));
|
||||||
if (data.transactions) this.transactions.push(...data.transactions);
|
if (data.transactions) this.transactions.push(...data.transactions);
|
||||||
return data;
|
return data;
|
||||||
|
@ -160,5 +157,32 @@ export const useBalanceStore = defineStore({
|
||||||
}
|
}
|
||||||
this._balances_dirty = 0;
|
this._balances_dirty = 0;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
async getLimits() {
|
||||||
|
const { data } = await api.get<Array<UserLimit>>('users/balance/limit');
|
||||||
|
this.user_limits = data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async setLimits(limit: number) {
|
||||||
|
await api.put('users/balance/limit', { limit });
|
||||||
|
useUserStore().users.forEach((user) => {
|
||||||
|
const user_limit = this.user_limits.find((a) => a.userid === user.userid);
|
||||||
|
if (user_limit) {
|
||||||
|
user_limit.limit = limit;
|
||||||
|
} else {
|
||||||
|
this.user_limits.push({ userid: user.userid, limit });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
async setLimit(limit: number, userid: string) {
|
||||||
|
await api.put(`users/${userid}/balance/limit`, { limit });
|
||||||
|
const user_limit = this.user_limits.find((a) => a.userid === userid);
|
||||||
|
if (user_limit) {
|
||||||
|
user_limit.limit = limit;
|
||||||
|
} else {
|
||||||
|
this.user_limits.push({ userid, limit });
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue