From bbb55e97461dcccbaa6911ac22aad14a8e0e51e7 Mon Sep 17 00:00:00 2001 From: TekH Date: Wed, 16 Jul 2025 11:53:57 +0200 Subject: [PATCH] =?UTF-8?q?feat(filters):=20Entprellen=20von=20onChange-Ca?= =?UTF-8?q?llbacks=20in=20TextFilter-,=20IntFilter-=20und=20DecimalFilter-?= =?UTF-8?q?Komponenten,=20um=20schnelles=20Ausl=C3=B6sen=20zu=20reduzieren?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/dd-hub-react/package-lock.json | 25 +++++++++++++++++++ src/client/dd-hub-react/package.json | 2 ++ .../src/sections/document/num-filter.tsx | 25 +++++++++++++++---- .../src/sections/document/text-filter.tsx | 11 +++++++- .../document/view/doc-search-view.tsx | 5 ++-- src/client/dd-hub-react/yarn.lock | 17 +++++++++++++ 6 files changed, 77 insertions(+), 8 deletions(-) diff --git a/src/client/dd-hub-react/package-lock.json b/src/client/dd-hub-react/package-lock.json index 2f672c5..7a819f0 100644 --- a/src/client/dd-hub-react/package-lock.json +++ b/src/client/dd-hub-react/package-lock.json @@ -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", diff --git a/src/client/dd-hub-react/package.json b/src/client/dd-hub-react/package.json index 485662e..8dc056e 100644 --- a/src/client/dd-hub-react/package.json +++ b/src/client/dd-hub-react/package.json @@ -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", diff --git a/src/client/dd-hub-react/src/sections/document/num-filter.tsx b/src/client/dd-hub-react/src/sections/document/num-filter.tsx index f72bc00..f8c99ed 100644 --- a/src/client/dd-hub-react/src/sections/document/num-filter.tsx +++ b/src/client/dd-hub-react/src/sections/document/num-filter.tsx @@ -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 ; } -export function DecimalFilter({ label }: BoolFilterProps) { - return ; +export function DecimalFilter({ label, onChange }: NumFilterProps) { + const debouncedChange = useMemo(() => + debounce((value: string) => { + onChange?.(value); + }, 1000) + , [onChange]); + + return debouncedChange(e.target.value)} />; } \ No newline at end of file diff --git a/src/client/dd-hub-react/src/sections/document/text-filter.tsx b/src/client/dd-hub-react/src/sections/document/text-filter.tsx index 110bf92..c6e85db 100644 --- a/src/client/dd-hub-react/src/sections/document/text-filter.tsx +++ b/src/client/dd-hub-react/src/sections/document/text-filter.tsx @@ -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 onChange?.(e.target.value)} />; + const debouncedChange = useMemo(() => + debounce((value: string) => { + onChange?.(value); + }, 1000) + , [onChange]); + + return debouncedChange(e.target.value)} />; } \ No newline at end of file diff --git a/src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx b/src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx index fb30eeb..2136b07 100644 --- a/src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx +++ b/src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx @@ -49,6 +49,7 @@ export function DocSearchView() { const [attributes, setAttributes] = useState>({}); useEffect(() => { + console.log(attributes); }, [attributes]); function setAttribute(name: string, serilizedValue: string) { @@ -130,10 +131,10 @@ export function DocSearchView() { filterComp = break; case 'INTEGER': - filterComp = + filterComp = updateAttribute(filter.name, value)} /> break; case 'DECIMAL': - filterComp = + filterComp = updateAttribute(filter.name, value)} /> break; case 'VARCHAR': filterComp = updateAttribute(filter.name, value)} /> diff --git a/src/client/dd-hub-react/yarn.lock b/src/client/dd-hub-react/yarn.lock index b301bde..3bd73c8 100644 --- a/src/client/dd-hub-react/yarn.lock +++ b/src/client/dd-hub-react/yarn.lock @@ -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"