diff --git a/apps/site/src/app/admin/participants/components/ParticipantsTable.tsx b/apps/site/src/app/admin/participants/components/ParticipantsTable.tsx index f8294f72..b84e42b1 100644 --- a/apps/site/src/app/admin/participants/components/ParticipantsTable.tsx +++ b/apps/site/src/app/admin/participants/components/ParticipantsTable.tsx @@ -17,6 +17,7 @@ import CheckinDayIcon from "./CheckinDayIcon"; import ParticipantAction from "./ParticipantAction"; import ParticipantsFilters from "./ParticipantsFilters"; import RoleBadge from "./RoleBadge"; +import SearchScannerModal from "./SearchScannerModal"; const FRIDAY = new Date("2024-01-26T12:00:00"); const SATURDAY = new Date("2024-01-27T12:00:00"); @@ -149,6 +150,7 @@ function ParticipantsTable({ 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)); @@ -247,77 +249,104 @@ function ParticipantsTable({ ); + const [showScanner, setShowScanner] = useState(false); + + const openScanner = () => { + setShowScanner(true); + }; + + const cancelScanner = () => { + setShowScanner(false); + }; + + const useScannerValue = (value: string) => { + actions.setFiltering(value); + setShowScanner(false); + }; + return ( - Participants - } - columnDefinitions={columnDefinitions} - visibleColumns={preferences.visibleContent} - items={items} - loading={loading} - loadingText="Loading participants" - variant="full-page" - stickyColumns={{ first: 1, last: 0 }} - trackBy="_id" - empty={emptyMessage} - filter={ - - } - pagination={ - `Go to page ${pageNumber}`, - previousPageLabel: "Previous page", - }} - /> - } - preferences={ - ({ - id, - label: header, - })), - }, - ], - }} - cancelLabel="Cancel" - confirmLabel="Confirm" - title="Preferences" - preferences={preferences} - onConfirm={({ detail }) => - setPreferences( - detail as { pageSize: number; visibleContent: Array }, - ) - } - /> - } - /> + <> + +
Scan Badge} + > + Participants + + } + columnDefinitions={columnDefinitions} + visibleColumns={preferences.visibleContent} + items={items} + loading={loading} + loadingText="Loading participants" + variant="full-page" + stickyColumns={{ first: 1, last: 0 }} + trackBy="_id" + empty={emptyMessage} + filter={ + + } + pagination={ + `Go to page ${pageNumber}`, + previousPageLabel: "Previous page", + }} + /> + } + preferences={ + ({ + id, + label: header, + })), + }, + ], + }} + cancelLabel="Cancel" + confirmLabel="Confirm" + title="Preferences" + preferences={preferences} + onConfirm={({ detail }) => + setPreferences( + detail as { pageSize: number; visibleContent: Array }, + ) + } + /> + } + /> + ); } diff --git a/apps/site/src/app/admin/participants/components/SearchScannerModal.tsx b/apps/site/src/app/admin/participants/components/SearchScannerModal.tsx new file mode 100644 index 00000000..9fa1a357 --- /dev/null +++ b/apps/site/src/app/admin/participants/components/SearchScannerModal.tsx @@ -0,0 +1,45 @@ +import { useCallback } from "react"; + +import Box from "@cloudscape-design/components/box"; +import Button from "@cloudscape-design/components/button"; +import Modal from "@cloudscape-design/components/modal"; + +import BadgeScanner from "@/lib/admin/BadgeScanner"; + +export interface SearchScannerProps { + onDismiss: () => void; + onConfirm: (value: string) => void; + show: boolean; +} + +function SearchScannerModal({ + onDismiss, + onConfirm, + show, +}: SearchScannerProps) { + const onScanSuccess = useCallback( + (decodedText: string) => { + onConfirm(decodedText); + }, + [onConfirm], + ); + + return ( + + + + } + header="Scan badge" + > + {show && null} />} + + ); +} + +export default SearchScannerModal;