feat: searchable dropdown filter with custom css

bcgov · May 5, 2022 · b24bcb4 · b24bcb4
1 parent f3776c5
commit b24bcb4
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 19 deletions.
diff --git a/app/components/Table/Filters/SearchableDropdownFilter.tsx b/app/components/Table/Filters/SearchableDropdownFilter.tsx
@@ -0,0 +1,75 @@
+import { Autocomplete, Popper, TextField } from "@mui/material";
+import TableFilter, { FilterSettings } from "./TableFilter";
+import { FilterComponent } from "./types";
+
+const FullWidthPopper = (props) => (
+  <Popper
+    {...props}
+    style={{ width: "fit-content", maxWidth: "200px" }}
+    placement="bottom-start"
+  />
+);
+
+export default class SearchableDropdownFilter extends TableFilter<string> {
+  constructor(
+    display: string,
+    argName: string,
+    private options: string[],
+    settings?: FilterSettings
+  ) {
+    super(display, argName, settings);
+  }
+
+  Component: FilterComponent = ({ onChange, filterArgs, disabled }) => {
+    return (
+      <td>
+        <Autocomplete
+          options={this.options}
+          onChange={(evt, option) => onChange(option, this.argName)}
+          freeSolo
+          size="small"
+          PopperComponent={FullWidthPopper}
+          value={filterArgs[this.argName] ?? ""}
+          disabled={disabled}
+          sx={{
+            border: "2px solid #606060",
+            borderRadius: "0.25em",
+            marginTop: "0em",
+            fontFamily: "BC Sans",
+            "&.Mui-focused": {
+              outlineStyle: "solid",
+              outlineWidth: "4px",
+              outlineColor: "#3B99FC",
+              outlineOffset: "1px",
+            },
+          }}
+          renderInput={(params) => {
+            return (
+              <TextField
+                {...params}
+                onChange={(evt) => onChange(evt.target.value, this.argName)}
+                placeholder="Filter"
+                variant="standard"
+                InputProps={{
+                  ...params.InputProps,
+                  disableUnderline: true,
+                  style: {
+                    fontFamily: "BC Sans",
+                    padding: "0",
+                    fontSize: "14.4px",
+                  },
+                }}
+                InputLabelProps={{ shrink: true }}
+                sx={{
+                  padding: "0.3em 0.4em",
+                  borderRadius: "0.10em",
+                  background: "white",
+                }}
+              />
+            );
+          }}
+        />
+      </td>
+    );
+  };
+}
diff --git a/app/components/Table/Filters/index.tsx b/app/components/Table/Filters/index.tsx
@@ -6,6 +6,7 @@ import NumberFilter from "./NumberFilter";
 import SortOnlyFilter from "./SortOnlyFilter";
 import TextFilter from "./TextFilter";
 import YesNoFilter from "./YesNoFilter";
+import SearchableDropdownFilter from "./SearchableDropdownFilter";
 
 export type { FilterArgs, PageArgs, FilterComponent } from "./types";
 export {
@@ -17,4 +18,5 @@ export {
   SortOnlyFilter,
   TextFilter,
   YesNoFilter,
+  SearchableDropdownFilter,
 };
diff --git a/app/pages/cif/projects.tsx b/app/pages/cif/projects.tsx
@@ -10,10 +10,10 @@ import { getProjectRevisionOverviewFormPageRoute } from "pageRoutes";
 import Table from "components/Table";
 import ProjectTableRow from "components/Project/ProjectTableRow";
 import {
-  DisplayOnlyFilter,
   NoHeaderFilter,
   SortOnlyFilter,
   TextFilter,
+  SearchableDropdownFilter,
 } from "components/Table/Filters";
 
 export const ProjectsQuery = graphql`
@@ -57,30 +57,39 @@ export const ProjectsQuery = graphql`
         }
       }
     }
+    allCifUsers {
+      edges {
+        node {
+          fullName
+        }
+      }
+    }
   }
 `;
 
-const tableFilters = [
-  new TextFilter("Project Name", "projectName"),
-  new TextFilter("Operator Trade Name", "operatorTradeName", {
-    orderByPrefix: "OPERATOR_BY_OPERATOR_ID__TRADE_NAME",
-  }),
-  new TextFilter("Proposal Reference", "proposalReference"),
-  new TextFilter("Status", "status", {
-    orderByPrefix: "PROJECT_STATUS_BY_PROJECT_STATUS_ID__NAME",
-  }),
-  new DisplayOnlyFilter("Assigned To"),
-  new SortOnlyFilter("Funding Request", "totalFundingRequest"),
-  new NoHeaderFilter(),
-];
-
 export function Projects({ preloadedQuery }: RelayProps<{}, projectsQuery>) {
-  const { allProjects, pendingNewProjectRevision, session } = usePreloadedQuery(
-    ProjectsQuery,
-    preloadedQuery
-  );
+  const { allProjects, allCifUsers, pendingNewProjectRevision, session } =
+    usePreloadedQuery(ProjectsQuery, preloadedQuery);
   const router = useRouter();
 
+  const tableFilters = [
+    new TextFilter("Project Name", "projectName"),
+    new TextFilter("Operator Trade Name", "operatorTradeName", {
+      orderByPrefix: "OPERATOR_BY_OPERATOR_ID__TRADE_NAME",
+    }),
+    new TextFilter("Proposal Reference", "proposalReference"),
+    new TextFilter("Status", "status", {
+      orderByPrefix: "PROJECT_STATUS_BY_PROJECT_STATUS_ID__NAME",
+    }),
+    new SearchableDropdownFilter(
+      "Assigned To",
+      "assignedTo",
+      allCifUsers.edges.map((e) => e.node.fullName)
+    ),
+    new SortOnlyFilter("Funding Request", "totalFundingRequest"),
+    new NoHeaderFilter(),
+  ];
+
   const [createProject, isCreatingProject] = useCreateProjectMutation();
 
   const handleCreateProject = () => {