4106 - Remove ColType multiselect. Refactor Multiselect->Select isMul…

…ti (#4107)

* 4106 - migrate multiselect->select isMulti

* 4106 - remove colType multiselect

src/client/components/PageLayout/Header/FraHeader/FraHeader.tsx

@@ -2,22 +2,24 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { useCycle } from 'client/store/assessment'
+import { useLanguage } from 'client/hooks/useLanguage'
 import LinkHome from 'client/components/LinkHome'
 
 import CycleSwitcher from '../CycleSwitcher'
 import LanguageSelector, { LanguageSelectorMobile } from '../LanguageSelector'
 import UserLinks from '../UserLinks'
 
 const FraHeader: React.FC = () => {
-  const { i18n } = useTranslation()
+  const { t } = useTranslation()
   const cycle = useCycle()
+  const lang = useLanguage()
 
   return (
     <header className="app-header no-print">
-      <img alt="FAO" className="app-header__fao-logo" src={`/img/fao/FAO${i18n.resolvedLanguage}.svg`} />
+      <img alt="FAO" className="app-header__fao-logo" src={`/img/fao/FAO${lang}.svg`} />
       <div className="app-header__separator" />
       <div className="app-header__global-fra">
-        <div>{i18n.t<string>('common.globalFRA')}</div>
+        <div>{t('common.globalFRA')}</div>
 
         {cycle && <CycleSwitcher />}
       </div>

src/client/pages/Section/DataTable/Table/Row/RowData/Cell/Cell.tsx

@@ -14,7 +14,6 @@ import { useNodeValue } from './hooks/useNodeValue'
 import useOnChange from './hooks/useOnChange'
 import Calculated from './Calculated'
 import Flags from './Flags'
-import Multiselect from './Multiselect'
 import Number from './Number'
 import Placeholder from './Placeholder'
 import { PropsCell } from './props'
@@ -29,7 +28,6 @@ const Components: Record<string, React.FC<PropsCell>> = {
   [ColType.textarea]: Text,
   [ColType.decimal]: Number,
   [ColType.integer]: Number,
-  [ColType.multiselect]: Multiselect,
   [ColType.select]: Select,
   [ColType.placeholder]: Placeholder,
 }
@@ -65,26 +63,26 @@ const Cell: React.FC<Props> = (props) => {
 
   return (
     <td
-      id={`${col.props.colType}_${col.id}_${col.props.colName ?? ''}`}
-      colSpan={colSpan}
       className={className}
+      colSpan={colSpan}
+      data-tooltip-html={errorMessages}
+      data-tooltip-id={TooltipId.error}
+      id={`${col.props.colType}_${col.id}_${col.props.colName ?? ''}`}
       rowSpan={rowSpan}
       style={style}
-      data-tooltip-id={TooltipId.error}
-      data-tooltip-html={errorMessages}
     >
       <Component
         assessmentName={assessmentName}
-        sectionName={sectionName}
-        table={table}
-        disabled={disabled}
-        rowIndex={rowIndex}
         col={col}
-        row={row}
+        disabled={disabled}
         nodeValue={nodeValue}
         onChange={disabled ? emptyFn : onChange}
         onChangeNodeValue={disabled ? emptyFn : onChangeNodeValue}
         onPaste={disabled ? emptyFn : onPaste}
+        row={row}
+        rowIndex={rowIndex}
+        sectionName={sectionName}
+        table={table}
       />
 
       <Flags col={col} nodeValue={nodeValue} row={row} sectionName={sectionName} />

src/client/pages/Section/DataTable/Table/Row/RowData/Cell/Select/Select.tsx

@@ -1,28 +1,32 @@
 import './Select.scss'
 import React, { useCallback } from 'react'
 
+import { Cols } from 'meta/assessment'
+
+import { useCycle } from 'client/store/assessment'
 import SelectCommon from 'client/components/Inputs/Select'
 
 import { PropsCell } from '../props'
 import { useOptions } from './hooks/useOptions'
 
 const Select: React.FC<PropsCell> = (props) => {
-  const { col, disabled, nodeValue, onChange: onChangeProps } = props
+  const { col, disabled, nodeValue, onChangeNodeValue } = props
 
+  const cycle = useCycle()
   const options = useOptions({ col, nodeValue })
 
+  const { isMulti } = Cols.getSelectProps({ cycle, col })
+
   const onChange = useCallback(
-    (value: string | null) => {
-      // TODO: Refactor -> onChange should take string | undefined, not event
-      // @ts-ignore
-      onChangeProps({ target: { value } })
+    (raw: string | Array<string> | null) => {
+      onChangeNodeValue({ ...nodeValue, raw })
     },
-    [onChangeProps]
+    [nodeValue, onChangeNodeValue]
   )
 
   return (
     <div className="table__select-container">
-      <SelectCommon disabled={disabled} onChange={onChange} options={options} value={nodeValue.raw} />
+      <SelectCommon disabled={disabled} isMulti={isMulti} onChange={onChange} options={options} value={nodeValue.raw} />
     </div>
   )
 }

src/client/utils/sanitizer/_types.ts

@@ -0,0 +1 @@
+export type Value = string | Array<string>

src/client/utils/sanitizer/sanitizer.ts

@@ -1,14 +1,17 @@
 import { ColSelectOption, ColType } from 'meta/assessment'
 
+import { Value } from 'client/utils/sanitizer/_types'
+
 import { acceptableAsDecimal, acceptNextDecimal } from './decimal'
 import { acceptableAsInteger, acceptNextInteger } from './integer'
 import { acceptNextSelectOption } from './select'
 
 const sanitizerFnByType: Record<
   string,
-  (value: string, valuePrev: string, options?: Array<ColSelectOption>, precision?: number) => string
+  (value: Value, valuePrev: Value, options?: Array<ColSelectOption>, precision?: number) => Value
 > = {
-  [ColType.decimal]: (value, valuePrev, _options, precision) => acceptNextDecimal(value, valuePrev, precision),
+  [ColType.decimal]: (value, valuePrev, _options, precision) =>
+    acceptNextDecimal(value as string, valuePrev as string, precision),
   [ColType.integer]: acceptNextInteger,
   [ColType.select]: acceptNextSelectOption,
 }
@@ -31,9 +34,9 @@ export const sanitize = (props: {
   options?: Array<ColSelectOption>
   precision?: number
   type: ColType
-  value: string
-  valuePrev: string
-}): string => {
+  value: Value
+  valuePrev: Value
+}): Value => {
   const { options, precision, type, value, valuePrev } = props
   const sanitizerFn = sanitizerFnByType[type]
   if (sanitizerFn) {

src/client/utils/sanitizer/select.ts

@@ -2,8 +2,16 @@ import { Objects } from 'utils/objects'
 
 import { ColSelectOption } from 'meta/assessment'
 
-export const acceptNextSelectOption = (newValue: string, currentValue: string, options?: Array<ColSelectOption>) => {
-  const valid = Objects.isNil(newValue) || Boolean(options.find((option) => option.name === newValue))
+import { Value } from 'client/utils/sanitizer/_types'
+
+export const acceptNextSelectOption = (
+  newValue: Value,
+  currentValue: Value,
+  options?: Array<ColSelectOption>
+): Value => {
+  const newValueArray = Array.isArray(newValue) ? newValue : [newValue]
+  const valid =
+    Objects.isNil(newValue) || newValueArray.every((value) => Boolean(options.find((option) => option.name === value)))
 
   if (valid) {
     return newValue

src/meta/assessment/col.ts

@@ -17,13 +17,10 @@ export enum ColType {
   integer = 'integer',
   noticeMessage = 'noticeMessage',
   placeholder = 'placeholder',
-  multiselect = 'multiselect',
   select = 'select',
-  selectYesNo = 'selectYesNo',
   taxon = 'taxon',
   text = 'text',
   textarea = 'textarea',
-  // placeholder = 'placeholder',
 }
 
 export interface ColSelectOption {
@@ -33,6 +30,7 @@ export interface ColSelectOption {
 }
 
 export interface ColSelectProps {
+  isMulti?: boolean
   labelKeyPrefix?: string
   options?: Array<ColSelectOption>
   years?: { start: number; end?: number }

src/test/migrations/steps/20241108095524-step-update-col-select-props-per-cycle.ts

@@ -33,7 +33,7 @@ export default async (client: BaseProtocol) => {
                from ${schemaAssessment}.col c
                         left join ${schemaAssessment}.row r on r.id = c.row_id
                         left join ${schemaAssessment}."table" t on t.id = r.table_id
-               where c.props ->> 'colType' in ('${ColType.multiselect}','${ColType.select}')
+               where c.props ->> 'colType' in ('multiselect','${ColType.select}')
                order by c.id)
              , col_props as
               (select cp.id

src/test/migrations/steps/20241112123550-step-remove-coltype-multiselect.ts

@@ -0,0 +1,38 @@
+import { ColType } from 'meta/assessment'
+
+import { AssessmentController } from 'server/controller/assessment'
+import { BaseProtocol, Schemas } from 'server/db'
+
+export default async (client: BaseProtocol) => {
+  const assessments = await AssessmentController.getAll({}, client)
+
+  await Promise.all(
+    assessments.map(async (assessment) => {
+      const schemaAssessment = Schemas.getName(assessment)
+
+      await client.query(`
+          with col_props_disagg as
+              (select c.id
+                    , jsonb_object_keys(c.props -> 'select') as cycle_uuid
+                    , (c.props -> 'select' -> jsonb_object_keys(c.props -> 'select')) ||
+                      jsonb_build_object('isMulti', true)    as select_props
+               from ${schemaAssessment}.col c
+                        left join ${schemaAssessment}.row r on r.id = c.row_id
+                        left join ${schemaAssessment}."table" t on t.id = r.table_id
+               where c.props ->> 'colType' = 'multiselect')
+             , col_props as
+              (select cp.id
+                    , jsonb_object_agg(cp.cycle_uuid, cp.select_props) as select_props
+               from col_props_disagg cp
+               group by cp.id)
+          update ${schemaAssessment}.col c
+          set props = props || jsonb_build_object('colType', '${ColType.select}') || jsonb_build_object('select', cp.select_props)
+          from col_props cp
+          where c.id = cp.id
+          ;
+      `)
+
+      await AssessmentController.generateMetadataCache({ assessment }, client)
+    })
+  )
+}