QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-17 21:00:45 +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

2
package.json
View File

@ -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",

4
src/qqq/components/audits/AuditBody.tsx
View File

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

29
src/qqq/components/forms/DynamicForm.tsx
View File

@ -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>

35
src/qqq/components/forms/EntityForm.tsx
View File

@ -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)

14
src/qqq/pages/records/query/GridFilterOperators.tsx
View File

@ -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 //

9
src/qqq/styles/qqq-override-styles.css
View File

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

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

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

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