mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-19 22:00:45 +00:00
Merged main into feature/select-text-on-child-tables
This commit is contained in:
@ -414,228 +414,238 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
//////////////////////////////////////////////////
|
||||
// render all of the components for this screen //
|
||||
//////////////////////////////////////////////////
|
||||
step.components && (step.components.map((component: QFrontendComponent, index: number) => (
|
||||
<div key={index}>
|
||||
{
|
||||
component.type === QComponentType.HELP_TEXT && (
|
||||
component.values.previewText ?
|
||||
<>
|
||||
<Box mt={1}>
|
||||
<Button onClick={toggleShowFullHelpText} startIcon={<Icon>{showFullHelpText ? "expand_less" : "expand_more"}</Icon>} sx={{pl: 1}}>
|
||||
{showFullHelpText ? "Hide " : "Show "}
|
||||
{component.values.previewText}
|
||||
</Button>
|
||||
</Box>
|
||||
<Box mt={1} style={{display: showFullHelpText ? "block" : "none"}}>
|
||||
<Typography variant="body2" color="info">
|
||||
{ValueUtils.breakTextIntoLines(component.values.text)}
|
||||
</Typography>
|
||||
</Box>
|
||||
</>
|
||||
:
|
||||
<MDTypography variant="button" color="info">
|
||||
{ValueUtils.breakTextIntoLines(component.values.text)}
|
||||
</MDTypography>
|
||||
)
|
||||
}
|
||||
{
|
||||
component.type === QComponentType.BULK_EDIT_FORM && (
|
||||
tableMetaData && localTableSections ?
|
||||
<Grid container spacing={3} mt={2}>
|
||||
{
|
||||
localTableSections.length == 0 &&
|
||||
<Grid item xs={12}>
|
||||
<Alert color="error">There are no editable fields on this table.</Alert>
|
||||
step.components && (step.components.map((component: QFrontendComponent, index: number) =>
|
||||
{
|
||||
let helpRoles = ["PROCESS_SCREEN", "ALL_SCREENS"]
|
||||
if(component.type == QComponentType.BULK_EDIT_FORM)
|
||||
{
|
||||
helpRoles = ["EDIT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"]
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={index}>
|
||||
{
|
||||
component.type === QComponentType.HELP_TEXT && (
|
||||
component.values.previewText ?
|
||||
<>
|
||||
<Box mt={1}>
|
||||
<Button onClick={toggleShowFullHelpText} startIcon={<Icon>{showFullHelpText ? "expand_less" : "expand_more"}</Icon>} sx={{pl: 1}}>
|
||||
{showFullHelpText ? "Hide " : "Show "}
|
||||
{component.values.previewText}
|
||||
</Button>
|
||||
</Box>
|
||||
<Box mt={1} style={{display: showFullHelpText ? "block" : "none"}}>
|
||||
<Typography variant="body2" color="info">
|
||||
{ValueUtils.breakTextIntoLines(component.values.text)}
|
||||
</Typography>
|
||||
</Box>
|
||||
</>
|
||||
:
|
||||
<MDTypography variant="button" color="info">
|
||||
{ValueUtils.breakTextIntoLines(component.values.text)}
|
||||
</MDTypography>
|
||||
)
|
||||
}
|
||||
{
|
||||
component.type === QComponentType.BULK_EDIT_FORM && (
|
||||
tableMetaData && localTableSections ?
|
||||
<Grid container spacing={3} mt={2}>
|
||||
{
|
||||
localTableSections.length == 0 &&
|
||||
<Grid item xs={12}>
|
||||
<Alert color="error">There are no editable fields on this table.</Alert>
|
||||
</Grid>
|
||||
}
|
||||
<Grid item xs={12} lg={3}>
|
||||
{
|
||||
localTableSections.length > 0 && <QRecordSidebar tableSections={localTableSections} stickyTop="20px" />
|
||||
}
|
||||
</Grid>
|
||||
}
|
||||
<Grid item xs={12} lg={3}>
|
||||
{
|
||||
localTableSections.length > 0 && <QRecordSidebar tableSections={localTableSections} stickyTop="20px" />
|
||||
}
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={9}>
|
||||
|
||||
{localTableSections.map((section: QTableSection, index: number) =>
|
||||
{
|
||||
const name = section.name;
|
||||
|
||||
if (section.isHidden)
|
||||
<Grid item xs={12} lg={9}>
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
const sectionFormFields = {};
|
||||
for (let i = 0; i < section.fieldNames.length; i++)
|
||||
{
|
||||
const fieldName = section.fieldNames[i];
|
||||
if (formFields[fieldName])
|
||||
localTableSections.map((section: QTableSection, index: number) =>
|
||||
{
|
||||
// @ts-ignore
|
||||
sectionFormFields[fieldName] = formFields[fieldName];
|
||||
}
|
||||
}
|
||||
const name = section.name;
|
||||
|
||||
if (Object.keys(sectionFormFields).length > 0)
|
||||
{
|
||||
const sectionFormData = {
|
||||
formFields: sectionFormFields,
|
||||
values: values,
|
||||
errors: errors,
|
||||
touched: touched
|
||||
};
|
||||
if (section.isHidden)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<Box key={name} pb={3}>
|
||||
<Card id={name} sx={{scrollMarginTop: "20px"}} elevation={5}>
|
||||
<MDTypography variant="h5" p={3} pb={1}>
|
||||
{section.label}
|
||||
</MDTypography>
|
||||
<Box px={2}>
|
||||
<QDynamicForm formData={sectionFormData} bulkEditMode bulkEditSwitchChangeHandler={bulkEditSwitchChanged} />
|
||||
const sectionFormFields = {};
|
||||
for (let i = 0; i < section.fieldNames.length; i++)
|
||||
{
|
||||
const fieldName = section.fieldNames[i];
|
||||
if (formFields[fieldName])
|
||||
{
|
||||
// @ts-ignore
|
||||
sectionFormFields[fieldName] = formFields[fieldName];
|
||||
}
|
||||
}
|
||||
|
||||
if (Object.keys(sectionFormFields).length > 0)
|
||||
{
|
||||
const sectionFormData = {
|
||||
formFields: sectionFormFields,
|
||||
values: values,
|
||||
errors: errors,
|
||||
touched: touched
|
||||
};
|
||||
|
||||
return (
|
||||
<Box key={name} pb={3}>
|
||||
<Card id={name} sx={{scrollMarginTop: "20px"}} elevation={5}>
|
||||
<MDTypography variant="h5" p={3} pb={1}>
|
||||
{section.label}
|
||||
</MDTypography>
|
||||
<Box px={2}>
|
||||
<QDynamicForm formData={sectionFormData} bulkEditMode bulkEditSwitchChangeHandler={bulkEditSwitchChanged} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableMetaData?.name};`} />
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
);
|
||||
);
|
||||
}
|
||||
else
|
||||
{
|
||||
return (<br />);
|
||||
}
|
||||
})
|
||||
}
|
||||
else
|
||||
{
|
||||
return (<br />);
|
||||
}
|
||||
}
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
: <QDynamicForm formData={formData} bulkEditMode bulkEditSwitchChangeHandler={bulkEditSwitchChanged} />
|
||||
)
|
||||
}
|
||||
{
|
||||
component.type === QComponentType.EDIT_FORM && (
|
||||
<QDynamicForm formData={formData} />
|
||||
)
|
||||
}
|
||||
{
|
||||
component.type === QComponentType.VIEW_FORM && step.viewFields && (
|
||||
<div>
|
||||
{step.viewFields.map((field: QFieldMetaData) => (
|
||||
field.hasAdornment(AdornmentType.ERROR) ? (
|
||||
processValues[field.name] && (
|
||||
: <QDynamicForm formData={formData} bulkEditMode bulkEditSwitchChangeHandler={bulkEditSwitchChanged} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableMetaData?.name};`} />
|
||||
)
|
||||
}
|
||||
{
|
||||
component.type === QComponentType.EDIT_FORM && (
|
||||
<QDynamicForm formData={formData} helpRoles={helpRoles} helpContentKeyPrefix={`process:${processName};`} />
|
||||
)
|
||||
}
|
||||
{
|
||||
component.type === QComponentType.VIEW_FORM && step.viewFields && (
|
||||
<div>
|
||||
{step.viewFields.map((field: QFieldMetaData) => (
|
||||
field.hasAdornment(AdornmentType.ERROR) ? (
|
||||
processValues[field.name] && (
|
||||
<Box key={field.name} display="flex" py={1} pr={2}>
|
||||
<MDTypography variant="button" fontWeight="regular">
|
||||
{ValueUtils.getValueForDisplay(field, processValues[field.name], undefined, "view")}
|
||||
</MDTypography>
|
||||
</Box>
|
||||
)
|
||||
) : (
|
||||
<Box key={field.name} display="flex" py={1} pr={2}>
|
||||
<MDTypography variant="button" fontWeight="regular">
|
||||
<MDTypography variant="button" fontWeight="bold">
|
||||
{field.label}
|
||||
:
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
||||
{ValueUtils.getValueForDisplay(field, processValues[field.name], undefined, "view")}
|
||||
</MDTypography>
|
||||
</Box>
|
||||
)
|
||||
) : (
|
||||
<Box key={field.name} display="flex" py={1} pr={2}>
|
||||
<MDTypography variant="button" fontWeight="bold">
|
||||
{field.label}
|
||||
:
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
||||
{ValueUtils.getValueForDisplay(field, processValues[field.name], undefined, "view")}
|
||||
)))
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
component.type === QComponentType.DOWNLOAD_FORM && (
|
||||
<Grid container display="flex" justifyContent="center">
|
||||
<Grid item xs={12} sm={12} xl={8} m={3} p={3} mt={6} sx={{border: "1px solid gray", borderRadius: "1rem"}}>
|
||||
<Box mx={2} mt={-6} p={1} sx={{width: "fit-content", borderColor: "rgb(70%, 70%, 70%)", borderWidth: "2px", borderStyle: "solid", borderRadius: ".25em", backgroundColor: "#FFFFFF"}} width="initial" color="white">
|
||||
Download
|
||||
</Box>
|
||||
<Box display="flex" py={1} pr={2}>
|
||||
<MDTypography variant="button" fontWeight="bold" onClick={() => download(`/download/${processValues.downloadFileName}?filePath=${processValues.serverFilePath}`, processValues.downloadFileName)} sx={{cursor: "pointer"}}>
|
||||
<Box display="flex" alignItems="center" gap={1} py={1} pr={2}>
|
||||
<Icon fontSize="large">download_for_offline</Icon>
|
||||
{processValues.downloadFileName}
|
||||
</Box>
|
||||
</MDTypography>
|
||||
</Box>
|
||||
)))
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
component.type === QComponentType.DOWNLOAD_FORM && (
|
||||
<Grid container display="flex" justifyContent="center">
|
||||
<Grid item xs={12} sm={12} xl={8} m={3} p={3} mt={6} sx={{border: "1px solid gray", borderRadius: "1rem"}}>
|
||||
<Box mx={2} mt={-6} p={1} sx={{width: "fit-content", borderColor: "rgb(70%, 70%, 70%)", borderWidth: "2px", borderStyle: "solid", borderRadius: ".25em", backgroundColor: "#FFFFFF"}} width="initial" color="white">
|
||||
Download
|
||||
</Box>
|
||||
<Box display="flex" py={1} pr={2}>
|
||||
<MDTypography variant="button" fontWeight="bold" onClick={() => download(`/download/${processValues.downloadFileName}?filePath=${processValues.serverFilePath}`, processValues.downloadFileName)} sx={{cursor: "pointer"}}>
|
||||
<Box display="flex" alignItems="center" gap={1} py={1} pr={2}>
|
||||
<Icon fontSize="large">download_for_offline</Icon>
|
||||
{processValues.downloadFileName}
|
||||
</Box>
|
||||
</MDTypography>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
{
|
||||
component.type === QComponentType.VALIDATION_REVIEW_SCREEN && (
|
||||
<ValidationReview
|
||||
qInstance={qInstance}
|
||||
process={processMetaData}
|
||||
table={tableMetaData}
|
||||
processValues={processValues}
|
||||
step={step}
|
||||
previewRecords={records}
|
||||
formValues={formData.values}
|
||||
doFullValidationRadioChangedHandler={(event: any) =>
|
||||
{
|
||||
const {value} = event.currentTarget;
|
||||
)
|
||||
}
|
||||
{
|
||||
component.type === QComponentType.VALIDATION_REVIEW_SCREEN && (
|
||||
<ValidationReview
|
||||
qInstance={qInstance}
|
||||
process={processMetaData}
|
||||
table={tableMetaData}
|
||||
processValues={processValues}
|
||||
step={step}
|
||||
previewRecords={records}
|
||||
formValues={formData.values}
|
||||
doFullValidationRadioChangedHandler={(event: any) =>
|
||||
{
|
||||
const {value} = event.currentTarget;
|
||||
|
||||
//////////////////////////////////////////////////////////////
|
||||
// call the formik function to set the value in this field. //
|
||||
//////////////////////////////////////////////////////////////
|
||||
setFieldValue("doFullValidation", value);
|
||||
//////////////////////////////////////////////////////////////
|
||||
// call the formik function to set the value in this field. //
|
||||
//////////////////////////////////////////////////////////////
|
||||
setFieldValue("doFullValidation", value);
|
||||
|
||||
setOverrideOnLastStep(value !== "true");
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
component.type === QComponentType.PROCESS_SUMMARY_RESULTS && (
|
||||
<ProcessSummaryResults qInstance={qInstance} process={processMetaData} table={tableMetaData} processValues={processValues} step={step} />
|
||||
)
|
||||
}
|
||||
{
|
||||
component.type === QComponentType.GOOGLE_DRIVE_SELECT_FOLDER && (
|
||||
// todo - make these booleans configurable (values on the component)
|
||||
<GoogleDriveFolderPickerWrapper showSharedDrivesView={true} showDefaultFoldersView={false} qInstance={qInstance} />
|
||||
)
|
||||
}
|
||||
{
|
||||
component.type === QComponentType.RECORD_LIST && step.recordListFields && recordConfig.columns && (
|
||||
<div>
|
||||
<MDTypography variant="button" fontWeight="bold">Records</MDTypography>
|
||||
{" "}
|
||||
<br />
|
||||
<Box height="100%">
|
||||
<DataGridPro
|
||||
components={{Pagination: CustomPagination}}
|
||||
page={recordConfig.pageNo}
|
||||
disableSelectionOnClick
|
||||
autoHeight
|
||||
rows={recordConfig.rows}
|
||||
columns={recordConfig.columns}
|
||||
rowBuffer={10}
|
||||
rowCount={recordConfig.totalRecords}
|
||||
pageSize={recordConfig.rowsPerPage}
|
||||
rowsPerPageOptions={[10, 25, 50]}
|
||||
onPageSizeChange={recordConfig.handleRowsPerPageChange}
|
||||
onPageChange={recordConfig.handlePageChange}
|
||||
onRowClick={recordConfig.handleRowClick}
|
||||
getRowId={(row) => row.__idForDataGridPro__}
|
||||
paginationMode="server"
|
||||
pagination
|
||||
density="compact"
|
||||
loading={recordConfig.loading}
|
||||
disableColumnFilter
|
||||
/>
|
||||
setOverrideOnLastStep(value !== "true");
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
component.type === QComponentType.PROCESS_SUMMARY_RESULTS && (
|
||||
<ProcessSummaryResults qInstance={qInstance} process={processMetaData} table={tableMetaData} processValues={processValues} step={step} />
|
||||
)
|
||||
}
|
||||
{
|
||||
component.type === QComponentType.GOOGLE_DRIVE_SELECT_FOLDER && (
|
||||
// todo - make these booleans configurable (values on the component)
|
||||
<GoogleDriveFolderPickerWrapper showSharedDrivesView={true} showDefaultFoldersView={false} qInstance={qInstance} />
|
||||
)
|
||||
}
|
||||
{
|
||||
component.type === QComponentType.RECORD_LIST && step.recordListFields && recordConfig.columns && (
|
||||
<div>
|
||||
<MDTypography variant="button" fontWeight="bold">Records</MDTypography>
|
||||
{" "}
|
||||
<br />
|
||||
<Box height="100%">
|
||||
<DataGridPro
|
||||
components={{Pagination: CustomPagination}}
|
||||
page={recordConfig.pageNo}
|
||||
disableSelectionOnClick
|
||||
autoHeight
|
||||
rows={recordConfig.rows}
|
||||
columns={recordConfig.columns}
|
||||
rowBuffer={10}
|
||||
rowCount={recordConfig.totalRecords}
|
||||
pageSize={recordConfig.rowsPerPage}
|
||||
rowsPerPageOptions={[10, 25, 50]}
|
||||
onPageSizeChange={recordConfig.handleRowsPerPageChange}
|
||||
onPageChange={recordConfig.handlePageChange}
|
||||
onRowClick={recordConfig.handleRowClick}
|
||||
getRowId={(row) => row.__idForDataGridPro__}
|
||||
paginationMode="server"
|
||||
pagination
|
||||
density="compact"
|
||||
loading={recordConfig.loading}
|
||||
disableColumnFilter
|
||||
/>
|
||||
</Box>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
component.type === QComponentType.HTML && (
|
||||
processValues[`${step.name}.html`] &&
|
||||
<Box fontSize="1rem">
|
||||
{parse(processValues[`${step.name}.html`])}
|
||||
</Box>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
component.type === QComponentType.HTML && (
|
||||
processValues[`${step.name}.html`] &&
|
||||
<Box fontSize="1rem">
|
||||
{parse(processValues[`${step.name}.html`])}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)))}
|
||||
)
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}))
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -34,12 +34,8 @@ function EntityCreate({table}: Props): JSX.Element
|
||||
{
|
||||
return (
|
||||
<BaseLayout>
|
||||
<Box mt={4}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} lg={12}>
|
||||
<EntityForm table={table} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Box mb={3}>
|
||||
<EntityForm table={table} />
|
||||
</Box>
|
||||
</BaseLayout>
|
||||
);
|
||||
|
||||
@ -43,18 +43,8 @@ function EntityEdit({table, isCopy}: Props): JSX.Element
|
||||
|
||||
return (
|
||||
<BaseLayout>
|
||||
<Box mt={4}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} lg={12}>
|
||||
<Box mb={3}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12}>
|
||||
<EntityForm table={table} id={id} isCopy={isCopy} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Box mb={3}>
|
||||
<EntityForm table={table} id={id} isCopy={isCopy} />
|
||||
</Box>
|
||||
</BaseLayout>
|
||||
);
|
||||
|
||||
@ -30,7 +30,6 @@ import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJo
|
||||
import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
|
||||
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
|
||||
import {QueryJoin} from "@kingsrook/qqq-frontend-core/lib/model/query/QueryJoin";
|
||||
import {Alert, Collapse, TablePagination, Typography} from "@mui/material";
|
||||
import Autocomplete from "@mui/material/Autocomplete";
|
||||
import Box from "@mui/material/Box";
|
||||
@ -51,7 +50,7 @@ import MenuItem from "@mui/material/MenuItem";
|
||||
import Modal from "@mui/material/Modal";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import {DataGridPro, GridCallbackDetails, GridColDef, GridColumnMenuContainer, GridColumnMenuProps, GridColumnOrderChangeParams, GridColumnPinningMenuItems, GridColumnsMenuItem, GridColumnVisibilityModel, GridDensity, GridEventListener, GridExportMenuItemProps, GridFilterMenuItem, GridFilterModel, GridPinnedColumns, gridPreferencePanelStateSelector, GridRowId, GridRowParams, GridRowsProp, GridSelectionModel, GridSortItem, GridSortModel, GridState, GridToolbarColumnsButton, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarExportContainer, GridToolbarFilterButton, HideGridColMenuItem, MuiEvent, SortGridMenuItems, useGridApiContext, useGridApiEventHandler, useGridSelector, useGridApiRef, GridPreferencePanelsValue} from "@mui/x-data-grid-pro";
|
||||
import {DataGridPro, GridCallbackDetails, GridColDef, GridColumnMenuContainer, GridColumnMenuProps, GridColumnOrderChangeParams, GridColumnPinningMenuItems, GridColumnsMenuItem, GridColumnVisibilityModel, GridDensity, GridEventListener, GridExportMenuItemProps, GridFilterMenuItem, GridFilterModel, GridPinnedColumns, gridPreferencePanelStateSelector, GridRowId, GridRowParams, GridRowsProp, GridSelectionModel, GridSortItem, GridSortModel, GridState, GridToolbarColumnsButton, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarExportContainer, GridToolbarFilterButton, HideGridColMenuItem, MuiEvent, SortGridMenuItems, useGridApiContext, useGridApiEventHandler, useGridSelector, useGridApiRef, GridPreferencePanelsValue, GridColumnResizeParams} from "@mui/x-data-grid-pro";
|
||||
import {GridRowModel} from "@mui/x-data-grid/models/gridRows";
|
||||
import FormData from "form-data";
|
||||
import React, {forwardRef, useContext, useEffect, useReducer, useRef, useState} from "react";
|
||||
@ -80,6 +79,8 @@ const COLUMN_SORT_LOCAL_STORAGE_KEY_ROOT = "qqq.columnSort";
|
||||
const FILTER_LOCAL_STORAGE_KEY_ROOT = "qqq.filter";
|
||||
const ROWS_PER_PAGE_LOCAL_STORAGE_KEY_ROOT = "qqq.rowsPerPage";
|
||||
const PINNED_COLUMNS_LOCAL_STORAGE_KEY_ROOT = "qqq.pinnedColumns";
|
||||
const COLUMN_ORDERING_LOCAL_STORAGE_KEY_ROOT = "qqq.columnOrdering";
|
||||
const COLUMN_WIDTHS_LOCAL_STORAGE_KEY_ROOT = "qqq.columnWidths";
|
||||
const SEEN_JOIN_TABLES_LOCAL_STORAGE_KEY_ROOT = "qqq.seenJoinTables";
|
||||
const DENSITY_LOCAL_STORAGE_KEY_ROOT = "qqq.density";
|
||||
|
||||
@ -137,6 +138,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
const sortLocalStorageKey = `${COLUMN_SORT_LOCAL_STORAGE_KEY_ROOT}.${tableName}`;
|
||||
const rowsPerPageLocalStorageKey = `${ROWS_PER_PAGE_LOCAL_STORAGE_KEY_ROOT}.${tableName}`;
|
||||
const pinnedColumnsLocalStorageKey = `${PINNED_COLUMNS_LOCAL_STORAGE_KEY_ROOT}.${tableName}`;
|
||||
const columnOrderingLocalStorageKey = `${COLUMN_ORDERING_LOCAL_STORAGE_KEY_ROOT}.${tableName}`;
|
||||
const columnWidthsLocalStorageKey = `${COLUMN_WIDTHS_LOCAL_STORAGE_KEY_ROOT}.${tableName}`;
|
||||
const seenJoinTablesLocalStorageKey = `${SEEN_JOIN_TABLES_LOCAL_STORAGE_KEY_ROOT}.${tableName}`;
|
||||
const columnVisibilityLocalStorageKey = `${COLUMN_VISIBILITY_LOCAL_STORAGE_KEY_ROOT}.${tableName}`;
|
||||
const filterLocalStorageKey = `${FILTER_LOCAL_STORAGE_KEY_ROOT}.${tableName}`;
|
||||
@ -147,6 +150,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
let defaultRowsPerPage = 10;
|
||||
let defaultDensity = "standard" as GridDensity;
|
||||
let defaultPinnedColumns = {left: ["__check__", "id"]} as GridPinnedColumns;
|
||||
let defaultColumnOrdering = null as string[];
|
||||
let defaultColumnWidths = {} as {[fieldName: string]: number};
|
||||
let seenJoinTables: {[tableName: string]: boolean} = {};
|
||||
let defaultTableVariant: QTableVariant = null;
|
||||
|
||||
@ -168,6 +173,14 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
{
|
||||
defaultPinnedColumns = JSON.parse(localStorage.getItem(pinnedColumnsLocalStorageKey));
|
||||
}
|
||||
if (localStorage.getItem(columnOrderingLocalStorageKey))
|
||||
{
|
||||
defaultColumnOrdering = JSON.parse(localStorage.getItem(columnOrderingLocalStorageKey));
|
||||
}
|
||||
if (localStorage.getItem(columnWidthsLocalStorageKey))
|
||||
{
|
||||
defaultColumnWidths = JSON.parse(localStorage.getItem(columnWidthsLocalStorageKey));
|
||||
}
|
||||
if (localStorage.getItem(rowsPerPageLocalStorageKey))
|
||||
{
|
||||
defaultRowsPerPage = JSON.parse(localStorage.getItem(rowsPerPageLocalStorageKey));
|
||||
@ -646,6 +659,38 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
let linkBase = metaData.getTablePath(table);
|
||||
linkBase += linkBase.endsWith("/") ? "" : "/";
|
||||
const columns = DataGridUtils.setupGridColumns(tableMetaData, linkBase, metaData, "alphabetical");
|
||||
|
||||
///////////////////////////////////////////////////////////////////////
|
||||
// if there's a column-ordering (e.g., from local storage), apply it //
|
||||
///////////////////////////////////////////////////////////////////////
|
||||
if(defaultColumnOrdering)
|
||||
{
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// note - may need to put this in its own function, e.g., for restoring "Saved Columns" when we add that //
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
columns.sort((a: GridColDef, b: GridColDef) =>
|
||||
{
|
||||
const aIndex = defaultColumnOrdering.indexOf(a.field);
|
||||
const bIndex = defaultColumnOrdering.indexOf(b.field);
|
||||
return aIndex - bIndex;
|
||||
});
|
||||
}
|
||||
|
||||
///////////////////////////////////////////////////////////////////////
|
||||
// if there are column widths (e.g., from local storage), apply them //
|
||||
///////////////////////////////////////////////////////////////////////
|
||||
if(defaultColumnWidths)
|
||||
{
|
||||
for (let i = 0; i < columns.length; i++)
|
||||
{
|
||||
const width = defaultColumnWidths[columns[i].field];
|
||||
if(width)
|
||||
{
|
||||
columns[i].width = width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setColumnsModel(columns);
|
||||
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
@ -963,11 +1008,24 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
setVisibleJoinTables(newVisibleJoinTables);
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Event handler for column ordering change
|
||||
*******************************************************************************/
|
||||
const handleColumnOrderChange = (columnOrderChangeParams: GridColumnOrderChangeParams) =>
|
||||
{
|
||||
// TODO: make local storaged
|
||||
console.log(JSON.stringify(columnsModel));
|
||||
console.log(columnOrderChangeParams);
|
||||
const columnOrdering = gridApiRef.current.state.columns.all;
|
||||
localStorage.setItem(columnOrderingLocalStorageKey, JSON.stringify(columnOrdering));
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Event handler for column resizing
|
||||
*******************************************************************************/
|
||||
const handleColumnResize = (params: GridColumnResizeParams, event: MuiEvent, details: GridCallbackDetails) =>
|
||||
{
|
||||
defaultColumnWidths[params.colDef.field] = params.width;
|
||||
localStorage.setItem(columnWidthsLocalStorageKey, JSON.stringify(defaultColumnWidths));
|
||||
};
|
||||
|
||||
const handleFilterChange = (filterModel: GridFilterModel, doSetQueryFilter = true, isChangeFromDataGrid = false) =>
|
||||
@ -1872,13 +1930,18 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
);
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
// if the table uses variants, then put the variant-selector into the goto dialog //
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
let gotoVariantSubHeader = <></>;
|
||||
if(tableMetaData?.usesVariants)
|
||||
{
|
||||
gotoVariantSubHeader = <Box mb={2}>{getTableVariantHeader()}</Box>
|
||||
}
|
||||
|
||||
return (
|
||||
<BaseLayout>
|
||||
<GotoRecordButton metaData={metaData} tableMetaData={tableMetaData} tableVariant={tableVariant} autoOpen={true} buttonVisible={false} mayClose={false} subHeader={
|
||||
<Box mb={2}>
|
||||
{getTableVariantHeader()}
|
||||
</Box>
|
||||
} />
|
||||
<GotoRecordButton metaData={metaData} tableMetaData={tableMetaData} tableVariant={tableVariant} autoOpen={true} buttonVisible={false} mayClose={false} subHeader={gotoVariantSubHeader} />
|
||||
</BaseLayout>
|
||||
);
|
||||
}
|
||||
@ -2009,6 +2072,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
columnVisibilityModel={columnVisibilityModel}
|
||||
onColumnVisibilityModelChange={handleColumnVisibilityChange}
|
||||
onColumnOrderChange={handleColumnOrderChange}
|
||||
onColumnResize={handleColumnResize}
|
||||
onSelectionModelChange={selectionChanged}
|
||||
onSortModelChange={handleSortChangeForDataGrid}
|
||||
sortingOrder={["asc", "desc"]}
|
||||
|
||||
@ -45,13 +45,16 @@ import ListItemIcon from "@mui/material/ListItemIcon";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import Modal from "@mui/material/Modal";
|
||||
import Tooltip from "@mui/material/Tooltip/Tooltip";
|
||||
import React, {useContext, useEffect, useState} from "react";
|
||||
import {useLocation, useNavigate, useParams} from "react-router-dom";
|
||||
import QContext from "QContext";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
import AuditBody from "qqq/components/audits/AuditBody";
|
||||
import {QActionsMenuButton, QCancelButton, QDeleteButton, QEditButton} from "qqq/components/buttons/DefaultButtons";
|
||||
import EntityForm from "qqq/components/forms/EntityForm";
|
||||
import {GotoRecordButton} from "qqq/components/misc/GotoRecordDialog";
|
||||
import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
|
||||
import QRecordSidebar from "qqq/components/misc/RecordSidebar";
|
||||
import DashboardWidgets from "qqq/components/widgets/DashboardWidgets";
|
||||
import BaseLayout from "qqq/layouts/BaseLayout";
|
||||
@ -98,6 +101,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
|
||||
const [metaData, setMetaData] = useState(null as QInstance);
|
||||
const [record, setRecord] = useState(null as QRecord);
|
||||
const [tableSections, setTableSections] = useState([] as QTableSection[]);
|
||||
const [t1Section, setT1Section] = useState(null as QTableSection);
|
||||
const [t1SectionName, setT1SectionName] = useState(null as string);
|
||||
const [t1SectionElement, setT1SectionElement] = useState(null as JSX.Element);
|
||||
const [nonT1TableSections, setNonT1TableSections] = useState([] as QTableSection[]);
|
||||
@ -117,7 +121,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
|
||||
const openActionsMenu = (event: any) => setActionsMenu(event.currentTarget);
|
||||
const closeActionsMenu = () => setActionsMenu(null);
|
||||
|
||||
const {accentColor, setPageHeader, tableMetaData, setTableMetaData, tableProcesses, setTableProcesses, dotMenuOpen, keyboardHelpOpen} = useContext(QContext);
|
||||
const {accentColor, setPageHeader, tableMetaData, setTableMetaData, tableProcesses, setTableProcesses, dotMenuOpen, keyboardHelpOpen, helpHelpActive} = useContext(QContext);
|
||||
|
||||
if (localStorage.getItem(tableVariantLocalStorageKey))
|
||||
{
|
||||
@ -351,6 +355,23 @@ function RecordView({table, launchProcess}: Props): JSX.Element
|
||||
return (visibleJoinTables);
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** get an element (or empty) to use as help content for a section
|
||||
*******************************************************************************/
|
||||
const getSectionHelp = (section: QTableSection) =>
|
||||
{
|
||||
const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"]
|
||||
const formattedHelpContent = <HelpContent helpContents={section.helpContents} roles={helpRoles} helpContentKey={`table:${tableName};section:${section.name}`} />;
|
||||
|
||||
return formattedHelpContent && (
|
||||
<Box px={"1.5rem"} fontSize={"0.875rem"} color={colors.blueGray.main}>
|
||||
{formattedHelpContent}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
if (!asyncLoadInited)
|
||||
{
|
||||
setAsyncLoadInited(true);
|
||||
@ -502,15 +523,24 @@ function RecordView({table, launchProcess}: Props): JSX.Element
|
||||
{
|
||||
let [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
|
||||
let label = field.label;
|
||||
|
||||
const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"]
|
||||
const showHelp = helpHelpActive || hasHelpContent(field.helpContents, helpRoles);
|
||||
const formattedHelpContent = <HelpContent helpContents={field.helpContents} roles={helpRoles} heading={label} helpContentKey={`table:${tableName};field:${fieldName}`} />;
|
||||
|
||||
const labelElement = <Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)" sx={{cursor: "default"}}>{label}:</Typography>
|
||||
|
||||
return (
|
||||
<Box key={fieldName} flexDirection="row" pr={2}>
|
||||
<Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)">
|
||||
{label}:
|
||||
<>
|
||||
{
|
||||
showHelp && formattedHelpContent ? <Tooltip title={formattedHelpContent}>{labelElement}</Tooltip> : labelElement
|
||||
}
|
||||
<div style={{display: "inline-block", width: 0}}> </div>
|
||||
</Typography>
|
||||
<Typography variant="button" textTransform="none" fontWeight="regular" color="rgb(123, 128, 154)">
|
||||
{ValueUtils.getDisplayValue(field, record, "view", fieldName)}
|
||||
</Typography>
|
||||
<Typography variant="button" textTransform="none" fontWeight="regular" color="rgb(123, 128, 154)">
|
||||
{ValueUtils.getDisplayValue(field, record, "view", fieldName)}
|
||||
</Typography>
|
||||
</>
|
||||
</Box>
|
||||
)
|
||||
})
|
||||
@ -531,6 +561,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
|
||||
<Typography variant="h6" p={3} pb={1}>
|
||||
{section.label}
|
||||
</Typography>
|
||||
{getSectionHelp(section)}
|
||||
<Box p={3} pt={0} flexDirection="column">
|
||||
{fields}
|
||||
</Box>
|
||||
@ -549,6 +580,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
|
||||
{
|
||||
setT1SectionElement(sectionFieldElements.get(section.name));
|
||||
setT1SectionName(section.name);
|
||||
setT1Section(section);
|
||||
}
|
||||
else
|
||||
{
|
||||
@ -879,6 +911,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
|
||||
{renderActionsMenu}
|
||||
</Box>
|
||||
</Box>
|
||||
{t1Section && getSectionHelp(t1Section)}
|
||||
{t1SectionElement ? (<Box p={3} pt={0}>{t1SectionElement}</Box>) : null}
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
Reference in New Issue
Block a user