update version to 1.0.0

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

package.json

@@ -1,6 +1,6 @@
 {
   "license": "MIT",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0",
   "name": "@flaschengeist/balance",
   "author": "Ferdinand Thiessen <rpm@fthiessen.de>",
   "homepage": "https://flaschengeist.dev/Flaschengeist",
@@ -19,8 +19,8 @@
     "lint": "eslint --ext .js,.ts,.vue ./src"
   },
   "devDependencies": {
-    "@flaschengeist/api": "^1.0.0-alpha.8",
-    "@flaschengeist/types": "^1.0.0-alpha.10",
+    "@flaschengeist/api": "^1.0.0",
+    "@flaschengeist/types": "^1.0.0",
     "@quasar/app-webpack": "^3.7.2",
     "@typescript-eslint/eslint-plugin": "^5.8.0",
     "@typescript-eslint/parser": "^5.8.0",
@@ -37,8 +37,8 @@
     "typescript": "^4.5.4"
   },
   "peerDependencies": {
-    "@flaschengeist/api": "1.0.0-alpha.8",
-    "@flaschengeist/users": "1.0.0-alpha.4"
+    "@flaschengeist/api": "1.0.0",
+    "@flaschengeist/users": "1.0.0"
   },
   "prettier": {
     "singleQuote": true,

src/balance.d.ts

@@ -2,16 +2,19 @@ import { FG_Plugin } from '@flaschengeist/types';
 
 export interface SendFromNotification {
   receiver_id: string;
-  author_id: string;
 }
 
 export interface SendToNotification {
   sender_id: string;
 }
 
+export interface TransactionNotification {
+  author_id: string;
+}
+
 export interface BalanceNotification extends FG_Plugin.Notification {
   data: {
     type: number;
     amount: number;
-  } & (SendFromNotification | SendToNotification);
+  } & (SendFromNotification | SendToNotification | TransactionNotification);
 }

src/components/BalanceAddBody.vue

@@ -1,9 +1,19 @@
 <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="€" />
+    <q-input
+      v-model.number="amount"
+      ref="refAmount"
+      type="number"
+      filled
+      label="Eigener Betrag"
+      step="0.1"
+      min="0"
+      suffix="€"
+      :rules="[check_cent_step]"
+    />
   </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-btn 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>
@@ -13,7 +23,6 @@
   <div class="col-sm-4 col-xs-6">
     <q-btn
       v-if="canAddCredit"
-      v-close-popup
       style="width: 100%"
       color="secondary"
       label="Gutschreiben"
@@ -23,9 +32,11 @@
 </template>
 <script lang="ts">
 import { defineComponent, ref, PropType, computed, watch } from 'vue';
+import { QInput } from 'quasar';
 import { useBalanceStore } from '../store';
 import { hasPermission, useUserStore } from '@flaschengeist/api';
 import PERMISSIONS from '../permissions';
+import { check_cent_step } from '../utils';
 export default defineComponent({
   name: 'BalanceAddBody',
   props: {
@@ -39,18 +50,21 @@ export default defineComponent({
     },
   },
   emits: {
-    changeBalance: (user: FG.User) => user,
+    'change-balance': (user: FG.User) => user,
   },
   setup(props, { emit }) {
     const store = useBalanceStore();
     const userStore = useUserStore();
     const amount = ref<number>(0);
+    const refAmount = ref<QInput>();
     async function changeBalance(amount: number) {
-      await store.changeBalance(amount, user.value);
-      emit('changeBalance', user.value);
+      await refAmount.value?.validate();
+      if (amount != 0 && !refAmount.value?.hasError) await store.changeBalance(amount, user.value);
+      emit('change-balance', user.value);
     }
-    function addShortcut() {
-      if (amount.value != 0) void store.createShortcut(amount.value * -1);
+    async function addShortcut() {
+      await refAmount.value?.validate();
+      if (amount.value != 0 && !refAmount.value?.hasError) void store.createShortcut(amount.value * -1);
     }
     const canAddCredit = hasPermission(PERMISSIONS.CREDIT);
     const user = computed(() =>
@@ -61,7 +75,7 @@ export default defineComponent({
     watch(amount, (a) => {
       amount.value = Math.abs(a);
     });
-    return { changeBalance, addShortcut, canAddCredit, amount };
+    return { changeBalance, addShortcut, canAddCredit, amount, check_cent_step, refAmount };
   },
 });
 </script>

src/components/BalanceHeader.vue

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

src/components/BalanceTransferBody.vue

@@ -1,25 +1,30 @@
 <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="€" />
+    <q-input
+      v-model.number="amount"
+      ref="refAmount"
+      type="number"
+      filled
+      label="Betrag"
+      step="0.1"
+      min="0"
+      suffix="€"
+      :rules="[check_cent_step]"
+    />
   </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"
-    />
+    <q-btn style="width: 100%" color="primary" :disable="sendDisabled" label="Senden" @click="sendAmount" />
   </div>
 </template>
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue';
+import { QInput } from 'quasar';
 import UserSelector from '@flaschengeist/users/src/components/UserSelector.vue';
 import { useBalanceStore } from '../store';
+import { check_cent_step } from '../utils';
 import { useUserStore } from '@flaschengeist/api';
 export default defineComponent({
   name: 'BalanceTransferBody',
@@ -31,13 +36,14 @@ export default defineComponent({
     },
   },
   emits: {
-    changeBalance: (sender: FG.User, receiver: FG.User) => sender && receiver,
+    changeBalance: ({ sender, receiver }: { 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 refAmount = ref<QInput>();
     const sender = computed(() =>
       (<FG.User>props.user).userid
         ? <FG.User>props.user
@@ -45,13 +51,20 @@ export default defineComponent({
     );
 
     const sendDisabled = computed(() => {
-      return !(receiver.value && sender.value && sender.value.userid != receiver.value.userid && amount.value > 0);
+      return !(
+        receiver.value &&
+        sender.value &&
+        sender.value.userid != receiver.value.userid &&
+        amount.value > 0 &&
+        !refAmount.value?.hasError
+      );
     });
 
     async function sendAmount() {
-      if (receiver.value) {
+      await refAmount.value?.validate();
+      if (receiver.value && !refAmount.value?.hasError) {
         await store.changeBalance(amount.value, receiver.value, sender.value);
-        emit('changeBalance', sender.value, receiver.value);
+        emit('changeBalance', { sender: sender.value, receiver: receiver.value });
       }
     }
     return {
@@ -60,6 +73,8 @@ export default defineComponent({
       amount,
       sendAmount,
       sendDisabled,
+      refAmount,
+      check_cent_step,
     };
   },
 });

src/components/Widget.vue

@@ -21,7 +21,7 @@ export default defineComponent({
       void store.getBalance(mainStore.currentUser);
     });
 
-    const balance = computed(() => store.balance?.balance || NaN);
+    const balance = computed(() => store.balance?.balance || 0);
 
     return { balance };
   },

src/index.ts

@@ -1,15 +1,17 @@
 import { FG_Plugin } from '@flaschengeist/types';
 import { defineAsyncComponent } from 'vue';
 import routes from './routes';
-import { BalanceNotification, SendFromNotification, SendToNotification } from 'app/balance';
+import { BalanceNotification, SendFromNotification, SendToNotification, TransactionNotification } from 'app/balance';
 import { useUserStore } from '@flaschengeist/api';
 
 const BalanceTypes = {
   send_to: 0x01,
   send_from: 0x02,
+  add_from: 0x03,
+  sub_from: 0x04,
 };
 
-function transpile(msg: FG_Plugin.Notification) {
+function transpile (msg: FG_Plugin.Notification) {
   console.log('notification:', msg);
   const message = msg as BalanceNotification;
   message.icon = 'mdi-cash';
@@ -18,23 +20,26 @@ function transpile(msg: FG_Plugin.Notification) {
   if (message.data.type === BalanceTypes.send_from) {
     const receiver = <FG.User>store.findUser((<SendFromNotification>message.data).receiver_id);
     const author = <FG.User>store.findUser((<SendFromNotification>message.data).author_id);
-    message.text = `${author.display_name} hat ${message.data.amount.toFixed(2)}€ von dir zu ${
-      receiver.display_name
-    } überwiesen.`;
-  } else {
+    message.text = `${author.display_name} hat ${message.data.amount.toFixed(2)}€ von dir zu ${receiver.display_name
+      } überwiesen.`;
+  } else if (message.data.type === BalanceTypes.send_to) {
     const sender = <FG.User>store.findUser((<SendToNotification>message.data).sender_id);
     console.log(sender);
     message.text = `${sender.display_name} hat dir ${message.data.amount.toFixed(2)}€ überwiesen.`;
+  } else {
+    const author = <FG.User>store.findUser((<TransactionNotification>message.data).author_id);
+    const abgebucht = message.data.type === BalanceTypes.add_from ? 'aufgeladen' : 'abgebucht';
+    message.text = `${author.display_name} hat ${message.data.amount.toFixed(2)}€ dir ${abgebucht}.`;
   }
   return message;
 }
 
 const plugin: FG_Plugin.Plugin = {
-  id: 'dev.flaschengeist.balance',
+  id: 'balance',
   name: 'Balance',
   innerRoutes: routes,
   requiredModules: [['balance']],
-  version: '0.0.2',
+  version: '1.0.0',
   notification: transpile,
   widgets: [
     {

src/pages/BalanceAdminPage.vue

@@ -5,17 +5,37 @@
       :rows="rows"
       row-key="userid"
       :columns="columns"
-      @request="onRequest"
       :filter="filter"
+      @request="onRequest"
     >
       <template #top-right>
         <div class="full-width row q-gutter-sm">
           <q-input v-model="filter" label="Filter" filled dense debounce="300">
-            <template v-slot:append>
+            <template #append>
               <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
+            ref="refLimit"
+            v-model.number="limit"
+            label="Limit"
+            type="number"
+            step="0.01"
+            suffix="€"
+            filled
+            dense
+            :rules="[check_cent_step]"
+          >
+            <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,15 +55,24 @@
               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">
             {{ getBalance(props.row.debit, props.row.credit) }}€
-            <q-menu anchor="bottom middle" self="top middle" :persistent="$q.platform.is.mobile">
+            <q-menu
+              v-model="showMenu[props.row.userid]"
+              anchor="bottom middle"
+              self="top middle"
+              :persistent="$q.platform.is.mobile"
+            >
               <q-card>
                 <q-card-section>
                   <q-tab-panels v-model="tab" animated>
@@ -51,11 +80,14 @@
                       <balance-add-body
                         :user="props.row.userid"
                         :can-add-shortcut="false"
-                        @change-balance="updateBalance"
+                        @change-balance="updateBalance($event, props.row.userid)"
                       />
                     </q-tab-panel>
                     <q-tab-panel name="transfer" class="fit column q-gutter-sm">
-                      <balance-transfer-body :user="props.row.userid" @change-balance="updateBalances" />
+                      <balance-transfer-body
+                        :user="props.row.userid"
+                        @change-balance="updateBalances($event, $event, props.row.userid)"
+                      />
                     </q-tab-panel>
                   </q-tab-panels>
                 </q-card-section>
@@ -84,9 +116,9 @@
 </template>
 
 <script lang="ts">
-// TODO: Fill usefull data
-
 import { ref, defineComponent, computed, onBeforeMount } from 'vue';
+import { QInput } from 'quasar';
+import { check_cent_step } from '../utils';
 import { useBalanceStore } from '../store';
 import { useUserStore } from '@flaschengeist/api';
 import BalanceAddBody from '../components/BalanceAddBody.vue';
@@ -99,6 +131,9 @@ export default defineComponent({
     const store = useBalanceStore();
     const userStore = useUserStore();
 
+    const showMenu = ref<{ [userid: string]: boolean }>({});
+    const refLimit = ref<QInput>();
+
     onBeforeMount(() => {
       void userStore.getUsers();
       void store.getLimits();
@@ -107,6 +142,7 @@ export default defineComponent({
 
     const rows = computed(() => store.balances);
     const limit = ref<number>();
+    const sign = ref<'+' | '-'>('-');
     const filter = ref<string>();
 
     const columns = [
@@ -183,7 +219,7 @@ export default defineComponent({
       } catch (error) {
         console.warn(error);
       }
-      console.log(pagination.value);
+      //console.log(pagination.value);
       loading.value = false;
     }
 
@@ -200,22 +236,30 @@ export default defineComponent({
       return (credit - debit).toFixed(2);
     }
 
-    function updateBalance(user: FG.User) {
-      void store.getBalance(user);
+    async function updateBalance(user: FG.User, ref_showMenu?: string) {
+      await store.getBalance(user);
+      if (ref_showMenu) {
+        showMenu.value[ref_showMenu] = false;
+      }
+    }
+    async function updateBalances({ sender, receiver }: { sender: FG.User; receiver: FG.User }, ref_showMenu?: string) {
+      await updateBalance(sender);
+      await updateBalance(receiver);
+      if (ref_showMenu) {
+        showMenu.value[ref_showMenu] = false;
+      }
     }
 
-    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);
+    async function setLimit(l: number, userid: string) {
+      if (sign.value === '-') {
+        l = -l;
+      }
+      await refLimit.value?.validate();
+      if (refLimit.value?.hasError) {
+        return;
+      }
+      await store.setLimit(l, userid);
+      limit.value = undefined;
     }
 
     function getFirstname(userid: string) {
@@ -226,13 +270,27 @@ export default defineComponent({
       return userStore.users.find((a) => a.userid === userid)?.lastname;
     }
 
-    const tab = ref('add');
+    function changeSign() {
+      sign.value = sign.value === '+' ? '-' : '+';
+    }
 
+    async function setLimits(l: number) {
+      if (sign.value === '-') {
+        l = -l;
+      }
+      await refLimit.value?.validate();
+      if (refLimit.value?.hasError) {
+        return;
+      }
+      void store.setLimits(l);
+    }
+
+    const tab = ref('add');
     return {
       rows,
       columns,
       limit,
-      setLimits: (l: number) => store.setLimits(l),
+      setLimits,
       getName,
       getLimit,
       setLimit,
@@ -245,6 +303,11 @@ export default defineComponent({
       getFirstname,
       getLastname,
       filter,
+      showMenu,
+      sign,
+      changeSign,
+      check_cent_step,
+      refLimit,
     };
   },
 });

src/pages/BalanceOverviewPage.vue

@@ -38,7 +38,8 @@
 
 <script lang="ts">
 import { formatDateTime, useMainStore, useUserStore } from '@flaschengeist/api';
-import { computed, defineComponent, onMounted, ref } from 'vue';
+import { computed, defineComponent, onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { useBalanceStore } from '../store';
 
 export default defineComponent({
@@ -47,8 +48,12 @@ export default defineComponent({
     const store = useBalanceStore();
     const mainStore = useMainStore();
     const userStore = useUserStore();
+    const router = useRouter();
+    const route = useRoute();
 
-    onMounted(() => {
+    onMounted(async () => {
+      if (route.query?.showCancelled == 'true') showCancelled.value = true;
+      await router.replace({ query: { showCancelled: showCancelled.value } });
       void store.getBalance(mainStore.currentUser);
       void userStore.getUsers().then(() =>
         onRequest({
@@ -107,7 +112,7 @@ export default defineComponent({
       loading.value = false;
     }
 
-    const balance = computed(() => store.balance?.balance || NaN);
+    const balance = computed(() => store.balance?.balance || 0);
 
     const columns = [
       {
@@ -155,6 +160,14 @@ export default defineComponent({
       return userStore.users.find((a) => a.userid === userid)?.display_name;
     }
 
+    watch(showCancelled, async () => {
+      await router.replace({ query: { showCancelled: showCancelled.value } });
+      await onRequest({
+        pagination: pagination.value,
+        filter: undefined,
+      });
+    });
+
     return { data, pagination, onRequest, loading, balance, columns, showCancelled };
   },
 });

src/pages/MainPage.vue

@@ -28,7 +28,7 @@
       </q-list>
       <q-list v-if="show">
         <div v-for="(transaction, index) in transactions" :key="index" class="col-sm-12">
-          <balance-transaction v-model:transaction="transactions[index]" />
+          <balance-transaction v-model:transaction="transactions[index]" @update:transaction="updateBalance" />
         </div>
       </q-list>
     </q-drawer>
@@ -54,7 +54,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, onMounted } from 'vue';
+import { computed, defineComponent, ref, onMounted, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { hasSomePermissions, useMainStore } from '@flaschengeist/api';
 import { useBalanceStore } from '../store';
 import PERMISSIONS from '../permissions';
@@ -69,9 +70,15 @@ export default defineComponent({
   setup() {
     const balanceStore = useBalanceStore();
     const mainStore = useMainStore();
+    const router = useRouter();
+    const route = useRoute();
 
     const now = new Date();
-    onMounted(() => {
+    onMounted(async () => {
+      if (tabs.some((value) => value.name == route.query.q_tab)) {
+        tab.value = route.query.q_tab as string;
+      }
+      await router.replace({ query: { q_tab: tab.value } });
       void balanceStore.getTransactions(mainStore.currentUser, {
         from: new Date(now.getFullYear(), now.getMonth(), now.getDate()),
       });
@@ -111,6 +118,9 @@ export default defineComponent({
 */
     const showDrawer = ref<boolean>(false);
     const tab = ref<string>(canAdd() ? 'add' : 'transfer');
+    watch(tab, (val) => {
+      void router.replace({ query: { q_tab: val } });
+    });
     const show = ref<boolean>(false);
     return {
       showDrawer,
@@ -118,6 +128,7 @@ export default defineComponent({
       tabs,
       transactions,
       show,
+      updateBalance: () => balanceStore.getBalance(mainStore.currentUser),
     };
   },
 });

src/store.ts

@@ -131,14 +131,14 @@ export const useBalanceStore = defineStore({
       user: FG.User,
       filter:
         | {
-            limit?: number;
-            offset?: number;
-            from?: Date;
-            to?: Date;
-            showReversals?: boolean;
-            showCancelled?: boolean;
-            descending?: boolean;
-          }
+          limit?: number;
+          offset?: number;
+          from?: Date;
+          to?: Date;
+          showReversals?: boolean;
+          showCancelled?: boolean;
+          descending?: boolean;
+        }
         | undefined = undefined
     ) {
       if (!filter) filter = { limit: 10 };
@@ -146,7 +146,13 @@ export const useBalanceStore = defineStore({
         params: filter,
       });
       data.transactions.forEach((t) => fixTransaction(t));
-      if (data.transactions) this.transactions.push(...data.transactions);
+      if (data.transactions) {
+        data.transactions.forEach((t) => {
+          const idx = this.transactions.findIndex((x) => x.id === t.id);
+          if (idx == -1) this.transactions.push(t);
+          else this.transactions[idx] = t;
+        });
+      }
       return data;
     },
 

src/utils/index.ts

@@ -0,0 +1,3 @@
+export function check_cent_step(value: number): boolean | string {
+  return (value * 100) % 1 === 0 || 'Betrag muss in 1-Cent-Schritten angegeben werden';
+}