initial commit

src/app/admin/users/CreateOrEditPopup.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
+  import Input from '@components/input/Input.svelte';
+  import { onDestroy } from 'svelte';
+  import type { User } from './types.ts';
+  import { userCreateOrEditPopupState } from './state.ts';
+
+  // html bindings
+  let modal: HTMLDialogElement;
+  let modalForm: HTMLFormElement;
+
+  // input
+  let action = $state<'create' | 'edit' | null>(null);
+  let user = $state({} as User);
+  let onUpdate = $state((_: User) => {});
+
+  // lifecycle
+  const cancel = userCreateOrEditPopupState.subscribe((value) => {
+    if (value && 'create' in value) {
+      action = 'create';
+      user = {
+        id: -1,
+        username: '',
+        firstname: '',
+        lastname: '',
+        birthday: new Date().toISOString().slice(0, 10),
+        telephone: '',
+        uuid: ''
+      };
+      onUpdate = value?.create.onUpdate;
+      modal.show();
+    } else if (value && 'edit' in value) {
+      action = 'edit';
+      user = value.edit.user;
+      onUpdate = value.edit.onUpdate;
+      modal.show();
+    }
+  });
+
+  onDestroy(cancel);
+
+  // texts
+  const texts = {
+    create: {
+      title: 'Nutzer erstellen',
+      buttonTitle: 'Erstellen',
+      confirmPopupTitle: 'Nutzer erstellen?',
+      confirmPopupMessage: 'Sollen der neue Nutzer erstellt werden?'
+    },
+    edit: {
+      title: 'Nutzer bearbeiten',
+      buttonTitle: 'Speichern',
+      confirmPopupTitle: 'Änderunge speichern?',
+      confirmPopupMessage: 'Sollen die Änderungen gespeichert werden?'
+    },
+    null: {}
+  };
+
+  // callbacks
+  function onSaveButtonClick(e: Event) {
+    e.preventDefault();
+    $confirmPopupState = {
+      title: texts[action!].confirmPopupTitle,
+      message: texts[action!].confirmPopupMessage,
+      onConfirm: () => {
+        modalForm.submit();
+        onUpdate(user);
+      }
+    };
+  }
+</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">✕</button>
+    <div class="space-y-5">
+      <h3 class="text-xl font-geist font-bold">{texts[action!].title}</h3>
+      <div class="grid grid-cols-1 sm:grid-cols-2 w-full sm:w-fit gap-x-4 gap-y-2">
+        <Input type="text" bind:value={user.firstname} label="Vorname" />
+        <Input type="text" bind:value={user.lastname} label="Nachname" />
+        <Input type="date" bind:value={user.birthday} label="Geburtstag" />
+        <Input type="tel" bind:value={user.telephone} label="Telefonnummer" />
+        <Input type="text" bind:value={user.username} label="Spielername" />
+        <Input type="text" bind:value={user.uuid} label="UUID" />
+      </div>
+      <div>
+        <button class="btn btn-success" onclick={onSaveButtonClick}>{texts[action!].buttonTitle}</button>
+        <button class="btn btn-error">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>