public/src/components/dialog/CreateGottesdienstDialog.vue

@@ -9,7 +9,8 @@ import {onKeyPress} from "@/composables/enter";
 interface CreateGottesdienstDialogProps extends DialogControls {
     onCreate: (arg0: Gottesdienst) => (Promise<any> | undefined),
     gottesdienst?: Gottesdienst,
-    planId: number
+    planId: number,
+    onDelete?: () => void
 }
 
 onKeyPress("Enter", create)
@@ -70,10 +71,13 @@ async function create(){
         <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;">
+        <div class="buttons" style="display: flex; justify-content: space-between; margin-top: 20px;">
+            <button v-if="godi.id != -1 && onDelete" class="red" @click="onDelete(); onDismiss()"><i class="icon">delete</i> Löschen</button>
+            <div style="display: flex; gap: 8px; margin-left: auto;">
                 <button @click="onDismiss">Abbrechen</button>
                 <button @click="create">{{ godi?.id == -1 ? "Erstellen" : "Speichern"}}</button>
             </div>
+        </div>
     </Dialog>
 
 </template>

public/src/views/PlanView.vue

@@ -128,7 +128,8 @@ async function createGottesdienst(gottesdienstId?: number){
                 plan.gottesdienste.splice(index, 1)
                 plan.gottesdienste.push(godi)
             }
-        }
+        },
+        onDelete: gottesdienst ? () => deleteGottedienst(gottesdienst.id) : undefined
     })
 }