Updates for supporting blobs

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.67",
+      "@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)
@@ -378,17 +378,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]}]`)
@@ -402,6 +403,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

@@ -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;
+}

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
@@ -249,6 +249,9 @@ export default class DataGridUtils
                columnWidth = 75;
                filterOperators = QGridBooleanOperators;
                break;
+            case QFieldType.BLOB:
+               filterOperators = QGridBlobOperators;
+               break;
             default:
             // noop - leave as string
          }
@@ -287,11 +290,6 @@ export default class DataGridUtils
          filterOperators: filterOperators,
       };
 
-      if(field.type == QFieldType.BLOB)
-      {
-         column.filterable = false;
-      }
-
       column.renderCell = (cellValues: any) => (
          (cellValues.value)
       );

src/qqq/utils/qqq/ValueUtils.tsx

@@ -197,7 +197,7 @@ class ValueUtils
 
       if (field.type == QFieldType.BLOB)
       {
-         return (<BlobComponent url={rawValue} filename={displayValue} />);
+         return (<BlobComponent field={field} url={rawValue} filename={displayValue} usage={usage} />);
       }
 
       return (ValueUtils.getUnadornedValueForDisplay(field, rawValue, displayValue));
@@ -580,15 +580,17 @@ function RevealComponent({fieldName, value, usage}: {fieldName: string, value: s
 
 interface BlobComponentProps
 {
+   field: QFieldMetaData;
    url: string;
    filename: string;
+   usage: "view" | "query";
 }
 
 BlobComponent.defaultProps = {
-   foo: null,
+   usage: "view",
 };
 
-function BlobComponent({url, filename}: BlobComponentProps): JSX.Element
+function BlobComponent({field, url, filename, usage}: BlobComponentProps): JSX.Element
 {
    const download = (event: React.MouseEvent<HTMLSpanElement>) =>
    {
@@ -602,24 +604,29 @@ function BlobComponent({url, filename}: BlobComponentProps): JSX.Element
       HtmlUtils.openInNewWindow(url, filename);
    };
 
-   const useBlobIconStyles = makeStyles({
+   if(!filename || !url)
-      blobIcon: {
+   {
-         marginLeft: "0.25rem",
+      return (<React.Fragment />);
-         marginRight: "0.25rem",
+   }
-         cursor: "pointer"
-      }
-   })
-   const classes = useBlobIconStyles();
 
+   const tooltipPlacement = usage == "view" ? "bottom" : "right";
+
+   // todo - thumbnails if adorned?
+   // challenge is - must post (for auth header)...
    return (
       <Box display="inline-flex">
-         {filename}
+         {
-         <Tooltip placement="right" title="Open file">
+            usage == "view" && filename
-            <Icon className={classes.blobIcon} fontSize="small" onClick={(e) => open(e)}>open_in_new</Icon>
+         }
+         <Tooltip placement={tooltipPlacement} title="Open file">
+            <Icon className={"blobIcon"} fontSize="small" onClick={(e) => open(e)}>open_in_new</Icon>
          </Tooltip>
-         <Tooltip placement="right" title="Download file">
+         <Tooltip placement={tooltipPlacement} title="Download file">
-            <Icon className={classes.blobIcon} fontSize="small" onClick={(e) => download(e)}>save_alt</Icon>
+            <Icon className={"blobIcon"} fontSize="small" onClick={(e) => download(e)}>save_alt</Icon>
          </Tooltip>
+         {
+            usage == "query" && filename
+         }
       </Box>
    );
 }