Flaschengeist
/
flaschengeist-balance
7
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/pages/BalanceAdminPage.vue
View File

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