@axium/sysadmin 0.0.1

package/routes/sysadmin/users/+page.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import { Icon } from '@axium/client/components';
+	import { UserCard, UserInitDialog } from '@axium/sysadmin/components';
+
+	const { data } = $props();
+
+	let users = $state(data.users);
+</script>
+
+<svelte:head>
+	<title>{text('sysadmin.system_users')}</title>
+</svelte:head>
+
+<div class="users">
+	<p>
+		<a class="subtle icon-text back" href="/sysadmin">
+			<Icon i="arrow-left" />
+			<span>{text('sysadmin.back_to_main')}</span>
+		</a>
+	</p>
+
+	<div class="users-header">
+		<h1>{text('sysadmin.system_users')}</h1>
+		<button class="icon-text" command="show-modal" commandfor="system-user-init">
+			<Icon i="plus" />
+			<span>{text('sysadmin.new_system_user')}</span>
+		</button>
+	</div>
+
+	{#if users.length}
+		<div class="cards">
+			{#each users as user, i (user.id)}
+				<UserCard bind:user={users[i]} deleted={() => users.splice(i, 1)} />
+			{/each}
+		</div>
+	{:else}
+		<p class="subtle">{text('sysadmin.no_system_users')}</p>
+	{/if}
+</div>
+
+<UserInitDialog userId={data.session.userId} created={user => users.push(user)} />
+
+<style>
+	.users {
+		padding: 2em;
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+	}
+
+	.back {
+		width: fit-content;
+	}
+
+	.users-header {
+		display: flex;
+		gap: 1em;
+
+		h1 {
+			margin: 0;
+		}
+
+		button {
+			margin-left: auto;
+		}
+	}
+
+	.cards {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+		gap: 1em;
+	}
+
+	@media (width < 700px) {
+		.users {
+			padding: 1em;
+			padding-bottom: 5em;
+		}
+
+		.cards {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>

package/routes/sysadmin/users/+page.ts

@@ -0,0 +1,11 @@
+import { fetchAPI } from '@axium/client/requests';
+
+export const ssr = false;
+
+export async function load({ parent }) {
+	const { session } = await parent();
+
+	const users = await fetchAPI('GET', 'users/:id/sysadmin/users', {}, session.userId);
+
+	return { session, users };
+}

package/routes/sysadmin/users/[id]/+page.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { fetchAPI, text } from '@axium/client';
+	import { Icon } from '@axium/client/components';
+	import { UserInitDialog } from '@axium/sysadmin/components';
+	import { toastStatus } from '@axium/client/toast';
+	import { goto } from '$app/navigation';
+
+	const { data } = $props();
+
+	let user = $state(data.user);
+	let editDialog = $state<HTMLDialogElement>();
+
+	function remove() {
+		toastStatus(
+			fetchAPI('DELETE', 'sysadmin/users/:id', {}, user.id).then(() => goto('/sysadmin/users')),
+			text('sysadmin.UserCard.toast_deleted')
+		);
+	}
+</script>
+
+<svelte:head>
+	<title>{text('sysadmin.user.page_title', user)}</title>
+</svelte:head>
+
+<div class="user-page">
+	<a class="subtle icon-text back" href="/sysadmin/users">
+		<Icon i="arrow-left" />
+		<span>{text('sysadmin.back_to_users')}</span>
+	</a>
+
+	<div class="user-header">
+		<Icon i="user" --size="3em" />
+		<div>
+			<h1>{user.name}</h1>
+			<span class="subtle">{user.username}</span>
+		</div>
+		<button class="icon-text" onclick={() => editDialog!.showModal()}>
+			<Icon i="pen" />
+			<span>{text('sysadmin.UserCard.edit')}</span>
+		</button>
+		<button class="icon-text danger" onclick={remove}>
+			<Icon i="trash" />
+			<span>{text('generic.delete')}</span>
+		</button>
+	</div>
+</div>
+
+<UserInitDialog bind:dialog={editDialog} {user} edited={updated => (user = updated)} />
+
+<style>
+	.user-page {
+		padding: 2em;
+		display: flex;
+		flex-direction: column;
+		gap: 1.5em;
+	}
+
+	.back {
+		width: fit-content;
+	}
+
+	.user-header {
+		display: flex;
+		align-items: center;
+		gap: 1em;
+
+		:global(.Icon) {
+			flex-shrink: 0;
+		}
+
+		h1 {
+			margin: 0;
+		}
+	}
+
+	@media (width < 700px) {
+		.user-page {
+			padding: 1em;
+			padding-bottom: 5em;
+		}
+	}
+</style>

package/routes/sysadmin/users/[id]/+page.ts

@@ -0,0 +1,11 @@
+import { fetchAPI } from '@axium/client/requests';
+
+export const ssr = false;
+
+export async function load({ parent, params }) {
+	const { session } = await parent();
+
+	const user = await fetchAPI('GET', 'sysadmin/users/:id', {}, params.id);
+
+	return { session, user };
+}

package/routes/tsconfig.json

@@ -0,0 +1,12 @@
+{
+	"extends": ["../tsconfig.json", "../.svelte-kit/tsconfig.json"],
+	"compilerOptions": {
+		"moduleResolution": "bundler",
+		"module": "esnext",
+		"noEmit": true,
+		"target": "esnext",
+		"rootDir": ".."
+	},
+	"include": ["**/*", "../lib/*"],
+	"references": [{ "path": ".." }]
+}