mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-21 14:48:43 +00:00
Compare commits
3 Commits
snapshot-f
...
wip/hotfix
| Author | SHA1 | Date | |
|---|---|---|---|
| 28ae2283f6 | |||
| 077845bc42 | |||
| 0262f8e365 |
@ -6,7 +6,7 @@
|
||||
"@auth0/auth0-react": "1.10.2",
|
||||
"@emotion/react": "11.7.1",
|
||||
"@emotion/styled": "11.6.0",
|
||||
"@kingsrook/qqq-frontend-core": "1.0.87",
|
||||
"@kingsrook/qqq-frontend-core": "1.0.85",
|
||||
"@mui/icons-material": "5.4.1",
|
||||
"@mui/material": "5.11.1",
|
||||
"@mui/styles": "5.11.1",
|
||||
|
||||
2
pom.xml
2
pom.xml
@ -66,7 +66,7 @@
|
||||
<dependency>
|
||||
<groupId>com.kingsrook.qqq</groupId>
|
||||
<artifactId>qqq-backend-core</artifactId>
|
||||
<version>feature-CE-876-develop-missing-widget-types-20240221.002945-1</version>
|
||||
<version>feature-CE-798-quick-filters-20240123.205854-1</version>
|
||||
</dependency>
|
||||
<dependency>
|
||||
<groupId>org.slf4j</groupId>
|
||||
|
||||
@ -36,7 +36,7 @@ import Icon from "@mui/material/Icon";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import {makeStyles} from "@mui/styles";
|
||||
import {Command} from "cmdk";
|
||||
import React, {useContext, useEffect, useRef} from "react";
|
||||
import React, {useContext, useEffect, useRef, useState} from "react";
|
||||
import {useNavigate} from "react-router-dom";
|
||||
import QContext from "QContext";
|
||||
import HistoryUtils, {QHistoryEntry} from "qqq/utils/HistoryUtils";
|
||||
@ -174,9 +174,7 @@ const CommandMenu = ({metaData}: Props) =>
|
||||
})
|
||||
tableNames = tableNames.sort((a: string, b:string) =>
|
||||
{
|
||||
const labelA = metaData.tables.get(a).label ?? "";
|
||||
const labelB = metaData.tables.get(b).label ?? "";
|
||||
return (labelA.localeCompare(labelB));
|
||||
return (metaData.tables.get(a).label.localeCompare(metaData.tables.get(b).label));
|
||||
})
|
||||
|
||||
const path = location.pathname;
|
||||
@ -224,9 +222,7 @@ const CommandMenu = ({metaData}: Props) =>
|
||||
})
|
||||
tableNames = tableNames.sort((a: string, b:string) =>
|
||||
{
|
||||
const labelA = metaData.tables.get(a).label ?? "";
|
||||
const labelB = metaData.tables.get(b).label ?? "";
|
||||
return (labelA.localeCompare(labelB));
|
||||
return (metaData.tables.get(a).label.localeCompare(metaData.tables.get(b).label));
|
||||
})
|
||||
return(
|
||||
<Command.Group heading="Tables">
|
||||
@ -256,9 +252,7 @@ const CommandMenu = ({metaData}: Props) =>
|
||||
|
||||
appNames = appNames.sort((a: string, b:string) =>
|
||||
{
|
||||
const labelA = getFullAppLabel(metaData.appTree, a, 1, "") ?? "";
|
||||
const labelB = getFullAppLabel(metaData.appTree, b, 1, "") ?? "";
|
||||
return (labelA.localeCompare(labelB));
|
||||
return (getFullAppLabel(metaData.appTree, a, 1, "").localeCompare(getFullAppLabel(metaData.appTree, b, 1, "")));
|
||||
})
|
||||
|
||||
return(
|
||||
@ -292,9 +286,7 @@ const CommandMenu = ({metaData}: Props) =>
|
||||
|
||||
appNames = appNames.sort((a: string, b:string) =>
|
||||
{
|
||||
const labelA = metaData.apps.get(a).label ?? "";
|
||||
const labelB = metaData.apps.get(b).label ?? "";
|
||||
return (labelA.localeCompare(labelB));
|
||||
return (metaData.apps.get(a).label.localeCompare(metaData.apps.get(b).label));
|
||||
})
|
||||
|
||||
const entryMap = new Map<string, boolean>();
|
||||
|
||||
@ -1,153 +0,0 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2023. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
package com.kingsrook.qqq.frontend.materialdashboard.model.metadata;
|
||||
|
||||
|
||||
import com.kingsrook.qqq.backend.core.model.metadata.layout.QAppMetaData;
|
||||
import com.kingsrook.qqq.backend.core.model.metadata.layout.QSupplementalAppMetaData;
|
||||
import com.kingsrook.qqq.backend.core.utils.CollectionUtils;
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** app-level meta-data for this module (handled as QSupplementalTableMetaData)
|
||||
*******************************************************************************/
|
||||
public class MaterialDashboardAppMetaData extends QSupplementalAppMetaData
|
||||
{
|
||||
public static final String TYPE_NAME = "materialDashboard";
|
||||
|
||||
private Boolean showAppLabelOnHomeScreen = true;
|
||||
private Boolean includeTableCountsOnHomeScreen = true;
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
public static MaterialDashboardAppMetaData of(QAppMetaData app)
|
||||
{
|
||||
return ((MaterialDashboardAppMetaData) CollectionUtils.nonNullMap(app.getSupplementalMetaData()).get(TYPE_NAME));
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** either get the supplemental meta dat attached to an app - or create a new one
|
||||
** and attach it to the app, and return that.
|
||||
*******************************************************************************/
|
||||
public static MaterialDashboardAppMetaData ofOrWithNew(QAppMetaData app)
|
||||
{
|
||||
MaterialDashboardAppMetaData materialDashboardAppMetaData = of(app);
|
||||
|
||||
if(materialDashboardAppMetaData == null)
|
||||
{
|
||||
materialDashboardAppMetaData = new MaterialDashboardAppMetaData();
|
||||
app.withSupplementalMetaData(materialDashboardAppMetaData);
|
||||
}
|
||||
|
||||
return (materialDashboardAppMetaData);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
@Override
|
||||
public boolean includeInFullFrontendMetaData()
|
||||
{
|
||||
return (true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
@Override
|
||||
public String getType()
|
||||
{
|
||||
return TYPE_NAME;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Getter for showAppLabelOnHomeScreen
|
||||
*******************************************************************************/
|
||||
public Boolean getShowAppLabelOnHomeScreen()
|
||||
{
|
||||
return (this.showAppLabelOnHomeScreen);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Setter for showAppLabelOnHomeScreen
|
||||
*******************************************************************************/
|
||||
public void setShowAppLabelOnHomeScreen(Boolean showAppLabelOnHomeScreen)
|
||||
{
|
||||
this.showAppLabelOnHomeScreen = showAppLabelOnHomeScreen;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Fluent setter for showAppLabelOnHomeScreen
|
||||
*******************************************************************************/
|
||||
public MaterialDashboardAppMetaData withShowAppLabelOnHomeScreen(Boolean showAppLabelOnHomeScreen)
|
||||
{
|
||||
this.showAppLabelOnHomeScreen = showAppLabelOnHomeScreen;
|
||||
return (this);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Getter for includeTableCountsOnHomeScreen
|
||||
*******************************************************************************/
|
||||
public Boolean getIncludeTableCountsOnHomeScreen()
|
||||
{
|
||||
return (this.includeTableCountsOnHomeScreen);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Setter for includeTableCountsOnHomeScreen
|
||||
*******************************************************************************/
|
||||
public void setIncludeTableCountsOnHomeScreen(Boolean includeTableCountsOnHomeScreen)
|
||||
{
|
||||
this.includeTableCountsOnHomeScreen = includeTableCountsOnHomeScreen;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Fluent setter for includeTableCountsOnHomeScreen
|
||||
*******************************************************************************/
|
||||
public MaterialDashboardAppMetaData withIncludeTableCountsOnHomeScreen(Boolean includeTableCountsOnHomeScreen)
|
||||
{
|
||||
this.includeTableCountsOnHomeScreen = includeTableCountsOnHomeScreen;
|
||||
return (this);
|
||||
}
|
||||
|
||||
}
|
||||
@ -28,5 +28,4 @@ package com.kingsrook.qqq.frontend.materialdashboard.model.metadata;
|
||||
public interface MaterialDashboardIconRoleNames
|
||||
{
|
||||
String TOP_RIGHT_INSIDE_CARD = "topRightInsideCard";
|
||||
String TOP_LEFT_INSIDE_CARD = "topLeftInsideCard";
|
||||
}
|
||||
|
||||
@ -28,7 +28,7 @@ import QContext from "QContext";
|
||||
|
||||
interface Props
|
||||
{
|
||||
helpContents: null | QHelpContent | QHelpContent[];
|
||||
helpContents: QHelpContent[];
|
||||
roles: string[];
|
||||
heading?: string;
|
||||
helpContentKey?: string;
|
||||
@ -93,27 +93,9 @@ const getMatchingHelpContent = (helpContents: QHelpContent[], roles: string[]):
|
||||
/*******************************************************************************
|
||||
** test if a list of help contents would find any matches from a list of roles.
|
||||
*******************************************************************************/
|
||||
export const hasHelpContent = (helpContents: null | QHelpContent | QHelpContent[], roles: string[]) =>
|
||||
export const hasHelpContent = (helpContents: QHelpContent[], roles: string[]) =>
|
||||
{
|
||||
return getMatchingHelpContent(nullOrSingletonOrArrayToArray(helpContents), roles) != null;
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
const nullOrSingletonOrArrayToArray = (helpContents: null | QHelpContent | QHelpContent[]): QHelpContent[] =>
|
||||
{
|
||||
let array: QHelpContent[] = [];
|
||||
if(Array.isArray(helpContents))
|
||||
{
|
||||
array = helpContents;
|
||||
}
|
||||
else if(helpContents != null)
|
||||
{
|
||||
array.push(helpContents);
|
||||
}
|
||||
return (array);
|
||||
return getMatchingHelpContent(helpContents, roles) != null;
|
||||
}
|
||||
|
||||
|
||||
@ -124,8 +106,7 @@ const nullOrSingletonOrArrayToArray = (helpContents: null | QHelpContent | QHelp
|
||||
function HelpContent({helpContents, roles, heading, helpContentKey}: Props): JSX.Element
|
||||
{
|
||||
const {helpHelpActive} = useContext(QContext);
|
||||
const helpContentsArray = nullOrSingletonOrArrayToArray(helpContents);
|
||||
let selectedHelpContent = getMatchingHelpContent(helpContentsArray, roles);
|
||||
let selectedHelpContent = getMatchingHelpContent(helpContents, roles);
|
||||
|
||||
let content = null;
|
||||
if (helpHelpActive)
|
||||
|
||||
@ -98,7 +98,7 @@ export default function ExportMenuItem(props: QExportMenuItemProps)
|
||||
</head>
|
||||
<body>
|
||||
Generating file <u>${filename}</u>${totalRecords ? " with " + totalRecords.toLocaleString() + " record" + (totalRecords == 1 ? "" : "s") : ""}...
|
||||
<form id="exportForm" method="post" action="${url}" >
|
||||
<form id="exportForm" method="post" action="${url}" enctype="multipart/form-data">
|
||||
<input type="hidden" name="fields" value="${visibleFields.join(",")}">
|
||||
<input type="hidden" name="filter" id="filter">
|
||||
</form>
|
||||
|
||||
@ -94,24 +94,6 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
|
||||
document.getElementById(`${idPrefix}${criteria.id}`).focus();
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Event handler for key-down events - specifically added here, to stop pressing
|
||||
** 'tab' in a date or date-time from closing the quick-filter...
|
||||
*******************************************************************************/
|
||||
const handleKeyDown = (e: any) =>
|
||||
{
|
||||
if (field.type == QFieldType.DATE || field.type == QFieldType.DATE_TIME)
|
||||
{
|
||||
if(e.code == "Tab")
|
||||
{
|
||||
console.log("Tab on date or date-time - don't close me, just move to the next sub-field!...");
|
||||
e.stopPropagation();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const inputProps: any = {};
|
||||
inputProps.endAdornment = (
|
||||
<InputAdornment position="end">
|
||||
@ -128,7 +110,6 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
|
||||
autoComplete="off"
|
||||
type={type}
|
||||
onChange={(event) => valueChangeHandler(event, valueIndex)}
|
||||
onKeyDown={handleKeyDown}
|
||||
value={value}
|
||||
InputLabelProps={inputLabelProps}
|
||||
InputProps={inputProps}
|
||||
|
||||
@ -504,7 +504,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
|
||||
//////////////////////////////
|
||||
// return the button & menu //
|
||||
//////////////////////////////
|
||||
const widthAndMaxWidth = fieldMetaData?.type == QFieldType.DATE_TIME ? 275 : 250
|
||||
const widthAndMaxWidth = 250
|
||||
return (
|
||||
<>
|
||||
{button}
|
||||
|
||||
@ -1,109 +0,0 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import {Box, Skeleton} from "@mui/material";
|
||||
import React from "react";
|
||||
import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
|
||||
import WidgetBlock from "qqq/components/widgets/WidgetBlock";
|
||||
|
||||
|
||||
interface CompositeData
|
||||
{
|
||||
blocks: BlockData[];
|
||||
styleOverrides?: any;
|
||||
layout?: string
|
||||
}
|
||||
|
||||
|
||||
interface CompositeWidgetProps
|
||||
{
|
||||
widgetMetaData: QWidgetMetaData;
|
||||
data: CompositeData;
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Widget which is a list of Blocks.
|
||||
*******************************************************************************/
|
||||
export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetProps): JSX.Element
|
||||
{
|
||||
if (!data || !data.blocks)
|
||||
{
|
||||
return (<Skeleton />);
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
// note - these layouts are defined in qqq in the CompositeWidgetData.Layout enum //
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
let layout = data?.layout;
|
||||
let boxStyle: any = {};
|
||||
if (layout == "FLEX_ROW_WRAPPED")
|
||||
{
|
||||
boxStyle.display = "flex";
|
||||
boxStyle.flexDirection = "row";
|
||||
boxStyle.flexWrap = "wrap";
|
||||
boxStyle.gap = "0.5rem";
|
||||
}
|
||||
else if (layout == "FLEX_ROW_SPACE_BETWEEN")
|
||||
{
|
||||
boxStyle.display = "flex";
|
||||
boxStyle.flexDirection = "row";
|
||||
boxStyle.justifyContent = "space-between"
|
||||
boxStyle.gap = "0.25rem";
|
||||
}
|
||||
else if (layout == "TABLE_SUB_ROW_DETAILS")
|
||||
{
|
||||
boxStyle.display = "flex";
|
||||
boxStyle.flexDirection = "column";
|
||||
boxStyle.fontSize = "0.875rem";
|
||||
boxStyle.fontWeight = 400;
|
||||
boxStyle.borderRight = "1px solid #D0D0D0";
|
||||
}
|
||||
else if (layout == "BADGES_WRAPPER")
|
||||
{
|
||||
boxStyle.display = "flex";
|
||||
boxStyle.gap = "0.25rem";
|
||||
boxStyle.padding = "0 0.25rem";
|
||||
boxStyle.fontSize = "0.875rem";
|
||||
boxStyle.fontWeight = 400;
|
||||
boxStyle.border = "1px solid gray";
|
||||
boxStyle.borderRadius = "0.5rem";
|
||||
boxStyle.background = "#FFFFFF";
|
||||
}
|
||||
|
||||
if (data?.styleOverrides)
|
||||
{
|
||||
boxStyle = {...boxStyle, ...data.styleOverrides};
|
||||
}
|
||||
|
||||
return (<Box sx={boxStyle} className="compositeWidget">
|
||||
{
|
||||
data.blocks.map((block: BlockData, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<WidgetBlock widgetMetaData={widgetMetaData} block={block} />
|
||||
</React.Fragment>
|
||||
))
|
||||
}
|
||||
</Box>);
|
||||
|
||||
}
|
||||
@ -35,7 +35,6 @@ import DefaultLineChart from "qqq/components/widgets/charts/linechart/DefaultLin
|
||||
import SmallLineChart from "qqq/components/widgets/charts/linechart/SmallLineChart";
|
||||
import PieChart from "qqq/components/widgets/charts/piechart/PieChart";
|
||||
import StackedBarChart from "qqq/components/widgets/charts/StackedBarChart";
|
||||
import CompositeWidget from "qqq/components/widgets/CompositeWidget";
|
||||
import DataBagViewer from "qqq/components/widgets/misc/DataBagViewer";
|
||||
import DividerWidget from "qqq/components/widgets/misc/Divider";
|
||||
import FieldValueListWidget from "qqq/components/widgets/misc/FieldValueListWidget";
|
||||
@ -48,7 +47,6 @@ import ParentWidget from "qqq/components/widgets/ParentWidget";
|
||||
import MultiStatisticsCard from "qqq/components/widgets/statistics/MultiStatisticsCard";
|
||||
import StatisticsCard from "qqq/components/widgets/statistics/StatisticsCard";
|
||||
import Widget, {HeaderIcon, WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT, LabelComponent} from "qqq/components/widgets/Widget";
|
||||
import WidgetBlock from "qqq/components/widgets/WidgetBlock";
|
||||
import ProcessRun from "qqq/pages/processes/ProcessRun";
|
||||
import Client from "qqq/utils/qqq/Client";
|
||||
import TableWidget from "./tables/TableWidget";
|
||||
@ -256,17 +254,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
|
||||
const topRightInsideCardIcon = widgetMetaData.icons.get("topRightInsideCard");
|
||||
if (topRightInsideCardIcon)
|
||||
{
|
||||
labelAdditionalComponentsRight.push(new HeaderIcon(topRightInsideCardIcon.name, topRightInsideCardIcon.path, topRightInsideCardIcon.color, "topRightInsideCard"));
|
||||
}
|
||||
}
|
||||
|
||||
const labelAdditionalComponentsLeft: LabelComponent[] = [];
|
||||
if (widgetMetaData && widgetMetaData.icons)
|
||||
{
|
||||
const topLeftInsideCardIcon = widgetMetaData.icons.get("topLeftInsideCard");
|
||||
if (topLeftInsideCardIcon)
|
||||
{
|
||||
labelAdditionalComponentsLeft.push(new HeaderIcon(topLeftInsideCardIcon.name, topLeftInsideCardIcon.path, topLeftInsideCardIcon.color, "topLeftInsideCard"));
|
||||
labelAdditionalComponentsRight.push(new HeaderIcon(topRightInsideCardIcon.name, topRightInsideCardIcon.path, topRightInsideCardIcon.color));
|
||||
}
|
||||
}
|
||||
|
||||
@ -314,7 +302,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
|
||||
reloadWidgetCallback={(data) => reloadWidget(i, data)}
|
||||
isChild={areChildren}
|
||||
labelAdditionalComponentsRight={labelAdditionalComponentsRight}
|
||||
labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
|
||||
>
|
||||
<StackedBarChart data={widgetData[i]?.chartData} chartSubheaderData={widgetData[i]?.chartSubheaderData} />
|
||||
</Widget>
|
||||
@ -327,8 +314,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
|
||||
widgetData={widgetData[i]}
|
||||
reloadWidgetCallback={(data) => reloadWidget(i, data)}
|
||||
showReloadControl={false}
|
||||
labelAdditionalComponentsRight={labelAdditionalComponentsRight}
|
||||
labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
|
||||
>
|
||||
<div className="widgetProcessMidDiv" style={{height: "100%"}}>
|
||||
<ProcessRun process={widgetData[i]?.processMetaData} defaultProcessValues={widgetData[i]?.defaultValues} isWidget={true} forceReInit={widgetCounter} />
|
||||
@ -342,8 +327,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
|
||||
widgetMetaData={widgetMetaData}
|
||||
widgetData={widgetData[i]}
|
||||
reloadWidgetCallback={(data) => reloadWidget(i, data)}
|
||||
labelAdditionalComponentsRight={labelAdditionalComponentsRight}
|
||||
labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
|
||||
>
|
||||
<Box sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
||||
<Box padding="1rem" sx={{width: "100%"}}>
|
||||
@ -359,8 +342,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
|
||||
widgetMetaData={widgetMetaData}
|
||||
reloadWidgetCallback={(data) => reloadWidget(i, data)}
|
||||
widgetData={widgetData[i]}
|
||||
labelAdditionalComponentsRight={labelAdditionalComponentsRight}
|
||||
labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
|
||||
>
|
||||
<Box>
|
||||
<MDTypography component="div" variant="button" color="text" fontWeight="light">
|
||||
@ -392,11 +373,8 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
|
||||
widgetData={widgetData[i]}
|
||||
isChild={areChildren}
|
||||
reloadWidgetCallback={(data) => reloadWidget(i, data)}
|
||||
labelAdditionalComponentsRight={labelAdditionalComponentsRight}
|
||||
labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
|
||||
>
|
||||
<StatisticsCard
|
||||
widgetMetaData={widgetMetaData}
|
||||
data={widgetData[i]}
|
||||
increaseIsGood={true}
|
||||
/>
|
||||
@ -436,7 +414,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
|
||||
reloadWidgetCallback={(data) => reloadWidget(i, data)}
|
||||
isChild={areChildren}
|
||||
labelAdditionalComponentsRight={labelAdditionalComponentsRight}
|
||||
labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
|
||||
>
|
||||
<div>
|
||||
<PieChart
|
||||
@ -472,8 +449,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
|
||||
widgetData={widgetData[i]}
|
||||
reloadWidgetCallback={(data) => reloadWidget(i, data)}
|
||||
isChild={areChildren}
|
||||
labelAdditionalComponentsRight={labelAdditionalComponentsRight}
|
||||
labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
|
||||
>
|
||||
<DefaultLineChart sx={{alignItems: "center"}}
|
||||
data={widgetData[i]?.chartData}
|
||||
@ -502,34 +477,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
widgetMetaData.type === "composite" && (
|
||||
<Widget
|
||||
widgetMetaData={widgetMetaData}
|
||||
widgetData={widgetData[i]}
|
||||
reloadWidgetCallback={(data) => reloadWidget(i, data)}
|
||||
isChild={areChildren}
|
||||
labelAdditionalComponentsRight={labelAdditionalComponentsRight}
|
||||
labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
|
||||
>
|
||||
<CompositeWidget widgetMetaData={widgetMetaData} data={widgetData[i]} />
|
||||
</Widget>
|
||||
)
|
||||
}
|
||||
{
|
||||
widgetMetaData.type === "block" && (
|
||||
<Widget
|
||||
widgetMetaData={widgetMetaData}
|
||||
widgetData={widgetData[i]}
|
||||
reloadWidgetCallback={(data) => reloadWidget(i, data)}
|
||||
isChild={areChildren}
|
||||
labelAdditionalComponentsRight={labelAdditionalComponentsRight}
|
||||
labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
|
||||
>
|
||||
<WidgetBlock widgetMetaData={widgetMetaData} block={widgetData[i]} />
|
||||
</Widget>
|
||||
)
|
||||
}
|
||||
{
|
||||
widgetMetaData.type === "dataBagViewer" && (
|
||||
widgetData && widgetData[i] && widgetData[i].queryParams &&
|
||||
@ -576,6 +523,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
|
||||
renderedWidget = (<TabPanel index={i} value={selectedTab} style={{
|
||||
padding: 0,
|
||||
margin: "-1rem",
|
||||
marginBottom: "-3.5rem",
|
||||
width: "calc(100% + 2rem)"
|
||||
}}>
|
||||
{renderedWidget}
|
||||
|
||||
@ -33,7 +33,6 @@ import Client from "qqq/utils/qqq/Client";
|
||||
//////////////////////////////////////////////
|
||||
export interface ParentWidgetData
|
||||
{
|
||||
label?: string;
|
||||
dropdownLabelList: string[];
|
||||
dropdownNameList: string[];
|
||||
dropdownDataList: {
|
||||
@ -43,7 +42,6 @@ export interface ParentWidgetData
|
||||
childWidgetNameList: string[];
|
||||
dropdownNeedsSelectedText?: string;
|
||||
storeDropdownSelections?: boolean;
|
||||
csvData?: any[][];
|
||||
icon?: string;
|
||||
layoutType: string;
|
||||
}
|
||||
@ -66,8 +64,7 @@ interface Props
|
||||
|
||||
|
||||
const qController = Client.getInstance();
|
||||
|
||||
function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidgetCallback, entityPrimaryKey, tableName, storeDropdownSelections}: Props,): JSX.Element
|
||||
function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidgetCallback, entityPrimaryKey, tableName, storeDropdownSelections}: Props, ): JSX.Element
|
||||
{
|
||||
const [childUrlParams, setChildUrlParams] = useState((urlParams) ? urlParams : "");
|
||||
const [qInstance, setQInstance] = useState(null as QInstance);
|
||||
@ -84,27 +81,27 @@ function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidge
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if (qInstance && data && data.childWidgetNameList)
|
||||
if(qInstance && data && data.childWidgetNameList)
|
||||
{
|
||||
let widgetMetaDataList = [] as QWidgetMetaData[];
|
||||
data?.childWidgetNameList.forEach((widgetName: string) =>
|
||||
{
|
||||
widgetMetaDataList.push(qInstance.widgets.get(widgetName));
|
||||
});
|
||||
})
|
||||
setWidgets(widgetMetaDataList);
|
||||
}
|
||||
}, [qInstance, data, childUrlParams]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
setChildUrlParams(urlParams);
|
||||
setChildUrlParams(urlParams)
|
||||
}, [urlParams]);
|
||||
|
||||
const parentReloadWidgetCallback = (data: string) =>
|
||||
{
|
||||
setChildUrlParams(data);
|
||||
reloadWidgetCallback(data);
|
||||
};
|
||||
}
|
||||
|
||||
///////////////////////////////////////////////////////////////////////////////////////////
|
||||
// if this parent widget is in card form, and its children are too, then we need some px //
|
||||
@ -128,7 +125,7 @@ function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidge
|
||||
omitPadding={omitPadding}
|
||||
>
|
||||
<Box sx={{height: "100%", width: "100%"}} px={px}>
|
||||
<DashboardWidgets widgetMetaDataList={widgets} entityPrimaryKey={entityPrimaryKey} tableName={tableName} childUrlParams={childUrlParams} areChildren={true} parentWidgetMetaData={widgetMetaData} wrapWidgetsInTabPanels={data.layoutType?.toLowerCase() == "tabs"} />
|
||||
<DashboardWidgets widgetMetaDataList={widgets} entityPrimaryKey={entityPrimaryKey} tableName={tableName} childUrlParams={childUrlParams} areChildren={true} parentWidgetMetaData={widgetMetaData} wrapWidgetsInTabPanels={data.layoutType == "TABS"}/>
|
||||
</Box>
|
||||
</Widget>
|
||||
) : null
|
||||
|
||||
@ -28,14 +28,10 @@ import Icon from "@mui/material/Icon";
|
||||
import Tooltip from "@mui/material/Tooltip/Tooltip";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import parse from "html-react-parser";
|
||||
import React, {useContext, useEffect, useState} from "react";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {NavigateFunction, useNavigate} from "react-router-dom";
|
||||
import QContext from "QContext";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
|
||||
import WidgetDropdownMenu, {DropdownOption} from "qqq/components/widgets/components/WidgetDropdownMenu";
|
||||
import {WidgetUtils} from "qqq/components/widgets/WidgetUtils";
|
||||
import HtmlUtils from "qqq/utils/HtmlUtils";
|
||||
|
||||
export interface WidgetData
|
||||
{
|
||||
@ -113,18 +109,16 @@ export class HeaderIcon extends LabelComponent
|
||||
iconPath: string;
|
||||
color: string;
|
||||
coloredBG: boolean;
|
||||
role: string;
|
||||
|
||||
iconColor: string;
|
||||
bgColor: string;
|
||||
|
||||
constructor(iconName: string, iconPath: string, color: string, role?: string, coloredBG: boolean = true)
|
||||
constructor(iconName: string, iconPath: string, color: string, coloredBG: boolean = true)
|
||||
{
|
||||
super();
|
||||
this.iconName = iconName;
|
||||
this.iconPath = iconPath;
|
||||
this.color = color;
|
||||
this.role = role;
|
||||
this.coloredBG = coloredBG;
|
||||
|
||||
this.iconColor = this.coloredBG ? "#FFFFFF" : this.color;
|
||||
@ -134,7 +128,7 @@ export class HeaderIcon extends LabelComponent
|
||||
|
||||
render = (args: LabelComponentRenderArgs): JSX.Element =>
|
||||
{
|
||||
const styles: any = {
|
||||
const styles = {
|
||||
width: "1.75rem",
|
||||
height: "1.75rem",
|
||||
color: this.iconColor,
|
||||
@ -142,12 +136,6 @@ export class HeaderIcon extends LabelComponent
|
||||
borderRadius: "0.25rem"
|
||||
};
|
||||
|
||||
if (this.role == "topLeftInsideCard")
|
||||
{
|
||||
styles["order"] = -1;
|
||||
styles["marginRight"] = "0.5rem";
|
||||
}
|
||||
|
||||
if (this.iconPath)
|
||||
{
|
||||
return (<Box sx={{textAlign: "center", ...styles}}><img src={this.iconPath} width="16" height="16" /></Box>);
|
||||
@ -235,22 +223,22 @@ export class Dropdown extends LabelComponent
|
||||
try
|
||||
{
|
||||
const localStorageOption = JSON.parse(localStorage.getItem(localStorageKey));
|
||||
if (localStorageOption)
|
||||
if(localStorageOption)
|
||||
{
|
||||
const id = localStorageOption.id;
|
||||
for (let i = 0; i < this.options.length; i++)
|
||||
{
|
||||
if (this.options[i].id == id)
|
||||
{
|
||||
defaultValue = this.options[i];
|
||||
defaultValue = this.options[i]
|
||||
args.dropdownData[args.componentIndex] = defaultValue?.id;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
catch (e)
|
||||
catch(e)
|
||||
{
|
||||
console.log(`Error getting default value for dropdown [${this.dropdownName}] from local storage`, e);
|
||||
console.log(`Error getting default value for dropdown [${this.dropdownName}] from local storage`, e)
|
||||
}
|
||||
}
|
||||
|
||||
@ -261,7 +249,7 @@ export class Dropdown extends LabelComponent
|
||||
{
|
||||
for (let i = 0; i < this.options.length; i++)
|
||||
{
|
||||
if (this.options[i].id == this.dropdownDefaultValue)
|
||||
if(this.options[i].id == this.dropdownDefaultValue)
|
||||
{
|
||||
defaultValue = this.options[i];
|
||||
args.dropdownData[args.componentIndex] = defaultValue?.id;
|
||||
@ -329,13 +317,11 @@ export class ReloadControl extends LabelComponent
|
||||
|
||||
render = (args: LabelComponentRenderArgs): JSX.Element =>
|
||||
{
|
||||
return (<Typography key={1} variant="body2" py={0} px={0} display="inline" position="relative" top="-0.25rem">
|
||||
<Tooltip title="Refresh">
|
||||
<Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={() => this.callback()}>
|
||||
<Icon sx={{color: colors.gray.main, fontSize: 1.125}}>refresh</Icon>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Typography>);
|
||||
return (
|
||||
<Typography variant="body2" py={2} px={0} display="inline" position="relative" top="-0.175rem">
|
||||
<Tooltip title="Refresh"><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={() => this.callback()}><Icon sx={{color: colors.gray.main, fontSize: 1.125}}>refresh</Icon></Button></Tooltip>
|
||||
</Typography>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
@ -350,31 +336,15 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
|
||||
{
|
||||
const navigate = useNavigate();
|
||||
const [dropdownData, setDropdownData] = useState([]);
|
||||
const [fullScreenWidgetClassName, setFullScreenWidgetClassName] = useState("");
|
||||
const [reloading, setReloading] = useState(false);
|
||||
const [dropdownDataJSON, setDropdownDataJSON] = useState("");
|
||||
const [labelComponentsLeft, setLabelComponentsLeft] = useState([] as LabelComponent[]);
|
||||
const [labelComponentsRight, setLabelComponentsRight] = useState([] as LabelComponent[]);
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// support for using widget (data) label as page header, w/o it disappearing if dropdowns are changed //
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
const [lastSeenLabel, setLastSeenLabel] = useState("");
|
||||
const [usingLabelAsTitle, setUsingLabelAsTitle] = useState(false);
|
||||
|
||||
const {helpHelpActive} = useContext(QContext);
|
||||
|
||||
function renderComponent(component: LabelComponent, componentIndex: number)
|
||||
{
|
||||
if (component && component.render)
|
||||
{
|
||||
return component.render({navigate: navigate, widgetProps: props, dropdownData: dropdownData, componentIndex: componentIndex, reloadFunction: doReload});
|
||||
}
|
||||
else
|
||||
{
|
||||
console.log("Request to render a null component or component without a render function...");
|
||||
console.log(JSON.stringify(component));
|
||||
return (<></>);
|
||||
}
|
||||
return component.render({navigate: navigate, widgetProps: props, dropdownData: dropdownData, componentIndex: componentIndex, reloadFunction: doReload});
|
||||
}
|
||||
|
||||
useEffect(() =>
|
||||
@ -401,7 +371,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
|
||||
// for initial render, put right-components from props into the state variable //
|
||||
/////////////////////////////////////////////////////////////////////////////////
|
||||
const stateLabelComponentsRight = [] as LabelComponent[];
|
||||
// console.log(`${props.widgetMetaData.name} initiating right-components`);
|
||||
// console.log(`${props.widgetMetaData.name} init'ing right-components`);
|
||||
if (props.labelAdditionalComponentsRight)
|
||||
{
|
||||
props.labelAdditionalComponentsRight.map((component) => stateLabelComponentsRight.push(component));
|
||||
@ -435,14 +405,11 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
|
||||
{
|
||||
// console.log(`${props.widgetMetaData.name} building a Dropdown, data is: ${dropdownData}`);
|
||||
let defaultValue = null;
|
||||
if (props.widgetData.dropdownDefaultValueList && props.widgetData.dropdownDefaultValueList.length >= index)
|
||||
if(props.widgetData.dropdownDefaultValueList && props.widgetData.dropdownDefaultValueList.length >= index)
|
||||
{
|
||||
defaultValue = props.widgetData.dropdownDefaultValueList[index];
|
||||
}
|
||||
if (props.widgetData?.dropdownLabelList && props.widgetData?.dropdownLabelList[index] && props.widgetMetaData?.dropdowns && props.widgetMetaData?.dropdowns[index] && props.widgetData?.dropdownNameList && props.widgetData?.dropdownNameList[index])
|
||||
{
|
||||
updatedStateLabelComponentsRight.push(new Dropdown(props.widgetData.dropdownLabelList[index], props.widgetMetaData.dropdowns[index], dropdownData, defaultValue, props.widgetData.dropdownNameList[index], handleDataChange));
|
||||
}
|
||||
updatedStateLabelComponentsRight.push(new Dropdown(props.widgetData.dropdownLabelList[index], props.widgetMetaData.dropdowns[index], dropdownData, defaultValue, props.widgetData.dropdownNameList[index], handleDataChange));
|
||||
});
|
||||
setLabelComponentsRight(updatedStateLabelComponentsRight);
|
||||
}
|
||||
@ -533,35 +500,18 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
|
||||
}
|
||||
};
|
||||
|
||||
const onExportClick = () =>
|
||||
const toggleFullScreenWidget = () =>
|
||||
{
|
||||
if (props.widgetData?.csvData)
|
||||
if (fullScreenWidgetClassName)
|
||||
{
|
||||
const csv = WidgetUtils.widgetCsvDataToString(props.widgetData);
|
||||
const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
|
||||
HtmlUtils.download(fileName, csv);
|
||||
setFullScreenWidgetClassName("");
|
||||
}
|
||||
else
|
||||
{
|
||||
alert("There is no data available to export.");
|
||||
setFullScreenWidgetClassName("fullScreenWidget");
|
||||
}
|
||||
};
|
||||
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// add the export button to the label's left elements, if the meta-data says to show it //
|
||||
// don't do this for 2 types which themselves add the button (and have custom code to do the export) //
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
let localLabelAdditionalElementsLeft = [...props.labelAdditionalElementsLeft];
|
||||
if (props.widgetMetaData?.showExportButton && props.widgetMetaData?.type !== "table" && props.widgetMetaData?.type !== "childRecordList")
|
||||
{
|
||||
if (!localLabelAdditionalElementsLeft)
|
||||
{
|
||||
localLabelAdditionalElementsLeft = [];
|
||||
}
|
||||
|
||||
localLabelAdditionalElementsLeft.push(WidgetUtils.generateExportButton(onExportClick));
|
||||
}
|
||||
|
||||
const hasPermission = props.widgetData?.hasPermission === undefined || props.widgetData?.hasPermission === true;
|
||||
|
||||
const isSet = (v: any): boolean =>
|
||||
@ -576,129 +526,85 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
|
||||
if (hasPermission)
|
||||
{
|
||||
needLabelBox ||= (labelComponentsLeft && labelComponentsLeft.length > 0);
|
||||
needLabelBox ||= (localLabelAdditionalElementsLeft && localLabelAdditionalElementsLeft.length > 0);
|
||||
needLabelBox ||= (props.labelAdditionalElementsLeft && props.labelAdditionalElementsLeft.length > 0);
|
||||
needLabelBox ||= (labelComponentsRight && labelComponentsRight.length > 0);
|
||||
needLabelBox ||= isSet(props.widgetData?.icon);
|
||||
needLabelBox ||= isSet(props.widgetMetaData?.icon);
|
||||
needLabelBox ||= isSet(props.widgetData?.label);
|
||||
needLabelBox ||= isSet(props.widgetMetaData?.label);
|
||||
}
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////
|
||||
// first look for a label in the widget data, which would override that in the metadata //
|
||||
// note - previously this had a ?: and one was pl={2}, the other was pl={3}... //
|
||||
//////////////////////////////////////////////////////////////////////////////////////////
|
||||
const isParentWidget = props.widgetMetaData.type == "parentWidget"; // todo - do we need to know top-level parent, vs. a nested parent?
|
||||
let labelToUse = props.widgetData?.label ?? props.widgetMetaData?.label;
|
||||
|
||||
if (!labelToUse)
|
||||
{
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// prevent the label from disappearing, especially when it's being used as the page header //
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////
|
||||
if (lastSeenLabel && isParentWidget && usingLabelAsTitle)
|
||||
{
|
||||
labelToUse = lastSeenLabel;
|
||||
}
|
||||
}
|
||||
|
||||
const labelToUse = props.widgetData?.label ?? props.widgetMetaData?.label;
|
||||
let labelElement = (
|
||||
<Typography sx={{cursor: "default", pl: "auto", fontWeight: 600}} variant={isParentWidget && (props.widgetData.isLabelPageTitle || usingLabelAsTitle) ? "h3" : "h6"} display="inline">
|
||||
<Typography sx={{cursor: "default", pl: "auto", pt: props.widgetMetaData.type == "parentWidget" ? "1rem" : "auto", fontWeight: 600}} variant="h6" display="inline">
|
||||
{labelToUse}
|
||||
</Typography>
|
||||
);
|
||||
|
||||
let sublabelElement = (
|
||||
<Box height="20px">
|
||||
<Typography sx={{position: "relative", top: "-18px"}} variant="caption">
|
||||
{props.widgetData?.sublabel}
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
|
||||
if (labelToUse && labelToUse != lastSeenLabel)
|
||||
if (props.widgetMetaData.tooltip)
|
||||
{
|
||||
setLastSeenLabel(labelToUse);
|
||||
setUsingLabelAsTitle(props.widgetData.isLabelPageTitle);
|
||||
labelElement = <Tooltip title={props.widgetMetaData.tooltip} arrow={false} followCursor={true} placement="bottom-start">{labelElement}</Tooltip>;
|
||||
}
|
||||
|
||||
const helpRoles = ["ALL_SCREENS"]
|
||||
const slotName = "label";
|
||||
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}`} />;
|
||||
labelElement = <Tooltip title={formattedHelpContent} arrow={true} placement="bottom-start">{labelElement}</Tooltip>;
|
||||
}
|
||||
else if (props.widgetMetaData?.tooltip)
|
||||
{
|
||||
labelElement = <Tooltip title={props.widgetMetaData.tooltip} arrow={true} placement="bottom-start">{labelElement}</Tooltip>;
|
||||
}
|
||||
|
||||
const isTable = props.widgetMetaData.type == "table";
|
||||
|
||||
const errorLoading = props.widgetData?.errorLoading !== undefined && props.widgetData?.errorLoading === true;
|
||||
const widgetContent =
|
||||
<Box sx={{width: "100%", height: "100%", minHeight: props.widgetMetaData?.minHeight ? props.widgetMetaData?.minHeight : "initial"}}>
|
||||
{
|
||||
needLabelBox &&
|
||||
<Box display="flex" justifyContent="space-between" alignItems="flex-start" sx={{width: "100%", ...props.labelBoxAdditionalSx}} minHeight={"2.5rem"}>
|
||||
<Box display="flex" flexDirection="column">
|
||||
<Box display="flex" alignItems="baseline">
|
||||
{
|
||||
hasPermission ?
|
||||
props.widgetMetaData?.icon && (
|
||||
<Box ml={1} mr={2} mt={-4} sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "64px",
|
||||
height: "64px",
|
||||
borderRadius: "8px",
|
||||
background: colors.info.main,
|
||||
color: "#ffffff",
|
||||
float: "left"
|
||||
}}
|
||||
>
|
||||
<Icon fontSize="medium" color="inherit">
|
||||
{props.widgetMetaData.icon}
|
||||
</Icon>
|
||||
</Box>
|
||||
) :
|
||||
(
|
||||
<Box ml={3} mt={-4} sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "64px",
|
||||
height: "64px",
|
||||
borderRadius: "8px",
|
||||
background: colors.info.main,
|
||||
color: "#ffffff",
|
||||
float: "left"
|
||||
}}
|
||||
>
|
||||
<Icon fontSize="medium" color="inherit">lock</Icon>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
{
|
||||
hasPermission && labelToUse && (labelElement)
|
||||
}
|
||||
{
|
||||
hasPermission && (
|
||||
labelComponentsLeft.map((component, i) =>
|
||||
{
|
||||
return (<React.Fragment key={i}>{renderComponent(component, i)}</React.Fragment>);
|
||||
})
|
||||
<Box>
|
||||
{
|
||||
hasPermission ?
|
||||
props.widgetMetaData?.icon && (
|
||||
<Box ml={1} mr={2} mt={-4} sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "64px",
|
||||
height: "64px",
|
||||
borderRadius: "8px",
|
||||
background: colors.info.main,
|
||||
color: "#ffffff",
|
||||
float: "left"
|
||||
}}
|
||||
>
|
||||
<Icon fontSize="medium" color="inherit">
|
||||
{props.widgetMetaData.icon}
|
||||
</Icon>
|
||||
</Box>
|
||||
) :
|
||||
(
|
||||
<Box ml={3} mt={-4} sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "64px",
|
||||
height: "64px",
|
||||
borderRadius: "8px",
|
||||
background: colors.info.main,
|
||||
color: "#ffffff",
|
||||
float: "left"
|
||||
}}
|
||||
>
|
||||
<Icon fontSize="medium" color="inherit">lock</Icon>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
{localLabelAdditionalElementsLeft}
|
||||
</Box>
|
||||
<Box display="flex">
|
||||
{
|
||||
hasPermission && props.widgetData?.sublabel && (sublabelElement)
|
||||
}
|
||||
</Box>
|
||||
}
|
||||
{
|
||||
hasPermission && labelToUse && (labelElement)
|
||||
}
|
||||
{
|
||||
hasPermission && (
|
||||
labelComponentsLeft.map((component, i) =>
|
||||
{
|
||||
return (<span key={i}>{renderComponent(component, i)}</span>);
|
||||
})
|
||||
)
|
||||
}
|
||||
{props.labelAdditionalElementsLeft}
|
||||
</Box>
|
||||
<Box>
|
||||
{
|
||||
@ -744,27 +650,17 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
|
||||
}
|
||||
{
|
||||
!errorLoading && props?.footerHTML && (
|
||||
<Box mt={isTable ? "36px" : 1} ml={isTable ? 0 : 3} mr={isTable ? 0 : 3} mb={isTable ? "-12px" : 2} sx={{fontWeight: 300, color: "#7b809a", display: "flex", alignContent: "flex-end", fontSize: "14px"}}>{parse(props.footerHTML)}</Box>
|
||||
<Box mt={1} ml={3} mr={3} mb={2} sx={{fontWeight: 300, color: "#7b809a", display: "flex", alignContent: "flex-end", fontSize: "14px"}}>{parse(props.footerHTML)}</Box>
|
||||
)
|
||||
}
|
||||
</Box>;
|
||||
|
||||
const padding = props.omitPadding ? "auto" : "24px 16px";
|
||||
|
||||
///////////////////////////////////////////////////
|
||||
// try to make tables fill their entire "parent" //
|
||||
///////////////////////////////////////////////////
|
||||
let noCardMarginBottom = "unset";
|
||||
if (isTable)
|
||||
{
|
||||
noCardMarginBottom = "-8px";
|
||||
}
|
||||
|
||||
return props.widgetMetaData?.isCard
|
||||
? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%", p: padding}} className="widget inCard">
|
||||
? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%", p: padding}} className={fullScreenWidgetClassName}>
|
||||
{widgetContent}
|
||||
</Card>
|
||||
: <span style={{width: "100%", padding: padding, marginBottom: noCardMarginBottom}} className="widget noCard">{widgetContent}</span>;
|
||||
: <span style={{width: "100%", padding: padding}}>{widgetContent}</span>;
|
||||
}
|
||||
|
||||
export default Widget;
|
||||
|
||||
@ -1,90 +0,0 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import {Alert, Skeleton} from "@mui/material";
|
||||
import React from "react";
|
||||
import BigNumberBlock from "qqq/components/widgets/blocks/BigNumberBlock";
|
||||
import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
|
||||
import DividerBlock from "qqq/components/widgets/blocks/DividerBlock";
|
||||
import NumberIconBadgeBlock from "qqq/components/widgets/blocks/NumberIconBadgeBlock";
|
||||
import ProgressBarBlock from "qqq/components/widgets/blocks/ProgressBarBlock";
|
||||
import TableSubRowDetailRowBlock from "qqq/components/widgets/blocks/TableSubRowDetailRowBlock";
|
||||
import TextBlock from "qqq/components/widgets/blocks/TextBlock";
|
||||
import UpOrDownNumberBlock from "qqq/components/widgets/blocks/UpOrDownNumberBlock";
|
||||
import CompositeWidget from "qqq/components/widgets/CompositeWidget";
|
||||
|
||||
|
||||
interface WidgetBlockProps
|
||||
{
|
||||
widgetMetaData: QWidgetMetaData;
|
||||
block: BlockData;
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Component to render a single Block in the widget framework!
|
||||
*******************************************************************************/
|
||||
export default function WidgetBlock({widgetMetaData, block}: WidgetBlockProps): JSX.Element
|
||||
{
|
||||
if(!block)
|
||||
{
|
||||
return (<Skeleton />);
|
||||
}
|
||||
|
||||
if(!block.values)
|
||||
{
|
||||
block.values = {};
|
||||
}
|
||||
|
||||
if(!block.styles)
|
||||
{
|
||||
block.styles = {};
|
||||
}
|
||||
|
||||
if(block.blockTypeName == "COMPOSITE")
|
||||
{
|
||||
// @ts-ignore - special case for composite type block...
|
||||
return (<CompositeWidget widgetMetaData={widgetMetaData} data={block} />);
|
||||
}
|
||||
|
||||
switch(block.blockTypeName)
|
||||
{
|
||||
case "TEXT":
|
||||
return (<TextBlock widgetMetaData={widgetMetaData} data={block} />);
|
||||
case "NUMBER_ICON_BADGE":
|
||||
return (<NumberIconBadgeBlock widgetMetaData={widgetMetaData} data={block} />);
|
||||
case "UP_OR_DOWN_NUMBER":
|
||||
return (<UpOrDownNumberBlock widgetMetaData={widgetMetaData} data={block} />);
|
||||
case "TABLE_SUB_ROW_DETAIL_ROW":
|
||||
return (<TableSubRowDetailRowBlock widgetMetaData={widgetMetaData} data={block} />);
|
||||
case "PROGRESS_BAR":
|
||||
return (<ProgressBarBlock widgetMetaData={widgetMetaData} data={block} />);
|
||||
case "DIVIDER":
|
||||
return (<DividerBlock widgetMetaData={widgetMetaData} data={block} />);
|
||||
case "BIG_NUMBER":
|
||||
return (<BigNumberBlock widgetMetaData={widgetMetaData} data={block} />);
|
||||
default:
|
||||
return (<Alert sx={{m: "0.5rem"}} color="warning">Unsupported block type: {block.blockTypeName}</Alert>)
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,100 +0,0 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import Button from "@mui/material/Button";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import Tooltip from "@mui/material/Tooltip/Tooltip";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import React from "react";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
import {WidgetData} from "qqq/components/widgets/Widget";
|
||||
import ValueUtils from "qqq/utils/qqq/ValueUtils";
|
||||
|
||||
/*******************************************************************************
|
||||
** Utility class used by Widgets
|
||||
**
|
||||
*******************************************************************************/
|
||||
export class WidgetUtils
|
||||
{
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
public static generateExportButton = (onExportClick: () => void): JSX.Element =>
|
||||
{
|
||||
return (<Typography key={1} variant="body2" py={0} px={0} display="inline" position="relative" top="-0.25rem">
|
||||
<Tooltip title="Export">
|
||||
<Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={false}>
|
||||
<Icon sx={{color: colors.gray.main, fontSize: 1.125}}>save_alt</Icon>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Typography>);
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
public static widgetCsvDataToString = (data: WidgetData): string =>
|
||||
{
|
||||
function isNumeric(x: any)
|
||||
{
|
||||
return !isNaN(Number(x));
|
||||
}
|
||||
|
||||
let csv = "";
|
||||
for (let i = 0; i < data.csvData.length; i++)
|
||||
{
|
||||
for (let j = 0; j < data.csvData[i].length; j++)
|
||||
{
|
||||
if (j > 0)
|
||||
{
|
||||
csv += ",";
|
||||
}
|
||||
|
||||
let cell = data.csvData[i][j];
|
||||
if (cell && isNumeric(String(cell)))
|
||||
{
|
||||
csv += cell;
|
||||
}
|
||||
else
|
||||
{
|
||||
csv += `"${ValueUtils.cleanForCsv(cell)}"`;
|
||||
}
|
||||
}
|
||||
csv += "\n";
|
||||
}
|
||||
|
||||
return (csv);
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
public static makeExportFileName = (data: WidgetData, widgetMetaData: QWidgetMetaData): string =>
|
||||
{
|
||||
const fileName = (data?.label ?? widgetMetaData.label) + " " + ValueUtils.formatDateTimeForFileName(new Date()) + ".csv";
|
||||
return (fileName);
|
||||
};
|
||||
|
||||
}
|
||||
@ -1,67 +0,0 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
|
||||
import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Block that renders ... a big number, optionally with some other stuff.
|
||||
**
|
||||
** ${heading}
|
||||
** ${number} ${context}
|
||||
*******************************************************************************/
|
||||
export default function BigNumberBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
|
||||
{
|
||||
let flexJustifyContent = "normal";
|
||||
let flexAlignItems = "baseline";
|
||||
|
||||
return (
|
||||
<div style={{width: data.styles.width ?? "auto"}}>
|
||||
|
||||
<div style={{fontWeight: "700", fontSize: "0.875rem", color: "#3D3D3D", marginBottom: "-0.5rem"}}>
|
||||
<BlockElementWrapper metaData={widgetMetaData} data={data} slot="heading">
|
||||
<span>{data.values.heading}</span>
|
||||
</BlockElementWrapper>
|
||||
</div>
|
||||
|
||||
<div style={{display: "flex", alignItems: flexAlignItems, justifyContent: flexJustifyContent}}>
|
||||
|
||||
<div style={{display: "flex", alignItems: "baseline"}}>
|
||||
<div style={{fontWeight: "700", fontSize: "2rem", marginRight: "0.25rem"}}>
|
||||
<BlockElementWrapper metaData={widgetMetaData} data={data} slot="number">
|
||||
<span style={{color: data.styles.numberColor}}>{data.values.number}</span>
|
||||
</BlockElementWrapper>
|
||||
</div>
|
||||
{
|
||||
data.values.context &&
|
||||
<div style={{fontWeight: "500", fontSize: "0.875rem", color: "#7b809a"}}>
|
||||
<BlockElementWrapper metaData={widgetMetaData} data={data} slot="context">
|
||||
<span>{data.values.context}</span>
|
||||
</BlockElementWrapper>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,106 +0,0 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import {Tooltip} from "@mui/material";
|
||||
import React, {ReactElement, useContext} from "react";
|
||||
import {Link} from "react-router-dom";
|
||||
import QContext from "QContext";
|
||||
import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
|
||||
import {BlockData, BlockLink, BlockTooltip} from "qqq/components/widgets/blocks/BlockModels";
|
||||
|
||||
interface BlockElementWrapperProps
|
||||
{
|
||||
data: BlockData;
|
||||
metaData: QWidgetMetaData;
|
||||
slot: string
|
||||
linkProps?: any;
|
||||
children: ReactElement;
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
** For Blocks - wrap their "slot" elements with an optional tooltip and/or link
|
||||
*******************************************************************************/
|
||||
export default function BlockElementWrapper({data, metaData, slot, linkProps, children}: BlockElementWrapperProps): JSX.Element
|
||||
{
|
||||
const {helpHelpActive} = useContext(QContext);
|
||||
|
||||
let link: BlockLink;
|
||||
let tooltip: BlockTooltip;
|
||||
|
||||
if(slot)
|
||||
{
|
||||
link = data.linkMap && data.linkMap[slot.toUpperCase()];
|
||||
if(!link)
|
||||
{
|
||||
link = data.link;
|
||||
}
|
||||
|
||||
tooltip = data.tooltipMap && data.tooltipMap[slot.toUpperCase()];
|
||||
if(!tooltip)
|
||||
{
|
||||
tooltip = data.tooltip;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
link = data.link;
|
||||
tooltip = data.tooltip;
|
||||
}
|
||||
|
||||
if(!tooltip)
|
||||
{
|
||||
const helpRoles = ["ALL_SCREENS"]
|
||||
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// the full keys in the helpContent table will look like: //
|
||||
// widget:MyCoolWidget;slot=myBlockId,label (if the block has a blockId in data) //
|
||||
// widget:MyCoolWidget;slot=label (no blockId; note, label is slot name here) //
|
||||
// in the widget metaData, the map of helpContent will just have the "slot" portion as a key //
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////
|
||||
const key = data.blockId ? `${data.blockId},${slot}` : slot;
|
||||
const showHelp = helpHelpActive || hasHelpContent(metaData?.helpContent?.get(key), helpRoles);
|
||||
|
||||
if(showHelp)
|
||||
{
|
||||
const formattedHelpContent = <HelpContent helpContents={metaData?.helpContent?.get(key)} roles={helpRoles} helpContentKey={`widget:${metaData?.name};slot:${key}`} />;
|
||||
tooltip = {title: formattedHelpContent, placement: "bottom"}
|
||||
}
|
||||
}
|
||||
|
||||
let rs = children;
|
||||
|
||||
if(link)
|
||||
{
|
||||
rs = <Link to={link.href} target={link.target} style={{color: "#546E7A"}} {...linkProps}>{rs}</Link>
|
||||
}
|
||||
|
||||
if(tooltip)
|
||||
{
|
||||
let placement = tooltip.placement ? tooltip.placement.toLowerCase() : "bottom"
|
||||
|
||||
// @ts-ignore - placement possible values
|
||||
rs = <Tooltip title={tooltip.title} placement={placement}>{rs}</Tooltip>
|
||||
}
|
||||
|
||||
return (rs);
|
||||
}
|
||||
@ -1,59 +0,0 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
|
||||
|
||||
export interface BlockData
|
||||
{
|
||||
blockId?: string;
|
||||
blockTypeName: string;
|
||||
|
||||
tooltip?: BlockTooltip;
|
||||
link?: BlockLink;
|
||||
tooltipMap?: {[slot: string]: BlockTooltip};
|
||||
linkMap?: {[slot: string]: BlockLink};
|
||||
|
||||
values: any;
|
||||
styles?: any;
|
||||
}
|
||||
|
||||
|
||||
export interface BlockTooltip
|
||||
{
|
||||
title: string | JSX.Element;
|
||||
placement: string;
|
||||
}
|
||||
|
||||
|
||||
export interface BlockLink
|
||||
{
|
||||
href: string;
|
||||
target: string;
|
||||
}
|
||||
|
||||
|
||||
export interface StandardBlockComponentProps
|
||||
{
|
||||
widgetMetaData: QWidgetMetaData;
|
||||
data: BlockData;
|
||||
}
|
||||
|
||||
@ -1,33 +0,0 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Block that renders a simple dividing line
|
||||
** margins & width are set such that it covers the padding of a card.
|
||||
** if we need to use it differently, a style attribute should be added to its backend data.
|
||||
*******************************************************************************/
|
||||
export default function DividerBlock({}: StandardBlockComponentProps): JSX.Element
|
||||
{
|
||||
return (<div style={{margin: "1rem -1rem", width: "calc(100% + 2rem)", borderBottom: "1px solid #E0E0E0"}} />);
|
||||
}
|
||||
@ -1,48 +0,0 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import Icon from "@mui/material/Icon";
|
||||
import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
|
||||
import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
|
||||
|
||||
/*******************************************************************************
|
||||
** Block that renders ... a number, and an icon, like a badge.
|
||||
**
|
||||
** ${number} ${icon}
|
||||
*******************************************************************************/
|
||||
export default function NumberIconBadgeBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
|
||||
{
|
||||
return (
|
||||
<div style={{display: "inline-block", whiteSpace: "nowrap", color: data.styles.color}}>
|
||||
{
|
||||
data.values.number &&
|
||||
<BlockElementWrapper metaData={widgetMetaData} data={data} slot="number">
|
||||
<span style={{color: data.styles.color, fontSize: "0.875rem"}}>{data.values.number}</span>
|
||||
</BlockElementWrapper>
|
||||
}
|
||||
{
|
||||
data.values.iconName &&
|
||||
<BlockElementWrapper metaData={widgetMetaData} data={data} slot="icon">
|
||||
<Icon style={{color: data.styles.color, fontSize: "1rem", position: "relative", top: "3px"}}>{data.values.iconName}</Icon>
|
||||
</BlockElementWrapper>
|
||||
}
|
||||
</div>);
|
||||
}
|
||||
@ -1,70 +0,0 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import Typography from "@mui/material/Typography";
|
||||
import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
|
||||
import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Block that renders a progress bar!
|
||||
**
|
||||
** Values:
|
||||
** ${heading}
|
||||
** [${percent}===___] ${value ?? percent}
|
||||
**
|
||||
** Slots:
|
||||
** ${heading}
|
||||
** ${bar} ${value}
|
||||
*******************************************************************************/
|
||||
export default function ProgressBarBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
|
||||
{
|
||||
return (
|
||||
<Typography component="div" variant="button" color="text" fontWeight="light" sx={{textTransform: "none"}}>
|
||||
{
|
||||
data.values.heading &&
|
||||
<div style={{marginBottom: "0.25rem", fontWeight: 500, color: "#3D3D3D"}}>
|
||||
<BlockElementWrapper metaData={widgetMetaData} data={data} slot="heading">
|
||||
<span>{data.values.heading}</span>
|
||||
</BlockElementWrapper>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div style={{display: "flex", alignItems: "center", marginBottom: "0.75rem"}}>
|
||||
|
||||
<BlockElementWrapper metaData={widgetMetaData} data={data} slot="bar" linkProps={{style: {width: "100%"}}}>
|
||||
<div style={{background: "#E0E0E0", width: "100%", borderRadius: "0.5rem", height: "1rem"}}>
|
||||
{
|
||||
data.values.percent > 0 ? <div style={{background: data.styles.barColor ?? "#0062ff", minWidth: "1rem", width: `${data.values.percent}%`, borderRadius: "0.5rem", height: "1rem"}}></div> : <></>
|
||||
}
|
||||
</div>
|
||||
</BlockElementWrapper>
|
||||
|
||||
<div style={{width: "60px", textAlign: "right", fontWeight: 600, color: "#3D3D3D"}}>
|
||||
<BlockElementWrapper metaData={widgetMetaData} data={data} slot="value">
|
||||
<span>{data.values.value ?? `${(data.values.percent as number).toFixed(1)}%`}</span>
|
||||
</BlockElementWrapper>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Typography>);
|
||||
|
||||
}
|
||||
@ -1,54 +0,0 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
|
||||
import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Block that renders a label & value, meant to be used as a detail-row in a
|
||||
** sub-row within a table widget
|
||||
**
|
||||
** ${label} ${value}
|
||||
*******************************************************************************/
|
||||
export default function TableSubRowDetailRowBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
|
||||
{
|
||||
return (
|
||||
<div style={{display: "flex", maxWidth: "calc(100% - 24px)", justifyContent: "space-between"}}>
|
||||
|
||||
{
|
||||
data.values.label &&
|
||||
<div style={{overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis"}}>
|
||||
<BlockElementWrapper metaData={widgetMetaData} data={data} slot="label">
|
||||
<span style={{color: data.styles.labelColor}}>{data.values.label}</span>
|
||||
</BlockElementWrapper>
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
data.values.value &&
|
||||
<BlockElementWrapper metaData={widgetMetaData} data={data} slot="value">
|
||||
<span style={{color: data.styles.valueColor}}>{data.values.value}</span>
|
||||
</BlockElementWrapper>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
|
||||
import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
|
||||
|
||||
/*******************************************************************************
|
||||
** Block that renders ... just some text.
|
||||
**
|
||||
** ${text}
|
||||
*******************************************************************************/
|
||||
export default function TextBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
|
||||
{
|
||||
return (
|
||||
<BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
|
||||
<span>{data.values.text}</span>
|
||||
</BlockElementWrapper>
|
||||
);
|
||||
}
|
||||
@ -1,81 +0,0 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import Icon from "@mui/material/Icon";
|
||||
import React from "react";
|
||||
import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
|
||||
import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Block that renders an up/down icon, a number, and some context
|
||||
**
|
||||
** ${icon} ${number} ${context}
|
||||
*
|
||||
** or, if style.isStacked:
|
||||
*
|
||||
** ${icon} ${number}
|
||||
** ${context}
|
||||
*******************************************************************************/
|
||||
export default function UpOrDownNumberBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
|
||||
{
|
||||
if (!data.styles)
|
||||
{
|
||||
data.styles = {};
|
||||
}
|
||||
|
||||
if (!data.values)
|
||||
{
|
||||
data.values = {};
|
||||
}
|
||||
|
||||
const UP_ICON = "arrow_drop_up";
|
||||
const DOWN_ICON = "arrow_drop_down";
|
||||
|
||||
const defaultGreenColor = "#2BA83F";
|
||||
const defaultRedColor = "#FB4141";
|
||||
|
||||
const goodOrBadColor = data.styles.colorOverride ?? (data.values.isGood ? defaultGreenColor : defaultRedColor);
|
||||
const iconName = data.values.isUp ? UP_ICON : DOWN_ICON;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{display: "flex", flexDirection: data.styles.isStacked ? "column" : "row", alignItems: data.styles.isStacked ? "flex-end" : "baseline"}}>
|
||||
|
||||
<div style={{display: "flex", alignItems: "baseline", fontWeight: 700, fontSize: ".875rem"}}>
|
||||
<BlockElementWrapper metaData={widgetMetaData} data={data} slot="number">
|
||||
<>
|
||||
<Icon sx={{color: goodOrBadColor, alignSelf: "flex-end", fontSize: "2.25rem !important", lineHeight: "0.875rem", height: "1rem", width: "2rem",}}>{iconName}</Icon>
|
||||
<span style={{color: goodOrBadColor}}>{data.values.number}</span>
|
||||
</>
|
||||
</BlockElementWrapper>
|
||||
</div>
|
||||
|
||||
<div style={{fontWeight: 500, fontSize: "0.875rem", color: "#7b809a", marginLeft: "0.25rem"}}>
|
||||
<BlockElementWrapper metaData={widgetMetaData} data={data} slot="context">
|
||||
<span>{data.values.context}</span>
|
||||
</BlockElementWrapper>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -178,7 +178,7 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
|
||||
if(widgetMetaData?.showExportButton)
|
||||
{
|
||||
labelAdditionalElementsLeft.push(
|
||||
<Typography key={1} variant="body2" px={0} display="inline" position="relative">
|
||||
<Typography key={1} variant="body2" py={2} px={0} display="inline" position="relative">
|
||||
<Tooltip title={tooltipTitle}><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={isExportDisabled}><Icon sx={{color: "#757575", fontSize: 1.25}}>save_alt</Icon></Button></Tooltip>
|
||||
</Typography>
|
||||
);
|
||||
|
||||
@ -18,7 +18,6 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import {tooltipClasses, TooltipProps} from "@mui/material";
|
||||
import Autocomplete from "@mui/material/Autocomplete";
|
||||
import Box from "@mui/material/Box";
|
||||
@ -30,19 +29,17 @@ 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 React, {useEffect, useMemo, useState} from "react";
|
||||
import {useAsyncDebounce, useExpanded, useGlobalFilter, usePagination, useSortBy, useTable} from "react-table";
|
||||
import {useEffect, useMemo, useState} from "react";
|
||||
import {useAsyncDebounce, useGlobalFilter, usePagination, useSortBy, useTable, useExpanded} 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";
|
||||
import MDTypography from "qqq/components/legacy/MDTypography";
|
||||
import CompositeWidget from "qqq/components/widgets/CompositeWidget";
|
||||
import DataTableBodyCell from "qqq/components/widgets/tables/cells/DataTableBodyCell";
|
||||
import DataTableHeadCell from "qqq/components/widgets/tables/cells/DataTableHeadCell";
|
||||
import DefaultCell from "qqq/components/widgets/tables/cells/DefaultCell";
|
||||
import ImageCell from "qqq/components/widgets/tables/cells/ImageCell";
|
||||
import {TableDataInput} from "qqq/components/widgets/tables/TableCard";
|
||||
import WidgetBlock from "qqq/components/widgets/WidgetBlock";
|
||||
|
||||
interface Props
|
||||
{
|
||||
@ -60,7 +57,6 @@ interface Props
|
||||
};
|
||||
isSorted?: boolean;
|
||||
noEndBorder?: boolean;
|
||||
widgetMetaData: QWidgetMetaData;
|
||||
}
|
||||
|
||||
DataTable.defaultProps = {
|
||||
@ -96,7 +92,6 @@ function DataTable({
|
||||
pagination,
|
||||
isSorted,
|
||||
noEndBorder,
|
||||
widgetMetaData
|
||||
}: Props): JSX.Element
|
||||
{
|
||||
let defaultValue: any;
|
||||
@ -173,17 +168,6 @@ 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(" ");
|
||||
@ -296,36 +280,21 @@ function DataTable({
|
||||
entriesEnd = pageSize * (pageIndex + 1);
|
||||
}
|
||||
|
||||
let visibleFooterRows = 1;
|
||||
if(expanded && expanded[`${table.rows.length-1}`])
|
||||
{
|
||||
//////////////////////////////////////////////////
|
||||
// todo - should count how many are expanded... //
|
||||
//////////////////////////////////////////////////
|
||||
visibleFooterRows = 2;
|
||||
}
|
||||
|
||||
function getTable(includeHead: boolean, rows: any, isFooter: boolean)
|
||||
{
|
||||
let boxStyle = {};
|
||||
if(fixedStickyLastRow)
|
||||
{
|
||||
boxStyle = isFooter
|
||||
? {borderTop: `0.0625rem solid ${colors.grayLines.main};`, backgroundColor: "#EEEEEE"}
|
||||
: {flexGrow: 1, overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"};
|
||||
? {borderTop: `0.0625rem solid ${colors.grayLines.main};`, overflow: "auto", scrollbarGutter: "stable"}
|
||||
: {height: fixedHeight ? `${fixedHeight}px` : "360px", overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"};
|
||||
}
|
||||
|
||||
let innerBoxStyle = {};
|
||||
if(fixedStickyLastRow && isFooter)
|
||||
{
|
||||
innerBoxStyle = {overflowY: "auto", scrollbarGutter: "stable"};
|
||||
}
|
||||
|
||||
return <Box sx={boxStyle}><Box sx={innerBoxStyle}>
|
||||
return <Box sx={boxStyle}>
|
||||
<Table {...getTableProps()}>
|
||||
{
|
||||
includeHead && (
|
||||
<Box component="thead" sx={{position: "sticky", top: 0, background: "white", zIndex: 10}}>
|
||||
<Box component="thead" sx={{position: "sticky", top: 0, background: "white"}}>
|
||||
{headerGroups.map((headerGroup: any, i: number) => (
|
||||
<TableRow key={i} {...headerGroup.getHeaderGroupProps()} sx={{display: "grid", gridTemplateColumns: gridTemplateColumns}}>
|
||||
{headerGroup.headers.map((column: any) => (
|
||||
@ -335,7 +304,6 @@ function DataTable({
|
||||
{...column.getHeaderProps(isSorted && column.getSortByToggleProps())}
|
||||
align={column.align ? column.align : "left"}
|
||||
sorted={setSortedValue(column)}
|
||||
tooltip={column.tooltip}
|
||||
>
|
||||
{column.render("header")}
|
||||
</DataTableHeadCell>
|
||||
@ -373,23 +341,13 @@ function DataTable({
|
||||
overrideNoEndBorder = true;
|
||||
}
|
||||
|
||||
let background = "initial";
|
||||
if(isFooter)
|
||||
{
|
||||
background = "#EEEEEE";
|
||||
}
|
||||
else if(row.depth > 0 || row.isExpanded)
|
||||
{
|
||||
background = "#FAFAFA";
|
||||
}
|
||||
|
||||
return (
|
||||
<TableRow sx={{verticalAlign: "top", display: "grid", gridTemplateColumns: gridTemplateColumns, background: background}} key={key} {...row.getRowProps()}>
|
||||
<TableRow sx={{verticalAlign: "top", display: "grid", gridTemplateColumns: gridTemplateColumns, background: (row.depth > 0 ? "#FAFAFA" : "initial")}} key={key} {...row.getRowProps()}>
|
||||
{row.cells.map((cell: any) => (
|
||||
cell.column.type !== "hidden" && (
|
||||
<DataTableBodyCell
|
||||
key={key}
|
||||
noBorder={noEndBorder || overrideNoEndBorder || row.isExpanded}
|
||||
noBorder={noEndBorder || overrideNoEndBorder}
|
||||
depth={row.depth}
|
||||
align={cell.column.align ? cell.column.align : "left"}
|
||||
{...cell.getCellProps()}
|
||||
@ -414,21 +372,7 @@ function DataTable({
|
||||
}
|
||||
{
|
||||
cell.column.type === "html" && (
|
||||
<DefaultCell isFooter={isFooter}>{parse(cell.value ?? "")}</DefaultCell>
|
||||
)
|
||||
}
|
||||
{
|
||||
cell.column.type === "composite" && (
|
||||
<DefaultCell isFooter={isFooter}>
|
||||
<CompositeWidget widgetMetaData={widgetMetaData} data={cell.value} />
|
||||
</DefaultCell>
|
||||
)
|
||||
}
|
||||
{
|
||||
cell.column.type === "block" && (
|
||||
<DefaultCell isFooter={isFooter}>
|
||||
<WidgetBlock widgetMetaData={widgetMetaData} block={cell.value} />
|
||||
</DefaultCell>
|
||||
<DefaultCell isFooter={isFooter}>{parse(cell.value)}</DefaultCell>
|
||||
)
|
||||
}
|
||||
{
|
||||
@ -453,11 +397,11 @@ function DataTable({
|
||||
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Box></Box>
|
||||
</Box>
|
||||
}
|
||||
|
||||
return (
|
||||
<TableContainer sx={{boxShadow: "none", height: fixedHeight ? `${fixedHeight}px` : "auto"}}>
|
||||
<TableContainer sx={{boxShadow: "none"}}>
|
||||
{entriesPerPage && ((hidePaginationDropdown !== undefined && !hidePaginationDropdown) || canSearch) ? (
|
||||
<Box display="flex" justifyContent="space-between" alignItems="center" p={3}>
|
||||
{entriesPerPage && (hidePaginationDropdown === undefined || !hidePaginationDropdown) && (
|
||||
@ -504,16 +448,14 @@ function DataTable({
|
||||
</Box>
|
||||
) : null}
|
||||
|
||||
<Box display="flex" justifyContent="space-between" flexDirection="column" height="100%">
|
||||
{
|
||||
fixedStickyLastRow ? (
|
||||
<>
|
||||
{getTable(true, page.slice(0, page.length - visibleFooterRows), false)}
|
||||
{getTable(false, page.slice(page.length - visibleFooterRows), true)}
|
||||
</>
|
||||
) : getTable(true, page, false)
|
||||
}
|
||||
</Box>
|
||||
{
|
||||
fixedStickyLastRow ? (
|
||||
<>
|
||||
{getTable(true, page.slice(0, page.length -1), false)}
|
||||
{getTable(false, page.slice(page.length-1), true)}
|
||||
</>
|
||||
) : getTable(true, page, false)
|
||||
}
|
||||
|
||||
<Box
|
||||
display="flex"
|
||||
|
||||
@ -20,7 +20,6 @@
|
||||
*/
|
||||
|
||||
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import {Skeleton} from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
import Table from "@mui/material/Table";
|
||||
@ -43,7 +42,6 @@ import Client from "qqq/utils/qqq/Client";
|
||||
export interface TableDataInput
|
||||
{
|
||||
columns: { [key: string]: any }[];
|
||||
columnHeaderTooltips?: { [columnName: string]: string | JSX.Element }
|
||||
rows: { [key: string]: any }[];
|
||||
}
|
||||
|
||||
@ -59,11 +57,10 @@ interface Props
|
||||
fixedStickyLastRow?: boolean;
|
||||
fixedHeight?: number;
|
||||
data: TableDataInput;
|
||||
widgetMetaData: QWidgetMetaData;
|
||||
}
|
||||
|
||||
const qController = Client.getInstance();
|
||||
function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown, fixedStickyLastRow, fixedHeight, widgetMetaData}: Props): JSX.Element
|
||||
function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown, fixedStickyLastRow, fixedHeight}: Props): JSX.Element
|
||||
{
|
||||
const [qInstance, setQInstance] = useState(null as QInstance);
|
||||
|
||||
@ -77,7 +74,7 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown,
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Box className="tableCard" mx={-2} mb="-28px" pt="11px" pb="0.25rem">
|
||||
<Box py={1} mx={-2}>
|
||||
{
|
||||
data && data.columns && !noRowsFoundHTML ?
|
||||
<DataTable
|
||||
@ -88,10 +85,9 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown,
|
||||
fixedHeight={fixedHeight}
|
||||
showTotalEntries={false}
|
||||
isSorted={false}
|
||||
widgetMetaData={widgetMetaData}
|
||||
/>
|
||||
: noRowsFoundHTML ?
|
||||
<Box p={3} pt={0} pb={3} sx={{textAlign: "center"}}>
|
||||
<Box p={3} pt={1} pb={1} sx={{textAlign: "center"}}>
|
||||
<MDTypography
|
||||
variant="subtitle2"
|
||||
color="secondary"
|
||||
|
||||
@ -21,14 +21,16 @@
|
||||
|
||||
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import Button from "@mui/material/Button";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import Tooltip from "@mui/material/Tooltip/Tooltip";
|
||||
import Typography from "@mui/material/Typography";
|
||||
// @ts-ignore
|
||||
import {htmlToText} from "html-to-text";
|
||||
import React, {useContext, useEffect, useState} from "react";
|
||||
import QContext from "QContext";
|
||||
import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
import TableCard from "qqq/components/widgets/tables/TableCard";
|
||||
import Widget, {WidgetData} from "qqq/components/widgets/Widget";
|
||||
import {WidgetUtils} from "qqq/components/widgets/WidgetUtils";
|
||||
import HtmlUtils from "qqq/utils/HtmlUtils";
|
||||
import ValueUtils from "qqq/utils/qqq/ValueUtils";
|
||||
|
||||
@ -48,7 +50,6 @@ 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;
|
||||
@ -104,7 +105,7 @@ function TableWidget(props: Props): JSX.Element
|
||||
|
||||
setCsv(csv);
|
||||
|
||||
const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
|
||||
const fileName = (props.widgetData.label ?? props.widgetMetaData.label) + " " + ValueUtils.formatDateTimeForFileName(new Date()) + ".csv";
|
||||
setFileName(fileName)
|
||||
|
||||
console.log(`useEffect, setting fileName ${fileName}`);
|
||||
@ -114,13 +115,7 @@ function TableWidget(props: Props): JSX.Element
|
||||
|
||||
const onExportClick = () =>
|
||||
{
|
||||
if(props.widgetData?.csvData)
|
||||
{
|
||||
const csv = WidgetUtils.widgetCsvDataToString(props.widgetData);
|
||||
const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
|
||||
HtmlUtils.download(fileName, csv);
|
||||
}
|
||||
else if(csv)
|
||||
if(csv)
|
||||
{
|
||||
HtmlUtils.download(fileName, csv);
|
||||
}
|
||||
@ -133,24 +128,11 @@ function TableWidget(props: Props): JSX.Element
|
||||
const labelAdditionalElementsLeft: JSX.Element[] = [];
|
||||
if(props.widgetMetaData?.showExportButton)
|
||||
{
|
||||
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;
|
||||
}
|
||||
labelAdditionalElementsLeft.push(
|
||||
<Typography key={1} variant="body2" py={2} px={0} display="inline" position="relative" top="-0.25rem">
|
||||
<Tooltip title="Export"><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={false}><Icon sx={{color: colors.gray.main, fontSize: 1.125}}>save_alt</Icon></Button></Tooltip>
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
@ -168,8 +150,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, columnHeaderTooltips: columnHeaderTooltips}}
|
||||
widgetMetaData={props.widgetMetaData}
|
||||
data={{columns: props.widgetData?.columns, rows: props.widgetData?.rows}}
|
||||
/>
|
||||
</Widget>
|
||||
);
|
||||
|
||||
@ -39,7 +39,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
|
||||
component="td"
|
||||
textAlign={align}
|
||||
py={1.5}
|
||||
px={1.5}
|
||||
px={3}
|
||||
sx={({palette: {light}, typography: {size}, borders: {borderWidth}}: Theme) => ({
|
||||
borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${colors.grayLines.main}`,
|
||||
fontSize: "0.875rem",
|
||||
|
||||
@ -22,7 +22,6 @@
|
||||
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";
|
||||
@ -34,10 +33,9 @@ interface Props
|
||||
children: ReactNode;
|
||||
sorted?: false | "none" | "asce" | "desc";
|
||||
align?: "left" | "right" | "center";
|
||||
tooltip?: string | JSX.Element;
|
||||
}
|
||||
|
||||
function DataTableHeadCell({width, children, sorted, align, tooltip, ...rest}: Props): JSX.Element
|
||||
function DataTableHeadCell({width, children, sorted, align, ...rest}: Props): JSX.Element
|
||||
{
|
||||
const [controller] = useMaterialUIController();
|
||||
const {darkMode} = controller;
|
||||
@ -47,7 +45,7 @@ function DataTableHeadCell({width, children, sorted, align, tooltip, ...rest}: P
|
||||
component="th"
|
||||
width={width}
|
||||
py={1.5}
|
||||
px={1.5}
|
||||
px={3}
|
||||
sx={({palette: {light}, borders: {borderWidth}}: Theme) => ({
|
||||
borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`,
|
||||
"&:nth-child(1)": {
|
||||
@ -75,43 +73,39 @@ function DataTableHeadCell({width, children, sorted, align, tooltip, ...rest}: P
|
||||
userSelect: sorted && "none",
|
||||
})}
|
||||
>
|
||||
<>
|
||||
{
|
||||
tooltip ? <Tooltip title={tooltip}><span style={{cursor: "default"}}>{children}</span></Tooltip> : children
|
||||
}
|
||||
{sorted && (
|
||||
{children}
|
||||
{sorted && (
|
||||
<Box
|
||||
position="absolute"
|
||||
top={0}
|
||||
right={align !== "right" ? "16px" : 0}
|
||||
left={align === "right" ? "-5px" : "unset"}
|
||||
sx={({typography: {size}}: any) => ({
|
||||
fontSize: size.lg,
|
||||
})}
|
||||
>
|
||||
<Box
|
||||
position="absolute"
|
||||
top={0}
|
||||
right={align !== "right" ? "16px" : 0}
|
||||
left={align === "right" ? "-5px" : "unset"}
|
||||
sx={({typography: {size}}: any) => ({
|
||||
fontSize: size.lg,
|
||||
})}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: -6,
|
||||
color: sorted === "asce" ? "text" : "secondary",
|
||||
opacity: sorted === "asce" ? 1 : 0.5
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@ -75,19 +75,9 @@ function AppHome({app}: Props): JSX.Element
|
||||
})();
|
||||
}, []);
|
||||
|
||||
const mdbMetaData = app?.supplementalAppMetaData?.get("materialDashboard");
|
||||
let showAppLabelOnHomeScreen = true;
|
||||
let includeTableCountsOnHomeScreen = true;
|
||||
if(mdbMetaData)
|
||||
{
|
||||
showAppLabelOnHomeScreen = mdbMetaData.showAppLabelOnHomeScreen;
|
||||
includeTableCountsOnHomeScreen = mdbMetaData.includeTableCountsOnHomeScreen;
|
||||
}
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
// setPageHeader(app.label);
|
||||
setPageHeader(null);
|
||||
setPageHeader(app.label);
|
||||
|
||||
if (!qInstance)
|
||||
{
|
||||
@ -131,60 +121,48 @@ function AppHome({app}: Props): JSX.Element
|
||||
const tableCountTexts = new Map<string, string>();
|
||||
newTables.forEach((table) =>
|
||||
{
|
||||
if(includeTableCountsOnHomeScreen)
|
||||
{
|
||||
tableCounts.set(table.name, {isLoading: true, value: null});
|
||||
setTimeout(async () =>
|
||||
{
|
||||
const tableMetaData = await qController.loadTableMetaData(table.name);
|
||||
let countResult = null;
|
||||
if (tableMetaData.capabilities.has(Capability.TABLE_COUNT) && tableMetaData.readPermission)
|
||||
{
|
||||
try
|
||||
{
|
||||
[countResult] = await qController.count(table.name);
|
||||
tableCounts.set(table.name, {isLoading: true, value: null});
|
||||
|
||||
if (countResult !== null && countResult !== undefined)
|
||||
{
|
||||
tableCountNumbers.set(table.name, countResult.toLocaleString());
|
||||
tableCountTexts.set(table.name, countResult === 1 ? "total record" : "total records");
|
||||
}
|
||||
else
|
||||
{
|
||||
tableCountNumbers.set(table.name, "–");
|
||||
tableCountTexts.set(table.name, " ");
|
||||
}
|
||||
}
|
||||
catch (e)
|
||||
setTimeout(async () =>
|
||||
{
|
||||
const tableMetaData = await qController.loadTableMetaData(table.name);
|
||||
let countResult = null;
|
||||
if(tableMetaData.capabilities.has(Capability.TABLE_COUNT) && tableMetaData.readPermission)
|
||||
{
|
||||
try
|
||||
{
|
||||
[countResult] = await qController.count(table.name);
|
||||
|
||||
if (countResult !== null && countResult !== undefined)
|
||||
{
|
||||
tableCountNumbers.set(table.name, countResult.toLocaleString());
|
||||
tableCountTexts.set(table.name, countResult === 1 ? "total record" : "total records");
|
||||
}
|
||||
else
|
||||
{
|
||||
console.log("Caught: " + e);
|
||||
tableCountNumbers.set(table.name, "–");
|
||||
tableCountTexts.set(table.name, " ");
|
||||
}
|
||||
}
|
||||
else
|
||||
catch(e)
|
||||
{
|
||||
console.log("Caught: " + e);
|
||||
tableCountNumbers.set(table.name, "–");
|
||||
tableCountTexts.set(table.name, " ");
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
tableCountNumbers.set(table.name, "–");
|
||||
tableCountTexts.set(table.name, " ");
|
||||
}
|
||||
|
||||
tableCounts.set(table.name, {isLoading: false, value: countResult});
|
||||
setTableCounts(tableCounts);
|
||||
setTableCountNumbers(tableCountNumbers);
|
||||
setTableCountTexts(tableCountTexts);
|
||||
setUpdatedTableCounts(new Date());
|
||||
}, 1);
|
||||
}
|
||||
else
|
||||
{
|
||||
tableCounts.set(table.name, {isLoading: false, value: null});
|
||||
tableCountNumbers.set(table.name, " ");
|
||||
tableCountTexts.set(table.name, " ");
|
||||
|
||||
tableCounts.set(table.name, {isLoading: false, value: countResult});
|
||||
setTableCounts(tableCounts);
|
||||
setTableCountNumbers(tableCountNumbers);
|
||||
setTableCountTexts(tableCountTexts);
|
||||
}
|
||||
setUpdatedTableCounts(new Date());
|
||||
}, 1);
|
||||
});
|
||||
setTableCounts(tableCounts);
|
||||
|
||||
@ -230,12 +208,6 @@ function AppHome({app}: Props): JSX.Element
|
||||
{
|
||||
return (
|
||||
<BaseLayout>
|
||||
{
|
||||
showAppLabelOnHomeScreen &&
|
||||
<Typography textTransform="capitalize" variant="h3">
|
||||
{app.label}
|
||||
</Typography>
|
||||
}
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} lg={12}>
|
||||
<Card sx={{overflow: "visible"}}>
|
||||
@ -281,19 +253,13 @@ function AppHome({app}: Props): JSX.Element
|
||||
|
||||
return (
|
||||
<BaseLayout>
|
||||
{
|
||||
showAppLabelOnHomeScreen &&
|
||||
<Typography textTransform="capitalize" variant="h3">
|
||||
{app.label}
|
||||
</Typography>
|
||||
}
|
||||
<Box>
|
||||
{app.widgets && app.widgets.length > 0 && (
|
||||
<Box pb={app.sections ? 2.375 : 4} pt={"0.5rem"}>
|
||||
<Box pb={app.sections ? 2.375 : 0}>
|
||||
<DashboardWidgets widgetMetaDataList={widgets} />
|
||||
</Box>
|
||||
)}
|
||||
<Grid container spacing={3} mt={"-1rem"}>
|
||||
<Grid container spacing={3}>
|
||||
{
|
||||
app.sections ? (
|
||||
<Grid item xs={12} lg={12}>
|
||||
@ -313,7 +279,7 @@ function AppHome({app}: Props): JSX.Element
|
||||
</Box>
|
||||
{
|
||||
section.processes ? (
|
||||
<Box p={3} pl={3} pt={0} pb={1}>
|
||||
<Box p={3} pl={5} pt={0} pb={1}>
|
||||
<MDTypography variant="h6">Actions</MDTypography>
|
||||
</Box>
|
||||
) : null
|
||||
@ -354,7 +320,7 @@ function AppHome({app}: Props): JSX.Element
|
||||
}
|
||||
{
|
||||
section.reports ? (
|
||||
<Box p={3} pl={3} pt={0} pb={1}>
|
||||
<Box p={3} pl={5} pt={0} pb={1}>
|
||||
<MDTypography variant="h6">Reports</MDTypography>
|
||||
</Box>
|
||||
) : null
|
||||
@ -397,7 +363,7 @@ function AppHome({app}: Props): JSX.Element
|
||||
}
|
||||
{
|
||||
section.tables ? (
|
||||
<Box p={3} pl={3} pb={1} pt={0}>
|
||||
<Box p={3} pl={5} pb={1} pt={0}>
|
||||
<MDTypography variant="h6">Data</MDTypography>
|
||||
</Box>
|
||||
) : null
|
||||
@ -409,13 +375,6 @@ function AppHome({app}: Props): JSX.Element
|
||||
section.tables.map((tableName) =>
|
||||
{
|
||||
let table = app.childMap.get(tableName);
|
||||
let count = "";
|
||||
let percentage = "";
|
||||
if(includeTableCountsOnHomeScreen)
|
||||
{
|
||||
count = !tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : (tableCountNumbers.get(table.name));
|
||||
percentage = !tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : (tableCountTexts.get(table.name));
|
||||
}
|
||||
return (
|
||||
<Grid key={table.name} item xs={12} md={12} lg={tileSizeLg}>
|
||||
{hasTablePermission(tableName) ?
|
||||
@ -423,8 +382,8 @@ function AppHome({app}: Props): JSX.Element
|
||||
<Box className="big-icon" mb={3}>
|
||||
<MiniStatisticsCard
|
||||
title={{fontWeight: "bold", text: table.label}}
|
||||
count={count}
|
||||
percentage={{color: "info", text: percentage}}
|
||||
count={!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : (tableCountNumbers.get(table.name))}
|
||||
percentage={{color: "info", text: (!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : (tableCountTexts.get(table.name)))}}
|
||||
icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}}
|
||||
/>
|
||||
</Box>
|
||||
@ -432,8 +391,8 @@ function AppHome({app}: Props): JSX.Element
|
||||
<Box mb={3} title="You do not have permission to access this table">
|
||||
<MiniStatisticsCard
|
||||
title={{fontWeight: "bold", text: table.label}}
|
||||
count={count}
|
||||
percentage={{color: "info", text: percentage}}
|
||||
count={!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : (tableCountNumbers.get(table.name))}
|
||||
percentage={{color: "info", text: (!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : (tableCountTexts.get(table.name)))}}
|
||||
icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}}
|
||||
isDisabled={true}
|
||||
/>
|
||||
|
||||
@ -114,11 +114,8 @@ class FilterUtils
|
||||
// e.g., ...values=[1]... //
|
||||
// but we need them to be possibleValue objects (w/ id & label) so the label //
|
||||
// can be shown in the filter dropdown. So, make backend call to look them up. //
|
||||
// also, there are cases where we can get a null or "" as the only value in the //
|
||||
// values array - avoid sending that to the backend, as it comes back w/ all //
|
||||
// possible values, and a general "bad time" //
|
||||
//////////////////////////////////////////////////////////////////////////////////
|
||||
if (values && values.length > 0 && values[0] !== null && values[0] !== undefined && values[0] !== "")
|
||||
if (values && values.length > 0)
|
||||
{
|
||||
values = await qController.possibleValues(fieldTable.name, null, field.name, "", values);
|
||||
}
|
||||
@ -398,10 +395,10 @@ class FilterUtils
|
||||
switch (andMoreFormat)
|
||||
{
|
||||
case "andNOther":
|
||||
labels.push(` and ${n} other value${n == 1 ? "" : "s"}.`);
|
||||
labels.push(` and ${n.toLocaleString()} other value${n == 1 ? "" : "s"}.`);
|
||||
break;
|
||||
case "+N":
|
||||
labels[labels.length-1] += ` +${n}`;
|
||||
labels[labels.length-1] += ` +${n.toLocaleString()}`;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
@ -93,6 +93,11 @@ class TableUtils
|
||||
*******************************************************************************/
|
||||
public static getFieldAndTable(tableMetaData: QTableMetaData, fieldName: string): [QFieldMetaData, QTableMetaData]
|
||||
{
|
||||
if(fieldName == null || tableMetaData == null)
|
||||
{
|
||||
return ([null, null]);
|
||||
}
|
||||
|
||||
if (fieldName.indexOf(".") > -1)
|
||||
{
|
||||
const nameParts = fieldName.split(".", 2);
|
||||
@ -110,7 +115,7 @@ class TableUtils
|
||||
return ([tableMetaData.fields.get(fieldName), tableMetaData]);
|
||||
}
|
||||
|
||||
return (null);
|
||||
return ([null, null]);
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user