QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 13:20:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updates for supporting blobs

Browse Source
This commit is contained in:
darin.kelkhoff
2023-05-30 10:20:01 -05:00
parent 084ed0732d
commit 48ebcb63c0
8 changed files with 108 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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({
blobIcon: {
marginLeft: "0.25rem",
marginRight: "0.25rem",
cursor: "pointer"
}
})
const classes = useBlobIconStyles();
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">
{filename}
<Tooltip placement="right" title="Open file">
<Icon className={classes.blobIcon} fontSize="small" onClick={(e) => open(e)}>open_in_new</Icon>
{
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="right" title="Download file">
<Icon className={classes.blobIcon} fontSize="small" onClick={(e) => download(e)}>save_alt</Icon>
<Tooltip placement={tooltipPlacement} title="Download file">
<Icon className={"blobIcon"} fontSize="small" onClick={(e) => download(e)}>save_alt</Icon>
</Tooltip>
{
usage == "query" && filename
}
</Box>
);
}