src/plugins/balance/components/BalanceAdd.vue

@@ -1,6 +1,4 @@
 <template>
-  <q-page padding class="fit row justify-left q-col-gutter-sm">
-    <div class="col-12">
   <q-card>
     <BalanceHeader @update:user="userUpdated" :showSelector="showSelector" />
     <q-separator />
@@ -56,12 +54,6 @@
       </div>
     </q-card-section>
   </q-card>
-    </div>
-    <div v-for="(transaction, index) in transactions" v-bind:key="index" class="col-md-4 col-sm-6">
-      <!-- TODO: In Vue3 use v-model:transaction="..." -->
-      <Transaction :transaction.sync="transactions[index]" />
-    </div>
-  </q-page>
 </template>
 
 <script lang="ts">
@@ -69,20 +61,25 @@ import { computed, ref, defineComponent, onBeforeMount } from '@vue/composition-
 import { hasPermission } from 'src/utils/permission';
 import { StateInterfaceBalance } from '../store/balance';
 import { Store } from 'vuex';
-import Transaction from '../components/Transaction.vue';
 import BalanceHeader from '../components/BalanceHeader.vue';
 import PERMISSIONS from '../permissions';
 
 export default defineComponent({
   name: 'BalanceAdd',
-  components: { Transaction, BalanceHeader },
+  components: { BalanceHeader },
   setup(_, { root }) {
-    onBeforeMount(() => void store.dispatch('balance/getShortcuts'));
+    onBeforeMount(() => {
+      void store.dispatch('balance/getShortcuts');
+      if (store.state.balance.transactions.length == 0)
+        // No transaction, load at most six since yesterday
+        void store.dispatch('balance/getTransactions', {
+          filter: { limit: 6, from: new Date(new Date().setDate(new Date().getDate() - 1)) }
+        });
+    });
     const store = <Store<StateInterfaceBalance>>root.$store;
 
     const amount = ref<number>(0);
     const showAddShortcut = ref(false);
-    const transactions = computed(() => store.state.balance.transactions.slice().reverse());
     const user = ref(store.state.user.currentUser);
     const shortCuts = ref(store.state.balance.shortcuts);
 
@@ -113,7 +110,6 @@ export default defineComponent({
       removeShortcut,
       showAddShortcut,
       changeBalance,
-      transactions,
       amount,
       showSelector,
       shortCuts,

src/plugins/balance/components/BalanceTransfer.vue

@@ -1,19 +1,10 @@
 <template>
-  <q-page padding class="fit row justify-left q-col-gutter-sm">
-    <div class="col-12">
   <q-card>
     <BalanceHeader @update:user="senderUpdated" :showSelector="showSelector" />
     <q-separator />
     <q-card-section class="row q-col-gutter-md items-center">
       <div class="col-sm-4 col-xs-12">
-            <q-input
-              v-model.number="amount"
-              type="number"
-              filled
-              label="Betrag"
-              step="0.1"
-              min="0"
-            />
+        <q-input v-model.number="amount" type="number" filled label="Betrag" step="0.1" min="0" />
       </div>
       <div class="col-sm-4 col-xs-6">
         <UserSelector :user="receiver" @update:user="receiverUpdated" label="Empfänger" />
@@ -29,11 +20,6 @@
       </div>
     </q-card-section>
   </q-card>
-    </div>
-    <div v-for="(transaction, index) in transactions" v-bind:key="index" class="col-sm-4 col-xs-6">
-      <Transaction :transaction.sync="transactions[index]" />
-    </div>
-  </q-page>
 </template>
 
 <script lang="ts">
@@ -42,13 +28,12 @@ import { hasPermission } from 'src/utils/permission';
 import { StateInterfaceBalance } from '../store/balance';
 import { Store } from 'vuex';
 import UserSelector from 'src/plugins/user/components/UserSelector.vue';
-import Transaction from '../components/Transaction.vue';
 import BalanceHeader from '../components/BalanceHeader.vue';
 import PERMISSIONS from '../permissions';
 
 export default defineComponent({
   name: 'BalanceTransfer',
-  components: { Transaction, BalanceHeader, UserSelector },
+  components: { BalanceHeader, UserSelector },
   setup(_, { root }) {
     const store: Store<StateInterfaceBalance> = <Store<StateInterfaceBalance>>root.$store;
 
@@ -56,7 +41,6 @@ export default defineComponent({
     const sender = ref(store.state.user.currentUser);
     const receiver = ref<FG.User | undefined>(undefined);
     const amount = ref<number>(0);
-    const transactions = computed(() => store.state.balance.transactions.slice().reverse());
 
     const sendDisabled = computed(() => {
       return !(
@@ -90,7 +74,6 @@ export default defineComponent({
       receiver,
       amount,
       sendAmount,
-      transactions,
       showSelector,
       senderUpdated,
       receiverUpdated,

src/plugins/balance/pages/MainPage.vue

@@ -1,48 +1,112 @@
 <template>
   <div>
-    <q-page padding v-if="checkMain">
-      <q-card>
-        <q-card-section>
-          <q-list v-for="(mainRoute, index) in mainRoutes" :key="'mainRoute' + index">
-            <essential-link
-              v-for="(route, index2) in mainRoute.children"
-              :key="'route' + index2"
-              :title="route.title"
-              :icon="route.icon"
-              :link="route.name"
-              :permissions="route.meta.permissions"
+    <q-tabs v-model="tab" v-if="$q.screen.gt.sm">
+      <q-tab
+        v-for="(tabindex, index) in tabs"
+        :key="'tab' + index"
+        :name="tabindex.name"
+        :label="tabindex.label"
       />
+    </q-tabs>
+    <div class="fit row justify-end" v-else>
+      <q-btn flat round icon="mdi-menu" @click="showDrawer = !showDrawer" />
+    </div>
+    <q-drawer side="right" v-model="showDrawer" @click="showDrawer = !showDrawer" behavior="mobile">
+      <q-list v-model="tab">
+        <q-item
+          v-for="(tabindex, index) in tabs"
+          :key="'tab' + index"
+          :active="tab == tabindex.name"
+          clickable
+          @click="tab = tabindex.name"
+        >
+          <q-item-label>{{ tabindex.label }}</q-item-label>
+        </q-item>
       </q-list>
-        </q-card-section>
-      </q-card>
+    </q-drawer>
+    <q-page padding class="fit row justify-left q-col-gutter-sm">
+      <q-tab-panels
+        v-model="tab"
+        style="background-color: transparent"
+        class="q-pa-none col-12"
+        animated
+      >
+        <q-tab-panel name="add" class="q-px-xs">
+          <BalanceAdd />
+        </q-tab-panel>
+        <q-tab-panel name="transfer" class="q-px-xs">
+          <BalanceTransfer />
+        </q-tab-panel>
+      </q-tab-panels>
+      <div
+        v-for="(transaction, index) in transactions"
+        v-bind:key="index"
+        class="col-md-4 col-sm-6"
+      >
+        <!-- TODO: In Vue3 use v-model:transaction="..." -->
+        <Transaction :transaction.sync="transactions[index]" />
+      </div>
     </q-page>
-    <router-view />
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from '@vue/composition-api';
-import EssentialLink from 'src/components/navigation/EssentialLink.vue';
-import mainRoutes from 'src/plugins/balance/routes';
+import { computed, defineComponent, ref } from '@vue/composition-api';
 import { Store } from 'vuex';
-import { BalanceInterface } from 'src/plugins/balance/store/balance';
-import setLoadingBar from 'src/utils/loading';
-import { StateInterface } from 'src/store';
+import { hasPermissions, hasSomePermissions } from 'src/utils/permission';
+import PERMISSIONS from '../permissions';
+import { Screen } from 'quasar';
+import BalanceAdd from '../components/BalanceAdd.vue';
+import BalanceTransfer from '../components/BalanceTransfer.vue';
+import Transaction from '../components/Transaction.vue';
+import { StateInterfaceBalance } from '../store/balance';
+
 export default defineComponent({
-  // name: 'PageName'
-  components: { EssentialLink },
+  name: 'BalanceManage',
+  components: { BalanceAdd, BalanceTransfer, Transaction },
   setup(_, { root }) {
-    const store = <Store<StateInterface>>root.$store;
-    const loading = computed(() => {
-      return (<BalanceInterface>store.state.balance).loading > 0;
-    });
-    const checkMain = computed(() => {
-      return root.$route.matched.length == 2;
+    const store = <Store<StateInterfaceBalance>>root.$store;
+
+    const transactions = computed(() =>
+      store.state.balance.transactions
+        .filter(t => t.original_id == undefined)
+        .sort((a, b) => (a.time >= b.time ? -1 : 1))
+    );
+
+    const canAdd = () =>
+      hasSomePermissions([PERMISSIONS.DEBIT, PERMISSIONS.CREDIT, PERMISSIONS.DEBIT_OWN], store);
+
+    interface Tab {
+      name: string;
+      label: string;
+    }
+
+    const tabs: Tab[] = [
+      ...(canAdd() ? [{ name: 'add', label: 'Anschreiben' }] : []),
+      ...(hasSomePermissions([PERMISSIONS.SEND, PERMISSIONS.SEND_OTHER], store)
+        ? [{ name: 'transfer', label: 'Übertragen' }]
+        : [])
+    ];
+
+    const drawer = ref<boolean>(false);
+
+    const showDrawer = computed({
+      get: () => {
+        return !Screen.gt.sm && drawer.value;
+      },
+      set: (val: boolean) => {
+        drawer.value = val;
+      }
     });
 
-    setLoadingBar(loading);
+    const tab = ref<string>(canAdd() ? 'add' : 'transfer');
 
-    return { checkMain, mainRoutes };
+    return {
+      showDrawer,
+      tab,
+      tabs,
+      transactions
+    };
   }
 });
 </script>

src/plugins/balance/routes/index.ts

@@ -7,32 +7,32 @@ const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
     icon: 'mdi-cash-100',
     path: 'balance',
     name: 'balance',
-    redirect: { name: 'balance-add' },
+    redirect: { name: 'balance-view' },
     meta: { permissions: ['user'] },
     children: [
       {
-        title: 'Anschreiben',
+        title: 'Übersicht',
         icon: 'mdi-cash-plus',
-        path: 'add',
-        name: 'balance-add',
-        shortcut: true,
-        meta: { permissions: [permissions.DEBIT_OWN, permissions.SHOW] },
-        component: () => import('../pages/Add.vue')
+        path: 'overview',
+        name: 'balance-view',
+        meta: { permissions: [permissions.SHOW] },
+        component: () => import('../pages/Overview.vue')
       },
       {
-        title: 'Übertragen',
-        icon: 'mdi-cash-refund',
-        path: 'transfer',
-        name: 'balance-transfer',
-        meta: { permissions: [permissions.SEND] },
-        component: () => import('../pages/Transfer.vue')
+        title: 'Buchen',
+        icon: 'mdi-cash-plus',
+        path: 'change',
+        name: 'balance-change',
+        shortcut: true,
+        meta: { permissions: [permissions.DEBIT_OWN, permissions.SHOW] },
+        component: () => import('../pages/MainPage.vue')
       },
       {
         title: 'Verwaltung',
         icon: 'mdi-account-cash',
         path: 'admin',
         name: 'balance-admin',
-        meta: { permissions: [permissions.DEBIT_OWN, permissions.SHOW] },
+        meta: { permissions: [permissions.SET_LIMIT, permissions.SHOW_OTHER] },
         component: () => import('../pages/Admin.vue')
       }
     ]

src/plugins/schedule/routes/index.ts

@@ -1,25 +1,5 @@
 import { FG_Plugin } from 'src/plugins';
 
-/*const permissions = {
-  // Show own and others balance
-  SHOW: 'balance_show',
-  SHOW_OTHER: 'balance_show_others',
-  // Credit balance (give)
-  CREDIT: 'balance_credit',
-  // Debit balance (take)
-  DEBIT: 'balance_debit',
-  // Debit own balance only
-  DEBIT_OWN: 'balance_debit_own',
-  // Send from to other
-  SEND: 'balance_send',
-  // Send from other to another
-  SEND_OTHER: 'balance_send_others',
-  // Can set limit for users
-  SET_LIMIT: 'balance_set_limit',
-  //Allow sending / sub while exceeding the set limit
-  EXCEED_LIMIT: 'balance_exceed_limit'
-};*/
-
 const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
   {
     title: 'Dienste',

src/plugins/user/components/settings/Sessions.vue

@@ -31,12 +31,7 @@
           label="Zeit"
           filled
         />
-        <q-select
-          class="col-xs-12 col-sm-6 q-px-sm"
-          :options="options"
-          v-model="option"
-          filled
-        />
+        <q-select class="col-xs-12 col-sm-6 q-px-sm" :options="options" v-model="option" filled />
       </div>
     </q-card-section>
     <q-card-actions align="right" v-if="!isEdit">
@@ -59,10 +54,10 @@ export default defineComponent({
   name: 'Sessions',
   props: {
     session: {
-      required: true,
+      required: true
+    }
   },
-  },
-  setup(props: {session: FG.Session}, { root }) {
+  setup(props: { session: FG.Session }, { root }) {
     const store = <Store<StateInterface>>root.$store;
     const options = ref(['Minuten', 'Stunden', 'Tage']);
     const option = ref<string>(options.value[0]);
@@ -92,7 +87,7 @@ export default defineComponent({
     }
 
     function deleteSession(token: string) {
-      store.dispatch('session/deleteSession', token).catch((error) => {
+      store.dispatch('session/deleteSession', token).catch(error => {
         console.warn(error);
       });
     }
@@ -113,7 +108,7 @@ export default defineComponent({
             return (lifetime.value / (60 * 60 * 24)).toFixed(2);
         }
       },
-      set: (val) => {
+      set: val => {
         if (val) {
           switch (option.value) {
             case options.value[0]:
@@ -127,7 +122,7 @@ export default defineComponent({
               break;
           }
         }
-      },
+      }
     });
 
     function edit(value: boolean) {
@@ -139,11 +134,8 @@ export default defineComponent({
       console.log(lifetime.value);
       isEdit.value = false;
       void store
-        .dispatch(
-          'session/updateSession',
-          {lifetime: lifetime.value, token: props.session.token}
-        )
-        .catch((error) => {
+        .dispatch('session/updateSession', { lifetime: lifetime.value, token: props.session.token })
+        .catch(error => {
           console.log(error);
         });
     }
@@ -159,8 +151,8 @@ export default defineComponent({
       option,
       lifetime,
       computedLifetime,
-      save,
+      save
     };
-  },
+  }
 });
 </script>