Add summary2 for "Custom" component (#2840)

* Add summary2 function for "Custom" component * Display "Custom" components in "RepeatingGroupTableSummary" * Display "Custom" components in "GridSummary" * Add summaryMode property to Custom component
Altinn · Jan 9, 2025 · 34e9e5f · 34e9e5f
1 parent f7119de
commit 34e9e5f
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 9 deletions.
diff --git a/src/layout/Custom/CustomWebComponent.tsx b/src/layout/Custom/CustomWebComponent.tsx
@@ -12,6 +12,7 @@ import type { CompInternal, ITextResourceBindings } from 'src/layout/layout';
 
 export type ICustomComponentProps = PropsFromGenericComponent<'Custom'> & {
   [key: string]: string | number | boolean | object | null | undefined;
+  summaryMode?: boolean;
 };
 
 export type IPassedOnProps = Omit<PropsFromGenericComponent<'Custom'>, 'node' | 'componentValidations'> &
@@ -24,6 +25,7 @@ export type IPassedOnProps = Omit<PropsFromGenericComponent<'Custom'>, 'node' |
 export function CustomWebComponent({
   node,
   componentValidations,
+  summaryMode = false,
   ...passThroughPropsFromGenericComponent
 }: ICustomComponentProps) {
   const langTools = useLanguage();
@@ -34,6 +36,7 @@ export function CustomWebComponent({
     ...passThroughPropsFromNode,
     text: langAsString(textResourceBindings?.title),
     getTextResourceAsString: (textResource: string) => langAsString(textResource),
+    summaryMode,
   };
   const HtmlTag = tagName;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

diff --git a/src/layout/Custom/index.tsx b/src/layout/Custom/index.tsx
@@ -4,9 +4,11 @@ import type { JSX } from 'react';
 import { CustomDef } from 'src/layout/Custom/config.def.generated';
 import { CustomWebComponent } from 'src/layout/Custom/CustomWebComponent';
 import { SummaryItemSimple } from 'src/layout/Summary/SummaryItemSimple';
+import { useNodeFormData } from 'src/utils/layout/useNodeItem';
 import type { DisplayDataProps } from 'src/features/displayData';
 import type { PropsFromGenericComponent } from 'src/layout';
 import type { SummaryRendererProps } from 'src/layout/LayoutComponent';
+import type { Summary2Props } from 'src/layout/Summary2/SummaryComponent2/types';
 import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 
 export class Custom extends CustomDef {
@@ -26,6 +28,18 @@ export class Custom extends CustomDef {
     return <SummaryItemSimple formDataAsString={displayData} />;
   }
 
+  renderSummary2(props: Summary2Props<'Custom'>): JSX.Element | null {
+    const formData = useNodeFormData(props.target);
+    return (
+      <CustomWebComponent
+        summaryMode={true}
+        formData={formData}
+        node={props.target}
+        containerDivRef={React.createRef()}
+      />
+    );
+  }
+
   validateDataModelBindings(): string[] {
     return [];
   }

diff --git a/src/layout/Grid/GridSummary.tsx b/src/layout/Grid/GridSummary.tsx
@@ -17,6 +17,7 @@ import { GenericComponent } from 'src/layout/GenericComponent';
 import classes from 'src/layout/Grid/GridSummary.module.css';
 import { isGridRowHidden } from 'src/layout/Grid/tools';
 import { EditButton } from 'src/layout/Summary2/CommonSummaryComponents/EditButton';
+import { ComponentSummary } from 'src/layout/Summary2/SummaryComponent2/ComponentSummary';
 import { getColumnStyles } from 'src/utils/formComponentUtils';
 import { Hidden, useNode } from 'src/utils/layout/NodesContext';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
@@ -431,7 +432,9 @@ function getComponentCellData(
   displayDataProps: DisplayDataProps,
   textResourceBindings?: ITextResourceBindings,
 ) {
-  if (node && 'getDisplayData' in node.def) {
+  if (node?.type === 'Custom') {
+    return <ComponentSummary componentNode={node} />;
+  } else if (node && 'getDisplayData' in node.def && node.type) {
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     return node.def.getDisplayData(node as LayoutNode<any>, displayDataProps) || '-';
   } else if (textResourceBindings && 'title' in textResourceBindings) {

diff --git a/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx b/src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.tsx
@@ -20,6 +20,7 @@ import { RepeatingGroupTableTitle, useTableTitle } from 'src/layout/RepeatingGro
 import { useTableNodes } from 'src/layout/RepeatingGroup/useTableNodes';
 import { EditButton } from 'src/layout/Summary2/CommonSummaryComponents/EditButton';
 import { SingleValueSummary } from 'src/layout/Summary2/CommonSummaryComponents/SingleValueSummary';
+import { ComponentSummary } from 'src/layout/Summary2/SummaryComponent2/ComponentSummary';
 import { useColumnStylesRepeatingGroups } from 'src/utils/formComponentUtils';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import type { ITableColumnFormatting } from 'src/layout/common.generated';
@@ -141,14 +142,22 @@ function DataRow({ row, node, index, pdfModeActive, columnSettings }: DataRowPro
 
   return (
     <Table.Row>
-      {cellNodes.map((node) => (
-        <DataCell
-          key={node.id}
-          node={node}
-          displayData={('getDisplayData' in node.def && node.def.getDisplayData(node as never, displayDataProps)) ?? ''}
-          columnSettings={columnSettings}
-        />
-      ))}
+      {cellNodes.map((node) =>
+        node.type === 'Custom' ? (
+          <Table.Cell key={node.id}>
+            <ComponentSummary componentNode={node} />
+          </Table.Cell>
+        ) : (
+          <DataCell
+            key={node.id}
+            node={node}
+            displayData={
+              ('getDisplayData' in node.def && node.def.getDisplayData(node as never, displayDataProps)) ?? ''
+            }
+            columnSettings={columnSettings}
+          />
+        ),
+      )}
       {!pdfModeActive && (
         <Table.Cell
           align='right'