From 7bf79f52be2fe6e7106b5070fb84d3b015825a80 Mon Sep 17 00:00:00 2001
From: Eleftherios Chaidemenos <echaidemenos@programize.com>
Date: Fri, 26 Jul 2024 12:09:15 +0300
Subject: [PATCH] Update RegionFilters

---
 .../components/Filters/MultiSelect.tsx        | 39 +++++++++++--------
 .../components/Filters/RegionFilters.tsx      |  8 ++++
 .../FloodFormValidation/FloodFormType.ts      |  6 +--
 .../FloodFormValidation.tsx                   |  6 +--
 .../FloodFormValidation/FloodHeader.tsx       |  7 ++--
 5 files changed, 41 insertions(+), 25 deletions(-)

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<string[]>([]);
+  const [value, setValue] = React.useState<string[]>(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}
       >
-        <MenuItem key="allSelected" value="all">
-          <Checkbox
-            checked={isAllSelected}
-            indeterminate={value.length > 0 && value.length < options.length}
-          />
-          <ListItemText
-            primary={
-              <Typography fontWeight="bold">
-                <FormattedMessage id={allSelectedText} />
-              </Typography>
-            }
-          />
-        </MenuItem>
+        {!disableMulti && (
+          <MenuItem key="allSelected" value="all">
+            <Checkbox
+              checked={isAllSelected}
+              indeterminate={value.length > 0 && value.length < options.length}
+            />
+            <ListItemText
+              primary={
+                <Typography fontWeight="bold">
+                  <FormattedMessage id={allSelectedText} />
+                </Typography>
+              }
+            />
+          </MenuItem>
+        )}
         {options.map(option => (
           <MenuItem key={option} value={option}>
             <Checkbox checked={value.indexOf(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 = ({
     <Stack direction="row" gap={theme.spacing(1)} height="100%">
       <FormControl>
         <MultiSelect
+          value={value.province}
           options={allowedProvinces}
           onChange={v => {
             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 = ({
 
       <FormControl>
         <MultiSelect
+          value={value.district}
           options={districtsFiltered}
           onChange={v => {
             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 = ({
 
       <FormControl>
         <MultiSelect
+          value={value.commune}
           options={communesFiltered}
           onChange={v => {
             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<FloodFormType>({
     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 } }) => (
               <RegionFilters
                 value={{
-                  province: [value.province],
-                  district: [value.district],
-                  commune: [value.commune],
+                  province: value.province,
+                  district: value.district,
+                  commune: value.commune,
                 }}
                 onChange={onChange}
                 disableAll={!isEditMode}
+                disableMulti
               />
             )}
           />