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

updated on click on query screen with reveal widgets

Browse Source
This commit is contained in:
Tim Chamberlain
2023-05-05 12:59:49 -05:00
parent 0895c614d9
commit 06c78d4dec
2 changed files with 71 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
package-lock.json generated
View File

@ -4948,9 +4948,9 @@
"devOptional": true "devOptional": true
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "14.18.43", "version": "14.18.44",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.43.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.44.tgz",
"integrity": "sha512-n3eFEaoem0WNwLux+k272P0+aq++5o05bA9CfiwKPdYPB5ZambWKdWoeHy7/OJiizMhzg27NLaZ6uzjLTzXceQ==" "integrity": "sha512-Sg79dXC3jrRlG0QOLrK5eq2hRzpU4pkD7xBiYNYJ6r9OitJMxkpTpWf6m3qa2AWzb76uMHx+6x5T1Y/WAiS3nw=="
}, },
"node_modules/@types/parse-json": { "node_modules/@types/parse-json": {
"version": "4.0.0", "version": "4.0.0",
@ -5053,9 +5053,9 @@
} }
}, },
"node_modules/@types/react-transition-group": { "node_modules/@types/react-transition-group": {
"version": "4.4.5", "version": "4.4.6",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
"integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
"dependencies": { "dependencies": {
"@types/react": "*" "@types/react": "*"
} }
@ -8758,9 +8758,9 @@
} }
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.4.380", "version": "1.4.384",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.380.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.384.tgz",
"integrity": "sha512-XKGdI4pWM78eLH2cbXJHiBnWUwFSzZM7XujsB6stDiGu9AeSqziedP6amNLpJzE3i0rLTcfAwdCTs5ecP5yeSg==", "integrity": "sha512-I97q0MmRAAqj53+a8vZsDkEXBZki+ehYAOPzwtQzALip52aEp2+BJqHFtTlsfjoqVZYwPpHC8wM6MbsSZQ/Eqw==",
"devOptional": true "devOptional": true
}, },
"node_modules/emittery": { "node_modules/emittery": {
@ -15061,9 +15061,9 @@
} }
}, },
"node_modules/lit": { "node_modules/lit": {
"version": "2.7.3", "version": "2.7.4",
"resolved": "https://registry.npmjs.org/lit/-/lit-2.7.3.tgz", "resolved": "https://registry.npmjs.org/lit/-/lit-2.7.4.tgz",
"integrity": "sha512-0a+u+vVbmgSfPu+fyvqjMPBX0Kwbyj9QOv9MbQFZhWGlV2cyk3lEwgfUQgYN+i/lx++1Z3wZknSIp3QCKxHLyg==", "integrity": "sha512-cgD7xrZoYr21mbrkZIuIrj98YTMw/snJPg52deWVV4A8icLyNHI3bF70xsJeAgwTuiq5Kkd+ZR8gybSJDCPB7g==",
"dependencies": { "dependencies": {
"@lit/reactive-element": "^1.6.0", "@lit/reactive-element": "^1.6.0",
"lit-element": "^3.3.0", "lit-element": "^3.3.0",
@ -18402,9 +18402,9 @@
} }
}, },
"node_modules/react-google-drive-picker": { "node_modules/react-google-drive-picker": {
"version": "1.2.1", "version": "1.2.2",
"resolved": "https://registry.npmjs.org/react-google-drive-picker/-/react-google-drive-picker-1.2.1.tgz", "resolved": "https://registry.npmjs.org/react-google-drive-picker/-/react-google-drive-picker-1.2.2.tgz",
"integrity": "sha512-p+7AJo0FKcxzhYkYd+tnNEOOHQOeDKgo2L+UY5DBZnggXcCf/nz0RTqT4eoOCuq6DMtKI6XboKhj9tY75zWf+g==", "integrity": "sha512-x30mYkt9MIwPCgL+fyK75HZ8E6G5L/WGW0bfMG6kbD4NG2kmdlmV9oH5lPa6P6d46y9hj5Y3btAMrZd4JRRkSA==",
"peerDependencies": { "peerDependencies": {
"react": ">=17.0.0", "react": ">=17.0.0",
"react-dom": ">=17.0.0" "react-dom": ">=17.0.0"
@ -21162,9 +21162,9 @@
} }
}, },
"node_modules/webpack": { "node_modules/webpack": {
"version": "5.81.0", "version": "5.82.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.81.0.tgz", "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.82.0.tgz",
"integrity": "sha512-AAjaJ9S4hYCVODKLQTgG5p5e11hiMawBwV2v8MYLE0C/6UAGLuAF4n1qa9GOwdxnicaP+5k6M5HrLmD4+gIB8Q==", "integrity": "sha512-iGNA2fHhnDcV1bONdUu554eZx+XeldsaeQ8T67H6KKHl2nUSwX8Zm7cmzOA46ox/X1ARxf7Bjv8wQ/HsB5fxBg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@types/eslint-scope": "^3.7.3", "@types/eslint-scope": "^3.7.3",
@ -25602,9 +25602,9 @@
"devOptional": true "devOptional": true
}, },
"@types/node": { "@types/node": {
"version": "14.18.43", "version": "14.18.44",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.43.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.44.tgz",
"integrity": "sha512-n3eFEaoem0WNwLux+k272P0+aq++5o05bA9CfiwKPdYPB5ZambWKdWoeHy7/OJiizMhzg27NLaZ6uzjLTzXceQ==" "integrity": "sha512-Sg79dXC3jrRlG0QOLrK5eq2hRzpU4pkD7xBiYNYJ6r9OitJMxkpTpWf6m3qa2AWzb76uMHx+6x5T1Y/WAiS3nw=="
}, },
"@types/parse-json": { "@types/parse-json": {
"version": "4.0.0", "version": "4.0.0",
@ -25707,9 +25707,9 @@
} }
}, },
"@types/react-transition-group": { "@types/react-transition-group": {
"version": "4.4.5", "version": "4.4.6",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
"integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
"requires": { "requires": {
"@types/react": "*" "@types/react": "*"
} }
@ -28497,9 +28497,9 @@
} }
}, },
"electron-to-chromium": { "electron-to-chromium": {
"version": "1.4.380", "version": "1.4.384",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.380.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.384.tgz",
"integrity": "sha512-XKGdI4pWM78eLH2cbXJHiBnWUwFSzZM7XujsB6stDiGu9AeSqziedP6amNLpJzE3i0rLTcfAwdCTs5ecP5yeSg==", "integrity": "sha512-I97q0MmRAAqj53+a8vZsDkEXBZki+ehYAOPzwtQzALip52aEp2+BJqHFtTlsfjoqVZYwPpHC8wM6MbsSZQ/Eqw==",
"devOptional": true "devOptional": true
}, },
"emittery": { "emittery": {
@ -33179,9 +33179,9 @@
} }
}, },
"lit": { "lit": {
"version": "2.7.3", "version": "2.7.4",
"resolved": "https://registry.npmjs.org/lit/-/lit-2.7.3.tgz", "resolved": "https://registry.npmjs.org/lit/-/lit-2.7.4.tgz",
"integrity": "sha512-0a+u+vVbmgSfPu+fyvqjMPBX0Kwbyj9QOv9MbQFZhWGlV2cyk3lEwgfUQgYN+i/lx++1Z3wZknSIp3QCKxHLyg==", "integrity": "sha512-cgD7xrZoYr21mbrkZIuIrj98YTMw/snJPg52deWVV4A8icLyNHI3bF70xsJeAgwTuiq5Kkd+ZR8gybSJDCPB7g==",
"requires": { "requires": {
"@lit/reactive-element": "^1.6.0", "@lit/reactive-element": "^1.6.0",
"lit-element": "^3.3.0", "lit-element": "^3.3.0",
@ -35505,9 +35505,9 @@
} }
}, },
"react-google-drive-picker": { "react-google-drive-picker": {
"version": "1.2.1", "version": "1.2.2",
"resolved": "https://registry.npmjs.org/react-google-drive-picker/-/react-google-drive-picker-1.2.1.tgz", "resolved": "https://registry.npmjs.org/react-google-drive-picker/-/react-google-drive-picker-1.2.2.tgz",
"integrity": "sha512-p+7AJo0FKcxzhYkYd+tnNEOOHQOeDKgo2L+UY5DBZnggXcCf/nz0RTqT4eoOCuq6DMtKI6XboKhj9tY75zWf+g==", "integrity": "sha512-x30mYkt9MIwPCgL+fyK75HZ8E6G5L/WGW0bfMG6kbD4NG2kmdlmV9oH5lPa6P6d46y9hj5Y3btAMrZd4JRRkSA==",
"requires": {} "requires": {}
}, },
"react-is": { "react-is": {
@ -37631,9 +37631,9 @@
"dev": true "dev": true
}, },
"webpack": { "webpack": {
"version": "5.81.0", "version": "5.82.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.81.0.tgz", "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.82.0.tgz",
"integrity": "sha512-AAjaJ9S4hYCVODKLQTgG5p5e11hiMawBwV2v8MYLE0C/6UAGLuAF4n1qa9GOwdxnicaP+5k6M5HrLmD4+gIB8Q==", "integrity": "sha512-iGNA2fHhnDcV1bONdUu554eZx+XeldsaeQ8T67H6KKHl2nUSwX8Zm7cmzOA46ox/X1ARxf7Bjv8wQ/HsB5fxBg==",
"dev": true, "dev": true,
"requires": { "requires": {
"@types/eslint-scope": "^3.7.3", "@types/eslint-scope": "^3.7.3",

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

@ -485,7 +485,7 @@ function RevealComponent({fieldName, value, usage}: {fieldName: string, value: s
const [adornmentFieldsMap, setAdornmentFieldsMap] = useState(new Map<string, boolean>); const [adornmentFieldsMap, setAdornmentFieldsMap] = useState(new Map<string, boolean>);
const [, forceUpdate] = useReducer((x) => x + 1, 0); const [, forceUpdate] = useReducer((x) => x + 1, 0);
const [tooltipOpen, setToolTipOpen] = useState(false); const [tooltipOpen, setToolTipOpen] = useState(false);
const [displayValue, setDisplayValue] = useState(value.replace(/./g, "*")); const [displayValue, setDisplayValue] = useState(value ? value.replace(/./g, "*") : "");
const handleTooltipClose = () => const handleTooltipClose = () =>
{ {
@ -497,8 +497,9 @@ function RevealComponent({fieldName, value, usage}: {fieldName: string, value: s
setToolTipOpen(true); setToolTipOpen(true);
}; };
const handleRevealIconClick = (fieldName: string) => const handleRevealIconClick = (event: React.MouseEvent<HTMLSpanElement>, fieldName: string) =>
{ {
event.stopPropagation();
const displayValue = (adornmentFieldsMap.get(fieldName)) ? value.replace(/./g, "*") : value; const displayValue = (adornmentFieldsMap.get(fieldName)) ? value.replace(/./g, "*") : value;
setDisplayValue(displayValue); setDisplayValue(displayValue);
adornmentFieldsMap.set(fieldName, !adornmentFieldsMap.get(fieldName)); adornmentFieldsMap.set(fieldName, !adornmentFieldsMap.get(fieldName));
@ -506,19 +507,24 @@ function RevealComponent({fieldName, value, usage}: {fieldName: string, value: s
forceUpdate(); forceUpdate();
}; };
const copyToClipboard = (value: string) => const copyToClipboard = (event: React.MouseEvent<HTMLSpanElement>, value: string) =>
{ {
event.stopPropagation();
navigator.clipboard.writeText(value); navigator.clipboard.writeText(value);
setToolTipOpen(true); setToolTipOpen(true);
}; };
return ( return (
usage === "view" && adornmentFieldsMap.get(fieldName) === true ? ( <>
{
displayValue && (
adornmentFieldsMap.get(fieldName) === true ? (
<Box> <Box>
<Icon onClick={() => handleRevealIconClick(fieldName)} sx={{cursor: "pointer", fontSize: "15px !important", position: "relative", top: "3px", marginRight: "5px"}}>visibility_on</Icon> <Icon onClick={(e) => handleRevealIconClick(e, fieldName)} sx={{cursor: "pointer", fontSize: "15px !important", position: "relative", top: "3px", marginRight: "5px"}}>visibility_on</Icon>
{displayValue} {displayValue}
<ClickAwayListener onClickAway={handleTooltipClose}> <ClickAwayListener onClickAway={handleTooltipClose}>
<Tooltip <Tooltip
sx={{zIndex: 1000}}
PopperProps={{ PopperProps={{
disablePortal: true, disablePortal: true,
}} }}
@ -529,13 +535,16 @@ function RevealComponent({fieldName, value, usage}: {fieldName: string, value: s
disableTouchListener disableTouchListener
title="Copied To Clipboard" title="Copied To Clipboard"
> >
<Icon onClick={() => copyToClipboard(value)} sx={{cursor: "pointer", fontSize: "15px !important", position: "relative", top: "3px", marginLeft: "5px"}}>copy</Icon> <Icon onClick={(e) => copyToClipboard(e, value)} sx={{cursor: "pointer", fontSize: "15px !important", position: "relative", top: "3px", marginLeft: "5px"}}>copy</Icon>
</Tooltip> </Tooltip>
</ClickAwayListener> </ClickAwayListener>
</Box> </Box>
):( ):(
<Box><Icon onClick={() => handleRevealIconClick(fieldName)} sx={{cursor: "pointer", fontSize: "15px !important", position: "relative", top: "3px", marginRight: "5px"}}>visibility_off</Icon>{displayValue}</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>
) )
)
}
</>
); );
} }