add on every page query for location

src/components/management/EditEvent.vue

@@ -52,6 +52,7 @@
           class="col-xs-12 col-sm-6 q-pa-sm"
           label="Veranstaltungsende"
           :rules="[afterStart]"
+          :key="update_time"
         />
         <q-input
           v-model="event.description"
@@ -61,7 +62,7 @@
           filled
         />
       </q-card-section>
-      <q-card-section v-if="event.is_template !== true && modelValue === undefined">
+      <q-card-section v-if="modelValue === undefined">
         <q-btn-toggle
           v-model="recurrent"
           spread
@@ -81,8 +82,7 @@
             <q-btn color="primary" label="Schicht hinzufügen" @click="addJob()" />
           </div>
         </div>
-        <template v-for="(job, index) in event.jobs" :key="index">
-          <!--:ref="active === index ? 'activeJob' : undefined"-->
+        <template v-for="(job, index) in event.jobs" :key="index + update_time">
           <edit-job-slot
             ref="activeJob"
             v-model="event.jobs[index]"
@@ -196,14 +196,17 @@ export default defineComponent({
       const diff = event.value.start.getTime() - tpl.start.getTime();
       // Adjust end of event and all jobs
       if (event.value.end) event.value.end.setTime(event.value.end.getTime() + diff);
-      event.value.jobs.forEach((job) => {
-        job.start.setTime(job.start.getTime() + diff);
-        if (job.end) job.end.setTime(job.end.getTime() + diff);
+      event.value.jobs = [];
+      tpl.jobs.forEach((job) => {
+        const copied_job: FG.Job = Object.assign({}, job, { id: NaN });
+        copied_job.start.setTime(copied_job.start.getTime() + diff);
+        if (copied_job.end) copied_job.end.setTime(copied_job.end.getTime() + diff);
+        event.value.jobs.push(<Job>copied_job);
       });
     }
 
-    async function save(template = false) {
-      event.value.is_template = template;
+    async function save(is_template = false) {
+      event.value.is_template = is_template;
       try {
         await store.addEvent(event.value);
 
@@ -267,7 +270,54 @@ export default defineComponent({
       });
     }
 
+    const computed_start = computed({
+      get: () => event.value?.start,
+      set: (value) => {
+        event.value.start = value;
+      },
+    });
+    const computed_end = computed({
+      get: () => event.value?.end,
+      set: (value) => {
+        event.value.end = value;
+      },
+    });
+
+    const update_time = ref(false);
+
+    watch(computed_start, (newValue, oldValue) => {
+      update_time.value = true;
+      const diff = newValue.getTime() - oldValue.getTime();
+      event.value?.jobs.forEach((job) => {
+        job.start.setTime(job.start.getTime() + diff);
+      });
+      computed_end.value?.setTime(computed_end.value?.getTime() + diff);
+      setTimeout(() => {
+        update_time.value = false;
+      }, 0);
+    });
+
+    watch(computed_end, (newValue, oldValue) => {
+      if (newValue && oldValue) {
+        update_time.value = true;
+        if (!newValue || !oldValue) return;
+        const diff = newValue.getTime() - oldValue.getTime();
+        event.value?.jobs.forEach((job) => {
+          if (job.end) job.end.setTime(job.end.getTime() + diff);
+          else job.end = new Date(newValue.getTime());
+        });
+      } else if (newValue && !oldValue) {
+        event.value?.jobs.forEach((job) => {
+          if (!job.end) job.end = new Date(newValue.getTime());
+        });
+      }
+      setTimeout(() => {
+        update_time.value = false;
+      }, 0);
+    });
+
     return {
+      update_time,
       activate,
       active,
       addJob,

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,19 @@ export default defineComponent({
     }
 
     onBeforeMount(async () => {
+      await router.replace({ query: { ...route.query, q_tab: 'agendaView' } });
+      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 +187,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 +204,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 +241,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,

src/pages/EventManagement.vue

@@ -44,7 +44,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue';
+import { computed, defineComponent, ref, onBeforeMount, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import ManageTypes from '../components/management/ManageTypes.vue';
 import EditEvent from '../components/management/EditEvent.vue';
 import { hasPermission } from '@flaschengeist/api';
@@ -70,6 +71,21 @@ export default defineComponent({
         : []),
     ]);
 
+    const route = useRoute();
+    const router = useRouter();
+
+    onBeforeMount(async () => {
+      if (
+        (route.query.q_tab && route.query.q_tab === 'create') ||
+        route.query.q_tab === 'jobtypes' ||
+        route.query.q_tab === 'eventtypes'
+      ) {
+        tab.value = route.query.q_tab;
+      } else {
+        await router.replace({ query: { q_tab: tab.value } });
+      }
+    });
+
     const drawer = ref<boolean>(false);
     const tab = ref<string>('create');
 
@@ -82,6 +98,10 @@ export default defineComponent({
       },
     });
 
+    watch(tab, async (val) => {
+      await router.replace({ query: { q_tab: val } });
+    });
+
     return {
       showDrawer,
       tab,

src/pages/EventOverview.vue

@@ -43,7 +43,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, onBeforeMount } from 'vue';
+import { computed, defineComponent, ref, onBeforeMount, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 import AgendaView from '../components/overview/AgendaView.vue';
 import ListView from '../components/overview/ListView.vue';
@@ -55,8 +56,19 @@ export default defineComponent({
   components: { AgendaView, ListView },
   setup() {
     const store = useEventStore();
-    onBeforeMount(() => {
+    const route = useRoute();
+    const router = useRouter();
+    const tab = ref<string>('agendaView');
+    onBeforeMount(async () => {
       void store.getJobTypes();
+      if (
+        Object.keys(route.query).includes('q_tab') &&
+        (route.query.q_tab === 'listView' || route.query.q_tab === 'agendaView')
+      ) {
+        tab.value = route.query.q_tab as string;
+      } else {
+        await router.replace({ query: { ...route.query, q_tab: tab.value } });
+      }
     });
     const quasar = useQuasar();
 
@@ -74,7 +86,10 @@ export default defineComponent({
       },
     });
 
-    const tab = ref<string>('agendaView');
+    watch(tab, async (val) => {
+      console.log(val);
+      await router.replace({ query: { ...route.query, q_tab: val } });
+    });
 
     return {
       showDrawer,