add autocomplete and team filter

theopensystemslab · Nov 22, 2024 · cbdc1f8 · cbdc1f8
1 parent b044011
commit cbdc1f8
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 26 deletions.
diff --git a/editor.planx.uk/src/@planx/components/ExternalPortal/Editor.tsx b/editor.planx.uk/src/@planx/components/ExternalPortal/Editor.tsx
@@ -1,29 +1,47 @@
+import Autocomplete from "@mui/material/Autocomplete";
+import ListSubheader from "@mui/material/ListSubheader";
 import MenuItem from "@mui/material/MenuItem";
+import { styled } from "@mui/material/styles";
 import {
   ComponentType as TYPES,
   NodeTag,
 } from "@opensystemslab/planx-core/types";
 import { useFormik } from "formik";
-import React from "react";
+import React, { useState } from "react";
+import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 import { ComponentTagSelect } from "ui/editor/ComponentTagSelect";
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
-import SelectInput from "ui/editor/SelectInput/SelectInput";
+import { SelectMultiple, StyledTextField } from "ui/shared/SelectMultiple";
 
 import { ICONS } from "../shared/icons";
 
 interface Flow {
   id: string;
-  text: string;
+  slug: string;
+  name: string;
+  team: string;
 }
 
+const AutocompleteSubHeader = styled(ListSubheader)(({ theme }) => ({
+  fontWeight: FONT_WEIGHT_SEMI_BOLD,
+  fontSize: theme.typography.subtitle1.fontSize,
+  backgroundColor: theme.palette.background.dark,
+  color: theme.palette.getContrastText(theme.palette.background.dark),
+  margin: 0,
+}));
+
 const ExternalPortalForm: React.FC<{
   id?: string;
   flowId?: string;
   handleSubmit?: (val: any) => void;
   flows?: Array<Flow>;
   tags?: NodeTag[];
 }> = ({ id, handleSubmit, flowId = "", flows = [], tags = [] }) => {
+  const [teamArray, setTeamArray] = useState<string[] | undefined>();
+
+  const uniqueTeamArray = [...new Set(flows.map((item) => item.team))];
+
   const formik = useFormik({
     initialValues: {
       flowId,
@@ -51,26 +69,61 @@ const ExternalPortalForm: React.FC<{
             flow that it references.
           </span>
         </ModalSectionContent>
+        <ModalSectionContent title="Select a team">
+          <SelectMultiple
+            onChange={(_options, event) => setTeamArray([...event])}
+            options={uniqueTeamArray}
+            placeholder=""
+          />
+        </ModalSectionContent>
         <ModalSectionContent title="Pick a flow">
-          <SelectInput
-            data-testid="flowId"
-            name="flowId"
-            value={formik.values.flowId}
-            onChange={formik.handleChange}
-          >
-            {!id && <option value="" />}
-            {flows.map((flow) => {
-              return (
-                <MenuItem
-                  sx={(theme) => ({ fontSize: theme.typography.body3 })}
-                  key={flow.id}
-                  value={flow.id}
-                >
-                  {flow.text}
-                </MenuItem>
-              );
+          <Autocomplete
+            role="status"
+            aria-atomic={true}
+            aria-live="polite"
+            value={
+              flows.find((flow) => flow.id === formik.values.flowId) || null
+            }
+            onChange={(_event, newValue: Flow | null) => {
+              formik.setFieldValue("flowId", newValue?.id || "");
+            }}
+            options={flows.filter((flow) => {
+              if (teamArray) return teamArray?.includes(flow.team);
+              return true;
             })}
-          </SelectInput>
+            groupBy={(option) => option.team}
+            getOptionLabel={(option) => option.name}
+            renderOption={(props, option) => (
+              <MenuItem
+                {...props}
+                sx={(theme) => ({ paddingY: theme.spacing(1.25) })}
+              >
+                {option.name}
+              </MenuItem>
+            )}
+            renderInput={(params) => (
+              <StyledTextField
+                {...params}
+                InputProps={{
+                  ...params.InputProps,
+                  notched: false,
+                }}
+              />
+            )}
+            renderGroup={(params) => (
+              <>
+                <AutocompleteSubHeader>{params.group}</AutocompleteSubHeader>
+                {params.children}
+              </>
+            )}
+            slot="popper"
+            slotProps={{
+              popper: {
+                placement: "bottom-start",
+                modifiers: [{ name: "flip", enabled: false }],
+              },
+            }}
+          />
         </ModalSectionContent>
         <ComponentTagSelect
           value={formik.values.tags}

diff --git a/editor.planx.uk/src/routes/flow.tsx b/editor.planx.uk/src/routes/flow.tsx
@@ -34,8 +34,10 @@ const getExternalPortals = async () => {
         flows(order_by: { slug: asc }) {
           id
           slug
+          name
           team {
             slug
+            name
           }
         }
       }
@@ -48,11 +50,21 @@ const getExternalPortals = async () => {
         flow.team &&
         !window.location.pathname.includes(`${flow.team.slug}/${flow.slug}`),
     )
-    .map(({ id, team, slug }: Flow) => ({
+    .map(({ id, team, slug, name }: Flow) => ({
       id,
-      text: [team.slug, slug].join("/"),
+      name,
+      slug,
+      team: team.name,
     }))
-    .sort(sortFlows);
+    .sort((a, b) => {
+      if (a.team > b.team) {
+        return 1;
+      } else if (b.team > a.team) {
+        return -1;
+      } else {
+        return 0;
+      }
+    });
 };
 
 const newNode = route(async (req) => {

diff --git a/editor.planx.uk/src/ui/shared/SelectMultiple.tsx b/editor.planx.uk/src/ui/shared/SelectMultiple.tsx
@@ -55,7 +55,7 @@ const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({
   },
 })) as typeof Autocomplete;
 
-const StyledTextField = styled(TextField)(({ theme }) => ({
+export const StyledTextField = styled(TextField)(({ theme }) => ({
   "&:focus-within": {
     ...borderedFocusStyle,
     [`& .${outlinedInputClasses.notchedOutline}`]: {
@@ -114,7 +114,7 @@ export const CustomCheckbox = styled("span")(({ theme }) => ({
 export function SelectMultiple<T>(props: Props<T>) {
   // MUI doesn't pass the Autocomplete value along to the TextField automatically
   const isSelectEmpty = !props.value?.length;
-  const placeholder = isSelectEmpty ? props.placeholder : undefined
+  const placeholder = isSelectEmpty ? props.placeholder : undefined;
 
   return (
     <FormControl sx={{ display: "flex", flexDirection: "column" }}>