feat(ui-fields): update table repeater

libs/application/core/src/lib/fieldBuilders.ts

@@ -75,7 +75,7 @@
   }
 }
 
 export function buildCheckboxField(
   data: Omit<CheckboxField, 'type' | 'component' | 'children'>,
 ): CheckboxField {
   const {
@@ -98,7 +98,7 @@
   }
 }
 
 export function buildDateField(
   data: Omit<DateField, 'type' | 'component' | 'children'>,
 ): DateField {
   const {
@@ -125,7 +125,7 @@
   }
 }
 
 export function buildDescriptionField(
   data: Omit<DescriptionField, 'type' | 'component' | 'children'>,
 ): DescriptionField {
   const {
@@ -153,7 +153,7 @@
   }
 }
 
 export function buildRadioField(
   data: Omit<RadioField, 'type' | 'component' | 'children'>,
 ): RadioField {
   const {
@@ -742,6 +742,8 @@
     addItemButtonText,
     saveItemButtonText,
     removeButtonTooltipText,
+    editButtonTooltipText,
+    editField,
     getStaticTableData,
   } = data
 
@@ -759,6 +761,8 @@
     addItemButtonText,
     saveItemButtonText,
     removeButtonTooltipText,
+    editButtonTooltipText,
+    editField,
     getStaticTableData,
   }
 }

libs/application/core/src/lib/messages.ts

@@ -220,6 +220,11 @@ export const coreMessages = defineMessages({
     defaultMessage: 'Eyða færslu',
     description: 'Delete field text',
   },
+  editFieldText: {
+    id: 'application.system:core.edit.field.text',
+    defaultMessage: 'Breyta færslu',
+    description: 'Edit field text',
+  },
   deleteApplicationDialogTitle: {
     id: 'application.system:delete.application.dialog.title',
     defaultMessage: 'Eyða umsókn',

libs/application/types/src/lib/Fields.ts

@@ -317,7 +317,7 @@
   suffix?: string
   rows?: number
   required?: boolean
   onChange?: (...event: any[]) => void
 }
 
 export interface PhoneField extends BaseField {
@@ -331,7 +331,7 @@
   allowedCountryCodes?: string[]
   disableDropdown?: boolean
   required?: boolean
   onChange?: (...event: any[]) => void
 }
 
 export interface FileUploadField extends BaseField {
@@ -500,6 +500,8 @@
   saveItemButtonText?: StaticText
   getStaticTableData?: (application: Application) => Record<string, string>[]
   removeButtonTooltipText?: StaticText
+  editButtonTooltipText?: StaticText
+  editField?: boolean
   marginTop?: ResponsiveProp<Space>
   marginBottom?: ResponsiveProp<Space>
   titleVariant?: TitleVariants

libs/application/ui-fields/src/lib/TableRepeaterFormField/TableRepeaterFormField.tsx

@@ -1,7 +1,6 @@
 import { coreMessages, formatText } from '@island.is/application/core'
 import {
   FieldBaseProps,
-  StaticText,
   TableRepeaterField,
 } from '@island.is/application/types'
 import {
@@ -59,6 +58,8 @@ export const TableRepeaterFormField: FC<Props> = ({
     addItemButtonText = coreMessages.buttonAdd,
     saveItemButtonText = coreMessages.reviewButtonSubmit,
     removeButtonTooltipText = coreMessages.deleteFieldText,
+    editButtonTooltipText = coreMessages.editFieldText,
+    editField = false,
   } = data
 
   const items = Object.keys(rawItems).map((key) => ({
@@ -104,6 +105,10 @@ export const TableRepeaterFormField: FC<Props> = ({
     remove(index)
   }
 
+  const handleEditItem = (index: number) => {
+    setActiveIndex(index)
+  }
+
   const getFieldError = (id: string) => {
     /**
      * Errors that occur in a field-array have incorrect typing
@@ -183,6 +188,28 @@ export const TableRepeaterFormField: FC<Props> = ({
                             />
                           </button>
                         </Tooltip>
+                        {editField && (
+                          <Tooltip
+                            placement="left"
+                            text={formatText(
+                              editButtonTooltipText,
+                              application,
+                              formatMessage,
+                            )}
+                          >
+                            <button
+                              type="button"
+                              onClick={() => handleEditItem(index)}
+                            >
+                              <Icon
+                                icon="pencil"
+                                color="dark200"
+                                type="outline"
+                                size="small"
+                              />
+                            </button>
+                          </Tooltip>
+                        )}
                       </Box>
                     </T.Data>
                     {tableRows.map((item, idx) => (