pipeline and improvements

public/src/components/dialog/CreateGottesdienstDialog.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+
+import Dialog from "@/components/dialog/Dialog.vue";
+import type {DialogControls} from "@/components/dialog/dialog";
+import Input from "@/components/Input.vue";
+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,
+    planId: number
+}
+
+onKeyPress("Enter", create)
+
+const props = defineProps<CreateGottesdienstDialogProps>()
+
+const date = ref("")
+const time = ref("")
+
+const godi = ref(props.godi ?? {
+    planId: props.planId,
+    date: "",
+    attendance: "",
+    name: "",
+    id: -1
+})
+
+let submitted = false
+
+
+async function create(){
+    if(submitted) return;
+    submitted = true
+    await props.onCreate({
+        planId: godi.value.planId,
+        date: new Date(date.value + "T" + time.value),
+        attendance: new Date(date.value + "T" + godi.value.attendance),
+        name: godi.value.name,
+        id: godi.value.id
+    })
+    props.onDismiss()
+    submitted = false
+}
+
+</script>
+
+<template>
+
+    <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="godi.attendance" type="time" label="Anwesenheit"/>
+        <div class="buttons" style="display: flex; justify-content: end; margin-top: 20px;">
+            <button @click="onDismiss">Abbrechen</button>
+            <button @click="create">{{ godi?.id == -1 ? "Erstellen" : "Speichern"}}</button>
+        </div>
+    </Dialog>
+
+</template>
+
+<style scoped lang="less">
+
+.dialog {
+    display: flex;
+    flex-direction: column;
+    width: 500px;
+
+    h3{
+        margin-bottom: 30px;
+    }
+
+    .input {
+        margin-bottom: 16px;
+    }
+}
+
+</style>