initial commit

src/app/admin/users/Users.svelte

@@ -0,0 +1,56 @@
+<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';
+
+  // callbacks
+  async function onUserEditButtonClick(user: User) {
+    $userCreateOrEditPopupState = {
+      edit: {
+        user: user,
+        onUpdate: editUser
+      }
+    };
+  }
+</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>
+
+<CreateOrEditPopup />