From 9519a8d4480b7b0d792bf6a3344e4e7625e6f689 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=9E=C3=B3rarinn=20Gunnar=20=C3=81rnason?= Date: Tue, 19 Nov 2024 10:30:25 +0000 Subject: [PATCH] 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> --- libs/application/core/src/lib/messages.ts | 15 +++++++ libs/application/types/src/lib/Fields.ts | 1 + .../TableRepeaterFormField.tsx | 42 ++++++++++++++----- .../src/lib/TableRepeaterFormField/utils.ts | 25 ++++++++++- 4 files changed, 71 insertions(+), 12 deletions(-) diff --git a/libs/application/core/src/lib/messages.ts b/libs/application/core/src/lib/messages.ts index bf55e326b06a..3190a3542b1a 100644 --- 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 index 7fb277233888..ec9e1221f8e8 100644 --- 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[] removeButtonTooltipText?: StaticText diff --git a/libs/application/ui-fields/src/lib/TableRepeaterFormField/TableRepeaterFormField.tsx b/libs/application/ui-fields/src/lib/TableRepeaterFormField/TableRepeaterFormField.tsx index 5d3b8f3f6bc0..ec1e39bf08f0 100644 --- 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 = ({ 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 = ({ 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 = ({ } } + const handleCancelItem = (index: number) => { + setActiveIndex(-1) + remove(index) + } + const handleNewItem = () => { append({}) setActiveIndex(fields.length) @@ -239,14 +249,24 @@ export const TableRepeaterFormField: FC = ({ /> ))} - - + + + + + + + ) : ( diff --git a/libs/application/ui-fields/src/lib/TableRepeaterFormField/utils.ts b/libs/application/ui-fields/src/lib/TableRepeaterFormField/utils.ts index fd1962a41f14..f1b0c79ee077 100644 --- 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 = ( // 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 = ( return newValues } + +export const buildDefaultTableHeader = (items: Array) => + 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, +) => + 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)