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

Merged main into feature/CE-881-create-basic-saved-reports

Browse Source
This commit is contained in:
darin.kelkhoff
2024-04-18 09:12:27 -05:00
parent a84b0a0243 727990ed4b
commit 362c528514
22 changed files with 1717 additions and 1140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -94,7 +94,7 @@ function EntityForm(props: Props): JSX.Element
const qController = Client.getInstance();
const tableNameParam = useParams().tableName;
const tableName = props.table === null ? tableNameParam : props.table.name;
const {accentColor} = useContext(QContext);
const {accentColor, recordAnalytics} = useContext(QContext);
const [formTitle, setFormTitle] = useState("");
const [validations, setValidations] = useState({});
@ -462,6 +462,7 @@ function EntityForm(props: Props): JSX.Element
{
const tableMetaData = await qController.loadTableMetaData(tableName);
setTableMetaData(tableMetaData);
recordAnalytics({location: window.location, title: (props.isCopy ? "Copy" : props.id ? "Edit" : "New") + ": " + tableMetaData.label});
setupFieldRules(tableMetaData);
@ -508,6 +509,7 @@ function EntityForm(props: Props): JSX.Element
{
record = await qController.get(tableName, props.id);
setRecord(record);
recordAnalytics({category: "tableEvents", action: props.isCopy ? "copy" : "edit", label: tableMetaData?.label + " / " + record?.recordLabel});
const titleVerb = props.isCopy ? "Copy" : "Edit";
setFormTitle(`${titleVerb} ${tableMetaData?.label}: ${record?.recordLabel}`);
@ -547,6 +549,7 @@ function EntityForm(props: Props): JSX.Element
// else handle preparing to do an insert //
///////////////////////////////////////////
setFormTitle(`Creating New ${tableMetaData?.label}`);
recordAnalytics({category: "tableEvents", action: "new", label: tableMetaData?.label});
if (!props.isModal)
{
@ -871,6 +874,8 @@ function EntityForm(props: Props): JSX.Element
if (props.id !== null && !props.isCopy)
{
recordAnalytics({category: "tableEvents", action: "saveEdit", label: tableMetaData?.label});
///////////////////////
// perform an update //
///////////////////////
@ -913,6 +918,8 @@ function EntityForm(props: Props): JSX.Element
}
else
{
recordAnalytics({category: "tableEvents", action: props.isCopy ? "saveCopy" : "saveNew", label: tableMetaData?.label});
/////////////////////////////////
// perform an insert //
// todo - audit if it's a dupe //

7
src/qqq/components/query/ExportMenuItem.tsx
View File

@ -23,8 +23,9 @@ import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QT
import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
import MenuItem from "@mui/material/MenuItem";
import {GridColDef, GridExportMenuItemProps} from "@mui/x-data-grid-pro";
import React from "react";
import QContext from "QContext";
import ValueUtils from "qqq/utils/qqq/ValueUtils";
import React, {useContext} from "react";
interface QExportMenuItemProps extends GridExportMenuItemProps<{}>
{
@ -43,6 +44,10 @@ export default function ExportMenuItem(props: QExportMenuItemProps)
{
const {format, tableMetaData, totalRecords, columnsModel, columnVisibilityModel, queryFilter, hideMenu} = props;
const {recordAnalytics} = useContext(QContext);
recordAnalytics({category: "tableEvents", action: "export", label: tableMetaData.label});
return (
<MenuItem
disabled={totalRecords === 0}

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

@ -21,6 +21,7 @@
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import {Skeleton} from "@mui/material";
import {Alert, Skeleton} from "@mui/material";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import Tab from "@mui/material/Tab";
@ -95,9 +96,9 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
let initialSelectedTab = 0;
let selectedTabKey: string = null;
if(parentWidgetMetaData && wrapWidgetsInTabPanels)
if (parentWidgetMetaData && wrapWidgetsInTabPanels)
{
selectedTabKey = `qqq.widgets.selectedTabs.${parentWidgetMetaData.name}`
selectedTabKey = `qqq.widgets.selectedTabs.${parentWidgetMetaData.name}`;
if (localStorage.getItem(selectedTabKey))
{
initialSelectedTab = Number(localStorage.getItem(selectedTabKey));
@ -195,7 +196,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
const metaDataToUse = (thisWidgetHasDropdowns) ? widgetMetaData : parentWidgetMetaData;
for (let i = 0; i < metaDataToUse.dropdowns.length; i++)
{
const dropdownName = metaDataToUse.dropdowns[i].possibleValueSourceName;
const dropdownName = metaDataToUse.dropdowns[i].possibleValueSourceName ?? metaDataToUse.dropdowns[i].name;
const localStorageKey = `${WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT}.${metaDataToUse.name}.${dropdownName}`;
const json = JSON.parse(localStorage.getItem(localStorageKey));
if (json)
@ -307,6 +308,21 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
/>
)
}
{
widgetMetaData.type === "alert" && widgetData[i]?.html && (
<Widget
omitPadding={true}
widgetMetaData={widgetMetaData}
widgetData={widgetData[i]}
reloadWidgetCallback={(data) => reloadWidget(i, data)}
isChild={areChildren}
labelAdditionalComponentsRight={labelAdditionalComponentsRight}
labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
>
<Alert severity={widgetData[i]?.alertType?.toLowerCase()}>{parse(widgetData[i]?.html)}</Alert>
</Widget>
)
}
{
widgetMetaData.type === "usaMap" && (
<USMapWidget
@ -585,7 +601,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
);
};
if(wrapWidgetsInTabPanels)
if (wrapWidgetsInTabPanels)
{
omitWrappingGridContainer = true;
}
@ -617,7 +633,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
</TabPanel>);
}
return (<React.Fragment key={`${widgetMetaData.name}-${i}`}>{renderedWidget}</React.Fragment>)
return (<React.Fragment key={`${widgetMetaData.name}-${i}`}>{renderedWidget}</React.Fragment>);
})
}
</>
@ -625,7 +641,8 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
const tabs = widgetMetaDataList && wrapWidgetsInTabPanels ?
<Tabs
sx={{m: 0, mb: 1.5, ml: -2, mr: -2, mt: -3,
sx={{
m: 0, mb: 1.5, ml: -2, mr: -2, mt: -3,
"& .MuiTabs-scroller": {
ml: 0
}
@ -638,7 +655,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
<Tab key={widgetMetaData.name} label={widgetMetaData.label} />
))}
</Tabs>
: <></>
: <></>;
return (
widgetCount > 0 ? (

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

@ -317,12 +317,20 @@ export class Dropdown extends LabelComponent
if (localStorageOption)
{
const id = localStorageOption.id;
for (let i = 0; i < this.options.length; i++)
if (this.dropdownMetaData.type == "DATE_PICKER")
{
if (this.options[i].id == id)
defaultValue = id;
}
else
{
for (let i = 0; i < this.options.length; i++)
{
defaultValue = this.options[i];
args.dropdownData[args.componentIndex] = defaultValue?.id;
if (this.options[i].id == id)
{
defaultValue = this.options[i];
args.dropdownData[args.componentIndex] = defaultValue?.id;
}
}
}
}
@ -376,6 +384,7 @@ export class Dropdown extends LabelComponent
<Box mb={2} sx={{float: "right"}}>
<WidgetDropdownMenu
name={this.dropdownName}
type={this.dropdownMetaData.type}
defaultValue={defaultValue}
sx={{marginLeft: "1rem"}}
label={label}
@ -702,11 +711,11 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
setUsingLabelAsTitle(props.widgetData.isLabelPageTitle);
}
const helpRoles = ["ALL_SCREENS"]
const helpRoles = ["ALL_SCREENS"];
const slotName = "label";
const showHelp = helpHelpActive || hasHelpContent(props.widgetMetaData?.helpContent?.get(slotName), helpRoles);
if(showHelp)
if (showHelp)
{
const formattedHelpContent = <HelpContent helpContents={props.widgetMetaData?.helpContent?.get(slotName)} roles={helpRoles} helpContentKey={`widget:${props.widgetMetaData?.name};slot:${slotName}`} />;
labelElement = <Tooltip title={formattedHelpContent} arrow={true} placement="bottom-start">{labelElement}</Tooltip>;

2
src/qqq/components/widgets/blocks/TextBlock.tsx
View File

@ -31,7 +31,7 @@ export default function TextBlock({widgetMetaData, data}: StandardBlockComponent
{
return (
<BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
<span>{data.values.text}</span>
<span style={{fontSize: "1.000rem"}}>{data.values.text}</span>
</BlockElementWrapper>
);
}

237
src/qqq/components/widgets/components/WidgetDropdownMenu.tsx
View File

@ -19,18 +19,23 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {Collapse, Theme, InputAdornment} from "@mui/material";
import {CalendarTodayOutlined} from "@mui/icons-material";
import {Collapse, InputAdornment, Theme} from "@mui/material";
import Autocomplete from "@mui/material/Autocomplete";
import Box from "@mui/material/Box";
import Icon from "@mui/material/Icon";
import IconButton from "@mui/material/IconButton";
import TextField from "@mui/material/TextField";
import {SxProps} from "@mui/system";
import {DatePicker, DateValidationError, LocalizationProvider, PickerChangeHandlerContext, PickerValidDate} from "@mui/x-date-pickers";
import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
import dayjs from "dayjs";
import {Field, Form, Formik} from "formik";
import React, {useState} from "react";
import QContext from "QContext";
import colors from "qqq/assets/theme/base/colors";
import MDInput from "qqq/components/legacy/MDInput";
import ValueUtils from "qqq/utils/qqq/ValueUtils";
import React, {useContext, useEffect, useState} from "react";
export interface DropdownOption
@ -45,6 +50,7 @@ export interface DropdownOption
interface Props
{
name: string;
type?: string;
defaultValue?: any;
label?: string;
startIcon?: string;
@ -96,7 +102,7 @@ function makeBackendValuesFromFrontendValues(frontendDefaultValues: StartAndEndD
return (backendTimeValues);
}
function WidgetDropdownMenu({name, defaultValue, label, startIcon, width, disableClearable, allowBackAndForth, backAndForthInverted, dropdownOptions, onChangeCallback, sx}: Props): JSX.Element
function WidgetDropdownMenu({name, type, defaultValue, label, startIcon, width, disableClearable, allowBackAndForth, backAndForthInverted, dropdownOptions, onChangeCallback, sx}: Props): JSX.Element
{
const [customTimesVisible, setCustomTimesVisible] = useState(defaultValue && defaultValue.id && defaultValue.id.startsWith("custom,"));
const [customTimeValuesFrontend, setCustomTimeValuesFrontend] = useState(parseCustomTimeValuesFromDefaultValue(defaultValue) as StartAndEndDate);
@ -105,16 +111,27 @@ function WidgetDropdownMenu({name, defaultValue, label, startIcon, width, disabl
const [isOpen, setIsOpen] = useState(false);
const [value, setValue] = useState(defaultValue);
const [dateValue, setDateValue] = useState(defaultValue);
const [inputValue, setInputValue] = useState("");
const [backDisabled, setBackDisabled] = useState(false);
const [forthDisabled, setForthDisabled] = useState(false);
const {accentColor} = useContext(QContext);
const doForceOpen = (event: React.MouseEvent<HTMLDivElement>) =>
{
setIsOpen(true);
};
useEffect(() =>
{
if (type == "DATE_PICKER")
{
handleOnChange(null, defaultValue, null);
}
}, [defaultValue]);
function getSelectedIndex(value: DropdownOption)
{
let currentIndex = null;
@ -129,9 +146,19 @@ function WidgetDropdownMenu({name, defaultValue, label, startIcon, width, disabl
return currentIndex;
}
const navigateBackAndForth = (event: React.MouseEvent, direction: -1 | 1) =>
const navigateBackAndForth = (event: React.MouseEvent, direction: -1 | 1, type: string) =>
{
event.stopPropagation();
if (type == "DATE_PICKER")
{
let currentDate = new Date(dateValue);
currentDate.setDate(currentDate.getDate() + direction);
handleOnChange(null, currentDate, null);
return;
}
let currentIndex = getSelectedIndex(value);
if (currentIndex == null)
@ -156,9 +183,26 @@ function WidgetDropdownMenu({name, defaultValue, label, startIcon, width, disabl
};
const handleDatePickerOnChange = (value: PickerValidDate, context: PickerChangeHandlerContext<DateValidationError>) =>
{
if (value.isValid())
{
handleOnChange(null, value.toDate(), null);
}
};
const handleOnChange = (event: any, newValue: any, reason: string) =>
{
setValue(newValue);
if (type == "DATE_PICKER")
{
setDateValue(newValue);
newValue = {"id": new Date(newValue).toLocaleDateString()};
}
else
{
setValue(newValue);
}
const isTimeframeCustom = name == "timeframe" && newValue && newValue.id == "custom";
setCustomTimesVisible(isTimeframeCustom);
@ -250,86 +294,123 @@ function WidgetDropdownMenu({name, defaultValue, label, startIcon, width, disabl
const fontSize = "1rem";
let optionPaddingLeftRems = 0.75;
if(startIcon)
if (startIcon)
{
optionPaddingLeftRems += allowBackAndForth ? 1.5 : 1.75
optionPaddingLeftRems += allowBackAndForth ? 1.5 : 1.75;
}
if(allowBackAndForth)
if (allowBackAndForth)
{
optionPaddingLeftRems += 2.5;
}
return (
dropdownOptions ? (
<Box sx={{whiteSpace: "nowrap", display: "flex",
"& .MuiPopperUnstyled-root": {
border: `1px solid ${colors.grayLines.main}`,
borderTop: "none",
borderRadius: "0 0 0.75rem 0.75rem",
padding: 0,
}, "& .MuiPaper-rounded": {
borderRadius: "0 0 0.75rem 0.75rem",
}
}} className="dashboardDropdownMenu">
<Autocomplete
id={`${label}-combo-box`}
defaultValue={defaultValue}
value={value}
onChange={handleOnChange}
inputValue={inputValue}
onInputChange={handleOnInputChange}
isOptionEqualToValue={(option, value) => option.id === value.id}
open={isOpen}
onOpen={() => setIsOpen(true)}
onClose={() => setIsOpen(false)}
size="small"
disablePortal
disableClearable={disableClearable}
options={dropdownOptions}
sx={{
...sx,
cursor: "pointer",
display: "inline-block",
"& .MuiOutlinedInput-notchedOutline": {
border: "none"
},
}}
renderInput={(params: any) =>
<>
<Box sx={{width: `${width}px`, background: "white", borderRadius: isOpen ? "0.75rem 0.75rem 0 0" : "0.75rem", border: `1px solid ${colors.grayLines.main}`, "& *": {cursor: "pointer"}}} display="flex" alignItems="center" onClick={(event) => doForceOpen(event)}>
{allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? 1 : -1)} disabled={backDisabled}><Icon>navigate_before</Icon></IconButton>}
<TextField {...params} placeholder={label} sx={{
"& .MuiInputBase-input": {
fontSize: fontSize
}
}} InputProps={{...params.InputProps, startAdornment: startAdornment/*, endAdornment: endAdornment*/}}
/>
{allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? -1 : 1)} disabled={forthDisabled}><Icon>navigate_next</Icon></IconButton>}
</Box>
</>
}
renderOption={(props, option: DropdownOption) => (
<li {...props} style={{whiteSpace: "normal", fontSize: fontSize, paddingLeft: `${optionPaddingLeftRems}rem`}}>{option.label}</li>
)}
noOptionsText={<Box fontSize={fontSize}>No options found</Box>}
slotProps={{
popper: {
sx: {
width: `${width}px!important`
}
}
}}
/>
{customTimes}
if (type == "DATE_PICKER")
{
return (
<Box sx={{
...sx,
background: "white",
width: "250px",
borderRadius: "0.75rem !important",
border: `1px solid ${colors.grayLines.main}`,
"& *": {cursor: "pointer"}
}} display="flex" alignItems="center" onClick={(event) => doForceOpen(event)}>
{allowBackAndForth && <IconButton sx={{padding: 0, margin: "8px"}} onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? 1 : -1, type)} disabled={backDisabled}><Icon>navigate_before</Icon></IconButton>}
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
sx={{paddingRight: "8px"}}
defaultValue={dayjs(defaultValue)}
name={name}
value={dayjs(dateValue)}
onChange={handleDatePickerOnChange}
slots={{
openPickerIcon: CalendarTodayOutlined
}}
slotProps={{
openPickerIcon: {sx: {fontSize: "1.25rem !important", color: "#757575"}},
actionBar: {actions: ["today"]},
textField: {variant: "standard", InputProps: {sx: {fontSize: "16px", color: "#495057"}, disableUnderline: true}}
}}
/>
</LocalizationProvider>
{allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? -1 : 1, type)} disabled={forthDisabled}><Icon>navigate_next</Icon></IconButton>}
</Box>
) : null
);
);
}
else
{
return (
dropdownOptions ? (
<Box sx={{
whiteSpace: "nowrap", display: "flex",
"& .MuiPopperUnstyled-root": {
border: `1px solid ${colors.grayLines.main}`,
borderTop: "none",
borderRadius: "0 0 0.75rem 0.75rem",
padding: 0,
}, "& .MuiPaper-rounded": {
borderRadius: "0 0 0.75rem 0.75rem",
}
}} className="dashboardDropdownMenu">
<Autocomplete
id={`${label}-combo-box`}
defaultValue={defaultValue}
value={value}
onChange={handleOnChange}
inputValue={inputValue}
onInputChange={handleOnInputChange}
isOptionEqualToValue={(option, value) => option.id === value.id}
open={isOpen}
onOpen={() => setIsOpen(true)}
onClose={() => setIsOpen(false)}
size="small"
disablePortal
disableClearable={disableClearable}
options={dropdownOptions}
sx={{
...sx,
cursor: "pointer",
display: "inline-block",
"& .MuiOutlinedInput-notchedOutline": {
border: "none"
},
}}
renderInput={(params: any) =>
<>
<Box sx={{width: `${width}px`, background: "white", borderRadius: isOpen ? "0.75rem 0.75rem 0 0" : "0.75rem", border: `1px solid ${colors.grayLines.main}`, "& *": {cursor: "pointer"}}} display="flex" alignItems="center" onClick={(event) => doForceOpen(event)}>
{allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? 1 : -1, type)} disabled={backDisabled}><Icon>navigate_before</Icon></IconButton>}
<TextField {...params} placeholder={label} sx={{
"& .MuiInputBase-input": {
fontSize: fontSize
}
}} InputProps={{...params.InputProps, startAdornment: startAdornment/*, endAdornment: endAdornment*/}}
/>
{allowBackAndForth && <IconButton onClick={(event) => navigateBackAndForth(event, backAndForthInverted ? -1 : 1, type)} disabled={forthDisabled}><Icon>navigate_next</Icon></IconButton>}
</Box>
</>
}
renderOption={(props, option: DropdownOption) => (
<li {...props} style={{whiteSpace: "normal", fontSize: fontSize, paddingLeft: `${optionPaddingLeftRems}rem`}}>{option.label}</li>
)}
noOptionsText={<Box fontSize={fontSize}>No options found</Box>}
slotProps={{
popper: {
sx: {
width: `${width}px!important`
}
}
}}
/>
{customTimes}
</Box>
) : null
);
}
}
export default WidgetDropdownMenu;

4
src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx
View File

@ -21,8 +21,8 @@
import Box from "@mui/material/Box";
import {Theme} from "@mui/material/styles";
import {ReactNode} from "react";
import colors from "qqq/assets/theme/base/colors";
import {ReactNode} from "react";
// Declaring prop types for DataTableBodyCell
interface Props
@ -49,7 +49,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
"@media (max-width: 1440px)": {
fontSize: "0.875rem"
},
"&:nth-child(1)": {
"&:nth-of-type(1)": {
paddingLeft: "1rem"
},
"&:last-child": {

4
src/qqq/components/widgets/tables/cells/DataTableHeadCell.tsx
View File

@ -23,9 +23,9 @@ import Box from "@mui/material/Box";
import Icon from "@mui/material/Icon";
import {Theme} from "@mui/material/styles";
import Tooltip from "@mui/material/Tooltip";
import {ReactNode} from "react";
import colors from "qqq/assets/theme/base/colors";
import {useMaterialUIController} from "qqq/context";
import {ReactNode} from "react";
// Declaring props types for DataTableHeadCell
interface Props
@ -50,7 +50,7 @@ function DataTableHeadCell({width, children, sorted, align, tooltip, ...rest}: P
px={1.5}
sx={({palette: {light}, borders: {borderWidth}}: Theme) => ({
borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`,
"&:nth-child(1)": {
"&:nth-of-type(1)": {
paddingLeft: "1rem"
},
"&:last-child": {