Compare commits

...

12 Commits

11 changed files with 425 additions and 147 deletions

View File

@ -76,7 +76,6 @@ import { setBaseURL, api } from 'boot/axios';
import { notEmpty } from 'src/utils/validators';
import { useUserStore } from 'src/plugins/user/store';
import PasswordInput from 'src/components/utils/PasswordInput.vue';
import { useQuasar } from 'quasar';
export default defineComponent({
name: 'Login',
@ -91,7 +90,6 @@ export default defineComponent({
const password = ref('');
const server = ref<string | undefined>(api.defaults.baseURL);
const visible = ref(false);
const $q = useQuasar();
function openServerSettings() {
visible.value = !visible.value;
@ -165,7 +163,6 @@ export default defineComponent({
server,
userid,
visible,
$q,
};
},
});

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,13 +30,14 @@
import { computed, ref, defineComponent, onBeforeMount } from 'vue';
import { hasPermission } from 'src/utils/permission';
import BalanceHeader from '../components/BalanceHeader.vue';
import BalanceAddBody from 'src/plugins/balance/components/BalanceAddBody.vue';
import PERMISSIONS from '../permissions';
import { useBalanceStore } from '../store';
import { useMainStore } from 'src/stores';
export default defineComponent({
name: 'BalanceAdd',
components: { BalanceHeader },
components: { BalanceHeader, BalanceAddBody },
emits: { 'open-history': () => true },
setup(_, { emit }) {
const store = useBalanceStore();
@ -76,39 +47,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,84 @@
<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 } from '../../../utils/permission';
import PERMISSIONS from '../permissions';
import { useUserStore } from '../../user/store';
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

@ -1,8 +1,8 @@
<template>
<q-card-section class="fit row justify-left content-center items-center q-col-gutter-sm">
<q-card-section class="fit row justify-between 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?.toFixed(2) }}
<q-badge v-if="isLocked" color="negative" align="top"> gesperrt </q-badge>
</div>
<q-spinner v-else color="primary" size="3em" />
@ -10,7 +10,7 @@
<div v-if="showSelector" class="col-6">
<UserSelector v-model="user" />
</div>
<div class="col-1 justify-end">
<div class="col-1 justify-end text-right">
<q-btn round flat icon="mdi-format-list-checks" @click="openHistory" />
</div>
</q-card-section>

View File

@ -3,21 +3,7 @@
<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>
<balance-transfer-body :user="sender" />
</q-card-section>
</q-card>
</template>
@ -25,37 +11,20 @@
<script lang="ts">
import { computed, ref, defineComponent } from 'vue';
import { hasPermission } from 'src/utils/permission';
import UserSelector from 'src/plugins/user/components/UserSelector.vue';
import BalanceHeader from '../components/BalanceHeader.vue';
import BalanceTransferBody from 'src/plugins/balance/components/BalanceTransferBody.vue';
import PERMISSIONS from '../permissions';
import { useBalanceStore } from '../store';
import { useMainStore } from 'src/stores';
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');
@ -63,11 +32,7 @@ export default defineComponent({
return {
sender,
receiver,
amount,
sendAmount,
showSelector,
sendDisabled,
openHistory,
};
},

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="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 'src/plugins/user/components/UserSelector.vue';
import { useBalanceStore } from '../store';
import { useUserStore } from '../../user/store';
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

@ -16,7 +16,7 @@
<q-btn
:color="isReversed ? 'positive' : 'negative'"
aria-label="Reverse transaction"
:icon="!isReversed ? 'mdi-trash-can' : 'mdi-check-bold'"
:icon="!isReversed ? 'mdi-delete' : 'mdi-check-bold'"
size="sm"
round
:disable="!canReverse"

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 'src/plugins/user/store';
import BalanceAddBody from 'src/plugins/balance/components/BalanceAddBody.vue';
import BalanceTransferBody from 'src/plugins/balance/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

@ -64,7 +64,7 @@
</template>
<script lang="ts">
import { computed, defineComponent, ref, onMounted } from 'vue';
import { computed, defineComponent, ref, onBeforeMount } from 'vue';
import { hasSomePermissions } from 'src/utils/permission';
import PERMISSIONS from '../permissions';
import BalanceAdd from '../components/BalanceAdd.vue';
@ -81,16 +81,19 @@ export default defineComponent({
const mainStore = useMainStore();
const now = new Date();
onMounted(() => {
onBeforeMount(() => {
void balanceStore.getTransactions(mainStore.currentUser, {
from: new Date(now.getFullYear(), now.getMonth(), now.getDate()),
from: new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours() - 3),
});
});
const transactions = computed(() => {
return balanceStore.transactions
.filter((t) => t.original_id == undefined)
.filter((t) => t.time > new Date(now.getFullYear(), now.getMonth(), now.getDate()))
.filter(
(t) =>
t.time > new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours() - 3)
)
.sort((a, b) => (a.time >= b.time ? -1 : 1));
});

View File

@ -1,6 +1,6 @@
<template>
<q-page padding>
<q-card>
<q-page>
<q-card flat>
<q-card-section class="text-center">
<div class="text-h4">Aktueller Stand</div>
<div style="font-size: 2em">{{ balance.toFixed(2) }}&#8239;</div>
@ -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 }">
@ -50,7 +54,7 @@ export default defineComponent({
void userStore.getUsers().then(() =>
onRequest({
pagination: pagination.value,
filter: undefined
filter: undefined,
})
);
});
@ -60,10 +64,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 {
@ -87,7 +91,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);
@ -112,7 +117,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',
@ -122,31 +127,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',
@ -156,11 +148,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

@ -16,10 +16,16 @@ export interface TransactionsResponse {
count?: number;
}
export interface UserLimit {
userid: string;
limit?: number;
}
import { defineStore } from 'pinia';
import { useMainStore } from 'src/stores';
import { AxiosResponse } from 'axios';
import { Notify } from 'quasar';
import { useUserStore } from 'src/plugins/user/store';
function fixTransaction(t: FG.Transaction) {
t.time = new Date(t.time);
@ -33,6 +39,7 @@ export const useBalanceStore = defineStore({
shortcuts: [] as number[],
transactions: [] as FG.Transaction[],
_balances_dirty: 0,
user_limits: [] as Array<UserLimit>,
}),
getters: {
@ -136,6 +143,7 @@ export const useBalanceStore = defineStore({
to?: Date;
showReversals?: boolean;
showCancelled?: boolean;
descending?: boolean;
}
| undefined = undefined
) {
@ -162,5 +170,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 });
}
},
},
});