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

Merge branch 'feature/sprint-27' into feature/custom-filter-panel

Browse Source
This commit is contained in:
darin.kelkhoff
2023-06-20 10:17:56 -05:00
committed by GitHub
parent b010f10560 dd3f126b69
commit 5b6167ddb8
23 changed files with 3387 additions and 2275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,7 +29,7 @@ import {GridColDef, GridFilterItem, GridRowsProp} from "@mui/x-data-grid-pro";
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";
@ -197,6 +197,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)
@ -262,6 +279,9 @@ export default class DataGridUtils
columnWidth = 75;
filterOperators = QGridBooleanOperators;
break;
case QFieldType.BLOB:
filterOperators = QGridBlobOperators;
break;
default:
// noop - leave as string
}
@ -274,6 +294,7 @@ export default class DataGridUtils
const widths: Map<string, number> = new Map<string, number>([
["small", 100],
["medium", 200],
["medlarge", 300],
["large", 400],
["xlarge", 600]
]);
@ -290,7 +311,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,

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

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

47
src/qqq/utils/qqq/FilterUtils.ts
View File

@ -488,6 +488,53 @@ class FilterUtils
}
}
if (field && field.type == "DATE" && !values)
{
try
{
const criteria = filterJSON.criteria[i];
if (criteria && criteria.expression)
{
let value = new Date();
let amount = Number(criteria.expression.amount);
switch (criteria.expression.timeUnit)
{
case "MINUTES":
{
amount = amount * 60;
break;
}
case "HOURS":
{
amount = amount * 60 * 60;
break;
}
case "DAYS":
{
amount = amount * 60 * 60 * 24;
break;
}
default:
{
console.log("Unrecognized time unit: " + criteria.expression.timeUnit);
}
}
if (criteria.expression.operator == "MINUS")
{
amount = -amount;
}
value.setTime(value.getTime() + 1000 * amount);
values = [ValueUtils.formatDateISO8601(value)];
}
}
catch (e)
{
console.log(e);
}
}
defaultFilter.items.push({
columnField: criteria.fieldName,
operatorValue: FilterUtils.qqqCriteriaOperatorToGrid(criteria.operator, field, values),

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

@ -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));
}
@ -273,6 +281,16 @@ class ValueUtils
return (`${date.toString("yyyy-MM-ddTHH:mm:ssZ")}`);
}
public static formatDateISO8601(date: Date)
{
if (!(date instanceof Date))
{
date = new Date(date);
}
// @ts-ignore
return (`${date.toString("yyyy-MM-dd")}`);
}
public static formatDateTimeForFileName(date: Date)
{
const zp = (value: number): string => (value < 10 ? `0${value}` : `${value}`);
@ -500,9 +518,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>);
@ -542,7 +560,7 @@ function RevealComponent({fieldName, value, usage}: {fieldName: string, value: s
{
displayValue && (
adornmentFieldsMap.get(fieldName) === true ? (
<Box>
<Box component="span">
<Icon onClick={(e) => handleRevealIconClick(e, fieldName)} sx={{cursor: "pointer", fontSize: "15px !important", position: "relative", top: "3px", marginRight: "5px"}}>visibility_on</Icon>
{displayValue}
<ClickAwayListener onClickAway={handleTooltipClose}>
@ -561,7 +579,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 +588,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;