QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-19 05:40:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

CE-1772: updated value utils for non blob file downloads

Browse Source
This commit is contained in:
Tim Chamberlain
2024-11-03 22:18:27 -06:00
parent d2705c3aed
commit 387f09f4ad
8 changed files with 3948 additions and 4521 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/qqq/utils/DataGridUtils.tsx
View File

@ -113,7 +113,7 @@ export default class DataGridUtils
{
console.log(`row-click mouse-up happened ${diff} x or y pixels away from the mouse-down - so not considering it a click.`);
}
}
};
/*******************************************************************************
**
@ -133,13 +133,13 @@ export default class DataGridUtils
row[field.name] = ValueUtils.getDisplayValue(field, record, "query");
});
if(tableMetaData.exposedJoins)
if (tableMetaData.exposedJoins)
{
for (let i = 0; i < tableMetaData.exposedJoins.length; i++)
{
const join = tableMetaData.exposedJoins[i];
if(join?.joinTable?.fields?.values())
if (join?.joinTable?.fields?.values())
{
const fields = [...join.joinTable.fields.values()];
fields.forEach((field) =>
@ -151,15 +151,15 @@ export default class DataGridUtils
}
}
if(!row["id"])
if (!row["id"])
{
row["id"] = record.values.get(tableMetaData.primaryKeyField) ?? row[tableMetaData.primaryKeyField];
if(row["id"] === null || row["id"] === undefined)
if (row["id"] === null || row["id"] === undefined)
{
/////////////////////////////////////////////////////////////////////////////////////////
// DataGrid gets very upset about a null or undefined here, so, try to make it happier //
/////////////////////////////////////////////////////////////////////////////////////////
if(!allowEmptyId)
if (!allowEmptyId)
{
row["id"] = "--";
}
@ -170,7 +170,7 @@ export default class DataGridUtils
});
return (rows);
}
};
/*******************************************************************************
**
@ -180,24 +180,24 @@ export default class DataGridUtils
const columns = [] as GridColDef[];
this.addColumnsForTable(tableMetaData, linkBase, columns, columnSort, null, null);
if(metaData)
if (metaData)
{
if(tableMetaData.exposedJoins)
if (tableMetaData.exposedJoins)
{
for (let i = 0; i < tableMetaData.exposedJoins.length; i++)
{
const join = tableMetaData.exposedJoins[i];
let joinTableName = join.joinTable.name;
if(metaData.tables.has(joinTableName) && metaData.tables.get(joinTableName).readPermission)
if (metaData.tables.has(joinTableName) && metaData.tables.get(joinTableName).readPermission)
{
let joinLinkBase = null;
joinLinkBase = metaData.getTablePath(join.joinTable);
if(joinLinkBase)
if (joinLinkBase)
{
joinLinkBase += joinLinkBase.endsWith("/") ? "" : "/";
}
if(join?.joinTable?.fields?.values())
if (join?.joinTable?.fields?.values())
{
this.addColumnsForTable(join.joinTable, joinLinkBase, columns, columnSort, joinTableName + ".", join.label + ": ");
}
@ -220,7 +220,7 @@ export default class DataGridUtils
////////////////////////////////////////////////////////////////////////
// this sorted by sections - e.g., manual sorting by the meta-data... //
////////////////////////////////////////////////////////////////////////
if(columnSort === "bySection")
if (columnSort === "bySection")
{
for (let i = 0; i < tableMetaData.sections.length; i++)
{
@ -241,19 +241,23 @@ export default class DataGridUtils
///////////////////////////
// sort by labels... mmm //
///////////////////////////
sortedKeys.push(...tableMetaData.fields.keys())
sortedKeys.push(...tableMetaData.fields.keys());
sortedKeys.sort((a: string, b: string): number =>
{
return (tableMetaData.fields.get(a).label.localeCompare(tableMetaData.fields.get(b).label))
})
return (tableMetaData.fields.get(a).label.localeCompare(tableMetaData.fields.get(b).label));
});
}
sortedKeys.forEach((key) =>
{
const field = tableMetaData.fields.get(key);
if(field.isHeavy)
if (!field)
{
if(field.type == QFieldType.BLOB)
return;
}
if (field.isHeavy)
{
if (field.type == QFieldType.BLOB)
{
////////////////////////////////////////////////////////
// assume we DO want heavy blobs - as download links. //
@ -270,7 +274,7 @@ export default class DataGridUtils
const column = this.makeColumnFromField(field, tableMetaData, namePrefix, labelPrefix);
if(key === tableMetaData.primaryKeyField && linkBase && namePrefix == null)
if (key === tableMetaData.primaryKeyField && linkBase && namePrefix == null)
{
columns.splice(0, 0, column);
}
@ -346,9 +350,9 @@ export default class DataGridUtils
(cellValues.value)
);
const helpRoles = ["QUERY_SCREEN", "READ_SCREENS", "ALL_SCREENS"]
const helpRoles = ["QUERY_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
const showHelp = hasHelpContent(field.helpContents, helpRoles); // todo - maybe - take helpHelpActive from context all the way down to here?
if(showHelp)
if (showHelp)
{
const formattedHelpContent = <HelpContent helpContents={field.helpContents} roles={helpRoles} heading={headerName} helpContentKey={`table:${tableMetaData.name};field:${fieldName}`} />;
column.renderHeader = (params: GridColumnHeaderParams) => (
@ -361,7 +365,7 @@ export default class DataGridUtils
}
return (column);
}
};
/*******************************************************************************
@ -390,7 +394,7 @@ export default class DataGridUtils
}
}
if(field.possibleValueSourceName)
if (field.possibleValueSourceName)
{
return (200);
}
@ -415,6 +419,6 @@ export default class DataGridUtils
}
return (200);
}
};
}

24
src/qqq/utils/HtmlUtils.ts
View File

@ -19,7 +19,8 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import Client from "qqq/utils/qqq/Client";
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
/*******************************************************************************
** Utility functions for basic html/webpage/browser things.
@ -68,10 +69,15 @@ export default class HtmlUtils
** it was originally built like this when we had to submit full access token to backend...
**
*******************************************************************************/
static downloadUrlViaIFrame = (url: string, filename: string) =>
static downloadUrlViaIFrame = (field: QFieldMetaData, url: string, filename: string) =>
{
if(url.startsWith("data:"))
if (url.startsWith("data:") || url.startsWith("http"))
{
if (url.startsWith("http"))
{
url += encodeURIComponent(`?response-content-disposition=attachment; ${filename}`);
}
const link = document.createElement("a");
link.download = filename;
link.href = url;
@ -93,8 +99,14 @@ export default class HtmlUtils
// todo - onload event handler to let us know when done?
document.body.appendChild(iframe);
var method = "get";
if (QFieldType.BLOB == field.type)
{
method = "post";
}
const form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("method", method);
form.setAttribute("action", url);
form.setAttribute("target", "downloadIframe");
iframe.appendChild(form);
@ -117,7 +129,7 @@ export default class HtmlUtils
*******************************************************************************/
static openInNewWindow = (url: string, filename: string) =>
{
if(url.startsWith("data:"))
if (url.startsWith("data:"))
{
/////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////
@ -153,4 +165,4 @@ export default class HtmlUtils
};
}
}

44
src/qqq/utils/qqq/ValueUtils.tsx
View File

@ -28,18 +28,17 @@ 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";
import "ace-builds/src-noconflict/ace";
import "ace-builds/src-noconflict/mode-sql";
import React, {Fragment, useReducer, useState} from "react";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-velocity";
import {Link} from "react-router-dom";
/*******************************************************************************
** Utility class for working with QQQ Values
@ -198,7 +197,7 @@ class ValueUtils
);
}
if (field.type == QFieldType.BLOB)
if (field.type == QFieldType.BLOB || field.hasAdornment(AdornmentType.FILE_DOWNLOAD))
{
return (<BlobComponent field={field} url={rawValue} filename={displayValue} usage={usage} />);
}
@ -219,7 +218,7 @@ class ValueUtils
if (field.type === QFieldType.DATE_TIME)
{
if(displayValue && displayValue != rawValue)
if (displayValue && displayValue != rawValue)
{
//////////////////////////////////////////////////////////////////////////////
// if the date-time actually has a displayValue set, and it isn't just the //
@ -276,7 +275,7 @@ class ValueUtils
// to millis) back to it //
////////////////////////////////////////////////////////////////////////////////////
date = new Date(date);
date.setTime(date.getTime() + date.getTimezoneOffset() * 60 * 1000)
date.setTime(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
}
// @ts-ignore
return (`${date.toString("yyyy-MM-dd")}`);
@ -474,7 +473,7 @@ class ValueUtils
*******************************************************************************/
public static cleanForCsv(param: any): string
{
if(param === undefined || param === null)
if (param === undefined || param === null)
{
return ("");
}
@ -499,7 +498,7 @@ class ValueUtils
////////////////////////////////////////////////////////////////////////////////////////////////
// little private component here, for rendering an AceEditor with some buttons/controls/state //
////////////////////////////////////////////////////////////////////////////////////////////////
function CodeViewer({name, mode, code}: {name: string; mode: string; code: string;}): JSX.Element
function CodeViewer({name, mode, code}: { name: string; mode: string; code: string; }): JSX.Element
{
const [activeCode, setActiveCode] = useState(code);
const [isFormatted, setIsFormatted] = useState(false);
@ -596,7 +595,7 @@ function CodeViewer({name, mode, code}: {name: string; mode: string; code: strin
////////////////////////////////////////////////////////////////////////////////////////////////////////////
// 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
function RevealComponent({fieldName, value, usage}: { fieldName: string, value: string, usage: string; }): JSX.Element
{
const [adornmentFieldsMap, setAdornmentFieldsMap] = useState(new Map<string, boolean>);
const [, forceUpdate] = useReducer((x) => x + 1, 0);
@ -653,7 +652,7 @@ function RevealComponent({fieldName, value, usage}: {fieldName: string, value: s
</Tooltip>
</ClickAwayListener>
</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>
)
)
@ -680,7 +679,7 @@ function BlobComponent({field, url, filename, usage}: BlobComponentProps): JSX.E
const download = (event: React.MouseEvent<HTMLSpanElement>) =>
{
event.stopPropagation();
HtmlUtils.downloadUrlViaIFrame(url, filename);
HtmlUtils.downloadUrlViaIFrame(field, url, filename);
};
const open = (event: React.MouseEvent<HTMLSpanElement>) =>
@ -689,7 +688,7 @@ function BlobComponent({field, url, filename, usage}: BlobComponentProps): JSX.E
HtmlUtils.openInNewWindow(url, filename);
};
if(!filename || !url)
if (!filename || !url)
{
return (<React.Fragment />);
}
@ -704,10 +703,22 @@ function BlobComponent({field, url, filename, usage}: BlobComponentProps): JSX.E
usage == "view" && filename
}
<Tooltip placement={tooltipPlacement} title="Open file">
<Icon className={"blobIcon"} fontSize="small" onClick={(e) => open(e)}>open_in_new</Icon>
{
field.type == QFieldType.BLOB ? (
<Icon className={"blobIcon"} fontSize="small" onClick={(e) => open(e)}>open_in_new</Icon>
) : (
<a style={{color: "inherit"}} rel="noopener noreferrer" href={url} target="_blank"><Icon className={"blobIcon"} fontSize="small">open_in_new</Icon></a>
)
}
</Tooltip>
<Tooltip placement={tooltipPlacement} title="Download file">
<Icon className={"blobIcon"} fontSize="small" onClick={(e) => download(e)}>save_alt</Icon>
{
field.type == QFieldType.BLOB ? (
<Icon className={"blobIcon"} fontSize="small" onClick={(e) => download(e)}>save_alt</Icon>
) : (
<a style={{color: "inherit"}} href={url} download="test.pdf"><Icon className={"blobIcon"} fontSize="small">save_alt</Icon></a>
)
}
</Tooltip>
{
usage == "query" && filename
@ -717,5 +728,4 @@ function BlobComponent({field, url, filename, usage}: BlobComponentProps): JSX.E
}
export default ValueUtils;