Fix repeating group table summary (#2796)

* fix rep group table summary * update test * update test
Altinn · Dec 6, 2024 · bcb9c73 · bcb9c73
1 parent 9cf843b
commit bcb9c73
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 22 deletions.
diff --git a/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx b/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx
@@ -84,23 +84,14 @@ export const RepeatingGroupTableSummary = ({
           </Table.Row>
         </Table.Head>
         <Table.Body>
-          {rows.map((row) => (
-            <Table.Row key={row?.uuid}>
-              {childNodes.map((node) => (
-                <DataCell
-                  node={node}
-                  key={node.id}
-                />
-              ))}
-              {!pdfModeActive && (
-                <Table.Cell
-                  align='right'
-                  className={tableClasses.buttonCell}
-                >
-                  {row?.itemIds && row?.itemIds?.length > 0 && <EditButton componentNode={childNodes[0]} />}
-                </Table.Cell>
-              )}
-            </Table.Row>
+          {rows.map((row, index) => (
+            <DataRow
+              key={row?.uuid}
+              row={row}
+              node={componentNode}
+              index={index}
+              pdfModeActive={pdfModeActive}
+            />
           ))}
         </Table.Body>
       </Table>
@@ -133,16 +124,40 @@ function HeaderCell({ node, columnSettings }: { node: LayoutNode; columnSettings
   );
 }
 
-function DataCell({ node }) {
-  const { langAsString } = useLanguage();
+function DataRow({ row, node, index, pdfModeActive }) {
+  const cellNodes = useTableNodes(node, index);
   const displayDataProps = useDisplayDataProps();
+
+  return (
+    <Table.Row>
+      {cellNodes.map((node) => (
+        <DataCell
+          key={node.id}
+          node={node}
+          displayData={('getDisplayData' in node.def && node.def.getDisplayData(node as never, displayDataProps)) ?? ''}
+        />
+      ))}
+      {!pdfModeActive && (
+        <Table.Cell
+          align='right'
+          className={tableClasses.buttonCell}
+        >
+          {row?.itemIds && row?.itemIds?.length > 0 && <EditButton componentNode={cellNodes[0]} />}
+        </Table.Cell>
+      )}
+    </Table.Row>
+  );
+}
+
+function DataCell({ node, displayData }) {
+  const { langAsString } = useLanguage();
   const headerTitle = langAsString(useTableTitle(node));
   return (
     <Table.Cell
       key={node.id}
       data-header-title={headerTitle}
     >
-      {'getDisplayData' in node.def && node.def.getDisplayData(node as never, displayDataProps)}
+      {displayData}
     </Table.Cell>
   );
 }
diff --git a/test/e2e/integration/component-library/repeating-group.ts b/test/e2e/integration/component-library/repeating-group.ts
@@ -25,6 +25,7 @@ describe('Group summary test', () => {
 
   it('Displays a summary for a filled repeating group in table', () => {
     const inputValue = 'Test input for group';
+    const inputValue2 = 'Test input for group2';
 
     cy.findAllByRole('button', { name: /Legg til ny/ })
       .first()
@@ -36,15 +37,16 @@ describe('Group summary test', () => {
     cy.findAllByRole('button', { name: /Legg til ny/ })
       .first()
       .click();
-    cy.findByRole('textbox', { name: /Navn/ }).type(inputValue);
+    cy.findByRole('textbox', { name: /Navn/ }).type(inputValue2);
     cy.findAllByRole('button', { name: /Lagre og lukk/ })
       .first()
       .click();
 
     cy.get('div[data-testid="summary-repeating-group-component"] > table').within(() => {
       cy.findAllByRole('row').should('have.length', 3);
       cy.findByRole('columnheader', { name: /Navn/ }).should('exist');
-      cy.findAllByRole('cell', { name: inputValue }).first().should('exist');
+      cy.findAllByRole('cell', { name: inputValue }).should('exist');
+      cy.findAllByRole('cell', { name: inputValue2 }).should('exist');
     });
   });