[events] Edit events in calendar (QDialog)

src/plugins/schedule/components/management/EditEvent.vue

@@ -1,5 +1,4 @@
 <template>
-  <q-page padding>
   <q-card>
     <q-form @submit="save()" @reset="reset">
       <q-card-section class="fit row justify-start content-center items-center">
@@ -86,15 +85,18 @@
           />
         </q-card>
       </q-card-section>
-        <q-card-actions align="right">
-          <q-btn label="Reset" type="reset" />
+      <q-card-actions align="around">
+        <q-card-actions align="left">
           <q-btn v-if="!template" color="secondary" label="Neue Vorlage" @click="save(true)" />
           <q-btn v-else color="negative" label="Vorlage löschen" @click="removeTemplate" />
-          <q-btn color="primary" type="submit" label="Erstellen" />
+        </q-card-actions>
+        <q-card-actions align="right">
+          <q-btn label="Zurücksetzen" type="reset" />
+          <q-btn color="primary" type="submit" label="Speichern" />
+        </q-card-actions>
       </q-card-actions>
     </q-form>
   </q-card>
-  </q-page>
 </template>
 
 <script lang="ts">
@@ -116,7 +118,10 @@ export default defineComponent({
       type: Object as PropType<FG.Event | undefined>,
     },
   },
-  setup(props) {
+  emits: {
+    done: (val: boolean) => typeof val === 'boolean',
+  },
+  setup(props, { emit }) {
     const store = useScheduleStore();
 
     const emptyJob = {
@@ -199,6 +204,7 @@ export default defineComponent({
           }
         }
         reset();
+        emit('done', true);
       } catch (error) {
         console.error(error);
       }

src/plugins/schedule/components/overview/AgendaView.vue

@@ -1,4 +1,21 @@
 <template>
+  <q-dialog
+    :model-value="editor !== undefined"
+    persistent
+    transition-show="scale"
+    transition-hide="scale"
+  >
+    <q-card>
+      <div class="column">
+        <div class="col" align="right" style="position: sticky; top: 0; z-index: 999">
+          <q-btn round color="negative" icon="close" dense rounded @click="editDone(false)" />
+        </div>
+        <div class="col" style="margin: 0; padding: 0; margin-top: -2.4em">
+          <edit-event v-model="editor" @done="editDone" />
+        </div>
+      </div>
+    </q-card>
+  </q-dialog>
   <q-page padding>
     <q-card>
       <div style="max-width: 1800px; width: 100%">
@@ -59,6 +76,7 @@
                 :key="index"
                 v-model="events[timestamp.weekday][index]"
                 @removeEvent="remove"
+                @editEvent="edit"
               />
             </div>
           </template>
@@ -74,10 +92,11 @@ import { useScheduleStore } from '../../store';
 import Eventslot from './slots/EventSlot.vue';
 import { date } from 'quasar';
 import { startOfWeek } from 'src/utils/datetime';
+import EditEvent from '../management/EditEvent.vue';
 
 export default defineComponent({
   name: 'AgendaView',
-  components: { Eventslot },
+  components: { Eventslot, EditEvent },
 
   setup() {
     const store = useScheduleStore();
@@ -92,6 +111,7 @@ export default defineComponent({
       calendarView.value == 'day' ? 1 : windowWidth.value <= 1023 ? 3 : 7
     );
     const events = ref<Agendas>({});
+    const editor = ref<FG.Event | undefined>(undefined);
 
     interface Agendas {
       [index: number]: FG.Event[];
@@ -105,6 +125,14 @@ export default defineComponent({
       await loadAgendas();
     });
 
+    async function edit(id: number) {
+      editor.value = await store.getEvent(id);
+    }
+    function editDone(changed: boolean) {
+      if (changed) void loadAgendas();
+      editor.value = undefined;
+    }
+
     async function remove(id: number) {
       if (await store.removeEvent(id)) {
         // Successfull removed
@@ -192,6 +220,9 @@ export default defineComponent({
       asYear,
       asMonth,
       selectedDate,
+      edit,
+      editor,
+      editDone,
       events,
       calendarNext,
       calendarPrev,

src/plugins/schedule/components/overview/slots/EventSlot.vue

@@ -26,11 +26,14 @@
       />
     </q-card-section>
     <q-card-actions v-if="canEdit || canDelete" vertical align="center">
-      <router-link v-if="canEdit" :to="{ name: 'events-edit', params: { id: event.id } }">
-        <template #default>
-          <q-btn color="secondary" flat label="Bearbeiten" style="min-width: 95%" />
-        </template>
-      </router-link>
+      <q-btn
+        v-if="canEdit"
+        color="secondary"
+        flat
+        label="Bearbeiten"
+        style="min-width: 95%"
+        @click="edit"
+      />
       <q-btn
         v-if="canDelete"
         color="negative"
@@ -61,6 +64,7 @@ export default defineComponent({
   emits: {
     'update:modelValue': (val: FG.Event) => !!val,
     removeEvent: (val: number) => typeof val === 'number',
+    editEvent: (val: number) => !!val,
   },
   setup(props, { emit }) {
     const canDelete = computed(() => hasPermission(PERMISSIONS.DELETE));
@@ -77,12 +81,16 @@ export default defineComponent({
     function remove() {
       emit('removeEvent', props.modelValue.id);
     }
+    function edit() {
+      emit('editEvent', props.modelValue.id);
+    }
 
     return {
       canDelete,
       canEdit,
-      remove,
+      edit,
       event,
+      remove,
     };
   },
 });