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

Merge pull request #52 from Kingsrook/feature/CE-881-create-basic-saved-reports

Browse Source 
Feature/ce 881 create basic saved reports
This commit is contained in:
darin.kelkhoff
2024-04-18 09:46:23 -05:00
committed by GitHub
parent 8fe8fd41eb 7bda54b4a6
commit 8459263762
26 changed files with 3459 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -41,6 +41,8 @@
"react-ace": "10.1.0",
"react-chartjs-2": "3.0.4",
"react-cookie": "4.1.1",
"react-dnd": "16.0.1",
"react-dnd-html5-backend": "16.0.1",
"react-dom": "18.0.0",
"react-ga4": "2.1.0",
"react-github-btn": "1.2.1",

86
src/main/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/MaterialDashboardTableMetaData.java
View File

@ -22,6 +22,7 @@
package com.kingsrook.qqq.frontend.materialdashboard.model.metadata;
import java.util.ArrayList;
import java.util.HashSet;
import java.util.List;
import java.util.Set;
@ -30,6 +31,8 @@ import com.kingsrook.qqq.backend.core.model.metadata.QInstance;
import com.kingsrook.qqq.backend.core.model.metadata.tables.QSupplementalTableMetaData;
import com.kingsrook.qqq.backend.core.model.metadata.tables.QTableMetaData;
import com.kingsrook.qqq.backend.core.utils.CollectionUtils;
import com.kingsrook.qqq.backend.core.utils.StringUtils;
import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRule;
/*******************************************************************************
@ -37,8 +40,11 @@ import com.kingsrook.qqq.backend.core.utils.CollectionUtils;
*******************************************************************************/
public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
{
public static final String TYPE = "materialDashboard";
private List<List<String>> gotoFieldNames;
private List<String> defaultQuickFilterFieldNames;
private List<FieldRule> fieldRules;
/*******************************************************************************
@ -58,10 +64,25 @@ public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
@Override
public String getType()
{
return ("materialDashboard");
return (TYPE);
}
/*******************************************************************************
**
*******************************************************************************/
public static MaterialDashboardTableMetaData ofOrWithNew(QTableMetaData table)
{
MaterialDashboardTableMetaData supplementalMetaData = (MaterialDashboardTableMetaData) table.getSupplementalMetaData(TYPE);
if(supplementalMetaData == null)
{
supplementalMetaData = new MaterialDashboardTableMetaData();
table.withSupplementalMetaData(supplementalMetaData);
}
return (supplementalMetaData);
}
/*******************************************************************************
** Getter for gotoFieldNames
@ -110,6 +131,22 @@ public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
validateListOfFieldNames(tableMetaData, gotoFieldNameSubList, qInstanceValidator, prefix + "gotoFieldNames: ");
}
validateListOfFieldNames(tableMetaData, defaultQuickFilterFieldNames, qInstanceValidator, prefix + "defaultQuickFilterFieldNames: ");
for(FieldRule fieldRule : CollectionUtils.nonNullList(fieldRules))
{
qInstanceValidator.assertCondition(fieldRule.getTrigger() != null, prefix + "has a fieldRule without a trigger");
qInstanceValidator.assertCondition(fieldRule.getAction() != null, prefix + "has a fieldRule without an action");
if(qInstanceValidator.assertCondition(StringUtils.hasContent(fieldRule.getSourceField()), prefix + "has a fieldRule without a sourceField"))
{
qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getSourceField()), prefix + "has a fieldRule with an unrecognized sourceField: " + fieldRule.getSourceField());
}
if(qInstanceValidator.assertCondition(StringUtils.hasContent(fieldRule.getTargetField()), prefix + "has a fieldRule without a targetField"))
{
qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getTargetField()), prefix + "has a fieldRule with an unrecognized targetField: " + fieldRule.getTargetField());
}
}
}
@ -161,4 +198,51 @@ public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
return (this);
}
/*******************************************************************************
** Getter for fieldRules
*******************************************************************************/
public List<FieldRule> getFieldRules()
{
return (this.fieldRules);
}
/*******************************************************************************
** Setter for fieldRules
*******************************************************************************/
public void setFieldRules(List<FieldRule> fieldRules)
{
this.fieldRules = fieldRules;
}
/*******************************************************************************
** Fluent setter for fieldRules
*******************************************************************************/
public MaterialDashboardTableMetaData withFieldRules(List<FieldRule> fieldRules)
{
this.fieldRules = fieldRules;
return (this);
}
/*******************************************************************************
** Fluent setter for fieldRules
*******************************************************************************/
public MaterialDashboardTableMetaData withFieldRule(FieldRule fieldRule)
{
if(this.fieldRules == null)
{
this.fieldRules = new ArrayList<>();
}
this.fieldRules.add(fieldRule);
return (this);
}
}

165
src/main/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/fieldrules/FieldRule.java Normal file
View File

@ -0,0 +1,165 @@
/*
* 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/>.
*/
package com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules;
import java.io.Serializable;
/*******************************************************************************
** definition of rules for how UI fields should behave.
**
** e.g., one field being changed causing different things to be needed in another
** field.
*******************************************************************************/
public class FieldRule implements Serializable
{
private FieldRuleTrigger trigger;
private String sourceField;
private FieldRuleAction action;
private String targetField;
/*******************************************************************************
** Getter for trigger
*******************************************************************************/
public FieldRuleTrigger getTrigger()
{
return (this.trigger);
}
/*******************************************************************************
** Setter for trigger
*******************************************************************************/
public void setTrigger(FieldRuleTrigger trigger)
{
this.trigger = trigger;
}
/*******************************************************************************
** Fluent setter for trigger
*******************************************************************************/
public FieldRule withTrigger(FieldRuleTrigger trigger)
{
this.trigger = trigger;
return (this);
}
/*******************************************************************************
** Getter for sourceField
*******************************************************************************/
public String getSourceField()
{
return (this.sourceField);
}
/*******************************************************************************
** Setter for sourceField
*******************************************************************************/
public void setSourceField(String sourceField)
{
this.sourceField = sourceField;
}
/*******************************************************************************
** Fluent setter for sourceField
*******************************************************************************/
public FieldRule withSourceField(String sourceField)
{
this.sourceField = sourceField;
return (this);
}
/*******************************************************************************
** Getter for action
*******************************************************************************/
public FieldRuleAction getAction()
{
return (this.action);
}
/*******************************************************************************
** Setter for action
*******************************************************************************/
public void setAction(FieldRuleAction action)
{
this.action = action;
}
/*******************************************************************************
** Fluent setter for action
*******************************************************************************/
public FieldRule withAction(FieldRuleAction action)
{
this.action = action;
return (this);
}
/*******************************************************************************
** Getter for targetField
*******************************************************************************/
public String getTargetField()
{
return (this.targetField);
}
/*******************************************************************************
** Setter for targetField
*******************************************************************************/
public void setTargetField(String targetField)
{
this.targetField = targetField;
}
/*******************************************************************************
** Fluent setter for targetField
*******************************************************************************/
public FieldRule withTargetField(String targetField)
{
this.targetField = targetField;
return (this);
}
}

31
src/main/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/fieldrules/FieldRuleAction.java Normal file
View File

@ -0,0 +1,31 @@
/*
* 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/>.
*/
package com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules;
/*******************************************************************************
** possible actions associated with field rules
*******************************************************************************/
public enum FieldRuleAction
{
CLEAR_TARGET_FIELD
}

31
src/main/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/fieldrules/FieldRuleTrigger.java Normal file
View File

@ -0,0 +1,31 @@
/*
* 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/>.
*/
package com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules;
/*******************************************************************************
** possible triggers associated with field rules
*******************************************************************************/
public enum FieldRuleTrigger
{
ON_CHANGE
}

59
src/main/java/com/kingsrook/qqq/frontend/materialdashboard/savedreports/SavedReportTableFrontendMaterialDashboardEnricher.java Normal file
View File

@ -0,0 +1,59 @@
/*
* 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/>.
*/
package com.kingsrook.qqq.frontend.materialdashboard.savedreports;
import java.util.List;
import com.kingsrook.qqq.backend.core.model.metadata.tables.QTableMetaData;
import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.MaterialDashboardTableMetaData;
import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRule;
import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRuleAction;
import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRuleTrigger;
/*******************************************************************************
** Add frontend material dashboard enhacements to saved report table
*******************************************************************************/
public class SavedReportTableFrontendMaterialDashboardEnricher
{
/*******************************************************************************
**
*******************************************************************************/
public static void enrich(QTableMetaData tableMetaData)
{
MaterialDashboardTableMetaData materialDashboardTableMetaData = MaterialDashboardTableMetaData.ofOrWithNew(tableMetaData);
/////////////////////////////////////////////////////////////////////////
// make changes to the tableName field clear the value in these fields //
/////////////////////////////////////////////////////////////////////////
for(String targetField : List.of("queryFilterJson", "columnsJson", "pivotTableJson"))
{
materialDashboardTableMetaData.withFieldRule(new FieldRule()
.withSourceField("tableName")
.withTrigger(FieldRuleTrigger.ON_CHANGE)
.withAction(FieldRuleAction.CLEAR_TARGET_FIELD)
.withTargetField(targetField));
}
}
}

268
src/qqq/components/forms/EntityForm.tsx
View File

@ -43,7 +43,10 @@ import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
import MDTypography from "qqq/components/legacy/MDTypography";
import HelpContent from "qqq/components/misc/HelpContent";
import QRecordSidebar from "qqq/components/misc/RecordSidebar";
import PivotTableSetupWidget from "qqq/components/widgets/misc/PivotTableSetupWidget";
import RecordGridWidget, {ChildRecordListData} from "qqq/components/widgets/misc/RecordGridWidget";
import ReportSetupWidget from "qqq/components/widgets/misc/ReportSetupWidget";
import {FieldRule, FieldRuleAction, FieldRuleTrigger} from "qqq/models/fields/FieldRules";
import HtmlUtils from "qqq/utils/HtmlUtils";
import Client from "qqq/utils/qqq/Client";
import TableUtils from "qqq/utils/qqq/TableUtils";
@ -63,7 +66,7 @@ interface Props
disabledFields: { [key: string]: boolean } | string[];
isCopy?: boolean;
onSubmitCallback?: (values: any) => void;
overrideHeading?: string
overrideHeading?: string;
}
EntityForm.defaultProps = {
@ -77,6 +80,15 @@ EntityForm.defaultProps = {
onSubmitCallback: null,
};
////////////////////////////////////////////////////////////////////////////
// define a function that we can make referenes to, which we'll overwrite //
// with formik's setFieldValue function, once we're inside formik. //
////////////////////////////////////////////////////////////////////////////
let formikSetFieldValueFunction = (field: string, value: any, shouldValidate?: boolean): void =>
{
}
function EntityForm(props: Props): JSX.Element
{
const qController = Client.getInstance();
@ -97,6 +109,7 @@ function EntityForm(props: Props): JSX.Element
const [asyncLoadInited, setAsyncLoadInited] = useState(false);
const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
const [fieldRules, setFieldRules] = useState([] as FieldRule[]);
const [metaData, setMetaData] = useState(null as QInstance);
const [record, setRecord] = useState(null as QRecord);
const [tableSections, setTableSections] = useState(null as QTableSection[]);
@ -108,6 +121,9 @@ function EntityForm(props: Props): JSX.Element
const [notAllowedError, setNotAllowedError] = useState(null as string);
const [formValuesJSON, setFormValuesJSON] = useState("");
const [formValues, setFormValues] = useState({} as {[name: string]: any});
const {pageHeader, setPageHeader} = useContext(QContext);
const navigate = useNavigate();
@ -128,21 +144,26 @@ function EntityForm(props: Props): JSX.Element
{
try
{
const parts = hashParts[i].split("=")
if (parts.length > 1 && parts[0] == "defaultValues")
const parts = hashParts[i].split("=");
if (parts.length > 1)
{
defaultValues = JSON.parse(decodeURIComponent(parts[1])) as { [key: string]: any };
const name = parts[0].replace(/^#/, "");
const value = parts[1];
if (name == "defaultValues")
{
defaultValues = JSON.parse(decodeURIComponent(value)) as { [key: string]: any };
}
if (parts.length > 1 && parts[0] == "disabledFields")
if (name == "disabledFields")
{
disabledFields = JSON.parse(decodeURIComponent(parts[1])) as { [key: string]: any };
disabledFields = JSON.parse(decodeURIComponent(value)) as { [key: string]: any };
}
}
}
catch (e)
{}
{
}
}
/*******************************************************************************
@ -234,7 +255,7 @@ function EntityForm(props: Props): JSX.Element
const metaData = await qController.loadMetaData();
const widgetMetaData = metaData.widgets.get(widgetName);
const newChildListWidgetData: {[name: string]: ChildRecordListData} = Object.assign({}, childListWidgetData)
const newChildListWidgetData: { [name: string]: ChildRecordListData } = Object.assign({}, childListWidgetData);
if (!newChildListWidgetData[widgetName].queryOutput.records)
{
newChildListWidgetData[widgetName].queryOutput.records = [];
@ -243,7 +264,7 @@ function EntityForm(props: Props): JSX.Element
switch (action)
{
case "insert":
newChildListWidgetData[widgetName].queryOutput.records.push({values: values})
newChildListWidgetData[widgetName].queryOutput.records.push({values: values});
break;
case "edit":
newChildListWidgetData[widgetName].queryOutput.records[rowIndex] = {values: values};
@ -255,7 +276,7 @@ function EntityForm(props: Props): JSX.Element
newChildListWidgetData[widgetName].totalRows = newChildListWidgetData[widgetName].queryOutput.records.length;
setChildListWidgetData(newChildListWidgetData);
const newRenderedWidgetSections = Object.assign({}, renderedWidgetSections)
const newRenderedWidgetSections = Object.assign({}, renderedWidgetSections);
newRenderedWidgetSections[widgetName] = getWidgetSection(widgetMetaData, newChildListWidgetData[widgetName]);
setRenderedWidgetSections(newRenderedWidgetSections);
forceUpdate();
@ -264,6 +285,21 @@ function EntityForm(props: Props): JSX.Element
}
/*******************************************************************************
** Watch the record values - if they change, re-render widgets
*******************************************************************************/
useEffect(() =>
{
const newRenderedWidgetSections: {[name: string]: JSX.Element} = {};
for (let widgetName in renderedWidgetSections)
{
const widgetMetaData = metaData.widgets.get(widgetName);
newRenderedWidgetSections[widgetName] = getWidgetSection(widgetMetaData, childListWidgetData[widgetName]);
}
setRenderedWidgetSections(newRenderedWidgetSections);
}, [formValuesJSON]);
/*******************************************************************************
** render a section (full of fields) as a form
*******************************************************************************/
@ -293,11 +329,11 @@ function EntityForm(props: Props): JSX.Element
return <div>Error: No form fields in section {section.name}</div>;
}
const helpRoles = [props.id ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"]
const helpRoles = [props.id ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"];
if (omitWrapper)
{
return <QDynamicForm formData={formData} record={record} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableName};`} />
return <QDynamicForm formData={formData} record={record} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableName};`} />;
}
return <Card id={section.name} sx={{overflow: "visible", scrollMarginTop: "100px"}} elevation={cardElevation}>
@ -310,7 +346,21 @@ function EntityForm(props: Props): JSX.Element
<QDynamicForm formData={formData} record={record} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableName};`} />
</Box>
</Box>
</Card>
</Card>;
}
/*******************************************************************************
** if we have a widget that wants to set form-field values, they can take this
** function in as a callback, and then call it with their values.
*******************************************************************************/
function setFormFieldValuesFromWidget(values: {[name: string]: any})
{
for (let key in values)
{
formikSetFieldValueFunction(key, values[key]);
}
}
@ -318,6 +368,8 @@ function EntityForm(props: Props): JSX.Element
** render a section as a widget
*******************************************************************************/
function getWidgetSection(widgetMetaData: QWidgetMetaData, widgetData: any): JSX.Element
{
if(widgetMetaData.type == "childRecordList")
{
widgetData.viewAllLink = null;
widgetMetaData.showExportButton = false;
@ -332,9 +384,34 @@ function EntityForm(props: Props): JSX.Element
addNewRecordCallback={() => openAddChildRecord(widgetMetaData.name, widgetData)}
editRecordCallback={(rowIndex) => openEditChildRecord(widgetMetaData.name, widgetData, rowIndex)}
deleteRecordCallback={(rowIndex) => deleteChildRecord(widgetMetaData.name, widgetData, rowIndex)}
/>;
}
if(widgetMetaData.type == "reportSetup")
{
return <ReportSetupWidget
key={formValues["tableName"]} // todo, is this good? it was added so that editing values actually re-renders...
isEditable={true}
widgetMetaData={widgetMetaData}
recordValues={formValues}
onSaveCallback={setFormFieldValuesFromWidget}
/>
}
if(widgetMetaData.type == "pivotTableSetup")
{
return <PivotTableSetupWidget
key={formValues["tableName"]} // todo, is this good? it was added so that editing values actually re-renders...
isEditable={true}
widgetMetaData={widgetMetaData}
recordValues={formValues}
onSaveCallback={setFormFieldValuesFromWidget}
/>
}
return (<Box>Unsupported widget type: {widgetMetaData.type}</Box>)
}
/*******************************************************************************
** render a form section
@ -347,11 +424,37 @@ function EntityForm(props: Props): JSX.Element
}
else
{
return renderedWidgetSections[section.widgetName] ?? <Box>Loading {section.label}...</Box>
return renderedWidgetSections[section.widgetName] ?? <Box>Loading {section.label}...</Box>;
}
}
/*******************************************************************************
**
*******************************************************************************/
function setupFieldRules(tableMetaData: QTableMetaData)
{
const mdbMetaData = tableMetaData?.supplementalTableMetaData?.get("materialDashboard");
if(!mdbMetaData)
{
return;
}
if(mdbMetaData.fieldRules)
{
const newFieldRules: FieldRule[] = [];
for (let i = 0; i < mdbMetaData.fieldRules.length; i++)
{
newFieldRules.push(mdbMetaData.fieldRules[i]);
}
setFieldRules(newFieldRules);
}
}
//////////////////
// initial load //
//////////////////
if (!asyncLoadInited)
{
setAsyncLoadInited(true);
@ -361,6 +464,8 @@ function EntityForm(props: Props): JSX.Element
setTableMetaData(tableMetaData);
recordAnalytics({location: window.location, title: (props.isCopy ? "Copy" : props.id ? "Edit" : "New") + ": " + tableMetaData.label});
setupFieldRules(tableMetaData);
const metaData = await qController.loadMetaData();
setMetaData(metaData);
@ -369,7 +474,21 @@ function EntityForm(props: Props): JSX.Element
/////////////////////////////////////////////////
const tableSections = TableUtils.getSectionsForRecordSidebar(tableMetaData, [...tableMetaData.fields.keys()], (section: QTableSection) =>
{
return section.widgetName && metaData.widgets.get(section.widgetName)?.type == "childRecordList" && metaData.widgets.get(section.widgetName)?.defaultValues?.has("manageAssociationName")
const widget = metaData.widgets.get(section.widgetName);
if(widget)
{
if(widget.type == "childRecordList" && widget.defaultValues?.has("manageAssociationName"))
{
return (true);
}
if(widget.type == "reportSetup" || widget.type == "pivotTableSetup")
{
return (true);
}
}
return (false);
});
setTableSections(tableSections);
@ -547,12 +666,6 @@ function EntityForm(props: Props): JSX.Element
}
const hasFields = section.fieldNames && section.fieldNames.length > 0;
const hasChildRecordListWidget = section.widgetName && metaData.widgets.get(section.widgetName)?.type == "childRecordList"
if(!hasFields && !hasChildRecordListWidget)
{
continue;
}
if(hasFields)
{
for (let j = 0; j < section.fieldNames.length; j++)
@ -597,6 +710,7 @@ function EntityForm(props: Props): JSX.Element
newRenderedWidgetSections[section.widgetName] = getWidgetSection(widgetMetaData, widgetData);
newChildListWidgetData[section.widgetName] = widgetData;
}
//////////////////////////////////////
// capture the tier1 section's name //
//////////////////////////////////////
@ -704,7 +818,7 @@ function EntityForm(props: Props): JSX.Element
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
if (fieldMetaData.type === QFieldType.DATE_TIME && valuesToPost[fieldName])
{
console.log(`DateTime ${fieldName}: Initial value: [${initialValues[fieldName]}] -> [${valuesToPost[fieldName]}]`)
console.log(`DateTime ${fieldName}: Initial value: [${initialValues[fieldName]}] -> [${valuesToPost[fieldName]}]`);
if (initialValues[fieldName] == valuesToPost[fieldName])
{
console.log(" - Is the same, so, deleting from the post");
@ -737,11 +851,11 @@ function EntityForm(props: Props): JSX.Element
}
}
const associationsToPost: any = {}
const associationsToPost: any = {};
let haveAssociationsToPost = false;
for (let name of Object.keys(childListWidgetData))
{
const manageAssociationName = metaData.widgets.get(name)?.defaultValues?.get("manageAssociationName")
const manageAssociationName = metaData.widgets.get(name)?.defaultValues?.get("manageAssociationName");
if (!manageAssociationName)
{
console.log(`Cannot send association data to backend - missing a manageAssociationName defaultValue in widget meta data for widget name ${name}`);
@ -851,21 +965,42 @@ function EntityForm(props: Props): JSX.Element
})();
};
/*******************************************************************************
** process a form-field having a changed value (e.g., apply field rules).
*******************************************************************************/
function handleChangedFieldValue(fieldName: string, oldValue: any, newValue: any, valueChangesToMake: {[fieldName: string]: any})
{
for (let fieldRule of fieldRules)
{
if(fieldRule.trigger == FieldRuleTrigger.ON_CHANGE && fieldRule.sourceField == fieldName)
{
switch (fieldRule.action)
{
case FieldRuleAction.CLEAR_TARGET_FIELD:
console.log(`Clearing value from [${fieldRule.targetField}] due to change in [${fieldName}]`);
valueChangesToMake[fieldRule.targetField] = null;
break;
}
}
}
}
const formId = props.id != null ? `edit-${tableMetaData?.name}-form` : `create-${tableMetaData?.name}-form`;
let body;
const getSectionHelp = (section: QTableSection) =>
{
const helpRoles = [props.id ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"]
const helpRoles = [props.id ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"];
const formattedHelpContent = <HelpContent helpContents={section.helpContents} roles={helpRoles} helpContentKey={`table:${tableMetaData.name};section:${section.name}`} />;
return formattedHelpContent && (
<Box px={"1.5rem"} fontSize={"0.875rem"}>
{formattedHelpContent}
</Box>
)
}
);
};
if (notAllowedError)
{
@ -889,7 +1024,7 @@ function EntityForm(props: Props): JSX.Element
else
{
body = (
<Box mb={3}>
<Box mb={3} className="entityForm">
{
(alertContent || warningContent) &&
<Grid container spacing={3}>
@ -926,7 +1061,71 @@ function EntityForm(props: Props): JSX.Element
errors,
touched,
isSubmitting,
}) => (
setFieldValue,
dirty
}) =>
{
/////////////////////////////////////////////////
// if we have values from formik, look at them //
/////////////////////////////////////////////////
if(values)
{
////////////////////////////////////////////////////////////////////////
// use stringified values as cheap/easy way to see if any are changed //
////////////////////////////////////////////////////////////////////////
const newFormValuesJSON = JSON.stringify(values);
if(formValuesJSON != newFormValuesJSON)
{
const valueChangesToMake: {[fieldName: string]: any} = {};
////////////////////////////////////////////////////////////////////
// if the form is dirty (e.g., we're not doing the initial load), //
// then process rules for any changed fields //
////////////////////////////////////////////////////////////////////
if(dirty)
{
for (let fieldName in values)
{
if (formValues[fieldName] != values[fieldName])
{
handleChangedFieldValue(fieldName, formValues[fieldName], values[fieldName], valueChangesToMake);
}
formValues[fieldName] = values[fieldName];
}
}
else
{
/////////////////////////////////////////////////////////////////////////////////////
// if the form is clean, make sure the formValues object has all form values in it //
/////////////////////////////////////////////////////////////////////////////////////
for (let fieldName in values)
{
formValues[fieldName] = values[fieldName];
}
}
/////////////////////////////////////////////////////////////////////////////
// if there were any changes to be made from the rule evaluation, //
// make those changes in the formValues map, and in formik (setFieldValue) //
/////////////////////////////////////////////////////////////////////////////
for (let fieldName in valueChangesToMake)
{
formValues[fieldName] = valueChangesToMake[fieldName];
setFieldValue(fieldName, valueChangesToMake[fieldName], false);
}
setFormValues(formValues)
setFormValuesJSON(JSON.stringify(values));
}
}
///////////////////////////////////////////////////////////////////
// once we're in the formik form, use its setFieldValue function //
// over top of the default one we created globally //
///////////////////////////////////////////////////////////////////
formikSetFieldValueFunction = setFieldValue;
return (
<Form id={formId} autoComplete="off">
<ScrollToFirstError />
@ -970,7 +1169,8 @@ function EntityForm(props: Props): JSX.Element
</Box>
</Form>
)}
);
}}
</Formik>
{
@ -1014,7 +1214,7 @@ function EntityForm(props: Props): JSX.Element
function ScrollToFirstError(): JSX.Element
{
const {submitCount, isValid} = useFormikContext()
const {submitCount, isValid} = useFormikContext();
useEffect(() =>
{
@ -1044,8 +1244,8 @@ function ScrollToFirstError(): JSX.Element
}
firstErrorMessage.scrollIntoView({block: "center"});
}, 100)
}, [submitCount, isValid])
}, 100);
}, [submitCount, isValid]);
return null;
}

70
src/qqq/components/misc/FieldAutoComplete.tsx
View File

@ -23,9 +23,11 @@
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {Box} from "@mui/material";
import Autocomplete, {AutocompleteRenderOptionState} from "@mui/material/Autocomplete";
import Icon from "@mui/material/Icon";
import TextField from "@mui/material/TextField";
import React, {ReactNode} from "react";
import React, {ReactNode, useState} from "react";
interface FieldAutoCompleteProps
{
@ -37,6 +39,13 @@ interface FieldAutoCompleteProps
autoFocus?: boolean;
forceOpen?: boolean;
hiddenFieldNames?: string[];
availableFieldNames?: string[];
variant?: "standard" | "filled" | "outlined";
label?: string;
textFieldSX?: any;
autocompleteSlotProps?: any;
hasError?: boolean;
noOptionsText?: string;
}
FieldAutoComplete.defaultProps =
@ -44,17 +53,29 @@ FieldAutoComplete.defaultProps =
defaultValue: null,
autoFocus: false,
forceOpen: null,
hiddenFieldNames: []
hiddenFieldNames: [],
availableFieldNames: [],
variant: "standard",
label: "Field",
textFieldSX: null,
autocompleteSlotProps: null,
hasError: false,
noOptionsText: "No options",
};
function makeFieldOptionsForTable(tableMetaData: QTableMetaData, fieldOptions: any[], isJoinTable: boolean, hiddenFieldNames: string[])
function makeFieldOptionsForTable(tableMetaData: QTableMetaData, fieldOptions: any[], isJoinTable: boolean, hiddenFieldNames: string[], availableFieldNames: string[], selectedFieldName: string)
{
const sortedFields = [...tableMetaData.fields.values()].sort((a, b) => a.label.localeCompare(b.label));
for (let i = 0; i < sortedFields.length; i++)
{
const fieldName = isJoinTable ? `${tableMetaData.name}.${sortedFields[i].name}` : sortedFields[i].name;
if(hiddenFieldNames && hiddenFieldNames.indexOf(fieldName) > -1)
if (hiddenFieldNames && hiddenFieldNames.indexOf(fieldName) > -1 && fieldName != selectedFieldName)
{
continue;
}
if (availableFieldNames?.length && availableFieldNames.indexOf(fieldName) == -1)
{
continue;
}
@ -63,10 +84,16 @@ function makeFieldOptionsForTable(tableMetaData: QTableMetaData, fieldOptions: a
}
}
export default function FieldAutoComplete({id, metaData, tableMetaData, handleFieldChange, defaultValue, autoFocus, forceOpen, hiddenFieldNames}: FieldAutoCompleteProps): JSX.Element
/*******************************************************************************
** Component for rendering a list of field names from a table as an auto-complete.
*******************************************************************************/
export default function FieldAutoComplete({id, metaData, tableMetaData, handleFieldChange, defaultValue, autoFocus, forceOpen, hiddenFieldNames, availableFieldNames, variant, label, textFieldSX, autocompleteSlotProps, hasError, noOptionsText}: FieldAutoCompleteProps): JSX.Element
{
const [selectedFieldName, setSelectedFieldName] = useState(defaultValue ? defaultValue.fieldName : null);
const fieldOptions: any[] = [];
makeFieldOptionsForTable(tableMetaData, fieldOptions, false, hiddenFieldNames);
makeFieldOptionsForTable(tableMetaData, fieldOptions, false, hiddenFieldNames, availableFieldNames, selectedFieldName);
let fieldsGroupBy = null;
if (tableMetaData.exposedJoins && tableMetaData.exposedJoins.length > 0)
@ -77,7 +104,7 @@ export default function FieldAutoComplete({id, metaData, tableMetaData, handleFi
if (metaData.tables.has(exposedJoin.joinTable.name))
{
fieldsGroupBy = (option: any) => `${option.table.label} fields`;
makeFieldOptionsForTable(exposedJoin.joinTable, fieldOptions, true, hiddenFieldNames);
makeFieldOptionsForTable(exposedJoin.joinTable, fieldOptions, true, hiddenFieldNames, availableFieldNames, selectedFieldName);
}
}
}
@ -130,27 +157,48 @@ export default function FieldAutoComplete({id, metaData, tableMetaData, handleFi
// seems like, if we always add the open attribute, then if its false or null, then the autocomplete //
// doesn't open at all... so, only add the attribute at all, if forceOpen is true //
///////////////////////////////////////////////////////////////////////////////////////////////////////
const alsoOpen: {[key: string]: any} = {}
const alsoOpen: { [key: string]: any } = {};
if (forceOpen)
{
alsoOpen["open"] = forceOpen;
}
/*******************************************************************************
**
*******************************************************************************/
function onChange(event: any, newValue: any, reason: string)
{
setSelectedFieldName(newValue ? newValue.fieldName : null);
handleFieldChange(event, newValue, reason);
}
return (
<Autocomplete
id={id}
renderInput={(params) => (<TextField {...params} autoFocus={autoFocus} label={"Field"} variant="standard" autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
renderInput={(params) =>
{
const inputProps = params.InputProps;
const originalEndAdornment = inputProps.endAdornment;
inputProps.endAdornment = <Box>
{hasError && <Icon color="error">error_outline</Icon>}
{originalEndAdornment}
</Box>;
return (<TextField {...params} autoFocus={autoFocus} label={label} variant={variant} sx={textFieldSX} autoComplete="off" type="search" InputProps={inputProps} />)
}}
// @ts-ignore
defaultValue={defaultValue}
options={fieldOptions}
onChange={handleFieldChange}
onChange={onChange}
isOptionEqualToValue={(option, value) => isFieldOptionEqual(option, value)}
groupBy={fieldsGroupBy}
getOptionLabel={(option) => getFieldOptionLabel(option)}
renderOption={(props, option, state) => renderFieldOption(props, option, state)}
autoSelect={true}
autoHighlight={true}
slotProps={{popper: {className: "filterCriteriaRowColumnPopper", style: {padding: 0, width: "250px"}}}}
slotProps={autocompleteSlotProps ?? {}}
noOptionsText={noOptionsText}
{...alsoOpen}
/>

106
src/qqq/components/misc/SavedViews.tsx
View File

@ -44,6 +44,7 @@ import QContext from "QContext";
import colors from "qqq/assets/theme/base/colors";
import {QCancelButton, QDeleteButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
import RecordQueryView from "qqq/models/query/RecordQueryView";
import {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
import FilterUtils from "qqq/utils/qqq/FilterUtils";
import {SavedViewUtils} from "qqq/utils/qqq/SavedViewUtils";
import React, {useContext, useEffect, useRef, useState} from "react";
@ -60,9 +61,10 @@ interface Props
viewAsJson?: string;
viewOnChangeCallback?: (selectedSavedViewId: number) => void;
loadingSavedView: boolean
queryScreenUsage: QueryScreenUsage;
}
function SavedViews({qController, metaData, tableMetaData, currentSavedView, tableDefaultView, view, viewAsJson, viewOnChangeCallback, loadingSavedView}: Props): JSX.Element
function SavedViews({qController, metaData, tableMetaData, currentSavedView, tableDefaultView, view, viewAsJson, viewOnChangeCallback, loadingSavedView, queryScreenUsage}: Props): JSX.Element
{
const navigate = useNavigate();
@ -87,10 +89,18 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
const RENAME_OPTION = "Rename...";
const DELETE_OPTION = "Delete...";
const CLEAR_OPTION = "New View";
const dropdownOptions = [DUPLICATE_OPTION, RENAME_OPTION, DELETE_OPTION, CLEAR_OPTION];
const NEW_REPORT_OPTION = "Create Report from Current View";
const {accentColor, accentColorLight} = useContext(QContext);
/////////////////////////////////////////////////////////////////////////////////////////
// this component is used by <RecordQuery> - but that component has different usages - //
// e.g., the full-fledged query screen, but also, within other screens (e.g., a modal //
// under the ReportSetupWidget). So, there are some behaviors we only want when we're //
// on the full-fledged query screen, such as changing the URL with saved view ids. //
/////////////////////////////////////////////////////////////////////////////////////////
const isQueryScreen = queryScreenUsage == "queryScreen";
const openSavedViewsMenu = (event: any) => setSavedViewsMenu(event.currentTarget);
const closeSavedViewsMenu = () => setSavedViewsMenu(null);
@ -142,7 +152,10 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
setSaveFilterPopupOpen(false);
closeSavedViewsMenu();
viewOnChangeCallback(record.values.get("id"));
if(isQueryScreen)
{
navigate(`${metaData.getTablePathByName(tableMetaData.name)}/savedView/${record.values.get("id")}`);
}
};
@ -175,7 +188,10 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
case CLEAR_OPTION:
setSaveFilterPopupOpen(false)
viewOnChangeCallback(null);
if(isQueryScreen)
{
navigate(metaData.getTablePathByName(tableMetaData.name));
}
break;
case RENAME_OPTION:
if(currentSavedView != null)
@ -187,10 +203,30 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
case DELETE_OPTION:
setIsDeleteFilter(true)
break;
case NEW_REPORT_OPTION:
createNewReport();
break;
}
}
/*******************************************************************************
**
*******************************************************************************/
function createNewReport()
{
const defaultValues: {[key: string]: any} = {};
defaultValues.tableName = tableMetaData.name;
let filterForBackend = JSON.parse(JSON.stringify(view.queryFilter));
filterForBackend = FilterUtils.prepQueryFilterForBackend(tableMetaData, filterForBackend);
defaultValues.queryFilterJson = JSON.stringify(filterForBackend);
defaultValues.columnsJson = JSON.stringify(view.queryColumns);
navigate(`${metaData.getTablePathByName("savedReport")}/create#defaultValues=${encodeURIComponent(JSON.stringify(defaultValues))}`);
}
/*******************************************************************************
** fired when save or delete button saved on confirmation dialogs
@ -376,6 +412,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
const hasStorePermission = metaData?.processes.has("storeSavedView");
const hasDeletePermission = metaData?.processes.has("deleteSavedView");
const hasQueryPermission = metaData?.processes.has("querySavedView");
const hasSavedReportsPermission = metaData?.tables.has("savedReport");
const tooltipMaxWidth = (maxWidth: string) =>
{
@ -398,11 +435,14 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
open={Boolean(savedViewsMenu)}
onClose={closeSavedViewsMenu}
keepMounted
PaperProps={{style: {maxHeight: "calc(100vh - 200px)", minHeight: "200px"}}}
PaperProps={{style: {maxHeight: "calc(100vh - 200px)", minWidth: "300px"}}}
>
<MenuItem sx={{width: "300px"}} disabled style={{"opacity": "initial"}}><b>View Actions</b></MenuItem>
{
hasStorePermission &&
isQueryScreen &&
<MenuItem sx={{width: "300px"}} disabled style={{"opacity": "initial"}}><b>View Actions</b></MenuItem>
}
{
isQueryScreen && hasStorePermission &&
<Tooltip {...menuTooltipAttribs} title={<>Save your current filters, columns and settings, for quick re-use at a later time.<br /><br />You will be prompted to enter a name if you choose this option.</>}>
<MenuItem onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>
<ListItemIcon><Icon>save</Icon></ListItemIcon>
@ -411,7 +451,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
</Tooltip>
}
{
hasStorePermission && currentSavedView != null &&
isQueryScreen && hasStorePermission && currentSavedView != null &&
<Tooltip {...menuTooltipAttribs} title="Change the name for this saved view.">
<MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(RENAME_OPTION)}>
<ListItemIcon><Icon>edit</Icon></ListItemIcon>
@ -420,7 +460,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
</Tooltip>
}
{
hasStorePermission && currentSavedView != null &&
isQueryScreen && hasStorePermission && currentSavedView != null &&
<Tooltip {...menuTooltipAttribs} title="Save a new copy this view, with a different name, separate from the original.">
<MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(DUPLICATE_OPTION)}>
<ListItemIcon><Icon>content_copy</Icon></ListItemIcon>
@ -429,7 +469,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
</Tooltip>
}
{
hasStorePermission && currentSavedView != null &&
isQueryScreen && hasDeletePermission && currentSavedView != null &&
<Tooltip {...menuTooltipAttribs} title="Delete this saved view.">
<MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(DELETE_OPTION)}>
<ListItemIcon><Icon>delete</Icon></ListItemIcon>
@ -438,6 +478,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
</Tooltip>
}
{
isQueryScreen &&
<Tooltip {...menuTooltipAttribs} title="Create a new view of this table, resetting the filters and columns to their defaults.">
<MenuItem onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>
<ListItemIcon><Icon>monitor</Icon></ListItemIcon>
@ -445,7 +486,18 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
</MenuItem>
</Tooltip>
}
<Divider/>
{
isQueryScreen && hasSavedReportsPermission &&
<Tooltip {...menuTooltipAttribs} title="Create a new Saved Report using your current view of this table as a starting point.">
<MenuItem onClick={() => handleDropdownOptionClick(NEW_REPORT_OPTION)}>
<ListItemIcon><Icon>article</Icon></ListItemIcon>
Create Report from Current View
</MenuItem>
</Tooltip>
}
{
isQueryScreen && <Divider/>
}
<MenuItem disabled style={{"opacity": "initial"}}><b>Your Saved Views</b></MenuItem>
{
savedViews && savedViews.length > 0 ? (
@ -455,7 +507,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
</MenuItem>
)
): (
<MenuItem>
<MenuItem disabled sx={{opacity: "1 !important"}}>
<i>You do not have any saved views for this table.</i>
</MenuItem>
)
@ -554,6 +606,8 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
<Box pl={2} pr={2} sx={{display: "flex", alignItems: "center"}}>
{
!currentSavedView && viewIsModified && <>
{
isQueryScreen && <>
<Tooltip {...tooltipMaxWidth("24rem")} sx={{cursor: "pointer"}} title={<>
<b>Unsaved Changes</b>
<ul style={{padding: "0.5rem 1rem"}}>
@ -567,12 +621,14 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
{/* vertical rule */}
<Box display="inline-block" borderLeft={`1px solid ${colors.grayLines.main}`} height="1rem" width="1px" position="relative" />
</>
}
<Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>Reset All Changes</Button>
</>
}
{
currentSavedView && viewIsModified && <>
isQueryScreen && currentSavedView && viewIsModified && <>
<Tooltip {...tooltipMaxWidth("24rem")} sx={{cursor: "pointer"}} title={<>
<b>Unsaved Changes</b>
<ul style={{padding: "0.5rem 1rem"}}>
@ -591,6 +647,34 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
<Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleSavedViewRecordOnClick(currentSavedView)}>Reset All Changes</Button>
</>
}
{
!isQueryScreen && currentSavedView &&
<Box>
<Box display="inline-block" fontSize="0.875rem" fontWeight="500" sx={{position: "relative", top: "-1px"}}>
{currentSavedView.values.get("label")}
</Box>
{
viewIsModified &&
<>
<Tooltip {...tooltipMaxWidth("24rem")} sx={{cursor: "pointer"}} title={<>
<b>Changes</b>
<ul style={{padding: "0.5rem 1rem"}}>
{
viewDiffs.map((s: string, i: number) => <li key={i}>{s}</li>)
}
</ul></>}>
<Box display="inline" ml="0.25rem" mr="0.25rem" sx={{...linkButtonStyle, p: 0, cursor: "default", position: "relative", top: "-1px"}}>with {viewDiffs.length} Change{viewDiffs.length == 1 ? "" : "s"}</Box>
</Tooltip>
<Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleSavedViewRecordOnClick(currentSavedView)}>Reset Changes</Button>
</>
}
{/* vertical rule */}
<Box display="inline-block" ml="0.25rem" borderLeft={`1px solid ${colors.grayLines.main}`} height="1rem" width="1px" position="relative" />
<Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>Reset to New View</Button>
</Box>
}
</Box>
</Box>
{

153
src/qqq/components/query/AdvancedQueryPreview.tsx Normal file
View File

@ -0,0 +1,153 @@
/*
* 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 {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
import Box from "@mui/material/Box";
import colors from "qqq/assets/theme/base/colors";
import {validateCriteria} from "qqq/components/query/FilterCriteriaRow";
import XIcon from "qqq/components/query/XIcon";
import FilterUtils from "qqq/utils/qqq/FilterUtils";
import React, {useState} from "react";
interface AdvancedQueryPreviewProps
{
tableMetaData: QTableMetaData;
queryFilter: QQueryFilter;
isEditable: boolean;
isQueryTooComplex: boolean;
removeCriteriaByIndexCallback: (index: number) => void;
}
/*******************************************************************************
** Box shown on query screen (and more??) to preview what a query looks like,
** as an "advanced" style/precursor-to-writing-your-own-query thing.
*******************************************************************************/
export default function AdvancedQueryPreview({tableMetaData, queryFilter, isEditable, isQueryTooComplex, removeCriteriaByIndexCallback}: AdvancedQueryPreviewProps): JSX.Element
{
const [mouseOverElement, setMouseOverElement] = useState(null as string);
/*******************************************************************************
**
*******************************************************************************/
function handleMouseOverElement(name: string)
{
setMouseOverElement(name);
}
/*******************************************************************************
**
*******************************************************************************/
function handleMouseOutElement()
{
setMouseOverElement(null);
}
/*******************************************************************************
** format the current query as a string for showing on-screen as a preview.
*******************************************************************************/
const queryToAdvancedString = (thisQueryFilter: QQueryFilter) =>
{
if (queryFilter == null || !queryFilter.criteria)
{
return (<span></span>);
}
let counter = 0;
return (
<React.Fragment>
{thisQueryFilter.criteria?.map((criteria, i) =>
{
const {criteriaIsValid} = validateCriteria(criteria, null);
if (criteriaIsValid)
{
counter++;
return (
<span key={i} style={{marginBottom: "0.125rem"}} onMouseOver={() => handleMouseOverElement(`queryPreview-${i}`)} onMouseOut={() => handleMouseOutElement()}>
{counter > 1 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span />}
{FilterUtils.criteriaToHumanString(tableMetaData, criteria, true)}
{isEditable && !isQueryTooComplex && (
mouseOverElement == `queryPreview-${i}` && <span className={`advancedQueryPreviewX-${counter - 1}`}>
<XIcon position="forAdvancedQueryPreview" onClick={() => removeCriteriaByIndexCallback(i)} /></span>
)}
{counter > 1 && i == thisQueryFilter.criteria?.length - 1 && thisQueryFilter.subFilters?.length > 0 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span />}
</span>
);
}
else
{
return (<span />);
}
})}
{thisQueryFilter.subFilters?.length > 0 && (thisQueryFilter.subFilters.map((filter: QQueryFilter, j) =>
{
return (
<React.Fragment key={j}>
{j > 0 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span></span>}
<span style={{display: "flex", marginRight: "0.20rem"}}>(</span>
{queryToAdvancedString(filter)}
<span style={{display: "flex", marginRight: "0.20rem"}}>)</span>
</React.Fragment>
);
}))}
</React.Fragment>
);
};
const moreSX = isEditable ?
{
borderTop: `1px solid ${colors.grayLines.main}`,
boxShadow: "inset 0px 0px 4px 2px #EFEFED",
borderRadius: "0 0 0.75rem 0.75rem",
} :
{
borderRadius: "0.75rem",
border: `1px solid ${colors.grayLines.main}`,
}
return (
<Box whiteSpace="nowrap" display="flex" flexShrink={1} flexGrow={1} alignItems="center">
{
<Box
className="advancedQueryString"
display="inline-block"
width="100%"
sx={{fontSize: "1rem", background: "#FFFFFF"}}
minHeight={"2.5rem"}
p={"0.5rem"}
pb={"0.125rem"}
{...moreSX}
>
<Box display="flex" flexWrap="wrap" fontSize="0.875rem">
{queryToAdvancedString(queryFilter)}
</Box>
</Box>
}
</Box>
)
}

109
src/qqq/components/query/BasicAndAdvancedQueryControls.tsx
View File

@ -44,11 +44,13 @@ import {GridApiPro} from "@mui/x-data-grid-pro/models/gridApiPro";
import QContext from "QContext";
import colors from "qqq/assets/theme/base/colors";
import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
import AdvancedQueryPreview from "qqq/components/query/AdvancedQueryPreview";
import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
import FieldListMenu from "qqq/components/query/FieldListMenu";
import {validateCriteria} from "qqq/components/query/FilterCriteriaRow";
import QuickFilter, {quickFilterButtonStyles} from "qqq/components/query/QuickFilter";
import XIcon from "qqq/components/query/XIcon";
import {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
import FilterUtils from "qqq/utils/qqq/FilterUtils";
import TableUtils from "qqq/utils/qqq/TableUtils";
import React, {forwardRef, useContext, useImperativeHandle, useReducer, useState} from "react";
@ -75,12 +77,34 @@ interface BasicAndAdvancedQueryControlsProps
/////////////////////////////////////////////////////////////////////////////////////////////
queryFilterJSON: string;
queryScreenUsage: QueryScreenUsage;
mode: string;
setMode: (mode: string) => void;
}
let debounceTimeout: string | number | NodeJS.Timeout;
/*******************************************************************************
** function to generate an element that says how a filter is sorted.
*******************************************************************************/
export function getCurrentSortIndicator(queryFilter: QQueryFilter, tableMetaData: QTableMetaData, toggleSortDirection: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void)
{
if (queryFilter && queryFilter.orderBys && queryFilter.orderBys.length > 0)
{
const orderBy = queryFilter.orderBys[0];
const orderByFieldName = orderBy.fieldName;
const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, orderByFieldName);
const fieldLabel = fieldTable.name == tableMetaData.name ? field.label : `${fieldTable.label}: ${field.label}`;
return <>Sort: {fieldLabel} <Icon onClick={toggleSortDirection} sx={{ml: "0.5rem"}}>{orderBy.isAscending ? "arrow_upward" : "arrow_downward"}</Icon></>;
}
else
{
return <>Sort...</>;
}
}
/*******************************************************************************
** Component to provide the basic & advanced query-filter controls for the
** RecordQueryOrig screen.
@ -397,60 +421,6 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
};
/*******************************************************************************
** format the current query as a string for showing on-screen as a preview.
*******************************************************************************/
const queryToAdvancedString = (thisQueryFilter: QQueryFilter) =>
{
if (queryFilter == null || !queryFilter.criteria)
{
return (<span></span>);
}
let counter = 0;
return (
<React.Fragment>
{thisQueryFilter.criteria?.map((criteria, i) =>
{
const {criteriaIsValid} = validateCriteria(criteria, null);
if (criteriaIsValid)
{
counter++;
return (
<span key={i} style={{marginBottom: "0.125rem"}} onMouseOver={() => handleMouseOverElement(`queryPreview-${i}`)} onMouseOut={() => handleMouseOutElement()}>
{counter > 1 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span />}
{FilterUtils.criteriaToHumanString(tableMetaData, criteria, true)}
{!isQueryTooComplex && (
mouseOverElement == `queryPreview-${i}` && <span className={`advancedQueryPreviewX-${counter - 1}`}>
<XIcon position="forAdvancedQueryPreview" onClick={() => removeCriteriaByIndex(i)} /></span>
)}
{counter > 1 && i == thisQueryFilter.criteria?.length - 1 && thisQueryFilter.subFilters?.length > 0 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span />}
</span>
);
}
else
{
return (<span />);
}
})}
{thisQueryFilter.subFilters?.length > 0 && (thisQueryFilter.subFilters.map((filter: QQueryFilter, j) =>
{
return (
<React.Fragment key={j}>
{j > 0 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span></span>}
<span style={{display: "flex", marginRight: "0.20rem"}}>(</span>
{queryToAdvancedString(filter)}
<span style={{display: "flex", marginRight: "0.20rem"}}>)</span>
</React.Fragment>
);
}))}
</React.Fragment>
);
};
/*******************************************************************************
** event handler for toggling between modes - basic & advanced.
*******************************************************************************/
@ -608,15 +578,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
/////////////////////////////////
// set up the sort menu button //
/////////////////////////////////
let sortButtonContents = <>Sort...</>;
if (queryFilter && queryFilter.orderBys && queryFilter.orderBys.length > 0)
{
const orderBy = queryFilter.orderBys[0];
const orderByFieldName = orderBy.fieldName;
const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, orderByFieldName);
const fieldLabel = fieldTable.name == tableMetaData.name ? field.label : `${fieldTable.label}: ${field.label}`;
sortButtonContents = <>Sort: {fieldLabel} <Icon onClick={toggleSortDirection} sx={{ml: "0.5rem"}}>{orderBy.isAscending ? "arrow_upward" : "arrow_downward"}</Icon></>;
}
let sortButtonContents = getCurrentSortIndicator(queryFilter, tableMetaData, toggleSortDirection);
////////////////////////////////////////////////////////////////////////////////////////////////////////////
// this is being used as a version of like forcing that we get re-rendered if the query filter changes... //
@ -807,26 +769,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
{sortMenuComponent}
</Box>
</Box>
<Box whiteSpace="nowrap" display="flex" flexShrink={1} flexGrow={1} alignItems="center">
{
<Box
className="advancedQueryString"
display="inline-block"
borderTop={`1px solid ${borderGray}`}
borderRadius="0 0 0.75rem 0.75rem"
width="100%"
sx={{fontSize: "1rem", background: "#FFFFFF"}}
minHeight={"2.375rem"}
p={"0.5rem"}
pb={"0.125rem"}
boxShadow={"inset 0px 0px 4px 2px #EFEFED"}
>
<Box display="flex" flexWrap="wrap" fontSize="0.875rem">
{queryToAdvancedString(queryFilter)}
</Box>
</Box>
}
</Box>
<AdvancedQueryPreview tableMetaData={tableMetaData} queryFilter={queryFilter} isEditable={true} isQueryTooComplex={isQueryTooComplex} removeCriteriaByIndexCallback={removeCriteriaByIndex} />
</Box>
}
</Box>

6
src/qqq/components/query/FilterCriteriaRow.tsx
View File

@ -33,10 +33,10 @@ import MenuItem from "@mui/material/MenuItem";
import Select, {SelectChangeEvent} from "@mui/material/Select/Select";
import TextField from "@mui/material/TextField";
import Tooltip from "@mui/material/Tooltip";
import React, {ReactNode, SyntheticEvent, useState} from "react";
import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
import FilterCriteriaRowValues from "qqq/components/query/FilterCriteriaRowValues";
import FilterUtils from "qqq/utils/qqq/FilterUtils";
import React, {ReactNode, SyntheticEvent, useState} from "react";
export enum ValueMode
@ -484,7 +484,9 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
: <span />}
</Box>
<Box display="inline-block" width={250} className="fieldColumn">
<FieldAutoComplete id={`field-${id}`} metaData={metaData} tableMetaData={tableMetaData} defaultValue={defaultFieldValue} handleFieldChange={handleFieldChange} />
<FieldAutoComplete id={`field-${id}`} metaData={metaData} tableMetaData={tableMetaData} defaultValue={defaultFieldValue} handleFieldChange={handleFieldChange}
autocompleteSlotProps={{popper: {className: "filterCriteriaRowColumnPopper", style: {padding: 0, width: "250px"}}}}
/>
</Box>
<Box display="inline-block" width={200} className="operatorColumn">
<Tooltip title={criteria.fieldName == null ? "You must select a field before you can select an operator" : null} enterDelay={tooltipEnterDelay}>

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

@ -19,6 +19,7 @@
*/
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import {Alert, Skeleton} from "@mui/material";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
@ -38,8 +39,10 @@ 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";
import PivotTableSetupWidget from "qqq/components/widgets/misc/PivotTableSetupWidget";
import QuickSightChart from "qqq/components/widgets/misc/QuickSightChart";
import RecordGridWidget from "qqq/components/widgets/misc/RecordGridWidget";
import ReportSetupWidget from "qqq/components/widgets/misc/ReportSetupWidget";
import ScriptViewer from "qqq/components/widgets/misc/ScriptViewer";
import StepperCard from "qqq/components/widgets/misc/StepperCard";
import USMapWidget from "qqq/components/widgets/misc/USMapWidget";
@ -61,6 +64,7 @@ interface Props
widgetMetaDataList: QWidgetMetaData[];
tableName?: string;
entityPrimaryKey?: string;
record?: QRecord;
omitWrappingGridContainer: boolean;
areChildren?: boolean;
childUrlParams?: string;
@ -79,7 +83,7 @@ DashboardWidgets.defaultProps = {
wrapWidgetsInTabPanels: false,
};
function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData, wrapWidgetsInTabPanels}: Props): JSX.Element
function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, record, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData, wrapWidgetsInTabPanels}: Props): JSX.Element
{
const [widgetData, setWidgetData] = useState([] as any[]);
const [widgetCounter, setWidgetCounter] = useState(0);
@ -248,6 +252,23 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
const widgetCount = widgetMetaDataList ? widgetMetaDataList.length : 0;
/*******************************************************************************
** helper function, to convert values from a QRecord values map to a regular old
** js object
*******************************************************************************/
function convertQRecordValuesFromMapToObject(record: QRecord): {[name: string]: any}
{
const rs: {[name: string]: any} = {};
if(record.values)
{
record.values.forEach((value, key) => rs[key] = value);
}
return (rs);
}
const renderWidget = (widgetMetaData: QWidgetMetaData, i: number): JSX.Element =>
{
const labelAdditionalComponentsRight: LabelComponent[] = [];
@ -561,6 +582,20 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
</Widget>
)
}
{
widgetMetaData.type === "reportSetup" && (
widgetData && widgetData[i] && widgetData[i].queryParams &&
<ReportSetupWidget isEditable={false} widgetMetaData={widgetMetaData} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
{}} />
)
}
{
widgetMetaData.type === "pivotTableSetup" && (
widgetData && widgetData[i] && widgetData[i].queryParams &&
<PivotTableSetupWidget isEditable={false} widgetMetaData={widgetMetaData} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
{}} />
)
}
</Box>
);
};

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

@ -21,10 +21,12 @@
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
import {InputLabel} from "@mui/material";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Card from "@mui/material/Card";
import Icon from "@mui/material/Icon";
import Switch from "@mui/material/Switch";
import Tooltip from "@mui/material/Tooltip/Tooltip";
import Typography from "@mui/material/Typography";
import parse from "html-react-parser";
@ -60,6 +62,7 @@ interface Props
labelAdditionalComponentsLeft: LabelComponent[];
labelAdditionalElementsLeft: JSX.Element[];
labelAdditionalComponentsRight: LabelComponent[];
labelAdditionalElementsRight: JSX.Element[];
labelBoxAdditionalSx?: any;
widgetMetaData?: QWidgetMetaData;
widgetData?: WidgetData;
@ -80,6 +83,7 @@ Widget.defaultProps = {
labelAdditionalComponentsLeft: [],
labelAdditionalElementsLeft: [],
labelAdditionalComponentsRight: [],
labelAdditionalElementsRight: [],
labelBoxAdditionalSx: {},
omitPadding: false,
};
@ -160,6 +164,79 @@ export class HeaderIcon extends LabelComponent
}
/*******************************************************************************
** a link (actually a button) for in a widget's header
*******************************************************************************/
interface HeaderLinkButtonComponentProps
{
label: string;
onClickCallback: () => void;
disabled?: boolean;
disabledTooltip?: string;
}
HeaderLinkButtonComponent.defaultProps = {
disabled: false,
disabledTooltip: null
};
export function HeaderLinkButtonComponent({label, onClickCallback, disabled, disabledTooltip}: HeaderLinkButtonComponentProps): JSX.Element
{
return (
<Tooltip title={disabledTooltip}>
<span>
<Button disabled={disabled} onClick={() => onClickCallback()} sx={{p: 0}} disableRipple>
<Typography display="inline" textTransform="none" fontSize={"1.125rem"}>
{label}
</Typography>
</Button>
</span>
</Tooltip>
);
}
/*******************************************************************************
**
*******************************************************************************/
interface HeaderToggleComponentProps
{
label: string;
getValue: () => boolean;
onClickCallback: () => void;
disabled?: boolean;
disabledTooltip?: string;
}
HeaderToggleComponent.defaultProps = {
disabled: false,
disabledTooltip: null
};
export function HeaderToggleComponent({label, getValue, onClickCallback, disabled, disabledTooltip}: HeaderToggleComponentProps): JSX.Element
{
const onClick = () =>
{
onClickCallback();
}
return (
<Box alignItems="baseline" mr="-0.75rem">
<Tooltip title={disabledTooltip}>
<span>
<InputLabel sx={{fontSize: "1.125rem", px: "0 !important", cursor: disabled ? "default" : "pointer", opacity: disabled ? 0.65 : 1}} unselectable="on">
{label} <Switch disabled={disabled} checked={getValue()} onClick={onClick} />
</InputLabel>
</span>
</Tooltip>
</Box>
);
}
/*******************************************************************************
**
*******************************************************************************/
@ -573,6 +650,8 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
localLabelAdditionalElementsLeft.push(WidgetUtils.generateExportButton(onExportClick));
}
let localLabelAdditionalElementsRight = [...props.labelAdditionalElementsRight];
const hasPermission = props.widgetData?.hasPermission === undefined || props.widgetData?.hasPermission === true;
const isSet = (v: any): boolean =>
@ -589,6 +668,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
needLabelBox ||= (labelComponentsLeft && labelComponentsLeft.length > 0);
needLabelBox ||= (localLabelAdditionalElementsLeft && localLabelAdditionalElementsLeft.length > 0);
needLabelBox ||= (labelComponentsRight && labelComponentsRight.length > 0);
needLabelBox ||= (localLabelAdditionalElementsRight && localLabelAdditionalElementsRight.length > 0);
needLabelBox ||= isSet(props.widgetData?.icon);
needLabelBox ||= isSet(props.widgetData?.label);
needLabelBox ||= isSet(props.widgetMetaData?.label);
@ -720,6 +800,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
})
)
}
{localLabelAdditionalElementsRight}
</Box>
</Box>
}

209
src/qqq/components/widgets/misc/PivotTableGroupByElement.tsx Normal file
View File

@ -0,0 +1,209 @@
/*
* 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 {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Icon from "@mui/material/Icon";
import type {Identifier, XYCoord} from "dnd-core";
import colors from "qqq/assets/theme/base/colors";
import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
import {DragItemTypes, fieldAutoCompleteTextFieldSX, getSelectedFieldForAutoComplete, xIconButtonSX} from "qqq/components/widgets/misc/PivotTableSetupWidget";
import {PivotTableDefinition, PivotTableGroupBy} from "qqq/models/misc/PivotTableDefinitionModels";
import React, {FC, useRef} from "react";
import {useDrag, useDrop} from "react-dnd";
/*******************************************************************************
** component props
*******************************************************************************/
export interface PivotTableGroupByElementProps
{
id: string;
index: number;
dragCallback: (rowsOrColumns: "rows" | "columns", dragIndex: number, hoverIndex: number) => void;
metaData: QInstance;
tableMetaData: QTableMetaData;
pivotTableDefinition: PivotTableDefinition;
usedGroupByFieldNames: string[];
availableFieldNames: string[];
isEditable: boolean;
groupBy: PivotTableGroupBy;
rowsOrColumns: "rows" | "columns";
callback: () => void;
attemptedSubmit?: boolean;
}
/*******************************************************************************
** item to support react-dnd
*******************************************************************************/
interface DragItem
{
index: number;
id: string;
type: string;
}
/*******************************************************************************
**
*******************************************************************************/
export const PivotTableGroupByElement: FC<PivotTableGroupByElementProps> = ({id, index, dragCallback, rowsOrColumns, metaData, tableMetaData, pivotTableDefinition, groupBy, usedGroupByFieldNames, availableFieldNames, isEditable, callback, attemptedSubmit}) =>
{
////////////////////////////////////////////////////////////////////////////
// credit: https://react-dnd.github.io/react-dnd/examples/sortable/simple //
////////////////////////////////////////////////////////////////////////////
const ref = useRef<HTMLDivElement>(null);
const [{handlerId}, drop] = useDrop<DragItem, void, { handlerId: Identifier | null }>(
{
accept: rowsOrColumns == "rows" ? DragItemTypes.ROW : DragItemTypes.COLUMN,
collect(monitor)
{
return {
handlerId: monitor.getHandlerId(),
};
},
hover(item: DragItem, monitor)
{
if (!ref.current)
{
return;
}
const dragIndex = item.index;
const hoverIndex = index;
// Don't replace items with themselves
if (dragIndex === hoverIndex)
{
return;
}
// Determine rectangle on screen
const hoverBoundingRect = ref.current?.getBoundingClientRect();
// Get vertical middle
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
// Determine mouse position
const clientOffset = monitor.getClientOffset();
// Get pixels to the top
const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top;
// Only perform the move when the mouse has crossed half of the items height
// When dragging downwards, only move when the cursor is below 50%
// When dragging upwards, only move when the cursor is above 50%
// Dragging downwards
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY)
{
return;
}
// Dragging upwards
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY)
{
return;
}
// Time to actually perform the action
dragCallback(rowsOrColumns, dragIndex, hoverIndex);
// Note: we're mutating the monitor item here! Generally it's better to avoid mutations,
// but it's good here for the sake of performance to avoid expensive index searches.
item.index = hoverIndex;
},
});
const [{isDragging}, drag, preview] = useDrag({
type: rowsOrColumns == "rows" ? DragItemTypes.ROW : DragItemTypes.COLUMN,
item: () =>
{
return {id, index};
},
collect: (monitor: any) => ({
isDragging: monitor.isDragging(),
}),
});
/*******************************************************************************
**
*******************************************************************************/
const handleFieldChange = (event: any, newValue: any, reason: string) =>
{
groupBy.fieldName = newValue ? newValue.fieldName : null;
callback();
};
/*******************************************************************************
**
*******************************************************************************/
function removeGroupBy(index: number, rowsOrColumns: "rows" | "columns")
{
pivotTableDefinition[rowsOrColumns].splice(index, 1);
callback();
}
if (!isEditable)
{
const selectedField = getSelectedFieldForAutoComplete(tableMetaData, groupBy.fieldName);
if (selectedField)
{
const label = selectedField.table.name == tableMetaData.name ? selectedField.field.label : selectedField.table.label + ": " + selectedField.field.label;
return (<Box><Box display="inline-block" mr="0.375rem" mb="0.5rem" border={`1px solid ${colors.grayLines.main}`} borderRadius="0.75rem" p="0.25rem 0.75rem">{label}</Box></Box>);
}
return (<React.Fragment />);
}
preview(drop(ref));
const showError = attemptedSubmit && !groupBy.fieldName;
return (<Box ref={ref} display="flex" p="0.5rem" pl="0" gap="0.5rem" alignItems="center" sx={{backgroundColor: "white", opacity: isDragging ? 0 : 1}} data-handler-id={handlerId}>
<Box>
<Icon ref={drag} sx={{cursor: "ns-resize"}}>drag_indicator</Icon>
</Box>
<Box width="100%">
<FieldAutoComplete
id={`${rowsOrColumns}-${index}`}
label={null}
variant="outlined"
textFieldSX={fieldAutoCompleteTextFieldSX}
metaData={metaData}
tableMetaData={tableMetaData}
handleFieldChange={handleFieldChange}
hiddenFieldNames={usedGroupByFieldNames}
availableFieldNames={availableFieldNames}
defaultValue={getSelectedFieldForAutoComplete(tableMetaData, groupBy.fieldName)}
hasError={showError}
noOptionsText="There are no fields available."
/>
</Box>
<Box>
<Button sx={xIconButtonSX} onClick={() => removeGroupBy(index, rowsOrColumns)}><Icon>clear</Icon></Button>
</Box>
</Box>);
};

870
src/qqq/components/widgets/misc/PivotTableSetupWidget.tsx Normal file
View File

@ -0,0 +1,870 @@
/*
* 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 {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
import Alert from "@mui/material/Alert";
import Autocomplete from "@mui/material/Autocomplete";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Card from "@mui/material/Card";
import Grid from "@mui/material/Grid";
import Icon from "@mui/material/Icon";
import Modal from "@mui/material/Modal";
import TextField from "@mui/material/TextField";
import Tooltip from "@mui/material/Tooltip/Tooltip";
import Typography from "@mui/material/Typography";
import QContext from "QContext";
import colors from "qqq/assets/theme/base/colors";
import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
import {PivotTableGroupByElement} from "qqq/components/widgets/misc/PivotTableGroupByElement";
import {PivotTableValueElement} from "qqq/components/widgets/misc/PivotTableValueElement";
import {buttonSX, unborderedButtonSX} from "qqq/components/widgets/misc/ReportSetupWidget";
import Widget, {HeaderToggleComponent} from "qqq/components/widgets/Widget";
import {PivotObjectKey, PivotTableDefinition, PivotTableFunction, pivotTableFunctionLabels, PivotTableGroupBy, PivotTableValue} from "qqq/models/misc/PivotTableDefinitionModels";
import QQueryColumns from "qqq/models/query/QQueryColumns";
import Client from "qqq/utils/qqq/Client";
import FilterUtils from "qqq/utils/qqq/FilterUtils";
import React, {useCallback, useContext, useEffect, useReducer, useState} from "react";
import {DndProvider} from "react-dnd";
import {HTML5Backend} from "react-dnd-html5-backend";
export const DragItemTypes =
{
ROW: "row",
COLUMN: "column",
VALUE: "value"
};
export const xIconButtonSX =
{
border: `1px solid ${colors.grayLines.main} !important`,
borderRadius: "0.75rem",
textTransform: "none",
fontSize: "1rem",
fontWeight: "400",
width: "40px",
minWidth: "40px",
paddingLeft: 0,
paddingRight: 0,
color: colors.error.main,
"&:hover": {color: colors.error.main},
"&:focus": {color: colors.error.main},
"&:focus:not(:hover)": {color: colors.error.main},
};
export const fieldAutoCompleteTextFieldSX =
{
"& .MuiInputBase-input": {fontSize: "1rem", padding: "0 !important"}
};
/*******************************************************************************
**
*******************************************************************************/
export function getSelectedFieldForAutoComplete(tableMetaData: QTableMetaData, fieldName: string)
{
if (fieldName)
{
let [field, fieldTable] = FilterUtils.getField(tableMetaData, fieldName);
if (field && fieldTable)
{
return ({field: field, table: fieldTable, fieldName: fieldName});
}
}
return (null);
}
/*******************************************************************************
** component props
*******************************************************************************/
interface PivotTableSetupWidgetProps
{
isEditable: boolean;
widgetMetaData: QWidgetMetaData;
recordValues: { [name: string]: any };
onSaveCallback?: (values: { [name: string]: any }) => void;
}
/*******************************************************************************
** default values for props
*******************************************************************************/
PivotTableSetupWidget.defaultProps = {
onSaveCallback: null
};
const qController = Client.getInstance();
/*******************************************************************************
** Component to edit the setup of a Pivot Table - rows, columns, values!
*******************************************************************************/
export default function PivotTableSetupWidget({isEditable, widgetMetaData, recordValues, onSaveCallback}: PivotTableSetupWidgetProps): JSX.Element
{
const [metaData, setMetaData] = useState(null as QInstance);
const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
const [modalOpen, setModalOpen] = useState(false);
const [enabled, setEnabled] = useState(!!recordValues["usePivotTable"]);
const [attemptedSubmit, setAttemptedSubmit] = useState(false);
const [errorAlert, setErrorAlert] = useState(null as string);
const [pivotTableDefinition, setPivotTableDefinition] = useState(null as PivotTableDefinition);
const [, forceUpdate] = useReducer((x) => x + 1, 0);
///////////////////////////////////////////////////////////////////////////////////
// this is a copy of pivotTableDefinition, that we'll render in the modal. //
// then on-save, we'll move it to pivotTableDefinition, e.g., the actual record. //
///////////////////////////////////////////////////////////////////////////////////
const [modalPivotTableDefinition, setModalPivotTableDefinition] = useState(null as PivotTableDefinition);
const [usedGroupByFieldNames, setUsedGroupByFieldNames] = useState([] as string[]);
const [usedValueFieldNames, setUsedValueByFieldNames] = useState([] as string[]);
const [availableFieldNames, setAvailableFieldNames] = useState([] as string[]);
const {helpHelpActive} = useContext(QContext);
//////////////////
// initial load //
//////////////////
useEffect(() =>
{
if (!pivotTableDefinition)
{
let originalPivotTableDefinition = recordValues["pivotTableJson"] && JSON.parse(recordValues["pivotTableJson"]) as PivotTableDefinition;
if (originalPivotTableDefinition)
{
setEnabled(true);
}
else if (!originalPivotTableDefinition)
{
originalPivotTableDefinition = new PivotTableDefinition();
}
for (let i = 0; i < originalPivotTableDefinition?.rows?.length; i++)
{
if (!originalPivotTableDefinition?.rows[i].key)
{
originalPivotTableDefinition.rows[i].key = PivotObjectKey.next();
}
}
for (let i = 0; i < originalPivotTableDefinition?.columns?.length; i++)
{
if (!originalPivotTableDefinition?.columns[i].key)
{
originalPivotTableDefinition.columns[i].key = PivotObjectKey.next();
}
}
for (let i = 0; i < originalPivotTableDefinition?.values?.length; i++)
{
if (!originalPivotTableDefinition?.values[i].key)
{
originalPivotTableDefinition.values[i].key = PivotObjectKey.next();
}
}
setPivotTableDefinition(originalPivotTableDefinition);
updateUsedGroupByFieldNames(originalPivotTableDefinition);
updateUsedValueFieldNames(modalPivotTableDefinition);
}
if (recordValues["columnsJson"])
{
updateAvailableFieldNames(JSON.parse(recordValues["columnsJson"]) as QQueryColumns);
}
(async () =>
{
setMetaData(await qController.loadMetaData());
})();
});
/////////////////////////////////////////////////////////////////////
// handle the table name changing - load current table's meta-data //
/////////////////////////////////////////////////////////////////////
useEffect(() =>
{
if (recordValues["tableName"] && (tableMetaData == null || tableMetaData.name != recordValues["tableName"]))
{
(async () =>
{
const tableMetaData = await qController.loadTableMetaData(recordValues["tableName"]);
setTableMetaData(tableMetaData);
})();
}
}, [recordValues]);
const helpRoles = isEditable ? [recordValues["id"] ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"] : ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
/*******************************************************************************
**
*******************************************************************************/
function showHelp(slot: string)
{
return (helpHelpActive || hasHelpContent(widgetMetaData?.helpContent?.get(slot), helpRoles));
}
/*******************************************************************************
**
*******************************************************************************/
function getHelpContent(slot: string)
{
const key = `widget:${widgetMetaData.name};slot:${slot}`;
return <HelpContent helpContents={widgetMetaData?.helpContent?.get(slot)} roles={helpRoles} helpContentKey={key} />;
}
/*******************************************************************************
**
*******************************************************************************/
function toggleEnabled()
{
const newEnabled = !!!getEnabled();
setEnabled(newEnabled);
onSaveCallback({usePivotTable: newEnabled});
if (!newEnabled)
{
onSaveCallback({pivotTableJson: null});
}
}
/*******************************************************************************
**
*******************************************************************************/
function getEnabled()
{
return (enabled);
}
/*******************************************************************************
**
*******************************************************************************/
function addGroupBy(rowsOrColumns: "rows" | "columns")
{
if (!modalPivotTableDefinition[rowsOrColumns])
{
modalPivotTableDefinition[rowsOrColumns] = [];
}
modalPivotTableDefinition[rowsOrColumns].push(new PivotTableGroupBy());
validateForm()
forceUpdate();
}
/*******************************************************************************
**
*******************************************************************************/
function childElementChangedCallback()
{
updateUsedGroupByFieldNames(modalPivotTableDefinition);
updateUsedValueFieldNames(modalPivotTableDefinition);
validateForm()
forceUpdate();
}
/*******************************************************************************
**
*******************************************************************************/
function addValue()
{
if (!modalPivotTableDefinition.values)
{
modalPivotTableDefinition.values = [];
}
modalPivotTableDefinition.values.push(new PivotTableValue());
validateForm()
forceUpdate();
}
/*******************************************************************************
**
*******************************************************************************/
function removeValue(index: number)
{
modalPivotTableDefinition.values.splice(index, 1);
validateForm()
forceUpdate();
}
/*******************************************************************************
**
*******************************************************************************/
function updateUsedGroupByFieldNames(ptd: PivotTableDefinition = pivotTableDefinition)
{
const usedFieldNames: string[] = [];
for (let i = 0; i < ptd?.rows?.length; i++)
{
usedFieldNames.push(ptd?.rows[i].fieldName);
}
for (let i = 0; i < ptd?.columns?.length; i++)
{
usedFieldNames.push(ptd?.columns[i].fieldName);
}
setUsedGroupByFieldNames(usedFieldNames);
}
/*******************************************************************************
**
*******************************************************************************/
function updateUsedValueFieldNames(ptd: PivotTableDefinition = pivotTableDefinition)
{
const usedFieldNames: string[] = [];
for (let i = 0; i < ptd?.values?.length; i++)
{
usedFieldNames.push(ptd?.values[i].fieldName);
}
setUsedValueByFieldNames(usedFieldNames);
}
/*******************************************************************************
**
*******************************************************************************/
function updateAvailableFieldNames(columns: QQueryColumns)
{
const fieldNames: string[] = [];
for (let i = 0; i < columns?.columns?.length; i++)
{
if (columns.columns[i].isVisible)
{
fieldNames.push(columns.columns[i].name);
}
}
setAvailableFieldNames(fieldNames);
}
/*******************************************************************************
**
*******************************************************************************/
function renderOneValue(value: PivotTableValue, index: number)
{
if (!isEditable)
{
const selectedField = getSelectedFieldForAutoComplete(tableMetaData, value.fieldName);
if (selectedField && value.function)
{
const label = selectedField.table.name == tableMetaData.name ? selectedField.field.label : selectedField.table.label + ": " + selectedField.field.label;
return (<Box mr="0.375rem" mb="0.5rem" border={`1px solid ${colors.grayLines.main}`} borderRadius="0.75rem" p="0.25rem 0.75rem">{pivotTableFunctionLabels[value.function]} of {label}</Box>);
}
return (<React.Fragment />);
}
const handleFieldChange = (event: any, newValue: any, reason: string) =>
{
value.fieldName = newValue ? newValue.fieldName : null;
};
const handleFunctionChange = (event: any, newValue: any, reason: string) =>
{
value.function = newValue ? newValue.id : null;
};
const functionOptions: any[] = [];
let defaultFunctionValue = null;
for (let pivotTableFunctionKey in PivotTableFunction)
{
// @ts-ignore any?
const label = "" + pivotTableFunctionLabels[pivotTableFunctionKey];
const option = {id: pivotTableFunctionKey, label: label};
functionOptions.push(option);
if (option.id == value.function)
{
defaultFunctionValue = option;
}
}
// maybe cursor:grab (and then change to "grabbing")
return (<Box display="flex" p="0.5rem" pl="0" gap="0.5rem" alignItems="center">
<Box>
<Icon sx={{cursor: "ns-resize"}}>drag_indicator</Icon>
</Box>
<Box width="100%">
<FieldAutoComplete
id={`values-field-${index}`}
label={null}
variant="outlined"
textFieldSX={fieldAutoCompleteTextFieldSX}
metaData={metaData}
tableMetaData={tableMetaData}
handleFieldChange={handleFieldChange}
defaultValue={getSelectedFieldForAutoComplete(tableMetaData, value.fieldName)}
/>
</Box>
<Box width="330px">
<Autocomplete
id={`values-field-${index}`}
renderInput={(params) => (<TextField {...params} label={null} variant="outlined" sx={fieldAutoCompleteTextFieldSX} autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
// @ts-ignore
defaultValue={defaultFunctionValue}
options={functionOptions}
onChange={handleFunctionChange}
isOptionEqualToValue={(option, value) => option.id === value.id}
getOptionLabel={(option) => option.label}
// todo? renderOption={(props, option, state) => renderFieldOption(props, option, state)}
autoSelect={true}
autoHighlight={true}
disableClearable
// slotProps={{popper: {className: "filterCriteriaRowColumnPopper", style: {padding: 0, width: "250px"}}}}
// {...alsoOpen}
/>
</Box>
<Box>
<Button sx={xIconButtonSX} onClick={() => removeValue(index)}><Icon>clear</Icon></Button>
</Box>
</Box>);
}
/*******************************************************************************
** drag & drop callback to move one of the pivot-table group-bys (rows/columns)
*******************************************************************************/
const moveGroupBy = useCallback((rowsOrColumns: "rows" | "columns", dragIndex: number, hoverIndex: number) =>
{
const array = modalPivotTableDefinition[rowsOrColumns];
const dragItem = array[dragIndex];
array.splice(dragIndex, 1);
array.splice(hoverIndex, 0, dragItem);
forceUpdate();
}, [modalPivotTableDefinition]);
/*******************************************************************************
** drag & drop callback to move one of the pivot-table values
*******************************************************************************/
const moveValue = useCallback((dragIndex: number, hoverIndex: number) =>
{
const array = modalPivotTableDefinition.values;
const dragItem = array[dragIndex];
array.splice(dragIndex, 1);
array.splice(hoverIndex, 0, dragItem);
forceUpdate();
}, [modalPivotTableDefinition]);
const noTable = (tableMetaData == null);
const noColumns = (!availableFieldNames || availableFieldNames.length == 0);
const selectTableFirstTooltipTitle = noTable ? "You must select a table before you can set up your pivot table" : null;
const selectColumnsFirstTooltipTitle = noColumns ? "You must set up your report's Columns before you can set up your Pivot Table" : null;
const editPopupDisabled = noTable || noColumns;
/////////////////////////////////////////////////////////////
// add toggle component to widget header for editable mode //
/////////////////////////////////////////////////////////////
const labelAdditionalElementsRight: JSX.Element[] = [];
if (isEditable)
{
labelAdditionalElementsRight.push(<HeaderToggleComponent disabled={editPopupDisabled} disabledTooltip={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle} label="Use Pivot Table?" getValue={() => enabled} onClickCallback={toggleEnabled} />);
}
/*******************************************************************************
** render a group-by (row or column)
*******************************************************************************/
const renderGroupBy = useCallback((groupBy: PivotTableGroupBy, rowsOrColumns: "rows" | "columns", index: number, forModal: boolean) =>
{
return (
<PivotTableGroupByElement
key={groupBy.fieldName}
index={index}
id={`${groupBy.key}`}
dragCallback={moveGroupBy}
metaData={metaData}
tableMetaData={tableMetaData}
pivotTableDefinition={forModal ? modalPivotTableDefinition : pivotTableDefinition}
usedGroupByFieldNames={[...usedGroupByFieldNames, ...usedValueFieldNames]}
availableFieldNames={availableFieldNames}
isEditable={isEditable && forModal}
groupBy={groupBy}
rowsOrColumns={rowsOrColumns}
callback={childElementChangedCallback}
attemptedSubmit={attemptedSubmit}
/>
);
},
[tableMetaData, usedGroupByFieldNames, availableFieldNames],
);
/*******************************************************************************
** render a pivot-table value (row or column)
*******************************************************************************/
const renderValue = useCallback((value: PivotTableValue, index: number, forModal: boolean) =>
{
return (
<PivotTableValueElement
key={value.key}
index={index}
id={`${value.key}`}
dragCallback={moveValue}
metaData={metaData}
tableMetaData={tableMetaData}
pivotTableDefinition={forModal ? modalPivotTableDefinition : pivotTableDefinition}
availableFieldNames={availableFieldNames}
usedGroupByFieldNames={usedGroupByFieldNames}
isEditable={isEditable && forModal}
value={value}
callback={childElementChangedCallback}
attemptedSubmit={attemptedSubmit}
/>
);
},
[tableMetaData, usedGroupByFieldNames, availableFieldNames],
);
/*******************************************************************************
**
*******************************************************************************/
function openEditor()
{
if (recordValues["tableName"])
{
setModalPivotTableDefinition(Object.assign({}, pivotTableDefinition));
setModalOpen(true);
setAttemptedSubmit(false);
}
}
/*******************************************************************************
**
*******************************************************************************/
function closeEditor(event?: {}, reason?: "backdropClick" | "escapeKeyDown")
{
if (reason == "backdropClick" || reason == "escapeKeyDown")
{
return;
}
setModalOpen(false);
}
/*******************************************************************************
**
*******************************************************************************/
function renderGroupBys(forModal: boolean, rowsOrColumns: "rows" | "columns")
{
const ptd = forModal ? modalPivotTableDefinition : pivotTableDefinition;
return <>
<h5>{rowsOrColumns == "rows" ? "Rows" : "Columns"}</h5>
<Box fontSize="1rem">
{
tableMetaData && (<div>{ptd[rowsOrColumns]?.map((groupBy, i) => renderGroupBy(groupBy, rowsOrColumns, i, forModal))}</div>)
}
</Box>
{
(forModal || (isEditable && !ptd[rowsOrColumns]?.length)) &&
<Box mt={forModal ? "0.5rem" : "0"} mb="1rem">
<Tooltip title={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle}>
<span><Button disabled={editPopupDisabled} sx={forModal ? buttonSX : unborderedButtonSX} onClick={() => forModal ? addGroupBy(rowsOrColumns) : openEditor()}>+ Add new {rowsOrColumns == "rows" ? "row" : "column"}</Button></span>
</Tooltip>
</Box>
}
{
!isEditable && !forModal && !ptd[rowsOrColumns]?.length &&
<Box color={colors.gray.main} fontSize="1rem">Your pivot table has no {rowsOrColumns}.</Box>
}
</>;
}
/*******************************************************************************
**
*******************************************************************************/
function renderValues(forModal: boolean)
{
const ptd = forModal ? modalPivotTableDefinition : pivotTableDefinition;
return <>
<h5>Values</h5>
<Box fontSize="1rem">
{
tableMetaData && (<div>{ptd?.values?.map((value, i) => renderValue(value, i, forModal))}</div>)
}
</Box>
{
(forModal || (isEditable && !ptd?.values?.length)) &&
<Box mt={forModal ? "0.5rem" : "0"} mb="1rem">
<Tooltip title={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle}>
<span><Button disabled={editPopupDisabled} sx={forModal ? buttonSX : unborderedButtonSX} onClick={() => forModal ? addValue() : openEditor()}>+ Add new value</Button></span>
</Tooltip>
</Box>
}
{
!isEditable && !forModal && !ptd?.values?.length &&
<Box color={colors.gray.main} fontSize="1rem">Your pivot table has no values.</Box>
}
</>;
}
/*******************************************************************************
**
*******************************************************************************/
function validateForm(submitting: boolean = false)
{
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// if this isn't a call from the on-submit handler, and we haven't previously attempted a submit, then return w/o setting any alerts //
// this is like a version of considering "touched"... //
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
if(!submitting && !attemptedSubmit)
{
return;
}
let missingValues = 0;
for (let i = 0; i < modalPivotTableDefinition?.rows?.length; i++)
{
if (!modalPivotTableDefinition.rows[i].fieldName)
{
missingValues++;
}
}
for (let i = 0; i < modalPivotTableDefinition?.columns?.length; i++)
{
if (!modalPivotTableDefinition.columns[i].fieldName)
{
missingValues++;
}
}
for (let i = 0; i < modalPivotTableDefinition?.values?.length; i++)
{
if (!modalPivotTableDefinition.values[i].fieldName)
{
missingValues++;
}
if (!modalPivotTableDefinition.values[i].function)
{
missingValues++;
}
}
if (missingValues == 0)
{
setErrorAlert(null);
////////////////////////////////////////////////////////////////////////////////////
// this is to catch the case of - user attempted to submit, and there were errors //
// now they've fixed 'em - so go back to a 'clean' state - so if they add more //
// boxes, they won't immediately show errors, until a re-submit //
////////////////////////////////////////////////////////////////////////////////////
if(attemptedSubmit)
{
setAttemptedSubmit(false);
}
return (false);
}
setErrorAlert(`Missing value in ${missingValues} field${missingValues == 1 ? "" : "s"}.`);
return (true);
}
/*******************************************************************************
**
*******************************************************************************/
function saveClicked()
{
setAttemptedSubmit(true);
if (validateForm(true))
{
return;
}
if (!onSaveCallback)
{
console.log("onSaveCallback was not defined");
return;
}
setPivotTableDefinition(Object.assign({}, modalPivotTableDefinition));
updateUsedGroupByFieldNames(modalPivotTableDefinition);
updateUsedValueFieldNames(modalPivotTableDefinition);
onSaveCallback({pivotTableJson: JSON.stringify(modalPivotTableDefinition)});
closeEditor();
}
////////////
// render //
////////////
return (<Widget widgetMetaData={widgetMetaData} labelAdditionalElementsRight={labelAdditionalElementsRight}>
{
<React.Fragment>
<DndProvider backend={HTML5Backend}>
{
enabled &&
<Box display="flex" justifyContent="space-between">
<Box>
{
showHelp("sectionSubhead") &&
<Box color={colors.gray.main} pb={"0.5rem"} fontSize={"0.875rem"}>
{getHelpContent("sectionSubhead")}
</Box>
}
</Box>
{
isEditable &&
<Tooltip title={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle}>
<span>
<Button disabled={editPopupDisabled} onClick={() => openEditor()} sx={{p: 0}} disableRipple>
<Typography display="inline" textTransform="none" fontSize={"1.125rem"}>
Edit Pivot Table
</Typography>
</Button>
</span>
</Tooltip>
}
</Box>
}
{
(!enabled || !pivotTableDefinition) && !isEditable &&
<Box fontSize="1rem">Your report does not use a Pivot Table.</Box>
}
{
enabled && pivotTableDefinition &&
<>
<Grid container spacing="16">
<Grid item lg={4} md={6} xs={12}>{renderGroupBys(false, "rows")}</Grid>
<Grid item lg={4} md={6} xs={12}>{renderGroupBys(false, "columns")}</Grid>
<Grid item lg={4} md={6} xs={12}>{renderValues(false)}</Grid>
</Grid>
{
modalOpen &&
<Modal open={modalOpen} onClose={(event, reason) => closeEditor(event, reason)}>
<div>
<Box sx={{position: "absolute", width: "100%"}}>
<Card sx={{m: "2rem", p: "2rem", overflowY: "auto", height: "calc(100vh - 4rem)"}}>
<h3>Edit Pivot Table</h3>
{
showHelp("modalSubheader") &&
<Box color={colors.gray.main}>
{getHelpContent("modalSubheader")}
</Box>
}
{
errorAlert && <Alert icon={<Icon>error_outline</Icon>} color="error" onClose={() => setErrorAlert(null)}>{errorAlert}</Alert>
}
<Grid container spacing="16" overflow="auto" mt="0.5rem" mb="1rem" height="100%">
<Grid item lg={4} md={6} xs={12}>{renderGroupBys(true, "rows")}</Grid>
<Grid item lg={4} md={6} xs={12}>{renderGroupBys(true, "columns")}</Grid>
<Grid item lg={4} md={6} xs={12}>{renderValues(true)}</Grid>
</Grid>
<Box>
<Box display="flex" justifyContent="flex-end">
<QCancelButton disabled={false} onClickHandler={closeEditor} />
<QSaveButton label="OK" iconName="check" disabled={false} onClickHandler={saveClicked} />
</Box>
</Box>
</Card>
</Box>
</div>
</Modal>
}
</>
}
</DndProvider>
</React.Fragment>
}
</Widget>);
}
/* this was a rough-draft of what a preview of a pivot could look like...
<Box mt={"1rem"}>
<h5>Preview</h5>
<table>
<tr>
<th style={{textAlign: "left", fontSize: "0.875rem"}}></th>
<th style={{textAlign: "left", fontSize: "0.875rem"}}>Column Labels</th>
</tr>
{
pivotTableDefinition?.columns?.map((column, i) =>
(
<tr key={column.key}>
<th style={{textAlign: "left", fontSize: "0.875rem"}}></th>
<th style={{textAlign: "left", fontSize: "0.875rem"}}>{column.fieldName}</th>
</tr>
))
}
<tr>
<th style={{textAlign: "left", fontSize: "0.875rem"}}>Row Labels</th>
{
pivotTableDefinition?.values?.map((value, i) =>
(
<th key={value.key} style={{textAlign: "left", fontSize: "0.875rem"}}>{value.function} of {value.fieldName}</th>
))
}
</tr>
{
pivotTableDefinition?.rows?.map((row, i) =>
(
<tr key={row.key}>
<th style={{textAlign: "left", fontSize: "0.875rem", paddingLeft: (i * 1) + "rem"}}>{row.fieldName}</th>
</tr>
))
}
</table>
</Box>
*/

319
src/qqq/components/widgets/misc/PivotTableValueElement.tsx Normal file
View File

@ -0,0 +1,319 @@
/*
* 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 {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import Autocomplete from "@mui/material/Autocomplete";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Icon from "@mui/material/Icon";
import TextField from "@mui/material/TextField";
import type {Identifier, XYCoord} from "dnd-core";
import colors from "qqq/assets/theme/base/colors";
import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
import {DragItemTypes, fieldAutoCompleteTextFieldSX, getSelectedFieldForAutoComplete, xIconButtonSX} from "qqq/components/widgets/misc/PivotTableSetupWidget";
import {functionsPerFieldType, PivotTableDefinition, pivotTableFunctionLabels, PivotTableValue} from "qqq/models/misc/PivotTableDefinitionModels";
import React, {FC, useReducer, useRef, useState} from "react";
import {useDrag, useDrop} from "react-dnd";
/*******************************************************************************
** component props
*******************************************************************************/
export interface PivotTableValueElementProps
{
id: string;
index: number;
dragCallback: (dragIndex: number, hoverIndex: number) => void;
metaData: QInstance;
tableMetaData: QTableMetaData;
pivotTableDefinition: PivotTableDefinition;
availableFieldNames: string[];
usedGroupByFieldNames: string[];
isEditable: boolean;
value: PivotTableValue;
callback: () => void;
attemptedSubmit?: boolean;
}
/*******************************************************************************
** item to support react-dnd
*******************************************************************************/
interface DragItem
{
index: number;
id: string;
type: string;
}
/*******************************************************************************
** Element to render 1 pivot-table value.
*******************************************************************************/
export const PivotTableValueElement: FC<PivotTableValueElementProps> = ({id, index, dragCallback, metaData, tableMetaData, pivotTableDefinition, availableFieldNames, usedGroupByFieldNames, value, isEditable, callback, attemptedSubmit}) =>
{
const [defaultFunctionValue, setDefaultFunctionValue] = useState(null);
const [, forceUpdate] = useReducer((x) => x + 1, 0);
////////////////////////////////////////////////////////////////////////////
// credit: https://react-dnd.github.io/react-dnd/examples/sortable/simple //
////////////////////////////////////////////////////////////////////////////
const ref = useRef<HTMLDivElement>(null);
const [{handlerId}, drop] = useDrop<DragItem, void, { handlerId: Identifier | null }>(
{
accept: DragItemTypes.VALUE,
collect(monitor)
{
return {
handlerId: monitor.getHandlerId(),
};
},
hover(item: DragItem, monitor)
{
if (!ref.current)
{
return;
}
const dragIndex = item.index;
const hoverIndex = index;
// Don't replace items with themselves
if (dragIndex === hoverIndex)
{
return;
}
// Determine rectangle on screen
const hoverBoundingRect = ref.current?.getBoundingClientRect();
// Get vertical middle
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
// Determine mouse position
const clientOffset = monitor.getClientOffset();
// Get pixels to the top
const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top;
// Only perform the move when the mouse has crossed half of the items height
// When dragging downwards, only move when the cursor is below 50%
// When dragging upwards, only move when the cursor is above 50%
// Dragging downwards
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY)
{
return;
}
// Dragging upwards
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY)
{
return;
}
// Time to actually perform the action
dragCallback(dragIndex, hoverIndex);
// Note: we're mutating the monitor item here! Generally it's better to avoid mutations,
// but it's good here for the sake of performance to avoid expensive index searches.
item.index = hoverIndex;
},
});
const [{isDragging}, drag] = useDrag({
type: DragItemTypes.VALUE,
item: () =>
{
return {id, index};
},
collect: (monitor: any) => ({
isDragging: monitor.isDragging(),
}),
});
/*******************************************************************************
**
*******************************************************************************/
function getFunctionsForField(field: QFieldMetaData)
{
if(field)
{
let type = field.type;
if (field.possibleValueSourceName)
{
type = QFieldType.STRING;
}
if(functionsPerFieldType[type])
{
return (functionsPerFieldType[type]);
}
}
//////////////////////////////////////
// return broadest list if no field //
//////////////////////////////////////
return (functionsPerFieldType[QFieldType.INTEGER]);
}
/*******************************************************************************
** event handler for user selecting a field
*******************************************************************************/
function handleFieldChange(event: any, newValue: any, reason: string)
{
value.fieldName = newValue ? newValue.fieldName : null;
if(newValue)
{
/////////////////////////////////////////////////////////////////////////////////////////
// if newly selected field doesn't have the currently selected function, then clear it //
/////////////////////////////////////////////////////////////////////////////////////////
const newSelectedField = getSelectedFieldForAutoComplete(tableMetaData, newValue.fieldName);
if (newSelectedField)
{
if(getFunctionsForField(newSelectedField.field).indexOf(value.function) == -1)
{
setDefaultFunctionValue(null);
handleFunctionChange(null, null, null);
forceUpdate();
}
}
}
callback();
}
/*******************************************************************************
** event handler for user selecting a function
*******************************************************************************/
function handleFunctionChange(event: any, newValue: any, reason: string)
{
value.function = newValue ? newValue.id : null;
callback();
}
/*******************************************************************************
** event handler for clicking remove button
*******************************************************************************/
function removeValue(index: number)
{
pivotTableDefinition.values.splice(index, 1);
callback();
}
const selectedField = getSelectedFieldForAutoComplete(tableMetaData, value.fieldName);
/////////////////////////////////////////////////////////////////////
// if we're not on an edit screen, return a simpler read-only view //
/////////////////////////////////////////////////////////////////////
if (!isEditable)
{
let label = "--";
if (selectedField && value.function)
{
label = pivotTableFunctionLabels[value.function] + " of " + (selectedField.table.name == tableMetaData.name ? selectedField.field.label : selectedField.table.label + ": " + selectedField.field.label);
}
return (<Box><Box display="inline-block" mr="0.375rem" mb="0.5rem" border={`1px solid ${colors.grayLines.main}`} borderRadius="0.75rem" p="0.25rem 0.75rem">{label}</Box></Box>);
}
///////////////////////////////////////////////////////////////////////////////
// figure out functions to display in drop down, plus selected/default value //
///////////////////////////////////////////////////////////////////////////////
const functionOptions: any[] = [];
const availableFunctions = getFunctionsForField(selectedField?.field);
for (let pivotTableFunction of availableFunctions)
{
const label = pivotTableFunctionLabels[pivotTableFunction];
const option = {id: pivotTableFunction, label: label};
functionOptions.push(option);
if (option.id == value.function && JSON.stringify(option) != JSON.stringify(defaultFunctionValue))
{
setDefaultFunctionValue(option);
}
}
drag(drop(ref));
const showValueError = attemptedSubmit && !value.fieldName;
const showFunctionError = attemptedSubmit && !value.function;
return (<Box ref={ref} display="flex" p="0.5rem" pl="0" gap="0.5rem" alignItems="center" sx={{backgroundColor: "white", opacity: isDragging ? 0 : 1}} data-handler-id={handlerId}>
<Box>
<Icon sx={{cursor: "ns-resize"}}>drag_indicator</Icon>
</Box>
<Box width="100%">
<FieldAutoComplete
id={`values-field-${index}`}
label={null}
variant="outlined"
textFieldSX={fieldAutoCompleteTextFieldSX}
metaData={metaData}
tableMetaData={tableMetaData}
handleFieldChange={handleFieldChange}
availableFieldNames={availableFieldNames}
hiddenFieldNames={usedGroupByFieldNames}
defaultValue={selectedField}
hasError={showValueError}
noOptionsText="There are no fields available."
/>
</Box>
<Box width="370px">
<Autocomplete
id={`values-function-${index}`}
renderInput={(params) =>
{
const inputProps = params.InputProps;
const originalEndAdornment = inputProps.endAdornment;
inputProps.endAdornment = <Box>
{showFunctionError && <Icon color="error">error_outline</Icon>}
{originalEndAdornment}
</Box>;
return (<TextField {...params} label={null} variant="outlined" sx={fieldAutoCompleteTextFieldSX} autoComplete="off" type="search" InputProps={inputProps} />)
}}
// @ts-ignore
value={defaultFunctionValue}
inputValue={defaultFunctionValue?.label ?? ""}
options={functionOptions}
onChange={handleFunctionChange}
isOptionEqualToValue={(option, value) => option.id === value.id}
getOptionLabel={(option) => option.label}
autoSelect={true}
autoHighlight={true}
disableClearable
/>
</Box>
<Box>
<Button sx={xIconButtonSX} onClick={() => removeValue(index)}><Icon>clear</Icon></Button>
</Box>
</Box>);
};

374
src/qqq/components/widgets/misc/ReportSetupWidget.tsx Normal file
View File

@ -0,0 +1,374 @@
/*
* 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 {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
import {Alert, Collapse} from "@mui/material";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Card from "@mui/material/Card";
import Modal from "@mui/material/Modal";
import Tooltip from "@mui/material/Tooltip/Tooltip";
import QContext from "QContext";
import colors from "qqq/assets/theme/base/colors";
import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
import AdvancedQueryPreview from "qqq/components/query/AdvancedQueryPreview";
import {getCurrentSortIndicator} from "qqq/components/query/BasicAndAdvancedQueryControls";
import Widget, {HeaderLinkButtonComponent} from "qqq/components/widgets/Widget";
import QQueryColumns, {Column} from "qqq/models/query/QQueryColumns";
import RecordQuery from "qqq/pages/records/query/RecordQuery";
import Client from "qqq/utils/qqq/Client";
import FilterUtils from "qqq/utils/qqq/FilterUtils";
import React, {useContext, useEffect, useRef, useState} from "react";
interface ReportSetupWidgetProps
{
isEditable: boolean;
widgetMetaData: QWidgetMetaData;
recordValues: {[name: string]: any};
onSaveCallback?: (values: {[name: string]: any}) => void;
}
ReportSetupWidget.defaultProps = {
onSaveCallback: null
};
export const buttonSX =
{
border: `1px solid ${colors.grayLines.main} !important`,
borderRadius: "0.75rem",
textTransform: "none",
fontSize: "1rem",
fontWeight: "400",
paddingLeft: "1rem",
paddingRight: "1rem",
opacity: "1",
color: colors.dark.main,
"&:hover": {color: colors.dark.main},
"&:focus": {color: colors.dark.main},
"&:focus:not(:hover)": {color: colors.dark.main},
};
export const unborderedButtonSX = Object.assign({}, buttonSX);
unborderedButtonSX.border = "none !important";
unborderedButtonSX.opacity = "0.7";
const qController = Client.getInstance();
/*******************************************************************************
** Component for editing the main setup of a report - that is: filter & columns
*******************************************************************************/
export default function ReportSetupWidget({isEditable, widgetMetaData, recordValues, onSaveCallback}: ReportSetupWidgetProps): JSX.Element
{
const [modalOpen, setModalOpen] = useState(false);
const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
const [alertContent, setAlertContent] = useState(null as string);
//////////////////////////////////////////////////////////////////////////////////////////////////
// we'll actually keep 2 copies of the query filter around here - //
// the one in the record (as json) is one that the backend likes (e.g., possible values as ids) //
// this "frontend" one is one that the frontend can use (possible values as objects w/ labels). //
//////////////////////////////////////////////////////////////////////////////////////////////////
const [frontendQueryFilter, setFrontendQueryFilter] = useState(null as QQueryFilter);
const {helpHelpActive} = useContext(QContext);
const recordQueryRef = useRef();
/////////////////////////////
// load values from record //
/////////////////////////////
let queryFilter = recordValues["queryFilterJson"] && JSON.parse(recordValues["queryFilterJson"]) as QQueryFilter;
let usingDefaultEmptyFilter = false;
if(!queryFilter)
{
queryFilter = new QQueryFilter();
usingDefaultEmptyFilter = true;
}
let columns: QQueryColumns = null;
if(recordValues["columnsJson"])
{
columns = QQueryColumns.buildFromJSON(recordValues["columnsJson"]);
}
//////////////////////////////////////////////////////////////////////
// load tableMetaData initially, and if/when selected table changes //
//////////////////////////////////////////////////////////////////////
useEffect(() =>
{
if (recordValues["tableName"] && (tableMetaData == null || tableMetaData.name != recordValues["tableName"]))
{
(async () =>
{
const tableMetaData = await qController.loadTableMetaData(recordValues["tableName"])
setTableMetaData(tableMetaData);
const queryFilterForFrontend = Object.assign({}, queryFilter);
await FilterUtils.cleanupValuesInFilerFromQueryString(qController, tableMetaData, queryFilterForFrontend)
setFrontendQueryFilter(queryFilterForFrontend)
})();
}
}, [recordValues]);
/*******************************************************************************
**
*******************************************************************************/
function openEditor()
{
if(recordValues["tableName"])
{
setModalOpen(true);
}
}
/*******************************************************************************
**
*******************************************************************************/
function saveClicked()
{
if(!onSaveCallback)
{
console.log("onSaveCallback was not defined");
return;
}
// @ts-ignore possibly 'undefined'.
const view = recordQueryRef?.current?.getCurrentView();
view.queryColumns.sortColumnsFixingPinPositions();
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// keep the query filter that came from the recordQuery screen as the front-end version (w/ possible value objects) //
// but prep a copy of it for the backend, to stringify as json in the record being edited //
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
setFrontendQueryFilter(view.queryFilter);
const filter = FilterUtils.prepQueryFilterForBackend(tableMetaData, view.queryFilter);
onSaveCallback({queryFilterJson: JSON.stringify(filter), columnsJson: JSON.stringify(view.queryColumns)});
closeEditor();
}
/*******************************************************************************
**
*******************************************************************************/
function closeEditor(event?: {}, reason?: "backdropClick" | "escapeKeyDown")
{
if(reason == "backdropClick" || reason == "escapeKeyDown")
{
return;
}
setModalOpen(false);
}
/*******************************************************************************
**
*******************************************************************************/
function renderColumn(column: Column): JSX.Element
{
const [field, table] = FilterUtils.getField(tableMetaData, column.name)
if(!column || !column.isVisible || column.name == "__check__" || !field)
{
return (<React.Fragment />);
}
const tableLabelPart = table.name != tableMetaData.name ? table.label + ": " : "";
return (<Box mr="0.375rem" mb="0.5rem" border={`1px solid ${colors.grayLines.main}`} borderRadius="0.75rem" p="0.25rem 0.75rem">
{tableLabelPart}{field.label}
</Box>);
}
/*******************************************************************************
**
*******************************************************************************/
function mayShowQueryPreview(): boolean
{
if(tableMetaData)
{
if(frontendQueryFilter?.criteria?.length > 0 || frontendQueryFilter?.subFilters?.length > 0)
{
return (true);
}
}
return (false);
}
/*******************************************************************************
**
*******************************************************************************/
function mayShowColumnsPreview(): boolean
{
if(tableMetaData)
{
for(let i = 0; i<columns?.columns?.length; i++)
{
if(columns.columns[i].isVisible && columns.columns[i].name != "__check__")
{
return (true);
}
}
}
return (false);
}
const helpRoles = isEditable ? [recordValues["id"] ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"] : ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
/*******************************************************************************
**
*******************************************************************************/
function showHelp(slot: string)
{
return (helpHelpActive || hasHelpContent(widgetMetaData?.helpContent?.get(slot), helpRoles));
}
/*******************************************************************************
**
*******************************************************************************/
function getHelpContent(slot: string)
{
const key = `widget:${widgetMetaData.name};slot:${slot}`;
return <HelpContent helpContents={widgetMetaData?.helpContent?.get(slot)} roles={helpRoles} helpContentKey={key} />;
}
/////////////////////////////////////////////////
// add link to widget header for opening modal //
/////////////////////////////////////////////////
const selectTableFirstTooltipTitle = tableMetaData ? null : "You must select a table before you can set up your report filters and columns";
const labelAdditionalElementsRight: JSX.Element[] = []
if(isEditable)
{
labelAdditionalElementsRight.push(<HeaderLinkButtonComponent label="Edit Filters and Columns" onClickCallback={openEditor} disabled={tableMetaData == null} disabledTooltip={selectTableFirstTooltipTitle} />)
}
return (<Widget widgetMetaData={widgetMetaData} labelAdditionalElementsRight={labelAdditionalElementsRight}>
<React.Fragment>
{
showHelp("sectionSubhead") &&
<Box color={colors.gray.main} pb={"0.5rem"} fontSize={"0.875rem"}>
{getHelpContent("sectionSubhead")}
</Box>
}
<Collapse in={Boolean(alertContent)}>
<Alert severity="error" sx={{mt: 1.5, mb: 0.5}} onClose={() => setAlertContent(null)}>{alertContent}</Alert>
</Collapse>
<Box pt="0.5rem">
<Box display="flex" justifyContent="space-between" alignItems="center">
<h5>Query Filter</h5>
<Box fontSize="0.75rem" fontWeight="700">{mayShowQueryPreview() && getCurrentSortIndicator(frontendQueryFilter, tableMetaData, null)}</Box>
</Box>
{
mayShowQueryPreview() &&
<AdvancedQueryPreview tableMetaData={tableMetaData} queryFilter={frontendQueryFilter} isEditable={false} isQueryTooComplex={frontendQueryFilter.subFilters?.length > 0} removeCriteriaByIndexCallback={null} />
}
{
!mayShowQueryPreview() &&
<Box width="100%" sx={{fontSize: "1rem", background: "#FFFFFF"}} minHeight={"2.5rem"} p={"0.5rem"} pb={"0.125rem"} borderRadius="0.75rem" border={`1px solid ${colors.grayLines.main}`}>
{
isEditable &&
<Tooltip title={selectTableFirstTooltipTitle}>
<span><Button disabled={!recordValues["tableName"]} sx={{mb: "0.125rem", ...unborderedButtonSX}} onClick={openEditor}>+ Add Filters</Button></span>
</Tooltip>
}
{
!isEditable && <Box color={colors.gray.main}>Your report has no filters.</Box>
}
</Box>
}
</Box>
<Box pt="1rem">
<h5>Columns</h5>
<Box display="flex" flexWrap="wrap" fontSize="1rem">
{
mayShowColumnsPreview() &&
columns.columns.map((column, i) => <React.Fragment key={i}>{renderColumn(column)}</React.Fragment>)
}
{
!mayShowColumnsPreview() &&
<Box width="100%" sx={{fontSize: "1rem", background: "#FFFFFF"}} minHeight={"2.375rem"} p={"0.5rem"} pb={"0.125rem"}>
{
isEditable &&
<Tooltip title={selectTableFirstTooltipTitle}>
<span><Button disabled={!recordValues["tableName"]} sx={unborderedButtonSX} onClick={openEditor}>+ Add Columns</Button></span>
</Tooltip>
}
{
!isEditable && <Box color={colors.gray.main}>Your report has no columns.</Box>
}
</Box>
}
</Box>
</Box>
{
modalOpen &&
<Modal open={modalOpen} onClose={(event, reason) => closeEditor(event, reason)}>
<div>
<Box sx={{position: "absolute", overflowY: "auto", maxHeight: "100%", width: "100%"}}>
<Card sx={{m: "2rem", p: "2rem"}}>
<h3>Edit Filters and Columns</h3>
{
showHelp("modalSubheader") &&
<Box color={colors.gray.main} pb={"0.5rem"}>
{getHelpContent("modalSubheader")}
</Box>
}
{
tableMetaData && <RecordQuery
ref={recordQueryRef}
table={tableMetaData}
usage="reportSetup"
isModal={true}
initialQueryFilter={usingDefaultEmptyFilter ? null : frontendQueryFilter}
initialColumns={columns}
/>
}
<Box>
<Box display="flex" justifyContent="flex-end">
<QCancelButton disabled={false} onClickHandler={closeEditor} />
<QSaveButton label="OK" iconName="check" disabled={false} onClickHandler={saveClicked} />
</Box>
</Box>
</Card>
</Box>
</div>
</Modal>
}
</React.Fragment>
</Widget>);
}

50
src/qqq/models/fields/FieldRules.ts Normal file
View File

@ -0,0 +1,50 @@
/*
* 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/>.
*/
/*******************************************************************************
**
*******************************************************************************/
export interface FieldRule
{
trigger: FieldRuleTrigger;
sourceField: string;
action: FieldRuleAction;
targetField: string;
}
/*******************************************************************************
**
*******************************************************************************/
export enum FieldRuleTrigger
{
ON_CHANGE = "ON_CHANGE"
}
/*******************************************************************************
**
*******************************************************************************/
export enum FieldRuleAction
{
CLEAR_TARGET_FIELD = "CLEAR_TARGET_FIELD"
}

159
src/qqq/models/misc/PivotTableDefinitionModels.ts Normal file
View File

@ -0,0 +1,159 @@
/*
* 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 {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
/*******************************************************************************
** put a unique key value in all the pivot table group-by and value objects,
** to help react rendering be sane.
*******************************************************************************/
export class PivotObjectKey
{
private static value = new Date().getTime();
static next(): number
{
return PivotObjectKey.value++;
}
}
/*******************************************************************************
** Full definition of pivot table
*******************************************************************************/
export class PivotTableDefinition
{
rows: PivotTableGroupBy[];
columns: PivotTableGroupBy[];
values: PivotTableValue[];
}
/*******************************************************************************
** A field that the pivot table is grouped by, either as a row or column
*******************************************************************************/
export class PivotTableGroupBy
{
fieldName: string;
key: number;
constructor()
{
this.key = PivotObjectKey.next();
}
}
/*******************************************************************************
** A field & function that serves as the computed values in the pivot table
*******************************************************************************/
export class PivotTableValue
{
fieldName: string;
function: PivotTableFunction;
key: number;
constructor()
{
this.key = PivotObjectKey.next();
}
}
/*******************************************************************************
** Functions that can be applied to pivot table values
*******************************************************************************/
export enum PivotTableFunction
{
SUM = "SUM",
COUNT = "COUNT",
AVERAGE = "AVERAGE",
MAX = "MAX",
MIN = "MIN",
PRODUCT = "PRODUCT",
///////////////////////////////////////////////////////////////////////////////
// i don't think we have a useful version of count-nums --unless we allowed //
// it on string fields, and counted if they looked like numbers? is that //
// what we should do? ... leave here as zombie in case that request comes in //
///////////////////////////////////////////////////////////////////////////////
// COUNT_NUMS = "COUNT_NUMS",
STD_DEV = "STD_DEV",
STD_DEVP = "STD_DEVP",
VAR = "VAR",
VARP = "VARP",
}
const allFunctions = [
PivotTableFunction.SUM,
PivotTableFunction.COUNT,
PivotTableFunction.AVERAGE,
PivotTableFunction.MAX,
PivotTableFunction.MIN,
PivotTableFunction.PRODUCT,
// PivotTableFunction.COUNT_NUMS,
PivotTableFunction.STD_DEV,
PivotTableFunction.STD_DEVP,
PivotTableFunction.VAR,
PivotTableFunction.VARP
];
const onlyCount = [PivotTableFunction.COUNT];
const functionsForDates = [PivotTableFunction.COUNT, PivotTableFunction.AVERAGE, PivotTableFunction.MAX, PivotTableFunction.MIN];
export const functionsPerFieldType: { [type: string]: PivotTableFunction[] } = {};
functionsPerFieldType[QFieldType.STRING] = onlyCount;
functionsPerFieldType[QFieldType.BOOLEAN] = onlyCount;
functionsPerFieldType[QFieldType.BLOB] = onlyCount;
functionsPerFieldType[QFieldType.HTML] = onlyCount;
functionsPerFieldType[QFieldType.PASSWORD] = onlyCount;
functionsPerFieldType[QFieldType.TEXT] = onlyCount;
functionsPerFieldType[QFieldType.TIME] = onlyCount;
functionsPerFieldType[QFieldType.INTEGER] = allFunctions;
functionsPerFieldType[QFieldType.DECIMAL] = allFunctions;
// functionsPerFieldType[QFieldType.LONG] = allFunctions;
functionsPerFieldType[QFieldType.DATE] = functionsForDates;
functionsPerFieldType[QFieldType.DATE_TIME] = functionsForDates;
//////////////////////////////////////
// labels for pivot table functions //
//////////////////////////////////////
export const pivotTableFunctionLabels =
{
"SUM": "Sum",
"COUNT": "Count",
"AVERAGE": "Average",
"MAX": "Max",
"MIN": "Min",
"PRODUCT": "Product",
// "COUNT_NUMS": "Count Numbers",
"STD_DEV": "StdDev",
"STD_DEVP": "StdDevp",
"VAR": "Var",
"VARP": "Varp"
};

49
src/qqq/models/query/QQueryColumns.ts
View File

@ -23,14 +23,13 @@
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {GridPinnedColumns} from "@mui/x-data-grid-pro";
import quickSightChart from "qqq/components/widgets/misc/QuickSightChart";
import DataGridUtils from "qqq/utils/DataGridUtils";
import TableUtils from "qqq/utils/qqq/TableUtils";
/*******************************************************************************
** member object
*******************************************************************************/
interface Column
export interface Column
{
name: string;
isVisible: boolean;
@ -81,11 +80,19 @@ export default class QQueryColumns
fields.forEach((field) =>
{
const column: Column = {name: field.name, isVisible: true, width: DataGridUtils.getColumnWidthForField(field, table)};
queryColumns.columns.push(column);
if (field.name == table.primaryKeyField)
{
column.pinned = "left";
//////////////////////////////////////////////////
// insert the primary key field after __check__ //
//////////////////////////////////////////////////
queryColumns.columns.splice(1, 0, column);
}
else
{
queryColumns.columns.push(column);
}
});
@ -393,6 +400,42 @@ export default class QQueryColumns
return columnVisibilityModel;
};
/*******************************************************************************
** sort the columns list, so that pinned columns go to the front (left) or back
** (right) of the list.
*******************************************************************************/
public sortColumnsFixingPinPositions = (): void =>
{
/////////////////////////////////////////////////////////////////////////////////////////////
// do a sort to push pinned-left columns to the start, and pinned-right columns to the end //
// and otherwise, leave everything alone //
/////////////////////////////////////////////////////////////////////////////////////////////
this.columns = this.columns.sort((a: Column, b: Column) =>
{
if(a.pinned == "left" && b.pinned != "left")
{
return -1;
}
else if(b.pinned == "left" && a.pinned != "left")
{
return 1;
}
else if(a.pinned == "right" && b.pinned != "right")
{
return 1;
}
else if(b.pinned == "right" && a.pinned != "right")
{
return -1;
}
else
{
return (0);
}
});
}
}

15
src/qqq/pages/processes/ProcessRun.tsx
View File

@ -226,8 +226,19 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
setShowFullHelpText(!showFullHelpText);
};
const download = (url: string, fileName: string) =>
const download = (processValues: {[key: string]: string}) =>
{
let url;
let fileName = processValues.downloadFileName;
if(processValues.serverFilePath)
{
url = `/download/${encodeURIComponent(processValues.downloadFileName)}?filePath=${encodeURIComponent(processValues.serverFilePath)}`;
}
else if(processValues.storageTableName && processValues.storageReference)
{
url = `/download/${encodeURIComponent(processValues.downloadFileName)}?storageTableName=${encodeURIComponent(processValues.storageTableName)}&storageReference=${encodeURIComponent(processValues.storageReference)}`;
}
/////////////////////////////////////////////////////////////////////////////////////////////
// todo - this could be simplified, i think? //
// it was originally built like this when we had to submit full access token to backend... //
@ -556,7 +567,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
Download
</Box>
<Box display="flex" py={1} pr={2}>
<MDTypography variant="button" fontWeight="bold" onClick={() => download(`/download/${processValues.downloadFileName}?filePath=${processValues.serverFilePath}`, processValues.downloadFileName)} sx={{cursor: "pointer"}}>
<MDTypography variant="button" fontWeight="bold" onClick={() => download(processValues)} sx={{cursor: "pointer"}}>
<Box display="flex" alignItems="center" gap={1} py={1} pr={2}>
<Icon fontSize="large">download_for_offline</Icon>
{processValues.downloadFileName}

241
src/qqq/pages/records/query/RecordQuery.tsx
View File

@ -76,7 +76,7 @@ import ProcessUtils from "qqq/utils/qqq/ProcessUtils";
import {SavedViewUtils} from "qqq/utils/qqq/SavedViewUtils";
import TableUtils from "qqq/utils/qqq/TableUtils";
import ValueUtils from "qqq/utils/qqq/ValueUtils";
import React, {forwardRef, useContext, useEffect, useReducer, useRef, useState} from "react";
import React, {forwardRef, useContext, useEffect, useImperativeHandle, useReducer, useRef, useState} from "react";
import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
const CURRENT_SAVED_VIEW_ID_LOCAL_STORAGE_KEY_ROOT = "qqq.currentSavedViewId";
@ -84,18 +84,18 @@ const DENSITY_LOCAL_STORAGE_KEY_ROOT = "qqq.density";
const VIEW_LOCAL_STORAGE_KEY_ROOT = "qqq.recordQueryView";
export const TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT = "qqq.tableVariant";
export type QueryScreenUsage = "queryScreen" | "reportSetup"
interface Props
{
table?: QTableMetaData;
launchProcess?: QProcessMetaData;
usage?: QueryScreenUsage;
isModal?: boolean;
initialQueryFilter?: QQueryFilter;
initialColumns?: QQueryColumns;
}
RecordQuery.defaultProps = {
table: null,
launchProcess: null
};
///////////////////////////////////////////////////////
// define possible values for our pageState variable //
///////////////////////////////////////////////////////
@ -107,8 +107,13 @@ const qController = Client.getInstance();
** function to produce standard version of the screen while we're "loading"
** like the main table meta data etc.
*******************************************************************************/
const getLoadingScreen = () =>
const getLoadingScreen = (isModal: boolean) =>
{
if(isModal)
{
return (<Box>&nbsp;</Box>);
}
return (<BaseLayout>
&nbsp;
</BaseLayout>);
@ -120,7 +125,7 @@ const getLoadingScreen = () =>
**
** Yuge component. The best. Lots of very smart people are saying so.
*******************************************************************************/
function RecordQuery({table, launchProcess}: Props): JSX.Element
const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, initialColumns}: Props, ref) =>
{
const tableName = table.name;
const [searchParams] = useSearchParams();
@ -136,6 +141,44 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
const [firstRender, setFirstRender] = useState(true);
const [isFirstRenderAfterChangingTables, setIsFirstRenderAfterChangingTables] = useState(false);
const [loadedFilterFromInitialFilterParam, setLoadedFilterFromInitialFilterParam] = useState(false);
const mayWriteLocalStorage = usage == "queryScreen";
/*******************************************************************************
**
*******************************************************************************/
function localStorageSet(key: string, value: string)
{
if(mayWriteLocalStorage)
{
localStorage.setItem(key, value);
}
}
/*******************************************************************************
**
*******************************************************************************/
function localStorageRemove(key: string)
{
if(mayWriteLocalStorage)
{
localStorage.removeItem(key);
}
}
useImperativeHandle(ref, () =>
{
return {
getCurrentView(): RecordQueryView
{
return view;
}
}
});
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// manage "state" being passed from some screens (like delete) into query screen - by grabbing, and then deleting //
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@ -180,7 +223,9 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
/////////////////////////////////////
const densityLocalStorageKey = `${DENSITY_LOCAL_STORAGE_KEY_ROOT}`;
// only load things out of local storage on the first render
///////////////////////////////////////////////////////////////
// only load things out of local storage on the first render //
///////////////////////////////////////////////////////////////
if (firstRender)
{
console.log("This is firstRender, so reading defaults from local storage...");
@ -211,6 +256,26 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
defaultView.mode = defaultMode;
}
if(firstRender)
{
/////////////////////////////////////////////////////////////////////////
// allow a caller to send in an initial filter & set of columns. //
// only to be used on "first render". //
// JSON.parse(JSON.stringify()) to do deep clone and keep object clean //
// unclear why not needed on initialColumns... //
/////////////////////////////////////////////////////////////////////////
if (initialQueryFilter)
{
defaultView.queryFilter = JSON.parse(JSON.stringify(initialQueryFilter));
setLoadedFilterFromInitialFilterParam(true);
}
if (initialColumns)
{
defaultView.queryColumns = initialColumns;
}
}
/////////////////////////////////////////////////////////////////////////////////////////
// in case the view is missing any of these attributes, give them a reasonable default //
/////////////////////////////////////////////////////////////////////////////////////////
@ -418,51 +483,6 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
};
/*******************************************************************************
**
*******************************************************************************/
const prepQueryFilterForBackend = (sourceFilter: QQueryFilter) =>
{
const filterForBackend = new QQueryFilter([], sourceFilter.orderBys, sourceFilter.subFilters, sourceFilter.booleanOperator);
for (let i = 0; i < sourceFilter?.criteria?.length; i++)
{
const criteria = sourceFilter.criteria[i];
const {criteriaIsValid} = validateCriteria(criteria, null);
if (criteriaIsValid)
{
if (criteria.operator == QCriteriaOperator.IS_BLANK || criteria.operator == QCriteriaOperator.IS_NOT_BLANK)
{
///////////////////////////////////////////////////////////////////////////////////////////
// do this to avoid submitting an empty-string argument for blank/not-blank operators... //
///////////////////////////////////////////////////////////////////////////////////////////
filterForBackend.criteria.push(new QFilterCriteria(criteria.fieldName, criteria.operator, []));
}
else
{
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
// else push a clone of the criteria - since it may get manipulated below (convertFilterPossibleValuesToIds) //
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
const [field] = FilterUtils.getField(tableMetaData, criteria.fieldName);
filterForBackend.criteria.push(new QFilterCriteria(criteria.fieldName, criteria.operator, FilterUtils.cleanseCriteriaValueForQQQ(criteria.values, field)));
}
}
}
/////////////////////////////////////////
// recursively prep subfilters as well //
/////////////////////////////////////////
let subFilters = [] as QQueryFilter[];
for (let j = 0; j < sourceFilter?.subFilters?.length; j++)
{
subFilters.push(prepQueryFilterForBackend(sourceFilter.subFilters[j]));
}
filterForBackend.subFilters = subFilters;
filterForBackend.skip = pageNumber * rowsPerPage;
filterForBackend.limit = rowsPerPage;
return filterForBackend;
};
/*******************************************************************************
**
@ -494,7 +514,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
totalRecords: totalRecords,
columnsModel: columnsModel,
columnVisibilityModel: columnVisibilityModel,
queryFilter: prepQueryFilterForBackend(queryFilter)
queryFilter: FilterUtils.prepQueryFilterForBackend(tableMetaData, queryFilter)
};
exportMenu = (<>
@ -687,10 +707,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
else if (!searchParams.has("filter"))
{
if (localStorage.getItem(currentSavedViewLocalStorageKey))
{
if(usage == "queryScreen")
{
currentSavedViewId = Number.parseInt(localStorage.getItem(currentSavedViewLocalStorageKey));
navigate(`${metaData.getTablePathByName(tableName)}/savedView/${currentSavedViewId}`);
}
}
else
{
doClearCurrentSavedView();
@ -726,7 +749,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
{
FilterUtils.stripAwayIncompleteCriteria(viewForLocalStorage.queryFilter)
}
localStorage.setItem(viewLocalStorageKey, JSON.stringify(viewForLocalStorage));
localStorageSet(viewLocalStorageKey, JSON.stringify(viewForLocalStorage));
}
catch(e)
{
@ -861,7 +884,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
/*******************************************************************************
** This is the method that actually executes a query to update the data in the table.
*******************************************************************************/
const updateTable = (reason?: string) =>
const updateTable = (reason?: string, clearOutCount = true) =>
{
if (pageState != "ready")
{
@ -887,7 +910,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
// copy the orderBys & operator into it - but we'll build its criteria one-by-one, //
// as clones, as we'll need to tweak them a bit //
/////////////////////////////////////////////////////////////////////////////////////
const filterForBackend = prepQueryFilterForBackend(queryFilter);
const filterForBackend = FilterUtils.prepQueryFilterForBackend(tableMetaData, queryFilter, pageNumber, rowsPerPage);
//////////////////////////////////////////
// figure out joins to use in the query //
@ -913,6 +936,12 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
console.log(`Issuing query: ${thisQueryId}`);
if (tableMetaData.capabilities.has(Capability.TABLE_COUNT))
{
if(clearOutCount)
{
setTotalRecords(null);
setDistinctRecords(null);
}
let includeDistinct = isJoinMany(tableMetaData, getVisibleJoinTables());
qController.count(tableName, filterForBackend, queryJoins, includeDistinct, tableVariant).then(([count, distinctCount]) =>
{
@ -945,7 +974,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
console.log(`Received error for query ${thisQueryId}`);
console.log(error);
var errorMessage;
let errorMessage;
if (error && error.message)
{
errorMessage = error.message;
@ -1110,7 +1139,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
if (state && state.density && state.density.value !== density)
{
setDensity(state.density.value);
localStorage.setItem(densityLocalStorageKey, JSON.stringify(state.density.value));
localStorageSet(densityLocalStorageKey, JSON.stringify(state.density.value));
}
};
@ -1414,7 +1443,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
{
if (selectFullFilterState === "filter")
{
const filterForBackend = prepQueryFilterForBackend(queryFilter);
const filterForBackend = FilterUtils.prepQueryFilterForBackend(tableMetaData, queryFilter);
filterForBackend.skip = 0;
filterForBackend.limit = null;
return `?recordsParam=filterJSON&filterJSON=${encodeURIComponent(JSON.stringify(filterForBackend))}`;
@ -1422,7 +1451,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
if (selectFullFilterState === "filterSubset")
{
const filterForBackend = prepQueryFilterForBackend(queryFilter);
const filterForBackend = FilterUtils.prepQueryFilterForBackend(tableMetaData, queryFilter);
filterForBackend.skip = 0;
filterForBackend.limit = selectionSubsetSize;
return `?recordsParam=filterJSON&filterJSON=${encodeURIComponent(JSON.stringify(filterForBackend))}`;
@ -1445,14 +1474,14 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
{
if (selectFullFilterState === "filter")
{
const filterForBackend = prepQueryFilterForBackend(queryFilter);
const filterForBackend = FilterUtils.prepQueryFilterForBackend(tableMetaData, queryFilter);
filterForBackend.skip = 0;
filterForBackend.limit = null;
setRecordIdsForProcess(filterForBackend);
}
else if (selectFullFilterState === "filterSubset")
{
const filterForBackend = prepQueryFilterForBackend(queryFilter);
const filterForBackend = FilterUtils.prepQueryFilterForBackend(tableMetaData, queryFilter);
filterForBackend.skip = 0;
filterForBackend.limit = selectionSubsetSize;
setRecordIdsForProcess(filterForBackend);
@ -1607,7 +1636,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
////////////////////////////////////////////////////////////////
// todo can/should/does this move into the view's "identity"? //
////////////////////////////////////////////////////////////////
localStorage.setItem(currentSavedViewLocalStorageKey, `${savedViewRecord.values.get("id")}`);
localStorageSet(currentSavedViewLocalStorageKey, `${savedViewRecord.values.get("id")}`);
};
@ -1617,7 +1646,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
const doClearCurrentSavedView = () =>
{
setCurrentSavedView(null);
localStorage.removeItem(currentSavedViewLocalStorageKey);
localStorageRemove(currentSavedViewLocalStorageKey);
};
@ -1667,7 +1696,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
// wipe away the saved view //
//////////////////////////////
setCurrentSavedView(null);
localStorage.removeItem(currentSavedViewLocalStorageKey);
localStorageRemove(currentSavedViewLocalStorageKey);
///////////////////////////////////////////////
// activate a new default view for the table //
@ -1913,7 +1942,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
*******************************************************************************/
const openColumnStatistics = async (column: GridColDef) =>
{
setFilterForColumnStats(prepQueryFilterForBackend(queryFilter));
setFilterForColumnStats(FilterUtils.prepQueryFilterForBackend(tableMetaData, queryFilter));
setColumnStatsFieldName(column.field);
const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, column.field);
@ -2188,6 +2217,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
<GridToolbarDensitySelector nonce={undefined} />
</div>
{
usage == "queryScreen" &&
<div style={{zIndex: 10}}>
<MenuButton label="Selection" iconName={selectedIds.length == 0 ? "check_box_outline_blank" : "check_box"} disabled={totalRecords == 0} options={selectionMenuOptions} callback={selectionMenuCallback} />
<SelectionSubsetDialog isOpen={selectionSubsetSizePromptOpen} initialValue={selectionSubsetSize} closeHandler={(value) =>
@ -2209,6 +2240,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
}
}} />
</div>
}
<div>
{
@ -2271,7 +2303,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
// to avoid both this useEffect and the one below from both doing an "initial query", //
// only run this one if at least 1 query has already been ran //
////////////////////////////////////////////////////////////////////////////////////////
updateTable("useEffect(pageNumber,rowsPerPage)");
updateTable("useEffect(pageNumber,rowsPerPage)", false);
}
}, [pageNumber, rowsPerPage]);
@ -2306,7 +2338,18 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
if (pageState == "ready")
{
const newFilterHash = JSON.stringify(prepQueryFilterForBackend(queryFilter));
const filterForBackend = FilterUtils.prepQueryFilterForBackend(tableMetaData, queryFilter);
///////////////////////////////////////////////////////////////////////
// remove the skip & limit (e.g., pagination) from this hash - //
// as we have a specific useEffect watching these, specifically //
// so we can pass the dont-clear-count flag into updateTable, //
// to try to keep the count from flashing back & forth to "Counting" //
///////////////////////////////////////////////////////////////////////
filterForBackend.skip = null;
filterForBackend.limit = null;
const newFilterHash = JSON.stringify(filterForBackend);
if (filterHash != newFilterHash)
{
setFilterHash(newFilterHash);
@ -2477,11 +2520,14 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
// if the last time we were on this table, a currentSavedView was written to local storage - //
// then navigate back to that view's URL - unless - it looks like we're on a process! //
///////////////////////////////////////////////////////////////////////////////////////////////
if (localStorage.getItem(currentSavedViewLocalStorageKey) && !urlLooksLikeProcess())
if (localStorage.getItem(currentSavedViewLocalStorageKey) && !urlLooksLikeProcess() && !loadedFilterFromInitialFilterParam)
{
const currentSavedViewId = Number.parseInt(localStorage.getItem(currentSavedViewLocalStorageKey));
console.log(`returning to previously active saved view ${currentSavedViewId}`);
if(usage == "queryScreen")
{
navigate(`${metaData.getTablePathByName(tableName)}/savedView/${currentSavedViewId}`);
}
setViewIdInLocation(currentSavedViewId);
/////////////////////////////////////////////////////////////////////////////////////////////////////
@ -2537,7 +2583,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
promptForTableVariantSelection();
}
return (getLoadingScreen());
return (getLoadingScreen(isModal));
}
////////////////////////////////////////////////////////////////////////
@ -2571,7 +2617,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
setRows([]);
setIsFirstRenderAfterChangingTables(true);
return (getLoadingScreen());
return (getLoadingScreen(isModal));
}
/////////////////////////////////////////////////////////////////////////////////////////////
@ -2615,7 +2661,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
if (pageState != "ready")
{
console.log(`page state is ${pageState}... no-op while those complete async's run...`);
return (getLoadingScreen());
return (getLoadingScreen(isModal));
}
///////////////////////////////////////////////////////////////////////////////////////////
@ -2624,13 +2670,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
///////////////////////////////////////////////////////////////////////////////////////////
if (!tableMetaData)
{
return (getLoadingScreen());
return (getLoadingScreen(isModal));
}
let savedViewsComponent = null;
if (metaData && metaData.processes.has("querySavedView"))
{
savedViewsComponent = (<SavedViews qController={qController} metaData={metaData} tableMetaData={tableMetaData} view={view} viewAsJson={viewAsJson} currentSavedView={currentSavedView} tableDefaultView={tableDefaultView} viewOnChangeCallback={handleSavedViewChange} loadingSavedView={loadingSavedView} />);
savedViewsComponent = (<SavedViews qController={qController} metaData={metaData} tableMetaData={tableMetaData} view={view} viewAsJson={viewAsJson} currentSavedView={currentSavedView} tableDefaultView={tableDefaultView} viewOnChangeCallback={handleSavedViewChange} loadingSavedView={loadingSavedView} queryScreenUsage={usage} />);
}
@ -2707,7 +2753,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
};
//////////////////////////////////////////////////////////////////////////////////////////////////////////
// these numbers help set the height of the grid (so page won't scroll) based on spcae above & below it //
// these numbers help set the height of the grid (so page won't scroll) based on space above & below it //
//////////////////////////////////////////////////////////////////////////////////////////////////////////
let spaceBelowGrid = 40;
let spaceAboveGrid = 205;
@ -2721,19 +2767,26 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
spaceAboveGrid += 60;
}
if(isModal)
{
spaceAboveGrid += 130;
}
////////////////////////
// main screen render //
////////////////////////
return (
<BaseLayout>
const body = (
<React.Fragment>
<Box display="flex" justifyContent="space-between">
<Box>
<Typography textTransform="capitalize" variant="h3">
{pageLoadingState.isLoading() && ""}
{pageLoadingState.isLoadingSlow() && "Loading..."}
{pageLoadingState.isNotLoading() && getPageHeader(tableMetaData, visibleJoinTables, tableVariant)}
{pageLoadingState.isNotLoading() && !isModal && getPageHeader(tableMetaData, visibleJoinTables, tableVariant)}
</Typography>
</Box>
{
!isModal &&
<Box whiteSpace="nowrap">
<GotoRecordButton metaData={metaData} tableMetaData={tableMetaData} />
<Box display="inline-block" width="150px">
@ -2755,6 +2808,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
<QCreateNewButton tablePath={metaData?.getTablePathByName(tableName)} />
}
</Box>
}
</Box>
<div className="recordQuery">
{/*
@ -2808,6 +2862,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
setQuickFilterFieldNames={doSetQuickFilterFieldNames}
gridApiRef={gridApiRef}
mode={mode}
queryScreenUsage={usage}
setMode={doSetMode}
savedViewsComponent={savedViewsComponent}
columnMenuComponent={buildColumnMenu()}
@ -2848,7 +2903,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
sortingMode="server"
filterMode="server"
page={pageNumber}
checkboxSelection
checkboxSelection={usage == "queryScreen"}
disableSelectionOnClick
autoHeight={false}
rows={rows}
@ -2857,7 +2912,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
rowBuffer={10}
rowCount={totalRecords === null || totalRecords === undefined ? 0 : totalRecords}
onPageSizeChange={handleRowsPerPageChange}
onRowClick={handleRowClick}
onRowClick={usage == "queryScreen" ? handleRowClick : null}
onStateChange={handleStateChange}
density={density}
loading={loading}
@ -2915,8 +2970,28 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
</Modal>
}
</div>
</BaseLayout>
</React.Fragment>
);
if(isModal)
{
return body;
}
return (
<BaseLayout>{body}</BaseLayout>
)
})
RecordQuery.defaultProps = {
table: null,
usage: "queryScreen",
launchProcess: null,
isModal: false,
initialQueryFilter: null,
initialColumns: null,
};
export default RecordQuery;

4
src/qqq/pages/records/view/RecordView.tsx
View File

@ -508,7 +508,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
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"}}>
<Box width="100%" flexGrow={1} alignItems="stretch">
<DashboardWidgets key={section.name} tableName={tableMetaData.name} widgetMetaDataList={[widgetMetaData]} entityPrimaryKey={record.values.get(tableMetaData.primaryKeyField)} omitWrappingGridContainer={true} />
<DashboardWidgets key={section.name} tableName={tableMetaData.name} widgetMetaDataList={[widgetMetaData]} record={record} entityPrimaryKey={record.values.get(tableMetaData.primaryKeyField)} omitWrappingGridContainer={true} />
</Box>
</Grid>
);
@ -850,7 +850,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
return (
<BaseLayout>
<Box>
<Box className="recordView">
<Grid container>
<Grid item xs={12}>
<Box mb={3}>

6
src/qqq/styles/qqq-override-styles.css
View File

@ -682,6 +682,12 @@ input[type="search"]::-webkit-search-results-decoration
border: none;
}
.entityForm h5,
.recordView h5
{
font-weight: 500;
}
.MuiPickersDay-root.Mui-selected, .MuiPickersDay-root.MuiPickersDay-dayWithMargin:hover
{
color: white;

53
src/qqq/utils/qqq/FilterUtils.tsx
View File

@ -32,6 +32,7 @@ import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryF
import {ThisOrLastPeriodExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/ThisOrLastPeriodExpression";
import Box from "@mui/material/Box";
import {GridSortModel} from "@mui/x-data-grid-pro";
import {validateCriteria} from "qqq/components/query/FilterCriteriaRow";
import TableUtils from "qqq/utils/qqq/TableUtils";
import ValueUtils from "qqq/utils/qqq/ValueUtils";
@ -612,6 +613,58 @@ class FilterUtils
}
}
/*******************************************************************************
** make a new query filter, based on the input one, but w/ values good for the
** backend. such as, possible values as just ids, not objects w/ a label;
** date-times formatted properly and in UTC
*******************************************************************************/
public static prepQueryFilterForBackend(tableMetaData: QTableMetaData, sourceFilter: QQueryFilter, pageNumber?: number, rowsPerPage?: number): QQueryFilter
{
const filterForBackend = new QQueryFilter([], sourceFilter.orderBys, sourceFilter.subFilters, sourceFilter.booleanOperator);
for (let i = 0; i < sourceFilter?.criteria?.length; i++)
{
const criteria = sourceFilter.criteria[i];
const {criteriaIsValid} = validateCriteria(criteria, null);
if (criteriaIsValid)
{
if (criteria.operator == QCriteriaOperator.IS_BLANK || criteria.operator == QCriteriaOperator.IS_NOT_BLANK)
{
///////////////////////////////////////////////////////////////////////////////////////////
// do this to avoid submitting an empty-string argument for blank/not-blank operators... //
///////////////////////////////////////////////////////////////////////////////////////////
filterForBackend.criteria.push(new QFilterCriteria(criteria.fieldName, criteria.operator, []));
}
else
{
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
// else push a clone of the criteria - since it may get manipulated below (convertFilterPossibleValuesToIds) //
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
const [field] = FilterUtils.getField(tableMetaData, criteria.fieldName);
filterForBackend.criteria.push(new QFilterCriteria(criteria.fieldName, criteria.operator, FilterUtils.cleanseCriteriaValueForQQQ(criteria.values, field)));
}
}
}
/////////////////////////////////////////
// recursively prep subfilters as well //
/////////////////////////////////////////
let subFilters = [] as QQueryFilter[];
for (let j = 0; j < sourceFilter?.subFilters?.length; j++)
{
subFilters.push(FilterUtils.prepQueryFilterForBackend(tableMetaData, sourceFilter.subFilters[j]));
}
filterForBackend.subFilters = subFilters;
if(pageNumber !== undefined && rowsPerPage !== undefined)
{
filterForBackend.skip = pageNumber * rowsPerPage;
filterForBackend.limit = rowsPerPage;
}
return filterForBackend;
};
}
export default FilterUtils;