6085 - Data Sources: Add button

src/client/components/DataSources/DataSources.tsx

@@ -6,6 +6,7 @@ import { Objects } from 'utils/objects'
 
 import { useCycleRouteParams } from 'client/hooks/routeParams'
 import { useIsPrintRoute } from 'client/hooks/routes'
+import Button, { ButtonSize } from 'client/components/Buttons/Button'
 import { DataCell, DataGrid } from 'client/components/DataGrid'
 import DataSourceRow from 'client/components/DataSources/DataSourceRow'
 import HistoryCompare from 'client/components/DataSources/HistoryCompare'
@@ -32,6 +33,7 @@ export const DataSources: React.FC<PropsDataSources> = (props: PropsDataSources)
     dataSourcesLinked,
     historyCompares,
     meta,
+    onAdd,
     onChange,
     onDelete,
     options = defaults.options,
@@ -46,7 +48,6 @@ export const DataSources: React.FC<PropsDataSources> = (props: PropsDataSources)
   const gridTemplateColumns = useGridTemplateColumns({ options })
 
   const textEmpty = useMemo<boolean>(() => DOMs.isHTMLEmpty(text), [text])
-  const hasPlaceholder = useMemo<boolean>(() => Boolean(dataSources?.find((d) => d.placeholder)), [dataSources])
 
   const hasDataSources = !Objects.isEmpty(dataSources) || !Objects.isEmpty(dataSourcesLinked)
   const renderGrid = Boolean(hasDataSources || canEdit)
@@ -104,25 +105,27 @@ export const DataSources: React.FC<PropsDataSources> = (props: PropsDataSources)
               ))}
 
             {!displayHistory &&
-              dataSources.map((dataSourceValue, i) => {
-                if (!canEdit && dataSourceValue.placeholder) return null
-
-                return (
-                  <DataSourceRow
-                    key={String(`dataSource_${dataSourceValue.uuid}`)}
-                    columns={columns}
-                    dataSource={dataSourceValue}
-                    lastRow={i === dataSources.length - (hasPlaceholder && !canEdit ? 2 : 1)}
-                    meta={meta}
-                    onChange={onChange}
-                    onDelete={onDelete}
-                    options={options}
-                    validator={validator}
-                  />
-                )
-              })}
+              dataSources.map((dataSourceValue, i) => (
+                <DataSourceRow
+                  key={String(`dataSource_${dataSourceValue.uuid}`)}
+                  columns={columns}
+                  dataSource={dataSourceValue}
+                  lastRow={i === dataSources.length - 1}
+                  meta={meta}
+                  onChange={onChange}
+                  onDelete={onDelete}
+                  options={options}
+                  validator={validator}
+                />
+              ))}
           </DataGrid>
 
+          {canEdit && !displayHistory && (
+            <div style={{ gridColumn: '1/-1' }}>
+              <Button iconName="small-add" label={t('common.add')} onClick={onAdd} size={ButtonSize.xs} />
+            </div>
+          )}
+
           {meta?.text?.readOnly && canEdit && !textEmpty && (
             <div className="data-sources__readOnlyText">
               <h5>{t('nationalDataPoint.dataSource2025ExplanatoryText')}</h5>

src/client/components/DataSources/hooks/useDataSourceActions.ts

@@ -31,7 +31,7 @@ export const useDataSourceActions = (props: Props): Array<DataRowAction> => {
   return useMemo<Array<DataRowAction>>(() => {
     const actions: Array<DataRowAction> = []
 
-    if (readOnly || dataSource.placeholder) return actions
+    if (readOnly) return actions
 
     if (canEdit) {
       actions.push({ type: DataRowActionType.Delete, onClick: () => onDelete(dataSource) })

src/client/components/DataSources/types.ts

@@ -28,6 +28,7 @@ export type PropsDataSources = {
   dataSourcesLinked?: Array<DataSourceLinked>
   historyCompares?: Array<DataSourceHistoryCompare>
   meta?: DataSourceDescription
+  onAdd: () => void
   onChange: DataSourceOnChange
   onDelete: DataSourceOnDelete
   options?: {

src/client/pages/OriginalDataPoint/components/DataSources/DataSourcesV2/DataSourcesV2.tsx

@@ -7,8 +7,8 @@ import { useOptionsMethodsUsed } from 'client/pages/OriginalDataPoint/components
 import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 import { useIsEditODPEnabled } from 'client/pages/OriginalDataPoint/hooks/useIsEditODPEnabled'
 
-import { useDataSourcesData } from './hooks/useDataSourcesData'
 import { useDataSourcesHistoryLastApproved } from './hooks/useDataSourcesHistoryLastApproved'
+import { useOnAdd } from './hooks/useOnAdd'
 import { useOnChange } from './hooks/useOnChange'
 import { useOnDelete } from './hooks/useOnDelete'
 
@@ -20,20 +20,21 @@ const DataSourcesV2: React.FC<Props> = (props) => {
   const { originalDataPoint } = props
 
   const canEdit = useIsEditODPEnabled()
-  const dataSourcesData = useDataSourcesData({ originalDataPoint })
   const options = useOptionsMethodsUsed()
+  const onAdd = useOnAdd({ originalDataPoint })
   const onChange = useOnChange({ originalDataPoint })
   const onDelete = useOnDelete({ originalDataPoint })
 
-  const { dataSources } = dataSourcesData
+  const { dataSources = [] } = originalDataPoint
   const historyCompares = useDataSourcesHistoryLastApproved({ dataSources })
   const displayHistory = useODPDisplayHistory()
 
   return (
     <DataSources
       columns={{ type: { isMulti: true, options } }}
-      data={dataSourcesData}
+      data={{ dataSources }}
       historyCompares={historyCompares}
+      onAdd={onAdd}
       onChange={onChange}
       onDelete={onDelete}
       options={{ canEdit, canReview: canEdit, displayHistory }}

src/client/pages/OriginalDataPoint/components/DataSources/DataSourcesV2/hooks/useDataSourcesHistoryLastApproved.ts

@@ -22,8 +22,7 @@ export const useDataSourcesHistoryLastApproved = (props: Props): Returned => {
     if (!historyLastApprovedIsActive) return undefined
 
     const dataSourcesHistory = lastApprovedODP?.dataSources ?? []
-    const dataSourcesWithoutPlaceholder = dataSources.filter((ds) => !ds.placeholder)
 
-    return DataSources.getHistoryCompares({ dataSources: dataSourcesWithoutPlaceholder, dataSourcesHistory })
+    return DataSources.getHistoryCompares({ dataSources, dataSourcesHistory })
   }, [dataSources, historyLastApprovedIsActive, lastApprovedODP])
 }

src/client/pages/OriginalDataPoint/components/DataSources/DataSourcesV2/hooks/useOnAdd.ts

@@ -0,0 +1,25 @@
+import { useCallback } from 'react'
+
+import { DataSource } from 'meta/assessment/descriptionValue/dataSource'
+import { OriginalDataPoint } from 'meta/assessment/originalDataPoint'
+import { UUIDs } from 'meta/uuid/uuids'
+
+import { useUpdateDataSources } from 'client/pages/OriginalDataPoint/components/DataSources/hooks/useUpdateDataSources'
+
+type Props = {
+  originalDataPoint: OriginalDataPoint
+}
+
+type Returned = () => void
+
+export const useOnAdd = (props: Props): Returned => {
+  const { originalDataPoint } = props
+
+  const updateDataSources = useUpdateDataSources({ originalDataPoint })
+
+  return useCallback<Returned>(() => {
+    const dataSource: DataSource = { comments: '', reference: '', type: [], uuid: UUIDs.getUuid() }
+    const dataSourcesUpdate = [...(originalDataPoint.dataSources ?? []), dataSource]
+    updateDataSources(dataSourcesUpdate)
+  }, [originalDataPoint.dataSources, updateDataSources])
+}

src/client/pages/OriginalDataPoint/components/ExtentOfForest/ExtentOfForest.tsx

@@ -28,7 +28,7 @@ const ExtentOfForest: React.FC<Props> = (props) => {
   const { t } = useTranslation()
   const { print } = useIsPrintRoute()
 
-  const nationalClasses = originalDataPoint.nationalClasses.filter((nationalClass) => !nationalClass.placeHolder)
+  const { nationalClasses } = originalDataPoint
 
   const nationalClassValidations = nationalClasses.map((_, index) =>
     ODPs.validateNationalClass(originalDataPoint, index)

src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristics.tsx

@@ -66,7 +66,7 @@ const ForestCharacteristics: React.FC<Props> = (props) => {
   const { historyHasNaturallyRegeneratingForest, historyHasPlantationForest } =
     useHistoryHasNaturallyRegeneratingAndPlantationForest()
 
-  const nationalClasses = originalDataPoint.nationalClasses.filter((nationalClass) => !nationalClass.placeHolder)
+  const { nationalClasses } = originalDataPoint
   const plantationTotal = ODPs.calcTotalSubFieldArea({
     originalDataPoint,
     field: 'forestPercent',

src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsNaturallyRegenerating.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { Numbers } from 'utils/numbers'
-
 import { ODPs } from 'meta/assessment/odps'
 import { OriginalDataPoint } from 'meta/assessment/originalDataPoint'
+import { Numbers } from 'utils/numbers'
 
 import DiffText from 'client/components/DiffText'
 import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
@@ -22,7 +21,7 @@ const ForestCharacteristicsNaturallyRegenerating: React.FC<Props> = (props) => {
   const { canEditData, originalDataPoint } = props
   const { t } = useTranslation()
 
-  const nationalClasses = originalDataPoint?.nationalClasses.filter((nationalClass) => !nationalClass.placeHolder)
+  const nationalClasses = originalDataPoint?.nationalClasses
 
   const totalForestNaturalPercentArea =
     originalDataPoint &&

src/client/pages/OriginalDataPoint/components/ForestCharacteristics/ForestCharacteristicsPlantation.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { Numbers } from 'utils/numbers'
-
 import { ODPs } from 'meta/assessment/odps'
 import { OriginalDataPoint } from 'meta/assessment/originalDataPoint'
+import { Numbers } from 'utils/numbers'
 
 import DiffText from 'client/components/DiffText'
 import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
@@ -21,7 +20,7 @@ const ForestCharacteristicsPlantation: React.FC<Props> = (props) => {
   const { canEditData, originalDataPoint } = props
   const { t } = useTranslation()
 
-  const nationalClasses = originalDataPoint?.nationalClasses.filter((nationalClass) => !nationalClass.placeHolder)
+  const nationalClasses = originalDataPoint?.nationalClasses
 
   const totalForestPlantationPercentArea =
     originalDataPoint &&

src/client/pages/OriginalDataPoint/components/NationalClasses/NationalClasses.tsx

@@ -2,6 +2,7 @@ import React, { useRef } from 'react'
 
 import { OriginalDataPoint } from 'meta/assessment/originalDataPoint'
 
+import CreateNationalClass from './components/CreateNationalClass'
 import { NationalClassesTable } from './components/NationalClassesTable'
 import { Prefill } from './components/Prefill'
 import { Title } from './components/Title'
@@ -21,6 +22,7 @@ const NationalClasses: React.FC<Props> = (props) => {
       <Title gridRef={gridRef} year={year} />
       <Prefill canEditData={canEditData} originalDataPoint={originalDataPoint} />
       <NationalClassesTable gridRef={gridRef} originalDataPoint={originalDataPoint} />
+      <CreateNationalClass canEditData={canEditData} />
     </div>
   )
 }

src/client/pages/OriginalDataPoint/components/NationalClasses/components/CreateNationalClass/CreateNationalClass.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { useIsOriginalDataPointUpdating } from 'client/store/data/originalDataPoint/hooks/originalDataPoint'
+import Button, { ButtonSize } from 'client/components/Buttons/Button'
+
+import { useOnClick } from './hooks/useOnClick'
+
+type Props = {
+  canEditData: boolean
+}
+
+const CreateNationalClass: React.FC<Props> = (props) => {
+  const { canEditData } = props
+
+  const { t } = useTranslation()
+  const originalDataPointUpdating = useIsOriginalDataPointUpdating()
+  const onClick = useOnClick()
+
+  if (!canEditData) {
+    return null
+  }
+
+  return (
+    <Button
+      disabled={originalDataPointUpdating}
+      iconName="small-add"
+      label={t('common.add')}
+      onClick={onClick}
+      size={ButtonSize.xs}
+    />
+  )
+}
+
+export default CreateNationalClass

src/client/pages/OriginalDataPoint/components/NationalClasses/components/CreateNationalClass/hooks/useOnClick.ts

@@ -0,0 +1,18 @@
+import { useCallback } from 'react'
+
+import { ODPNationalClassFactory } from 'meta/assessment/originalDataPoint'
+
+import { useOriginalDataPoint } from 'client/store/data/originalDataPoint/hooks/originalDataPoint'
+import { useUpdateNationalClasses } from 'client/pages/OriginalDataPoint/components/NationalClasses/components/hooks/useUpdateNationalClasses'
+
+type Returned = () => void
+
+export const useOnClick = (): Returned => {
+  const originalDataPoint = useOriginalDataPoint()
+  const updateNationalClasses = useUpdateNationalClasses()
+
+  return useCallback<Returned>(() => {
+    const nationalClasses = [...originalDataPoint.nationalClasses, ODPNationalClassFactory.newNationalClass()]
+    updateNationalClasses({ ...originalDataPoint, nationalClasses })
+  }, [originalDataPoint, updateNationalClasses])
+}

src/client/pages/OriginalDataPoint/components/NationalClasses/components/CreateNationalClass/index.ts

@@ -0,0 +1 @@
+export { default } from './CreateNationalClass'

src/client/pages/OriginalDataPoint/components/NationalClasses/components/NationalClass.tsx

@@ -4,17 +4,13 @@ import { useTranslation } from 'react-i18next'
 import { ODPs } from 'meta/assessment/odps'
 import { OriginalDataPoint } from 'meta/assessment/originalDataPoint'
 
-import { useIsPrintRoute } from 'client/hooks/routes'
 import { DataCell, DataRow } from 'client/components/DataGrid'
 import InputText from 'client/components/Inputs/InputText'
 import TextArea from 'client/components/Inputs/TextArea'
 import { useODPDisplayHistory } from 'client/pages/OriginalDataPoint/components/hooks/useODPDisplayHistory'
 import ODPDiffText from 'client/pages/OriginalDataPoint/components/ODPDiffText/ODPDiffText'
 // import { useNationalClassNameComments } from 'client/pages/OriginalDataPoint/hooks'
-import {
-  useIsEditODPDescriptionEnabled,
-  useIsEditODPEnabled,
-} from 'client/pages/OriginalDataPoint/hooks/useIsEditODPEnabled'
+import { useIsEditODPDescriptionEnabled } from 'client/pages/OriginalDataPoint/hooks/useIsEditODPEnabled'
 
 import { useOnChangeNationalClass } from './hooks/onChangeNationalClass'
 import { useRowActions } from './hooks/useRowActions'
@@ -29,30 +25,23 @@ const NationalClass: React.FC<Props> = (props) => {
 
   const { nationalClasses } = originalDataPoint
   const nationalClass = nationalClasses[index]
-  const { definition, name, placeHolder } = nationalClass
+  const { definition, name } = nationalClass
 
   const { t } = useTranslation()
-  const { print } = useIsPrintRoute()
-  const canEditOdp = useIsEditODPEnabled()
   const canEditDescription = useIsEditODPDescriptionEnabled()
   const actions = useRowActions({ index, originalDataPoint })
   const { onChangeDefinition, onChangeName, onPasteDefinition, onPasteName } = useOnChangeNationalClass({ index })
 
   const displayHistory = useODPDisplayHistory()
 
-  const lastRow = canEditOdp && !print ? placeHolder : index === nationalClasses.length - (print ? 1 : 2)
+  const lastRow = index === nationalClasses.length - 1
   // TODO next pr
   // const target = [originalDataPoint.id, 'class', `${uuid}`, 'definition'] as string[]
   // const classNameRowComments = useNationalClassNameComments(target)
 
   const nationalClassValidation = ODPs.validateNationalClass(originalDataPoint, index)
   const error = !nationalClassValidation.validClassName
 
-  // Hide placeholder row if user doesn't have table data permission (prevents adding new items)
-  if (!canEditOdp && placeHolder) {
-    return null
-  }
-
   return (
     <DataRow actions={actions}>
       <DataCell error={error} lastRow={lastRow}>
@@ -67,7 +56,7 @@ const NationalClass: React.FC<Props> = (props) => {
             disabled={!canEditDescription}
             onChange={onChangeName}
             onPaste={onPasteName}
-            placeholder={placeHolder && index === 0 ? t('nationalDataPoint.enterOrCopyPasteNationalClasses') : ''}
+            placeholder={index === 0 ? t('nationalDataPoint.enterOrCopyPasteNationalClasses') : ''}
             value={name ?? ''}
           />
         )}

src/client/pages/OriginalDataPoint/components/NationalClasses/components/hooks/useRowActions.ts

@@ -22,11 +22,10 @@ export const useRowActions = (props: Props): Returned => {
 
   const { t } = useTranslation()
   const deleteNationalClass = useDeleteNationalClass({ index, originalDataPoint })
-  const { name, placeHolder, uuid } = originalDataPoint.nationalClasses[index]
+  const { name, uuid } = originalDataPoint.nationalClasses[index]
   const odpId = originalDataPoint.id
-  const canEditData = useIsEditODPEnabled()
-  const canEdit = canEditData && !placeHolder
-  const showReviewIndicator = useShowReviewIndicator() && !placeHolder
+  const canEdit = useIsEditODPEnabled()
+  const showReviewIndicator = useShowReviewIndicator()
 
   return useMemo<Returned>(() => {
     const actions: Returned = []

src/client/pages/Section/Contacts/CreateContact/CreateContact.tsx

@@ -11,7 +11,7 @@ const CreateContact: React.FC = () => {
 
   return (
     <div>
-      <Button disabled={loading} iconName="small-add" label={t('common.add')} onClick={onClick} size={ButtonSize.m} />
+      <Button disabled={loading} iconName="small-add" label={t('common.add')} onClick={onClick} size={ButtonSize.xs} />
     </div>
   )
 }