diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Modal.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Modal.tsx index 78721f0ab9..e6008a3f90 100644 --- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Modal.tsx +++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Modal.tsx @@ -13,6 +13,7 @@ import ListItemText from "@mui/material/ListItemText"; import ListSubheader from "@mui/material/ListSubheader"; import MenuItem from "@mui/material/MenuItem"; import Select, { SelectChangeEvent, SelectProps } from "@mui/material/Select"; +import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; import capitalize from "lodash/capitalize"; import merge from "lodash/merge"; @@ -38,6 +39,16 @@ interface FileTaggingModalProps { setShowModal: (value: React.SetStateAction) => void; } +const ListHeader = styled(Box)(({ theme }) => ({ + display: "flex", + justifyContent: "space-between", + alignItems: "center", + padding: theme.spacing(1, 1.5), + background: theme.palette.grey[200], + // Offset default padding of MuiList + margin: "-8px 0 8px", +})); + export const FileTaggingModal = ({ uploadedFiles, fileList, @@ -80,17 +91,9 @@ export const FileTaggingModal = ({ > - + What do these files show? - - Select all document types that apply - {uploadedFiles.map((slot) => ( @@ -147,6 +150,7 @@ const SelectMultiple = (props: SelectMultipleProps) => { const initialTags = getTagsForSlot(uploadedFile.id, fileList); const [tags, setTags] = useState(initialTags); const previousTags = usePrevious(tags); + const [open, setOpen] = React.useState(false); const handleChange = (event: SelectChangeEvent) => { const { @@ -157,6 +161,12 @@ const SelectMultiple = (props: SelectMultipleProps) => { typeof value === "string" ? value.split(",") : value, ); }; + const handleClose = () => { + setOpen(false); + }; + const handleOpen = () => { + setOpen(true); + }; const updateFileListWithTags = ( previousTags: string[] | undefined, @@ -214,6 +224,9 @@ const SelectMultiple = (props: SelectMultipleProps) => { multiple value={tags} onChange={handleChange} + open={open} + onClose={handleClose} + onOpen={handleOpen} IconComponent={ArrowIcon} input={} inputProps={{ @@ -267,14 +280,27 @@ const SelectMultiple = (props: SelectMultipleProps) => { }, }} > + + + + Select all labels that apply + + + + {(Object.keys(fileList) as Array) .filter((fileListCategory) => fileList[fileListCategory].length > 0) .map((fileListCategory) => { return [ - {`${capitalize(fileListCategory)} files`} + + {`${capitalize(fileListCategory)} files`} + , ...fileList[fileListCategory].map((fileType) => { return [