mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-18 13:20:43 +00:00
CE-878 - Add tooltips from helpContent to widget labels & table-widget column headers
This commit is contained in:
@ -30,8 +30,8 @@ import TableContainer from "@mui/material/TableContainer";
|
||||
import TableRow from "@mui/material/TableRow";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import parse from "html-react-parser";
|
||||
import {useEffect, useMemo, useState} from "react";
|
||||
import {useAsyncDebounce, useGlobalFilter, usePagination, useSortBy, useTable, useExpanded} from "react-table";
|
||||
import React, {useEffect, useMemo, useState} from "react";
|
||||
import {useAsyncDebounce, useExpanded, useGlobalFilter, usePagination, useSortBy, useTable} from "react-table";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
import MDInput from "qqq/components/legacy/MDInput";
|
||||
import MDPagination from "qqq/components/legacy/MDPagination";
|
||||
@ -173,6 +173,17 @@ function DataTable({
|
||||
);
|
||||
}
|
||||
|
||||
if(table.columnHeaderTooltips)
|
||||
{
|
||||
for (let column of columnsToMemo)
|
||||
{
|
||||
if(table.columnHeaderTooltips[column.accessor])
|
||||
{
|
||||
column.tooltip = table.columnHeaderTooltips[column.accessor];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const columns = useMemo<any>(() => columnsToMemo, [table]);
|
||||
const data = useMemo<any>(() => table.rows, [table]);
|
||||
const gridTemplateColumns = widths.join(" ");
|
||||
@ -324,6 +335,7 @@ function DataTable({
|
||||
{...column.getHeaderProps(isSorted && column.getSortByToggleProps())}
|
||||
align={column.align ? column.align : "left"}
|
||||
sorted={setSortedValue(column)}
|
||||
tooltip={column.tooltip}
|
||||
>
|
||||
{column.render("header")}
|
||||
</DataTableHeadCell>
|
||||
|
||||
@ -43,6 +43,7 @@ import Client from "qqq/utils/qqq/Client";
|
||||
export interface TableDataInput
|
||||
{
|
||||
columns: { [key: string]: any }[];
|
||||
columnHeaderTooltips?: { [columnName: string]: string | JSX.Element }
|
||||
rows: { [key: string]: any }[];
|
||||
}
|
||||
|
||||
|
||||
@ -23,7 +23,9 @@
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
// @ts-ignore
|
||||
import {htmlToText} from "html-to-text";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import React, {useContext, useEffect, useState} from "react";
|
||||
import QContext from "QContext";
|
||||
import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
|
||||
import TableCard from "qqq/components/widgets/tables/TableCard";
|
||||
import Widget, {WidgetData} from "qqq/components/widgets/Widget";
|
||||
import {WidgetUtils} from "qqq/components/widgets/WidgetUtils";
|
||||
@ -46,6 +48,7 @@ function TableWidget(props: Props): JSX.Element
|
||||
const [isExportDisabled, setIsExportDisabled] = useState(false); // hmm, would like true here, but it broke...
|
||||
const [csv, setCsv] = useState(null as string);
|
||||
const [fileName, setFileName] = useState(null as string);
|
||||
const {helpHelpActive} = useContext(QContext);
|
||||
|
||||
const rows = props.widgetData?.rows;
|
||||
const columns = props.widgetData?.columns;
|
||||
@ -133,6 +136,23 @@ function TableWidget(props: Props): JSX.Element
|
||||
labelAdditionalElementsLeft.push(WidgetUtils.generateExportButton(onExportClick));
|
||||
}
|
||||
|
||||
//////////////////////////////////////////////////////
|
||||
// look for column-header tooltips from helpContent //
|
||||
//////////////////////////////////////////////////////
|
||||
const columnHeaderTooltips: {[columnName: string]: JSX.Element} = {}
|
||||
for (let column of props.widgetData?.columns ?? [])
|
||||
{
|
||||
const helpRoles = ["ALL_SCREENS"]
|
||||
const slotName = `columnHeader=${column.accessor}`;
|
||||
const showHelp = helpHelpActive || hasHelpContent(props.widgetMetaData?.helpContent?.get(slotName), helpRoles);
|
||||
|
||||
if(showHelp)
|
||||
{
|
||||
const formattedHelpContent = <HelpContent helpContents={props.widgetMetaData?.helpContent?.get(slotName)} roles={helpRoles} helpContentKey={`widget:${props.widgetMetaData?.name};slot:${slotName}`} />;
|
||||
columnHeaderTooltips[column.accessor] = formattedHelpContent;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Widget
|
||||
widgetMetaData={props.widgetMetaData}
|
||||
@ -148,7 +168,7 @@ function TableWidget(props: Props): JSX.Element
|
||||
hidePaginationDropdown={props.widgetData?.hidePaginationDropdown}
|
||||
fixedStickyLastRow={props.widgetData?.fixedStickyLastRow}
|
||||
fixedHeight={props.widgetData?.fixedHeight}
|
||||
data={{columns: props.widgetData?.columns, rows: props.widgetData?.rows}}
|
||||
data={{columns: props.widgetData?.columns, rows: props.widgetData?.rows, columnHeaderTooltips: columnHeaderTooltips}}
|
||||
widgetMetaData={props.widgetMetaData}
|
||||
/>
|
||||
</Widget>
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
import Box from "@mui/material/Box";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import {Theme} from "@mui/material/styles";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import {ReactNode} from "react";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
import {useMaterialUIController} from "qqq/context";
|
||||
@ -33,9 +34,10 @@ interface Props
|
||||
children: ReactNode;
|
||||
sorted?: false | "none" | "asce" | "desc";
|
||||
align?: "left" | "right" | "center";
|
||||
tooltip?: string | JSX.Element;
|
||||
}
|
||||
|
||||
function DataTableHeadCell({width, children, sorted, align, ...rest}: Props): JSX.Element
|
||||
function DataTableHeadCell({width, children, sorted, align, tooltip, ...rest}: Props): JSX.Element
|
||||
{
|
||||
const [controller] = useMaterialUIController();
|
||||
const {darkMode} = controller;
|
||||
@ -73,39 +75,43 @@ function DataTableHeadCell({width, children, sorted, align, ...rest}: Props): JS
|
||||
userSelect: sorted && "none",
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
{sorted && (
|
||||
<Box
|
||||
position="absolute"
|
||||
top={0}
|
||||
right={align !== "right" ? "16px" : 0}
|
||||
left={align === "right" ? "-5px" : "unset"}
|
||||
sx={({typography: {size}}: any) => ({
|
||||
fontSize: size.lg,
|
||||
})}
|
||||
>
|
||||
<>
|
||||
{
|
||||
tooltip ? <Tooltip title={tooltip}><span style={{cursor: "default"}}>{children}</span></Tooltip> : children
|
||||
}
|
||||
{sorted && (
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: -6,
|
||||
color: sorted === "asce" ? "text" : "secondary",
|
||||
opacity: sorted === "asce" ? 1 : 0.5
|
||||
}}
|
||||
position="absolute"
|
||||
top={0}
|
||||
right={align !== "right" ? "16px" : 0}
|
||||
left={align === "right" ? "-5px" : "unset"}
|
||||
sx={({typography: {size}}: any) => ({
|
||||
fontSize: size.lg,
|
||||
})}
|
||||
>
|
||||
<Icon>arrow_drop_up</Icon>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: -6,
|
||||
color: sorted === "asce" ? "text" : "secondary",
|
||||
opacity: sorted === "asce" ? 1 : 0.5
|
||||
}}
|
||||
>
|
||||
<Icon>arrow_drop_up</Icon>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
color: sorted === "desc" ? "text" : "secondary",
|
||||
opacity: sorted === "desc" ? 1 : 0.5
|
||||
}}
|
||||
>
|
||||
<Icon>arrow_drop_down</Icon>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
color: sorted === "desc" ? "text" : "secondary",
|
||||
opacity: sorted === "desc" ? 1 : 0.5
|
||||
}}
|
||||
>
|
||||
<Icon>arrow_drop_down</Icon>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
)}
|
||||
</>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user