rename blocked users

src/app/admin/blockedUsers/BlockedUsers.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import {
+    type BlockedUser,
+    blockedUsers,
+    deleteBlockedUser,
+    editBlockedUser
+  } from '@app/admin/blockedUsers/blockedUsers.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 blockedUserEditPopupBlockedUser = $state(null);
+  let blockedUserEditPopupOpen = $derived(!!blockedUserEditPopupBlockedUser);
+
+  // lifecycle
+  $effect(() => {
+    if (!blockedUserEditPopupOpen) blockedUserEditPopupBlockedUser = null;
+  });
+
+  // callback
+  function onBlockedUserDelete(blockedUser: BlockedUser) {
+    $confirmPopupState = {
+      title: 'Nutzer entblockieren?',
+      message: 'Soll der Nutzer wirklich entblockiert werden?\nDieser kann sich danach wieder registrieren.',
+      onConfirm: () => deleteBlockedUser(blockedUser)
+    };
+  }
+</script>
+
+<DataTable
+  data={blockedUsers}
+  count={true}
+  keys={[
+    { key: 'uuid', label: 'UUID', width: 20, sortable: true },
+    { key: 'comment', label: 'Kommentar', width: 70 }
+  ]}
+  onEdit={(blockedUser) => (blockedUserEditPopupBlockedUser = blockedUser)}
+  onDelete={onBlockedUserDelete}
+/>
+
+<CrudPopup
+  texts={{
+    title: 'Blockierten Nutzer bearbeiten',
+    submitButtonTitle: 'Speichern',
+    confirmPopupTitle: 'Änderungen speichern',
+    confirmPopupMessage: 'Sollen die Änderungen gespeichert werden?'
+  }}
+  target={blockedUserEditPopupBlockedUser}
+  keys={[
+    [{ key: 'uuid', type: 'text', label: 'UUID', options: { required: true, dynamicWidth: true } }],
+    [{ key: 'comment', type: 'textarea', label: 'Kommentar', options: { dynamicWidth: true } }]
+  ]}
+  onSubmit={editBlockedUser}
+  bind:open={blockedUserEditPopupOpen}
+/>

src/app/admin/blockedUsers/blockedUsers.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 BlockedUsers = Exclude<ActionReturnType<typeof actions.user.blocked>['data'], undefined>['blocked'];
+export type BlockedUser = BlockedUsers[0];
+
+// state
+export const blockedUsers = writable<BlockedUsers>([]);
+
+// actions
+export async function fetchBlockedUsers() {
+  const { data, error } = await actions.user.blocked();
+  if (error) {
+    actionErrorPopup(error);
+    return;
+  }
+
+  blockedUsers.set(data.blocked);
+}
+
+export async function addBlockedUser(blockedUser: BlockedUser) {
+  const { data, error } = await actions.user.addBlocked(blockedUser);
+  if (error) {
+    actionErrorPopup(error);
+    return;
+  }
+
+  addToWritableArray(blockedUsers, Object.assign(blockedUser, { id: data.id }));
+}
+
+export async function editBlockedUser(blockedUser: BlockedUser) {
+  const { error } = await actions.user.editBlocked(blockedUser);
+  if (error) {
+    actionErrorPopup(error);
+    return;
+  }
+
+  updateWritableArray(blockedUsers, blockedUser, (t) => t.id == blockedUser.id);
+}
+
+export async function deleteBlockedUser(blockedUser: BlockedUser) {
+  const { error } = await actions.user.deleteBlocked(blockedUser);
+  if (error) {
+    actionErrorPopup(error);
+    return;
+  }
+
+  deleteFromWritableArray(blockedUsers, (t) => t.id == blockedUser.id);
+}