mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-18 05:10:45 +00:00
SPRINT-17: added tablename in widgets
This commit is contained in:
@ -31,6 +31,7 @@ import MDBadgeDot from "qqq/components/Temporary/MDBadgeDot";
|
|||||||
import MDBox from "qqq/components/Temporary/MDBox";
|
import MDBox from "qqq/components/Temporary/MDBox";
|
||||||
import MDTypography from "qqq/components/Temporary/MDTypography";
|
import MDTypography from "qqq/components/Temporary/MDTypography";
|
||||||
import BarChart from "qqq/pages/dashboards/Widgets/BarChart";
|
import BarChart from "qqq/pages/dashboards/Widgets/BarChart";
|
||||||
|
import DividerWidget from "qqq/pages/dashboards/Widgets/Data/Divider";
|
||||||
import DefaultLineChart from "qqq/pages/dashboards/Widgets/DefaultLineChart";
|
import DefaultLineChart from "qqq/pages/dashboards/Widgets/DefaultLineChart";
|
||||||
import FieldValueListWidget from "qqq/pages/dashboards/Widgets/FieldValueListWidget";
|
import FieldValueListWidget from "qqq/pages/dashboards/Widgets/FieldValueListWidget";
|
||||||
import HorizontalBarChart from "qqq/pages/dashboards/Widgets/HorizontalBarChart";
|
import HorizontalBarChart from "qqq/pages/dashboards/Widgets/HorizontalBarChart";
|
||||||
@ -51,6 +52,7 @@ const qController = QClient.getInstance();
|
|||||||
interface Props
|
interface Props
|
||||||
{
|
{
|
||||||
widgetMetaDataList: QWidgetMetaData[];
|
widgetMetaDataList: QWidgetMetaData[];
|
||||||
|
tableName?: string;
|
||||||
entityPrimaryKey?: string;
|
entityPrimaryKey?: string;
|
||||||
omitWrappingGridContainer: boolean;
|
omitWrappingGridContainer: boolean;
|
||||||
areChildren?: boolean
|
areChildren?: boolean
|
||||||
@ -59,13 +61,14 @@ interface Props
|
|||||||
|
|
||||||
DashboardWidgets.defaultProps = {
|
DashboardWidgets.defaultProps = {
|
||||||
widgetMetaDataList: null,
|
widgetMetaDataList: null,
|
||||||
|
tableName: null,
|
||||||
entityPrimaryKey: null,
|
entityPrimaryKey: null,
|
||||||
omitWrappingGridContainer: false,
|
omitWrappingGridContainer: false,
|
||||||
areChildren: false,
|
areChildren: false,
|
||||||
childUrlParams: ""
|
childUrlParams: ""
|
||||||
};
|
};
|
||||||
|
|
||||||
function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGridContainer, areChildren, childUrlParams}: Props): JSX.Element
|
function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omitWrappingGridContainer, areChildren, childUrlParams}: Props): JSX.Element
|
||||||
{
|
{
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const [qInstance, setQInstance] = useState(null as QInstance);
|
const [qInstance, setQInstance] = useState(null as QInstance);
|
||||||
@ -95,7 +98,8 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGri
|
|||||||
widgetData[i] = {};
|
widgetData[i] = {};
|
||||||
(async () =>
|
(async () =>
|
||||||
{
|
{
|
||||||
widgetData[i] = await qController.widget(widgetMetaDataList[i].name, `id=${entityPrimaryKey}&${childUrlParams}`);
|
console.log(`widgets: ${getQueryParams(null)}`)
|
||||||
|
widgetData[i] = await qController.widget(widgetMetaDataList[i].name, getQueryParams(null));
|
||||||
setWidgetCounter(widgetCounter + 1);
|
setWidgetCounter(widgetCounter + 1);
|
||||||
forceUpdate();
|
forceUpdate();
|
||||||
})();
|
})();
|
||||||
@ -112,11 +116,39 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGri
|
|||||||
{
|
{
|
||||||
setTimeout(async () =>
|
setTimeout(async () =>
|
||||||
{
|
{
|
||||||
widgetData[index] = await qController.widget(widgetMetaDataList[index].name, `id=${entityPrimaryKey}&${data}`);
|
widgetData[index] = await qController.widget(widgetMetaDataList[index].name, getQueryParams(data));
|
||||||
setWidgetCounter(widgetCounter + 1);
|
setWidgetCounter(widgetCounter + 1);
|
||||||
}, 1);
|
}, 1);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function getQueryParams(extraParams: string): string
|
||||||
|
{
|
||||||
|
let ampersand = "";
|
||||||
|
let params = "";
|
||||||
|
let foundParam = false;
|
||||||
|
if(entityPrimaryKey)
|
||||||
|
{
|
||||||
|
params += `${ampersand}id=${entityPrimaryKey}`;
|
||||||
|
ampersand = "&";
|
||||||
|
}
|
||||||
|
if(tableName)
|
||||||
|
{
|
||||||
|
params += `${ampersand}tableName=${tableName}`;
|
||||||
|
ampersand = "&";
|
||||||
|
}
|
||||||
|
if(extraParams)
|
||||||
|
{
|
||||||
|
params += `${ampersand}${extraParams}`;
|
||||||
|
ampersand = "&";
|
||||||
|
}
|
||||||
|
if(childUrlParams)
|
||||||
|
{
|
||||||
|
params += `${ampersand}${childUrlParams}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return params;
|
||||||
|
};
|
||||||
|
|
||||||
const widgetCount = widgetMetaDataList ? widgetMetaDataList.length : 0;
|
const widgetCount = widgetMetaDataList ? widgetMetaDataList.length : 0;
|
||||||
|
|
||||||
const renderWidget = (widgetMetaData: QWidgetMetaData, i: number): JSX.Element =>
|
const renderWidget = (widgetMetaData: QWidgetMetaData, i: number): JSX.Element =>
|
||||||
@ -127,6 +159,7 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGri
|
|||||||
widgetMetaData.type === "parentWidget" && (
|
widgetMetaData.type === "parentWidget" && (
|
||||||
<ParentWidget
|
<ParentWidget
|
||||||
entityPrimaryKey={entityPrimaryKey}
|
entityPrimaryKey={entityPrimaryKey}
|
||||||
|
tableName={tableName}
|
||||||
widgetIndex={i}
|
widgetIndex={i}
|
||||||
label={widgetMetaData.label}
|
label={widgetMetaData.label}
|
||||||
data={widgetData[i]}
|
data={widgetData[i]}
|
||||||
@ -221,6 +254,13 @@ function DashboardWidgets({widgetMetaDataList, entityPrimaryKey, omitWrappingGri
|
|||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
{
|
||||||
|
widgetMetaData.type === "divider" && (
|
||||||
|
<Box>
|
||||||
|
<DividerWidget />
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
{
|
{
|
||||||
widgetMetaData.type === "horizontalBarChart" && (
|
widgetMetaData.type === "horizontalBarChart" && (
|
||||||
widgetData && widgetData[i] && widgetData[i].chartData && (
|
widgetData && widgetData[i] && widgetData[i].chartData && (
|
||||||
|
32
src/qqq/pages/dashboards/Widgets/Data/Divider.tsx
Normal file
32
src/qqq/pages/dashboards/Widgets/Data/Divider.tsx
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
/*
|
||||||
|
* 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 Divider from "@mui/material/Divider";
|
||||||
|
|
||||||
|
|
||||||
|
function DividerWidget(): JSX.Element
|
||||||
|
{
|
||||||
|
return (
|
||||||
|
<Divider sx={{padding: "1px", background: "red"}}/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DividerWidget;
|
@ -38,7 +38,7 @@ const options = {
|
|||||||
maintainAspectRatio: false,
|
maintainAspectRatio: false,
|
||||||
plugins: {
|
plugins: {
|
||||||
legend: {
|
legend: {
|
||||||
display: false,
|
display: true,
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
enabled: true,
|
enabled: true,
|
||||||
|
@ -42,6 +42,7 @@ export interface ParentWidgetData
|
|||||||
label: string
|
label: string
|
||||||
}[][];
|
}[][];
|
||||||
childWidgetNameList: string[];
|
childWidgetNameList: string[];
|
||||||
|
dropdownNeedsSelectedText?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -55,11 +56,12 @@ interface Props
|
|||||||
data: ParentWidgetData;
|
data: ParentWidgetData;
|
||||||
reloadWidgetCallback?: (widgetIndex: number, params: string) => void;
|
reloadWidgetCallback?: (widgetIndex: number, params: string) => void;
|
||||||
entityPrimaryKey?: string;
|
entityPrimaryKey?: string;
|
||||||
|
tableName?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const qController = QClient.getInstance();
|
const qController = QClient.getInstance();
|
||||||
function ParentWidget({widgetIndex, label, data, reloadWidgetCallback, entityPrimaryKey}: Props, ): JSX.Element
|
function ParentWidget({widgetIndex, label, data, reloadWidgetCallback, entityPrimaryKey, tableName}: Props, ): JSX.Element
|
||||||
{
|
{
|
||||||
const [childUrlParams, setChildUrlParams] = useState("");
|
const [childUrlParams, setChildUrlParams] = useState("");
|
||||||
const [qInstance, setQInstance] = useState(null as QInstance);
|
const [qInstance, setQInstance] = useState(null as QInstance);
|
||||||
@ -86,15 +88,9 @@ function ParentWidget({widgetIndex, label, data, reloadWidgetCallback, entityPri
|
|||||||
widgetMetaDataList.push(qInstance.widgets.get(widgetName));
|
widgetMetaDataList.push(qInstance.widgets.get(widgetName));
|
||||||
})
|
})
|
||||||
setWidgets(widgetMetaDataList);
|
setWidgets(widgetMetaDataList);
|
||||||
console.log(`SETTINGWIDGETS...${widgetMetaDataList.length}`)
|
|
||||||
}
|
}
|
||||||
}, [qInstance, data]);
|
}, [qInstance, data]);
|
||||||
|
|
||||||
function doit()
|
|
||||||
{
|
|
||||||
reloadWidgetCallback(0, "ok");
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleDataChange(dropdownLabel: string, changedData: any)
|
function handleDataChange(dropdownLabel: string, changedData: any)
|
||||||
{
|
{
|
||||||
if(dropdownData)
|
if(dropdownData)
|
||||||
@ -128,8 +124,6 @@ function ParentWidget({widgetIndex, label, data, reloadWidgetCallback, entityPri
|
|||||||
{
|
{
|
||||||
if(dropdownData)
|
if(dropdownData)
|
||||||
{
|
{
|
||||||
console.log(JSON.stringify(data));
|
|
||||||
|
|
||||||
let params = "";
|
let params = "";
|
||||||
for (let i = 0; i < dropdownData.length; i++)
|
for (let i = 0; i < dropdownData.length; i++)
|
||||||
{
|
{
|
||||||
@ -144,7 +138,6 @@ function ParentWidget({widgetIndex, label, data, reloadWidgetCallback, entityPri
|
|||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
console.log(params);
|
|
||||||
reloadWidgetCallback(widgetIndex, params);
|
reloadWidgetCallback(widgetIndex, params);
|
||||||
setChildUrlParams(params)
|
setChildUrlParams(params)
|
||||||
}
|
}
|
||||||
@ -173,7 +166,7 @@ function ParentWidget({widgetIndex, label, data, reloadWidgetCallback, entityPri
|
|||||||
<DropdownMenu
|
<DropdownMenu
|
||||||
key={`dropdown-${data.dropdownLabelList[index]}-${index}`}
|
key={`dropdown-${data.dropdownLabelList[index]}-${index}`}
|
||||||
label={`Select ${data.dropdownLabelList[index]}`}
|
label={`Select ${data.dropdownLabelList[index]}`}
|
||||||
sx={{width: 200, marginLeft: "15px", float: "right"}}
|
sx={{width: 250, marginLeft: "15px", float: "right"}}
|
||||||
dropdownOptions={dropdownData}
|
dropdownOptions={dropdownData}
|
||||||
onChangeCallback={handleDataChange}
|
onChangeCallback={handleDataChange}
|
||||||
/>
|
/>
|
||||||
@ -183,7 +176,17 @@ function ParentWidget({widgetIndex, label, data, reloadWidgetCallback, entityPri
|
|||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Box pr={3} pl={3}>
|
<Box pr={3} pl={3}>
|
||||||
<DashboardWidgets widgetMetaDataList={widgets} entityPrimaryKey={entityPrimaryKey} childUrlParams={childUrlParams} areChildren={true}/>
|
{
|
||||||
|
data?.dropdownNeedsSelectedText ? (
|
||||||
|
<Box pb={3} sx={{width: "100%", textAlign: "right"}}>
|
||||||
|
<Typography variant="body2">
|
||||||
|
{data.dropdownNeedsSelectedText}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
) :(
|
||||||
|
<DashboardWidgets widgetMetaDataList={widgets} entityPrimaryKey={entityPrimaryKey} tableName={tableName} childUrlParams={childUrlParams} areChildren={true}/>
|
||||||
|
)
|
||||||
|
}
|
||||||
</Box>
|
</Box>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
|
@ -316,7 +316,7 @@ function EntityView({table, launchProcess}: Props): JSX.Element
|
|||||||
sectionFieldElements.set(section.name,
|
sectionFieldElements.set(section.name,
|
||||||
<Grid id={section.name} key={section.name} item lg={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12} sx={{display: "flex", alignItems: "stretch", flexGrow: 1, scrollMarginTop: "100px"}}>
|
<Grid id={section.name} key={section.name} item lg={widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12} xs={12} sx={{display: "flex", alignItems: "stretch", flexGrow: 1, scrollMarginTop: "100px"}}>
|
||||||
<Box width="100%" flexGrow={1} alignItems="stretch">
|
<Box width="100%" flexGrow={1} alignItems="stretch">
|
||||||
<DashboardWidgets key={section.name} widgetMetaDataList={[widgetMetaData]} entityPrimaryKey={record.values.get(tableMetaData.primaryKeyField)} omitWrappingGridContainer={true} />
|
<DashboardWidgets key={section.name} tableName={tableMetaData.name} widgetMetaDataList={[widgetMetaData]} entityPrimaryKey={record.values.get(tableMetaData.primaryKeyField)} omitWrappingGridContainer={true} />
|
||||||
</Box>
|
</Box>
|
||||||
</Grid>
|
</Grid>
|
||||||
);
|
);
|
||||||
|
Reference in New Issue
Block a user