added tags filter

compass/components/Table/ColumnHeader.tsx

@@ -7,6 +7,15 @@ import {
     FunnelIcon,
     XMarkIcon,
 } from "@heroicons/react/24/outline";
+import { Details } from "../Drawer/Drawer";
+import FilterDropdown, { FilterFn } from "./FilterDropdown";
+import DataPoint from "@/utils/models/DataPoint";
+
+interface ColumnHeaderProps<T extends DataPoint> {
+    header: Header<T, any>;
+    details: Details | undefined;
+    setFilterFn?: (field: string, filterFn: FilterFn) => void;
+}
 
 function DropdownCheckIcon({ className }: { className?: string }) {
     return (
@@ -18,7 +27,11 @@ function DropdownCheckIcon({ className }: { className?: string }) {
  * Component for rendering the header of a table column,
  * as well as the dropdown menu for sorting and filtering.
  */
-export function ColumnHeader<T>({ header }: { header: Header<T, unknown> }) {
+export function ColumnHeader<T extends DataPoint>({
+    header,
+    details,
+    setFilterFn,
+}: ColumnHeaderProps<T>) {
     const { column } = header;
 
     const [dropdownType, setDropdownType] = useState<"menu" | "filter" | null>(
@@ -68,23 +81,33 @@ export function ColumnHeader<T>({ header }: { header: Header<T, unknown> }) {
         }
     }, [sortDirection, column]);
 
+    if (!details) {
+        return <div className="border-gray-200 border-y" />;
+    }
+
     return (
         <th
             scope="col"
-            className="border-gray-200 border-y font-medium"
+            className={`border-gray-200 border-y font-medium ${
+                isFiltered ? "bg-purple-50" : ""
+            }`}
             ref={headerRef}
         >
             <div>
                 {header.isPlaceholder ? null : (
                     <div
-                        className="flex p-2 h-auto items-center justify-between px-2 relative cursor-pointer hover:bg-gray-200/50"
+                        className={`flex p-2 h-auto items-center justify-between px-2 relative cursor-pointer hover:bg-gray-200/50`}
                         onClick={() =>
                             setDropdownType((prev) =>
                                 prev === null ? "menu" : null
                             )
                         }
                     >
-                        <div className="flex items-center">
+                        <div
+                            className={`flex items-center ${
+                                isFiltered ? "" : ""
+                            }`}
+                        >
                             {flexRender(
                                 column.columnDef.header,
                                 header.getContext()
@@ -166,20 +189,11 @@ export function ColumnHeader<T>({ header }: { header: Header<T, unknown> }) {
                         ref={filterRef}
                         className="absolute -top-2 left-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg z-10"
                     >
-                        <div className="flex flex-col px-4 py-2">
+                        <FilterDropdown
-                            <span>Contains</span>
+                            column={column}
-                            <input
+                            details={details}
-                                type="text"
+                            setFilterFn={setFilterFn}
-                                value={
+                        />
-                                    (column.getFilterValue() ?? "") as string
-                                }
-                                onChange={(e) => {
-                                    column.setFilterValue(e.target.value);
-                                }}
-                                placeholder="Type a value…"
-                                className="border border-gray-300 rounded p-1"
-                            />
-                        </div>
                     </div>
                 )}
             </div>

compass/components/Table/ServiceTable.tsx

@@ -1,11 +1,10 @@
 import {
-    Bars2Icon,
     CheckCircleIcon,
     DocumentTextIcon,
     ListBulletIcon,
     UserIcon,
 } from "@heroicons/react/24/solid";
-import { Dispatch, SetStateAction, useState } from "react";
+import { Dispatch, SetStateAction, useMemo, useState } from "react";
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 import Table from "@/components/Table/Table";
 import { RowOpenAction } from "@/components/Table/RowOpenAction";
@@ -13,6 +12,7 @@ import Service from "@/utils/models/Service";
 import { Details } from "../Drawer/Drawer";
 import { Tag } from "../TagsInput/Tag";
 import User from "@/utils/models/User";
+import { FilterFn } from "./FilterDropdown";
 
 type ServiceTableProps = {
     data: Service[];
@@ -31,6 +31,8 @@ export default function ServiceTable({
     user,
 }: ServiceTableProps) {
     const columnHelper = createColumnHelper<Service>();
+    const [requirementsFilterFn, setRequirementsFilterFn] =
+        useState<FilterFn>("arrIncludesSome");
 
     const [programPresets, setProgramPresets] = useState([
         "DOMESTIC",
@@ -151,6 +153,13 @@ export default function ServiceTable({
                     </Tag>
                 </div>
             ),
+            filterFn: (row, columnId, filterValue) => {
+                const rowValue = row.getValue(columnId);
+                if (Array.isArray(filterValue)) {
+                    return filterValue.includes(rowValue);
+                }
+                return true;
+            },
         }),
         columnHelper.accessor("requirements", {
             header: () => (
@@ -170,6 +179,7 @@ export default function ServiceTable({
                     )}
                 </div>
             ),
+            filterFn: requirementsFilterFn,
         }),
         columnHelper.accessor("summary", {
             header: () => (
@@ -188,11 +198,18 @@ export default function ServiceTable({
         }),
     ];
 
+    const setFilterFn = (field: string, filterFn: FilterFn) => {
+        if (field === "requirements") {
+            setRequirementsFilterFn(filterFn);
+        }
+    };
+
     return (
         <Table
             data={data}
             setData={setData}
             columns={columns}
+            setFilterFn={setFilterFn}
             details={serviceDetails}
             createEndpoint={`/api/service/create?uuid=${user?.uuid}`}
             isAdmin={user?.role === "ADMIN"}

compass/components/Table/Table.tsx

@@ -10,7 +10,12 @@ import {
     getSortedRowModel,
     SortingState,
 } from "@tanstack/react-table";
-import { ChangeEvent, useState, Dispatch, SetStateAction } from "react";
+import {
+    ChangeEvent,
+    useState,
+    Dispatch,
+    SetStateAction,
+} from "react";
 import { TableSearch } from "@/components/Table/TableSearch";
 import { RowOptionMenu } from "@/components/Table/RowOptionMenu";
 import { ColumnHeader } from "@/components/Table/ColumnHeader";
@@ -18,11 +23,13 @@ import CreateDrawer from "@/components/Drawer/CreateDrawer";
 import { Details } from "@/components/Drawer/Drawer";
 import DataPoint from "@/utils/models/DataPoint";
 import { rankItem } from "@tanstack/match-sorter-utils";
+import { FilterFn } from "./FilterDropdown";
 
 type TableProps<T extends DataPoint> = {
     data: T[];
     setData: Dispatch<SetStateAction<T[]>>;
     columns: ColumnDef<T, any>[];
+    setFilterFn?: (field: string, filterFn: FilterFn) => void;
     details: Details[];
     createEndpoint: string;
     isAdmin?: boolean;
@@ -74,6 +81,7 @@ export default function Table<T extends DataPoint>({
     data,
     setData,
     columns,
+    setFilterFn,
     details,
     createEndpoint,
     isAdmin = false,
@@ -182,7 +190,14 @@ export default function Table<T extends DataPoint>({
                     {table.getHeaderGroups().map((headerGroup) => (
                         <tr key={headerGroup.id}>
                             {headerGroup.headers.map((header, i) => (
-                                <ColumnHeader header={header} key={header.id} />
+                                <ColumnHeader
+                                    header={header}
+                                    details={details.find(
+                                        (d) => d.key === header.column.id
+                                    )}
+                                    setFilterFn={setFilterFn}
+                                    key={header.id}
+                                />
                             ))}
                         </tr>
                     ))}
@@ -199,9 +214,11 @@ export default function Table<T extends DataPoint>({
                                 {row.getVisibleCells().map((cell, i) => (
                                     <td
                                         key={cell.id}
-                                        className={
+                                        className={`[&:nth-child(n+3)]:border-x pl-2 relative first:text-left first:px-0 last:border-none ${
-                                            "[&:nth-child(n+3)]:border-x relative first:text-left first:px-0 last:border-none"
+                                            cell.column.getIsFiltered()
-                                        }
+                                                ? "bg-purple-50"
+                                                : ""
+                                        }`}
                                     >
                                         {flexRender(
                                             cell.column.columnDef.cell,

compass/components/Table/UserTable.tsx

@@ -10,6 +10,7 @@ import { RowOpenAction } from "@/components/Table/RowOpenAction";
 import User from "@/utils/models/User";
 import { Details } from "../Drawer/Drawer";
 import { Tag } from "../TagsInput/Tag";
+import { FilterFn } from "./FilterDropdown";
 
 type UserTableProps = {
     data: User[];
@@ -24,6 +25,8 @@ type UserTableProps = {
  */
 export default function UserTable({ data, setData, user }: UserTableProps) {
     const columnHelper = createColumnHelper<User>();
+    const [programFilterFn, setProgramFilterFn] =
+        useState<FilterFn>("arrIncludesSome");
 
     const [rolePresets, setRolePresets] = useState([
         "ADMIN",
@@ -103,6 +106,7 @@ export default function UserTable({ data, setData, user }: UserTableProps) {
                     </Tag>
                 </div>
             ),
+            filterFn: "arrIncludesSome",
         }),
         columnHelper.accessor("email", {
             header: () => (
@@ -133,14 +137,22 @@ export default function UserTable({ data, setData, user }: UserTableProps) {
                     )}
                 </div>
             ),
+            filterFn: programFilterFn,
         }),
     ];
 
+    const setFilterFn = (field: string, filterFn: FilterFn) => {
+        if (field === "program") {
+            setProgramFilterFn(filterFn);
+        }
+    };
+
     return (
-        <Table<User>
+        <Table
             data={data}
             setData={setData}
             columns={columns}
+            setFilterFn={setFilterFn}
             details={userDetails}
             createEndpoint={`/api/user/create?uuid=${user?.uuid}`}
             isAdmin={user?.role === "ADMIN"}

compass/components/TagsInput/Index.tsx

@@ -3,6 +3,7 @@ import "tailwindcss/tailwind.css";
 import { TagsArray } from "./TagsArray";
 import { TagDropdown } from "./TagDropdown";
 import { CreateNewTagAction } from "./CreateNewTagAction";
+import { FilterFn } from "../Table/FilterDropdown";
 
 interface TagsInputProps {
     presetOptions: string[];
@@ -10,6 +11,8 @@ interface TagsInputProps {
     setPresetOptions: Dispatch<SetStateAction<string[]>>;
     onTagsChange?: (tags: Set<string>) => void;
     singleValue?: boolean;
+    cellSelectedPreset?: boolean;
+    filterState?: [FilterFn | null, Dispatch<SetStateAction<FilterFn | null>>];
 }
 
 const TagsInput: React.FC<TagsInputProps> = ({
@@ -18,9 +21,11 @@ const TagsInput: React.FC<TagsInputProps> = ({
     setPresetOptions,
     onTagsChange,
     singleValue = false,
+    cellSelectedPreset = false,
+    filterState,
 }) => {
     const [inputValue, setInputValue] = useState("");
-    const [cellSelected, setCellSelected] = useState(false);
+    const [cellSelected, setCellSelected] = useState(cellSelectedPreset);
 
     // TODO: Add tags to the database and remove the presetValue and lowercasing
     const [tags, setTags] = useState<Set<string>>(new Set(presetValue));
@@ -31,7 +36,7 @@ const TagsInput: React.FC<TagsInputProps> = ({
     const dropdown = useRef<HTMLDivElement>(null);
 
     const handleClick = () => {
-        if (!cellSelected) {
+        if (!cellSelectedPreset) {
             setCellSelected(true);
             setTimeout(() => {
                 window.addEventListener("click", handleOutsideClick);
@@ -138,19 +143,42 @@ const TagsInput: React.FC<TagsInputProps> = ({
         }
     };
 
+    const FilterSelect = () => {
+        const [filter, setFilter] = filterState ?? [null, null];
+        return (
+            filter != null &&
+            setFilter != null && (
+                    <select
+                        value={filter}
+                        onChange={(e) => {
+                            setFilter(e.target.value as FilterFn);
+                        }}
+                        className="cursor-pointer bg-inherit rounded py-0 px-1"
+                    >
+                        <option value="arrIncludesSome">Includes</option>
+                        <option value="arrIncludesAll">Includes All</option>
+                    </select>
+            )
+        );
+    };
+
     return (
         <div className="cursor-pointer" onClick={handleClick}>
-            {!cellSelected ? (
+            {!cellSelectedPreset ? (
-                <TagsArray
+                <>
-                    active={true}
+                    <FilterSelect />
-                    handleDelete={handleDeleteTag}
+                    <TagsArray
-                    tags={tags}
+                        active={true}
-                />
+                        handleDelete={handleDeleteTag}
+                        tags={tags}
+                    />
+                </>
             ) : (
                 <div ref={dropdown}>
                     <div className="absolute w-64 z-50 ml-1 mt-5">
                         <div className="rounded-md border border-gray-200 shadow">
-                            <div className="flex flex-wrap rounded-t-md items-center gap-2 bg-gray-50 p-2">
+                            <div className="flex flex-col flex-wrap rounded-t-md items-start justify-center gap-2 bg-gray-50 p-2">
+                                <FilterSelect />
                                 <TagsArray
                                     handleDelete={handleDeleteTag}
                                     active

compass/package-lock.json

@@ -13,6 +13,7 @@
                 "@supabase/supabase-js": "^2.42.3",
                 "@tanstack/match-sorter-utils": "^8.15.1",
                 "@tanstack/react-table": "^8.15.0",
+                "@tanstack/table-core": "^8.21.3",
                 "bufferutil": "^4.0.8",
                 "next": "^13.5.8",
                 "react": "^18",
@@ -655,7 +656,7 @@
                 "react-dom": ">=16.8"
             }
         },
-        "node_modules/@tanstack/table-core": {
+        "node_modules/@tanstack/react-table/node_modules/@tanstack/table-core": {
             "version": "8.21.2",
             "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.2.tgz",
             "integrity": "sha512-uvXk/U4cBiFMxt+p9/G7yUWI/UbHYbyghLCjlpWZ3mLeIZiUBSKcUnw9UnKkdRz7Z/N4UBuFLWQdJCjUe7HjvA==",
@@ -668,6 +669,19 @@
                 "url": "https://github.com/sponsors/tannerlinsley"
             }
         },
+        "node_modules/@tanstack/table-core": {
+            "version": "8.21.3",
+            "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.3.tgz",
+            "integrity": "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/tannerlinsley"
+            }
+        },
         "node_modules/@types/cookie": {
             "version": "0.6.0",
             "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",

compass/package.json

@@ -15,6 +15,7 @@
         "@supabase/supabase-js": "^2.42.3",
         "@tanstack/match-sorter-utils": "^8.15.1",
         "@tanstack/react-table": "^8.15.0",
+        "@tanstack/table-core": "^8.21.3",
         "bufferutil": "^4.0.8",
         "next": "^13.5.8",
         "react": "^18",