): JSX.Element
);
}
+ if (component instanceof Dropdown)
+ {
+ const dropdown = component as Dropdown
+ return (
+
+
+
+ );
+ }
+
+ return (Unsupported component type.
)
}
+
+ ///////////////////////////////////////////////////////////////////
+ // make dropdowns from the widgetData appear as label-components //
+ ///////////////////////////////////////////////////////////////////
+ const effectiveLabelAdditionalComponentsRight: LabelComponent[] = [];
+ if(props.labelAdditionalComponentsRight)
+ {
+ props.labelAdditionalComponentsRight.map((component) => effectiveLabelAdditionalComponentsRight.push(component));
+ }
+ if(props.widgetData && props.widgetData.dropdownDataList)
+ {
+ props.widgetData.dropdownDataList?.map((dropdownData: any, index: number) =>
+ {
+ effectiveLabelAdditionalComponentsRight.push(new Dropdown(props.widgetData.dropdownLabelList[index], dropdownData, handleDataChange))
+ });
+ }
+
+
+ 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 < props.widgetData.dropdownLabelList.length; i++)
+ {
+ if (tableName === props.widgetData.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)
+ {
+ let params = "";
+ for (let i = 0; i < dropdownData.length; i++)
+ {
+ if (i > 0)
+ {
+ params += "&";
+ }
+ params += `${props.widgetData.dropdownNameList[i]}=`;
+ if(dropdownData[i])
+ {
+ params += `${dropdownData[i]}`;
+
+ }
+ }
+
+ if(props.reloadWidgetCallback)
+ {
+ props.reloadWidgetCallback(params);
+ }
+ else
+ {
+ console.log(`No reload widget callback in ${props.label}`)
+ }
+ }
+ }, [counter]);
+
return (
<>
@@ -137,14 +263,24 @@ function Widget(props: React.PropsWithChildren): JSX.Element
{
- props.labelAdditionalComponentsRight.map((component, i) =>
+ effectiveLabelAdditionalComponentsRight.map((component, i) =>
{
return ({renderComponent(component)});
})
}
- {props.children}
+ {
+ props.widgetData?.dropdownNeedsSelectedText ? (
+
+
+ {props.widgetData?.dropdownNeedsSelectedText}
+
+
+ ) : (
+ props.children
+ )
+ }
);
diff --git a/src/qqq/pages/process-run/index.tsx b/src/qqq/pages/process-run/index.tsx
index f85cf79..fd11e83 100644
--- a/src/qqq/pages/process-run/index.tsx
+++ b/src/qqq/pages/process-run/index.tsx
@@ -74,13 +74,14 @@ interface Props
isWidget?: boolean;
recordIds?: string | QQueryFilter;
closeModalHandler?: (event: object, reason: string) => void;
+ forceReInit?: number;
}
const INITIAL_RETRY_MILLIS = 1_500;
const RETRY_MAX_MILLIS = 12_000;
const BACKOFF_AMOUNT = 1.5;
-function ProcessRun({process, defaultProcessValues, isModal, isWidget, recordIds, closeModalHandler}: Props): JSX.Element
+function ProcessRun({process, defaultProcessValues, isModal, isWidget, recordIds, closeModalHandler, forceReInit}: Props): JSX.Element
{
const processNameParam = useParams().processName;
const processName = process === null ? processNameParam : process.name;
@@ -98,6 +99,7 @@ function ProcessRun({process, defaultProcessValues, isModal, isWidget, recordIds
const [newStep, setNewStep] = useState(null);
const [steps, setSteps] = useState([] as QFrontendStepMetaData[]);
const [needInitialLoad, setNeedInitialLoad] = useState(true);
+ const [lastForcedReInit, setLastForcedReInit] = useState(null as number);
const [processMetaData, setProcessMetaData] = useState(null);
const [tableMetaData, setTableMetaData] = useState(null);
const [tableSections, setTableSections] = useState(null as QTableSection[]);
@@ -322,13 +324,23 @@ function ProcessRun({process, defaultProcessValues, isModal, isWidget, recordIds
return (
<>
-
- {(isModal) ? `${process.label}: ` : ""}
- {step?.label}
-
- {step.components && (
- step.components.map((component: QFrontendComponent, index: number) => (
- // eslint-disable-next-line react/no-array-index-key
+ {
+ ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
+ // hide label on widgets - the Widget component itself provides the label //
+ // for modals, show the process label, but not for full-screen processes (for them, it is in the breadcrumb) //
+ ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
+ !isWidget &&
+
+ {(isModal) ? `${process.label}: ` : ""}
+ {step?.label}
+
+ }
+
+ {
+ //////////////////////////////////////////////////
+ // render all of the components for this screen //
+ //////////////////////////////////////////////////
+ step.components && (step.components.map((component: QFrontendComponent, index: number) => (
{
component.type === QComponentType.HELP_TEXT && (
@@ -925,10 +937,14 @@ function ProcessRun({process, defaultProcessValues, isModal, isWidget, recordIds
//////////////////////////////////////////////////////////////////////////////////////////
// do the initial load of data for the process - that is, meta data, plus the init step //
+ // also - allow the component that contains this component to force a re-init, by //
+ // changing the value in the forceReInit property //
//////////////////////////////////////////////////////////////////////////////////////////
- if (needInitialLoad)
+ if (needInitialLoad || forceReInit != lastForcedReInit)
{
setNeedInitialLoad(false);
+ setLastForcedReInit(forceReInit);
+
(async () =>
{
const urlSearchParams = new URLSearchParams(location.search);
@@ -1108,6 +1124,8 @@ function ProcessRun({process, defaultProcessValues, isModal, isWidget, recordIds
}
if(isWidget)
{
+ mainCardStyles.background = "none";
+ mainCardStyles.boxShadow = "none";
mainCardStyles.minHeight = "";
mainCardStyles.alignItems = "stretch";
mainCardStyles.flexGrow = 1;
@@ -1269,7 +1287,8 @@ ProcessRun.defaultProps = {
isModal: false,
isWidget: false,
recordIds: null,
- closeModalHandler: null
+ closeModalHandler: null,
+ forceReInit: 0
};
export default ProcessRun;