- Forhåpentligvis fikset tooltip-visning

navikt · Sep 12, 2024 · 50bbe69 · 50bbe69
1 parent 8a3bc3d
commit 50bbe69
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 32 deletions.
diff --git a/src/components/guielements/ARCNODETree.jsx b/src/components/guielements/ARCNODETree.jsx
@@ -14,10 +14,10 @@ export function ARCNODETree(props) {
     function generateArcnodeTreeNode(node) {
         if (Object.hasOwn(node,'children')) {
             let treenode = []
-            node['children'].map((subNode) => {
+            node['children'].map((subNode, index) => {
                     treenode.push(
                         // <ul className={isActive ? "nested activex" : "nested"}>
-                        <li style={checkStyle(subNode)}>
+                        <li style={checkStyle(subNode)} key={index}>
                             {Object.hasOwn(subNode, 'name') ? subNode['name'] : 'no name'}
                             {generateArcnodeTreeNode(subNode)}
                         </li>

diff --git a/src/components/guielements/CSS/EnTable.css b/src/components/guielements/CSS/EnTable.css
@@ -17,6 +17,15 @@
     font-size: 30px
 }
 
-.tooltip {
-    min-width: 5%;
+.questionmark-icon-border {
+    border: 1px solid black;
+    border-radius: 50%;
+    padding: 2px;
+    margin-left: 2px;
+}
+
+.center-content {
+    display: flex;
+    justify-content: start;
+    align-items: center;
 }
diff --git a/src/components/guielements/Cell.jsx b/src/components/guielements/Cell.jsx
@@ -2,7 +2,6 @@ import { Button, Popover, Table } from '@navikt/ds-react';
 import React, { useRef, useState } from "react";
 import { JsonParser } from "./JsonParser";
 import './CSS/Button.css'
-import { renderToString } from "react-dom/server";
 
 export const popoverType_None = "NONE"
 export const popoverType_DESCRIPTION = "DESCRIPTION"
@@ -23,7 +22,7 @@ function generateTables(tables) {
 }
 
 export function Cell(props) {
-    let element = useState(props.element)
+    let element = useState(props.element);
     let j = props.j
     let subitem = element[0]
     let cellInTable;
@@ -62,7 +61,6 @@ export function Cell(props) {
 
     function getPopOver() {
         let detail = generateTables(subitem['popoverContent'])
-        // console.log("detail" ,detail)
         return <Popover open={open} onClose={() => setOpen(false)}
             anchorEl={buttonPopoverRef.current}
             placement="left" modifiers={modifiers}
@@ -73,51 +71,42 @@ export function Cell(props) {
         </Popover>;
     }
 
-    function getDetailView() {
-        let detail = generateTables(subitem['popoverContent'])
-        document.getElementById("datailView").innerHTML = renderToString(detail)
-        // detailView.style.
-        return <div open={open} onClose={() => setOpen(false)}>
-        </div>;
-    }
-
     function createCell() {
         let tooltip = <></>
-        if (subitem['tooltip'] != undefined) {
+        if (subitem['tooltip']) {
             dataBtn = subitem['data']
             tooltip = getTooltip()
         }
         let popOver = <></>
-        if (subitem['popoverType'] != popoverType_None) {
-            // dataBtn = <Button onClick={() => setOpen(!open)} size="xsmall">
+        if (subitem['popoverType'] !== popoverType_None) {
             dataBtn = <Button ref={buttonPopoverRef} onClick={() => setOpen(!open)} size="xsmall" style={popOverColor(subitem['popoverType'])} >
                 {subitem['data']}</Button>
-            popOver = getPopOver()
-            // popOver = getDetailView()
+                popOver = getPopOver()
         } else {
             dataBtn = subitem['data']
         }
-        return { tooltip, popOver };
+        return { tooltip, dataBtn, popOver };
     }
 
     function popOverColor(value) {
-        if (value == popoverType_DESCRIPTION)
+        if (value === popoverType_DESCRIPTION)
             return { 'backgroundColor': 'blue' };
-        else if (value == popoverType_FORMEL)
+        else if (value === popoverType_FORMEL)
             return { 'color': 'orange', 'backgroundColor': 'grey' };
-        else if (value == popoverType_FAKTUM)
+        else if (value === popoverType_FAKTUM)
             return { 'color': 'white', 'backgroundColor': 'grey' };
     }
 
-    if (subitem['header']) {
-        let { tooltip, popOver } = createCell();
+    if (Object.hasOwn(subitem, "header") && subitem['header'] === true) {
+        let { tooltip, dataBtn, popOver } = createCell();
+        console.log("header is true in cell", subitem)
         cellInTable = <Table.HeaderCell key={j} scope="col">
             {dataBtn}
             {tooltip}
             {popOver}
         </Table.HeaderCell>
     } else {
-        let { tooltip, popOver } = createCell();
+        let { tooltip, dataBtn, popOver } = createCell();
         cellInTable = <Table.DataCell key={j}>
             {dataBtn}
             {tooltip}

diff --git a/src/components/guielements/Table.jsx b/src/components/guielements/Table.jsx
@@ -1,24 +1,39 @@
 import React, {useState} from "react";
-import {Heading, Table} from '@navikt/ds-react';
+import {Heading, Table, Tooltip} from '@navikt/ds-react';
 import './CSS/EnTable.css'
 import {Cell} from "./Cell";
+import {QuestionmarkIcon} from "@navikt/aksel-icons";
+
+
 
 export function EnTable(props) {
     let [table] = useState(props.table)
 
+    function createTooltip(item) {
+        if (item && Object.hasOwn(item, 'tooltip') ) {
+            return (
+                <Tooltip content={item['tooltip']} placement="top">
+                    <QuestionmarkIcon className={"questionmark-icon-border"} fontSize="1.5rem" />
+                </Tooltip>
+            )
+        } else { return null }
+    }
+
     function horizontalHeader(item, index) {
         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>;
+            let tooltip  = createTooltip(item[index])
+            return <Table.HeaderCell key={index} scope="col"><span className={"center-content"}>{item[index]['data']} {tooltip}</span></Table.HeaderCell>;
         }
     }
 
     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>;
+            let tooltip  = createTooltip(item)
+            return <Table.HeaderCell key={index} scope="row"><span className={"center-content"}>{item['data']} {tooltip}</span></Table.HeaderCell>;
         }
     }
 
@@ -49,12 +64,12 @@ export function EnTable(props) {
                     <Table.Body>
                         {table['orientation'] === 'HORIZONTAL' && table['cells'].slice(1).map((item, index) => (
                             <Table.Row key={`horizontal-row-${index}`}>
-                                {showRow(item, index)}
+                                {showRow(item)}
                             </Table.Row>
                         ))}
                         {table['orientation'] === 'VERTICAL' && table['cells'].map((item, index) => (
                             <Table.Row key={`vertical-row-${index}`}>
-                                {verticalHeader(item[0])}
+                                {verticalHeader(item[0], index)}
                                 {showRow(item.slice(1), true)}
                             </Table.Row>
                         ))}