diff --git a/app/subscriber/src/features/my-reports/admin/components/ReportSectionGallery.tsx b/app/subscriber/src/features/my-reports/admin/components/ReportSectionGallery.tsx index d86291bbd6..7eea069a3f 100644 --- a/app/subscriber/src/features/my-reports/admin/components/ReportSectionGallery.tsx +++ b/app/subscriber/src/features/my-reports/admin/components/ReportSectionGallery.tsx @@ -1,5 +1,19 @@ +import { Button } from 'components/button'; +import { IReportForm } from 'features/my-reports/interfaces'; +import { useFormikContext } from 'formik'; import React from 'react'; -import { FormikText, FormikTextArea } from 'tno-core'; +import { FaArrowAltCircleRight } from 'react-icons/fa'; +import { useFilters, useFolders } from 'store/hooks'; +import { + Col, + FormikSelect, + FormikText, + FormikTextArea, + getSortableOptions, + IOptionItem, + OptionItem, + Row, +} from 'tno-core'; export interface IReportSectionGalleryProps { index: number; @@ -7,10 +21,98 @@ export interface IReportSectionGalleryProps { export const ReportSectionGallery = React.forwardRef( ({ index, ...rest }, ref) => { + const { values, setFieldValue } = useFormikContext(); + const [{ myFolders: folders }, { findMyFolders }] = useFolders(); + const [{ myFilters: filters }, { findMyFilters }] = useFilters(); + + const [folderOptions, setFolderOptions] = React.useState( + getSortableOptions(folders), + ); + const [filterOptions, setFilterOptions] = React.useState( + getSortableOptions(filters), + ); + + const section = values.sections[index]; + + React.useEffect(() => { + // TODO: Move to parent component so that it doesn't run multiple times. + if (!folders.length) { + findMyFolders() + .then((folders) => { + setFolderOptions(getSortableOptions(folders)); + }) + .catch(() => {}); + } + if (!filters.length) { + findMyFilters() + .then((filters) => { + setFilterOptions(getSortableOptions(filters)); + }) + .catch(() => {}); + } + // Only do on init. + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + return ( <> + + +

+ Choose the data sources to populate this section of your report. You can select from + your saved searches and/or your folders. +

+ + + o.value === section.filterId) ?? ''} + onChange={(newValue: any) => { + const option = newValue as OptionItem; + const filter = filters.find((f) => f.id === option?.value); + if (filter) setFieldValue(`sections.${index}.filter`, filter); + }} + > + + + {section.filter?.description &&

{section.filter?.description}

} + + + o.value === section.folderId) ?? ''} + onChange={(newValue: any) => { + const option = newValue as OptionItem; + const folder = folders.find((f) => f.id === option?.value); + if (folder) setFieldValue(`sections.${index}.folder`, folder); + }} + > + + + {section.folder?.description &&

{section.folder?.description}

} + +
+ ); },