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

Add sections and autocomplete (QDynamicSelect) on bulk-edit

Browse Source
This commit is contained in:
darin.kelkhoff
2022-10-12 17:32:29 -05:00
parent 0edc07a1c2
commit 0d16b82ad0
11 changed files with 311 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/qqq/components/EntityForm/index.tsx
View File

@ -155,6 +155,7 @@ function EntityForm({table, id}: Props): JSX.Element
dynamicFormFields,
formValidations,
} = DynamicFormUtils.getFormData(fieldArray);
DynamicFormUtils.addPossibleValueProps(dynamicFormFields, fieldArray, tableName, record?.displayValues);
/////////////////////////////////////
// group the formFields by section //
@ -180,24 +181,6 @@ function EntityForm({table, id}: Props): JSX.Element
{
sectionDynamicFormFields.push(dynamicFormFields[fieldName]);
}
/////////////////////////////////////////
// add props for possible value fields //
/////////////////////////////////////////
if(field.possibleValueSourceName)
{
let initialDisplayValue = null;
if(record && record.displayValues)
{
initialDisplayValue = record.displayValues.get(field.name);
}
dynamicFormFields[fieldName].possibleValueProps =
{
isPossibleValue: true,
tableName: tableName,
initialDisplayValue: initialDisplayValue,
};
}
}
if (sectionDynamicFormFields.length === 0)

2
src/qqq/components/QDynamicForm/index.tsx
View File

@ -136,6 +136,8 @@ function QDynamicForm(props: Props): JSX.Element
fieldLabel={field.label}
initialValue={values[fieldName]}
initialDisplayValue={field.possibleValueProps.initialDisplayValue}
bulkEditMode={bulkEditMode}
bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
/>
</Grid>
);

27
src/qqq/components/QDynamicForm/utils/DynamicFormUtils.ts
View File

@ -95,6 +95,33 @@ class DynamicFormUtils
}
return (null);
}
public static addPossibleValueProps(dynamicFormFields: any, qFields: QFieldMetaData[], tableName: string, displayValues: Map<string, string>)
{
for (let i = 0; i < qFields.length; i++)
{
const field = qFields[i];
/////////////////////////////////////////
// add props for possible value fields //
/////////////////////////////////////////
if (field.possibleValueSourceName && dynamicFormFields[field.name])
{
let initialDisplayValue = null;
if (displayValues)
{
initialDisplayValue = displayValues.get(field.name);
}
dynamicFormFields[field.name].possibleValueProps =
{
isPossibleValue: true,
tableName: tableName,
initialDisplayValue: initialDisplayValue,
};
}
}
}
}
export default DynamicFormUtils;

2
src/qqq/components/QDynamicFormField/index.tsx
View File

@ -123,7 +123,7 @@ function QDynamicFormField({
onClick={bulkEditSwitchChanged}
/>
</Box>
<Box width="100%">
<Box width="100%" sx={{background: (type == "checkbox" && isDisabled) ? "#f0f2f5!important" : "initial"}}>
{/* for checkboxes, if we put the whole thing in a label, we get bad overly aggressive toggling of the outer switch... */}
{(type == "checkbox" ?
field() :

58
src/qqq/components/QDynamicSelect/QDynamicSelect.tsx
View File

@ -22,9 +22,12 @@
import {QPossibleValue} from "@kingsrook/qqq-frontend-core/lib/model/QPossibleValue";
import {CircularProgress, FilterOptionsState} from "@mui/material";
import Autocomplete from "@mui/material/Autocomplete";
import Box from "@mui/material/Box";
import Switch from "@mui/material/Switch";
import TextField from "@mui/material/TextField";
import {useFormikContext} from "formik";
import React, {useEffect, useState} from "react";
import MDBox from "qqq/components/Temporary/MDBox";
import QClient from "qqq/utils/QClient";
interface Props
@ -35,7 +38,10 @@ interface Props
inForm: boolean;
initialValue?: any;
initialDisplayValue?: string;
onChange?: any
onChange?: any;
isEditable?: boolean;
bulkEditMode?: boolean;
bulkEditSwitchChangeHandler?: any;
}
QDynamicSelect.defaultProps = {
@ -43,11 +49,16 @@ QDynamicSelect.defaultProps = {
initialValue: null,
initialDisplayValue: null,
onChange: null,
isEditable: true,
bulkEditMode: false,
bulkEditSwitchChangeHandler: () =>
{
},
};
const qController = QClient.getInstance();
function QDynamicSelect({tableName, fieldName, fieldLabel, inForm, initialValue, initialDisplayValue, onChange}: Props)
function QDynamicSelect({tableName, fieldName, fieldLabel, inForm, initialValue, initialDisplayValue, onChange, isEditable, bulkEditMode, bulkEditSwitchChangeHandler}: Props)
{
const [ open, setOpen ] = useState(false);
const [ options, setOptions ] = useState<readonly QPossibleValue[]>([]);
@ -56,6 +67,8 @@ function QDynamicSelect({tableName, fieldName, fieldLabel, inForm, initialValue,
const [defaultValue, _] = useState(initialValue && initialDisplayValue ? {id: initialValue, label: initialDisplayValue} : null);
// const loading = open && options.length === 0;
const [loading, setLoading] = useState(false);
const [ switchChecked, setSwitchChecked ] = useState(false);
const [ isDisabled, setIsDisabled ] = useState(!isEditable || bulkEditMode);
let setFieldValueRef: (field: string, value: any, shouldValidate?: boolean) => void = null;
if(inForm)
@ -152,9 +165,18 @@ function QDynamicSelect({tableName, fieldName, fieldLabel, inForm, initialValue,
);
}
return (
const bulkEditSwitchChanged = () =>
{
const newSwitchValue = !switchChecked;
setSwitchChecked(newSwitchValue);
setIsDisabled(!newSwitchValue);
bulkEditSwitchChangeHandler(fieldName, newSwitchValue);
};
const autocomplete = (
<Autocomplete
id={fieldName}
sx={{background: isDisabled ? "#f0f2f5!important" : "initial"}}
open={open}
fullWidth
onOpen={() =>
@ -190,6 +212,7 @@ function QDynamicSelect({tableName, fieldName, fieldLabel, inForm, initialValue,
}}
renderOption={renderOption}
filterOptions={filterOptions}
disabled={isDisabled}
renderInput={(params) => (
<TextField
{...params}
@ -210,6 +233,35 @@ function QDynamicSelect({tableName, fieldName, fieldLabel, inForm, initialValue,
)}
/>
);
if (bulkEditMode)
{
return (
<Box mb={1.5} display="flex" flexDirection="row">
<Box alignItems="baseline" pt={1}>
<Switch
id={`bulkEditSwitch-${fieldName}`}
checked={switchChecked}
onClick={bulkEditSwitchChanged}
/>
</Box>
<Box width="100%">
{autocomplete}
</Box>
</Box>
);
}
else
{
return (
<MDBox mb={1.5}>
{autocomplete}
</MDBox>
);
}
}
export default QDynamicSelect;

14
src/qqq/components/QRecordSidebar/index.tsx
View File

@ -36,8 +36,14 @@ interface Props
metaData?: QTableMetaData;
widgetMetaDataList?: QWidgetMetaData[];
light?: boolean;
stickyTop?: string;
}
QRecordSidebar.defaultProps = {
light: false,
stickyTop: "100px",
};
interface SidebarEntry
{
iconName: string;
@ -45,7 +51,7 @@ interface SidebarEntry
label: string;
}
function QRecordSidebar({tableSections, widgetMetaDataList, light}: Props): JSX.Element
function QRecordSidebar({tableSections, widgetMetaDataList, light, stickyTop}: Props): JSX.Element
{
/////////////////////////////////////////////////////////
// insert widgets after identity (first) table section //
@ -65,7 +71,7 @@ function QRecordSidebar({tableSections, widgetMetaDataList, light}: Props): JSX.
return (
<Card sx={{borderRadius: ({borders: {borderRadius}}) => borderRadius.lg, position: "sticky", top: "100px"}}>
<Card sx={{borderRadius: ({borders: {borderRadius}}) => borderRadius.lg, position: "sticky", top: stickyTop}}>
<MDBox component="ul" display="flex" flexDirection="column" p={2} m={0} sx={{listStyle: "none"}}>
{
sidebarEntries ? sidebarEntries.map((entry: SidebarEntry, key: number) => (
@ -109,8 +115,4 @@ function QRecordSidebar({tableSections, widgetMetaDataList, light}: Props): JSX.
);
}
QRecordSidebar.defaultProps = {
light: false,
};
export default QRecordSidebar;

11
src/qqq/pages/entity-list/index.tsx
View File

@ -40,7 +40,6 @@ import Modal from "@mui/material/Modal";
import {
DataGridPro,
getGridDateOperators,
getGridNumericOperators,
GridCallbackDetails,
GridColDef,
GridColumnOrderChangeParams,
@ -235,7 +234,7 @@ function EntityList({table, launchProcess}: Props): JSX.Element
const [ gridMouseDownY, setGridMouseDownY ] = useState(0);
const [ pinnedColumns, setPinnedColumns ] = useState({left: [ "__check__", "id" ]});
const [activeModalProcess, setActiveModalProcess] = useState(null as QProcessMetaData)
const [ activeModalProcess, setActiveModalProcess ] = useState(null as QProcessMetaData);
const [ launchingProcess, setLaunchingProcess ] = useState(launchProcess);
const instance = useRef({timer: null});
@ -350,7 +349,7 @@ function EntityList({table, launchProcess}: Props): JSX.Element
if (!defaultFilterLoaded)
{
setDefaultFilterLoaded(true);
localFilterModel = await getDefaultFilter(tableMetaData, searchParams, filterLocalStorageKey)
localFilterModel = await getDefaultFilter(tableMetaData, searchParams, filterLocalStorageKey);
setFilterModel(localFilterModel);
return;
}
@ -886,7 +885,7 @@ function EntityList({table, launchProcess}: Props): JSX.Element
navigate(newPath.join("/"));
updateTable();
}
};
const openBulkProcess = (processNamePart: "Insert" | "Edit" | "Delete", processLabelPart: "Load" | "Edit" | "Delete") =>
{
@ -899,7 +898,7 @@ function EntityList({table, launchProcess}: Props): JSX.Element
{
setAlertContent(`Could not find Bulk ${processLabelPart} process for this table.`);
}
}
};
const bulkLoadClicked = () =>
{
@ -1171,7 +1170,9 @@ function EntityList({table, launchProcess}: Props): JSX.Element
{
activeModalProcess &&
<Modal open={activeModalProcess !== null} onClose={(event, reason) => closeModalProcess(event, reason)}>
<div className="modalProcess">
<ProcessRun process={activeModalProcess} isModal={true} recordIds={getRecordIdsForProcess()} closeModalHandler={closeModalProcess} />
</div>
</Modal>
}

2
src/qqq/pages/entity-view/components/ViewContents/index.tsx
View File

@ -451,7 +451,9 @@ function ViewContents({id, table, launchProcess}: Props): JSX.Element
{
activeModalProcess &&
<Modal open={activeModalProcess !== null} onClose={(event, reason) => closeModalProcess(event, reason)}>
<div className="modalProcess">
<ProcessRun process={activeModalProcess} isModal={true} recordIds={id} closeModalHandler={closeModalProcess} />
</div>
</Modal>
}

93
src/qqq/pages/process-run/index.tsx
View File

@ -26,6 +26,7 @@ import {QFrontendComponent} from "@kingsrook/qqq-frontend-core/lib/model/metaDat
import {QFrontendStepMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableSection";
import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
import {QJobRunning} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobRunning";
@ -52,6 +53,7 @@ import BaseLayout from "qqq/components/BaseLayout";
import {QCancelButton, QSubmitButton} from "qqq/components/QButtons";
import QDynamicForm from "qqq/components/QDynamicForm";
import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
import QRecordSidebar from "qqq/components/QRecordSidebar";
import MDBox from "qqq/components/Temporary/MDBox";
import MDButton from "qqq/components/Temporary/MDButton";
import MDProgress from "qqq/components/Temporary/MDProgress";
@ -59,6 +61,7 @@ import MDTypography from "qqq/components/Temporary/MDTypography";
import {QGoogleDriveFolderPickerWrapper} from "qqq/pages/process-run/components/QGoogleDriveFolderPickerWrapper";
import QValidationReview from "qqq/pages/process-run/components/QValidationReview";
import QClient from "qqq/utils/QClient";
import QTableUtils from "qqq/utils/QTableUtils";
import QValueUtils from "qqq/utils/QValueUtils";
import QProcessSummaryResults from "./components/QProcessSummaryResults";
@ -66,9 +69,9 @@ interface Props
{
process?: QProcessMetaData;
defaultProcessValues?: any;
isModal?: boolean
recordIds?: string | QQueryFilter
closeModalHandler?: (event: object, reason: string) => void
isModal?: boolean;
recordIds?: string | QQueryFilter;
closeModalHandler?: (event: object, reason: string) => void;
}
const INITIAL_RETRY_MILLIS = 1_500;
@ -95,6 +98,7 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
const [needInitialLoad, setNeedInitialLoad] = useState(true);
const [processMetaData, setProcessMetaData] = useState(null);
const [tableMetaData, setTableMetaData] = useState(null);
const [tableSections, setTableSections] = useState(null as QTableSection[]);
const [qInstance, setQInstance] = useState(null as QInstance);
const [processValues, setProcessValues] = useState({} as any);
const [processError, _setProcessError] = useState(null as string);
@ -303,6 +307,17 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
);
}
const {formFields, values, errors, touched} = formData;
let localTableSections = tableSections;
if(localTableSections == null)
{
//////////////////////////////////////////////////////////////////////////////////////////////////////
// if the table sections (ones that actually have fields to edit) haven't been built yet, do so now //
//////////////////////////////////////////////////////////////////////////////////////////////////////
localTableSections = tableMetaData ? QTableUtils.getSectionsForRecordSidebar(tableMetaData, Object.keys(formFields)) : null;
setTableSections(localTableSections);
}
return (
<>
<MDTypography variation="h5" component="div" fontWeight="bold">
@ -337,7 +352,61 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
}
{
component.type === QComponentType.BULK_EDIT_FORM && (
<QDynamicForm formData={formData} bulkEditMode bulkEditSwitchChangeHandler={bulkEditSwitchChanged} />
tableMetaData && localTableSections ?
<Grid container spacing={3} mt={2}>
<Grid item xs={12} lg={3}>
<QRecordSidebar tableSections={localTableSections} stickyTop="20px" />
</Grid>
<Grid item xs={12} lg={9}>
{localTableSections.map((section: QTableSection, index: number) =>
{
const name = section.name
console.log(formData);
console.log(section.fieldNames);
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} />
</Box>
</Card>
</Box>
);
}
else
{
return (<br />);
}
}
)}
</Grid>
</Grid>
: <QDynamicForm formData={formData} bulkEditMode bulkEditSwitchChangeHandler={bulkEditSwitchChanged} />
)
}
{
@ -505,7 +574,7 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
}
return (rs);
}
};
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// handle moving to another step in the process - e.g., after the backend told us what screen to show next. //
@ -517,7 +586,7 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
console.log("No process meta data yet, so returning early");
return;
}
setPageHeader(processMetaData.label)
setPageHeader(processMetaData.label);
let newIndex = null;
if (typeof newStep === "number")
@ -560,6 +629,8 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
{
let fullFieldList = getFullFieldList(activeStep, processValues);
const formData = DynamicFormUtils.getFormData(fullFieldList);
DynamicFormUtils.addPossibleValueProps(formData.dynamicFormFields, fullFieldList, tableMetaData.name, null);
dynamicFormFields = formData.dynamicFormFields;
formValidations = formData.formValidations;
@ -592,7 +663,7 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
dynamicFormFields[fieldName] = dynamicFormValue;
initialValues[fieldName] = initialValue;
formValidations[fieldName] = validation;
}
};
if (doesStepHaveComponent(activeStep, QComponentType.VALIDATION_REVIEW_SCREEN))
{
@ -602,9 +673,9 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
if (doesStepHaveComponent(activeStep, QComponentType.GOOGLE_DRIVE_SELECT_FOLDER))
{
addField("googleDriveAccessToken", {type: "hidden", omitFromQDynamicForm: true}, null, null);
addField("googleDriveFolderId", {type: "hidden", omitFromQDynamicForm: true}, null, null);
addField("googleDriveFolderName", {type: "hidden", omitFromQDynamicForm: true}, null, null);
addField("googleDriveAccessToken", {type: "hidden", omitFromQDynamicForm: true}, "", null);
addField("googleDriveFolderId", {type: "hidden", omitFromQDynamicForm: true}, "", null);
addField("googleDriveFolderName", {type: "hidden", omitFromQDynamicForm: true}, "", null);
}
if (Object.keys(dynamicFormFields).length > 0)
@ -673,6 +744,8 @@ function ProcessRun({process, defaultProcessValues, isModal, recordIds, closeMod
}
});
DynamicFormUtils.addPossibleValueProps(newDynamicFormFields, fullFieldList, tableMetaData.name, null);
setFormFields(newDynamicFormFields);
setValidationScheme(Yup.object().shape(newFormValidations));
}

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

@ -177,3 +177,9 @@ input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
/* Shrink the big margin-bottom on modal processes */
.modalProcess>.MuiBox-root>.MuiBox-root
{
margin-bottom: 24px;
}

50
src/qqq/utils/QTableUtils.ts
View File

@ -28,16 +28,60 @@ import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTa
*******************************************************************************/
class QTableUtils
{
public static getSectionsForRecordSidebar(tableMetaData: QTableMetaData): QTableSection[]
/*******************************************************************************
**
*******************************************************************************/
public static getSectionsForRecordSidebar(tableMetaData: QTableMetaData, allowedKeys: any = null): QTableSection[]
{
if (tableMetaData.sections)
{
return (tableMetaData.sections);
if (allowedKeys)
{
const allowedKeySet = new Set<string>();
allowedKeys.forEach((k: string) => allowedKeySet.add(k));
const allowedSections: QTableSection[] = [];
for (let i = 0; i < tableMetaData.sections.length; i++)
{
const section = tableMetaData.sections[i];
if (section.fieldNames)
{
for (let j = 0; j < section.fieldNames.length; j++)
{
if (allowedKeySet.has(section.fieldNames[j]))
{
allowedSections.push(section);
break;
}
}
}
}
return (allowedSections);
}
else
{
return (tableMetaData.sections);
}
}
else
{
let fieldNames = [...tableMetaData.fields.keys()];
if (allowedKeys)
{
fieldNames = [];
for (const fieldName in tableMetaData.fields.keys())
{
if (allowedKeys[fieldName])
{
fieldNames.push(fieldName);
}
}
}
return ([new QTableSection({
iconName: "description", label: "All Fields", name: "allFields", fieldNames: [...tableMetaData.fields.keys()],
iconName: "description", label: "All Fields", name: "allFields", fieldNames: [...fieldNames],
})]);
}
}