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

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",

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>;

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>

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)

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 //

src/qqq/styles/qqq-override-styles.css

@@ -406,3 +406,10 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
    position: relative;
    top: 3px;
 }
+
+.blobIcon
+{
+   margin-left: 0.25rem;
+   margin-right: 0.25rem;
+   cursor: pointer;
+}

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,

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>`);
+   };
+
+
 }

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;