mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-17 21:00:45 +00:00
SPRINT-16: finished parcel dashboard widgets
This commit is contained in:
Tim Chamberlain
3909
package-lock.json
generated
3909
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -13,11 +13,12 @@
|
||||
"@fullcalendar/interaction": "5.10.0",
|
||||
"@fullcalendar/react": "5.10.0",
|
||||
"@fullcalendar/timegrid": "5.10.0",
|
||||
"@kingsrook/qqq-frontend-core": "1.0.36",
|
||||
"@kingsrook/qqq-frontend-core": "1.0.37",
|
||||
"@mui/icons-material": "5.4.1",
|
||||
"@mui/material": "5.4.1",
|
||||
"@mui/styled-engine": "5.4.1",
|
||||
"@mui/styles": "5.10.7",
|
||||
"@mui/system": "5.10.14",
|
||||
"@mui/x-data-grid": "5.17.6",
|
||||
"@mui/x-data-grid-pro": "5.17.6",
|
||||
"@mui/x-license-pro": "5.12.3",
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import colors from "assets/theme/base/colors";
|
||||
@ -21,30 +21,32 @@ import boxShadows from "assets/theme/base/boxShadows";
|
||||
// Material Dashboard 2 PRO React Helper Function
|
||||
import rgba from "assets/theme/functions/rgba";
|
||||
|
||||
const { black, white } = colors;
|
||||
const { borderWidth, borderRadius } = borders;
|
||||
const { md } = boxShadows;
|
||||
const {black, white} = colors;
|
||||
const {borderWidth, borderRadius} = borders;
|
||||
const {md} = boxShadows;
|
||||
|
||||
// types
|
||||
// types
|
||||
type Types = any;
|
||||
|
||||
const card: Types = {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
position: "relative",
|
||||
minWidth: 0,
|
||||
wordWrap: "break-word",
|
||||
backgroundColor: white.main,
|
||||
backgroundClip: "border-box",
|
||||
border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`,
|
||||
borderRadius: borderRadius.xl,
|
||||
boxShadow: md,
|
||||
overflow: "visible",
|
||||
},
|
||||
},
|
||||
defaultProps: {
|
||||
elevation: 3
|
||||
},
|
||||
styleOverrides: {
|
||||
root: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
position: "relative",
|
||||
minWidth: 0,
|
||||
wordWrap: "break-word",
|
||||
backgroundColor: white.main,
|
||||
backgroundClip: "border-box",
|
||||
border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`,
|
||||
borderRadius: borderRadius.xl,
|
||||
overflow: "visible",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default card;
|
||||
|
||||
@ -32,10 +32,12 @@ import MDTypography from "qqq/components/Temporary/MDTypography";
|
||||
import BarChart from "qqq/pages/dashboards/Widgets/BarChart";
|
||||
import LineChart from "qqq/pages/dashboards/Widgets/LineChart";
|
||||
import MultiStatisticsCard from "qqq/pages/dashboards/Widgets/MultiStatisticsCard";
|
||||
import ParentWidget from "qqq/pages/dashboards/Widgets/ParentWidget";
|
||||
import QuickSightChart from "qqq/pages/dashboards/Widgets/QuickSightChart";
|
||||
import RecordGridWidget from "qqq/pages/dashboards/Widgets/RecordGridWidget";
|
||||
import StepperCard from "qqq/pages/dashboards/Widgets/StepperCard";
|
||||
import TableCard from "qqq/pages/dashboards/Widgets/TableCard";
|
||||
import ProcessRun from "qqq/pages/process-run";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
|
||||
const qController = QClient.getInstance();
|
||||
@ -45,15 +47,19 @@ interface Props
|
||||
widgetMetaDataList: QWidgetMetaData[];
|
||||
entityPrimaryKey?: string;
|
||||
omitWrappingGridContainer: boolean;
|
||||
areChildren?: boolean;
|
||||
childUrlParams?: string
|
||||
}
|
||||
|
||||
DashboardWidgets.defaultProps = {
|
||||
widgetMetaDataList: null,
|
||||
entityPrimaryKey: null,
|
||||
omitWrappingGridContainer: false
|
||||
omitWrappingGridContainer: false,
|
||||
areChildren: false,
|
||||
childUrlParams: ""
|
||||
};
|
||||
|
||||
function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGridContainer}: Props): JSX.Element
|
||||
function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGridContainer, areChildren, childUrlParams}: Props): JSX.Element
|
||||
{
|
||||
const location = useLocation();
|
||||
const [qInstance, setQInstance] = useState(null as QInstance);
|
||||
@ -83,7 +89,7 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGri
|
||||
widgetData[i] = {};
|
||||
(async () =>
|
||||
{
|
||||
widgetData[i] = await qController.widget(widgetMetaDataList[i].name, `id=${entityPrimaryKey}`);
|
||||
widgetData[i] = await qController.widget(widgetMetaDataList[i].name, `id=${entityPrimaryKey}&${childUrlParams}`);
|
||||
setWidgetCounter(widgetCounter + 1);
|
||||
forceUpdate();
|
||||
})();
|
||||
@ -96,143 +102,141 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGri
|
||||
setWidgetData([] as any[]);
|
||||
}, [location.pathname]);
|
||||
|
||||
const handleDropdownOnChange = (value: string, index: number) =>
|
||||
const reloadWidget = (index: number, data: string) =>
|
||||
{
|
||||
setTimeout(async () =>
|
||||
{
|
||||
widgetData[index] = await qController.widget(widgetMetaDataList[index].name);
|
||||
widgetData[index] = await qController.widget(widgetMetaDataList[index].name, `id=${entityPrimaryKey}&${data}`);
|
||||
setWidgetCounter(widgetCounter + 1);
|
||||
}, 1);
|
||||
};
|
||||
|
||||
const widgetCount = widgetMetaDataList ? widgetMetaDataList.length : 0;
|
||||
// console.log(JSON.stringify(widgetMetaDataList));
|
||||
// console.log(widgetCount);
|
||||
|
||||
const renderWidget = (widgetMetaData: QWidgetMetaData, i: number): JSX.Element =>
|
||||
{
|
||||
return (
|
||||
<>
|
||||
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
||||
{
|
||||
widgetMetaData.type === "parentWidget" && (
|
||||
<ParentWidget
|
||||
widgetIndex={i}
|
||||
label={widgetMetaData.label}
|
||||
data={widgetData[i]}
|
||||
reloadWidgetCallback={reloadWidget}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
widgetMetaData.type === "table" && (
|
||||
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px", width: "100%"}}>
|
||||
<TableCard
|
||||
color="info"
|
||||
title={widgetMetaData.label}
|
||||
linkText={widgetData[i]?.linkText}
|
||||
linkURL={widgetData[i]?.linkURL}
|
||||
noRowsFoundHTML={widgetData[i]?.noRowsFoundHTML}
|
||||
data={widgetData[i]}
|
||||
dropdownOptions={widgetData[i]?.dropdownOptions}
|
||||
dropdownOnChange={handleDropdownOnChange}
|
||||
widgetIndex={i}
|
||||
/>
|
||||
</MDBox>
|
||||
<TableCard
|
||||
color="info"
|
||||
title={widgetMetaData.label}
|
||||
linkText={widgetData[i]?.linkText}
|
||||
linkURL={widgetData[i]?.linkURL}
|
||||
noRowsFoundHTML={widgetData[i]?.noRowsFoundHTML}
|
||||
data={widgetData[i]}
|
||||
dropdownOptions={widgetData[i]?.dropdownOptions}
|
||||
reloadWidgetCallback={reloadWidget}
|
||||
widgetIndex={i}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
widgetMetaData.type === "process" && widgetData[i]?.processMetaData && (
|
||||
<ProcessRun process={widgetData[i]?.processMetaData} defaultProcessValues={widgetData[i]?.defaultValues} isWidget={true} />
|
||||
)
|
||||
}
|
||||
{
|
||||
widgetMetaData.type === "stepper" && (
|
||||
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
||||
<Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
||||
<MDBox padding="1rem">
|
||||
{
|
||||
widgetMetaData.label && (
|
||||
<MDTypography variant="h5" textTransform="capitalize">
|
||||
{widgetMetaData.label}
|
||||
</MDTypography>
|
||||
)
|
||||
}
|
||||
<StepperCard data={widgetData[i]} />
|
||||
</MDBox>
|
||||
</Card>
|
||||
</MDBox>
|
||||
<Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
||||
<MDBox padding="1rem">
|
||||
{
|
||||
widgetMetaData.label && (
|
||||
<MDTypography variant="h5" textTransform="capitalize">
|
||||
{widgetMetaData.label}srp
|
||||
</MDTypography>
|
||||
)
|
||||
}
|
||||
<StepperCard data={widgetData[i]} />
|
||||
</MDBox>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
{
|
||||
widgetMetaData.type === "html" && (
|
||||
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
||||
<Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
||||
<MDBox padding="1rem">
|
||||
<MDTypography variant="h5" textTransform="capitalize">
|
||||
{widgetMetaData.label}
|
||||
</MDTypography>
|
||||
<MDTypography component="div" variant="button" color="text" fontWeight="light">
|
||||
{
|
||||
widgetData && widgetData[i] && widgetData[i].html ? (
|
||||
parse(widgetData[i].html)
|
||||
) : <Skeleton />
|
||||
}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</Card>
|
||||
</MDBox>
|
||||
<Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
||||
<MDBox padding="1rem">
|
||||
<MDTypography variant="h5" textTransform="capitalize">
|
||||
{widgetMetaData.label}
|
||||
</MDTypography>
|
||||
<MDTypography component="div" variant="button" color="text" fontWeight="light">
|
||||
{
|
||||
widgetData && widgetData[i] && widgetData[i].html ? (
|
||||
parse(widgetData[i].html)
|
||||
) : <Skeleton />
|
||||
}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
{
|
||||
widgetMetaData.type === "multiStatistics" && (
|
||||
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
||||
<MultiStatisticsCard
|
||||
color="info"
|
||||
title={widgetMetaData.label}
|
||||
data={widgetData[i]}
|
||||
/>
|
||||
</MDBox>
|
||||
<MultiStatisticsCard
|
||||
color="info"
|
||||
title={widgetMetaData.label}
|
||||
data={widgetData[i]}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
widgetMetaData.type === "quickSightChart" && (
|
||||
<MDBox sx={{display: "flex"}}>
|
||||
<QuickSightChart url={widgetData[i]?.url} label={widgetMetaData.label} />
|
||||
</MDBox>
|
||||
<QuickSightChart url={widgetData[i]?.url} label={widgetMetaData.label} />
|
||||
)
|
||||
}
|
||||
{
|
||||
widgetMetaData.type === "barChart" && (
|
||||
<MDBox mb={3} sx={{display: "flex"}}>
|
||||
<BarChart
|
||||
color="info"
|
||||
title={widgetMetaData.label}
|
||||
date={`As of ${new Date().toDateString()}`}
|
||||
data={widgetData[i]?.chartData}
|
||||
/>
|
||||
</MDBox>
|
||||
<BarChart
|
||||
color="info"
|
||||
title={widgetMetaData.label}
|
||||
date={`As of ${new Date().toDateString()}`}
|
||||
data={widgetData[i]?.chartData}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
widgetMetaData.type === "lineChart" && (
|
||||
widgetData && widgetData[i] ? (
|
||||
<MDBox mb={3}>
|
||||
<LineChart
|
||||
title={widgetData[i].title}
|
||||
description={(
|
||||
<MDBox display="flex" justifyContent="space-between">
|
||||
<MDBox display="flex" ml={-1}>
|
||||
{
|
||||
widgetData[i].lineChartData.datasets.map((dataSet: any) => (
|
||||
<MDBadgeDot key={dataSet.label} color={dataSet.color} size="sm" badgeContent={dataSet.label} />
|
||||
))
|
||||
}
|
||||
</MDBox>
|
||||
<MDBox mt={-4} mr={-1} position="absolute" right="1.5rem" />
|
||||
<LineChart
|
||||
title={widgetData[i].title}
|
||||
description={(
|
||||
<MDBox display="flex" justifyContent="space-between">
|
||||
<MDBox display="flex" ml={-1}>
|
||||
{
|
||||
widgetData[i].lineChartData.datasets.map((dataSet: any) => (
|
||||
<MDBadgeDot key={dataSet.label} color={dataSet.color} size="sm" badgeContent={dataSet.label} />
|
||||
))
|
||||
}
|
||||
</MDBox>
|
||||
)}
|
||||
chart={widgetData[i].lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }}
|
||||
/>
|
||||
</MDBox>
|
||||
<MDBox mt={-4} mr={-1} position="absolute" right="1.5rem" />
|
||||
</MDBox>
|
||||
)}
|
||||
chart={widgetData[i].lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }}
|
||||
/>
|
||||
) : null
|
||||
)
|
||||
}
|
||||
{
|
||||
widgetMetaData.type === "childRecordList" && (
|
||||
widgetData && widgetData[i] &&
|
||||
<MDBox sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px", width: "100%"}}>
|
||||
<RecordGridWidget
|
||||
title={widgetMetaData.label}
|
||||
data={widgetData[i]}
|
||||
/>
|
||||
</MDBox>
|
||||
)
|
||||
}
|
||||
</>
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -45,7 +45,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
|
||||
})}
|
||||
>
|
||||
<MDBox
|
||||
display="inline-block"
|
||||
display="initial"
|
||||
width="max-content"
|
||||
color="text"
|
||||
>
|
||||
|
||||
70
src/qqq/pages/dashboards/Widgets/Components/DropdownMenu.tsx
Normal file
70
src/qqq/pages/dashboards/Widgets/Components/DropdownMenu.tsx
Normal file
@ -0,0 +1,70 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2022. 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 {Theme} from "@mui/material";
|
||||
import Autocomplete from "@mui/material/Autocomplete";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import {SxProps} from "@mui/system";
|
||||
import React from "react";
|
||||
|
||||
|
||||
export interface DropdownOption
|
||||
{
|
||||
id: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
/////////////////////////
|
||||
// inputs and defaults //
|
||||
/////////////////////////
|
||||
interface Props
|
||||
{
|
||||
label?: string;
|
||||
dropdownOptions?: DropdownOption[];
|
||||
onChangeCallback?: (dropdownLabel: string, data: any) => void;
|
||||
sx?: SxProps<Theme>;
|
||||
}
|
||||
|
||||
function DropdownMenu({label, dropdownOptions, onChangeCallback, sx}: Props): JSX.Element
|
||||
{
|
||||
const handleOnChange = (event: any, value: any, reason: string) =>
|
||||
{
|
||||
onChangeCallback(label, value);
|
||||
}
|
||||
|
||||
return (
|
||||
dropdownOptions ? (
|
||||
<span style={{whiteSpace: "nowrap"}}>
|
||||
<Autocomplete
|
||||
size="small"
|
||||
disablePortal
|
||||
id={`${label}-combo-box`}
|
||||
options={dropdownOptions}
|
||||
sx={{...sx, cursor: "pointer"}}
|
||||
onChange={handleOnChange}
|
||||
renderInput={(params: any) => <TextField {...params} label={label} />}
|
||||
/>
|
||||
</span>
|
||||
) : null
|
||||
)
|
||||
}
|
||||
|
||||
export default DropdownMenu;
|
||||
191
src/qqq/pages/dashboards/Widgets/ParentWidget.tsx
Normal file
191
src/qqq/pages/dashboards/Widgets/ParentWidget.tsx
Normal file
@ -0,0 +1,191 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2022. 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 {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import {Box, Typography} from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import DashboardWidgets from "qqq/components/DashboardWidgets";
|
||||
import DropdownMenu from "qqq/pages/dashboards/Widgets/Components/DropdownMenu";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
|
||||
|
||||
//////////////////////////////////////////////
|
||||
// structure of expected parent widget data //
|
||||
//////////////////////////////////////////////
|
||||
export interface ParentWidgetData
|
||||
{
|
||||
dropdownLabelList: string[];
|
||||
dropdownNameList: string[];
|
||||
dropdownDataList: {
|
||||
id: string,
|
||||
label: string
|
||||
}[][];
|
||||
childWidgetNameList: string[];
|
||||
}
|
||||
|
||||
|
||||
////////////////////////////////////
|
||||
// define properties and defaults //
|
||||
////////////////////////////////////
|
||||
interface Props
|
||||
{
|
||||
widgetIndex: number;
|
||||
label: string;
|
||||
data: ParentWidgetData;
|
||||
reloadWidgetCallback?: (widgetIndex: number, params: string) => void;
|
||||
}
|
||||
|
||||
|
||||
const qController = QClient.getInstance();
|
||||
function ParentWidget({widgetIndex, label, data, reloadWidgetCallback}: Props, ): JSX.Element
|
||||
{
|
||||
const [childUrlParams, setChildUrlParams] = useState("");
|
||||
const [qInstance, setQInstance] = useState(null as QInstance);
|
||||
const [dropdownData, setDropdownData] = useState([]);
|
||||
const [widgets, setWidgets] = useState([] as any[]);
|
||||
const [counter, setCounter] = useState(0);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
(async () =>
|
||||
{
|
||||
const newQInstance = await qController.loadMetaData();
|
||||
setQInstance(newQInstance);
|
||||
})();
|
||||
}, []);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(qInstance && data && data.childWidgetNameList)
|
||||
{
|
||||
let widgetMetaDataList = [] as QWidgetMetaData[];
|
||||
data?.childWidgetNameList.forEach((widgetName: string) =>
|
||||
{
|
||||
widgetMetaDataList.push(qInstance.widgets.get(widgetName));
|
||||
})
|
||||
setWidgets(widgetMetaDataList);
|
||||
console.log(`SETTINGWIDGETS...${widgetMetaDataList.length}`)
|
||||
}
|
||||
}, [qInstance, data]);
|
||||
|
||||
function doit()
|
||||
{
|
||||
reloadWidgetCallback(0, "ok");
|
||||
}
|
||||
|
||||
function handleDataChange(dropdownLabel: string, changedData: any)
|
||||
{
|
||||
if(dropdownData)
|
||||
{
|
||||
///////////////////////////////////////////
|
||||
// find the index base on selected label //
|
||||
///////////////////////////////////////////
|
||||
const tableName = dropdownLabel.replace("Select ", "");
|
||||
let index = -1;
|
||||
for (let i = 0; i < data.dropdownLabelList.length; i++)
|
||||
{
|
||||
if (tableName === data.dropdownLabelList[i])
|
||||
{
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (index < 0)
|
||||
{
|
||||
throw(`Could not find table name for label ${tableName}`);
|
||||
}
|
||||
|
||||
dropdownData[index] = (changedData) ? changedData.id : null;
|
||||
setDropdownData(dropdownData);
|
||||
setCounter(counter + 1);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(dropdownData)
|
||||
{
|
||||
console.log(JSON.stringify(data));
|
||||
|
||||
let params = "";
|
||||
for (let i = 0; i < dropdownData.length; i++)
|
||||
{
|
||||
if (i > 0)
|
||||
{
|
||||
params += "&";
|
||||
}
|
||||
params += `${data.dropdownNameList[i]}=`;
|
||||
if(dropdownData[i])
|
||||
{
|
||||
params += `${dropdownData[i]}`;
|
||||
|
||||
}
|
||||
}
|
||||
console.log(params);
|
||||
reloadWidgetCallback(widgetIndex, params);
|
||||
setChildUrlParams(params)
|
||||
}
|
||||
}, [counter]);
|
||||
|
||||
|
||||
return (
|
||||
<Card className="parentWidgetCard" sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
||||
|
||||
<Grid container>
|
||||
<Grid item xs={3}>
|
||||
<Box pt={3} px={3}>
|
||||
{
|
||||
label && (
|
||||
<Typography variant="h5" textTransform="capitalize">
|
||||
{label}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={9}>
|
||||
<Box mb={3} p={3}>
|
||||
{
|
||||
data?.dropdownDataList?.map((dropdownData: any, index: number) =>
|
||||
<DropdownMenu
|
||||
key={`dropdown-${data.dropdownLabelList[index]}-${index}`}
|
||||
label={`Select ${data.dropdownLabelList[index]}`}
|
||||
sx={{width: 200, marginLeft: "15px", float: "right"}}
|
||||
dropdownOptions={dropdownData}
|
||||
onChangeCallback={handleDataChange}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Box pr={3} pl={3}>
|
||||
<DashboardWidgets widgetMetaDataList={widgets} areChildren={true} childUrlParams={childUrlParams}/>
|
||||
</Box>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default ParentWidget;
|
||||
@ -53,13 +53,14 @@ interface Props
|
||||
id: string,
|
||||
name: string
|
||||
}[];
|
||||
dropdownOnChange?: (selectedValue: string, widgetIndex: number) => void;
|
||||
reloadWidgetCallback?: (widgetIndex: number, params: string) => void;
|
||||
widgetIndex?: number;
|
||||
isChild?: boolean;
|
||||
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOptions, dropdownOnChange, widgetIndex}: Props): JSX.Element
|
||||
function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOptions, reloadWidgetCallback, widgetIndex, isChild}: Props): JSX.Element
|
||||
{
|
||||
const openArrowIcon = "arrow_drop_down";
|
||||
const closeArrowIcon = "arrow_drop_up";
|
||||
@ -82,7 +83,7 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
|
||||
setDropdown(null);
|
||||
setDropdownValue(currentTarget.innerText || dropdownValue);
|
||||
setDropdownIcon(openArrowIcon);
|
||||
dropdownOnChange(currentTarget.innerText || dropdownValue, widgetIndex);
|
||||
reloadWidgetCallback(widgetIndex, null);
|
||||
};
|
||||
|
||||
const renderMenu = (state: any, open: any, close: any, icon: string) => (
|
||||
@ -113,6 +114,7 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
|
||||
{
|
||||
setDropdownValue(dropdownOptions[0]["id"]);
|
||||
setDropdownLabel(dropdownOptions[0]["name"]);
|
||||
|
||||
}
|
||||
}, [dropdownOptions]);
|
||||
|
||||
@ -121,7 +123,7 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
|
||||
<Grid container>
|
||||
<Grid item xs={6}>
|
||||
<MDBox pt={3} px={3}>
|
||||
<MDTypography variant="h5" fontWeight="medium">
|
||||
<MDTypography variant={isChild ? "h5" : "h6"} fontWeight="medium">
|
||||
{title}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
*/
|
||||
|
||||
import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
|
||||
import {AdornmentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/AdornmentType";
|
||||
import {QComponentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QComponentType";
|
||||
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
import {QFrontendComponent} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendComponent";
|
||||
@ -70,6 +71,7 @@ interface Props
|
||||
process?: QProcessMetaData;
|
||||
defaultProcessValues?: any;
|
||||
isModal?: boolean;
|
||||
isWidget?: boolean;
|
||||
recordIds?: string | QQueryFilter;
|
||||
closeModalHandler?: (event: object, reason: string) => void;
|
||||
}
|
||||
@ -78,7 +80,7 @@ const INITIAL_RETRY_MILLIS = 1_500;
|
||||
const RETRY_MAX_MILLIS = 12_000;
|
||||
const BACKOFF_AMOUNT = 1.5;
|
||||
|
||||
function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeModalHandler}: Props): JSX.Element
|
||||
function ProcessRun({process, defaultProcessValues, isModal, isWidget, recordIds, closeModalHandler}: Props): JSX.Element
|
||||
{
|
||||
const processNameParam = useParams().processName;
|
||||
const processName = process === null ? processNameParam : process.name;
|
||||
@ -320,8 +322,8 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
|
||||
|
||||
return (
|
||||
<>
|
||||
<MDTypography variation="h5" component="div" fontWeight="bold">
|
||||
{isModal ? `${process.label}: ` : ""}
|
||||
<MDTypography variant={isWidget ? "h6" : "h5"} component="div" fontWeight="bold">
|
||||
{(isModal) ? `${process.label}: ` : ""}
|
||||
{step?.label}
|
||||
</MDTypography>
|
||||
{step.components && (
|
||||
@ -421,16 +423,26 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
|
||||
component.type === QComponentType.VIEW_FORM && step.viewFields && (
|
||||
<div>
|
||||
{step.viewFields.map((field: QFieldMetaData) => (
|
||||
<MDBox key={field.name} display="flex" py={1} pr={2}>
|
||||
<MDTypography variant="button" fontWeight="bold">
|
||||
{field.label}
|
||||
:
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
||||
{QValueUtils.getValueForDisplay(field, processValues[field.name], "view")}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
))}
|
||||
field.hasAdornment(AdornmentType.ERROR) ? (
|
||||
processValues[field.name] && (
|
||||
<MDBox key={field.name} display="flex" py={1} pr={2}>
|
||||
<MDTypography variant="button" fontWeight="regular">
|
||||
{QValueUtils.getValueForDisplay(field, processValues[field.name], undefined, "view")}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
)
|
||||
) : (
|
||||
<MDBox key={field.name} display="flex" py={1} pr={2}>
|
||||
<MDTypography variant="button" fontWeight="bold">
|
||||
{field.label}
|
||||
:
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
||||
{QValueUtils.getValueForDisplay(field, processValues[field.name], undefined, "view")}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
)))
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -589,7 +601,11 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
|
||||
console.log("No process meta data yet, so returning early");
|
||||
return;
|
||||
}
|
||||
setPageHeader(processMetaData.label);
|
||||
|
||||
if(! isWidget)
|
||||
{
|
||||
setPageHeader(processMetaData.label);
|
||||
}
|
||||
|
||||
let newIndex = null;
|
||||
if (typeof newStep === "number")
|
||||
@ -1083,12 +1099,22 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
|
||||
};
|
||||
|
||||
const mainCardStyles: any = {};
|
||||
const formStyles: any = {};
|
||||
mainCardStyles.minHeight = `calc(100vh - ${isModal ? 150 : 400}px)`;
|
||||
if (!processError && (qJobRunning || activeStep === null) && !isModal)
|
||||
if (!processError && (qJobRunning || activeStep === null) && !isModal && !isWidget)
|
||||
{
|
||||
mainCardStyles.background = "none";
|
||||
mainCardStyles.boxShadow = "none";
|
||||
}
|
||||
if(isWidget)
|
||||
{
|
||||
mainCardStyles.minHeight = "";
|
||||
mainCardStyles.alignItems = "stretch";
|
||||
mainCardStyles.flexGrow = 1;
|
||||
mainCardStyles.display = "flex";
|
||||
formStyles.display = "flex";
|
||||
formStyles.flexGrow = 1;
|
||||
}
|
||||
|
||||
let nextButtonLabel = "Next";
|
||||
let nextButtonIcon = "arrow_forward";
|
||||
@ -1106,95 +1132,107 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
|
||||
nextButtonIcon = "check";
|
||||
}
|
||||
|
||||
const form = (
|
||||
<Formik
|
||||
enableReinitialize
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationScheme}
|
||||
validation={validationFunction}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{({
|
||||
values, errors, touched, isSubmitting, setFieldValue,
|
||||
}) => (
|
||||
<Form style={formStyles} id={formId} autoComplete="off">
|
||||
<Card sx={mainCardStyles}>
|
||||
{
|
||||
!isWidget && (
|
||||
<MDBox mx={2} mt={-3}>
|
||||
<Stepper activeStep={activeStepIndex} alternativeLabel>
|
||||
{steps.map((step) => (
|
||||
<Step key={step.name}>
|
||||
<StepLabel>{step.label}</StepLabel>
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
</MDBox>
|
||||
)
|
||||
}
|
||||
|
||||
<MDBox p={3}>
|
||||
<MDBox>
|
||||
{/***************************************************************************
|
||||
** step content - e.g., the appropriate form or other screen for the step **
|
||||
***************************************************************************/}
|
||||
{getDynamicStepContent(
|
||||
activeStepIndex,
|
||||
activeStep,
|
||||
{
|
||||
values,
|
||||
touched,
|
||||
formFields,
|
||||
errors,
|
||||
},
|
||||
processError,
|
||||
processValues,
|
||||
recordConfig,
|
||||
setFieldValue,
|
||||
)}
|
||||
{/********************************
|
||||
** back &| next/submit buttons **
|
||||
********************************/}
|
||||
<MDBox mt={6} width="100%" display="flex" justifyContent="space-between">
|
||||
{true || activeStepIndex === 0 ? (
|
||||
<MDBox />
|
||||
) : (
|
||||
<MDButton variant="gradient" color="light" onClick={handleBack}>back</MDButton>
|
||||
)}
|
||||
{processError || qJobRunning || !activeStep ? (
|
||||
<MDBox />
|
||||
) : (
|
||||
<>
|
||||
{formError && (
|
||||
<MDTypography component="div" variant="caption" color="error" fontWeight="regular" align="right" fullWidth>
|
||||
{formError}
|
||||
</MDTypography>
|
||||
)}
|
||||
{
|
||||
noMoreSteps && <QCancelButton
|
||||
onClickHandler={handleCancelClicked}
|
||||
label={isModal ? "Close" : "Return"}
|
||||
iconName={isModal ? "cancel" : "arrow_back"}
|
||||
disabled={isSubmitting} />
|
||||
}
|
||||
{
|
||||
!noMoreSteps && (
|
||||
<MDBox component="div" py={3}>
|
||||
<Grid container justifyContent="flex-end" spacing={3}>
|
||||
{
|
||||
! isWidget && (
|
||||
<QCancelButton onClickHandler={handleCancelClicked} disabled={isSubmitting} />
|
||||
)
|
||||
}
|
||||
<QSubmitButton label={nextButtonLabel} iconName={nextButtonIcon} disabled={isSubmitting} />
|
||||
</Grid>
|
||||
</MDBox>
|
||||
)
|
||||
}
|
||||
</>
|
||||
)}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
|
||||
const body = (
|
||||
<MDBox py={3} mb={20}>
|
||||
<Grid container justifyContent="center" alignItems="center" sx={{height: "100%", mt: 8}}>
|
||||
<Grid item xs={12} lg={10} xl={8}>
|
||||
<Formik
|
||||
enableReinitialize
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationScheme}
|
||||
validation={validationFunction}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{({
|
||||
values, errors, touched, isSubmitting, setFieldValue,
|
||||
}) => (
|
||||
<Form id={formId} autoComplete="off">
|
||||
<Card sx={mainCardStyles}>
|
||||
<MDBox mx={2} mt={-3}>
|
||||
<Stepper activeStep={activeStepIndex} alternativeLabel>
|
||||
{steps.map((step) => (
|
||||
<Step key={step.name}>
|
||||
<StepLabel>{step.label}</StepLabel>
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
</MDBox>
|
||||
|
||||
<MDBox p={3}>
|
||||
<MDBox>
|
||||
{/***************************************************************************
|
||||
** step content - e.g., the appropriate form or other screen for the step **
|
||||
***************************************************************************/}
|
||||
{getDynamicStepContent(
|
||||
activeStepIndex,
|
||||
activeStep,
|
||||
{
|
||||
values,
|
||||
touched,
|
||||
formFields,
|
||||
errors,
|
||||
},
|
||||
processError,
|
||||
processValues,
|
||||
recordConfig,
|
||||
setFieldValue,
|
||||
)}
|
||||
{/********************************
|
||||
** back &| next/submit buttons **
|
||||
********************************/}
|
||||
<MDBox mt={6} width="100%" display="flex" justifyContent="space-between">
|
||||
{true || activeStepIndex === 0 ? (
|
||||
<MDBox />
|
||||
) : (
|
||||
<MDButton variant="gradient" color="light" onClick={handleBack}>back</MDButton>
|
||||
)}
|
||||
{processError || qJobRunning || !activeStep ? (
|
||||
<MDBox />
|
||||
) : (
|
||||
<>
|
||||
{formError && (
|
||||
<MDTypography component="div" variant="caption" color="error" fontWeight="regular" align="right" fullWidth>
|
||||
{formError}
|
||||
</MDTypography>
|
||||
)}
|
||||
{
|
||||
noMoreSteps && <QCancelButton
|
||||
onClickHandler={handleCancelClicked}
|
||||
label={isModal ? "Close" : "Return"}
|
||||
iconName={isModal ? "cancel" : "arrow_back"}
|
||||
disabled={isSubmitting} />
|
||||
}
|
||||
{
|
||||
!noMoreSteps && (
|
||||
<MDBox component="div" py={3}>
|
||||
<Grid container justifyContent="flex-end" spacing={3}>
|
||||
<QCancelButton onClickHandler={handleCancelClicked} disabled={isSubmitting} />
|
||||
<QSubmitButton label={nextButtonLabel} iconName={nextButtonIcon} disabled={isSubmitting} />
|
||||
</Grid>
|
||||
</MDBox>
|
||||
)
|
||||
}
|
||||
</>
|
||||
)}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
{form}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
@ -1208,7 +1246,14 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
else
|
||||
else if (isWidget)
|
||||
{
|
||||
return (
|
||||
<Box sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
||||
{form}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
{
|
||||
return (
|
||||
<BaseLayout>
|
||||
@ -1222,6 +1267,7 @@ ProcessRun.defaultProps = {
|
||||
process: null,
|
||||
defaultProcessValues: {},
|
||||
isModal: false,
|
||||
isWidget: false,
|
||||
recordIds: null,
|
||||
closeModalHandler: null
|
||||
};
|
||||
|
||||
@ -259,3 +259,25 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
|
||||
{
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.MuiAutocomplete-input
|
||||
{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.parcelRulesCard
|
||||
{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.parcelRulesCard TD
|
||||
{
|
||||
font-size: 14px !important;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.parcelRulesCard A
|
||||
{
|
||||
color: blue;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@ -25,7 +25,7 @@ import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QField
|
||||
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
|
||||
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import "datejs";
|
||||
import {Chip, Icon, Typography} from "@mui/material";
|
||||
import {Box, Chip, Icon} from "@mui/material";
|
||||
import React, {Fragment} from "react";
|
||||
import AceEditor from "react-ace";
|
||||
import {Link} from "react-router-dom";
|
||||
@ -172,6 +172,20 @@ class QValueUtils
|
||||
}
|
||||
}
|
||||
|
||||
if (field.hasAdornment(AdornmentType.ERROR))
|
||||
{
|
||||
return (
|
||||
<Box color={"darkred"} alignContent={"baseline"}>
|
||||
<Box mr={2} sx={{float: "left"}}>
|
||||
<Icon>warning</Icon>
|
||||
</Box>
|
||||
<Box sx={{float: "left"}}>
|
||||
{rawValue}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (QValueUtils.getUnadornedValueForDisplay(field, rawValue, displayValue));
|
||||
}
|
||||
|
||||
@ -181,6 +195,11 @@ class QValueUtils
|
||||
*******************************************************************************/
|
||||
private static getUnadornedValueForDisplay(field: QFieldMetaData, rawValue: any, displayValue: any): string | JSX.Element
|
||||
{
|
||||
if(! displayValue && field.defaultValue)
|
||||
{
|
||||
displayValue = field.defaultValue;
|
||||
}
|
||||
|
||||
if (field.type === QFieldType.DATE_TIME)
|
||||
{
|
||||
if (!rawValue)
|
||||
|
||||
Reference in New Issue
Block a user