miniplan/public/src/components/dialog/CreateMinistrantDialog.vue
Jonas Gerg 9eecde7a80
All checks were successful
Deploy Miniplan / build (push) Successful in 2m21s
feat: enable password update
2025-03-22 07:56:51 +01:00

127 lines
3.7 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 {ref, toRaw} from "vue";
import {onKeyPress} from "@/composables/enter";
import {API} from "@/services/api";
import {Dialogs} from "@/services/DialogService";
import UpdatePasswordDialog from "@/components/dialog/UpdatePasswordDialog.vue";
interface CreateMinistrantDialogProps extends DialogControls {
onCreate: (any) => (Promise<any> | undefined),
onDelete: (id) => (Promise<any> | undefined),
ministrant?: any
}
onKeyPress("Enter", create)
const props = defineProps<CreateMinistrantDialogProps>()
const date = ref("")
const time = ref("")
let submitted = false
const ministrant = ref(props.ministrant ?? {
id: -1,
username: "",
firstname: "",
lastname: "",
birthday: "",
privileges: "",
})
async function create(){
if(submitted) return;
submitted = true
const { id, username, firstname, lastname, privileges, birthday } = toRaw(ministrant.value)
await props.onCreate({
id, username, firstname, lastname, privileges,
birthday: new Date(birthday)
})
props.onDismiss()
submitted = false
}
async function deleteMinistrant() {
if(submitted) return;
submitted = true
const mini = ministrant.value
const shouldDelete = confirm("Möchtest du wirklich " + mini.firstname + " " + mini.lastname + " löschen? Der Ministrant und alle Eintragungen können nicht wiederhergestellt werden!")
if(!shouldDelete) return;
await props.onDelete(mini.id);
props.onDismiss()
submitted = false
}
async function resetPassword(username: string) {
const result = await API.resetPassword(username)
alert("Neues Passwort für " + username + "\n\n" + result.password)
console.log(result)
}
async function updatePassword(username: string) {
Dialogs.createDialog(
UpdatePasswordDialog,
{
onDismiss(){},
onNegative(){},
onPositive(){},
},
{
async onUpdated(newPassword: string){
await API.updatePassword(username, newPassword)
},
username
}
)
}
</script>
<template>
<Dialog class="dialog">
<h3>Ministrant {{ ministrant.id == -1 ? "erstellen" : "bearbeiten"}}</h3>
<Input class="input" v-model:value="ministrant.username" label="Nutzername" focus/>
<Input class="input" v-model:value="ministrant.firstname" label="Vorname"/>
<Input class="input" v-model:value="ministrant.lastname" label="Nachname"/>
<Input class="input" v-model:value="ministrant.birthday" type="date" label="Geburtstag"/>
<Input class="input" v-model:value="ministrant.privileges" label="Privilegien"/>
<div class="actions" v-if="ministrant.id != -1">
<!-- <button @click="resetPassword(ministrant.username)"><i>lock_reset</i>Passwort zurücksetzen-->
<!-- </button>-->
<button @click="updatePassword(ministrant.username)"><i>lock_reset</i>Passwort ändern
</button>
<button class="red" @click="deleteMinistrant()"><i>delete</i>Entfernen</button>
</div>
<div class="buttons" style="display: flex; justify-content: end; margin-top: 20px;">
<button @click="onDismiss">Abbrechen</button>
<button @click="create">{{ ministrant.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>