3333 - User fix and translate title

src/client/components/EditUserForm/EditUserForm.tsx

@@ -10,6 +10,7 @@ import { useAssessment, useCycle } from 'client/store/assessment'
 import { UserManagementActions } from 'client/store/ui/userManagement'
 import { useUser } from 'client/store/user'
 import { useCountryIso, useOnUpdate } from 'client/hooks'
+import { useOptionsAppellation } from 'client/hooks/useOptionsAppellation'
 import DisableUser from 'client/components/EditUserForm/DisableUser'
 import UserCountryRoleSelector from 'client/components/EditUserForm/UserCountryRoleSelector'
 
@@ -35,6 +36,7 @@ const EditUserForm: React.FC<Props> = (props: Props) => {
   const cycle = useCycle()
   const user = useUser()
   const { t } = useTranslation()
+  const appellationOptions = useOptionsAppellation()
 
   const [profilePicture, setProfilePicture] = useState<File>(null)
   const [userToEdit, setUserToEdit] = useState<User>(targetUser)
@@ -100,7 +102,7 @@ const EditUserForm: React.FC<Props> = (props: Props) => {
         name="title"
         value={targetUser.props.title}
         onChange={changeUserProp}
-        options={{ Ms: 'Ms', Mr: 'Mr', Other: 'Other' }}
+        options={appellationOptions}
         enabled={enabled}
         mandatory
       />

src/client/components/EditUserForm/SelectField/SelectField.scss

@@ -2,18 +2,16 @@
 
 .edit-user__form-field {
   &.edit-user__form-select-field {
-    gap: $spacing-xs;
+    display: block;
 
-    select {
-      border: none;
-      width: 100%;
-      padding: 10px;
-    }
-  }
+    &.error {
+      .select__container {
+        background-color: rgba($ui-destructive, 0.1) !important;
 
-  &.error {
-    select {
-      background-color: rgba($ui-destructive, 0.1) !important;
+        input {
+          background-color: transparent !important;
+        }
+      }
     }
   }
 }

src/client/components/EditUserForm/SelectField/SelectField.tsx

@@ -7,19 +7,20 @@ import classNames from 'classnames'
 import { User } from 'meta/user'
 import { UserProps } from 'meta/user/user'
 
+import Select, { Option } from 'client/components/Inputs/Select'
+
 type Props = {
   name: string
   value: string
-  options: Record<string, string>
+  options: Array<Option>
   onChange: (name: string, value: string) => void
   validator?: (partial: Partial<User> | Partial<UserProps>) => boolean
   enabled?: boolean
   mandatory?: boolean
-  placeholder?: boolean
 }
 
 const SelectField: React.FC<Props> = (props) => {
-  const { name, value, options, onChange, validator, enabled, mandatory, placeholder } = props
+  const { name, value, options, onChange, validator, enabled, mandatory } = props
 
   const { t } = useTranslation()
 
@@ -33,6 +34,10 @@ const SelectField: React.FC<Props> = (props) => {
     setValid(validationChain.reduce((valid, validationFnc) => valid && validationFnc(value), true))
   }, [mandatory, name, validator, value])
 
+  const _onLocalChange = (value: string) => {
+    onChange(name, value)
+  }
+
   return (
     <div className="edit-user__form-item" key={name}>
       <div className="edit-user__form-label">{t(`editUser.${name}`)}</div>
@@ -42,18 +47,7 @@ const SelectField: React.FC<Props> = (props) => {
           error: !valid,
         })}
       >
-        <select
-          value={value}
-          onChange={(e: React.ChangeEvent<HTMLSelectElement>) => onChange(name, e.target.value)}
-          disabled={!enabled}
-        >
-          {placeholder && <option value="">{t('userManagement.placeholder')}</option>}
-          {Object.entries(options).map(([k, v]) => (
-            <option key={k} value={k}>
-              {v}
-            </option>
-          ))}
-        </select>
+        <Select disabled={!enabled} onChange={_onLocalChange} options={options} value={value} />
       </div>
     </div>
   )
@@ -63,7 +57,6 @@ SelectField.defaultProps = {
   validator: undefined,
   enabled: false,
   mandatory: false,
-  placeholder: true,
 }
 
 export default SelectField

src/client/components/EditUserForm/UserCountryRoleSelector/UserCountryRoleSelector.tsx

@@ -23,16 +23,7 @@ const UserCountryRoleSelector: React.FC<Props> = (props: Props) => {
   const options = useOptions()
   const onChange = useOnChange(user)
 
-  return (
-    <SelectField
-      placeholder={false}
-      onChange={onChange}
-      name="role"
-      options={options}
-      value={userRole.role}
-      enabled={enabled}
-    />
-  )
+  return <SelectField onChange={onChange} name="role" options={options} value={userRole.role} enabled={enabled} />
 }
 
 export default UserCountryRoleSelector

src/client/components/EditUserForm/UserCountryRoleSelector/hooks/useOptions.tsx

@@ -3,17 +3,24 @@ import { useTranslation } from 'react-i18next'
 
 import { RoleName, Users } from 'meta/user'
 
-export const useOptions = () => {
+import { Option } from 'client/components/Inputs/Select'
+
+type Returned = Array<Option>
+
+export const useOptions = (): Returned => {
   const { t } = useTranslation()
-  return useMemo(
-    () =>
-      Object.keys(RoleName).reduce<Record<string, string>>((acc, key) => {
-        if (key !== RoleName.ADMINISTRATOR) {
-          // eslint-disable-next-line no-param-reassign
-          acc[key] = t(Users.getI18nRoleLabelKey(key))
-        }
-        return acc
-      }, {}),
-    [t]
-  )
+
+  return useMemo<Returned>(() => {
+    const options = Object.keys(RoleName).reduce<Returned>((acc, key) => {
+      if (key !== RoleName.ADMINISTRATOR) {
+        acc.push({
+          label: t(Users.getI18nRoleLabelKey(key)),
+          value: key,
+        })
+      }
+      return acc
+    }, [])
+
+    return options
+  }, [t])
 }

src/client/pages/Section/Contacts/hooks/useDefinitions.ts

@@ -4,10 +4,10 @@ import { ContactField, contactFields } from 'meta/cycleData'
 import { NodeExtCellType } from 'meta/nodeExt'
 
 import { useIsPrintRoute } from 'client/hooks/useIsRoute'
+import { useOptionsAppellation } from 'client/hooks/useOptionsAppellation'
 import { NodeExtCell, NodeExtCellSelect } from 'client/components/TableNodeExt/types'
 import { Columns, Fields } from 'client/pages/Section/Contacts/types'
 
-import { useOptionsAppellation } from './useOptionsAppellation'
 import { useOptionsContributions } from './useOptionsContributions'
 import { useOptionsRole } from './useOptionsRole'
 

src/server/repository/public/user/getContacts.ts

@@ -73,7 +73,7 @@ export const getContacts = async (props: Props, client: BaseProtocol = DB): Prom
            , null                                 as parent_uuid
            , 'contact'                            as type
            , null                                 as value
-           , ${_getField(ContactField.appellation, `lower(u.props ->> 'title')`)}
+           , ${_getField(ContactField.appellation, `u.props ->> 'title'`)}
            , ${_getField(ContactField.contributions, `u.contributions`)}
            , ${_getField(ContactField.institution, `u.props_role ->> 'organization'`)}
            , ${_getField(ContactField.name, `u.props ->> 'name'`)}

src/test/migrations/steps/20240130202403-step-fix-user-tittle.ts

@@ -0,0 +1,16 @@
+import { BaseProtocol } from 'server/db'
+
+export default async (client: BaseProtocol) => {
+  await client.query(`
+    UPDATE public.users
+    SET props = 
+      CASE 
+        WHEN props->>'title' = 'Ms' THEN jsonb_set(props, '{title}', '"ms"')
+        WHEN props->>'title' = 'Mr' THEN jsonb_set(props, '{title}', '"mr"')
+        WHEN props->>'title' = 'Mrs' THEN jsonb_set(props, '{title}', '"mrs"')
+        WHEN props->>'title' = 'Other' THEN jsonb_set(props, '{title}', '"other"')
+        ELSE props
+      END
+    WHERE props->>'title' IN ('Ms', 'Mr', 'Mrs', 'Other');
+  `)
+}