src/boot/plugins.ts

@@ -1,6 +1,6 @@
 import { boot } from 'quasar/wrappers';
 import { RouteConfig } from 'vue-router';
-import { Module, Store } from 'vuex';
+import { Store } from 'vuex';
 import { StateInterface } from 'src/store';
 import { FG_Plugin } from 'src/plugins';
 import routes from 'src/router/routes';

src/components/navigation/EssentialLink.vue

@@ -1,22 +1,28 @@
 <template>
-  <q-item clickable tag="a" target="self" :to="{ name: link }" v-if="hasPermissions">
+  <q-item
+    clickable
+    tag="a"
+    target="self"
+    :to="{ name: link }"
+    v-if="hasPermissions"
+  >
     <q-item-section v-if="icon" avatar>
       <q-icon :name="icon" />
     </q-item-section>
 
     <q-item-section>
       <q-item-label>{{ realTitle }}</q-item-label>
-      <q-item-label caption>
-        {{ permissions }}
-      </q-item-label>
+      <!--<q-item-label caption>
+        {{ caption }}
+      </q-item-label>-->
     </q-item-section>
   </q-item>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from '@vue/composition-api';
-import {Store} from 'vuex'
-import {StateInterface} from "src/store";
+import { Store } from 'vuex';
+import { StateInterface } from 'src/store';
 
 export default defineComponent({
   name: 'EssentialLink',
@@ -60,14 +66,16 @@ export default defineComponent({
     });
 
     const hasPermissions = computed(() => {
-      let permissions = props.permissions
+      let permissions = props.permissions;
       if (permissions) {
         return (<string[]>permissions).every(permission => {
-          return (<{'user/permissions': string[]}>(<Store<StateInterface>>root.$store).getters)['user/permissions'].includes(permission)
-        })
+          return (<{ 'user/permissions': string[] }>(
+            (<Store<StateInterface>>root.$store).getters
+          ))['user/permissions'].includes(permission);
+        });
       }
-      return true
-    })
+      return true;
+    });
 
     return { realTitle: title, hasPermissions };
   }

src/components/navigation/ShortCutLink.vue

@@ -4,8 +4,9 @@
 
 <script lang="ts">
 import { computed, defineComponent } from '@vue/composition-api';
-import {Store} from "vuex";
-import {StateInterface} from "src/store";
+import { Store } from 'vuex';
+import { StateInterface } from 'src/store';
+
 export default defineComponent({
   name: 'ShortCutLink',
   props: {
@@ -22,17 +23,18 @@ export default defineComponent({
     }
   },
   setup(props, { root }) {
-
     const hasPermissions = computed(() => {
-      let permissions = props.permissions
+      let permissions = props.permissions;
       if (permissions) {
         return (<string[]>permissions).every(permission => {
-          return (<{'user/permissions': string[]}>(<Store<StateInterface>>root.$store).getters)['user/permissions'].includes(permission)
-        })
+          return (<{ 'user/permissions': string[] }>(
+            (<Store<StateInterface>>root.$store).getters
+          ))['user/permissions'].includes(permission);
+        });
       }
-      return true
-    })
-    return {hasPermissions}
+      return true;
+    });
+    return { hasPermissions };
   }
 });
 </script>

src/plugins/balance/pages/Add.vue

@@ -1,12 +1,95 @@
 <template>
   <q-page padding>
-    <h1>Add works</h1>
+    <q-card>
+      <q-card-section class="row">
+        <div class="col-4 row q-pa-sm">
+          <q-btn
+            class="col"
+            color="green"
+            label="2€"
+            @click="changeBalance(-2)"
+          />
+        </div>
+        <div class="col-4 row q-pa-sm">
+          <q-btn
+            class="col"
+            color="green"
+            label="1€"
+            @click="changeBalance(-1)"
+          />
+        </div>
+        <div class="col-4 row q-pa-sm">
+          <q-btn
+            class="col"
+            color="green"
+            label="0,50€"
+            @click="changeBalance(-0.5)"
+          />
+        </div>
+        <div class="col-4 row q-pa-sm">
+          <q-btn
+            class="col"
+            color="green"
+            label="0,40€"
+            @click="changeBalance(-0.4)"
+          />
+        </div>
+        <div class="col-4 row q-pa-sm">
+          <q-btn
+            class="col"
+            color="green"
+            label="0,20€"
+            @click="changeBalance(-0.2)"
+          />
+        </div>
+        <div class="col-4 row q-pa-sm">
+          <q-btn
+            class="col"
+            color="green"
+            label="0,10€"
+            @click="changeBalance(-0.1)"
+          />
+        </div>
+      </q-card-section>
+      <q-card-section>
+        <div class="text-h6">{{ balance.toFixed(2) }} €</div>
+      </q-card-section>
+      <q-card-actions>
+        <q-btn label="test" @click="$store.dispatch('balance/getBalance')" />
+      </q-card-actions>
+    </q-card>
   </q-page>
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { computed, defineComponent, onBeforeMount } from '@vue/composition-api';
+import { BalanceInterface } from 'src/plugins/balance/store/balance';
+import { Store } from 'vuex';
+
 export default defineComponent({
   // name: 'PageName'
-})
+  setup(_, { root }) {
+    onBeforeMount(() => {
+      store.dispatch('balance/getBalance').catch(err => {
+        console.warn(err);
+      });
+    });
+
+    const store: Store<{ balance: BalanceInterface }> = <
+      Store<{ balance: BalanceInterface }>
+    >root.$store;
+
+    const balance = computed<number>(() => {
+      return store.state.balance.balance;
+    });
+
+    function changeBalance(amount: number) {
+      store
+        .dispatch('balance/changeBalance', amount)
+        .catch(err => console.log(err));
+    }
+
+    return { balance, changeBalance };
+  }
+});
 </script>

src/plugins/balance/plugin.ts

@@ -1,13 +1,17 @@
 import { Module } from 'vuex';
-import {StateInterface} from "src/store";
-import mainRoutes from "./routes"
+import { StateInterface } from 'src/store';
+import mainRoutes from './routes';
 import { FG_Plugin } from 'src/plugins';
+import balance, { BalanceInterface } from './store/balance';
 
 const plugin: FG_Plugin.Plugin = {
   name: 'Balance',
   mainRoutes,
   requiredModules: ['User'],
   version: '0.0.1',
-}
+  store: new Map<string, Module<BalanceInterface, StateInterface>>([
+    ['balance', balance]
+  ])
+};
 
 export default plugin;

src/plugins/balance/routes/index.ts

@@ -2,21 +2,21 @@ import {FG_Plugin} from 'src/plugins';
 
 const permissions = {
   // Show own and others balance
-  SHOW: "balance_show",
-  SHOW_OTHER: "balance_show_others",
+  SHOW: 'balance_show',
+  SHOW_OTHER: 'balance_show_others',
   // Credit balance
-  ADD: "balance_add",
+  ADD: 'balance_add',
   // Debit balance
-  SUB: "balance_sub",
+  SUB: 'balance_sub',
   // Send from to other
-  SEND: "balance_send",
+  SEND: 'balance_send',
   // Send from other to another
-  SEND_OTHER: "balance_send_others",
+  SEND_OTHER: 'balance_send_others',
   // Can set limit for users
-  SET_LIMIT: "balance_set_limit",
+  SET_LIMIT: 'balance_set_limit',
   //Allow sending / sub while exceeding the set limit
-  EXCEED_LIMIT: "balance_exceed_limit"
-}
+  EXCEED_LIMIT: 'balance_exceed_limit'
+};
 
 const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
   {
@@ -33,11 +33,11 @@ const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
         path: 'balance-add',
         name: 'balance-add',
         shortcut: true,
-        meta: {permissions: [permissions.ADD, permissions.SHOW]},
+        meta: { permissions: [permissions.SUB, permissions.SHOW] },
         component: () => import('../pages/Add.vue')
       }
     ]
   }
-]
+];
 
-export default mainRoutes
+export default mainRoutes;

src/plugins/balance/store/balance.ts

@@ -0,0 +1,83 @@
+import { Module, MutationTree, ActionTree, GetterTree } from 'vuex';
+import { StateInterface } from 'src/store';
+import { axios } from 'src/boot/axios';
+import { AxiosResponse } from 'axios';
+
+interface BalanceResponse {
+  balance: number;
+  credit: number;
+  debit: number;
+}
+
+export interface BalanceInterface extends BalanceResponse {
+  limit: number;
+}
+
+const state: BalanceInterface = {
+  balance: 0,
+  credit: 0,
+  debit: 0,
+  limit: 0
+};
+
+const mutations: MutationTree<BalanceInterface> = {
+  setBalance(state, data: number) {
+    state.balance = data;
+  },
+  setCredit(state, data: number) {
+    state.credit = data;
+  },
+  setDebit(state, data: number) {
+    state.debit = data;
+  },
+  setLimit(state, data: number) {
+    state.limit = data;
+  }
+};
+
+const actions: ActionTree<BalanceInterface, StateInterface> = {
+  getBalance({ commit, rootState }) {
+    axios
+      .get(`/users/${rootState.user.user.userid}/balance`)
+      .then(({ data }: AxiosResponse<BalanceResponse>) => {
+        commit('setBalance', data.balance);
+        commit('setCredit', data.credit);
+        commit('setDebit', data.debit);
+      })
+      .catch(err => {
+        console.warn(err);
+      });
+  },
+  getLimit({ rootState }) {
+    axios
+      .get(`/users/${rootState.user.user.userid}/balance/limit`)
+      .then(({ data }) => {
+        console.log(data);
+      })
+      .catch(err => {
+        console.warn(err);
+      });
+  },
+  changeBalance({ rootState, dispatch }, amount: number) {
+    axios
+      .put(`/users/${rootState.user.user.userid}/balance`, <{ amount: number }>{
+        amount: amount
+      })
+      .then(() => {
+        dispatch('getBalance').catch(err => console.warn(err));
+      })
+      .catch(err => console.warn(err));
+  }
+};
+
+const getters: GetterTree<BalanceInterface, StateInterface> = {};
+
+const balance: Module<BalanceInterface, StateInterface> = {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters
+};
+
+export default balance;