update balance from last local commit 3b185e677ca6055bfb9ad7d9a6ed2e0deca66725

This commit is contained in:
Tim Gröger 2021-06-29 11:42:10 +02:00
parent 2ce882f78f
commit a1a8285a36
10 changed files with 435 additions and 171 deletions

View File

@ -20,16 +20,16 @@
},
"devDependencies": {
"@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/parser": "^4.24.0",
"axios": "^0.21.1",
"eslint": "^7.26.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-vue": "^7.9.0",
"pinia": "^2.0.0-alpha.19",
"pinia": "^2.0.0-beta.3",
"prettier": "^2.3.0",
"quasar": "^2.0.0-beta.18",
"quasar": "^2.0.0",
"typescript": "^4.2.4"
},
"peerDependencies": {
@ -43,4 +43,3 @@
"arrowParens": "always"
}
}

20
src/api.d.ts vendored
View File

@ -1,12 +1,12 @@
declare namespace FG {
interface Transaction {
id: number;
time: Date;
amount: number;
reversal_id?: number;
author_id?: string;
sender_id?: string;
original_id?: number;
receiver_id?: string;
}
interface Transaction {
id: number;
time: Date;
amount: number;
reversal_id?: number;
author_id?: string;
sender_id?: string;
original_id?: number;
receiver_id?: string;
}
}

View File

@ -13,45 +13,15 @@
:label="shortcut.toFixed(2).toString() + ' €'"
@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-popup-proxy>
<q-tooltip>Rechtsklick um Verknüpfung zu entfernen</q-tooltip>
</q-menu>
<q-tooltip> Rechtsklick um Verknüpfung zu entfernen </q-tooltip>
</q-btn>
</div></q-card-section
>
</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 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>
<balance-add-body :user="user" />
</q-card-section>
</q-card>
</template>
@ -60,12 +30,13 @@
import { computed, ref, defineComponent, onBeforeMount } from 'vue';
import { hasPermission, useMainStore } from '@flaschengeist/api';
import BalanceHeader from '../components/BalanceHeader.vue';
import BalanceAddBody from '../components/BalanceAddBody.vue';
import PERMISSIONS from '../permissions';
import { useBalanceStore } from '../store';
export default defineComponent({
name: 'BalanceAdd',
components: { BalanceHeader },
components: { BalanceHeader, BalanceAddBody },
emits: { 'open-history': () => true },
setup(_, { emit }) {
const store = useBalanceStore();
@ -75,39 +46,29 @@ export default defineComponent({
void store.getShortcuts();
});
const amount = ref<number>(0);
const showAddShortcut = ref(false);
const user = ref(mainStore.currentUser);
const shortCuts = computed(() => store.shortcuts);
const canAddCredit = 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) {
void store.removeShortcut(shortcut);
}
async function changeBalance(amount: number) {
await store.changeBalance(amount, user.value);
}
function openHistory() {
emit('open-history');
}
async function changeBalance(amount: number) {
await store.changeBalance(amount, user.value);
}
return {
user,
addShortcut,
canAddCredit,
removeShortcut,
showAddShortcut,
changeBalance,
amount,
showSelector,
shortCuts,
openHistory,
changeBalance,
};
},
});

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="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>

View File

@ -2,7 +2,7 @@
<q-card-section class="fit row justify-left content-center items-center q-col-gutter-sm">
<div class="col-5">
<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>
</div>
<q-spinner v-else color="primary" size="3em" />

View File

@ -1,60 +1,30 @@
<template>
<q-card>
<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>
</q-card-section>
<BalanceHeader v-model="sender" :show-selector="showSelector" @open-history="openHistory" />
<q-separator />
<q-card-section class="row q-col-gutter-md items-center">
<balance-transfer-body :user="sender" />
</q-card-section>
</q-card>
</template>
<script lang="ts">
import { computed, ref, defineComponent } from 'vue';
import { hasPermission, useMainStore } from '@flaschengeist/api';
import UserSelector from '@flaschengeist/users/src/components/UserSelector.vue';
import BalanceHeader from '../components/BalanceHeader.vue';
import BalanceTransferBody from '../components/BalanceTransferBody.vue';
import PERMISSIONS from '../permissions';
import { useBalanceStore } from '../store';
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');
@ -62,11 +32,7 @@ export default defineComponent({
return {
sender,
receiver,
amount,
sendAmount,
showSelector,
sendDisabled,
openHistory,
};
},

View File

@ -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>

View File

@ -1,11 +1,90 @@
<template>
<div>
<q-page padding>
<q-card>
<q-card-section>
<q-table :rows="rows" row-key="userid" :columns="columns" />
</q-card-section>
</q-card>
<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-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"
: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>
<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-menu>
</q-td>
</q-tr>
</template>
</q-table>
</q-page>
</div>
</template>
@ -13,17 +92,27 @@
<script lang="ts">
// TODO: Fill usefull data
import { ref, defineComponent, onMounted } from 'vue';
import { ref, defineComponent, computed, onBeforeMount } from 'vue';
import { useBalanceStore } from '../store';
import {useUserStore} from '@flaschengeist/api';
import BalanceAddBody from '../components/BalanceAddBody.vue';
import BalanceTransferBody from '../components/BalanceTransferBody.vue';
export default defineComponent({
components: { BalanceTransferBody, BalanceAddBody },
// name: 'PageName'
setup() {
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 = [
{
@ -32,28 +121,94 @@ export default defineComponent({
field: 'userid',
required: true,
align: 'left',
sortable: true
sortable: true,
format: getName,
},
{
/*{
name: 'credit',
label: 'Haben',
field: 'credit',
format: (val: number) => val.toFixed(2)
format: (val: number) => val.toFixed(2),
},
{
name: 'debit',
label: 'Soll',
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',
label: 'Kontostand',
align: 'right',
field: 'userid',
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>

View File

@ -17,8 +17,12 @@
binary-state-sort
@request="onRequest"
>
<template #top>
<q-toggle v-model="showCancelled" label="Stornierte einblenden" />
<template #top="props">
<q-toggle
v-model="showCancelled"
label="Stornierte einblenden"
@update:model-value="onRequest({ pagination: props.pagination })"
/>
</template>
<template #body-cell="props">
<q-td :props="props" :class="{ 'bg-grey': props.row.reversal_id != null }">
@ -48,7 +52,7 @@ export default defineComponent({
void userStore.getUsers().then(() =>
onRequest({
pagination: pagination.value,
filter: undefined
filter: undefined,
})
);
});
@ -58,10 +62,10 @@ export default defineComponent({
const loading = ref(false);
const pagination = ref({
sortBy: 'time',
descending: false,
descending: true,
page: 1,
rowsPerPage: 3,
rowsNumber: 10
rowsPerPage: 10,
rowsNumber: 10,
});
interface PaginationInterface {
@ -85,7 +89,8 @@ export default defineComponent({
offset: startRow,
limit: fetchCount,
showCancelled: showCancelled.value,
showReversals: false
showReversals: false,
descending,
});
// clear out existing data and add new
data.value.splice(0, data.value.length, ...result.transactions);
@ -110,7 +115,7 @@ export default defineComponent({
field: 'time',
required: 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',
@ -120,31 +125,18 @@ export default defineComponent({
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';
if (row.receiver_id === mainStore.currentUser.userid)
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',
label: 'Betrag',
field: 'amount',
format: (val: number) => `${val.toFixed(2)}`
format: (val: number) => `${val.toFixed(2)}`,
},
{
name: 'author_id',
@ -154,11 +146,15 @@ export default defineComponent({
const user = userStore.users.filter((x) => x.userid == val);
if (user.length > 0) return user[0].display_name;
else return val;
}
}
},
},
];
function getName(userid: string) {
return userStore.users.find((a) => a.userid === userid)?.display_name;
}
return { data, pagination, onRequest, loading, balance, columns, showCancelled };
}
},
});
</script>

View File

@ -1,4 +1,4 @@
import { api, useMainStore } from '@flaschengeist/api';
import { api, useMainStore, useUserStore } from '@flaschengeist/api';
import { defineStore } from 'pinia';
import { AxiosResponse } from 'axios';
import { Notify } from 'quasar';
@ -19,6 +19,11 @@ export interface TransactionsResponse {
count?: number;
}
export interface UserLimit {
userid: string;
limit?: number;
}
function fixTransaction(t: FG.Transaction) {
t.time = new Date(t.time);
}
@ -31,10 +36,11 @@ export const useBalanceStore = defineStore({
shortcuts: [] as number[],
transactions: [] as FG.Transaction[],
_balances_dirty: 0,
user_limits: [] as Array<UserLimit>,
}),
getters: {
balance(): BalancesResponse | undefined {
balance() {
const mainStore = useMainStore();
return this.balances.find((v) => v.userid === mainStore.user?.userid);
},
@ -58,9 +64,7 @@ export const useBalanceStore = defineStore({
async getShortcuts(force = false) {
if (force || this.shortcuts.length == 0) {
const mainStore = useMainStore();
const { data } = await api.get<number[]>(
`/users/${mainStore.currentUser.userid}/balance/shortcuts`
);
const { data } = await api.get<number[]>(`/users/${mainStore.currentUser.userid}/balance/shortcuts`);
this.shortcuts = data;
}
},
@ -74,11 +78,7 @@ export const useBalanceStore = defineStore({
},
async getBalances(force = false) {
if (
force ||
this.balances.length == 0 ||
new Date().getTime() - this._balances_dirty > 60000
) {
if (force || this.balances.length == 0 || new Date().getTime() - this._balances_dirty > 60000) {
const { data } = await api.get<BalancesResponse[]>('/balance');
this.balances = data;
}
@ -94,10 +94,7 @@ export const useBalanceStore = defineStore({
sender: sender?.userid,
});
fixTransaction(data);
if (
user.userid === mainStore.currentUser.userid ||
sender?.userid === mainStore.currentUser.userid
)
if (user.userid === mainStore.currentUser.userid || sender?.userid === mainStore.currentUser.userid)
this.transactions.push(data);
const f = this.balances.find((x) => x.userid === user.userid);
if (f) f.balance += amount;
@ -134,14 +131,14 @@ export const useBalanceStore = defineStore({
to?: Date;
showReversals?: boolean;
showCancelled?: boolean;
descending?: boolean;
}
| undefined = undefined
) {
if (!filter) filter = { limit: 10 };
const { data } = await api.get<TransactionsResponse>(
`/users/${user.userid}/balance/transactions`,
{ params: filter }
);
const { data } = await api.get<TransactionsResponse>(`/users/${user.userid}/balance/transactions`, {
params: filter,
});
data.transactions.forEach((t) => fixTransaction(t));
if (data.transactions) this.transactions.push(...data.transactions);
return data;
@ -160,5 +157,32 @@ export const useBalanceStore = defineStore({
}
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 });
}
},
},
});