add query for tabs add and transfer, also for show storno

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({
@@ -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

@@ -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,