Add filtering by text/role/status, sorting, pagination, collection prefs

apps/site/package.json

@@ -9,6 +9,7 @@
 		"lint": "next lint"
 	},
 	"dependencies": {
+		"@cloudscape-design/collection-hooks": "^1.0.34",
 		"@cloudscape-design/components": "^3.0.475",
 		"@cloudscape-design/global-styles": "^1.0.20",
 		"@fireworks-js/react": "^2.10.7",

apps/site/src/app/admin/participants/components/ParticipantsFilters.tsx

@@ -0,0 +1,70 @@
+import { Dispatch, SetStateAction } from "react";
+
+import FormField from "@cloudscape-design/components/form-field";
+import Multiselect from "@cloudscape-design/components/multiselect";
+import SpaceBetween from "@cloudscape-design/components/space-between";
+import TextFilter, {
+    TextFilterProps
+} from "@cloudscape-design/components/text-filter";
+
+import type { Options } from "./ParticipantsTable";
+
+interface ParticipantsFiltersProps {
+    filteredItemsCount: number | undefined;
+    filterProps: TextFilterProps;
+    roles: Options;
+    selectedRoles: Options;
+    setSelectedRoles: Dispatch<SetStateAction<Options>>;
+    statuses: Options;
+    selectedStatuses: Options;
+    setSelectedStatuses: Dispatch<SetStateAction<Options>>;
+}
+
+function ParticipantsFilters({
+    filteredItemsCount,
+    filterProps,
+    roles,
+    selectedRoles,
+    setSelectedRoles,
+    statuses,
+    selectedStatuses,
+    setSelectedStatuses
+}: ParticipantsFiltersProps) {
+    return (
+        <SpaceBetween size="l" direction="horizontal">
+            <div style={{ marginTop: "24px" }}>
+                <TextFilter
+                    {...filterProps}
+                    countText={filteredItemsCount === 1 ? '1 participant' : `${filteredItemsCount} participants`}
+                    filteringAriaLabel="Filter participants"
+                    filteringPlaceholder="Search participants"
+                />
+            </div>
+            <FormField label="Role">
+                <Multiselect
+                    data-testid="role-filter"
+                    placeholder="Filter by role"
+                    options={roles}
+                    selectedAriaLabel="Selected"
+                    selectedOptions={selectedRoles}
+                    onChange={(event) => setSelectedRoles(event.detail.selectedOptions)}
+                    expandToViewport={true}
+                />
+            </FormField>
+            <FormField label="Status">
+                <Multiselect
+                    data-testid="status-filter"
+                    placeholder="Filter by status"
+                    options={statuses}
+                    selectedAriaLabel="Selected"
+                    selectedOptions={selectedStatuses}
+                    onChange={(event) => setSelectedStatuses(event.detail.selectedOptions)}
+                    expandToViewport={true}
+                />
+            </FormField>
+        </SpaceBetween>
+
+    )
+}
+
+export default ParticipantsFilters;

apps/site/src/app/admin/participants/components/ParticipantsTable.tsx

@@ -1,33 +1,126 @@
-import { useCallback } from "react";
+import { ReactElement, useCallback, useState } from "react";
+import { useCollection } from "@cloudscape-design/collection-hooks";
 
 import Box from "@cloudscape-design/components/box";
+import Button from "@cloudscape-design/components/button";
+import CollectionPreferences from "@cloudscape-design/components/collection-preferences";
 import Header from "@cloudscape-design/components/header";
+import { MultiselectProps } from "@cloudscape-design/components/multiselect";
+import Pagination from "@cloudscape-design/components/pagination";
 import SpaceBetween from "@cloudscape-design/components/space-between";
 import Table from "@cloudscape-design/components/table";
-import TextFilter from "@cloudscape-design/components/text-filter";
 
 import ApplicantStatus from "@/app/admin/applicants/components/ApplicantStatus";
 import { Participant } from "@/lib/admin/useParticipants";
 
 import ParticipantAction from "./ParticipantAction";
+import ParticipantsFilters from "./ParticipantsFilters";
 import RoleBadge from "./RoleBadge";
 
+interface EmptyStateProps {
+	title: string;
+	subtitle?: string;
+	action?: ReactElement;
+}
+
 interface ParticipantsTableProps {
 	participants: Participant[];
 	loading: boolean;
 	initiateCheckIn: (participant: Participant) => void;
 	initiatePromotion: (participant: Participant) => void;
 }
 
+export type Options = ReadonlyArray<MultiselectProps.Option>;
+const SEARCHABLE_COLUMNS: (keyof Participant)[] = [
+	"_id",
+	"first_name",
+	"last_name",
+	"role",
+	"status"
+];
+
+function createLabelFunction(columnName: string) {
+	return ({ sorted, descending }: { sorted: boolean; descending: boolean }) => {
+		const sortState = sorted
+			? `sorted ${descending ? "descending" : "ascending"}`
+			: "not sorted";
+		return `${columnName}, ${sortState}.`;
+	};
+}
+
+function EmptyState({ title, subtitle, action }: EmptyStateProps) {
+	return (
+		<Box textAlign="center" color="inherit">
+			<Box variant="strong" textAlign="center" color="inherit">
+				{title}
+			</Box>
+			<Box variant="p" padding={{ bottom: "s" }} color="inherit">
+				{subtitle}
+			</Box>
+			{action}
+		</Box>
+	);
+}
+
 function ParticipantsTable({
 	participants,
 	loading,
 	initiateCheckIn,
 	initiatePromotion,
 }: ParticipantsTableProps) {
-	// TODO: sorting
-	// TODO: search functionality
-	// TODO: role and status filters
+	const [preferences, setPreferences] = useState({
+		pageSize: 20,
+		visibleContent: [
+			"uid",
+			"firstName",
+			"lastName",
+			"role",
+			"status",
+			"action",
+		],
+	});
+	const [filterRole, setFilterRole] = useState<Options>([]);
+	const [filterStatus, setFilterStatus] = useState<Options>([]);
+	const matchesRole = (p: Participant) => filterRole.length === 0 || filterRole.map(r => r.value).includes(p.role);
+	const matchesStatus = (p: Participant) => filterStatus.length === 0 || filterStatus.map(s => s.value).includes(p.status);
+
+	const {
+		items,
+		actions,
+		filteredItemsCount,
+		collectionProps,
+		filterProps,
+		paginationProps,
+	} = useCollection(
+		participants,
+		{
+			filtering: {
+				empty: <EmptyState title="No participants" />,
+				noMatch: (
+					<EmptyState
+						title="No matches"
+						action={<Button onClick={() => actions.setFiltering('')}>Clear filter</Button>}
+					/>
+				),
+				filteringFunction: (item, filteringText) => {
+					if (!matchesRole(item)) { return false; }
+					if (!matchesStatus(item)) { return false; }
+					const filteringTextLC = filteringText.toLowerCase();
+
+					return SEARCHABLE_COLUMNS.map(key => item[key]).some(
+						value => typeof value === 'string' && value.toLowerCase().includes(filteringTextLC)
+					) || `${item.first_name} ${item.last_name}`.toLowerCase().includes(filteringTextLC)
+				},
+			},
+			pagination: { pageSize: preferences.pageSize },
+			sorting: {},
+			selection: {},
+		}
+	);
+	const allRoles = new Set(participants.map(p => p.role));
+	const roleOptions = Array.from(allRoles).map(r => ({ value: r, label: r }));
+	const allStatuses = new Set(participants.map(p => p.status));
+	const statusOptions = Array.from(allStatuses).map(s => ({ value: s, label: s }));
 
 	const ActionCell = useCallback(
 		(participant: Participant) => (
@@ -40,6 +133,50 @@ function ParticipantsTable({
 		[initiateCheckIn, initiatePromotion],
 	);
 
+	const columnDefinitions = [
+		{
+			id: "uid",
+			header: "UID",
+			cell: (item: Participant) => item._id,
+			ariaLabel: createLabelFunction("UID"),
+			sortingField: "_id",
+			isRowHeader: true,
+		},
+		{
+			id: "firstName",
+			header: "First name",
+			cell: (item: Participant) => item.first_name,
+			ariaLabel: createLabelFunction("First name"),
+			sortingField: "first_name",
+		},
+		{
+			id: "lastName",
+			header: "Last name",
+			cell: (item: Participant) => item.last_name,
+			ariaLabel: createLabelFunction("Last name"),
+			sortingField: "last_name",
+		},
+		{
+			id: "role",
+			header: "Role",
+			cell: RoleBadge,
+			ariaLabel: createLabelFunction("Role"),
+			sortingField: "role",
+		},
+		{
+			id: "status",
+			header: "Status",
+			cell: ApplicantStatus,
+			ariaLabel: createLabelFunction("status"),
+			sortingField: "status",
+		},
+		{
+			id: "action",
+			header: "Action",
+			cell: ActionCell,
+		},
+	];
+
 	const emptyMessage = (
 		<Box margin={{ vertical: "xs" }} textAlign="center" color="inherit">
 			<SpaceBetween size="m">
@@ -50,49 +187,13 @@ function ParticipantsTable({
 
 	return (
 		<Table
-			// TODO: aria labels
-			columnDefinitions={[
-				{
-					id: "uid",
-					header: "UID",
-					cell: (item) => item._id,
-					sortingField: "uid",
-					isRowHeader: true,
-				},
-				{
-					id: "firstName",
-					header: "First name",
-					cell: (item) => item.first_name,
-					sortingField: "firstName",
-				},
-				{
-					id: "lastName",
-					header: "Last name",
-					cell: (item) => item.last_name,
-					sortingField: "lastName",
-				},
-				{
-					id: "role",
-					header: "Role",
-					cell: RoleBadge,
-					sortingField: "role",
-				},
-				{
-					id: "status",
-					header: "Status",
-					cell: ApplicantStatus,
-					sortingField: "status",
-				},
-				{
-					id: "action",
-					header: "Action",
-					cell: ActionCell,
-				},
-			]}
+			{...collectionProps}
 			header={
 				<Header counter={`(${participants.length})`}>Participants</Header>
 			}
-			items={participants}
+			columnDefinitions={columnDefinitions}
+			visibleColumns={preferences.visibleContent}
+			items={items}
 			loading={loading}
 			loadingText="Loading participants"
 			resizableColumns
@@ -101,10 +202,56 @@ function ParticipantsTable({
 			trackBy="_id"
 			empty={emptyMessage}
 			filter={
-				<TextFilter filteringPlaceholder="Find participants" filteringText="" />
+				<ParticipantsFilters
+					filteredItemsCount={filteredItemsCount}
+					filterProps={filterProps}
+					roles={roleOptions}
+					selectedRoles={filterRole}
+					setSelectedRoles={setFilterRole}
+					statuses={statusOptions}
+					selectedStatuses={filterStatus}
+					setSelectedStatuses={setFilterStatus}
+				/>
+			}
+			pagination={
+				<Pagination
+					{...paginationProps}
+					ariaLabels={{
+						nextPageLabel: "Next page",
+						pageLabel: (pageNumber) => `Go to page ${pageNumber}`,
+						previousPageLabel: "Previous page",
+					}}
+				/>
+			}
+			preferences={
+				<CollectionPreferences
+					pageSizePreference={{
+						title: "Select page size",
+						options: [
+							{ value: 20, label: "20 people" },
+							{ value: 50, label: "50 people" },
+							{ value: 100, label: "100 people" },
+						],
+					}}
+					visibleContentPreference={{
+						title: "Select visible columns",
+						options: [
+							{
+								label: "Participant info",
+								options: columnDefinitions.map(({ id, header }) => ({
+									id,
+									label: header,
+								})),
+							},
+						],
+					}}
+					cancelLabel="Cancel"
+					confirmLabel="Confirm"
+					title="Preferences"
+					preferences={preferences}
+					onConfirm={({ detail }) => setPreferences(detail as { pageSize: number, visibleContent: Array<string> })}
+				/>
 			}
-			// TODO: pagination
-			// TODO: collection preferences
 		/>
 	);
 }