QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-17 12:50:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

CE-1115 pre-QA commit on saved report UI, including:

Browse Source 
- redo pivots so editing is in a modal
- add form validations
- field rules for clearing one field when another changes
This commit is contained in:
darin.kelkhoff
2024-04-14 20:10:29 -05:00
parent 2c0725852e
commit eafd8d98cd
19 changed files with 1168 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,6 +22,7 @@
package com.kingsrook.qqq.frontend.materialdashboard.model.metadata;
import java.util.ArrayList;
import java.util.HashSet;
import java.util.List;
import java.util.Set;
@ -30,6 +31,8 @@ import com.kingsrook.qqq.backend.core.model.metadata.QInstance;
import com.kingsrook.qqq.backend.core.model.metadata.tables.QSupplementalTableMetaData;
import com.kingsrook.qqq.backend.core.model.metadata.tables.QTableMetaData;
import com.kingsrook.qqq.backend.core.utils.CollectionUtils;
import com.kingsrook.qqq.backend.core.utils.StringUtils;
import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRule;
/*******************************************************************************
@ -37,8 +40,11 @@ import com.kingsrook.qqq.backend.core.utils.CollectionUtils;
*******************************************************************************/
public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
{
public static final String TYPE = "materialDashboard";
private List<List<String>> gotoFieldNames;
private List<String> defaultQuickFilterFieldNames;
private List<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);
}
}

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

@ -0,0 +1,165 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2024. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
package com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules;
import java.io.Serializable;
/*******************************************************************************
** definition of rules for how UI fields should behave.
**
** e.g., one field being changed causing different things to be needed in another
** field.
*******************************************************************************/
public class FieldRule implements Serializable
{
private FieldRuleTrigger trigger;
private String sourceField;
private FieldRuleAction action;
private String targetField;
/*******************************************************************************
** Getter for trigger
*******************************************************************************/
public FieldRuleTrigger getTrigger()
{
return (this.trigger);
}
/*******************************************************************************
** Setter for trigger
*******************************************************************************/
public void setTrigger(FieldRuleTrigger trigger)
{
this.trigger = trigger;
}
/*******************************************************************************
** Fluent setter for trigger
*******************************************************************************/
public FieldRule withTrigger(FieldRuleTrigger trigger)
{
this.trigger = trigger;
return (this);
}
/*******************************************************************************
** Getter for sourceField
*******************************************************************************/
public String getSourceField()
{
return (this.sourceField);
}
/*******************************************************************************
** Setter for sourceField
*******************************************************************************/
public void setSourceField(String sourceField)
{
this.sourceField = sourceField;
}
/*******************************************************************************
** Fluent setter for sourceField
*******************************************************************************/
public FieldRule withSourceField(String sourceField)
{
this.sourceField = sourceField;
return (this);
}
/*******************************************************************************
** Getter for action
*******************************************************************************/
public FieldRuleAction getAction()
{
return (this.action);
}
/*******************************************************************************
** Setter for action
*******************************************************************************/
public void setAction(FieldRuleAction action)
{
this.action = action;
}
/*******************************************************************************
** Fluent setter for action
*******************************************************************************/
public FieldRule withAction(FieldRuleAction action)
{
this.action = action;
return (this);
}
/*******************************************************************************
** Getter for targetField
*******************************************************************************/
public String getTargetField()
{
return (this.targetField);
}
/*******************************************************************************
** Setter for targetField
*******************************************************************************/
public void setTargetField(String targetField)
{
this.targetField = targetField;
}
/*******************************************************************************
** Fluent setter for targetField
*******************************************************************************/
public FieldRule withTargetField(String targetField)
{
this.targetField = targetField;
return (this);
}
}

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

@ -0,0 +1,31 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2024. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
package com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules;
/*******************************************************************************
** possible actions associated with field rules
*******************************************************************************/
public enum FieldRuleAction
{
CLEAR_TARGET_FIELD
}

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

@ -0,0 +1,31 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2024. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
package com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules;
/*******************************************************************************
** possible triggers associated with field rules
*******************************************************************************/
public enum FieldRuleTrigger
{
ON_CHANGE
}

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

@ -0,0 +1,59 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2024. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
package com.kingsrook.qqq.frontend.materialdashboard.savedreports;
import java.util.List;
import com.kingsrook.qqq.backend.core.model.metadata.tables.QTableMetaData;
import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.MaterialDashboardTableMetaData;
import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRule;
import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRuleAction;
import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRuleTrigger;
/*******************************************************************************
** Add frontend material dashboard enhacements to saved report table
*******************************************************************************/
public class SavedReportTableFrontendMaterialDashboardEnricher
{
/*******************************************************************************
**
*******************************************************************************/
public static void enrich(QTableMetaData tableMetaData)
{
MaterialDashboardTableMetaData materialDashboardTableMetaData = MaterialDashboardTableMetaData.ofOrWithNew(tableMetaData);
/////////////////////////////////////////////////////////////////////////
// make changes to the tableName field clear the value in these fields //
/////////////////////////////////////////////////////////////////////////
for(String targetField : List.of("queryFilterJson", "columnsJson", "pivotTableJson"))
{
materialDashboardTableMetaData.withFieldRule(new FieldRule()
.withSourceField("tableName")
.withTrigger(FieldRuleTrigger.ON_CHANGE)
.withAction(FieldRuleAction.CLEAR_TARGET_FIELD)
.withTargetField(targetField));
}
}
}

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

@ -46,6 +46,7 @@ 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";
@ -108,6 +109,7 @@ function EntityForm(props: Props): JSX.Element
const [asyncLoadInited, setAsyncLoadInited] = useState(false);
const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
const [fieldRules, setFieldRules] = useState([] as FieldRule[]);
const [metaData, setMetaData] = useState(null as QInstance);
const [record, setRecord] = useState(null as QRecord);
const [tableSections, setTableSections] = useState(null as QTableSection[]);
@ -427,6 +429,32 @@ function EntityForm(props: Props): JSX.Element
}
/*******************************************************************************
**
*******************************************************************************/
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);
@ -435,6 +463,8 @@ function EntityForm(props: Props): JSX.Element
const tableMetaData = await qController.loadTableMetaData(tableName);
setTableMetaData(tableMetaData);
setupFieldRules(tableMetaData);
const metaData = await qController.loadMetaData();
setMetaData(metaData);
@ -929,15 +959,6 @@ function EntityForm(props: Props): JSX.Element
};
// todo - get from meta data!
const fieldRules =
[
{trigger: "onChange", sourceField: "tableName", action: "clearOtherField", targetField: "columnsJson"},
{trigger: "onChange", sourceField: "tableName", action: "clearOtherField", targetField: "queryFilterJson"},
{trigger: "onChange", sourceField: "tableName", action: "clearOtherField", targetField: "pivotTableJson"}
]
/*******************************************************************************
** process a form-field having a changed value (e.g., apply field rules).
*******************************************************************************/
@ -945,11 +966,11 @@ function EntityForm(props: Props): JSX.Element
{
for (let fieldRule of fieldRules)
{
if(fieldRule.trigger == "onChange" && fieldRule.sourceField == fieldName)
if(fieldRule.trigger == FieldRuleTrigger.ON_CHANGE && fieldRule.sourceField == fieldName)
{
switch (fieldRule.action)
{
case "clearOtherField":
case FieldRuleAction.CLEAR_TARGET_FIELD:
console.log(`Clearing value from [${fieldRule.targetField}] due to change in [${fieldName}]`);
valueChangesToMake[fieldRule.targetField] = null;
break;

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

@ -23,7 +23,9 @@
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, useState} from "react";
@ -33,14 +35,16 @@ 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
variant?: "standard" | "filled" | "outlined";
label?: string;
textFieldSX?: any;
autocompleteSlotProps?: any;
hasError?: boolean;
}
FieldAutoComplete.defaultProps =
@ -53,6 +57,8 @@ FieldAutoComplete.defaultProps =
variant: "standard",
label: "Field",
textFieldSX: null,
autocompleteSlotProps: null,
hasError: false,
};
function makeFieldOptionsForTable(tableMetaData: QTableMetaData, fieldOptions: any[], isJoinTable: boolean, hiddenFieldNames: string[], availableFieldNames: string[], selectedFieldName: string)
@ -62,12 +68,12 @@ function makeFieldOptionsForTable(tableMetaData: QTableMetaData, fieldOptions: a
{
const fieldName = isJoinTable ? `${tableMetaData.name}.${sortedFields[i].name}` : sortedFields[i].name;
if(hiddenFieldNames && hiddenFieldNames.indexOf(fieldName) > -1 && fieldName != selectedFieldName)
if (hiddenFieldNames && hiddenFieldNames.indexOf(fieldName) > -1 && fieldName != selectedFieldName)
{
continue;
}
if(availableFieldNames && availableFieldNames.indexOf(fieldName) == -1)
if (availableFieldNames && availableFieldNames.indexOf(fieldName) == -1)
{
continue;
}
@ -80,9 +86,9 @@ function makeFieldOptionsForTable(tableMetaData: QTableMetaData, fieldOptions: a
/*******************************************************************************
** 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}: FieldAutoCompleteProps): JSX.Element
export default function FieldAutoComplete({id, metaData, tableMetaData, handleFieldChange, defaultValue, autoFocus, forceOpen, hiddenFieldNames, availableFieldNames, variant, label, textFieldSX, autocompleteSlotProps, hasError}: FieldAutoCompleteProps): JSX.Element
{
const [selectedFieldName, setSelectedFieldName] = useState(defaultValue ? defaultValue.fieldName : null)
const [selectedFieldName, setSelectedFieldName] = useState(defaultValue ? defaultValue.fieldName : null);
const fieldOptions: any[] = [];
makeFieldOptionsForTable(tableMetaData, fieldOptions, false, hiddenFieldNames, availableFieldNames, selectedFieldName);
@ -149,8 +155,8 @@ 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;
}
@ -161,14 +167,24 @@ export default function FieldAutoComplete({id, metaData, tableMetaData, handleFi
*******************************************************************************/
function onChange(event: any, newValue: any, reason: string)
{
setSelectedFieldName(newValue ? newValue.fieldName : null)
setSelectedFieldName(newValue ? newValue.fieldName : null);
handleFieldChange(event, newValue, reason);
}
return (
<Autocomplete
id={id}
renderInput={(params) => (<TextField {...params} autoFocus={autoFocus} label={label} variant={variant} sx={textFieldSX} 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}
@ -179,7 +195,7 @@ export default function FieldAutoComplete({id, metaData, tableMetaData, handleFi
renderOption={(props, option, state) => renderFieldOption(props, option, state)}
autoSelect={true}
autoHighlight={true}
slotProps={{popper: {className: "filterCriteriaRowColumnPopper", style: {padding: 0, width: "250px"}}}}
slotProps={autocompleteSlotProps ?? {}}
{...alsoOpen}
/>

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

@ -431,9 +431,12 @@ 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>
{
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.</>}>
@ -471,6 +474,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>
@ -479,7 +483,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
</Tooltip>
}
{
hasSavedReportsPermission &&
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>
@ -487,7 +491,9 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
</MenuItem>
</Tooltip>
}
<Divider/>
{
isQueryScreen && <Divider/>
}
<MenuItem disabled style={{"opacity": "initial"}}><b>Your Saved Views</b></MenuItem>
{
savedViews && savedViews.length > 0 ? (
@ -497,7 +503,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>
)
@ -606,7 +612,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
}
</ul>
</>}>
<Button disableRipple={true} sx={linkButtonStyle} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>{queryScreenUsage} Save View As&hellip;</Button>
<Button disableRipple={true} sx={linkButtonStyle} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>Save View As&hellip;</Button>
</Tooltip>
{/* vertical rule */}
@ -618,7 +624,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
</>
}
{
currentSavedView && viewIsModified && <>
isQueryScreen && currentSavedView && viewIsModified && <>
<Tooltip {...tooltipMaxWidth("24rem")} sx={{cursor: "pointer"}} title={<>
<b>Unsaved Changes</b>
<ul style={{padding: "0.5rem 1rem"}}>
@ -637,6 +643,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>
{

2
src/qqq/components/query/AdvancedQueryPreview.tsx
View File

@ -138,7 +138,7 @@ export default function AdvancedQueryPreview({tableMetaData, queryFilter, isEdit
display="inline-block"
width="100%"
sx={{fontSize: "1rem", background: "#FFFFFF"}}
minHeight={"2.375rem"}
minHeight={"2.5rem"}
p={"0.5rem"}
pb={"0.125rem"}
{...moreSX}

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

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

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

@ -206,9 +206,16 @@ interface HeaderToggleComponentProps
label: string;
getValue: () => boolean;
onClickCallback: () => void;
disabled?: boolean;
disabledTooltip?: string;
}
export function HeaderToggleComponent({label, getValue, onClickCallback}: HeaderToggleComponentProps): JSX.Element
HeaderToggleComponent.defaultProps = {
disabled: false,
disabledTooltip: null
};
export function HeaderToggleComponent({label, getValue, onClickCallback, disabled, disabledTooltip}: HeaderToggleComponentProps): JSX.Element
{
const onClick = () =>
{
@ -217,9 +224,13 @@ export function HeaderToggleComponent({label, getValue, onClickCallback}: Header
return (
<Box alignItems="baseline" mr="-0.75rem">
<InputLabel sx={{fontSize: "1.125rem", px: "0 !important", cursor: "pointer"}} unselectable="on">
{label} <Switch checked={getValue()} onClick={onClick} />
</InputLabel>
<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>
);
}

8
src/qqq/components/widgets/misc/PivotTableGroupByElement.tsx
View File

@ -51,6 +51,7 @@ export interface PivotTableGroupByElementProps
groupBy: PivotTableGroupBy;
rowsOrColumns: "rows" | "columns";
callback: () => void;
attemptedSubmit?: boolean;
}
@ -67,7 +68,7 @@ interface DragItem
/*******************************************************************************
**
*******************************************************************************/
export const PivotTableGroupByElement: FC<PivotTableGroupByElementProps> = ({id, index, dragCallback, rowsOrColumns, metaData, tableMetaData, pivotTableDefinition, groupBy, usedGroupByFieldNames, availableFieldNames, isEditable, callback}) =>
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 //
@ -171,7 +172,7 @@ export const PivotTableGroupByElement: FC<PivotTableGroupByElementProps> = ({id,
if (selectedField)
{
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">{label}</Box>);
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 />);
@ -179,6 +180,8 @@ export const PivotTableGroupByElement: FC<PivotTableGroupByElementProps> = ({id,
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>
@ -195,6 +198,7 @@ export const PivotTableGroupByElement: FC<PivotTableGroupByElementProps> = ({id,
hiddenFieldNames={usedGroupByFieldNames}
availableFieldNames={availableFieldNames}
defaultValue={getSelectedFieldForAutoComplete(tableMetaData, groupBy.fieldName)}
hasError={showError}
/>
</Box>
<Box>

572
src/qqq/components/widgets/misc/PivotTableSetupWidget.tsx
View File

@ -23,19 +23,25 @@
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";
@ -52,22 +58,6 @@ export const DragItemTypes =
VALUE: "value"
};
export const buttonSX =
{
border: `1px solid ${colors.grayLines.main} !important`,
borderRadius: "0.75rem",
textTransform: "none",
fontSize: "1rem",
fontWeight: "400",
width: "160px",
paddingLeft: 0,
paddingRight: 0,
color: colors.dark.main,
"&:hover": {color: colors.dark.main},
"&:focus": {color: colors.dark.main},
"&:focus:not(:hover)": {color: colors.dark.main},
};
export const xIconButtonSX =
{
border: `1px solid ${colors.grayLines.main} !important`,
@ -139,11 +129,20 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
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);
const [pivotTableDefinition, setPivotTableDefinition] = useState(null as PivotTableDefinition);
///////////////////////////////////////////////////////////////////////////////////
// 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 [availableFieldNames, setAvailableFieldNames] = useState([] as string[]);
@ -195,9 +194,9 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
updateUsedGroupByFieldNames(originalPivotTableDefinition);
}
if(recordValues["columnsJson"])
if (recordValues["columnsJson"])
{
updateAvailableFieldNames(JSON.parse(recordValues["columnsJson"]) as QQueryColumns)
updateAvailableFieldNames(JSON.parse(recordValues["columnsJson"]) as QQueryColumns);
}
(async () =>
@ -251,6 +250,11 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
const newEnabled = !!!getEnabled();
setEnabled(newEnabled);
onSaveCallback({usePivotTable: newEnabled});
if (!newEnabled)
{
onSaveCallback({pivotTableJson: null});
}
}
@ -268,13 +272,13 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
*******************************************************************************/
function addGroupBy(rowsOrColumns: "rows" | "columns")
{
if (!pivotTableDefinition[rowsOrColumns])
if (!modalPivotTableDefinition[rowsOrColumns])
{
pivotTableDefinition[rowsOrColumns] = [];
modalPivotTableDefinition[rowsOrColumns] = [];
}
pivotTableDefinition[rowsOrColumns].push(new PivotTableGroupBy());
onSaveCallback({pivotTableJson: JSON.stringify(pivotTableDefinition)});
modalPivotTableDefinition[rowsOrColumns].push(new PivotTableGroupBy());
validateForm()
forceUpdate();
}
@ -284,8 +288,8 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
*******************************************************************************/
function groupByChangedCallback()
{
onSaveCallback({pivotTableJson: JSON.stringify(pivotTableDefinition)});
updateUsedGroupByFieldNames();
updateUsedGroupByFieldNames(modalPivotTableDefinition);
validateForm()
forceUpdate();
}
@ -295,13 +299,13 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
*******************************************************************************/
function addValue()
{
if (!pivotTableDefinition.values)
if (!modalPivotTableDefinition.values)
{
pivotTableDefinition.values = [];
modalPivotTableDefinition.values = [];
}
pivotTableDefinition.values.push(new PivotTableValue());
onSaveCallback({pivotTableJson: JSON.stringify(pivotTableDefinition)});
modalPivotTableDefinition.values.push(new PivotTableValue());
validateForm()
forceUpdate();
}
@ -311,8 +315,8 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
*******************************************************************************/
function removeValue(index: number)
{
pivotTableDefinition.values.splice(index, 1);
onSaveCallback({pivotTableJson: JSON.stringify(pivotTableDefinition)});
modalPivotTableDefinition.values.splice(index, 1);
validateForm()
forceUpdate();
}
@ -346,7 +350,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
const fieldNames: string[] = [];
for (let i = 0; i < columns?.columns?.length; i++)
{
if(columns.columns[i].isVisible)
if (columns.columns[i].isVisible)
{
fieldNames.push(columns.columns[i].name);
}
@ -375,13 +379,11 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
const handleFieldChange = (event: any, newValue: any, reason: string) =>
{
value.fieldName = newValue ? newValue.fieldName : null;
onSaveCallback({pivotTableJson: JSON.stringify(pivotTableDefinition)});
};
const handleFunctionChange = (event: any, newValue: any, reason: string) =>
{
value.function = newValue ? newValue.id : null;
onSaveCallback({pivotTableJson: JSON.stringify(pivotTableDefinition)});
};
const functionOptions: any[] = [];
@ -446,14 +448,13 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
*******************************************************************************/
const moveGroupBy = useCallback((rowsOrColumns: "rows" | "columns", dragIndex: number, hoverIndex: number) =>
{
const array = pivotTableDefinition[rowsOrColumns];
const array = modalPivotTableDefinition[rowsOrColumns];
const dragItem = array[dragIndex];
array.splice(dragIndex, 1);
array.splice(hoverIndex, 0, dragItem);
onSaveCallback({pivotTableJson: JSON.stringify(pivotTableDefinition)});
forceUpdate();
}, [pivotTableDefinition]);
}, [modalPivotTableDefinition]);
/*******************************************************************************
@ -461,183 +462,388 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
*******************************************************************************/
const moveValue = useCallback((dragIndex: number, hoverIndex: number) =>
{
const array = pivotTableDefinition.values;
const array = modalPivotTableDefinition.values;
const dragItem = array[dragIndex];
array.splice(dragIndex, 1);
array.splice(hoverIndex, 0, dragItem);
onSaveCallback({pivotTableJson: JSON.stringify(pivotTableDefinition)});
forceUpdate();
}, [pivotTableDefinition]);
}, [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 label="Use Pivot Table?" getValue={() => enabled} onClickCallback={toggleEnabled} />);
labelAdditionalElementsRight.push(<HeaderToggleComponent disabled={editPopupDisabled} disabledTooltip={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle} label="Use Pivot Table?" getValue={() => enabled} onClickCallback={toggleEnabled} />);
}
const selectTableFirstTooltipTitle = tableMetaData ? null : "You must select a table before you can set up a pivot table";
/*******************************************************************************
** render a group-by (row or column)
*******************************************************************************/
const renderGroupBy = useCallback(
(groupBy: PivotTableGroupBy, rowsOrColumns: "rows" | "columns", index: number) =>
{
return (
<PivotTableGroupByElement
key={groupBy.fieldName}
index={index}
id={`${groupBy.key}`}
dragCallback={moveGroupBy}
metaData={metaData}
tableMetaData={tableMetaData}
pivotTableDefinition={pivotTableDefinition}
usedGroupByFieldNames={usedGroupByFieldNames}
availableFieldNames={availableFieldNames}
isEditable={isEditable}
groupBy={groupBy}
rowsOrColumns={rowsOrColumns}
callback={groupByChangedCallback}
/>
);
},
[tableMetaData, usedGroupByFieldNames, availableFieldNames],
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}
availableFieldNames={availableFieldNames}
isEditable={isEditable && forModal}
groupBy={groupBy}
rowsOrColumns={rowsOrColumns}
callback={groupByChangedCallback}
attemptedSubmit={attemptedSubmit}
/>
);
},
[tableMetaData, usedGroupByFieldNames, availableFieldNames],
);
/*******************************************************************************
** render a pivot-table value (row or column)
*******************************************************************************/
const renderValue = useCallback(
(value: PivotTableValue, index: number) =>
{
return (
<PivotTableValueElement
key={value.key}
index={index}
id={`${value.key}`}
dragCallback={moveValue}
metaData={metaData}
tableMetaData={tableMetaData}
pivotTableDefinition={pivotTableDefinition}
availableFieldNames={availableFieldNames}
isEditable={isEditable}
value={value}
callback={groupByChangedCallback}
/>
);
},
[tableMetaData, usedGroupByFieldNames, availableFieldNames],
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}
isEditable={isEditable && forModal}
value={value}
callback={groupByChangedCallback}
attemptedSubmit={attemptedSubmit}
/>
);
},
[tableMetaData, usedGroupByFieldNames, availableFieldNames],
);
return (<Widget widgetMetaData={widgetMetaData} labelAdditionalElementsRight={labelAdditionalElementsRight}>
{enabled && pivotTableDefinition &&
<DndProvider backend={HTML5Backend}>
/*******************************************************************************
**
*******************************************************************************/
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">
{
showHelp("sectionSubhead") &&
<Box color={colors.gray.main} pb={"0.5rem"} fontSize={"0.875rem"}>
{getHelpContent("sectionSubhead")}
</Box>
tableMetaData && (<div>{ptd[rowsOrColumns]?.map((groupBy, i) => renderGroupBy(groupBy, rowsOrColumns, i, forModal))}</div>)
}
<Grid container spacing="16">
<Grid item lg={4} md={6} xs={12}>
<h5>Rows</h5>
<Box fontSize="1rem">
{
tableMetaData && (<div>{pivotTableDefinition?.rows?.map((row, i) => renderGroupBy(row, "rows", i))}</div>)
}
</Box>
{
isEditable &&
<Box mt="0.375rem">
<Tooltip title={selectTableFirstTooltipTitle}>
<span><Button disabled={tableMetaData == null} sx={buttonSX} onClick={() => addGroupBy("rows")}>+ Add new row</Button></span>
</Tooltip>
</Box>
}
</Grid>
<Grid item lg={4} md={6} xs={12}>
<h5>Columns</h5>
<Box fontSize="1rem">
{
tableMetaData && (<div>{pivotTableDefinition?.columns?.map((column, i) => renderGroupBy(column, "columns", i))}</div>)
}
</Box>
{
isEditable &&
<Box mt="0.375rem">
<Tooltip title={selectTableFirstTooltipTitle}>
<span><Button disabled={tableMetaData == null} sx={buttonSX} onClick={() => addGroupBy("columns")}>+ Add new column</Button></span>
</Tooltip>
</Box>
}
</Grid>
<Grid item lg={4} md={6} xs={12}>
<h5>Values</h5>
<Box fontSize="1rem">
{
tableMetaData && (<div>{pivotTableDefinition?.values?.map((value, i) => renderValue(value, i))}</div>)
}
</Box>
{
isEditable &&
<Box mt="0.375rem">
<Tooltip title={selectTableFirstTooltipTitle}>
<span><Button disabled={tableMetaData == null} sx={buttonSX} onClick={addValue}>+ Add new value</Button></span>
</Tooltip>
</Box>
}
</Grid>
</Grid>
{/*
<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>
{
(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>
*/}
</DndProvider>
}
{
!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);
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>
*/

135
src/qqq/components/widgets/misc/PivotTableValueElement.tsx
View File

@ -20,6 +20,8 @@
*/
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";
@ -31,8 +33,8 @@ 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, PivotTableFunction, pivotTableFunctionLabels, PivotTableValue} from "qqq/models/misc/PivotTableDefinitionModels";
import React, {FC, useRef} from "react";
import {functionsPerFieldType, PivotTableDefinition, pivotTableFunctionLabels, PivotTableValue} from "qqq/models/misc/PivotTableDefinitionModels";
import React, {FC, useReducer, useRef, useState} from "react";
import {useDrag, useDrop} from "react-dnd";
@ -51,6 +53,7 @@ export interface PivotTableValueElementProps
isEditable: boolean;
value: PivotTableValue;
callback: () => void;
attemptedSubmit?: boolean;
}
@ -68,8 +71,11 @@ interface DragItem
/*******************************************************************************
** Element to render 1 pivot-table value.
*******************************************************************************/
export const PivotTableValueElement: FC<PivotTableValueElementProps> = ({id, index, dragCallback, metaData, tableMetaData, pivotTableDefinition, availableFieldNames, value, isEditable, callback}) =>
export const PivotTableValueElement: FC<PivotTableValueElementProps> = ({id, index, dragCallback, metaData, tableMetaData, pivotTableDefinition, availableFieldNames, 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 //
////////////////////////////////////////////////////////////////////////////
@ -147,24 +153,68 @@ export const PivotTableValueElement: FC<PivotTableValueElementProps> = ({id, ind
});
/*******************************************************************************
**
*******************************************************************************/
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
*******************************************************************************/
const handleFieldChange = (event: any, newValue: any, reason: string) =>
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
*******************************************************************************/
const handleFunctionChange = (event: any, newValue: any, reason: string) =>
function handleFunctionChange(event: any, newValue: any, reason: string)
{
value.function = newValue ? newValue.id : null;
callback();
};
}
/*******************************************************************************
@ -176,65 +226,43 @@ export const PivotTableValueElement: FC<PivotTableValueElementProps> = ({id, ind
callback();
}
const selectedField = getSelectedFieldForAutoComplete(tableMetaData, value.fieldName);
/////////////////////////////////////////////////////////////////////
// if we're not on an edit screen, return a simpler read-only view //
/////////////////////////////////////////////////////////////////////
if (!isEditable)
{
const selectedField = getSelectedFieldForAutoComplete(tableMetaData, value.fieldName);
let label = "--";
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>);
label = pivotTableFunctionLabels[value.function] + " of " + (selectedField.table.name == tableMetaData.name ? selectedField.field.label : selectedField.table.label + ": " + selectedField.field.label);
}
return (<React.Fragment />);
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[] = [];
let defaultFunctionValue = null;
for (let pivotTableFunctionKey in PivotTableFunction)
const availableFunctions = getFunctionsForField(selectedField?.field);
for (let pivotTableFunction of availableFunctions)
{
// @ts-ignore any?
const label = "" + pivotTableFunctionLabels[pivotTableFunctionKey];
const option = {id: pivotTableFunctionKey, label: label};
const label = pivotTableFunctionLabels[pivotTableFunction];
const option = {id: pivotTableFunction, label: label};
functionOptions.push(option);
if (option.id == value.function)
if (option.id == value.function && JSON.stringify(option) != JSON.stringify(defaultFunctionValue))
{
defaultFunctionValue = option;
setDefaultFunctionValue(option);
}
}
drag(drop(ref));
/*
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 sx={{whiteSpace: "nowrap"}}>
<Icon 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}
defaultValue={getSelectedFieldForAutoComplete(tableMetaData, groupBy.fieldName)}
/>
</Box>
<Box>
<Button sx={xIconButtonSX} onClick={() => removeGroupBy(index, rowsOrColumns)}><Icon>clear</Icon></Button>
</Box>
</Box>);
*/
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>
@ -250,25 +278,34 @@ export const PivotTableValueElement: FC<PivotTableValueElementProps> = ({id, ind
tableMetaData={tableMetaData}
handleFieldChange={handleFieldChange}
availableFieldNames={availableFieldNames}
defaultValue={getSelectedFieldForAutoComplete(tableMetaData, value.fieldName)}
defaultValue={selectedField}
hasError={showValueError}
/>
</Box>
<Box width="330px">
<Box width="370px">
<Autocomplete
id={`values-field-${index}`}
renderInput={(params) => (<TextField {...params} label={null} variant="outlined" sx={fieldAutoCompleteTextFieldSX} autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
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
defaultValue={defaultFunctionValue}
value={defaultFunctionValue}
inputValue={defaultFunctionValue?.label ?? ""}
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>

39
src/qqq/components/widgets/misc/ReportSetupWidget.tsx
View File

@ -25,8 +25,8 @@ import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Q
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 Link from "@mui/material/Link";
import Modal from "@mui/material/Modal";
import Tooltip from "@mui/material/Tooltip/Tooltip";
import QContext from "QContext";
@ -53,6 +53,27 @@ 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();
/*******************************************************************************
@ -126,6 +147,9 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
// @ts-ignore possibly 'undefined'.
const view = recordQueryRef?.current?.getCurrentView();
view.queryColumns.sortColumnsFixingPinPositions();
onSaveCallback({queryFilterJson: JSON.stringify(view.queryFilter), columnsJson: JSON.stringify(view.queryColumns)});
closeEditor();
@ -189,9 +213,12 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
{
if(tableMetaData)
{
if(columns?.columns?.length > 0)
for(let i = 0; i<columns?.columns?.length; i++)
{
return (true);
if(columns.columns[i].isVisible && columns.columns[i].name != "__check__")
{
return (true);
}
}
}
@ -252,7 +279,7 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
{
isEditable &&
<Tooltip title={selectTableFirstTooltipTitle}>
<Link sx={{cursor: "pointer"}} onClick={openEditor} color={colors.gray.main}>+ Add Filters</Link>
<span><Button disabled={!recordValues["tableName"]} sx={{mb: "0.125rem", ...unborderedButtonSX}} onClick={openEditor}>+ Add Filters</Button></span>
</Tooltip>
}
{
@ -274,11 +301,11 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
{
isEditable &&
<Tooltip title={selectTableFirstTooltipTitle}>
<Link sx={{cursor: "pointer"}} onClick={openEditor} color={colors.gray.main}>+ Add Columns</Link>
<span><Button disabled={!recordValues["tableName"]} sx={unborderedButtonSX} onClick={openEditor}>+ Add Columns</Button></span>
</Tooltip>
}
{
!isEditable && <Box color={colors.gray.main}>Your report has no filters.</Box>
!isEditable && <Box color={colors.gray.main}>Your report has no columns.</Box>
}
</Box>
}

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

@ -0,0 +1,50 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2024. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
/*******************************************************************************
**
*******************************************************************************/
export interface FieldRule
{
trigger: FieldRuleTrigger;
sourceField: string;
action: FieldRuleAction;
targetField: string;
}
/*******************************************************************************
**
*******************************************************************************/
export enum FieldRuleTrigger
{
ON_CHANGE = "ON_CHANGE"
}
/*******************************************************************************
**
*******************************************************************************/
export enum FieldRuleAction
{
CLEAR_TARGET_FIELD = "CLEAR_TARGET_FIELD"
}

64
src/qqq/models/misc/PivotTableDefinitionModels.ts
View File

@ -19,6 +19,8 @@
* 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,
@ -30,7 +32,7 @@ export class PivotObjectKey
static next(): number
{
return PivotObjectKey.value++
return PivotObjectKey.value++;
}
}
@ -56,7 +58,7 @@ export class PivotTableGroupBy
constructor()
{
this.key = PivotObjectKey.next()
this.key = PivotObjectKey.next();
}
}
@ -73,43 +75,85 @@ export class PivotTableValue
constructor()
{
this.key = PivotObjectKey.next()
this.key = PivotObjectKey.next();
}
}
/*******************************************************************************
** Functions that can be appplied to pivot table values
** Functions that can be applied to pivot table values
*******************************************************************************/
export enum PivotTableFunction
{
AVERAGE = "AVERAGE",
SUM = "SUM",
COUNT = "COUNT",
COUNT_NUMS = "COUNT_NUMS",
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",
SUM = "SUM",
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",
"COUNT": "Count Values (COUNTA)",
"COUNT_NUMS": "Count Numbers (COUNT)",
"MAX": "Max",
"MIN": "Min",
"PRODUCT": "Product",
// "COUNT_NUMS": "Count Numbers",
"STD_DEV": "StdDev",
"STD_DEVP": "StdDevp",
"SUM": "Sum",
"VAR": "Var",
"VARP": "Varp"
};

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

@ -80,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);
}
});
@ -392,6 +400,42 @@ export default class QQueryColumns
return columnVisibilityModel;
};
/*******************************************************************************
** sort the columns list, so that pinned columns go to the front (left) or back
** (right) of the list.
*******************************************************************************/
public sortColumnsFixingPinPositions = (): void =>
{
/////////////////////////////////////////////////////////////////////////////////////////////
// do a sort to push pinned-left columns to the start, and pinned-right columns to the end //
// and otherwise, leave everything alone //
/////////////////////////////////////////////////////////////////////////////////////////////
this.columns = this.columns.sort((a: Column, b: Column) =>
{
if(a.pinned == "left" && b.pinned != "left")
{
return -1;
}
else if(b.pinned == "left" && a.pinned != "left")
{
return 1;
}
else if(a.pinned == "right" && b.pinned != "right")
{
return 1;
}
else if(b.pinned == "right" && a.pinned != "right")
{
return -1;
}
else
{
return (0);
}
});
}
}

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

@ -105,8 +105,13 @@ const qController = Client.getInstance();
** function to produce standard version of the screen while we're "loading"
** like the main table meta data etc.
*******************************************************************************/
const getLoadingScreen = () =>
const getLoadingScreen = (isModal: boolean) =>
{
if(isModal)
{
return (<Box>&nbsp;</Box>);
}
return (<BaseLayout>
&nbsp;
</BaseLayout>);
@ -2549,7 +2554,7 @@ const RecordQuery = forwardRef(({table, usage, isModal}: Props, ref) =>
promptForTableVariantSelection();
}
return (getLoadingScreen());
return (getLoadingScreen(isModal));
}
////////////////////////////////////////////////////////////////////////
@ -2583,7 +2588,7 @@ const RecordQuery = forwardRef(({table, usage, isModal}: Props, ref) =>
setRows([]);
setIsFirstRenderAfterChangingTables(true);
return (getLoadingScreen());
return (getLoadingScreen(isModal));
}
/////////////////////////////////////////////////////////////////////////////////////////////
@ -2627,7 +2632,7 @@ const RecordQuery = forwardRef(({table, usage, isModal}: Props, ref) =>
if (pageState != "ready")
{
console.log(`page state is ${pageState}... no-op while those complete async's run...`);
return (getLoadingScreen());
return (getLoadingScreen(isModal));
}
///////////////////////////////////////////////////////////////////////////////////////////
@ -2636,7 +2641,7 @@ const RecordQuery = forwardRef(({table, usage, isModal}: Props, ref) =>
///////////////////////////////////////////////////////////////////////////////////////////
if (!tableMetaData)
{
return (getLoadingScreen());
return (getLoadingScreen(isModal));
}
let savedViewsComponent = null;