add query on agendaView

src/components/overview/AgendaView.vue

@@ -88,9 +88,10 @@
 </template>
 
 <script lang="ts">
-import { ComponentPublicInstance, computed, defineComponent, onBeforeMount, ref } from 'vue';
+import { ComponentPublicInstance, computed, defineComponent, onBeforeMount, ref, watch } from 'vue';
 import { QCalendarAgenda } from '@quasar/quasar-ui-qcalendar';
 import { date, QDate, QPopupProxy, useQuasar } from 'quasar';
+import { useRoute, useRouter } from 'vue-router';
 import { EditableEvent, emptyEvent } from '../../store/models';
 import { startOfWeek } from '@flaschengeist/api';
 import { useEventStore } from '../../store';
@@ -105,6 +106,8 @@ export default defineComponent({
   setup() {
     const store = useEventStore();
     const quasar = useQuasar();
+    const route = useRoute();
+    const router = useRouter();
 
     const datepicker = ref<QDate>();
     const proxy = ref<QPopupProxy>();
@@ -141,6 +144,18 @@ export default defineComponent({
     }
 
     onBeforeMount(async () => {
+      if (!Object.keys(route.query).includes('q_date')) {
+        const q_date = date.formatDate(selectedDate.value, 'YYYY-MM-DD');
+        await router.replace({ query: { ...route.query, q_date } });
+      } else {
+        selectedDate.value = date.extractDate(route.query.q_date as string, 'YYYY-MM-DD');
+      }
+      if (!Object.keys(route.query).includes('q_view')) {
+        const q_view = calendarView.value;
+        await router.replace({ query: { ...route.query, q_view } });
+      } else {
+        calendarView.value = route.query.q_view as string;
+      }
       await loadAgendas();
     });
 
@@ -171,7 +186,11 @@ export default defineComponent({
       }
     }
 
+    const loading = ref(false);
+
     async function loadAgendas() {
+      if (loading.value) return;
+      loading.value = true;
       const from =
         calendarView.value === 'day' ? selectedDate.value : startOfWeek(selectedDate.value);
       const to = date.addToDate(from, { days: calendarView.value === 'day' ? 1 : 7 });
@@ -184,8 +203,11 @@ export default defineComponent({
         if (!events.value[day]) {
           events.value[day] = [];
         }
-        events.value[day].push(event);
+        const idx = events.value[day].findIndex((e) => e.id === event.id);
+        if (idx === -1) events.value[day].push(event);
+        else events.value[day][idx] = event;
       });
+      loading.value = false;
     }
 
     function addDays(reverse: boolean) {
@@ -218,6 +240,18 @@ export default defineComponent({
       return value?.getFullYear() || '-';
     }
 
+    watch(selectedDate, async (newValue) => {
+      const q_date = date.formatDate(newValue, 'YYYY-MM-DD');
+      await router.replace({ query: { ...route.query, q_date } });
+      await loadAgendas();
+    });
+
+    watch(calendarView, async (newValue) => {
+      const q_view = newValue;
+      await router.replace({ query: { ...route.query, q_view } });
+      await loadAgendas();
+    });
+
     return {
       asYear,
       asMonth,