mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-18 05:10:45 +00:00
Merge pull request #52 from Kingsrook/feature/CE-881-create-basic-saved-reports
Feature/ce 881 create basic saved reports
This commit is contained in:
GitHub
@ -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",
|
||||
|
||||
@ -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<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());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -124,7 +161,7 @@ public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
|
||||
{
|
||||
if(qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldName), prefix + " unrecognized field name: " + fieldName))
|
||||
{
|
||||
qInstanceValidator.assertCondition(!usedNames.contains(fieldName), prefix + " has a duplicated field name: " + fieldName);
|
||||
qInstanceValidator.assertCondition(!usedNames.contains(fieldName), prefix + "has a duplicated field name: " + fieldName);
|
||||
usedNames.add(fieldName);
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -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,17 +109,21 @@ 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[]);
|
||||
const [renderedWidgetSections, setRenderedWidgetSections] = useState({} as {[name: string]: JSX.Element});
|
||||
const [childListWidgetData, setChildListWidgetData] = useState({} as {[name: string]: ChildRecordListData});
|
||||
const [renderedWidgetSections, setRenderedWidgetSections] = useState({} as { [name: string]: JSX.Element });
|
||||
const [childListWidgetData, setChildListWidgetData] = useState({} as { [name: string]: ChildRecordListData });
|
||||
const [, forceUpdate] = useReducer((x) => x + 1, 0);
|
||||
|
||||
const [showEditChildForm, setShowEditChildForm] = useState(null as any);
|
||||
|
||||
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,23 +144,28 @@ 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")
|
||||
{
|
||||
disabledFields = JSON.parse(decodeURIComponent(parts[1])) as { [key: string]: any };
|
||||
if (name == "disabledFields")
|
||||
{
|
||||
disabledFields = JSON.parse(decodeURIComponent(value)) as { [key: string]: any };
|
||||
}
|
||||
}
|
||||
}
|
||||
catch (e)
|
||||
{}
|
||||
{
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
@ -153,7 +174,7 @@ function EntityForm(props: Props): JSX.Element
|
||||
let defaultValues = widgetData.defaultValuesForNewChildRecords;
|
||||
|
||||
let disabledFields = widgetData.disabledFieldsForNewChildRecords;
|
||||
if(!disabledFields)
|
||||
if (!disabledFields)
|
||||
{
|
||||
disabledFields = widgetData.defaultValuesForNewChildRecords;
|
||||
}
|
||||
@ -170,7 +191,7 @@ function EntityForm(props: Props): JSX.Element
|
||||
let defaultValues = widgetData.queryOutput.records[rowIndex].values;
|
||||
|
||||
let disabledFields = widgetData.disabledFieldsForNewChildRecords;
|
||||
if(!disabledFields)
|
||||
if (!disabledFields)
|
||||
{
|
||||
disabledFields = widgetData.defaultValuesForNewChildRecords;
|
||||
}
|
||||
@ -234,16 +255,16 @@ 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)
|
||||
if(!newChildListWidgetData[widgetName].queryOutput.records)
|
||||
const newChildListWidgetData: { [name: string]: ChildRecordListData } = Object.assign({}, childListWidgetData);
|
||||
if (!newChildListWidgetData[widgetName].queryOutput.records)
|
||||
{
|
||||
newChildListWidgetData[widgetName].queryOutput.records = [];
|
||||
}
|
||||
|
||||
switch(action)
|
||||
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
|
||||
*******************************************************************************/
|
||||
@ -290,14 +326,14 @@ function EntityForm(props: Props): JSX.Element
|
||||
|
||||
if (!Object.keys(formFields).length)
|
||||
{
|
||||
return <div>Error: No form fields in section {section.name}</div>;
|
||||
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)
|
||||
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]);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -319,20 +369,47 @@ function EntityForm(props: Props): JSX.Element
|
||||
*******************************************************************************/
|
||||
function getWidgetSection(widgetMetaData: QWidgetMetaData, widgetData: any): JSX.Element
|
||||
{
|
||||
widgetData.viewAllLink = null;
|
||||
widgetMetaData.showExportButton = false;
|
||||
if(widgetMetaData.type == "childRecordList")
|
||||
{
|
||||
widgetData.viewAllLink = null;
|
||||
widgetMetaData.showExportButton = false;
|
||||
|
||||
return <RecordGridWidget
|
||||
key={new Date().getTime()} // added so that editing values actually re-renders...
|
||||
widgetMetaData={widgetMetaData}
|
||||
data={widgetData}
|
||||
disableRowClick
|
||||
allowRecordEdit
|
||||
allowRecordDelete
|
||||
addNewRecordCallback={() => openAddChildRecord(widgetMetaData.name, widgetData)}
|
||||
editRecordCallback={(rowIndex) => openEditChildRecord(widgetMetaData.name, widgetData, rowIndex)}
|
||||
deleteRecordCallback={(rowIndex) => deleteChildRecord(widgetMetaData.name, widgetData, rowIndex)}
|
||||
/>
|
||||
return <RecordGridWidget
|
||||
key={new Date().getTime()} // added so that editing values actually re-renders...
|
||||
widgetMetaData={widgetMetaData}
|
||||
data={widgetData}
|
||||
disableRowClick
|
||||
allowRecordEdit
|
||||
allowRecordDelete
|
||||
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>)
|
||||
}
|
||||
|
||||
|
||||
@ -341,17 +418,43 @@ function EntityForm(props: Props): JSX.Element
|
||||
*******************************************************************************/
|
||||
function renderSection(section: QTableSection, values: FormikValues | Value, touched: FormikTouched<FormikValues> | Value, formFields: Map<string, any>, errors: FormikErrors<FormikValues> | Value)
|
||||
{
|
||||
if(section.fieldNames && section.fieldNames.length > 0)
|
||||
if (section.fieldNames && section.fieldNames.length > 0)
|
||||
{
|
||||
return getFormSection(section, values, touched, formFields.get(section.name), errors);
|
||||
}
|
||||
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);
|
||||
|
||||
@ -412,7 +531,7 @@ function EntityForm(props: Props): JSX.Element
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// these checks are only for updating records, if copying, it is actually an insert, which is checked after this block //
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
if(! props.isCopy)
|
||||
if (!props.isCopy)
|
||||
{
|
||||
if (!tableMetaData.capabilities.has(Capability.TABLE_UPDATE))
|
||||
{
|
||||
@ -468,7 +587,7 @@ function EntityForm(props: Props): JSX.Element
|
||||
///////////////////////////////////////////////////
|
||||
// if an override heading was passed in, use it. //
|
||||
///////////////////////////////////////////////////
|
||||
if(props.overrideHeading)
|
||||
if (props.overrideHeading)
|
||||
{
|
||||
setFormTitle(props.overrideHeading);
|
||||
if (!props.isModal)
|
||||
@ -533,8 +652,8 @@ function EntityForm(props: Props): JSX.Element
|
||||
let t1sectionName;
|
||||
let t1section;
|
||||
const nonT1Sections: QTableSection[] = [];
|
||||
const newRenderedWidgetSections: {[name: string]: JSX.Element} = {};
|
||||
const newChildListWidgetData: {[name: string]: ChildRecordListData} = {};
|
||||
const newRenderedWidgetSections: { [name: string]: JSX.Element } = {};
|
||||
const newChildListWidgetData: { [name: string]: ChildRecordListData } = {};
|
||||
|
||||
for (let i = 0; i < tableSections.length; i++)
|
||||
{
|
||||
@ -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 //
|
||||
//////////////////////////////////////
|
||||
@ -629,10 +743,10 @@ function EntityForm(props: Props): JSX.Element
|
||||
//////////////////////////////////////////////////////////////////
|
||||
useEffect(() =>
|
||||
{
|
||||
if(childListWidgetData)
|
||||
if (childListWidgetData)
|
||||
{
|
||||
const newRenderedWidgetSections: {[name: string]: JSX.Element} = {};
|
||||
for(let name in childListWidgetData)
|
||||
const newRenderedWidgetSections: { [name: string]: JSX.Element } = {};
|
||||
for (let name in childListWidgetData)
|
||||
{
|
||||
const widgetMetaData = metaData.widgets.get(name);
|
||||
newRenderedWidgetSections[name] = getWidgetSection(widgetMetaData, childListWidgetData[name]);
|
||||
@ -677,7 +791,7 @@ function EntityForm(props: Props): JSX.Element
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// if there's a callback (e.g., for a modal nested on another create/edit screen), then just pass our data back there anre return. //
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
if(props.onSubmitCallback)
|
||||
if (props.onSubmitCallback)
|
||||
{
|
||||
props.onSubmitCallback(values);
|
||||
return;
|
||||
@ -690,7 +804,7 @@ function EntityForm(props: Props): JSX.Element
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
const valuesToPost = JSON.parse(JSON.stringify(values));
|
||||
|
||||
for(let fieldName of tableMetaData.fields.keys())
|
||||
for (let fieldName of tableMetaData.fields.keys())
|
||||
{
|
||||
const fieldMetaData = tableMetaData.fields.get(fieldName);
|
||||
|
||||
@ -702,9 +816,9 @@ function EntityForm(props: Props): JSX.Element
|
||||
// changing from, say, 12:15:30 to just 12:15:00... this seems to get around that, for cases when the //
|
||||
// user didn't change the value in the field (but if the user did change the value, then we will submit it) //
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
if(fieldMetaData.type === QFieldType.DATE_TIME && valuesToPost[fieldName])
|
||||
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");
|
||||
@ -723,12 +837,12 @@ function EntityForm(props: Props): JSX.Element
|
||||
// 3) they are a String, which is their URL path to download them... in that case, don't submit them to //
|
||||
// the backend at all, so they'll stay what they were. do that by deleting them from the values object here. //
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
if(fieldMetaData.type === QFieldType.BLOB)
|
||||
if (fieldMetaData.type === QFieldType.BLOB)
|
||||
{
|
||||
if(typeof valuesToPost[fieldName] === "string")
|
||||
if (typeof valuesToPost[fieldName] === "string")
|
||||
{
|
||||
console.log(`${fieldName} value was a string, so, we're deleting it from the values array, to not submit it to the backend, to not change it.`);
|
||||
delete(valuesToPost[fieldName]);
|
||||
delete (valuesToPost[fieldName]);
|
||||
}
|
||||
else
|
||||
{
|
||||
@ -737,23 +851,23 @@ 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")
|
||||
if(!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}`);
|
||||
}
|
||||
associationsToPost[manageAssociationName] = [];
|
||||
haveAssociationsToPost = true;
|
||||
for(let i=0; i<childListWidgetData[name].queryOutput?.records?.length; i++)
|
||||
for (let i = 0; i < childListWidgetData[name].queryOutput?.records?.length; i++)
|
||||
{
|
||||
associationsToPost[manageAssociationName].push(childListWidgetData[name].queryOutput.records[i].values);
|
||||
}
|
||||
}
|
||||
if(haveAssociationsToPost)
|
||||
if (haveAssociationsToPost)
|
||||
{
|
||||
valuesToPost["associations"] = JSON.stringify(associationsToPost);
|
||||
}
|
||||
@ -776,7 +890,7 @@ function EntityForm(props: Props): JSX.Element
|
||||
else
|
||||
{
|
||||
let warningMessage = null;
|
||||
if(record.warnings && record.warnings.length && record.warnings.length > 0)
|
||||
if (record.warnings && record.warnings.length && record.warnings.length > 0)
|
||||
{
|
||||
warningMessage = record.warnings[0];
|
||||
}
|
||||
@ -790,7 +904,7 @@ function EntityForm(props: Props): JSX.Element
|
||||
console.log("Caught:");
|
||||
console.log(error);
|
||||
|
||||
if(error.message.toLowerCase().startsWith("warning"))
|
||||
if (error.message.toLowerCase().startsWith("warning"))
|
||||
{
|
||||
const path = location.pathname.replace(/\/edit$/, "");
|
||||
navigate(path, {state: {updateSuccess: true, warning: error.message}});
|
||||
@ -821,7 +935,7 @@ function EntityForm(props: Props): JSX.Element
|
||||
else
|
||||
{
|
||||
let warningMessage = null;
|
||||
if(record.warnings && record.warnings.length && record.warnings.length > 0)
|
||||
if (record.warnings && record.warnings.length && record.warnings.length > 0)
|
||||
{
|
||||
warningMessage = record.warnings[0];
|
||||
}
|
||||
@ -834,7 +948,7 @@ function EntityForm(props: Props): JSX.Element
|
||||
})
|
||||
.catch((error) =>
|
||||
{
|
||||
if(error.message.toLowerCase().startsWith("warning"))
|
||||
if (error.message.toLowerCase().startsWith("warning"))
|
||||
{
|
||||
const path = props.isCopy ?
|
||||
location.pathname.replace(new RegExp(`/${props.id}/copy$`), "/" + record.values.get(tableMetaData.primaryKeyField))
|
||||
@ -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,51 +1061,116 @@ function EntityForm(props: Props): JSX.Element
|
||||
errors,
|
||||
touched,
|
||||
isSubmitting,
|
||||
}) => (
|
||||
<Form id={formId} autoComplete="off">
|
||||
<ScrollToFirstError />
|
||||
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} = {};
|
||||
|
||||
<Box pb={3} pt={0}>
|
||||
<Card id={`${t1sectionName}`} sx={{overflow: "visible", pb: 2, scrollMarginTop: "100px"}} elevation={cardElevation}>
|
||||
<Box display="flex" p={3} pb={1}>
|
||||
<Box mr={1.5}>
|
||||
<Avatar sx={{bgcolor: accentColor}}>
|
||||
<Icon>
|
||||
{tableMetaData?.iconName}
|
||||
</Icon>
|
||||
</Avatar>
|
||||
</Box>
|
||||
<Box display="flex" alignItems="center">
|
||||
<MDTypography variant="h5">{formTitle}</MDTypography>
|
||||
</Box>
|
||||
</Box>
|
||||
{t1section && getSectionHelp(t1section)}
|
||||
////////////////////////////////////////////////////////////////////
|
||||
// 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)
|
||||
{
|
||||
t1sectionName && formFields ? (
|
||||
<Box px={3}>
|
||||
<Box pb={"0.25rem"} width="100%">
|
||||
{getFormSection(t1section, values, touched, formFields.get(t1sectionName), errors, true)}
|
||||
</Box>
|
||||
</Box>
|
||||
) : null
|
||||
if (formValues[fieldName] != values[fieldName])
|
||||
{
|
||||
handleChangedFieldValue(fieldName, formValues[fieldName], values[fieldName], valueChangesToMake);
|
||||
}
|
||||
formValues[fieldName] = values[fieldName];
|
||||
}
|
||||
</Card>
|
||||
</Box>
|
||||
{formFields && nonT1Sections.length ? nonT1Sections.map((section: QTableSection) => (
|
||||
<Box key={`edit-card-${section.name}`} pb={3}>
|
||||
{renderSection(section, values, touched, formFields, errors)}
|
||||
}
|
||||
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 />
|
||||
|
||||
<Box pb={3} pt={0}>
|
||||
<Card id={`${t1sectionName}`} sx={{overflow: "visible", pb: 2, scrollMarginTop: "100px"}} elevation={cardElevation}>
|
||||
<Box display="flex" p={3} pb={1}>
|
||||
<Box mr={1.5}>
|
||||
<Avatar sx={{bgcolor: accentColor}}>
|
||||
<Icon>
|
||||
{tableMetaData?.iconName}
|
||||
</Icon>
|
||||
</Avatar>
|
||||
</Box>
|
||||
<Box display="flex" alignItems="center">
|
||||
<MDTypography variant="h5">{formTitle}</MDTypography>
|
||||
</Box>
|
||||
</Box>
|
||||
{t1section && getSectionHelp(t1section)}
|
||||
{
|
||||
t1sectionName && formFields ? (
|
||||
<Box px={3}>
|
||||
<Box pb={"0.25rem"} width="100%">
|
||||
{getFormSection(t1section, values, touched, formFields.get(t1sectionName), errors, true)}
|
||||
</Box>
|
||||
</Box>
|
||||
) : null
|
||||
}
|
||||
</Card>
|
||||
</Box>
|
||||
)) : null}
|
||||
{formFields && nonT1Sections.length ? nonT1Sections.map((section: QTableSection) => (
|
||||
<Box key={`edit-card-${section.name}`} pb={3}>
|
||||
{renderSection(section, values, touched, formFields, errors)}
|
||||
</Box>
|
||||
)) : null}
|
||||
|
||||
<Box component="div" p={3}>
|
||||
<Grid container justifyContent="flex-end" spacing={3}>
|
||||
<QCancelButton onClickHandler={props.isModal ? props.closeModalHandler : handleCancelClicked} disabled={isSubmitting} />
|
||||
<QSaveButton disabled={isSubmitting} />
|
||||
</Grid>
|
||||
</Box>
|
||||
<Box component="div" p={3}>
|
||||
<Grid container justifyContent="flex-end" spacing={3}>
|
||||
<QCancelButton onClickHandler={props.isModal ? props.closeModalHandler : handleCancelClicked} disabled={isSubmitting} />
|
||||
<QSaveButton disabled={isSubmitting} />
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
</Form>
|
||||
)}
|
||||
</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;
|
||||
}
|
||||
|
||||
@ -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
|
||||
{
|
||||
@ -33,10 +35,17 @@ interface FieldAutoCompleteProps
|
||||
metaData: QInstance;
|
||||
tableMetaData: QTableMetaData;
|
||||
handleFieldChange: (event: any, newValue: any, reason: string) => void;
|
||||
defaultValue?: {field: QFieldMetaData, table: QTableMetaData, fieldName: string};
|
||||
defaultValue?: { field: QFieldMetaData, table: QTableMetaData, fieldName: string };
|
||||
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} = {}
|
||||
if(forceOpen)
|
||||
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}
|
||||
/>
|
||||
|
||||
|
||||
@ -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"));
|
||||
navigate(`${metaData.getTablePathByName(tableMetaData.name)}/savedView/${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);
|
||||
navigate(metaData.getTablePathByName(tableMetaData.name));
|
||||
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,25 +606,29 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
<Box pl={2} pr={2} sx={{display: "flex", alignItems: "center"}}>
|
||||
{
|
||||
!currentSavedView && viewIsModified && <>
|
||||
<Tooltip {...tooltipMaxWidth("24rem")} sx={{cursor: "pointer"}} title={<>
|
||||
<b>Unsaved Changes</b>
|
||||
<ul style={{padding: "0.5rem 1rem"}}>
|
||||
{
|
||||
viewDiffs.map((s: string, i: number) => <li key={i}>{s}</li>)
|
||||
}
|
||||
</ul>
|
||||
</>}>
|
||||
<Button disableRipple={true} sx={linkButtonStyle} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>Save View As…</Button>
|
||||
</Tooltip>
|
||||
{
|
||||
isQueryScreen && <>
|
||||
<Tooltip {...tooltipMaxWidth("24rem")} sx={{cursor: "pointer"}} title={<>
|
||||
<b>Unsaved Changes</b>
|
||||
<ul style={{padding: "0.5rem 1rem"}}>
|
||||
{
|
||||
viewDiffs.map((s: string, i: number) => <li key={i}>{s}</li>)
|
||||
}
|
||||
</ul>
|
||||
</>}>
|
||||
<Button disableRipple={true} sx={linkButtonStyle} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>Save View As…</Button>
|
||||
</Tooltip>
|
||||
|
||||
{/* vertical rule */}
|
||||
<Box display="inline-block" borderLeft={`1px solid ${colors.grayLines.main}`} height="1rem" width="1px" position="relative" />
|
||||
{/* 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
153
src/qqq/components/query/AdvancedQueryPreview.tsx
Normal 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} </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} </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} </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>
|
||||
)
|
||||
}
|
||||
@ -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} </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} </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} </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>
|
||||
|
||||
@ -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}>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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
209
src/qqq/components/widgets/misc/PivotTableGroupByElement.tsx
Normal 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
870
src/qqq/components/widgets/misc/PivotTableSetupWidget.tsx
Normal 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
319
src/qqq/components/widgets/misc/PivotTableValueElement.tsx
Normal 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
374
src/qqq/components/widgets/misc/ReportSetupWidget.tsx
Normal 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
50
src/qqq/models/fields/FieldRules.ts
Normal 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
159
src/qqq/models/misc/PivotTableDefinitionModels.ts
Normal 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"
|
||||
};
|
||||
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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> </Box>);
|
||||
}
|
||||
|
||||
return (<BaseLayout>
|
||||
|
||||
</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 = (<>
|
||||
@ -688,8 +708,11 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
{
|
||||
if (localStorage.getItem(currentSavedViewLocalStorageKey))
|
||||
{
|
||||
currentSavedViewId = Number.parseInt(localStorage.getItem(currentSavedViewLocalStorageKey));
|
||||
navigate(`${metaData.getTablePathByName(tableName)}/savedView/${currentSavedViewId}`);
|
||||
if(usage == "queryScreen")
|
||||
{
|
||||
currentSavedViewId = Number.parseInt(localStorage.getItem(currentSavedViewLocalStorageKey));
|
||||
navigate(`${metaData.getTablePathByName(tableName)}/savedView/${currentSavedViewId}`);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
@ -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,27 +2217,30 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
<GridToolbarDensitySelector nonce={undefined} />
|
||||
</div>
|
||||
|
||||
<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) =>
|
||||
{
|
||||
setSelectionSubsetSizePromptOpen(false);
|
||||
|
||||
if (value !== undefined)
|
||||
{
|
||||
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) =>
|
||||
{
|
||||
if (typeof value === "number" && value > 0)
|
||||
setSelectionSubsetSizePromptOpen(false);
|
||||
|
||||
if (value !== undefined)
|
||||
{
|
||||
programmaticallySelectSomeOrAllRows(value);
|
||||
setSelectionSubsetSize(value);
|
||||
setSelectFullFilterState("filterSubset");
|
||||
if (typeof value === "number" && value > 0)
|
||||
{
|
||||
programmaticallySelectSomeOrAllRows(value);
|
||||
setSelectionSubsetSize(value);
|
||||
setSelectFullFilterState("filterSubset");
|
||||
}
|
||||
else
|
||||
{
|
||||
setAlertContent("Unexpected value: " + value);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
setAlertContent("Unexpected value: " + value);
|
||||
}
|
||||
}
|
||||
}} />
|
||||
</div>
|
||||
}} />
|
||||
</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}`);
|
||||
navigate(`${metaData.getTablePathByName(tableName)}/savedView/${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,40 +2767,48 @@ 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>
|
||||
<Box whiteSpace="nowrap">
|
||||
<GotoRecordButton metaData={metaData} tableMetaData={tableMetaData} />
|
||||
<Box display="inline-block" width="150px">
|
||||
{
|
||||
!isModal &&
|
||||
<Box whiteSpace="nowrap">
|
||||
<GotoRecordButton metaData={metaData} tableMetaData={tableMetaData} />
|
||||
<Box display="inline-block" width="150px">
|
||||
{
|
||||
tableMetaData &&
|
||||
<QueryScreenActionMenu
|
||||
metaData={metaData}
|
||||
tableMetaData={tableMetaData}
|
||||
tableProcesses={tableProcesses}
|
||||
bulkLoadClicked={bulkLoadClicked}
|
||||
bulkEditClicked={bulkEditClicked}
|
||||
bulkDeleteClicked={bulkDeleteClicked}
|
||||
processClicked={processClicked}
|
||||
/>
|
||||
}
|
||||
</Box>
|
||||
{
|
||||
tableMetaData &&
|
||||
<QueryScreenActionMenu
|
||||
metaData={metaData}
|
||||
tableMetaData={tableMetaData}
|
||||
tableProcesses={tableProcesses}
|
||||
bulkLoadClicked={bulkLoadClicked}
|
||||
bulkEditClicked={bulkEditClicked}
|
||||
bulkDeleteClicked={bulkDeleteClicked}
|
||||
processClicked={processClicked}
|
||||
/>
|
||||
table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission &&
|
||||
<QCreateNewButton tablePath={metaData?.getTablePathByName(tableName)} />
|
||||
}
|
||||
</Box>
|
||||
{
|
||||
table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission &&
|
||||
<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;
|
||||
|
||||
@ -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}>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user