src/plugins/balance/components/BalanceAdd.vue

@@ -1,6 +1,6 @@
 <template>
   <q-card>
-    <BalanceHeader @update:user="userUpdated" :showSelector="showSelector" />
+    <BalanceHeader @update:user="userUpdated" :showSelector="showSelector" @open-history="openHistory"/>
     <q-separator />
 
     <q-card-section class="row q-col-gutter-md" v-if="shortCuts">
@@ -67,7 +67,7 @@ import PERMISSIONS from '../permissions';
 export default defineComponent({
   name: 'BalanceAdd',
   components: { BalanceHeader },
-  setup(_, { root }) {
+  setup(_, { root, emit }) {
     onBeforeMount(() => {
       void store.dispatch('balance/getShortcuts');
       if (store.state.balance.transactions.length == 0)
@@ -103,6 +103,10 @@ export default defineComponent({
         .catch(err => console.log(err));
     }
 
+    function openHistory() {
+      emit('open-history')
+    }
+
     return {
       user,
       addShortcut,
@@ -113,7 +117,8 @@ export default defineComponent({
       amount,
       showSelector,
       shortCuts,
-      userUpdated
+      userUpdated,
+      openHistory
     };
   }
 });

src/plugins/balance/components/BalanceHeader.vue

@@ -1,12 +1,15 @@
 <template>
   <q-card-section class="fit row justify-left content-center items-center q-col-gutter-sm">
-    <div class="text-h6 col-6">
+    <div class="text-h6 col-5">
       Aktueller Stand: {{ balance.balance.toFixed(2) }} €
       <q-badge color="negative" align="top" v-if="isLocked"> gesperrt </q-badge>
     </div>
     <div v-if="showSelector" class="col-6">
       <UserSelector :user="user" @update:user="userUpdated" />
     </div>
+    <div class="col-1 justify-end">
+      <q-btn round flat icon="mdi-format-list-checks" @click="openHistory" />
+    </div>
   </q-card-section>
 </template>
 
@@ -43,7 +46,11 @@ export default defineComponent({
       emit('update:user', selectedUser);
     }
 
-    return { user, balance, isLocked, userUpdated };
+    function openHistory() {
+      emit('open-history');
+    }
+
+    return { user, balance, isLocked, userUpdated, openHistory };
   }
 });
 </script>

src/plugins/balance/components/BalanceTransfer.vue

@@ -1,6 +1,6 @@
 <template>
   <q-card>
-    <BalanceHeader @update:user="senderUpdated" :showSelector="showSelector" />
+    <BalanceHeader @update:user="senderUpdated" :showSelector="showSelector" @open-history="openHistory"/>
     <q-separator />
     <q-card-section class="row q-col-gutter-md items-center">
       <div class="col-sm-4 col-xs-12">
@@ -34,7 +34,7 @@ import PERMISSIONS from '../permissions';
 export default defineComponent({
   name: 'BalanceTransfer',
   components: { BalanceHeader, UserSelector },
-  setup(_, { root }) {
+  setup(_, { root, emit }) {
     const store: Store<StateInterfaceBalance> = <Store<StateInterfaceBalance>>root.$store;
 
     const showSelector = computed(() => hasPermission(PERMISSIONS.SEND_OTHER, store));
@@ -69,6 +69,10 @@ export default defineComponent({
         .catch(err => console.log(err));
     }
 
+    function openHistory() {
+      emit('open-history');
+    }
+
     return {
       sender,
       receiver,
@@ -77,7 +81,8 @@ export default defineComponent({
       showSelector,
       senderUpdated,
       receiverUpdated,
-      sendDisabled
+      sendDisabled,
+      openHistory
     };
   }
 });

src/plugins/balance/components/Transaction.vue

@@ -1,29 +1,37 @@
 <template>
-  <q-card v-bind:class="{ 'bg-grey': isReversed }">
-    <q-card-section class="row items-start justify-between">
-      <div class="col text-center">
+<div>
+  <q-card flat square>
+    <q-card-section class="row items-center justify-between" horizontal>
+      <div class="col-5 text-left q-px-sm">
         <div
           v-bind:class="{ 'text-negative': isNegative() }"
-          class="text-weight-bold"
-          style="font-size: 2em"
+          class="text-weight-bold text-h6"
         >
           <span v-if="isNegative()">-</span>{{ transaction.amount.toFixed(2) }}&#8239;€
         </div>
-        <div>{{ text }}</div>
-        <div>{{ timeStr }}</div>
+        <div class="text-caption">{{ text }}</div>
+        <div class="text-caption">{{ timeStr }}</div>
       </div>
-      <div class="col" style="text-align: right">
+      <div class="col-5 q-px-sm text-center">
+        <div class="text-subtitle1" v-if="isReversed">
+          Storniert 
+        </div>
+      </div>
+      <div class="col-2 q-pr-sm" style="text-align: right">
         <q-btn
-          color="negative"
+          :color="isReversed ? 'positive' : 'negative'"
           aria-label="Reverse transaction"
-          icon="mdi-trash-can"
-          square
+          :icon="!isReversed ? 'mdi-trash-can' : 'mdi-check-bold'"
+          size="sm"
+          round
           :disable="!canReverse"
           @click="reverse"
         />
       </div>
     </q-card-section>
   </q-card>
+  <q-separator />
+  </div>
 </template>
 
 <script lang="ts">

src/plugins/balance/pages/MainPage.vue

@@ -9,10 +9,10 @@
       />
     </q-tabs>
     <div class="fit row justify-end" v-else>
-      <q-btn flat round icon="mdi-menu" @click="showDrawer = !showDrawer" />
+      <q-btn flat round icon="mdi-menu" @click="showDrawer = !showDrawer; show = false" />
     </div>
     <q-drawer side="right" v-model="showDrawer" @click="showDrawer = !showDrawer" behavior="mobile">
-      <q-list v-model="tab">
+      <q-list v-model="tab" v-if="!$q.screen.gt.sm && !show">
         <q-item
           v-for="(tabindex, index) in tabs"
           :key="'tab' + index"
@@ -23,6 +23,16 @@
           <q-item-label>{{ tabindex.label }}</q-item-label>
         </q-item>
       </q-list>
+      <q-list v-if="show">
+      <div
+        v-for="(transaction, index) in transactions"
+        v-bind:key="index"
+        class="col-sm-12"
+      >
+        <!-- TODO: In Vue3 use v-model:transaction="..." -->
+        <Transaction :transaction.sync="transactions[index]" />
+      </div>
+      </q-list>
     </q-drawer>
     <q-page padding class="fit row justify-left q-col-gutter-sm">
       <q-tab-panels
@@ -32,26 +42,18 @@
         animated
       >
         <q-tab-panel name="add" class="q-px-xs">
-          <BalanceAdd />
+          <BalanceAdd @open-history="showDrawer = !showDrawer; show = showDrawer"/>
         </q-tab-panel>
         <q-tab-panel name="transfer" class="q-px-xs">
-          <BalanceTransfer />
+          <BalanceTransfer @open-history="showDrawer = !showDrawer; show = showDrawer"/>
         </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>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from '@vue/composition-api';
+import { computed, defineComponent, ref, onMounted } from '@vue/composition-api';
 import { Store } from 'vuex';
 import { hasPermissions, hasSomePermissions } from 'src/utils/permission';
 import PERMISSIONS from '../permissions';
@@ -66,7 +68,10 @@ export default defineComponent({
   components: { BalanceAdd, BalanceTransfer, Transaction },
   setup(_, { root }) {
     const store = <Store<StateInterfaceBalance>>root.$store;
-
+    const now = new Date()
+    onMounted(() => {
+      store.dispatch('balance/getTransactions', {filter: {from: new Date(now.getFullYear(), now.getMonth(), now.getDay())}})
+    })
     const transactions = computed(() =>
       store.state.balance.transactions
         .filter(t => t.original_id == undefined)
@@ -100,12 +105,13 @@ export default defineComponent({
     });
 
     const tab = ref<string>(canAdd() ? 'add' : 'transfer');
-
+    const show = ref<boolean>(false);
     return {
       showDrawer,
       tab,
       tabs,
-      transactions
+      transactions,
+      show
     };
   }
 });