Audit changes

src/lib/components/Button.svelte

@@ -3,12 +3,17 @@
 
 	export let type: 'button' | 'submit' = 'button';
 	export let variant: 'default' | 'primary' | 'link' = 'default';
+	export let formaction: string | undefined = undefined;
 	export let disabled = false;
 	const dispath = createEventDispatcher();
 </script>
 
-<button {type} class="btn btn-{variant}" on:click={(e) => dispath('click', e)} {disabled}
+<button
-	><slot /></button
+	{type}
+	{formaction}
+	class="btn btn-{variant}"
+	on:click={(e) => dispath('click', e)}
+	{disabled}><slot /></button
 >
 
 <style>

src/lib/components/form/FormControl.svelte

@@ -45,6 +45,10 @@
 		}
 	}
 
+	:global(select[multiple]) {
+		flex-grow: 1;
+	}
+
 	.form-control > :global(label) {
 		margin-bottom: 4px;
 		font-size: 1.1rem;

src/lib/i18n/en/common.json

@@ -18,6 +18,7 @@
   "current": "Current",
   "remove": "Remove",
   "filter": "Filter",
+  "clear": "Clear",
   "theme": {
     "light": "Light mode",
     "dark": "Dark mode"

src/lib/server/audit/audit.ts

@@ -98,7 +98,7 @@ export class Audit {
 
 	private static getAuditWhere(search: AuditSearchClause) {
 		const selectList: SQL<unknown>[] = [];
-		if (search.actions) {
+		if (search.actions?.length) {
 			const actions = Array.isArray(search.actions)
 				? search.actions
 				: (search.actions as string).split(',');

src/lib/server/changesets.ts

@@ -1,7 +1,7 @@
 export class Changesets {
 	static take<TRes>(
 		fields: (keyof TRes)[],
-		body: FormData,
+		body: FormData | URLSearchParams,
 		challenge?: Partial<TRes>
 	): Partial<TRes> {
 		return fields.reduce<Partial<TRes>>((accum, field) => {

src/routes/ssoadmin/audit/+page.server.ts

@@ -1,51 +1,43 @@
 import { AdminUtils } from '$lib/server/admin-utils';
 import { Audit } from '$lib/server/audit/audit.js';
 import { AuditAction } from '$lib/server/audit/types.js';
+import { Changesets } from '$lib/server/changesets.js';
 
 const PAGE_SIZE = 50;
 
+interface AuditSearchParams {
+	page: string;
+	pageSize: string;
+	actions: string;
+	user: string;
+	content: string;
+	ip: string;
+	flagged: string;
+}
+
 export const load = async ({ url, parent }) => {
 	const { user: userInfo } = await parent();
 	AdminUtils.checkPrivileges(userInfo, ['admin:audit']);
 
-	let limit = PAGE_SIZE;
+	const actions = url.searchParams.getAll('actions') as AuditAction[];
-	let page = 1;
+	const { page, pageSize, user, content, ip, flagged } = Changesets.take<AuditSearchParams>(
-	let actions: AuditAction[] | undefined = undefined;
+		['page', 'pageSize', 'user', 'content', 'ip', 'flagged'],
-	let user: string | undefined = undefined;
+		url.searchParams
-	let content: string | undefined = undefined;
+	);
-	let ip: string | undefined = undefined;
-	let flagged: boolean | undefined = undefined;
-	if (url.searchParams.has('page')) {
-		page = Number(url.searchParams.get('page')) || 1;
-	}
 
-	if (url.searchParams.has('pageSize')) {
+	const limit = Number(pageSize) || PAGE_SIZE;
-		limit = Number(url.searchParams.get('pageSize')) || PAGE_SIZE;
+	const offset = ((Number(page) || 1) - 1) * limit;
-	}
 
-	if (url.searchParams.has('actions')) {
+	const data = await Audit.searchAudit({
-		actions = url.searchParams.getAll('actions') as AuditAction[];
+		limit,
-	}
+		offset,
+		actions,
+		user,
+		content,
+		ip,
+		flagged: !!flagged
+	});
 
-	if (url.searchParams.has('user')) {
-		user = url.searchParams.get('user') as string;
-	}
-
-	if (url.searchParams.has('content')) {
-		content = url.searchParams.get('content') as string;
-	}
-
-	if (url.searchParams.has('ip')) {
-		ip = url.searchParams.get('ip') as string;
-	}
-
-	if (url.searchParams.has('flagged')) {
-		flagged = !!url.searchParams.get('flagged');
-	}
-
-	const offset = (page - 1) * limit;
-
-	const data = await Audit.searchAudit({ limit, offset, actions, user, content, ip, flagged });
 	return {
 		...data,
 		actions: Object.values(AuditAction)

src/routes/ssoadmin/audit/+page.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import Paginator from '$lib/components/Paginator.svelte';
-	import { t } from '$lib/i18n';
 	import type { PageData } from './$types';
+	import { t } from '$lib/i18n';
 	import { env } from '$env/dynamic/public';
+	import { page } from '$app/stores';
+	import Paginator from '$lib/components/Paginator.svelte';
 	import FormControl from '$lib/components/form/FormControl.svelte';
 	import ColumnView from '$lib/components/container/ColumnView.svelte';
-	import { page } from '$app/stores';
 	import SplitView from '$lib/components/container/SplitView.svelte';
 	import Button from '$lib/components/Button.svelte';
-	import AdminAuditCard from '../../../lib/components/admin/AdminAuditCard.svelte';
+	import AdminAuditCard from '$lib/components/admin/AdminAuditCard.svelte';
 
 	export let data: PageData;
 </script>
@@ -36,12 +36,26 @@
 						{/each}
 					</select>
 				</FormControl>
+
+				<ColumnView>
 					<FormControl>
 						<label for="content">{$t('admin.audit.comment')}</label>
 						<input name="content" id="content" value={$page.url.searchParams.get('content')} />
 					</FormControl>
+					<FormControl>
+						<label for="ip">{$t('admin.audit.ip')}</label>
+						<input name="ip" id="ip" value={$page.url.searchParams.get('ip')} />
+					</FormControl>
+				</ColumnView>
 			</SplitView>
+
 			<SplitView>
+				<FormControl>
+					<label for="user">{$t('admin.audit.user')}</label>
+					<input name="user" id="user" value={$page.url.searchParams.get('user')} />
+				</FormControl>
+			</SplitView>
+
 			<FormControl>
 				<label for="flagged">{$t('admin.audit.flagged')}</label>
 				<input
@@ -51,11 +65,7 @@
 					checked={!!$page.url.searchParams.get('flagged')}
 				/>
 			</FormControl>
-				<FormControl>
+
-					<label for="ip">{$t('admin.audit.ip')}</label>
-					<input name="ip" id="ip" value={$page.url.searchParams.get('ip')} />
-				</FormControl>
-			</SplitView>
 			<div>
 				<Button type="submit">{$t('common.filter')}</Button>
 			</div>