[events] Allow editing events and removing templates

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

@@ -3,7 +3,10 @@
     <q-card>
       <q-form @submit="save()" @reset="reset">
         <q-card-section class="fit row justify-start content-center items-center">
-          <div class="text-h6 col-xs-12 col-sm-6 q-pa-sm">Veranstaltung erstellen</div>
+          <div class="text-h6 col-xs-12 col-sm-6 q-pa-sm">
+            Veranstaltung <template v-if="modelValue">bearbeiten</template
+            ><template v-else>erstellen</template>
+          </div>
           <q-select
             :model-value="template"
             filled
@@ -58,7 +61,7 @@
             filled
           />
         </q-card-section>
-        <q-card-section v-if="event.template_id === undefined">
+        <q-card-section v-if="event.template_id === undefined && modelValue === undefined">
           <q-btn-toggle
             v-model="recurrent"
             spread
@@ -85,7 +88,8 @@
         </q-card-section>
         <q-card-actions align="right">
           <q-btn label="Reset" type="reset" />
-          <q-btn color="secondary" label="Neue Vorlage" @click="save(true)" />
+          <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-form>
@@ -94,18 +98,25 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onBeforeMount, computed } from 'vue';
-import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
-import Job from './Job.vue';
-import RecurrenceRule from './RecurrenceRule.vue';
+import { computed, defineComponent, PropType, ref, onBeforeMount } from 'vue';
 import { date, ModifyDateOptions } from 'quasar';
 import { useScheduleStore } from '../../store';
 import { notEmpty } from 'src/utils/validators';
+import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
+import Job from './Job.vue';
+import RecurrenceRule from './RecurrenceRule.vue';
 
 export default defineComponent({
-  name: 'CreateEvent',
+  name: 'EditEvent',
   components: { IsoDateInput, Job, RecurrenceRule },
-  setup() {
+  props: {
+    modelValue: {
+      required: false,
+      default: () => undefined,
+      type: Object as PropType<FG.Event | undefined>,
+    },
+  },
+  setup(props) {
     const store = useScheduleStore();
 
     const emptyJob = {
@@ -127,7 +138,7 @@ export default defineComponent({
 
     const templates = computed(() => store.templates);
     const template = ref<FG.Event | undefined>(undefined);
-    const event = ref<FG.Event>(Object.assign({}, emptyEvent));
+    const event = ref<FG.Event>(props.modelValue || Object.assign({}, emptyEvent));
     const eventtypes = computed(() => store.eventTypes);
     const jobDeleteDisabled = computed(() => event.value.jobs.length < 2);
     const recurrent = ref(false);
@@ -153,11 +164,10 @@ export default defineComponent({
     }
 
     async function save(template = false) {
-      console.log(template);
       event.value.is_template = template;
       try {
         await store.addEvent(event.value);
-        if (recurrent.value && !event.value.is_template) {
+        if (props.modelValue === undefined && recurrent.value && !event.value.is_template) {
           let count = 0;
           const options: ModifyDateOptions = {};
           switch (recurrenceRule.value.frequency) {
@@ -194,8 +204,15 @@ export default defineComponent({
       }
     }
 
+    async function removeTemplate() {
+      if (template.value !== undefined) {
+        await store.removeEvent(template.value.id);
+        template.value = undefined;
+      }
+    }
+
     function reset() {
-      event.value = Object.assign({}, emptyEvent);
+      event.value = Object.assign({}, props.modelValue || emptyEvent);
       template.value = undefined;
     }
 
@@ -210,6 +227,7 @@ export default defineComponent({
       reset,
       recurrent,
       fromTemplate,
+      removeTemplate,
       template,
       recurrenceRule,
       event,

src/plugins/schedule/pages/Event.vue

@@ -0,0 +1,29 @@
+<template>
+  <q-page padding class="fit row justify-center content-start items-start q-gutter-sm">
+    <EditEvent v-model="event" />
+  </q-page>
+</template>
+
+<script lang="ts">
+import { onBeforeMount, defineComponent, ref } from 'vue';
+import EditEvent from '../components/management/EditEvent.vue';
+import { useScheduleStore } from '../store';
+import { useRoute } from 'vue-router';
+
+export default defineComponent({
+  components: { EditEvent },
+  setup() {
+    const route = useRoute();
+    const store = useScheduleStore();
+    const event = ref<FG.Event | undefined>(undefined);
+    onBeforeMount(async () => {
+      if ('id' in route.params && typeof route.params.id === 'string')
+        event.value = await store.getEvent(parseInt(route.params.id));
+    });
+
+    return {
+      event,
+    };
+  },
+});
+</script>

src/plugins/schedule/pages/Management.vue

@@ -32,10 +32,10 @@
         animated
       >
         <q-tab-panel name="create">
-          <CreateEvent />
+          <EditEvent />
         </q-tab-panel>
         <q-tab-panel name="eventtypes">
-          <Eventtypes />
+          <EventTypes />
         </q-tab-panel>
         <q-tab-panel name="jobtypes">
           <JobTypes v-if="canEditJobTypes" />
@@ -47,16 +47,16 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue';
-import Eventtypes from '../components/management/Eventtypes.vue';
+import EventTypes from '../components/management/EventTypes.vue';
 import JobTypes from '../components/management/JobTypes.vue';
-import CreateEvent from '../components/management/CreateEvent.vue';
+import EditEvent from '../components/management/EditEvent.vue';
 import { hasPermission } from 'src/utils/permission';
 import { PERMISSIONS } from '../permissions';
 import { Screen } from 'quasar';
 
 export default defineComponent({
   name: 'EventManagement',
-  components: { CreateEvent, Eventtypes, JobTypes },
+  components: { EditEvent, EventTypes, JobTypes },
   setup() {
     const canEditJobTypes = computed(() => hasPermission(PERMISSIONS.JOB_TYPE));
 

src/plugins/schedule/pages/Overview.vue

@@ -35,7 +35,7 @@
           <AgendaView />
         </q-tab-panel>
         <q-tab-panel name="eventtypes">
-          <Eventtypes />
+          <EventTypes />
         </q-tab-panel>
       </q-tab-panels>
     </q-page>
@@ -44,14 +44,14 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue';
-import Eventtypes from '../components/management/Eventtypes.vue';
+import EventTypes from '../components/management/EventTypes.vue';
 //import CreateEvent from '../components/management/CreateEvent.vue';
 import AgendaView from '../components/overview/AgendaView.vue';
 import { Screen } from 'quasar';
 
 export default defineComponent({
   name: 'EventOverview',
-  components: { AgendaView, Eventtypes },
+  components: { AgendaView, EventTypes },
   setup() {
     interface Tab {
       name: string;

src/plugins/schedule/routes/index.ts

@@ -50,7 +50,7 @@ export const innerRoutes: FG_Plugin.MenuRoute[] = [
 export const privateRoutes: FG_Plugin.NamedRouteRecordRaw[] = [
   {
     name: 'events-edit',
-    path: 'schedule/edit/:id',
-    redirect: { name: 'schedule-overview' },
+    path: 'schedule/:id/edit',
+    component: () => import('../pages/Event.vue'),
   },
 ];