Merge branch 'feature/CTLE-153-default-ct-live-packing-slips-to-deposco' into integration/sprint-26

2025-07-18 05:10:45 +00:00 · 2023-06-06 10:04:28 -05:00
parent b7addd315b 48ebcb63c0
commit b9adcee4b8
9 changed files with 240 additions and 18 deletions
--- 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.66",
+      "@kingsrook/qqq-frontend-core": "1.0.68",
      "@mui/icons-material": "5.4.1",
      "@mui/material": "5.11.1",
      "@mui/styles": "5.11.1",
--- a/src/qqq/components/audits/AuditBody.tsx
+++ b/src/qqq/components/audits/AuditBody.tsx
@ -108,6 +108,10 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
         {
            return (<>{fieldLabel}: Removed value {(oldValue)}</>);
         }
+         else if(message)
+         {
+            return (<>{message}</>);
+         }

         /*
         const fieldLabel = <span style={{fontWeight: "700", color: "rgb(52, 71, 103)"}}>{tableMetaData?.fields?.get(fieldName)?.label ?? fieldName}</span>;
--- a/src/qqq/components/forms/DynamicForm.tsx
+++ b/src/qqq/components/forms/DynamicForm.tsx
@ -19,15 +19,20 @@
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

-import {colors} from "@mui/material";
+import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
+import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
+import {colors, Icon, InputLabel} from "@mui/material";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Grid from "@mui/material/Grid";
+import Tooltip from "@mui/material/Tooltip";
 import {useFormikContext} from "formik";
 import React, {useState} from "react";
 import QDynamicFormField from "qqq/components/forms/DynamicFormField";
 import DynamicSelect from "qqq/components/forms/DynamicSelect";
 import MDTypography from "qqq/components/legacy/MDTypography";
+import ValueUtils from "qqq/utils/qqq/ValueUtils";

 interface Props
 {
@ -35,6 +40,7 @@ interface Props
   formData: any;
   bulkEditMode?: boolean;
   bulkEditSwitchChangeHandler?: any;
+   record?: QRecord;
 }

 function QDynamicForm(props: Props): JSX.Element
@ -60,6 +66,14 @@ function QDynamicForm(props: Props): JSX.Element
      formikProps.setFieldValue(field.name, event.currentTarget.files[0]);
   };

+   const removeFile = (fieldName: string) =>
+   {
+      setFileName(null);
+      formikProps.setFieldValue(fieldName, null);
+      props.record?.values.delete(fieldName)
+      props.record?.displayValues.delete(fieldName)
+   };
+
   const bulkEditSwitchChanged = (name: string, value: boolean) =>
   {
      bulkEditSwitchChangeHandler(name, value);
@ -94,10 +108,23 @@ function QDynamicForm(props: Props): JSX.Element

                     if (field.type === "file")
                     {
+                        const pseudoField = new QFieldMetaData({name: fieldName, type: QFieldType.BLOB});
                        return (
                           <Grid item xs={12} sm={6} key={fieldName}>
                              <Box mb={1.5}>

+                                 <InputLabel shrink={true}>{field.label}</InputLabel>
+                                 {
+                                    props.record && props.record.values.get(fieldName) && <Box fontSize="0.875rem" pb={1}>
+                                       Current File:
+                                       <Box display="inline-flex" pl={1}>
+                                          {ValueUtils.getDisplayValue(pseudoField, props.record, "view")}
+                                          <Tooltip placement="bottom" title="Remove current file">
+                                             <Icon className="blobIcon" fontSize="small" onClick={(e) => removeFile(fieldName)}>delete</Icon>
+                                          </Tooltip>
+                                       </Box>
+                                    </Box>
+                                 }
                                 <Box display="flex" alignItems="center">
                                    <Button variant="outlined" component="label">
                                       <span style={{color: colors.lightBlue[500]}}>Choose file to upload</span>
--- a/src/qqq/components/forms/EntityForm.tsx
+++ b/src/qqq/components/forms/EntityForm.tsx
@ -139,7 +139,7 @@ function EntityForm(props: Props): JSX.Element
      {
         return <div>Loading...</div>;
      }
-      return <QDynamicForm formData={formData} />;
+      return <QDynamicForm formData={formData} record={record} />;
   }

   if (!asyncLoadInited)
@ -376,17 +376,18 @@ function EntityForm(props: Props): JSX.Element
      actions.setSubmitting(true);
      await (async () =>
      {
-         //////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         // (1) convert date-time fields from user's time-zone into UTC                                              //
-         // (2) if there's an initial value which matches the value (e.g., from the form), then remove that field    //
-         // from the set of values that we'll submit to the backend.  This is to deal with the fact that our         //
-         // date-times in the UI (e.g., the form field) only go to the minute - so they kinda always end up          //
-         // changing from, say, 12:15:30 to just 12:15:00... this seems to get around that, for cases when the       //
-         // user didn't change the value in the field (but if the user did change the value, then we will submit it) //
-         //////////////////////////////////////////////////////////////////////////////////////////////////////////////
         for(let fieldName of tableMetaData.fields.keys())
         {
            const fieldMetaData = tableMetaData.fields.get(fieldName);
+
+            //////////////////////////////////////////////////////////////////////////////////////////////////////////////
+            // (1) convert date-time fields from user's time-zone into UTC                                              //
+            // (2) if there's an initial value which matches the value (e.g., from the form), then remove that field    //
+            // from the set of values that we'll submit to the backend.  This is to deal with the fact that our         //
+            // date-times in the UI (e.g., the form field) only go to the minute - so they kinda always end up          //
+            // changing from, say, 12:15:30 to just 12:15:00... this seems to get around that, for cases when the       //
+            // user didn't change the value in the field (but if the user did change the value, then we will submit it) //
+            //////////////////////////////////////////////////////////////////////////////////////////////////////////////
            if(fieldMetaData.type === QFieldType.DATE_TIME && values[fieldName])
            {
               console.log(`DateTime ${fieldName}: Initial value: [${initialValues[fieldName]}] -> [${values[fieldName]}]`)
@ -400,6 +401,22 @@ function EntityForm(props: Props): JSX.Element
                  values[fieldName] = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(values[fieldName]);
               }
            }
+
+            ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+            // for BLOB fields, there are 3 possible cases:                                                               //
+            // 1) they are a File object - in which case, cool, send them through to the backend to have bytes stored.    //
+            // 2) they are null - in which case, cool, send them through to the backend to be set to null.                //
+            // 3) they are a String, which is their URL path to download them... in that case, don't submit them to       //
+            // the backend at all, so they'll stay what they were.  do that by deleting them from the values object here. //
+            ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+            if(fieldMetaData.type === QFieldType.BLOB)
+            {
+               if(typeof values[fieldName] === "string")
+               {
+                  console.log(`${fieldName} value was a string, so, we're deleting it from the values array, to not submit it to the backend, to not change it.`);
+                  delete(values[fieldName]);
+               }
+            }
         }

         if (props.id !== null)
--- a/src/qqq/pages/records/query/GridFilterOperators.tsx
+++ b/src/qqq/pages/records/query/GridFilterOperators.tsx
@ -707,6 +707,20 @@ const booleanNotEmptyOperator: GridFilterOperator = {

 export const QGridBooleanOperators = [booleanTrueOperator, booleanFalseOperator, booleanEmptyOperator, booleanNotEmptyOperator];

+const blobEmptyOperator: GridFilterOperator = {
+   label: "is empty",
+   value: "isEmpty",
+   getApplyFilterFn: (filterItem: GridFilterItem, column: GridColDef) => null
+};
+
+const blobNotEmptyOperator: GridFilterOperator = {
+   label: "is not empty",
+   value: "isNotEmpty",
+   getApplyFilterFn: (filterItem: GridFilterItem, column: GridColDef) => null
+};
+
+export const QGridBlobOperators = [blobNotEmptyOperator, blobEmptyOperator];
+

 ///////////////////////////////////////
 // input element for possible values //
--- a/src/qqq/styles/qqq-override-styles.css
+++ b/src/qqq/styles/qqq-override-styles.css
@ -405,4 +405,11 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
   height: 15px !important;
   position: relative;
   top: 3px;
-}
+}
+
+.blobIcon
+{
+   margin-left: 0.25rem;
+   margin-right: 0.25rem;
+   cursor: pointer;
+}
--- a/src/qqq/utils/DataGridUtils.tsx
+++ b/src/qqq/utils/DataGridUtils.tsx
@ -29,7 +29,7 @@ import {getGridDateOperators, GridColDef, GridRowsProp} from "@mui/x-data-grid-p
 import {GridFilterOperator} from "@mui/x-data-grid/models/gridFilterOperator";
 import React from "react";
 import {Link} from "react-router-dom";
-import {buildQGridPvsOperators, QGridBooleanOperators, QGridNumericOperators, QGridStringOperators} from "qqq/pages/records/query/GridFilterOperators";
+import {buildQGridPvsOperators, QGridBlobOperators, QGridBooleanOperators, QGridNumericOperators, QGridStringOperators} from "qqq/pages/records/query/GridFilterOperators";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";

 export default class DataGridUtils
@ -168,6 +168,23 @@ export default class DataGridUtils
      sortedKeys.forEach((key) =>
      {
         const field = tableMetaData.fields.get(key);
+         if(field.isHeavy)
+         {
+            if(field.type == QFieldType.BLOB)
+            {
+               ////////////////////////////////////////////////////////
+               // assume we DO want heavy blobs - as download links. //
+               ////////////////////////////////////////////////////////
+            }
+            else
+            {
+               ///////////////////////////////////////////////////
+               // otherwise, skip heavy fields on query screen. //
+               ///////////////////////////////////////////////////
+               return;
+            }
+         }
+
         const column = this.makeColumnFromField(field, tableMetaData, namePrefix, labelPrefix);

         if(key === tableMetaData.primaryKeyField && linkBase && namePrefix == null)
@ -232,6 +249,9 @@ export default class DataGridUtils
               columnWidth = 75;
               filterOperators = QGridBooleanOperators;
               break;
+            case QFieldType.BLOB:
+               filterOperators = QGridBlobOperators;
+               break;
            default:
            // noop - leave as string
         }
@ -244,6 +264,7 @@ export default class DataGridUtils
         const widths: Map<string, number> = new Map<string, number>([
            ["small", 100],
            ["medium", 200],
+            ["medlarge", 300],
            ["large", 400],
            ["xlarge", 600]
         ]);
@ -260,7 +281,7 @@ export default class DataGridUtils
      let headerName = labelPrefix ? labelPrefix + field.label : field.label;
      let fieldName = namePrefix ? namePrefix + field.name : field.name;

-      const column = {
+      const column: GridColDef = {
         field: fieldName,
         type: columnType,
         headerName: headerName,
--- a/src/qqq/utils/HtmlUtils.ts
+++ b/src/qqq/utils/HtmlUtils.ts
@ -19,6 +19,8 @@
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

+import Client from "qqq/utils/qqq/Client";
+
 /*******************************************************************************
 ** Utility functions for basic html/webpage/browser things.
 *******************************************************************************/
@ -59,4 +61,72 @@ export default class HtmlUtils
      document.body.removeChild(element);
   };

+   /*******************************************************************************
+    ** Download a server-side generated file.
+    *******************************************************************************/
+   static downloadUrlViaIFrame = (url: string) =>
+   {
+      if (document.getElementById("downloadIframe"))
+      {
+         document.body.removeChild(document.getElementById("downloadIframe"));
+      }
+
+      const iframe = document.createElement("iframe");
+      iframe.setAttribute("id", "downloadIframe");
+      iframe.setAttribute("name", "downloadIframe");
+      iframe.style.display = "none";
+      // todo - onload event handler to let us know when done?
+      document.body.appendChild(iframe);
+
+      const form = document.createElement("form");
+      form.setAttribute("method", "post");
+      form.setAttribute("action", url);
+      form.setAttribute("target", "downloadIframe");
+      iframe.appendChild(form);
+
+      const authorizationInput = document.createElement("input");
+      authorizationInput.setAttribute("type", "hidden");
+      authorizationInput.setAttribute("id", "authorizationInput");
+      authorizationInput.setAttribute("name", "Authorization");
+      authorizationInput.setAttribute("value", Client.getInstance().getAuthorizationHeaderValue());
+      form.appendChild(authorizationInput);
+
+      const downloadInput = document.createElement("input");
+      downloadInput.setAttribute("type", "hidden");
+      downloadInput.setAttribute("name", "download");
+      downloadInput.setAttribute("value", "1");
+      form.appendChild(downloadInput);
+
+      form.submit();
+   };
+
+   /*******************************************************************************
+    ** Open a server-side generated file from a url in a new window.
+    *******************************************************************************/
+   static openInNewWindow = (url: string, filename: string) =>
+   {
+      const openInWindow = window.open("", "_blank");
+      openInWindow.document.write(`<html lang="en">
+            <head>
+               <style>
+                  * { font-family: "Roboto","Helvetica","Arial",sans-serif; }
+               </style>
+               <title>${filename}</title>
+               <script>
+                  setTimeout(() =>
+                  {
+                     document.getElementById("exportForm").submit();
+                  }, 1);
+               </script>
+            </head>
+            <body>
+               Opening ${filename}...
+               <form id="exportForm" method="post" action="${url}" >
+                  <input type="hidden" name="Authorization" value="${Client.getInstance().getAuthorizationHeaderValue()}">
+               </form>
+            </body>
+         </html>`);
+   };
+
+
 }
--- a/src/qqq/utils/qqq/ValueUtils.tsx
+++ b/src/qqq/utils/qqq/ValueUtils.tsx
@ -28,11 +28,14 @@ import "datejs"; // https://github.com/datejs/Datejs
 import {Chip, ClickAwayListener, Icon} from "@mui/material";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
+import {makeStyles} from "@mui/styles";
 import parse from "html-react-parser";
 import React, {Fragment, useReducer, useState} from "react";
 import AceEditor from "react-ace";
 import {Link} from "react-router-dom";
+import HtmlUtils from "qqq/utils/HtmlUtils";
 import Client from "qqq/utils/qqq/Client";

 /*******************************************************************************
@ -192,6 +195,11 @@ class ValueUtils
         );
      }

+      if (field.type == QFieldType.BLOB)
+      {
+         return (<BlobComponent field={field} url={rawValue} filename={displayValue} usage={usage} />);
+      }
+
      return (ValueUtils.getUnadornedValueForDisplay(field, rawValue, displayValue));
   }

@ -500,9 +508,9 @@ function CodeViewer({name, mode, code}: {name: string; mode: string; code: strin
      </Box>);
 }

-////////////////////////////////////////////////////////////////////////////////////////////////
-// little private component here, for rendering an AceEditor with some buttons/controls/state //
-////////////////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+// little private component here, for rendering "secret-ish" values, that you can click to reveal or copy //
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
 function RevealComponent({fieldName, value, usage}: {fieldName: string, value: string, usage: string;}): JSX.Element
 {
   const [adornmentFieldsMap, setAdornmentFieldsMap] = useState(new Map<string, boolean>);
@ -561,7 +569,7 @@ function RevealComponent({fieldName, value, usage}: {fieldName: string, value: s
                     </ClickAwayListener>
                  </Box>
               ):(
-                  <Box><Icon onClick={(e) => handleRevealIconClick(e, fieldName)} sx={{cursor: "pointer", fontSize: "15px !important", position: "relative", top: "3px", marginRight: "5px"}}>visibility_off</Icon>{displayValue}</Box>
+                  <Box display="inline"><Icon onClick={(e) => handleRevealIconClick(e, fieldName)} sx={{cursor: "pointer", fontSize: "15px !important", position: "relative", top: "3px", marginRight: "5px"}}>visibility_off</Icon>{displayValue}</Box>
               )
            )
         }
@ -570,5 +578,59 @@ function RevealComponent({fieldName, value, usage}: {fieldName: string, value: s
 }


+interface BlobComponentProps
+{
+   field: QFieldMetaData;
+   url: string;
+   filename: string;
+   usage: "view" | "query";
+}
+
+BlobComponent.defaultProps = {
+   usage: "view",
+};
+
+function BlobComponent({field, url, filename, usage}: BlobComponentProps): JSX.Element
+{
+   const download = (event: React.MouseEvent<HTMLSpanElement>) =>
+   {
+      event.stopPropagation();
+      HtmlUtils.downloadUrlViaIFrame(url);
+   };
+
+   const open = (event: React.MouseEvent<HTMLSpanElement>) =>
+   {
+      event.stopPropagation();
+      HtmlUtils.openInNewWindow(url, filename);
+   };
+
+   if(!filename || !url)
+   {
+      return (<React.Fragment />);
+   }
+
+   const tooltipPlacement = usage == "view" ? "bottom" : "right";
+
+   // todo - thumbnails if adorned?
+   // challenge is - must post (for auth header)...
+   return (
+      <Box display="inline-flex">
+         {
+            usage == "view" && filename
+         }
+         <Tooltip placement={tooltipPlacement} title="Open file">
+            <Icon className={"blobIcon"} fontSize="small" onClick={(e) => open(e)}>open_in_new</Icon>
+         </Tooltip>
+         <Tooltip placement={tooltipPlacement} title="Download file">
+            <Icon className={"blobIcon"} fontSize="small" onClick={(e) => download(e)}>save_alt</Icon>
+         </Tooltip>
+         {
+            usage == "query" && filename
+         }
+      </Box>
+   );
+}
+
+

 export default ValueUtils;