Merge pull request #886 from navikt/bugfix/tabelll-rendres-feil

Bugfix/tabelll rendres feil
navikt · Jul 19, 2024 · 994a19c · 994a19c
2 parents 069bc30 + 9e28b6b
commit 994a19c
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 35 deletions.
diff --git a/src/components/guielements/Cell.jsx b/src/components/guielements/Cell.jsx
@@ -75,8 +75,6 @@ export function Cell(props) {
 
     function getDetailView() {
         let detail = generateTables(subitem['popoverContent'])
-        // console.log("detail" ,renderToString(detail))
-        // let text = '<div>'+'{{$detail}}'+'</div>'
         document.getElementById("datailView").innerHTML = renderToString(detail)
         // detailView.style.
         return <div open={open} onClose={() => setOpen(false)}>

diff --git a/src/components/guielements/Table.jsx b/src/components/guielements/Table.jsx
@@ -1,48 +1,63 @@
-import React, { useState } from "react";
-import { Heading, Table } from '@navikt/ds-react';
+import React, {useState} from "react";
+import {Heading, Table} from '@navikt/ds-react';
 import './CSS/EnTable.css'
-import { Cell } from "./Cell";
+import {Cell} from "./Cell";
 
 export function EnTable(props) {
     let [table] = useState(props.table)
 
     function horizontalHeader(item, index) {
-        if (item[index] == null)
-            return (null)
-        else if (item[index].hasOwnProperty('header'))
-            return <Table.HeaderCell key={index} scope="col">{item[index]['data']}</Table.HeaderCell>
+        if (item[index] == null) {
+            return null;
+        } else if (Object.hasOwn(item[index], 'header') && item[index]['header'] === true) {
+            return <Table.HeaderCell key={index} scope="col">{item[index]['data']}</Table.HeaderCell>;
+        }
     }
 
-    function showRow(item) {
-        let row = []
+    function verticalHeader(item, index) {
+        if (item == null) {
+            return null;
+        } else if (Object.hasOwn(item, 'header') && item['header'] === true) {
+            return <Table.HeaderCell key={index} scope="row">{item['data']}</Table.HeaderCell>;
+        }
+    }
+
+    function showRow(item, isVertical = false, index) {
+        let row = [];
         if (Array.isArray(item)) {
             item.map((subitem, j) => {
-                row.push(<Cell element={subitem} j={j}></Cell>)
-            })
+                row.push(<Cell key={`cell-${index}-${j}`} index={index} element={subitem} j={j}
+                               isVertical={isVertical}/>);
+            });
         }
-        return row
+        return row;
     }
 
-    const Checkname = ({ name }) => {
+    const Checkname = ({name}) => {
         if (name != null && name.includes('Ingen')) {
-            return (null);
+            return null;
         } else
-            return <div className="w-full flex flex-col gap-4"  >
+            return <div className="w-full flex flex-col gap-4">
                 <Table size="small">
                     <Table.Header>
                         <Table.Row>
-                            {table['cells'].map((item, index) => (
-                                horizontalHeader(item, index)
+                            {table['orientation'] === 'HORIZONTAL' && table['cells'][0].map((item, index) => (
+                                horizontalHeader(table['cells'][0], index)
                             ))}
                         </Table.Row>
                     </Table.Header>
                     <Table.Body>
-                        {table['cells'].map((item, index) => (
-                            <Table.Row key={index}>
+                        {table['orientation'] === 'HORIZONTAL' && table['cells'].slice(1).map((item, index) => (
+                            <Table.Row key={`horizontal-row-${index}`}>
                                 {showRow(item, index)}
                             </Table.Row>
-                        ))
-                        }
+                        ))}
+                        {table['orientation'] === 'VERTICAL' && table['cells'].map((item, index) => (
+                            <Table.Row key={`vertical-row-${index}`}>
+                                {verticalHeader(item[0])}
+                                {showRow(item.slice(1), true)}
+                            </Table.Row>
+                        ))}
                     </Table.Body>
                 </Table>
             </div>
@@ -52,19 +67,19 @@ export function EnTable(props) {
         <div>
             <Heading size="xsmall" level="6"> &ensp;
             </Heading>
-            <Heading spacing className={"tableHeading"}
-                style={{
-                    borderBottom: table.hasOwnProperty('name') ? "2px solid grey" : "",
-                    borderTop: table.hasOwnProperty('name') ? "2px solid grey" : "",
-                    backgroundColor: table.hasOwnProperty('name') ? "#f1f1f1" : "",
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center'
-                }}
-                level="6"> &ensp; {table.hasOwnProperty('name') ? table['name'] : ''}</Heading>
+            <Heading spacing className={"tableHeading"} size={"medium"}
+                     style={{
+                         borderBottom: Object.hasOwn(table, 'name') ? "2px solid grey" : "",
+                         borderTop: Object.hasOwn(table, 'name') ? "2px solid grey" : "",
+                         backgroundColor: Object.hasOwn(table, 'name') ? "#f1f1f1" : "",
+                         display: 'flex',
+                         flexDirection: 'column',
+                         alignItems: 'center'
+                     }}
+                     level="6"> &ensp; {Object.hasOwn(table, 'name') ? table['name'] : ''}</Heading>
             <Checkname name={table['name']} className={"tableBody"}>
 
             </Checkname>
         </div>
     )
-}
+}
diff --git a/src/index.css b/src/index.css
@@ -57,7 +57,7 @@
     align-items: center;
 }
 
-@media only screen and (max-width: 768px) {
+@media (max-width: 820px) {
     .detailcontainer {
         grid-template-columns: 1fr;
         grid-template-rows: 1fr 1fr 1fr;