change select menus with Autocomplete component (#1475)

* change select menus with Autocomplete component * bug fixes * added second compare to isOptionEqualToValue
podkrepi-bg · Jul 11, 2023 · fc7859d · fc7859d
1 parent e7b615a
commit fc7859d
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 41 deletions.
diff --git a/src/components/admin/campaigns/grid/BeneficiarySelect.tsx b/src/components/admin/campaigns/grid/BeneficiarySelect.tsx
@@ -1,13 +1,16 @@
-import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from '@mui/material'
+import { Autocomplete, Box, FormControl, FormHelperText, TextField } from '@mui/material'
 import { TranslatableField, translateError } from 'common/form/validation'
 import { useField } from 'formik'
+import { BeneficiaryListResponse } from 'gql/beneficiary'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useBeneficiariesList } from 'service/beneficiary'
 
 export default function BeneficiarySelect({ name = 'beneficiaryId' }) {
   const { t } = useTranslation()
   const { data } = useBeneficiariesList()
-  const [field, meta] = useField(name)
+  const [, meta, { setValue }] = useField(name)
+  const [beneficiary, setBeneficiary] = useState<BeneficiaryListResponse>()
 
   const helperText = meta.touched ? translateError(meta.error as TranslatableField, t) : ''
   return (
@@ -16,19 +19,39 @@ export default function BeneficiarySelect({ name = 'beneficiaryId' }) {
       size="small"
       variant="outlined"
       error={Boolean(meta.error) && Boolean(meta.touched)}>
-      <InputLabel>{t('campaigns:beneficiary')}</InputLabel>
-      <Select fullWidth defaultValue="" label={t('campaigns:beneficiary')} {...field}>
-        <MenuItem value="" disabled>
-          {t('campaigns:beneficiary')}
-        </MenuItem>
-        {data?.map((beneficiary, index) => (
-          <MenuItem key={index} value={beneficiary.id}>
-            {beneficiary.person
-              ? `${beneficiary.person.firstName} ${beneficiary.person.lastName}`
-              : `${beneficiary.company?.companyName}`}
-          </MenuItem>
-        ))}
-      </Select>
+      <Autocomplete
+        value={beneficiary}
+        size="small"
+        onChange={(event, newValue: BeneficiaryListResponse | null) => {
+          if (!newValue || !newValue.id) return ''
+          setBeneficiary(newValue)
+          setValue(newValue?.id)
+        }}
+        options={data || []}
+        getOptionLabel={(option: BeneficiaryListResponse) =>
+          option.person
+            ? `${option.person.firstName} ${option.person.lastName}`
+            : `${option.company?.companyName}`
+        }
+        renderInput={(params) => <TextField {...params} label={t('campaigns:beneficiary')} />}
+        renderOption={(params, option: BeneficiaryListResponse) =>
+          option.person ? (
+            <Box component="li" {...params} key={option.id}>
+              {`${option.person.firstName} ${option.person.lastName}`}
+            </Box>
+          ) : (
+            <Box component="li" {...params} key={option.id}>
+              {`${option.company?.companyName}`}
+            </Box>
+          )
+        }
+        isOptionEqualToValue={(option, value) =>
+          option.person
+            ? option.person.firstName === value?.person?.firstName ||
+              option.person.lastName === value?.person?.lastName
+            : option.company?.companyName === value.company?.companyName
+        }
+      />
       {helperText && <FormHelperText error>{helperText}</FormHelperText>}
     </FormControl>
   )

diff --git a/src/components/admin/campaigns/grid/CoordinatorSelect.tsx b/src/components/admin/campaigns/grid/CoordinatorSelect.tsx
@@ -1,13 +1,16 @@
-import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from '@mui/material'
+import { Autocomplete, Box, FormControl, FormHelperText, TextField } from '@mui/material'
 import { TranslatableField, translateError } from 'common/form/validation'
 import { useCoordinatorsList } from 'common/hooks/coordinators'
 import { useField } from 'formik'
+import { CoordinatorResponse } from 'gql/coordinators'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 export default function CoordinatorSelect({ name = 'coordinatorId' }) {
   const { t } = useTranslation()
   const { data } = useCoordinatorsList()
-  const [field, meta] = useField(name)
+  const [, meta, { setValue }] = useField(name)
+  const [coordinator, setCoordinator] = useState<CoordinatorResponse>()
 
   const helperText = meta.touched ? translateError(meta.error as TranslatableField, t) : ''
   return (
@@ -16,17 +19,30 @@ export default function CoordinatorSelect({ name = 'coordinatorId' }) {
       size="small"
       variant="outlined"
       error={Boolean(meta.error) && Boolean(meta.touched)}>
-      <InputLabel>{t('campaigns:coordinator')}</InputLabel>
-      <Select fullWidth defaultValue="" label={t('campaigns:coordinator')} {...field}>
-        <MenuItem value="" disabled>
-          {t('campaigns:coordinator')}
-        </MenuItem>
-        {data?.map((coordinator, index) => (
-          <MenuItem key={index} value={coordinator.id}>
-            {coordinator.person.firstName} {coordinator.person.lastName}
-          </MenuItem>
-        ))}
-      </Select>
+      <Autocomplete
+        value={coordinator}
+        size="small"
+        onChange={(event, newValue: CoordinatorResponse | null) => {
+          if (!newValue || !newValue.id) return ''
+          setCoordinator(newValue)
+          setValue(newValue?.id)
+        }}
+        options={data || []}
+        getOptionLabel={(option: CoordinatorResponse) => {
+          if (!option.person) return ''
+          return `${option.person.firstName} ${option.person.lastName}`
+        }}
+        renderInput={(params) => <TextField {...params} label={t('campaigns:coordinator')} />}
+        renderOption={(params, option: CoordinatorResponse) => (
+          <Box component="li" {...params} key={option.id}>
+            {`${option.person.firstName} ${option.person.lastName}`}
+          </Box>
+        )}
+        isOptionEqualToValue={(option, value) =>
+          option.person.firstName === value.person.firstName ||
+          option.person.lastName === value.person.lastName
+        }
+      />
       {helperText && <FormHelperText error>{helperText}</FormHelperText>}
     </FormControl>
   )

diff --git a/src/components/admin/campaigns/grid/OrganizerSelect.tsx b/src/components/admin/campaigns/grid/OrganizerSelect.tsx
@@ -1,13 +1,16 @@
-import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from '@mui/material'
+import { Autocomplete, Box, FormControl, FormHelperText, TextField } from '@mui/material'
 import { TranslatableField, translateError } from 'common/form/validation'
 import { useOrganizersList } from 'common/hooks/organizer'
 import { useField } from 'formik'
+import { OrganizerResponse } from 'gql/organizer'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 export default function OrganizerSelect({ name = 'organizerId', label = 'campaigns:organizer' }) {
   const { t } = useTranslation()
   const { data } = useOrganizersList()
-  const [field, meta] = useField(name)
+  const [, meta, { setValue }] = useField(name)
+  const [organizer, setOrganizer] = useState<OrganizerResponse>()
 
   const helperText = meta.touched ? translateError(meta.error as TranslatableField, t) : ''
   if (!data) {
@@ -20,17 +23,30 @@ export default function OrganizerSelect({ name = 'organizerId', label = 'campaig
       size="small"
       variant="outlined"
       error={Boolean(meta.error) && Boolean(meta.touched)}>
-      <InputLabel>{t(label)}</InputLabel>
-      <Select fullWidth defaultValue="" label={t(label)} {...field}>
-        <MenuItem value="" disabled>
-          {t(label)}
-        </MenuItem>
-        {data?.map((organizer, index) => (
-          <MenuItem key={index} value={organizer.id}>
-            {organizer.person.firstName} {organizer.person.lastName}
-          </MenuItem>
-        ))}
-      </Select>
+      <Autocomplete
+        value={organizer}
+        size="small"
+        onChange={(event, newValue: OrganizerResponse | null) => {
+          if (!newValue || !newValue.id) return ''
+          setOrganizer(newValue)
+          setValue(newValue?.id)
+        }}
+        options={data || []}
+        getOptionLabel={(option: OrganizerResponse) => {
+          if (!option.person) return ''
+          return `${option.person.firstName} ${option.person.lastName}`
+        }}
+        renderInput={(params) => <TextField {...params} label={t(label)} />}
+        renderOption={(params, option: OrganizerResponse) => (
+          <Box component="li" {...params} key={option.id}>
+            {`${option.person.firstName} ${option.person.lastName}`}
+          </Box>
+        )}
+        isOptionEqualToValue={(option, value) =>
+          option.person.firstName === value.person.firstName ||
+          option.person.lastName === value.person.lastName
+        }
+      />
       {helperText && <FormHelperText error>{helperText}</FormHelperText>}
     </FormControl>
   )