Merge pull request #153 from ubc-biztech/reg-table-filters

setup filtering on registration table
ubc-biztech · Mar 7, 2025 · 6cb2f3d · 6cb2f3d
2 parents 8626e66 + 5acf820
commit 6cb2f3d
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/src/components/RegistrationTable/TableHeader.tsx b/src/components/RegistrationTable/TableHeader.tsx
@@ -45,21 +45,31 @@ interface TableHeaderProps {
   isQrReaderToggled: boolean;
   setQrReaderToggled: Dispatch<SetStateAction<boolean>>;
   refreshTable: () => Promise<void>;
+  onFilterChange: (value: SelectValue) => void;
 }
 
+type SelectValue = 'attendees' | 'partners' | 'waitlisted';
+
 export const TableHeader: React.FC<TableHeaderProps> = ({
   table,
   filterButtonRef,
   rowSelection,
   isQrReaderToggled,
   setQrReaderToggled,
   refreshTable,
+  onFilterChange,
 }) => {
   const selectedRowsCount = Object.keys(rowSelection).length;
   const [showMassUpdateStatus, setShowMassUpdateStatus] = useState(false);
   const [showCreateTeam, setShowCreateTeam] = useState(false);
   const [newStatus, setNewStatus] = useState("");
   const [teamName, setTeamName] = useState("");
+  const [selectedValue, setSelectedValue] = useState<SelectValue>('attendees'); 
+
+  const handleSelectChange = (value: SelectValue) => {
+    setSelectedValue(value);
+    onFilterChange(value);
+  };
 
   const getSelectedRows = () => {
     return table.getFilteredSelectedRowModel().rows;
@@ -165,7 +175,7 @@ export const TableHeader: React.FC<TableHeaderProps> = ({
           setQrReaderToggled={setQrReaderToggled}
           refreshTable={refreshTable}
         />
-        <Select>
+        <Select value={selectedValue} onValueChange={handleSelectChange}>
           <SelectTrigger className="w-[180px] bg-login-form-card text-white">
             <SelectValue placeholder="Attendees" />
           </SelectTrigger>

diff --git a/src/components/RegistrationTable/data-table.tsx b/src/components/RegistrationTable/data-table.tsx
@@ -32,6 +32,8 @@ export function DataTable({
   const [pageSize, setPageSize] = useState(10);
   const [isClient, setIsClient] = useState(false);
   const [isQrReaderToggled, setQrReaderToggled] = useState(false);
+  const [filteredData, setFilteredData] = useState(initialData);
+  const [filterValue, setFilterValue] = useState<'attendees' | 'partners' | 'waitlisted'>('attendees');
 
   const refreshTable = async () => {
     try {
@@ -53,12 +55,27 @@ export function DataTable({
 
   const filterButtonRef = useRef<HTMLButtonElement>(null);
 
+  useEffect(() => {
+    const filtered = data.filter(attendee => {
+      switch (filterValue) {
+        case 'partners':
+          return attendee.isPartner === true;
+        case 'waitlisted':
+          return attendee.registrationStatus === 'waitlisted';
+        case 'attendees':
+        default:
+          return !attendee.isPartner && attendee.registrationStatus !== 'waitlisted';
+      }
+    });
+    setFilteredData(filtered);
+  }, [data, filterValue]);
+
   useEffect(() => {
     setIsClient(true);
   }, []);
 
   const table = useReactTable<Attendee>({
-    data,
+    data: filteredData,
     columns: allColumns,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
@@ -115,6 +132,7 @@ export function DataTable({
         isQrReaderToggled={isQrReaderToggled}
         setQrReaderToggled={setQrReaderToggled}
         refreshTable={refreshTable}
+        onFilterChange={setFilterValue}
       />
 
       <TableComponent>