feat: enable updating gottesdienste

public/src/components/dialog/CreateGottesdienstDialog.vue

@@ -7,8 +7,8 @@ import {onMounted, ref, toRaw} from "vue";
 import type {Gottesdienst, GottesdienstGroup} from "@/models/models";
 import {onKeyPress} from "@/composables/enter";
 interface CreateGottesdienstDialogProps extends DialogControls {
-    onCreate: (Gottesdienst) => (Promise<any> | undefined),
-    godi?: Gottesdienst,
+    onCreate: (arg0: Gottesdienst) => (Promise<any> | undefined),
+    gottesdienst?: Gottesdienst,
     planId: number
 }
 
@@ -16,19 +16,34 @@ onKeyPress("Enter", create)
 
 const props = defineProps<CreateGottesdienstDialogProps>()
 
-const date = ref("")
-const time = ref("")
+const godi = ref(formatGottesdienst(props.gottesdienst))
 
-const godi = ref(props.godi ?? {
-    planId: props.planId,
-    date: "",
-    attendance: "",
-    name: "",
-    id: -1
-})
+const date = ref(props.gottesdienst ? formatDateString(props.gottesdienst.date) : "")
+const time = ref(props.gottesdienst ? formatTimeString(props.gottesdienst.date) : "")
 
 let submitted = false
 
+function formatGottesdienst(gottesdienst: Gottesdienst) {
+    return gottesdienst ? {
+        ...gottesdienst,
+        attendance: formatTimeString(gottesdienst.attendance)
+    } : {
+        planId: props.planId,
+        date: "",
+        attendance: "",
+        name: "",
+        id: -1
+    }
+}
+
+function formatDateString(date: Date) {
+    return (new Date(date)).toISOString().split('T')[0];
+}
+
+function formatTimeString(date: Date) {
+    return (new Date(date)).toTimeString().slice(0, 5);
+}
+
 
 async function create(){
     if(submitted) return;
@@ -44,6 +59,7 @@ async function create(){
     submitted = false
 }
 
+
 </script>
 
 <template>
@@ -51,8 +67,8 @@ async function create(){
     <Dialog class="dialog">
         <h3>Gottesdienst {{ godi.id == -1 ? "erstellen" : "bearbeiten"}}</h3>
         <Input class="input" v-model:value="godi.name" label="Name" focus/>
-        <Input class="input" v-model:value="date" type="date" label="Datum"/>
-        <Input class="input" v-model:value="time" type="time" label="Um"/>
+        <Input class="input" v-model:value="date" date-format="string" type="date" label="Datum"/>
+        <Input class="input" v-model:value="time" date-format="string" type="time" label="Um"/>
         <Input class="input" v-model:value="godi.attendance" type="time" label="Anwesenheit"/>
         <div class="buttons" style="display: flex; justify-content: end; margin-top: 20px;">
             <button @click="onDismiss">Abbrechen</button>