Added status filter to changes page.

CHANGELOG

@@ -5,6 +5,10 @@ Dates should be in`YYYY-MM-DD` format and versions are in [semantic versioning](
 
 ## v0.7.2 2024-11-24
 
+### Added
+
+- Added status filter to changes page.
+
 ### Maintenance
 
 - Updated Svelte and Supabase point releases.

src/lib/ChangeView.svelte

@@ -23,6 +23,8 @@
 	import Visibility from './Visibility.svelte';
 	import Table from './Table.svelte';
 	import Labeled from './Labeled.svelte';
+	import StatusChooser from './StatusChooser.svelte';
+	import { isStatus } from './status';
 
 	interface Props {
 		change: ChangeRow;
@@ -38,17 +40,6 @@
 	const user = getUser();
 	const db = getDB();
 
-	const Statuses = {
-		triage: 'Triage',
-		backlog: 'Backlog',
-		active: 'Active',
-		blocked: 'Blocked',
-		done: 'Done',
-		declined: 'Declined'
-	} as const;
-
-	const isStatus = (x: string): x is keyof typeof Statuses => x in Statuses;
-
 	let isAdmin = $derived($user && org?.hasAdminPerson($user.id));
 	let editable = $derived(
 		$user && (isAdmin || change.who === $user.id || change.lead === $user.id)
@@ -87,11 +78,11 @@
 >
 	<Status status={change.status} />
 	{#if editable}
-		<Select
+		<StatusChooser
 			tip="Change the status of this change"
-			selection={change.status}
-			options={Object.entries(Statuses).map(([key, value]) => ({ value: key, label: value }))}
-			change={async (status) => {
+			value={change.status}
+			none={false}
+			change={async (status: string | undefined) => {
 				if ($user && status !== undefined && isStatus(status))
 					return await queryOrError(
 						db.updateChangeStatus(change, status, $user.id),

src/lib/Changes.svelte

@@ -10,6 +10,11 @@
 	import Field from './Field.svelte';
 	import Visibility from './Visibility.svelte';
 	import Oops from './Oops.svelte';
+	import Flow from './Flow.svelte';
+	import StatusChooser from './StatusChooser.svelte';
+	import Labeled from './Labeled.svelte';
+	import { type StatusType } from './status';
+	import Notice from './Notice.svelte';
 
 	interface Props {
 		changes: ChangeRow[];
@@ -29,9 +34,10 @@
 			($user !== null && org.hasPerson($user.id))
 	);
 
-	let filter = $state('');
-	let lowerFilter = $derived(filter.toLocaleLowerCase().trim());
-	let filteredChanges = $derived(
+	let filterText = $state('');
+	let filterStatus = $state<undefined | StatusType>(undefined);
+	let lowerFilter = $derived(filterText.toLocaleLowerCase().trim());
+	let textFilteredChanges = $derived(
 		lowerFilter.length > 0
 			? changes.filter(
 					(change) =>
@@ -41,14 +47,29 @@
 				)
 			: changes
 	);
+	let statusFilteredChanges = $derived(
+		filterStatus === undefined
+			? textFilteredChanges
+			: textFilteredChanges.filter((change) => change.status === filterStatus)
+	);
 </script>
 
 {#if !visible}
 	<Oops text="Only showing public changes of this private organization." />
 {/if}
 
 {#if changes.length > 0}
-	<Field label="Filter" bind:text={filter} />
+	<Flow>
+		<Field label="Filter by text" bind:text={filterText} />
+		<Labeled label="Filter by status">
+			<StatusChooser
+				none={true}
+				tip="Filter by status"
+				change={(value) => (filterStatus = value)}
+				value={undefined}
+			/>
+		</Labeled>
+	</Flow>
 	<Table>
 		<thead>
 			<tr>
@@ -59,7 +80,7 @@
 			</tr>
 		</thead>
 		<tbody>
-			{#each filteredChanges
+			{#each statusFilteredChanges
 				.sort((a, b) => timestampToDate(a.when).getTime() - timestampToDate(b.when).getTime())
 				.sort((a, b) => Levels[a.status] - Levels[b.status]) as change}
 				<tr>
@@ -72,6 +93,10 @@
 					>
 					<td><ChangeLink id={change.id} /></td>
 				</tr>
+			{:else}
+				<tr>
+					<td colspan="4"><Notice>All changes filtered.</Notice></td>
+				</tr>
 			{/each}
 		</tbody>
 	</Table>

src/lib/Notice.svelte

@@ -10,7 +10,7 @@
 
 <style>
 	div {
-		display: inline-block;
+		display: block;
 		background-color: var(--warning);
 		color: var(--background);
 		padding: var(--padding);

src/lib/Select.svelte

@@ -23,7 +23,7 @@
 		title={tip}
 		aria-label={tip}
 		bind:value={selection}
-		onchange={change(selection)}
+		onchange={() => change(selection)}
 		class:fit={typeof fit === 'boolean' && fit === true ? 'fit' : ''}
 		style:width={typeof fit === 'string' ? fit : ''}
 		disabled={active === false}

src/lib/StatusChooser.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import Select from './Select.svelte';
+	import { isStatus, Statuses, type StatusType } from './status';
+
+	interface Props {
+		tip: string;
+		change: (value: StatusType | undefined) => any;
+		none: boolean;
+		value: string | undefined;
+	}
+
+	let { tip, change, none, value }: Props = $props();
+</script>
+
+<Select
+	{tip}
+	selection={value}
+	options={[
+		...(none ? [{ value: undefined, label: 'All' }] : []),
+		...Object.entries(Statuses).map(([key, value]) => ({ value: key, label: value }))
+	]}
+	change={(value) => change(value === undefined ? undefined : isStatus(value) ? value : undefined)}
+/>

src/lib/status.ts

@@ -0,0 +1,12 @@
+export const Statuses = {
+	triage: 'Triage',
+	backlog: 'Backlog',
+	active: 'Active',
+	blocked: 'Blocked',
+	done: 'Done',
+	declined: 'Declined'
+} as const;
+
+export type StatusType = keyof typeof Statuses;
+
+export const isStatus = (x: string): x is StatusType => x in Statuses;