refactor admin crud popups

src/app/admin/users/Users.svelte

@@ -1,56 +1,54 @@
 <script lang="ts">
-  import Icon from '@iconify/svelte';
-  import CreateOrEditPopup from './CreateOrEditPopup.svelte';
-  import type { User } from './types.ts';
-  import { userCreateOrEditPopupState, users } from './state.ts';
-  import { editUser } from './actions.ts';
-  import SortableTr from '@components/admin/table/SortableTr.svelte';
-  import SortableTh from '@components/admin/table/SortableTh.svelte';
+  import DataTable from '@components/admin/table/DataTable.svelte';
+  import { editUser, users } from '@app/admin/users/users.ts';
+  import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
 
-  // callbacks
-  async function onUserEditButtonClick(user: User) {
-    $userCreateOrEditPopupState = {
-      edit: {
-        user: user,
-        onUpdate: editUser
-      }
-    };
-  }
+  // state
+  let editPopupUser = $state(null);
+  let editPopupOpen = $derived(!!editPopupUser);
+
+  // lifecycle
+  $effect(() => {
+    if (!editPopupOpen) editPopupUser = null;
+  });
 </script>
 
-<div class="h-screen overflow-x-auto">
-  <table class="table table-pin-rows">
-    <thead>
-      <SortableTr data={users}>
-        <SortableTh style="width: 5%">#</SortableTh>
-        <SortableTh style="width: 15%" key="firstname">Vorname</SortableTh>
-        <SortableTh style="width: 15%" key="lastname">Nachname</SortableTh>
-        <SortableTh style="width: 5%" key="birthday">Geburtstag</SortableTh>
-        <SortableTh style="width: 12%" key="phone">Telefon</SortableTh>
-        <SortableTh style="width: 20%" key="username">Username</SortableTh>
-        <SortableTh style="width: 23%">UUID</SortableTh>
-        <SortableTh style="width: 5%"></SortableTh>
-      </SortableTr>
-    </thead>
-    <tbody>
-      {#each $users as user, i (user.id)}
-        <tr class="hover:bg-base-200">
-          <td>{i + 1}</td>
-          <td>{user.firstname}</td>
-          <td>{user.lastname}</td>
-          <td>{user.birthday}</td>
-          <td>{user.telephone}</td>
-          <td>{user.username}</td>
-          <td>{user.uuid}</td>
-          <td>
-            <button class="cursor-pointer" onclick={() => onUserEditButtonClick(user)}>
-              <Icon icon="heroicons:pencil-square" />
-            </button>
-          </td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
+<DataTable
+  data={users}
+  count={true}
+  keys={[
+    { key: 'firstname', label: 'Vorname', width: 15, sortable: true },
+    { key: 'lastname', label: 'Nachname', width: 15, sortable: true },
+    { key: 'birthday', label: 'Geburtstag', width: 5, sortable: true },
+    { key: 'telephone', label: 'Telefon', width: 12, sortable: true },
+    { key: 'username', label: 'Username', width: 20, sortable: true },
+    { key: 'uuid', label: 'UUID', width: 23 }
+  ]}
+  onEdit={(user) => (editPopupUser = user)}
+/>
 
-<CreateOrEditPopup />
+<CrudPopup
+  texts={{
+    title: 'Nutzer bearbeiten',
+    submitButtonTitle: 'Speichern',
+    confirmPopupTitle: 'Änderungen speichern?',
+    confirmPopupMessage: 'Sollen die Änderungen gespeichert werden?'
+  }}
+  target={editPopupUser}
+  keys={[
+    [
+      { key: 'firstname', type: 'text', label: 'Vorname', options: { required: true } },
+      { key: 'lastname', type: 'text', label: 'Nachname', options: { required: true } }
+    ],
+    [
+      { key: 'birthday', type: 'date', label: 'Geburtstag', options: { required: true } },
+      { key: 'telephone', type: 'tel', label: 'Telefonnummer' }
+    ],
+    [
+      { key: 'username', type: 'text', label: 'Spielername', options: { required: true } },
+      { key: 'uuid', type: 'text', label: 'UUID' }
+    ]
+  ]}
+  onSubmit={editUser}
+  bind:open={editPopupOpen}
+/>