rewrite website

src/app/admin/admins/Admins.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import BitBadge from '@components/input/BitBadge.svelte';
+  import { Permissions } from '@util/permissions.ts';
+  import { type Admin, admins, deleteAdmin, editAdmin } from '@app/admin/admins/admins.ts';
+  import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
+  import DataTable from '@components/admin/table/DataTable.svelte';
+  import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
+
+  // state
+  let editPopupAdmin = $state(null);
+  let editPopupOpen = $derived(!!editPopupAdmin);
+
+  // callback
+  function onAdminDelete(admin: Admin) {
+    $confirmPopupState = {
+      title: 'Admin löschen',
+      message: 'Soll der Admin wirklich gelöscht werden?',
+      onConfirm: () => deleteAdmin(admin)
+    };
+  }
+</script>
+
+{#snippet permissionsBadge(permissions: number)}
+  <BitBadge available={Permissions.asOptions()} value={permissions} readonly />
+{/snippet}
+
+<DataTable
+  data={admins}
+  count={true}
+  keys={[
+    { key: 'username', label: 'Username', width: 30 },
+    { key: 'permissions', label: 'Berechtigungen', width: 60, transform: permissionsBadge }
+  ]}
+  onEdit={(admin) => (editPopupAdmin = admin)}
+  onDelete={onAdminDelete}
+/>
+
+<CrudPopup
+  texts={{
+    title: 'Admin bearbeiten',
+    submitButtonTitle: 'Speichern',
+    confirmPopupTitle: 'Änderungen speichern',
+    confirmPopupMessage: 'Sollen die Änderungen gespeichert werden?'
+  }}
+  target={editPopupAdmin}
+  keys={[
+    [
+      { key: 'username', type: 'text', label: 'Username', options: { required: true } },
+      { key: 'password', type: 'password', label: 'Passwort', default: null, options: { convert: (v) => v || null } }
+    ],
+    [
+      {
+        key: 'permissions',
+        type: 'bit-badge',
+        label: 'Berechtigungen',
+        default: 0,
+        options: { available: Permissions.asOptions() }
+      }
+    ]
+  ]}
+  onSubmit={editAdmin}
+  bind:open={editPopupOpen}
+/>

src/app/admin/admins/SidebarActions.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
+  import { addAdmin, fetchAdmins } from '@app/admin/admins/admins.ts';
+  import { Permissions } from '@util/permissions.ts';
+
+  // state
+  let createPopupOpen = $state(false);
+
+  // lifecycle
+  $effect(() => {
+    fetchAdmins();
+  });
+</script>
+
+<div>
+  <button class="btn btn-soft w-full" onclick={() => (createPopupOpen = true)}>
+    <Icon icon="heroicons:plus-16-solid" />
+    <span>Neuer Admin</span>
+  </button>
+</div>
+
+<CrudPopup
+  texts={{
+    title: 'Admin erstellen',
+    submitButtonTitle: 'Erstellen',
+    confirmPopupTitle: 'Admin erstellen?',
+    confirmPopupMessage: 'Soll der Admin erstellt werden?'
+  }}
+  target={null}
+  keys={[
+    [
+      { key: 'username', type: 'text', label: 'Username', options: { required: true } },
+      { key: 'password', type: 'password', label: 'Passwort', options: { required: true } }
+    ],
+    [
+      {
+        key: 'permissions',
+        type: 'bit-badge',
+        label: 'Berechtigungen',
+        default: 0,
+        options: { available: Permissions.asOptions() }
+      }
+    ]
+  ]}
+  onSubmit={addAdmin}
+  bind:open={createPopupOpen}
+/>

src/app/admin/admins/admins.ts

@@ -0,0 +1,52 @@
+import { type ActionReturnType, actions } from 'astro:actions';
+import { writable } from 'svelte/store';
+import { actionErrorPopup } from '@util/action.ts';
+import { addToWritableArray, deleteFromWritableArray, updateWritableArray } from '@util/state.ts';
+
+// types
+export type Admins = Exclude<ActionReturnType<typeof actions.admin.admins>['data'], undefined>['admins'];
+export type Admin = Admins[0];
+
+// state
+export const admins = writable<Admin[]>([]);
+
+// actions
+export async function fetchAdmins() {
+  const { data, error } = await actions.admin.admins();
+  if (error) {
+    actionErrorPopup(error);
+    return;
+  }
+
+  admins.set(data.admins);
+}
+
+export async function addAdmin(admin: Admin & { password: string }) {
+  const { data, error } = await actions.admin.addAdmin(admin);
+  if (error) {
+    actionErrorPopup(error);
+    return;
+  }
+
+  addToWritableArray(admins, Object.assign(admin, { id: data.id }));
+}
+
+export async function editAdmin(admin: Admin & { password: string }) {
+  const { error } = await actions.admin.editAdmin(admin);
+  if (error) {
+    actionErrorPopup(error);
+    return;
+  }
+
+  updateWritableArray(admins, admin, (t) => t.id == admin.id);
+}
+
+export async function deleteAdmin(admin: Admin) {
+  const { error } = await actions.admin.deleteAdmin(admin);
+  if (error) {
+    actionErrorPopup(error);
+    return;
+  }
+
+  deleteFromWritableArray(admins, (t) => t.id == admin.id);
+}