101 lines
2.9 KiB
Vue
101 lines
2.9 KiB
Vue
<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: (arg0: Gottesdienst) => (Promise<any> | undefined),
|
|
gottesdienst?: Gottesdienst,
|
|
planId: number,
|
|
onDelete?: () => void
|
|
}
|
|
|
|
onKeyPress("Enter", create)
|
|
|
|
const props = defineProps<CreateGottesdienstDialogProps>()
|
|
|
|
const godi = ref(formatGottesdienst(props.gottesdienst))
|
|
|
|
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;
|
|
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" 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: 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>
|
|
|
|
<style scoped lang="less">
|
|
|
|
.dialog {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 500px;
|
|
|
|
h3{
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.input {
|
|
margin-bottom: 16px;
|
|
}
|
|
}
|
|
|
|
</style> |