Merge pull request #7 from UKDanceBlue/sort-filter-people

Add filtering to the people table

.github/workflows/docker-build.yml

@@ -9,8 +9,8 @@ on:
 
 env:
   REGISTRY: ghcr.io
-  PORTAL_IMAGE_NAME: app-portal
-  SERVER_IMAGE_NAME: app-server
+  PORTAL_IMAGE_NAME: ukdanceblue/app-portal
+  SERVER_IMAGE_NAME: ukdanceblue/app-server
 
 jobs:
   build-and-push-portal-image:

packages/common/lib/graphql-client-admin/graphql.ts

@@ -889,6 +889,7 @@ export const PersonResolverStringFilterKeys = {
   CommitteeRole: 'committeeRole',
   DbRole: 'dbRole',
   Email: 'email',
+  Linkblue: 'linkblue',
   Name: 'name'
 } as const;
 

packages/portal/src/elements/components/FilterDropdown.tsx

@@ -0,0 +1,39 @@
+import type { StringFilterItemInterface } from "@ukdanceblue/common";
+import { StringComparator } from "@ukdanceblue/common";
+import type { InputRef } from "antd";
+import Search from "antd/es/input/Search";
+
+export function FilterSearchDropdown<Field extends string>({
+  updateFilter,
+  clearFilter,
+  field,
+  placeholderText = `Search ${field}`,
+  inputRef,
+}: {
+  updateFilter: (
+    field: Field,
+    filter: StringFilterItemInterface<Field>
+  ) => void;
+  clearFilter: (field: Field) => void;
+  field: Field;
+  placeholderText?: string | undefined | false;
+  inputRef?: (ref: InputRef) => void;
+}) {
+  return (
+    <Search
+      placeholder={placeholderText || undefined}
+      onSearch={(value) => {
+        if (value) {
+          updateFilter(field, {
+            comparison: StringComparator.ILIKE,
+            field,
+            value: `%${value}%`,
+          });
+        } else {
+          clearFilter(field);
+        }
+      }}
+      ref={inputRef}
+    />
+  );
+}

packages/portal/src/elements/tables/PeopleTable.tsx

@@ -1,8 +1,12 @@
 import { EditOutlined, EyeOutlined } from "@ant-design/icons";
 import { useListQuery } from "@hooks/useListQuery";
+import { useMakeSearchFilterProps } from "@hooks/useMakeSearchFilterProps";
 import { useQueryStatusWatcher } from "@hooks/useQueryStatusWatcher";
 import { useNavigate } from "@tanstack/react-router";
+import type { CommitteeIdentifier } from "@ukdanceblue/common";
 import {
+  CommitteeRole,
+  DbRole,
   SortDirection,
   committeeNames,
   stringifyDbRole,
@@ -59,35 +63,36 @@ const peopleTableDocument = graphql(/* GraphQL */ `
 
 export const PeopleTable = () => {
   const navigate = useNavigate();
-  const { queryOptions, updatePagination, clearSorting, pushSorting } =
-    useListQuery(
-      {
-        initPage: 1,
-        initPageSize: 20,
-        initSorting: [],
-      },
-      {
-        allFields: [
-          "name",
-          "email",
-          "linkblue",
-          "dbRole",
-          "committeeRole",
-          "committeeName",
-        ],
-        dateFields: [],
-        isNullFields: [],
-        numericFields: [],
-        oneOfFields: [],
-        stringFields: [
-          "name",
-          "email",
-          "dbRole",
-          "committeeRole",
-          "committeeName",
-        ],
-      }
-    );
+  const {
+    queryOptions,
+    updatePagination,
+    clearSorting,
+    pushSorting,
+    clearFilters,
+    updateFilter,
+    clearFilter,
+  } = useListQuery(
+    {
+      initPage: 1,
+      initPageSize: 20,
+      initSorting: [],
+    },
+    {
+      allFields: [
+        "name",
+        "email",
+        "linkblue",
+        "dbRole",
+        "committeeRole",
+        "committeeName",
+      ],
+      dateFields: [],
+      isNullFields: [],
+      numericFields: [],
+      oneOfFields: ["dbRole", "committeeRole", "committeeName"],
+      stringFields: ["name", "email", "linkblue"],
+    }
+  );
 
   const [{ fetching, error, data: peopleDocument }] = useQuery({
     query: peopleTableDocument,
@@ -109,7 +114,7 @@ export const PeopleTable = () => {
       <Table
         dataSource={listPeopleData ?? undefined}
         loading={fetching}
-        onChange={(pagination, _filters, sorter, _extra) => {
+        onChange={(pagination, filters, sorter, _extra) => {
           updatePagination({
             page: pagination.current,
             pageSize: pagination.pageSize,
@@ -133,6 +138,36 @@ export const PeopleTable = () => {
                   : SortDirection.DESCENDING,
             });
           }
+          clearFilters();
+          for (const key of Object.keys(filters)) {
+            const value = filters[key];
+            if (!value) {
+              continue;
+            }
+            switch (key) {
+              case "dbRole": {
+                updateFilter("dbRole", {
+                  field: "dbRole",
+                  value: value.map((v) => v.toString()),
+                });
+                break;
+              }
+              case "committeeRole": {
+                updateFilter("committeeRole", {
+                  field: "committeeRole",
+                  value: value.map((v) => v.toString()),
+                });
+                break;
+              }
+              case "committeeName": {
+                updateFilter("committeeName", {
+                  field: "committeeName",
+                  value: value.map((v) => v.toString()),
+                });
+                break;
+              }
+            }
+          }
         }}
         pagination={
           peopleDocument
@@ -152,18 +187,21 @@ export const PeopleTable = () => {
             dataIndex: "name",
             sorter: true,
             sortDirections: ["ascend", "descend"],
+            ...useMakeSearchFilterProps("name", updateFilter, clearFilter),
           },
           {
             title: "Email",
             dataIndex: "email",
             sorter: true,
             sortDirections: ["ascend", "descend"],
+            ...useMakeSearchFilterProps("email", updateFilter, clearFilter),
           },
           {
             title: "Linkblue",
             dataIndex: "linkblue",
             sorter: true,
             sortDirections: ["ascend", "descend"],
+            ...useMakeSearchFilterProps("linkblue", updateFilter, clearFilter),
           },
           {
             title: "Role",
@@ -173,6 +211,10 @@ export const PeopleTable = () => {
             },
             sorter: true,
             sortDirections: ["ascend", "descend"],
+            filters: Object.values(DbRole).map((role) => ({
+              text: stringifyDbRole(role),
+              value: role,
+            })),
           },
           {
             title: "Committee Role",
@@ -182,6 +224,10 @@ export const PeopleTable = () => {
             },
             sorter: true,
             sortDirections: ["ascend", "descend"],
+            filters: Object.values(CommitteeRole).map((role) => ({
+              text: role,
+              value: role,
+            })),
           },
           {
             title: "Committee Name",
@@ -193,6 +239,10 @@ export const PeopleTable = () => {
             },
             sorter: true,
             sortDirections: ["ascend", "descend"],
+            filters: Object.keys(committeeNames).map((committeeIdentifier) => ({
+              text: committeeNames[committeeIdentifier as CommitteeIdentifier],
+              value: committeeIdentifier,
+            })),
           },
           {
             title: "Actions",

packages/portal/src/elements/tables/TeamsTable.tsx

@@ -1,14 +1,14 @@
-import { EditOutlined, EyeOutlined, SearchOutlined } from "@ant-design/icons";
+import { EditOutlined, EyeOutlined } from "@ant-design/icons";
 import { useListQuery } from "@hooks/useListQuery";
+import { useMakeSearchFilterProps } from "@hooks/useMakeSearchFilterProps";
 import { useQueryStatusWatcher } from "@hooks/useQueryStatusWatcher";
 import { useNavigate } from "@tanstack/react-router";
-import { SortDirection, StringComparator } from "@ukdanceblue/common";
+import { SortDirection } from "@ukdanceblue/common";
 import {
   getFragmentData,
   graphql,
 } from "@ukdanceblue/common/graphql-client-admin";
 import { Button, Flex, Table } from "antd";
-import Search from "antd/es/input/Search";
 import { useQuery } from "urql";
 
 const teamsTableQueryDocument = graphql(/* GraphQL */ `
@@ -103,27 +103,7 @@ export const TeamsTable = () => {
           title: "Name",
           dataIndex: "name",
           sorter: true,
-          filterDropdown: () => (
-            <Search
-              placeholder="Search name"
-              onSearch={(value) => {
-                if (value) {
-                  updateFilter("name", {
-                    comparison: StringComparator.ILIKE,
-                    field: "name",
-                    value: `%${value}%`,
-                  });
-                } else {
-                  clearFilter("name");
-                }
-              }}
-            />
-          ),
-          filterIcon: (filtered) => (
-            <SearchOutlined
-              style={{ color: filtered ? "#1890ff" : undefined }}
-            />
-          ),
+          ...useMakeSearchFilterProps("name", updateFilter, clearFilter),
         },
         {
           title: "Type",

packages/portal/src/hooks/useMakeSearchFilterProps.tsx

@@ -0,0 +1,39 @@
+import { SearchOutlined } from "@ant-design/icons";
+import { FilterSearchDropdown } from "@elements/components/FilterDropdown";
+import type { StringFilterItemInterface } from "@ukdanceblue/common";
+import type { InputRef } from "antd";
+import { useRef } from "react";
+
+export function useMakeSearchFilterProps<Field extends string>(
+  field: Field,
+  updateFilter: (
+    field: Field,
+    filter: StringFilterItemInterface<Field>
+  ) => void,
+  clearFilter: (field: Field) => void,
+  placeholderText?: string | false
+) {
+  const focusRef = useRef<InputRef | undefined>(undefined);
+
+  return {
+    filterDropdown: () => (
+      <FilterSearchDropdown
+        updateFilter={updateFilter}
+        clearFilter={clearFilter}
+        field={field}
+        placeholderText={placeholderText}
+        inputRef={(inputRef) => {
+          focusRef.current = inputRef;
+        }}
+      />
+    ),
+    filterIcon: (filtered: boolean) => (
+      <SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
+    ),
+    onFilterDropdownOpenChange: () => {
+      setTimeout(() => {
+        focusRef.current?.focus();
+      }, 100);
+    },
+  };
+}

packages/server/schema.graphql

@@ -780,6 +780,7 @@ enum PersonResolverStringFilterKeys {
   committeeRole
   dbRole
   email
+  linkblue
   name
 }
 

packages/server/src/resolvers/PersonResolver.ts

@@ -83,7 +83,14 @@ class ListPeopleArgs extends FilteredListQueryArgs("PersonResolver", {
     "committeeRole",
     "committeeName",
   ],
-  string: ["name", "email", "dbRole", "committeeRole", "committeeName"],
+  string: [
+    "name",
+    "email",
+    "linkblue",
+    "dbRole",
+    "committeeRole",
+    "committeeName",
+  ],
 }) {}
 @InputType()
 class CreatePersonInput {

packages/server/src/resolvers/list-query-args/getSequelizeOpForComparator.ts

@@ -28,7 +28,7 @@ export function getSequelizeOpForComparator(
       return negated ? Op.notLike : Op.like;
     }
     case Comparator.ILIKE: {
-      return negated ? Op.notLike : Op.like;
+      return negated ? Op.notILike : Op.iLike;
     }
     case Comparator.REGEX: {
       return negated ? Op.notRegexp : Op.regexp;