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

src/pages/BalanceAdminPage.vue

@@ -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(() => {
+    async function setLimit(l: number, userid: string) {
+      if (sign.value === '-') {
+        l = -l;
+      }
+      await store.setLimit(l, userid);
       limit.value = undefined;
-      }, 100);
     }
 
     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,
     };
   },
 });