added functionality for table

src/components/formcomponents/table/TableContainer.tsx

@@ -10,22 +10,23 @@ import {
   QuestionnaireResponse,
   QuestionnaireResponseItem,
   QuestionnaireResponseItemAnswer,
+  Resource,
 } from '../../../types/fhir';
 
 import LanguageLocales from '@helsenorge/core-utils/constants/languages';
 
 import GTable from './tables/gtable/GTable';
+import { StandardTable } from './tables/table/StandardTable';
 import TableHn1 from './tables/table-hn1/TableHn1';
 import TableHn2 from './tables/table-hn2/TableHn2';
 import { NewValueAction } from '../../../actions/newValue';
 import { TABLE_CODES_VALUES, TableCodes } from '../../../constants/tableTypes';
 import { GlobalState } from '../../../reducers';
-import { getFormData } from '../../../reducers/form';
+import { getFormData, getFormDefinition } from '../../../reducers/form';
 import { getCodingTextTableValues } from '../../../util/extension';
 import { Path } from '../../../util/refero-core';
 import { RenderContext } from '../../../util/renderContext';
 import { Resources } from '../../../util/resources';
-import { StandardTable } from './tables/table/StandardTable';
 
 export interface Props {
   item: QuestionnaireItem;
@@ -56,9 +57,17 @@ interface EnhancedProps {
   tableType: TABLE_CODES_VALUES;
   questionnaireResponse?: QuestionnaireResponse | null;
   language: LanguageLocales;
+  resource: Resource[] | undefined;
 }
 
-const TableContainer = ({ tableCodesCoding, items, headline, tableType, questionnaireResponse }: Props & EnhancedProps): JSX.Element => {
+const TableContainer = ({
+  tableCodesCoding,
+  items,
+  headline,
+  tableType,
+  questionnaireResponse,
+  resource,
+}: Props & EnhancedProps): JSX.Element => {
   {
     switch (tableType) {
       case TableCodes.tableHn1:
@@ -86,7 +95,7 @@ const TableContainer = ({ tableCodesCoding, items, headline, tableType, question
         return (
           <>
             <h3>{headline}</h3>
-            <StandardTable items={items} />
+            <StandardTable items={items} questionnaireResponse={questionnaireResponse} resource={resource} />
           </>
         );
       default:
@@ -98,6 +107,7 @@ const TableContainer = ({ tableCodesCoding, items, headline, tableType, question
 const mapStateToProps = (state: GlobalState, props: Props): EnhancedProps => {
   const group = props.item;
   const tableType = getCodingTextTableValues(group)[0];
+  const resource = getFormDefinition(state)?.Content?.contained;
 
   return {
     headline: group.text ?? '',
@@ -106,6 +116,7 @@ const mapStateToProps = (state: GlobalState, props: Props): EnhancedProps => {
     tableType,
     questionnaireResponse: getFormData(state)?.Content,
     language: (state.refero.form.Language as LanguageLocales) || LanguageLocales.NORWEGIAN,
+    resource,
   };
 };
 export default connect(mapStateToProps)(TableContainer);

src/components/formcomponents/table/tables/gtable/GTable.tsx

@@ -21,7 +21,7 @@ interface Props {
 
 const GTable = ({ items, questionnaireResponse }: Props): JSX.Element => {
   const gTable = getGtablebodyObject(items, questionnaireResponse);
-  return (
+  return gTable.rows.length > 0 ? (
     <HnTable className="page_refero__table_gtable">
       <TableHead category={HeaderCategory.normal}>
         <TableRow>
@@ -44,6 +44,8 @@ const GTable = ({ items, questionnaireResponse }: Props): JSX.Element => {
         })}
       </TableBody>
     </HnTable>
+  ) : (
+    <></>
   );
 };
 

src/components/formcomponents/table/tables/table-hn2/TableHn2.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 
 import { Coding, QuestionnaireItem, QuestionnaireResponse } from '../../../../../types/fhir';
 
-import { Table as HnTable, ModeType, SortDirection, TableBody, TableCell, TableRow } from '@helsenorge/designsystem-react/components/Table';
+import { Table as HnTable, SortDirection, TableBody, TableCell, TableRow } from '@helsenorge/designsystem-react/components/Table';
 
 import { ITableH2Row } from './interface';
 import TableHeadHn2 from './TableHeadHn2';

src/components/formcomponents/table/tables/table/StandardTable.tsx

@@ -1,12 +1,54 @@
 import React from 'react';
 
-import { QuestionnaireItem, QuestionnaireResponse } from '../../../../../types/fhir';
+import { QuestionnaireItem, QuestionnaireResponse, Resource } from '../../../../../types/fhir';
+
+import {
+  HeaderCategory,
+  Table as HnTable,
+  ModeType,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeadCell,
+  TableRow,
+} from '@helsenorge/designsystem-react/components/Table';
+
+import { getStandardTableObject } from './utils';
 
 interface Props {
   items: QuestionnaireItem[];
   questionnaireResponse?: QuestionnaireResponse | null;
+  resource?: Resource[];
 }
 
-export const StandardTable = ({ items }: Props): JSX.Element => {
-  return <>{items.map(item => item.linkId)}</>;
+export const StandardTable = ({ items, questionnaireResponse, resource }: Props): JSX.Element => {
+  const table = getStandardTableObject(items, questionnaireResponse, resource);
+  return table.rows.length > 0 ? (
+    <HnTable mode={ModeType.normal} className="page_refero__standard-table">
+      <TableHead category={HeaderCategory.normal} className="page_refero__standard-table__header">
+        <TableRow className="page_refero__standard-table__header__row">
+          {table.headerRow.map(column => (
+            <TableHeadCell className="page_refero__standard-table__header__row__cell" key={column.id}>
+              <span className="page_refero__standard-table__header__row__cell">{column.value}</span>
+            </TableHeadCell>
+          ))}
+        </TableRow>
+      </TableHead>
+      <TableBody className="page_refero__standard-table__body">
+        {table.rows.map(item => (
+          <TableRow key={item.id} className="page_refero__standard-table__body__row">
+            {item.columns.map(({ value, id }) => (
+              <React.Fragment key={id}>
+                <TableCell className="page_refero__standard-table__body__row__cell" dataLabel="Navn">
+                  <span className="page_refero__standard-table__body__row__cell__value">{value}</span>
+                </TableCell>
+              </React.Fragment>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </HnTable>
+  ) : (
+    <></>
+  );
 };