Fixed shortcuts for adding balance

src/plugins/balance/pages/Add.vue

@@ -6,15 +6,22 @@
         <q-separator />
 
         <q-card-section class="row q-col-gutter-md" v-if="shortCuts">
-          <div v-for="(amount, index) in shortCuts" v-bind:key="index" class="col-4">
+          <div :key="index" v-for="(shortcut, index) in shortCuts" class="col-4">
             <q-btn
+              push
+              v-if="shortcut"
               color="primary"
               style="width: 100%"
-              :label="amount.toFixed(2).toString() + ' €'"
-              @click="changeBalance(amount)"
-            />
-          </div>
-        </q-card-section>
+              :label="shortcut.toFixed(2).toString() + ' €'"
+              @click="changeBalance(shortcut)"
+            >
+              <q-popup-proxy context-menu>
+                <q-btn label="Entfernen" @click="removeShortcut(shortcut)" />
+              </q-popup-proxy>
+              <q-tooltip>Rechtsklick um Verknüpfung zu entfernen</q-tooltip>
+            </q-btn>
+          </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
@@ -34,8 +41,9 @@
               @click="changeBalance(amount * -1)"
               ><q-tooltip>Rechtsklick um Betrag als Verknüpfung hinzuzufügen</q-tooltip>
               <q-popup-proxy context-menu v-model="showAddShortcut">
-                <q-btn label="neue Verknüpfung" @click="addShortcut" /></q-popup-proxy
-            ></q-btn>
+                <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
@@ -55,8 +63,6 @@
 </template>
 
 <script lang="ts">
-// TODO: Shortcuts are not displayed when first loaded
-
 import { computed, ref, defineComponent, onBeforeMount } from '@vue/composition-api';
 import { hasPermission } from 'src/utils/permission';
 import { StateInterfaceBalance } from '../store/balance';
@@ -83,9 +89,10 @@ export default defineComponent({
     );
 
     function addShortcut() {
-      // TODO: Save shortcuts on backend
-      showAddShortcut.value = false;
-      console.log(amount);
+      void store.dispatch('balance/addShortcut', amount.value * -1);
+    }
+    function removeShortcut(shortcut: number) {
+      void store.dispatch('balance/removeShortcut', shortcut);
     }
     function userUpdated(selectedUser: FG.User) {
       user.value = selectedUser;
@@ -109,6 +116,7 @@ export default defineComponent({
     return {
       user,
       addShortcut,
+      removeShortcut,
       showAddShortcut,
       changeBalance,
       transactions,

src/plugins/balance/store/balance.ts

@@ -52,11 +52,28 @@ const mutations: MutationTree<BalanceInterface> = {
     else state.loading -= 1;
   },
   setShortcuts(state, data: Array<number>) {
-    state.shortcuts = data.sort().reverse();
+    state.shortcuts.splice(0, state.shortcuts.length, ...data);
   }
 };
 
 const actions: ActionTree<BalanceInterface, StateInterface> = {
+  addShortcut({ commit, state, rootState }, shortcut) {
+    const sc = [...state.shortcuts, shortcut];
+    sc.sort().reverse();
+
+    const user = <FG.User>rootState.user.currentUser;
+    return axios.put(`/users/${user.userid}/balance/shortcuts`, sc).then(() => {
+      commit('setShortcuts', sc);
+    });
+  },
+  removeShortcut({ commit, state, rootState }, shortcut) {
+    const sc = state.shortcuts.filter((value: number) => value != shortcut);
+
+    const user = <FG.User>rootState.user.currentUser;
+    return axios.put(`/users/${user.userid}/balance/shortcuts`, sc).then(() => {
+      commit('setShortcuts', sc);
+    });
+  },
   getShortcuts({ commit, state, rootState }, force = false) {
     if (force || state.shortcuts.length == 0) {
       commit('setLoading');