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

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

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

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 <TextField label={label} value={val} onChange={onInputChange} variant="filled" />;
 }
 
-export function DecimalFilter({ label }: BoolFilterProps) {
+export function DecimalFilter({ label, onChange }: NumFilterProps) {
-    return <TextField type="number" label={label} variant="filled" />;
+    const debouncedChange = useMemo(() =>
+        debounce((value: string) => {
+            onChange?.(value);
+        }, 1000)
+        , [onChange]);
+
+    return <TextField type="number" label={label} variant="filled" onChange={e => debouncedChange(e.target.value)} />;
 }

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

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

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

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"