Support for BLOB, file downloads

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.67",
       "@mui/icons-material": "5.4.1",
       "@mui/material": "5.11.1",
       "@mui/styles": "5.11.1",

src/qqq/utils/DataGridUtils.tsx

@@ -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)
@@ -244,6 +261,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 +278,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,
@@ -269,6 +287,11 @@ export default class DataGridUtils
          filterOperators: filterOperators,
       };
 
+      if(field.type == QFieldType.BLOB)
+      {
+         column.filterable = false;
+      }
+
       column.renderCell = (cellValues: any) => (
          (cellValues.value)
       );

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 url={rawValue} filename={displayValue} />);
+      }
+
       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,52 @@ function RevealComponent({fieldName, value, usage}: {fieldName: string, value: s
 }
 
 
+interface BlobComponentProps
+{
+   url: string;
+   filename: string;
+}
+
+BlobComponent.defaultProps = {
+   foo: null,
+};
+
+function BlobComponent({url, filename}: 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);
+   };
+
+   const useBlobIconStyles = makeStyles({
+      blobIcon: {
+         marginLeft: "0.25rem",
+         marginRight: "0.25rem",
+         cursor: "pointer"
+      }
+   })
+   const classes = useBlobIconStyles();
+
+   return (
+      <Box display="inline-flex">
+         {filename}
+         <Tooltip placement="right" title="Open file">
+            <Icon className={classes.blobIcon} fontSize="small" onClick={(e) => open(e)}>open_in_new</Icon>
+         </Tooltip>
+         <Tooltip placement="right" title="Download file">
+            <Icon className={classes.blobIcon} fontSize="small" onClick={(e) => download(e)}>save_alt</Icon>
+         </Tooltip>
+      </Box>
+   );
+}
+
+
 
 export default ValueUtils;