public/src/components/Input.vue

@@ -7,7 +7,7 @@ const props = withDefaults(defineProps<{
     label?: string,
     disabled?: boolean,
     type?: string,
-    dateFormat?: "string" | "number",
+    dateFormat?: "string" | "number" | "date",
     focus?: boolean
 }>(), {
     dateFormat: "string"
@@ -45,10 +45,12 @@ function leading(val) {
 
 function getValue(){
     if(props.type == "date" && props.dateFormat == "number") {
-        console.log(props.value)
         const date = new Date(props.value)
         return leading(date.getFullYear()) + "-" + zeros(date.getMonth() + 1) + "-" + zeros(date.getDate())
-    }else{
+    } if(props.type == "date" && props.dateFormat == "date") {
+        const date = new Date(props.value)
+        return leading(date.getFullYear()) + "-" + zeros(date.getMonth() + 1) + "-" + zeros(date.getDate())
+    } else {
         return props.value
     }
 }

public/src/components/TablePlan.vue

@@ -15,7 +15,7 @@ const props = defineProps<{
     edit: boolean,
     smallMode: boolean
 }>()
-const emit = defineEmits(["toggleMark", "added", "delete", "endEdit", "resetPassword", "deleteMinistrant", "createMinistrant", "editMinistrant"])
+const emit = defineEmits(["toggleMark", "added", "delete", "edit", "endEdit", "resetPassword", "deleteMinistrant", "createMinistrant", "editMinistrant"])
 const openEditUser = ref<number>(-1)
 const miniCopy = reactive<{ data?: SimplifiedMinistrant }>({})
 const data = reactive({
@@ -131,7 +131,12 @@ function getAmount(mid: number, value: number): number {
 
             <tr v-if="props.edit" class="no-print">
                 <th></th>
-                <th v-for="godi in props.gottesdienste"><i @click="$emit('delete', godi.id)">delete</i></th>
+                <th v-for="godi in props.gottesdienste"><i @click="$emit('delete', godi.id)" style="cursor: pointer">delete</i></th>
+            </tr>
+
+            <tr v-if="props.edit" class="no-print">
+                <th></th>
+                <th v-for="godi in props.gottesdienste"><i @click="$emit('edit', godi.id)" style="cursor: pointer">edit</i></th>
             </tr>
 
             <tr>

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,18 +16,33 @@ onKeyPress("Enter", create)
 
 const props = defineProps<CreateGottesdienstDialogProps>()
 
-const date = ref("")
-const time = ref("")
+const godi = ref(formatGottesdienst(props.gottesdienst))
 
-const godi = ref(props.godi ?? {
+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
-})
+    }
+}
 
-let submitted = false
+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(){
@@ -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>

public/src/services/api.ts

@@ -87,6 +87,22 @@ export namespace API {
             })
     }
 
+    export async function addGottesdienstNew(gottesdienst: Gottesdienst) {
+        return api("/gottesdienste", "PUT", {
+            ...gottesdienst,
+            date: gottesdienst.date.getTime(),
+            attendance: gottesdienst.attendance.getTime()
+        }).then(data => data.json())
+    }
+
+    export async function updateGottesdienst(gottesdienst: Gottesdienst) {
+        return api("/gottesdienste", "PATCH", {
+            ...gottesdienst,
+            date: gottesdienst.date.getTime(),
+            attendance: gottesdienst.attendance.getTime()
+        }).then(res => res.status == 200)
+    }
+
     export async function getMinistranten() {
         return api("/ministranten", "GET").then(res => res.json())
     }

public/src/views/PlanView.vue

@@ -88,21 +88,27 @@ const sortedGottesdienste = computed(() => {
     })
 })
 
-async function createGottesdienst(){
+async function createGottesdienst(gottesdienstId?: number){
+    let gottesdienstRef = plan.gottesdienste.find(gottesdienst => gottesdienst.id == gottesdienstId)
+    let gottesdienst = gottesdienstRef ? Object.assign({}, toRaw(gottesdienstRef)) : null;
     Dialogs.createDialog(CreateGottesdienstDialog, {
         onPositive() {},
         onNegative() {},
         onDismiss() {}
     }, {
-        planId: parseInt(planId.value as string),
+        gottesdienst,
+        planId: parseInt(planId.value as unknown),
         async onCreate(godi: Gottesdienst) {
-            const newGodi = await API.addGottesdienst(
-                godi.name,
-                godi.date,
-                godi.attendance,
-                godi.planId
-            )
-            plan.gottesdienste.push(newGodi)
+            if(godi.id == -1) {
+                const newGodi = await API.addGottesdienstNew(godi)
+                godi.id = newGodi.id
+                plan.gottesdienste.push(godi)
+            } else {
+                await API.updateGottesdienst(godi)
+                const index = plan.gottesdienste.findIndex(g => g.id == godi.id)
+                plan.gottesdienste.splice(index, 1)
+                plan.gottesdienste.push(godi)
+            }
         }
     })
 }
@@ -293,6 +299,7 @@ async function createMinistrant(ministrantId?: number) {
                 :small-mode="editPlanAdmin"
                 @added="addGodi"
                 @delete="deleteGottedienst"
+                @edit="createGottesdienst"
                 @toggle-mark="toggleMark"
                 @end-edit="editPlanAdmin = false"
                 @reset-password="resetPassword"