Repeating group summary2 table mode (#2712)

* add table view of repeating group summary

* support text, date and number in repeating group

* fix expression tests

* show data, text and number by default if included in repeating group

* add mobile view

* remove unused const

* fix edit button

* add test for rep group table summary

src/features/expressions/shared-tests/functions/displayValue/date.json

@@ -0,0 +1,32 @@
+{
+  "name": "Display value of Date component",
+  "expression": [
+    "displayValue",
+    "dag"
+  ],
+  "context": {
+    "component": "dag",
+    "currentLayout": "Page"
+  },
+  "expects": "21.07.2023",
+  "layouts": {
+    "Page": {
+      "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json",
+      "data": {
+        "layout": [
+          {
+            "id": "dag",
+            "type": "Date",
+            "value": ["dataModel", "Skjema.Dag"],
+            "format": "dd.MM.yyyy"
+          }
+        ]
+      }
+    }
+  },
+  "dataModel": {
+    "Skjema": {
+      "Dag": "2023-07-21"
+    }
+  }
+}

src/features/expressions/shared-tests/functions/displayValue/number.json

@@ -0,0 +1,31 @@
+{
+  "name": "Display value of Number component",
+  "expression": [
+    "displayValue",
+    "penger"
+  ],
+  "context": {
+    "component": "penger",
+    "currentLayout": "Page"
+  },
+  "expects": "1200",
+  "layouts": {
+    "Page": {
+      "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json",
+      "data": {
+        "layout": [
+          {
+            "id": "penger",
+            "type": "Number",
+            "value": ["dataModel", "Skjema.Penger"]
+          }
+        ]
+      }
+    }
+  },
+  "dataModel": {
+    "Skjema": {
+      "Penger": "1200"
+    }
+  }
+}

src/features/expressions/shared-tests/functions/displayValue/text.json

@@ -0,0 +1,31 @@
+{
+  "name": "Display value of Text component",
+  "expression": [
+    "displayValue",
+    "navn"
+  ],
+  "context": {
+    "component": "navn",
+    "currentLayout": "Page"
+  },
+  "expects": "Per",
+  "layouts": {
+    "Page": {
+      "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json",
+      "data": {
+        "layout": [
+          {
+            "id": "navn",
+            "type": "Text",
+            "value": ["dataModel", "Skjema.Navn"]
+          }
+        ]
+      }
+    }
+  },
+  "dataModel": {
+    "Skjema": {
+      "Navn": "Per"
+    }
+  }
+}

src/layout/Date/index.tsx

@@ -1,8 +1,9 @@
 import React, { forwardRef } from 'react';
 import type { JSX } from 'react';
 
-import { formatDate, isValid } from 'date-fns';
+import { formatDate, isValid, parseISO } from 'date-fns';
 
+import { useDisplayDataProps } from 'src/features/displayData/useDisplayData';
 import { DateDef } from 'src/layout/Date/config.def.generated';
 import { DateComponent } from 'src/layout/Date/DateComponent';
 import type { DisplayDataProps } from 'src/features/displayData';
@@ -14,11 +15,25 @@ export class Date extends DateDef {
   getDisplayData(node: LayoutNode<'Date'>, { nodeDataSelector }: DisplayDataProps): string {
     const dateString = nodeDataSelector((picker) => picker(node)?.item?.value, [node]);
     const format = nodeDataSelector((picker) => picker(node)?.item?.format, [node]);
-    if (dateString === undefined || !isValid(dateString)) {
+
+    if (dateString === undefined) {
       return '';
     }
 
-    return formatDate(dateString, format || 'dd.MM.yyyy');
+    const parsedValue = parseISO(dateString);
+    let displayData = parsedValue.toDateString();
+    if (!isValid(parsedValue)) {
+      displayData = 'Ugyldig format';
+    } else if (format) {
+      displayData = formatDate(parsedValue, format || 'dd.MM.yyyy');
+    }
+
+    return displayData;
+  }
+
+  useDisplayData(node: LayoutNode<'Date'>): string {
+    const displayDataProps = useDisplayDataProps();
+    return this.getDisplayData(node, displayDataProps);
   }
 
   render = forwardRef<HTMLElement, PropsFromGenericComponent<'Date'>>(

src/layout/Number/index.tsx

@@ -3,6 +3,7 @@ import type { JSX } from 'react';
 
 import { formatNumericText } from '@digdir/design-system-react';
 
+import { useDisplayDataProps } from 'src/features/displayData/useDisplayData';
 import { getMapToReactNumberConfig } from 'src/hooks/useMapToReactNumberConfig';
 import { evalFormatting } from 'src/layout/Input/formatting';
 import { NumberDef } from 'src/layout/Number/config.def.generated';
@@ -30,6 +31,11 @@ export class Number extends NumberDef {
     return text;
   }
 
+  useDisplayData(node: LayoutNode<'Number'>): string {
+    const displayDataProps = useDisplayDataProps();
+    return this.getDisplayData(node, displayDataProps);
+  }
+
   render = forwardRef<HTMLElement, PropsFromGenericComponent<'Number'>>(
     function LayoutComponentNumberRender(props, _): JSX.Element | null {
       return <NumberComponent {...props} />;

src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.tsx

@@ -10,6 +10,7 @@ import { useUnifiedValidationsForNode } from 'src/features/validation/selectors/
 import { validationsOfSeverity } from 'src/features/validation/utils';
 import { useRepeatingGroupRowState } from 'src/layout/RepeatingGroup/Providers/RepeatingGroupContext';
 import classes from 'src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.module.css';
+import { RepeatingGroupTableSummary } from 'src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary';
 import { SingleValueSummary } from 'src/layout/Summary2/CommonSummaryComponents/SingleValueSummary';
 import { ComponentSummary } from 'src/layout/Summary2/SummaryComponent2/ComponentSummary';
 import { BaseLayoutNode } from 'src/utils/layout/LayoutNode';
@@ -18,10 +19,12 @@ import { useNodeItem } from 'src/utils/layout/useNodeItem';
 export const RepeatingGroupSummary = ({
   componentNode,
   isCompact,
+  display,
   emptyFieldText,
 }: {
   componentNode: BaseLayoutNode<'RepeatingGroup'>;
   isCompact?: boolean;
+  display?: 'table' | 'full';
   emptyFieldText?: string;
 }) => {
   const { visibleRows } = useRepeatingGroupRowState();
@@ -44,6 +47,10 @@ export const RepeatingGroupSummary = ({
     );
   }
 
+  if (display === 'table' && componentNode) {
+    return <RepeatingGroupTableSummary componentNode={componentNode} />;
+  }
+
   return (
     <div
       className={cn(classes.summaryWrapper, { [classes.nestedSummaryWrapper]: isNested })}

src/layout/RepeatingGroup/Summary2/RepeatingGroupTableSummary/RepeatingGroupTableSummary.module.css

@@ -0,0 +1,78 @@
+.mobileTable {
+  display: block;
+}
+
+.mobileTable caption {
+  display: block;
+}
+
+.mobileTable thead {
+  display: none;
+}
+
+.mobileTable th {
+  display: block;
+  border: none;
+}
+
+.mobileTable tbody,
+.mobileTable tr {
+  display: block;
+}
+
+.mobileTable td {
+  display: flex;
+  flex-direction: column;
+  border: none;
+  padding: var(--fds-spacing-2) 0;
+}
+
+.mobileTable td .contentWrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+}
+
+.mobileTable tbody tr:last-child {
+  border-bottom: 2px solid var(--fds-semantic-border-neutral-default);
+}
+
+.mobileTable tbody tr:first-child {
+  border-top: 2px solid var(--fds-semantic-border-neutral-default);
+}
+
+.mobileTable tr {
+  border-bottom: 1px solid var(--fds-semantic-border-neutral-default);
+  padding-top: var(--fds-spacing-3);
+  padding-bottom: var(--fds-spacing-3);
+}
+
+.mobileTable tr:hover td {
+  background-color: unset;
+}
+
+.mobileTable td[data-header-title]:not([data-header-title=''])::before,
+.mobileTable th[data-header-title]:not([data-header-title=''])::before {
+  content: attr(data-header-title);
+  display: block;
+  text-align: left;
+  font-weight: 500;
+}
+
+.mobileTable .buttonCell {
+  align-items: start;
+}
+
+.visuallyHidden {
+  border: none;
+  padding: 0;
+  margin: 0;
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}