102 lines
3.1 KiB
Svelte
102 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import Input from '@components/input/Input.svelte';
|
|
import Textarea from '@components/input/Textarea.svelte';
|
|
import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
|
|
import type { BlockedUser } from '@app/admin/usersBlocked/types.ts';
|
|
import { blockedUserCreateOrEditPopupState } from '@app/admin/usersBlocked/state.ts';
|
|
import { onDestroy } from 'svelte';
|
|
|
|
// html bindings
|
|
let modal: HTMLDialogElement;
|
|
let modalForm: HTMLFormElement;
|
|
|
|
// states
|
|
let action = $state<'create' | 'edit' | null>(null);
|
|
let blockedUser = $state({} as BlockedUser);
|
|
let onUpdate = $state((_: BlockedUser) => {});
|
|
|
|
let submitEnabled = $derived(!!blockedUser.uuid);
|
|
|
|
// lifecycle
|
|
const cancel = blockedUserCreateOrEditPopupState.subscribe((value) => {
|
|
if (value && 'create' in value) {
|
|
action = 'create';
|
|
blockedUser = {
|
|
id: -1,
|
|
uuid: '',
|
|
comment: null
|
|
};
|
|
onUpdate = value?.create.onUpdate;
|
|
modal.show();
|
|
} else if (value && 'edit' in value) {
|
|
action = 'edit';
|
|
blockedUser = value.edit.blockedUser;
|
|
onUpdate = value.edit.onUpdate;
|
|
modal.show();
|
|
}
|
|
});
|
|
|
|
onDestroy(cancel);
|
|
|
|
// texts
|
|
const texts = {
|
|
create: {
|
|
title: 'Blockierten Nutzer erstellen',
|
|
buttonTitle: 'Erstellen',
|
|
confirmPopupTitle: 'Nutzer blockieren?',
|
|
confirmPopupMessage:
|
|
'Bist du sicher, dass der Nutzer blockiert werden soll?\nEin blockierter Nutzer kann sich nicht mehr registrieren.'
|
|
},
|
|
edit: {
|
|
title: 'Blockierten Nutzer bearbeiten',
|
|
buttonTitle: 'Speichern',
|
|
confirmPopupTitle: 'Änderungen speichern?',
|
|
confirmPopupMessage: 'Sollen die Änderungen gespeichert werden?'
|
|
},
|
|
null: {}
|
|
};
|
|
|
|
// callbacks
|
|
async function onSaveButtonClick(e: Event) {
|
|
e.preventDefault();
|
|
$confirmPopupState = {
|
|
title: texts[action!].confirmPopupTitle,
|
|
message: texts[action!].confirmPopupMessage,
|
|
onConfirm: () => {
|
|
modalForm.submit();
|
|
onUpdate(blockedUser);
|
|
}
|
|
};
|
|
}
|
|
|
|
function onCancelButtonClick(e: Event) {
|
|
e.preventDefault();
|
|
modalForm.submit();
|
|
}
|
|
</script>
|
|
|
|
<dialog class="modal" bind:this={modal}>
|
|
<form method="dialog" class="modal-box" bind:this={modalForm}>
|
|
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick={onCancelButtonClick}>✕</button>
|
|
<div class="space-y-5">
|
|
<h3 class="text-xt font-geist font-bold">{texts[action!].title}</h3>
|
|
<div>
|
|
<Input bind:value={blockedUser.uuid} label="UUID" required dynamicWidth />
|
|
<Textarea label="Kommentar" bind:value={blockedUser.comment} rows={3} dynamicWidth />
|
|
</div>
|
|
<div>
|
|
<button
|
|
class="btn btn-success"
|
|
class:disabled={!submitEnabled}
|
|
disabled={!submitEnabled}
|
|
onclick={onSaveButtonClick}>{texts[action!].buttonTitle}</button
|
|
>
|
|
<button class="btn btn-error" onclick={onCancelButtonClick}>Abbrechen</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
|
|
<button class="!cursor-default">close</button>
|
|
</form>
|
|
</dialog>
|