add big sign for #32

default, there is a negative sign (in color red)
When you click on the sign, the sign change
When the sign is a positive sigen the color ist turquoise
This commit is contained in:
Tim Gröger 2023-05-14 01:06:37 +02:00
parent 4abcedce3a
commit b6275f7478
1 changed files with 39 additions and 12 deletions

View File

@ -15,7 +15,17 @@
<q-icon name="mdi-magnify" />
</template>
</q-input>
<q-input v-model.number="limit" label="Limit" type="number" step="0.01" suffix="€" filled dense />
<q-input v-model.number="limit" label="Limit" type="number" step="0.01" suffix="€" filled dense>
<template #prepend>
<q-btn
:icon="sign === '+' ? 'mdi-plus' : 'mdi-minus'"
round
flat
:text-color="sign === '+' ? 'secondary' : 'negative'"
@click="changeSign"
/>
</template>
</q-input>
<q-btn label="Limits Setzen" color="primary" dense @click="setLimits(limit)" />
</div>
</template>
@ -35,10 +45,14 @@
buttons
label-cancel="Abbrechen"
label-set="Speichern"
@save="setLimit(props.row.userid)"
@save="setLimit($event, props.row.userid)"
@cancel="limit = undefined"
>
<q-input v-model.number="scope.value" label="Limit" type="number" step="0.01" suffix="€" filled dense />
<q-input v-model.number="scope.value" label="Limit" type="number" step="0.01" suffix="€" filled dense>
<template #prepend>
<q-btn :icon="sign === '+' ? 'mdi-plus' : 'mdi-minus'" round flat @click="changeSign" />
</template>
</q-input>
</q-popup-edit>
</q-td>
<q-td key="balance" :props="props">
@ -62,7 +76,7 @@
<q-tab-panel name="transfer" class="fit column q-gutter-sm">
<balance-transfer-body
:user="props.row.userid"
@change-balance="updateBalances($event, props.row.userid)"
@change-balance="updateBalances($event, $event, props.row.userid)"
/>
</q-tab-panel>
</q-tab-panels>
@ -115,6 +129,7 @@ export default defineComponent({
const rows = computed(() => store.balances);
const limit = ref<number>();
const sign = ref<'+' | '-'>('-');
const filter = ref<string>();
const columns = [
@ -222,13 +237,12 @@ export default defineComponent({
}
}
function setLimit(userid: string) {
setTimeout(() => {
void store.setLimit(<number>limit.value, userid);
}, 50);
setTimeout(() => {
limit.value = undefined;
}, 100);
async function setLimit(l: number, userid: string) {
if (sign.value === '-') {
l = -l;
}
await store.setLimit(l, userid);
limit.value = undefined;
}
function getFirstname(userid: string) {
@ -239,12 +253,23 @@ export default defineComponent({
return userStore.users.find((a) => a.userid === userid)?.lastname;
}
function changeSign() {
sign.value = sign.value === '+' ? '-' : '+';
}
function setLimits(l: number) {
if (sign.value === '-') {
l = -l;
}
void store.setLimits(l);
}
const tab = ref('add');
return {
rows,
columns,
limit,
setLimits: (l: number) => store.setLimits(l),
setLimits,
getName,
getLimit,
setLimit,
@ -258,6 +283,8 @@ export default defineComponent({
getLastname,
filter,
showMenu,
sign,
changeSign,
};
},
});