From 6076c4ddfd9900e0d9a1d53b1b96af3f9897dc4a Mon Sep 17 00:00:00 2001
From: Tim Chamberlain <tchamberlain76@gmail.com>
Date: Wed, 19 Feb 2025 17:05:10 -0600
Subject: [PATCH] CE-2261: updated to respect field column widths on view and
 edit forms

---
 package.json                              |  2 +-
 src/qqq/components/forms/DynamicForm.tsx  | 17 +++++++++--------
 src/qqq/pages/records/view/RecordView.tsx | 11 ++++++-----
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 987fab6..102e896 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/qqq/components/forms/DynamicForm.tsx b/src/qqq/components/forms/DynamicForm.tsx
index 5a66314..62ae6ba 100644
--- a/src/qqq/components/forms/DynamicForm.tsx
+++ b/src/qqq/components/forms/DynamicForm.tsx
@@ -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}
diff --git a/src/qqq/pages/records/view/RecordView.tsx b/src/qqq/pages/records/view/RecordView.tsx
index ca7789c..1c076e2 100644
--- a/src/qqq/pages/records/view/RecordView.tsx
+++ b/src/qqq/pages/records/view/RecordView.tsx
@@ -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>;
 }