Fix typesafe names

src/components/management/EditEvent.vue

@@ -114,14 +114,15 @@ import { useEventStore } from '../../store';
 import { emptyEvent, emptyJob, EditableEvent } from '../../store/models';
 
 import { date, ModifyDateOptions } from 'quasar';
-import { computed, defineComponent, PropType, ref, onBeforeMount } from 'vue';
+import { computed, defineComponent, PropType, ref, onBeforeMount, watch } from 'vue';
 
 import EditJobSlot from './EditJobSlot.vue';
-import RecurrenceRule from './RecurrenceRule.vue';
+import RecurrenceRuleVue from './RecurrenceRule.vue';
+import { RecurrenceRule } from 'app/events';
 
 export default defineComponent({
   name: 'EditEvent',
-  components: { IsoDateInput, EditJobSlot, RecurrenceRule },
+  components: { IsoDateInput, EditJobSlot, RecurrenceRule: RecurrenceRuleVue },
   props: {
     modelValue: {
       required: false,
@@ -154,10 +155,10 @@ export default defineComponent({
     const activeJob = ref<{ validate: () => Promise<boolean> }>();
     const templates = computed(() => store.templates);
     const template = ref<FG.Event>();
-    const event = ref<EditableEvent>(props.modelValue || emptyEvent(startDate.value));
+    const event = ref<EditableEvent>(props.modelValue || emptyEvent());
     const eventtypes = computed(() => store.eventTypes);
     const recurrent = ref(false);
-    const recurrenceRule = ref<FG.RecurrenceRule>({ frequency: 'daily', interval: 1 });
+    const recurrenceRule = ref<RecurrenceRule>({ frequency: 'daily', interval: 1 });
 
     onBeforeMount(() => {
       void store.getEventTypes();
@@ -165,6 +166,10 @@ export default defineComponent({
       void store.getTemplates();
     });
 
+    watch(props, (n, o) => {
+      if (event.value?.id !== n.modelValue?.id) reset();
+    });
+
     function addJob() {
       if (!activeJob.value) event.value.jobs.push(emptyJob());
       else

src/components/management/RecurrenceRule.vue

@@ -38,6 +38,7 @@
 import { defineComponent, PropType } from 'vue';
 import { IsoDateInput } from '@flaschengeist/api/components';
 import { notEmpty } from '@flaschengeist/api';
+import { RecurrenceRule } from '../../events';
 
 export default defineComponent({
   name: 'RecurrenceRule',
@@ -45,11 +46,11 @@ export default defineComponent({
   props: {
     modelValue: {
       required: true,
-      type: Object as PropType<FG.RecurrenceRule>,
+      type: Object as PropType<RecurrenceRule>,
     },
   },
   emits: {
-    'update:modelValue': (rule: FG.RecurrenceRule) => !!rule,
+    'update:modelValue': (rule: RecurrenceRule) => !!rule,
   },
   setup(props, { emit }) {
     const freqTypes = [

src/components/overview/slots/EventSlot.vue

@@ -6,7 +6,7 @@
   >
     <q-card-section class="text-primary q-pa-xs">
       <div class="text-weight-bolder text-center">
-        {{ event.type.name }}
+        {{ typeName }}
         <template v-if="event.name"
           >: <span>{{ event.name }}</span>
         </template>
@@ -51,6 +51,7 @@
 import { defineComponent, computed, PropType } from 'vue';
 import { hasPermission } from '@flaschengeist/api';
 import { PERMISSIONS } from '../../../permissions';
+import { useEventStore } from '../../../store';
 import { date } from 'quasar';
 import JobSlot from './JobSlot.vue';
 
@@ -69,6 +70,7 @@ export default defineComponent({
     editEvent: (val: number) => !!val,
   },
   setup(props, { emit }) {
+    const store = useEventStore();
     const canDelete = computed(() => hasPermission(PERMISSIONS.DELETE));
     const canEdit = computed(
       () =>
@@ -76,6 +78,11 @@ export default defineComponent({
         (props.modelValue?.end || props.modelValue.start) >=
           date.buildDate({ hours: 0, minutes: 0, seconds: 0, milliseconds: 0 })
     );
+    const typeName = computed(() =>
+      typeof props.modelValue.type === 'object'
+        ? props.modelValue.type.name
+        : store.eventTypes.find((e) => e.id === props.modelValue.type)?.name || 'Unbekannt'
+    );
 
     const event = computed({
       get: () => props.modelValue,
@@ -95,6 +102,7 @@ export default defineComponent({
       edit,
       event,
       remove,
+      typeName,
     };
   },
 });

src/components/overview/slots/JobSlot.vue

@@ -5,7 +5,7 @@
       <template v-if="modelValue.end">- {{ asHour(modelValue.end) }}</template>
     </div>
     <div class="q-px-xs">
-      {{ modelValue.type.name }}
+      {{ typeName }}
     </div>
     <div class="col-auto q-px-xs" style="font-size: 10px">
       {{ modelValue.comment }}
@@ -87,6 +87,12 @@ export default defineComponent({
       return userStore.findUser(service.userid)?.display_name || service.userid;
     }
 
+    const typeName = computed(() =>
+      typeof props.modelValue.type === 'object'
+        ? props.modelValue.type.name
+        : store.jobTypes.find((j) => j.id === props.modelValue.type)?.name || 'Unbekannter Diensttyp'
+    );
+
     const isEnrolled = computed(
       () =>
         props.modelValue.services.findIndex(
@@ -174,6 +180,7 @@ export default defineComponent({
       invite: () => invite(true),
       signOutFromJob,
       transfer: () => invite(false),
+      typeName,
       userDisplay,
       asHour,
     };