diff --git a/apps/frontend/components/Filters/MultiSelect.tsx b/apps/frontend/components/Filters/MultiSelect.tsx index 1623be3f..a793f5b1 100644 --- a/apps/frontend/components/Filters/MultiSelect.tsx +++ b/apps/frontend/components/Filters/MultiSelect.tsx @@ -23,6 +23,7 @@ const MenuProps = { }; interface MultiSelectProps { + value?: string[]; options: string[]; onChange: (v: string[]) => void; placeholder: string; @@ -42,6 +43,7 @@ interface MultiSelectProps { | 'defaultValue' > >; + disableMulti?: boolean; } const MultiSelect = ({ @@ -52,9 +54,11 @@ const MultiSelect = ({ formatPrefix, width = 200, selectProps = {}, + value: propValue = [], + disableMulti = false, }: MultiSelectProps) => { const intl = useIntl(); - const [value, setValue] = React.useState([]); + const [value, setValue] = React.useState(propValue); React.useEffect(() => { const filtered = value.filter(x => options.includes(x)); @@ -79,8 +83,9 @@ const MultiSelect = ({ // On autofill we get a stringified value. const newVal = typeof newValue === 'string' ? newValue.split(',') : newValue; - setValue(newVal); - onChange(newVal); + const keepLast = disableMulti ? [newVal[newVal.length - 1]] : newVal; + setValue(keepLast); + onChange(keepLast); }; return ( @@ -109,19 +114,21 @@ const MultiSelect = ({ MenuProps={MenuProps} {...selectProps} > - - 0 && value.length < options.length} - /> - - - - } - /> - + {!disableMulti && ( + + 0 && value.length < options.length} + /> + + + + } + /> + + )} {options.map(option => ( -1} /> diff --git a/apps/frontend/components/Filters/RegionFilters.tsx b/apps/frontend/components/Filters/RegionFilters.tsx index d679d570..b98af9c0 100644 --- a/apps/frontend/components/Filters/RegionFilters.tsx +++ b/apps/frontend/components/Filters/RegionFilters.tsx @@ -29,12 +29,14 @@ interface Props { value: Region; onChange: (regionValues: Region) => void; disableAll?: boolean; + disableMulti?: boolean; } export const RegionFilters = ({ value, onChange, disableAll, + disableMulti, }: Props): JSX.Element => { const { user } = useAuth(); const theme = useTheme(); @@ -67,6 +69,7 @@ export const RegionFilters = ({ { onChange({ province: v, district: [], commune: [] }); @@ -74,6 +77,7 @@ export const RegionFilters = ({ placeholder="common.province" allSelectedText="validation_search_params.all-province" formatPrefix="province" + disableMulti={disableMulti} selectProps={{ disabled: disableAll === true || user === undefined ? true : false, startAdornment: ( @@ -94,6 +98,7 @@ export const RegionFilters = ({ { onChange({ ...value, district: v, commune: [] }); @@ -101,6 +106,7 @@ export const RegionFilters = ({ placeholder="common.district" allSelectedText="validation_search_params.all-district" formatPrefix="district" + disableMulti={disableMulti} selectProps={{ disabled: disableAll === true || value.province.length === 0, startAdornment: ( @@ -121,6 +127,7 @@ export const RegionFilters = ({ { onChange({ ...value, commune: v }); @@ -128,6 +135,7 @@ export const RegionFilters = ({ placeholder="common.commune" allSelectedText="validation_search_params.all-commune" formatPrefix="commune" + disableMulti={disableMulti} selectProps={{ disabled: disableAll === true || value.district.length === 0, startAdornment: ( diff --git a/apps/frontend/components/FormValidation/FloodFormValidation/FloodFormType.ts b/apps/frontend/components/FormValidation/FloodFormValidation/FloodFormType.ts index f02020cd..b521ab1d 100644 --- a/apps/frontend/components/FormValidation/FloodFormValidation/FloodFormType.ts +++ b/apps/frontend/components/FormValidation/FloodFormValidation/FloodFormType.ts @@ -3,9 +3,9 @@ import { Dayjs } from 'dayjs'; export type FloodFormType = { region: { - province: string; - district: string; - commune: string; + province: string[]; + district: string[]; + commune: string[]; }; interviewer: string; disTyp: string; diff --git a/apps/frontend/components/FormValidation/FloodFormValidation/FloodFormValidation.tsx b/apps/frontend/components/FormValidation/FloodFormValidation/FloodFormValidation.tsx index 2f4cac3b..c3e0da5a 100644 --- a/apps/frontend/components/FormValidation/FloodFormValidation/FloodFormValidation.tsx +++ b/apps/frontend/components/FormValidation/FloodFormValidation/FloodFormValidation.tsx @@ -38,9 +38,9 @@ export const FloodFormValidation = ({ const { control, handleSubmit, reset } = useForm({ defaultValues: { region: { - province: formattedForm.province, - district: formattedForm.district, - commune: formattedForm.commune, + province: [formattedForm.province], + district: [formattedForm.district], + commune: [formattedForm.commune], }, interviewer: formattedForm.entryName, disTyp: formattedForm.disTyp, diff --git a/apps/frontend/components/FormValidation/FloodFormValidation/FloodHeader.tsx b/apps/frontend/components/FormValidation/FloodFormValidation/FloodHeader.tsx index bfbb4b7d..d83945a8 100644 --- a/apps/frontend/components/FormValidation/FloodFormValidation/FloodHeader.tsx +++ b/apps/frontend/components/FormValidation/FloodFormValidation/FloodHeader.tsx @@ -38,12 +38,13 @@ const FloodHeader = ({ control, isEditMode }: FloodHeaderProps) => { render={({ field: { value, onChange } }) => ( )} />