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

CE-2261: updated to respect field column widths on view and edit forms

Browse Source
This commit is contained in:
Tim Chamberlain
2025-02-19 17:05:10 -06:00
parent 71dc3f3f65
commit 6076c4ddfd
3 changed files with 16 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -6,7 +6,7 @@
"@auth0/auth0-react": "1.10.2",
"@emotion/react": "11.7.1",
"@emotion/styled": "11.6.0",
"@kingsrook/qqq-frontend-core": "1.0.113",
"@kingsrook/qqq-frontend-core": "1.0.114",
"@mui/icons-material": "5.4.1",
"@mui/material": "5.11.1",
"@mui/styles": "5.11.1",

17
src/qqq/components/forms/DynamicForm.tsx
View File

@ -57,7 +57,7 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
<MDTypography variant="h5">{formLabel}</MDTypography>
</Box>
<Box mt={1.625}>
<Grid container spacing={3}>
<Grid container lg={12} display="flex" spacing={3}>
{formFields
&& Object.keys(formFields).length > 0
&& Object.keys(formFields).map((fieldName: any) =>
@ -74,13 +74,14 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
}
let formattedHelpContent = <HelpContent helpContents={field?.fieldMetaData?.helpContents} roles={helpRoles} helpContentKey={`${helpContentKeyPrefix ?? ""}field:${fieldName}`} />;
if(formattedHelpContent)
if (formattedHelpContent)
{
formattedHelpContent = <Box color="#757575" fontSize="0.875rem" mt="-0.25rem">{formattedHelpContent}</Box>
formattedHelpContent = <Box color="#757575" fontSize="0.875rem" mt="-0.25rem">{formattedHelpContent}</Box>;
}
const labelElement = <DynamicFormFieldLabel name={field.name} label={field.label} />;
let itemLG = (field?.fieldMetaData?.gridColumns && field?.fieldMetaData?.gridColumns > 0) ? field.fieldMetaData.gridColumns : 6;
let itemXS = 12;
let itemSM = 6;
@ -92,13 +93,13 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
const fileUploadAdornment = field.fieldMetaData?.getAdornment(AdornmentType.FILE_UPLOAD);
const width = fileUploadAdornment?.values?.get("width") ?? "half";
if(width == "full")
if (width == "full")
{
itemSM = 12;
}
return (
<Grid item xs={itemXS} sm={itemSM} key={fieldName}>
<Grid item lg={itemLG} xs={itemXS} sm={itemSM} flexDirection="column" key={fieldName}>
{labelElement}
<FileInputField field={field} record={record} errorMessage={errors[fieldName]} />
</Grid>
@ -114,10 +115,10 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
Object.keys(values).forEach((key) =>
{
otherValuesMap.set(key, values[key]);
})
});
return (
<Grid item xs={itemXS} sm={itemSM} key={fieldName}>
<Grid item lg={itemLG} xs={itemXS} sm={itemSM} key={fieldName}>
{labelElement}
<DynamicSelect
fieldPossibleValueProps={field.possibleValueProps}
@ -138,7 +139,7 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
// everything else!! //
///////////////////////
return (
<Grid item xs={itemXS} sm={itemSM} key={fieldName}>
<Grid item lg={itemLG} xs={itemXS} sm={itemSM} key={fieldName}>
{labelElement}
<QDynamicFormField
id={field.name}

11
src/qqq/pages/records/view/RecordView.tsx
View File

@ -92,9 +92,9 @@ const TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT = "qqq.tableVariant";
/*******************************************************************************
**
*******************************************************************************/
export function renderSectionOfFields(key: string, fieldNames: string[], tableMetaData: QTableMetaData, helpHelpActive: boolean, record: QRecord, fieldMap?: { [name: string]: QFieldMetaData }, styleOverrides?: {label?: SxProps, value?: SxProps})
export function renderSectionOfFields(key: string, fieldNames: string[], tableMetaData: QTableMetaData, helpHelpActive: boolean, record: QRecord, fieldMap?: { [name: string]: QFieldMetaData }, styleOverrides?: { label?: SxProps, value?: SxProps })
{
return <Box key={key} display="flex" flexDirection="column" py={1} pr={2}>
return <Grid container lg={12} key={key} display="flex" py={1} pr={2}>
{
fieldNames.map((fieldName: string) =>
{
@ -103,6 +103,7 @@ export function renderSectionOfFields(key: string, fieldNames: string[], tableMe
if (field != null)
{
let label = field.label;
let gridColumns = (field.gridColumns && field.gridColumns > 0) ? field.gridColumns : 12;
const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
const showHelp = helpHelpActive || hasHelpContent(field.helpContents, helpRoles);
@ -111,7 +112,7 @@ export function renderSectionOfFields(key: string, fieldNames: string[], tableMe
const labelElement = <Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)" sx={{cursor: "default", ...(styleOverrides?.label ?? {})}}>{label}:</Typography>;
return (
<Box key={fieldName} flexDirection="row" pr={2}>
<Grid item key={fieldName} lg={gridColumns} flexDirection="column" pr={2}>
<>
{
showHelp && formattedHelpContent ? <Tooltip title={formattedHelpContent}>{labelElement}</Tooltip> : labelElement
@ -121,12 +122,12 @@ export function renderSectionOfFields(key: string, fieldNames: string[], tableMe
{ValueUtils.getDisplayValue(field, record, "view", fieldName)}
</Typography>
</>
</Box>
</Grid>
);
}
})
}
</Box>;
</Grid>;
}