refactor admin crud popups
All checks were successful
deploy / build-and-deploy (push) Successful in 23s
All checks were successful
deploy / build-and-deploy (push) Successful in 23s
This commit is contained in:
255
src/components/admin/popup/CrudPopup.svelte
Normal file
255
src/components/admin/popup/CrudPopup.svelte
Normal file
@ -0,0 +1,255 @@
|
||||
<script lang="ts">
|
||||
import Input from '@components/input/Input.svelte';
|
||||
import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
|
||||
import Textarea from '@components/input/Textarea.svelte';
|
||||
import Password from '@components/input/Password.svelte';
|
||||
import BitBadge from '@components/input/BitBadge.svelte';
|
||||
import UserSearch from '@components/admin/search/UserSearch.svelte';
|
||||
import Checkbox from '@components/input/Checkbox.svelte';
|
||||
import TeamSearch from '@components/admin/search/TeamSearch.svelte';
|
||||
|
||||
// html bindings
|
||||
let modal: HTMLDialogElement;
|
||||
let modalForm: HTMLFormElement;
|
||||
|
||||
// types
|
||||
interface Props<T> {
|
||||
texts: {
|
||||
title: string;
|
||||
submitButtonTitle: string;
|
||||
confirmPopupTitle: string;
|
||||
confirmPopupMessage: string;
|
||||
};
|
||||
|
||||
target: T | null;
|
||||
keys: Key<any>[][];
|
||||
|
||||
onSubmit: (target: T) => void;
|
||||
onClose?: () => void;
|
||||
|
||||
open: boolean;
|
||||
}
|
||||
type Key<T extends KeyInputType> = {
|
||||
key: string;
|
||||
type: T | null;
|
||||
label: string;
|
||||
default?: any;
|
||||
options?: KeyInputTypeOptions<T>;
|
||||
};
|
||||
type KeyInputType =
|
||||
| 'bit-badge'
|
||||
| 'checkbox'
|
||||
| 'color'
|
||||
| 'date'
|
||||
| 'datetime-local'
|
||||
| 'password'
|
||||
| 'tel'
|
||||
| 'team-search'
|
||||
| 'text'
|
||||
| 'textarea'
|
||||
| 'user-search';
|
||||
type KeyInputTypeOptions<T extends KeyInputType> = {
|
||||
['bit-badge']: {
|
||||
available: Record<number, string>;
|
||||
};
|
||||
['checkbox']: {};
|
||||
['color']: {};
|
||||
['date']: {};
|
||||
['datetime-local']: {};
|
||||
['password']: {};
|
||||
['tel']: {};
|
||||
['team-search']: {};
|
||||
['text']: {};
|
||||
['textarea']: {
|
||||
rows?: boolean;
|
||||
};
|
||||
['user-search']: {
|
||||
mustMatch?: boolean;
|
||||
};
|
||||
}[T] & {
|
||||
convert?: (value: any) => any;
|
||||
validate?: (value: any) => boolean;
|
||||
required?: boolean;
|
||||
dynamicWidth?: boolean;
|
||||
};
|
||||
|
||||
// input
|
||||
let { texts, target, keys, onSubmit, onClose, open = $bindable() }: Props<any> = $props();
|
||||
|
||||
onInit();
|
||||
|
||||
// state
|
||||
let submitEnabled = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
if (!open) return;
|
||||
|
||||
onInit();
|
||||
modal.show();
|
||||
});
|
||||
|
||||
$effect.pre(() => {
|
||||
if (target == null) onInit();
|
||||
updateSubmitEnabled();
|
||||
});
|
||||
|
||||
// function
|
||||
function onInit() {
|
||||
if (target == null) target = {};
|
||||
|
||||
for (const key of keys) {
|
||||
for (const k of key) {
|
||||
if (k.default !== undefined && target[k.key] === undefined)
|
||||
target[k.key] = k.options?.convert ? k.options.convert(k.default) : k.default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateSubmitEnabled() {
|
||||
submitEnabled = false;
|
||||
for (const key of keys) {
|
||||
for (const k of key) {
|
||||
if (k.options?.required) {
|
||||
if (k.options?.validate) {
|
||||
if (!k.options.validate(target[k.key])) return;
|
||||
} else {
|
||||
if (!target[k.key]) return;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
submitEnabled = true;
|
||||
}
|
||||
|
||||
// callbacks
|
||||
function onBindChange(key: string, value: any, options?: KeyInputTypeOptions<any>) {
|
||||
target[key] = options?.convert ? options.convert(value) : value;
|
||||
|
||||
updateSubmitEnabled();
|
||||
}
|
||||
|
||||
async function onSaveButtonClick(e: Event) {
|
||||
e.preventDefault();
|
||||
$confirmPopupState = {
|
||||
title: texts.confirmPopupTitle,
|
||||
message: texts.confirmPopupMessage,
|
||||
onConfirm: () => {
|
||||
modalForm.submit();
|
||||
onSubmit(target);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function onCancelButtonClick(e: Event) {
|
||||
e.preventDefault();
|
||||
modalForm.submit();
|
||||
}
|
||||
|
||||
function onModalClose() {
|
||||
setTimeout(() => {
|
||||
open = false;
|
||||
target = null;
|
||||
modalForm.reset();
|
||||
onClose?.();
|
||||
}, 300);
|
||||
}
|
||||
</script>
|
||||
|
||||
<dialog class="modal" bind:this={modal} onclose={onModalClose}>
|
||||
<form method="dialog" class="modal-box overflow-visible" 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-xl font-geist font-bold">{texts.title}</h3>
|
||||
<div class="w-full flex flex-col">
|
||||
{#each keys as key (key)}
|
||||
<div
|
||||
class="grid grid-flow-col gap-4"
|
||||
class:grid-cols-1={key.length === 1}
|
||||
class:grid-cols-2={key.length === 2}
|
||||
>
|
||||
{#each key as k (k)}
|
||||
{#if k.type === 'color' || k.type === 'date' || k.type === 'datetime-local' || k.type === 'tel' || k.type === 'text'}
|
||||
<Input
|
||||
type={k.type}
|
||||
bind:value={() => target[k.key] ?? k.default, (v) => onBindChange(k.key, v, k.options)}
|
||||
label={k.label}
|
||||
required={k.options?.required}
|
||||
dynamicWidth={k.options?.dynamicWidth}
|
||||
/>
|
||||
{:else if k.type === 'textarea'}
|
||||
<Textarea
|
||||
bind:value={() => target[k.key] ?? k.default, (v) => onBindChange(k.key, v, k.options)}
|
||||
label={k.label}
|
||||
required={k.options?.required}
|
||||
rows={k.options?.rows}
|
||||
dynamicWidth={k.options?.dynamicWidth}
|
||||
/>
|
||||
{:else if k.type === 'checkbox'}
|
||||
<Checkbox
|
||||
bind:checked={() => target[k.key] ?? k.default, (v) => onBindChange(k.key, v, k.options)}
|
||||
label={k.label}
|
||||
required={k.options?.required}
|
||||
/>
|
||||
{:else if k.type === 'user-search'}
|
||||
<UserSearch
|
||||
bind:value={
|
||||
() =>
|
||||
target[k.key] ? (target[k.key]['username'] ?? null) : k.default ? k.default['username'] : null,
|
||||
(v) =>
|
||||
k.options.mustMatch
|
||||
? onBindChange(k.key, { id: null, username: null }, k.options)
|
||||
: onBindChange(k.key, { id: null, username: v }, k.options)
|
||||
}
|
||||
onSubmit={(user) => onBindChange(k.key, user, k.options)}
|
||||
label={k.label}
|
||||
required={k.options?.required}
|
||||
mustMatch={k.options?.mustMatch}
|
||||
/>
|
||||
{:else if k.type === 'team-search'}
|
||||
<TeamSearch
|
||||
bind:value={
|
||||
() => (target[k.key] ? (target[k.key]['name'] ?? null) : k.default ? k.default['name'] : null),
|
||||
(v) =>
|
||||
k.options.mustMatch
|
||||
? onBindChange(k.key, { id: null, name: null, color: null }, k.options)
|
||||
: onBindChange(k.key, { id: null, name: v, color: null }, k.options)
|
||||
}
|
||||
onSubmit={(team) => onBindChange(k.key, team, k.options)}
|
||||
label={k.label}
|
||||
required={k.options?.required}
|
||||
mustMatch={k.options?.mustMatch}
|
||||
/>
|
||||
{:else if k.type === 'password'}
|
||||
<Password
|
||||
bind:value={() => target[k.key] ?? k.default, (v) => onBindChange(k.key, v, k.options)}
|
||||
label={k.label}
|
||||
required={k.options?.required}
|
||||
/>
|
||||
{:else if k.type === 'bit-badge'}
|
||||
<BitBadge
|
||||
available={k.options?.available}
|
||||
bind:value={
|
||||
() => (target[k.key] ? (target[k.key]['name'] ?? target[k.key]) : k.default),
|
||||
(v) => onBindChange(k.key, v, k.options)
|
||||
}
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="btn btn-success"
|
||||
class:disabled={!submitEnabled}
|
||||
disabled={!submitEnabled}
|
||||
onclick={onSaveButtonClick}>{texts.submitButtonTitle}</button
|
||||
>
|
||||
<button class="btn btn-error" type="button" 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>
|
||||
Reference in New Issue
Block a user