AppStd/DigitalData.Hub
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(filters): Entprellen von onChange-Callbacks in TextFilter-, IntFilter- und DecimalFilter-Komponenten, um schnelles Auslösen zu reduzieren

Browse Source
This commit is contained in:
tekh 2025-07-16 11:53:57 +02:00
parent d82e12759e
commit bbb55e9746
6 changed files with 77 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/client/dd-hub-react/package-lock.json generated
View File

@ -21,6 +21,7 @@
"apexcharts": "^4.5.0",
"dayjs": "^1.11.13",
"es-toolkit": "^1.34.1",
"lodash.debounce": "^4.0.8",
"minimal-shared": "^1.0.7",
"react": "^19.1.0",
"react-apexcharts": "^1.7.0",
@ -30,6 +31,7 @@
},
"devDependencies": {
"@eslint/js": "^9.23.0",
"@types/lodash.debounce": "^4.0.9",
"@types/node": "^22.14.0",
"@types/react": "^19.1.0",
"@types/react-dom": "^19.1.1",
@ -2195,6 +2197,23 @@
"dev": true,
"license": "MIT"
},
"node_modules/@types/lodash": {
"version": "4.17.20",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.20.tgz",
"integrity": "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/lodash.debounce": {
"version": "4.0.9",
"resolved": "https://registry.npmjs.org/@types/lodash.debounce/-/lodash.debounce-4.0.9.tgz",
"integrity": "sha512-Ma5JcgTREwpLRwMM+XwBR7DaWe96nC38uCBDFKZWbNKD+osjVzdpnUSwBcqCptrp16sSOLBAUb50Car5I0TCsQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/lodash": "*"
}
},
"node_modules/@types/node": {
"version": "22.14.0",
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.14.0.tgz",
@ -5125,6 +5144,12 @@
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"license": "MIT"
},
"node_modules/lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
"license": "MIT"
},
"node_modules/lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",

2
src/client/dd-hub-react/package.json
View File

@ -39,6 +39,7 @@
"apexcharts": "^4.5.0",
"dayjs": "^1.11.13",
"es-toolkit": "^1.34.1",
"lodash.debounce": "^4.0.8",
"minimal-shared": "^1.0.7",
"react": "^19.1.0",
"react-apexcharts": "^1.7.0",
@ -48,6 +49,7 @@
},
"devDependencies": {
"@eslint/js": "^9.23.0",
"@types/lodash.debounce": "^4.0.9",
"@types/node": "^22.14.0",
"@types/react": "^19.1.0",
"@types/react-dom": "^19.1.1",

25
src/client/dd-hub-react/src/sections/document/num-filter.tsx
View File

@ -1,27 +1,42 @@
import { useState } from 'react';
import debounce from 'lodash.debounce';
import { useState, useMemo } from 'react';
import TextField from '@mui/material/TextField';
// ----------------------------------------------------------------------
type BoolFilterProps = {
type NumFilterProps = {
label: string;
onChange?: (value: string) => void;
}
const isNumbers = (str: string) => /^[0-9]*$/.test(str);
export function IntFilter({ label }: BoolFilterProps) {
export function IntFilter({ label, onChange }: NumFilterProps) {
const [val, setVal] = useState("");
const onInputChange = (event: any) => {
const value = event.target.value;
if (isNumbers(value)) {
setVal(value);
debouncedChange(value);
}
};
const debouncedChange = useMemo(() =>
debounce((value: string) => {
onChange?.(value);
}, 1000)
, [onChange]);
return <TextField label={label} value={val} onChange={onInputChange} variant="filled" />;
}
export function DecimalFilter({ label }: BoolFilterProps) {
return <TextField type="number" label={label} variant="filled" />;
export function DecimalFilter({ label, onChange }: NumFilterProps) {
const debouncedChange = useMemo(() =>
debounce((value: string) => {
onChange?.(value);
}, 1000)
, [onChange]);
return <TextField type="number" label={label} variant="filled" onChange={e => debouncedChange(e.target.value)} />;
}

11
src/client/dd-hub-react/src/sections/document/text-filter.tsx
View File

@ -1,3 +1,6 @@
import { useMemo } from 'react';
import debounce from 'lodash.debounce';
import TextField from '@mui/material/TextField';
// ----------------------------------------------------------------------
@ -7,5 +10,11 @@ type TextFilterProps = {
}
export function TextFilter({ label, onChange }: TextFilterProps) {
return <TextField label={label} variant="filled" onChange={e => onChange?.(e.target.value)} />;
const debouncedChange = useMemo(() =>
debounce((value: string) => {
onChange?.(value);
}, 1000)
, [onChange]);
return <TextField label={label} variant="filled" onChange={e => debouncedChange(e.target.value)} />;
}

5
src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx
View File

@ -49,6 +49,7 @@ export function DocSearchView() {
const [attributes, setAttributes] = useState<Record<string, string>>({});
useEffect(() => {
console.log(attributes);
}, [attributes]);
function setAttribute(name: string, serilizedValue: string) {
@ -130,10 +131,10 @@ export function DocSearchView() {
filterComp = <BoolFilter label={filter.label ?? filter.name} />
break;
case 'INTEGER':
filterComp = <IntFilter label={filter.label ?? filter.name} />
filterComp = <IntFilter label={filter.label ?? filter.name} onChange={value => updateAttribute(filter.name, value)} />
break;
case 'DECIMAL':
filterComp = <DecimalFilter label={filter.label ?? filter.name} />
filterComp = <DecimalFilter label={filter.label ?? filter.name} onChange={value => updateAttribute(filter.name, value)} />
break;
case 'VARCHAR':
filterComp = <TextFilter label={filter.label ?? filter.name} onChange={value => updateAttribute(filter.name, value)} />

17
src/client/dd-hub-react/yarn.lock
View File

@ -586,6 +586,18 @@
resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
"@types/lodash.debounce@^4.0.9":
version "4.0.9"
resolved "https://registry.npmjs.org/@types/lodash.debounce/-/lodash.debounce-4.0.9.tgz"
integrity sha512-Ma5JcgTREwpLRwMM+XwBR7DaWe96nC38uCBDFKZWbNKD+osjVzdpnUSwBcqCptrp16sSOLBAUb50Car5I0TCsQ==
dependencies:
"@types/lodash" "*"
"@types/lodash@*":
version "4.17.20"
resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.20.tgz"
integrity sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==
"@types/node@^18.0.0 || ^20.0.0 || >=22.0.0", "@types/node@^22.14.0":
version "22.14.0"
resolved "https://registry.npmjs.org/@types/node/-/node-22.14.0.tgz"
@ -2021,6 +2033,11 @@ locate-path@^6.0.0:
dependencies:
p-locate "^5.0.0"
lodash.debounce@^4.0.8:
version "4.0.8"
resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz"
integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
lodash.merge@^4.6.2:
version "4.6.2"
resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"