QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-17 21:00:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

CE-876 New dashboard widgets (more or less):

Browse Source 
- New Composite & Block widget constructs.
- Option for a parent widget's label to be the app home page's label
- Updates to table-widget handling of fixed footer (to expand and stay fixed)
- Option for widgets to have CSV Data that can be exported differently from just the data "in" the widget.
-- This included changing the default value for showExportButton from true to false
This commit is contained in:
darin.kelkhoff
2024-02-20 16:39:33 -06:00
parent fc45b5bed8
commit 3fd9f8d243
26 changed files with 1190 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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.85",
"@kingsrook/qqq-frontend-core": "1.0.86",
"@mui/icons-material": "5.4.1",
"@mui/material": "5.11.1",
"@mui/styles": "5.11.1",

2
pom.xml
View File

@ -66,7 +66,7 @@
<dependency>
<groupId>com.kingsrook.qqq</groupId>
<artifactId>qqq-backend-core</artifactId>
<version>feature-CE-798-quick-filters-20240123.205854-1</version>
<version>0.20.0-SNAPSHOT</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>

88
src/main/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/MaterialDashboardAppMetaData.java Normal file
View File

@ -0,0 +1,88 @@
/*
* 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.QSupplementalAppMetaData;
/*******************************************************************************
** app-level meta-data for this module (handled as QSupplementalTableMetaData)
*******************************************************************************/
public class MaterialDashboardAppMetaData extends QSupplementalAppMetaData
{
private Boolean showAppLabelOnHomeScreen = true;
/*******************************************************************************
**
*******************************************************************************/
@Override
public boolean includeInFullFrontendMetaData()
{
return (true);
}
/*******************************************************************************
**
*******************************************************************************/
@Override
public String getType()
{
return ("materialDashboard");
}
/*******************************************************************************
** 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);
}
}

1
src/main/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/MaterialDashboardIconRoleNames.java
View File

@ -28,4 +28,5 @@ package com.kingsrook.qqq.frontend.materialdashboard.model.metadata;
public interface MaterialDashboardIconRoleNames
{
String TOP_RIGHT_INSIDE_CARD = "topRightInsideCard";
String TOP_LEFT_INSIDE_CARD = "topLeftInsideCard";
}

109
src/qqq/components/widgets/CompositeWidget.tsx Normal file
View File

@ -0,0 +1,109 @@
/*
* 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 ?? widgetMetaData?.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>);
}

56
src/qqq/components/widgets/DashboardWidgets.tsx
View File

@ -35,6 +35,7 @@ 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";
@ -47,6 +48,7 @@ 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";
@ -254,7 +256,17 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
const topRightInsideCardIcon = widgetMetaData.icons.get("topRightInsideCard");
if (topRightInsideCardIcon)
{
labelAdditionalComponentsRight.push(new HeaderIcon(topRightInsideCardIcon.name, topRightInsideCardIcon.path, topRightInsideCardIcon.color));
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"));
}
}
@ -302,6 +314,7 @@ 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>
@ -314,6 +327,8 @@ 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} />
@ -327,6 +342,8 @@ 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%"}}>
@ -342,6 +359,8 @@ 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">
@ -373,8 +392,11 @@ 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}
/>
@ -414,6 +436,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
reloadWidgetCallback={(data) => reloadWidget(i, data)}
isChild={areChildren}
labelAdditionalComponentsRight={labelAdditionalComponentsRight}
labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
>
<div>
<PieChart
@ -449,6 +472,8 @@ 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}
@ -477,6 +502,34 @@ 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 &&
@ -523,7 +576,6 @@ 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}

15
src/qqq/components/widgets/ParentWidget.tsx
View File

@ -33,6 +33,7 @@ import Client from "qqq/utils/qqq/Client";
//////////////////////////////////////////////
export interface ParentWidgetData
{
label?: string;
dropdownLabelList: string[];
dropdownNameList: string[];
dropdownDataList: {
@ -42,6 +43,7 @@ export interface ParentWidgetData
childWidgetNameList: string[];
dropdownNeedsSelectedText?: string;
storeDropdownSelections?: boolean;
csvData?: any[][];
icon?: string;
layoutType: string;
}
@ -64,7 +66,8 @@ 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);
@ -81,27 +84,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 //
@ -125,7 +128,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 == "TABS"}/>
<DashboardWidgets widgetMetaDataList={widgets} entityPrimaryKey={entityPrimaryKey} tableName={tableName} childUrlParams={childUrlParams} areChildren={true} parentWidgetMetaData={widgetMetaData} wrapWidgetsInTabPanels={data.layoutType?.toLowerCase() == "tabs"} />
</Box>
</Widget>
) : null

126
src/qqq/components/widgets/Widget.tsx
View File

@ -32,6 +32,8 @@ import React, {useEffect, useState} from "react";
import {NavigateFunction, useNavigate} from "react-router-dom";
import colors from "qqq/assets/theme/base/colors";
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
{
@ -109,16 +111,18 @@ export class HeaderIcon extends LabelComponent
iconPath: string;
color: string;
coloredBG: boolean;
role: string;
iconColor: string;
bgColor: string;
constructor(iconName: string, iconPath: string, color: string, coloredBG: boolean = true)
constructor(iconName: string, iconPath: string, color: string, role?: 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;
@ -128,7 +132,7 @@ export class HeaderIcon extends LabelComponent
render = (args: LabelComponentRenderArgs): JSX.Element =>
{
const styles = {
const styles: any = {
width: "1.75rem",
height: "1.75rem",
color: this.iconColor,
@ -136,6 +140,12 @@ 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>);
@ -317,11 +327,13 @@ export class ReloadControl extends LabelComponent
render = (args: LabelComponentRenderArgs): JSX.Element =>
{
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>
);
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>);
};
}
@ -336,15 +348,29 @@ 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);
function renderComponent(component: LabelComponent, componentIndex: number)
{
return component.render({navigate: navigate, widgetProps: props, dropdownData: dropdownData, componentIndex: componentIndex, reloadFunction: doReload});
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 (<></>);
}
}
useEffect(() =>
@ -409,7 +435,10 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
{
defaultValue = props.widgetData.dropdownDefaultValueList[index];
}
updatedStateLabelComponentsRight.push(new Dropdown(props.widgetData.dropdownLabelList[index], props.widgetMetaData.dropdowns[index], dropdownData, defaultValue, props.widgetData.dropdownNameList[index], handleDataChange));
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));
}
});
setLabelComponentsRight(updatedStateLabelComponentsRight);
}
@ -500,18 +529,35 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
}
};
const toggleFullScreenWidget = () =>
const onExportClick = () =>
{
if (fullScreenWidgetClassName)
if (props.widgetData?.csvData)
{
setFullScreenWidgetClassName("");
const csv = WidgetUtils.widgetCsvDataToString(props.widgetData);
const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
HtmlUtils.download(fileName, csv);
}
else
{
setFullScreenWidgetClassName("fullScreenWidget");
alert("There is no data available to export.");
}
};
///////////////////////////////////////////////////////////////////////////////////////////////////////
// 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 =>
@ -526,36 +572,56 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
if (hasPermission)
{
needLabelBox ||= (labelComponentsLeft && labelComponentsLeft.length > 0);
needLabelBox ||= (props.labelAdditionalElementsLeft && props.labelAdditionalElementsLeft.length > 0);
needLabelBox ||= (localLabelAdditionalElementsLeft && localLabelAdditionalElementsLeft.length > 0);
needLabelBox ||= (labelComponentsRight && labelComponentsRight.length > 0);
needLabelBox ||= isSet(props.widgetMetaData?.icon);
needLabelBox ||= isSet(props.widgetData?.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 labelToUse = props.widgetData?.label ?? props.widgetMetaData?.label;
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;
}
}
let labelElement = (
<Typography sx={{cursor: "default", pl: "auto", pt: props.widgetMetaData.type == "parentWidget" ? "1rem" : "auto", fontWeight: 600}} variant="h6" display="inline">
<Typography sx={{cursor: "default", pl: "auto", fontWeight: 600}} variant={isParentWidget && (props.widgetData.isLabelPageTitle || usingLabelAsTitle) ? "h3" : "h6"} display="inline">
{labelToUse}
</Typography>
);
if(labelToUse && labelToUse != lastSeenLabel)
{
setLastSeenLabel(labelToUse)
setUsingLabelAsTitle(props.widgetData.isLabelPageTitle);
}
if (props.widgetMetaData.tooltip)
{
labelElement = <Tooltip title={props.widgetMetaData.tooltip} arrow={false} followCursor={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>
<Box display="flex" alignItems="baseline">
{
hasPermission ?
props.widgetMetaData?.icon && (
@ -600,11 +666,11 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
hasPermission && (
labelComponentsLeft.map((component, i) =>
{
return (<span key={i}>{renderComponent(component, i)}</span>);
return (<React.Fragment key={i}>{renderComponent(component, i)}</React.Fragment>);
})
)
}
{props.labelAdditionalElementsLeft}
{localLabelAdditionalElementsLeft}
</Box>
<Box>
{
@ -650,17 +716,27 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
}
{
!errorLoading && props?.footerHTML && (
<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 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>;
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={fullScreenWidgetClassName}>
? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%", p: padding}} className="widget inCard">
{widgetContent}
</Card>
: <span style={{width: "100%", padding: padding}}>{widgetContent}</span>;
: <span style={{width: "100%", padding: padding, marginBottom: noCardMarginBottom}} className="widget noCard">{widgetContent}</span>;
}
export default Widget;

90
src/qqq/components/widgets/WidgetBlock.tsx Normal file
View File

@ -0,0 +1,90 @@
/*
* 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>)
}
}

100
src/qqq/components/widgets/WidgetUtils.tsx Normal file
View File

@ -0,0 +1,100 @@
/*
* 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);
};
}

69
src/qqq/components/widgets/blocks/BigNumberBlock.tsx Normal file
View File

@ -0,0 +1,69 @@
/*
* 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";
import UpOrDownNumberBlock from "qqq/components/widgets/blocks/UpOrDownNumberBlock";
/*******************************************************************************
** 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"}}>
<BlockElementWrapper 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 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 data={data} slot="context">
<span>{data.values.context}</span>
</BlockElementWrapper>
</div>
}
</div>
</div>
</div>
);
}

80
src/qqq/components/widgets/blocks/BlockElementWrapper.tsx Normal file
View File

@ -0,0 +1,80 @@
/*
* 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 {Tooltip} from "@mui/material";
import React, {ReactElement} from "react";
import {Link} from "react-router-dom";
import {BlockData, BlockLink, BlockTooltip} from "qqq/components/widgets/blocks/BlockModels";
interface BlockElementWrapperProps
{
data: BlockData;
slot: string
linkProps?: any;
children: ReactElement;
}
/*******************************************************************************
** For Blocks - wrap their "slot" elements with an optional tooltip and/or link
*******************************************************************************/
export default function BlockElementWrapper({data, slot, linkProps, children}: BlockElementWrapperProps): JSX.Element
{
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;
}
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);
}

58
src/qqq/components/widgets/blocks/BlockModels.ts Normal file
View File

@ -0,0 +1,58 @@
/*
* 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
{
blockTypeName: string;
tooltip?: BlockTooltip;
link?: BlockLink;
tooltipMap?: {[slot: string]: BlockTooltip};
linkMap?: {[slot: string]: BlockLink};
values: any;
styles?: any;
}
export interface BlockTooltip
{
title: string;
placement: string;
}
export interface BlockLink
{
href: string;
target: string;
}
export interface StandardBlockComponentProps
{
widgetMetaData: QWidgetMetaData;
data: BlockData;
}

33
src/qqq/components/widgets/blocks/DividerBlock.tsx Normal file
View File

@ -0,0 +1,33 @@
/*
* 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"}} />);
}

48
src/qqq/components/widgets/blocks/NumberIconBadgeBlock.tsx Normal file
View File

@ -0,0 +1,48 @@
/*
* 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({data}: StandardBlockComponentProps): JSX.Element
{
return (
<div style={{display: "inline-block", whiteSpace: "nowrap", color: data.styles.color}}>
{
data.values.number &&
<BlockElementWrapper data={data} slot="number">
<span style={{color: data.styles.color, fontSize: "0.875rem"}}>{data.values.number}</span>
</BlockElementWrapper>
}
{
data.values.iconName &&
<BlockElementWrapper data={data} slot="icon">
<Icon style={{color: data.styles.color, fontSize: "1rem", position: "relative", top: "3px"}}>{data.values.iconName}</Icon>
</BlockElementWrapper>
}
</div>);
}

70
src/qqq/components/widgets/blocks/ProgressBarBlock.tsx Normal file
View File

@ -0,0 +1,70 @@
/*
* 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({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 data={data} slot="heading">
<span>{data.values.heading}</span>
</BlockElementWrapper>
</div>
}
<div style={{display: "flex", alignItems: "center", marginBottom: "0.75rem"}}>
<BlockElementWrapper 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 data={data} slot="value">
<span>{data.values.value ?? `${(data.values.percent as number).toFixed(1)}%`}</span>
</BlockElementWrapper>
</div>
</div>
</Typography>);
}

54
src/qqq/components/widgets/blocks/TableSubRowDetailRowBlock.tsx Normal file
View File

@ -0,0 +1,54 @@
/*
* 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({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 data={data} slot="label">
<span style={{color: data.styles.labelColor}}>{data.values.label}</span>
</BlockElementWrapper>
</div>
}
{
data.values.value &&
<BlockElementWrapper data={data} slot="value">
<span style={{color: data.styles.valueColor}}>{data.values.value}</span>
</BlockElementWrapper>
}
</div>
);
}

37
src/qqq/components/widgets/blocks/TextBlock.tsx Normal file
View File

@ -0,0 +1,37 @@
/*
* 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({data}: StandardBlockComponentProps): JSX.Element
{
return (
<BlockElementWrapper data={data} slot="">
<span>{data.values.text}</span>
</BlockElementWrapper>
);
}

81
src/qqq/components/widgets/blocks/UpOrDownNumberBlock.tsx Normal file
View File

@ -0,0 +1,81 @@
/*
* 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({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 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 data={data} slot="context">
<span>{data.values.context}</span>
</BlockElementWrapper>
</div>
</div>
</>
);
}

2
src/qqq/components/widgets/misc/RecordGridWidget.tsx
View File

@ -178,7 +178,7 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
if(widgetMetaData?.showExportButton)
{
labelAdditionalElementsLeft.push(
<Typography key={1} variant="body2" py={2} px={0} display="inline" position="relative">
<Typography key={1} variant="body2" 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>
);

80
src/qqq/components/widgets/tables/DataTable.tsx
View File

@ -18,6 +18,7 @@
* 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";
@ -35,11 +36,13 @@ 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
{
@ -57,6 +60,7 @@ interface Props
};
isSorted?: boolean;
noEndBorder?: boolean;
widgetMetaData: QWidgetMetaData;
}
DataTable.defaultProps = {
@ -92,6 +96,7 @@ function DataTable({
pagination,
isSorted,
noEndBorder,
widgetMetaData
}: Props): JSX.Element
{
let defaultValue: any;
@ -280,21 +285,36 @@ 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};`, overflow: "auto", scrollbarGutter: "stable"}
: {height: fixedHeight ? `${fixedHeight}px` : "360px", overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"};
? {borderTop: `0.0625rem solid ${colors.grayLines.main};`, backgroundColor: "#EEEEEE"}
: {flexGrow: 1, overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"};
}
return <Box sx={boxStyle}>
let innerBoxStyle = {};
if(fixedStickyLastRow && isFooter)
{
innerBoxStyle = {overflowY: "auto", scrollbarGutter: "stable"};
}
return <Box sx={boxStyle}><Box sx={innerBoxStyle}>
<Table {...getTableProps()}>
{
includeHead && (
<Box component="thead" sx={{position: "sticky", top: 0, background: "white"}}>
<Box component="thead" sx={{position: "sticky", top: 0, background: "white", zIndex: 10}}>
{headerGroups.map((headerGroup: any, i: number) => (
<TableRow key={i} {...headerGroup.getHeaderGroupProps()} sx={{display: "grid", gridTemplateColumns: gridTemplateColumns}}>
{headerGroup.headers.map((column: any) => (
@ -341,13 +361,23 @@ 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: (row.depth > 0 ? "#FAFAFA" : "initial")}} key={key} {...row.getRowProps()}>
<TableRow sx={{verticalAlign: "top", display: "grid", gridTemplateColumns: gridTemplateColumns, background: background}} key={key} {...row.getRowProps()}>
{row.cells.map((cell: any) => (
cell.column.type !== "hidden" && (
<DataTableBodyCell
key={key}
noBorder={noEndBorder || overrideNoEndBorder}
noBorder={noEndBorder || overrideNoEndBorder || row.isExpanded}
depth={row.depth}
align={cell.column.align ? cell.column.align : "left"}
{...cell.getCellProps()}
@ -372,7 +402,21 @@ function DataTable({
}
{
cell.column.type === "html" && (
<DefaultCell isFooter={isFooter}>{parse(cell.value)}</DefaultCell>
<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>
)
}
{
@ -397,11 +441,11 @@ function DataTable({
</TableBody>
</Table>
</Box>
</Box></Box>
}
return (
<TableContainer sx={{boxShadow: "none"}}>
<TableContainer sx={{boxShadow: "none", height: fixedHeight ? `${fixedHeight}px` : "auto"}}>
{entriesPerPage && ((hidePaginationDropdown !== undefined && !hidePaginationDropdown) || canSearch) ? (
<Box display="flex" justifyContent="space-between" alignItems="center" p={3}>
{entriesPerPage && (hidePaginationDropdown === undefined || !hidePaginationDropdown) && (
@ -448,14 +492,16 @@ function DataTable({
</Box>
) : null}
{
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" 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>
<Box
display="flex"

9
src/qqq/components/widgets/tables/TableCard.tsx
View File

@ -20,6 +20,7 @@
*/
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";
@ -57,10 +58,11 @@ interface Props
fixedStickyLastRow?: boolean;
fixedHeight?: number;
data: TableDataInput;
widgetMetaData: QWidgetMetaData;
}
const qController = Client.getInstance();
function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown, fixedStickyLastRow, fixedHeight}: Props): JSX.Element
function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown, fixedStickyLastRow, fixedHeight, widgetMetaData}: Props): JSX.Element
{
const [qInstance, setQInstance] = useState(null as QInstance);
@ -74,7 +76,7 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown,
}, []);
return (
<Box py={1} mx={-2}>
<Box className="tableCard" mx={-2} mb="-28px" pt="11px" pb="0.25rem">
{
data && data.columns && !noRowsFoundHTML ?
<DataTable
@ -85,9 +87,10 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown,
fixedHeight={fixedHeight}
showTotalEntries={false}
isSorted={false}
widgetMetaData={widgetMetaData}
/>
: noRowsFoundHTML ?
<Box p={3} pt={1} pb={1} sx={{textAlign: "center"}}>
<Box p={3} pt={0} pb={3} sx={{textAlign: "center"}}>
<MDTypography
variant="subtitle2"
color="secondary"

23
src/qqq/components/widgets/tables/TableWidget.tsx
View File

@ -21,16 +21,12 @@
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, {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";
@ -105,7 +101,7 @@ function TableWidget(props: Props): JSX.Element
setCsv(csv);
const fileName = (props.widgetData.label ?? props.widgetMetaData.label) + " " + ValueUtils.formatDateTimeForFileName(new Date()) + ".csv";
const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
setFileName(fileName)
console.log(`useEffect, setting fileName ${fileName}`);
@ -115,7 +111,13 @@ function TableWidget(props: Props): JSX.Element
const onExportClick = () =>
{
if(csv)
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)
{
HtmlUtils.download(fileName, csv);
}
@ -128,11 +130,7 @@ function TableWidget(props: Props): JSX.Element
const labelAdditionalElementsLeft: JSX.Element[] = [];
if(props.widgetMetaData?.showExportButton)
{
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>
);
labelAdditionalElementsLeft.push(WidgetUtils.generateExportButton(onExportClick));
}
return (
@ -151,6 +149,7 @@ function TableWidget(props: Props): JSX.Element
fixedStickyLastRow={props.widgetData?.fixedStickyLastRow}
fixedHeight={props.widgetData?.fixedHeight}
data={{columns: props.widgetData?.columns, rows: props.widgetData?.rows}}
widgetMetaData={props.widgetMetaData}
/>
</Widget>
);

2
src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx
View File

@ -39,7 +39,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
component="td"
textAlign={align}
py={1.5}
px={3}
px={1.5}
sx={({palette: {light}, typography: {size}, borders: {borderWidth}}: Theme) => ({
borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${colors.grayLines.main}`,
fontSize: "0.875rem",

2
src/qqq/components/widgets/tables/cells/DataTableHeadCell.tsx
View File

@ -45,7 +45,7 @@ function DataTableHeadCell({width, children, sorted, align, ...rest}: Props): JS
component="th"
width={width}
py={1.5}
px={3}
px={1.5}
sx={({palette: {light}, borders: {borderWidth}}: Theme) => ({
borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`,
"&:nth-child(1)": {

26
src/qqq/pages/apps/Home.tsx
View File

@ -75,9 +75,17 @@ function AppHome({app}: Props): JSX.Element
})();
}, []);
const mdbMetaData = app?.supplementalAppMetaData?.get("materialDashboard");
let showAppLabelOnHomeScreen = true;
if(mdbMetaData)
{
showAppLabelOnHomeScreen = mdbMetaData.showAppLabelOnHomeScreen;
}
useEffect(() =>
{
setPageHeader(app.label);
// setPageHeader(app.label);
setPageHeader(null);
if (!qInstance)
{
@ -208,6 +216,12 @@ 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"}}>
@ -253,13 +267,19 @@ 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 : 0}>
<Box pb={app.sections ? 2.375 : 4} pt={"0.5rem"}>
<DashboardWidgets widgetMetaDataList={widgets} />
</Box>
)}
<Grid container spacing={3}>
<Grid container spacing={3} mt={"-1rem"}>
{
app.sections ? (
<Grid item xs={12} lg={12}>