fix(application-system): TableRepeater cancel option (#16929)

* cancel active item functionality * setup default row and header support for nationalidWithname --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
island-is · Nov 26, 2024 · 9519a8d · 9519a8d
1 parent e4b4584
commit 9519a8d
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 12 deletions.
diff --git a/libs/application/core/src/lib/messages.ts b/libs/application/core/src/lib/messages.ts
@@ -41,6 +41,11 @@ export const coreMessages = defineMessages({
     defaultMessage: 'Bæta við',
     description: 'Add button',
   },
+  buttonCancel: {
+    id: 'application.system:button.cancel',
+    defaultMessage: 'Hætta við',
+    description: 'Cancel button',
+  },
   cardButtonInProgress: {
     id: 'application.system:card.button.inProgress',
     defaultMessage: 'Opna umsókn',
@@ -136,6 +141,16 @@ export const coreMessages = defineMessages({
     defaultMessage: 'Ekki tókst að búa til umsókn af gerðinni: {type}',
     description: 'Failed to create application of type: {type}',
   },
+  nationalId: {
+    id: 'application.system:nationalId',
+    defaultMessage: 'Kennitala',
+    description: 'National ID',
+  },
+  name: {
+    id: 'application.system:name',
+    defaultMessage: 'Nafn',
+    description: 'Name',
+  },
   applications: {
     id: 'application.system:applications',
     defaultMessage: 'Þínar umsóknir',

diff --git a/libs/application/types/src/lib/Fields.ts b/libs/application/types/src/lib/Fields.ts
@@ -626,6 +626,7 @@ export type TableRepeaterField = BaseField & {
   component: FieldComponents.TABLE_REPEATER
   formTitle?: StaticText
   addItemButtonText?: StaticText
+  cancelButtonText?: StaticText
   saveItemButtonText?: StaticText
   getStaticTableData?: (application: Application) => Record<string, string>[]
   removeButtonTooltipText?: StaticText

diff --git a/libs/application/ui-fields/src/lib/TableRepeaterFormField/TableRepeaterFormField.tsx b/libs/application/ui-fields/src/lib/TableRepeaterFormField/TableRepeaterFormField.tsx
@@ -22,7 +22,11 @@ import { useLocale } from '@island.is/localization'
 import { FieldDescription } from '@island.is/shared/form-fields'
 import { FC, useState } from 'react'
 import { useFieldArray, useFormContext, useWatch } from 'react-hook-form'
-import { handleCustomMappedValues } from './utils'
+import {
+  buildDefaultTableHeader,
+  buildDefaultTableRows,
+  handleCustomMappedValues,
+} from './utils'
 import { Item } from './TableRepeaterItem'
 import { Locale } from '@island.is/shared/types'
 
@@ -47,6 +51,7 @@ export const TableRepeaterFormField: FC<Props> = ({
     title,
     titleVariant = 'h4',
     addItemButtonText = coreMessages.buttonAdd,
+    cancelButtonText = coreMessages.buttonCancel,
     saveItemButtonText = coreMessages.reviewButtonSubmit,
     removeButtonTooltipText = coreMessages.deleteFieldText,
     editButtonTooltipText = coreMessages.editFieldText,
@@ -71,8 +76,8 @@ export const TableRepeaterFormField: FC<Props> = ({
   const activeField = activeIndex >= 0 ? fields[activeIndex] : null
   const savedFields = fields.filter((_, index) => index !== activeIndex)
   const tableItems = items.filter((x) => x.displayInTable !== false)
-  const tableHeader = table?.header ?? tableItems.map((item) => item.label)
-  const tableRows = table?.rows ?? tableItems.map((item) => item.id)
+  const tableHeader = table?.header ?? buildDefaultTableHeader(tableItems)
+  const tableRows = table?.rows ?? buildDefaultTableRows(tableItems)
   const staticData = getStaticTableData?.(application)
   const canAddItem = maxRows ? savedFields.length < maxRows : true
 
@@ -89,6 +94,11 @@ export const TableRepeaterFormField: FC<Props> = ({
     }
   }
 
+  const handleCancelItem = (index: number) => {
+    setActiveIndex(-1)
+    remove(index)
+  }
+
   const handleNewItem = () => {
     append({})
     setActiveIndex(fields.length)
@@ -239,14 +249,24 @@ export const TableRepeaterFormField: FC<Props> = ({
                   />
                 ))}
               </GridRow>
-              <Box display="flex" justifyContent="flexEnd">
-                <Button
-                  variant="ghost"
-                  type="button"
-                  onClick={() => handleSaveItem(activeIndex)}
-                >
-                  {formatText(saveItemButtonText, application, formatMessage)}
-                </Button>
+              <Box display="flex" alignItems="center" justifyContent="flexEnd">
+                <Box>
+                  <Button
+                    variant="ghost"
+                    type="button"
+                    onClick={() => handleCancelItem(activeIndex)}
+                  >
+                    {formatText(cancelButtonText, application, formatMessage)}
+                  </Button>
+                </Box>
+                <Box marginLeft={2}>
+                  <Button
+                    type="button"
+                    onClick={() => handleSaveItem(activeIndex)}
+                  >
+                    {formatText(saveItemButtonText, application, formatMessage)}
+                  </Button>
+                </Box>
               </Box>
             </Stack>
           ) : (

diff --git a/libs/application/ui-fields/src/lib/TableRepeaterFormField/utils.ts b/libs/application/ui-fields/src/lib/TableRepeaterFormField/utils.ts
@@ -1,3 +1,4 @@
+import { coreMessages } from '@island.is/application/core'
 import { TableRepeaterItem } from '@island.is/application/types'
 
 type Item = {
@@ -31,7 +32,7 @@ const handleNationalIdWithNameItem = <T>(
   // with a nested object inside it. This function will extract the nested
   // object and merge it with the rest of the values.
   const newValues = values.map((value) => {
-    if (typeof value[item.id] === 'object' && value[item.id] !== null) {
+    if (!!value[item.id] && typeof value[item.id] === 'object') {
       const { [item.id]: nestedObject, ...rest } = value
       return { ...nestedObject, ...rest }
     }
@@ -40,3 +41,25 @@ const handleNationalIdWithNameItem = <T>(
 
   return newValues
 }
+
+export const buildDefaultTableHeader = (items: Array<TableRepeaterItem>) =>
+  items
+    .map((item) =>
+      // nationalIdWithName is a special case where the value is an object of name and nationalId
+      item.component === 'nationalIdWithName'
+        ? [coreMessages.name, coreMessages.nationalId]
+        : item.label,
+    )
+    .flat(2)
+
+export const buildDefaultTableRows = (
+  items: Array<TableRepeaterItem & { id: string }>,
+) =>
+  items
+    .map((item) =>
+      // nationalIdWithName is a special case where the value is an object of name and nationalId
+      item.component === 'nationalIdWithName'
+        ? ['name', 'nationalId']
+        : item.id,
+    )
+    .flat(2)