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

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;