Merge pull request #113 from irontec/datetime-fast-search

Datetime fast search enhancements
irontec · May 28, 2024 · e0e748b · e0e748b
2 parents f1a8438 + 6dbf0ee
commit e0e748b
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 41 deletions.
diff --git a/library/package.json b/library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@irontec/ivoz-ui",
-  "version": "1.3.9",
+  "version": "1.3.11",
   "description": "UI library used in ivozprovider",
   "license": "GPL-3.0",
   "main": "index.js",

diff --git a/library/src/components/List/Content/FastSearchField.tsx b/library/src/components/List/Content/FastSearchField.tsx
@@ -3,6 +3,7 @@ import { ForwardedRef, forwardRef, useEffect, useState } from 'react';
 import EntityService from '../../../services/entity/EntityService';
 import { StyledSearchTextField } from '../../../services/form/Field/TextField/TextField.styles';
 
+import { InputBaseComponentProps } from '@mui/material';
 import { useStoreActions, useStoreState } from 'store';
 import { DropdownArrayChoices, isPropertyFk } from '../../../services';
 import { StyledAutocomplete } from '../../../services/form/Field/Autocomplete/Autocomplete.styles';
@@ -47,6 +48,47 @@ const FastSearchField = (
 
   const [value, setValue] = useState(firstColumnCriteria?.value || '');
 
+  const isDatetime = !isFk && firstColumnSpec.format === 'date-time';
+
+  const triggerSearchIfChanged = () => {
+    if (!firstColumnCriteria) {
+      return;
+    }
+
+    if (firstColumnCriteria.value == value) {
+      return;
+    }
+
+    if (value !== '') {
+      firstColumnCriteria.value = encodeURIComponent(value);
+    }
+
+    let match = false;
+    let matchIdx: string | undefined;
+    for (const idx in queryStringCriteria) {
+      if (queryStringCriteria[idx].name !== firstColumnCriteria.name) {
+        continue;
+      }
+
+      if (queryStringCriteria[idx].type !== firstColumnCriteria.type) {
+        continue;
+      }
+
+      queryStringCriteria[idx] = firstColumnCriteria;
+      matchIdx = idx;
+      match = true;
+      break;
+    }
+
+    if (!match) {
+      queryStringCriteria.push(firstColumnCriteria);
+    } else if (value === '' && matchIdx) {
+      queryStringCriteria.splice(parseInt(matchIdx, 10), 1);
+    }
+
+    setQueryStringCriteria(queryStringCriteria);
+  };
+
   const changeHandler: React.ChangeEventHandler<HTMLInputElement> = ({
     target,
   }) => {
@@ -60,44 +102,14 @@ const FastSearchField = (
   }, [firstColumnCriteria]);
 
   useEffect(() => {
-    const timeOutId = setTimeout(() => {
-      if (firstColumnCriteria) {
-        if (firstColumnCriteria.value == value) {
-          return;
-        }
-
-        if (value !== '') {
-          firstColumnCriteria.value = encodeURIComponent(value);
-        }
+    if (isDatetime) {
+      return;
+    }
 
-        let match = false;
-        let matchIdx: string | undefined;
-        for (const idx in queryStringCriteria) {
-          if (queryStringCriteria[idx].name !== firstColumnCriteria.name) {
-            continue;
-          }
-
-          if (queryStringCriteria[idx].type !== firstColumnCriteria.type) {
-            continue;
-          }
-
-          queryStringCriteria[idx] = firstColumnCriteria;
-          matchIdx = idx;
-          match = true;
-          break;
-        }
-
-        if (!match) {
-          queryStringCriteria.push(firstColumnCriteria);
-        } else if (value === '' && matchIdx) {
-          queryStringCriteria.splice(parseInt(matchIdx, 10), 1);
-        }
-
-        setQueryStringCriteria(queryStringCriteria);
-
-        return;
-      }
-    }, 1000);
+    const timeOutId = setTimeout(() => {
+      triggerSearchIfChanged();
+      return;
+    }, 2000);
     return () => clearTimeout(timeOutId);
   }, [value, firstColumnCriteria]);
 
@@ -126,8 +138,13 @@ const FastSearchField = (
     );
   }
 
-  const type =
-    firstColumnSpec.format === 'date-time' ? 'datetime-local' : 'text';
+  let type = 'text';
+  const inputProps = {} as InputBaseComponentProps;
+
+  if (isDatetime) {
+    type = 'datetime-local';
+    inputProps.step = 1;
+  }
 
   return (
     <StyledSearchTextField
@@ -136,10 +153,24 @@ const FastSearchField = (
       error={false}
       value={value}
       errorMsg=''
-      inputProps={{}}
+      inputProps={inputProps}
       InputProps={{
         startAdornment: <SearchIcon />,
       }}
+      onBlur={() => {
+        if (!isDatetime) {
+          return;
+        }
+
+        triggerSearchIfChanged();
+      }}
+      onKeyDown={(event) => {
+        if (event.code !== 'Enter') {
+          return;
+        }
+
+        triggerSearchIfChanged();
+      }}
       placeholder='Search'
       hasChanged={false}
       onChange={changeHandler}

diff --git a/library/src/services/form/Field/TextField/TextField.tsx b/library/src/services/form/Field/TextField/TextField.tsx
@@ -4,8 +4,10 @@ import {
   FormHelperText,
   OutlinedInput,
   TextFieldProps as MuiTextFieldProps,
+  OutlinedInputProps,
 } from '@mui/material';
 import { StyledHelpTextTooltip } from '../Shared/HelpText.styles';
+import { KeyboardEventHandler } from 'react';
 
 export type TextFieldProps = MuiTextFieldProps & {
   hasChanged: boolean;
@@ -29,6 +31,8 @@ export const TextField = (props: TextFieldProps) => {
     required,
     onChange,
     onBlur,
+    onKeyDown,
+    onClick,
     error,
     errorMsg,
     helperText,
@@ -48,6 +52,18 @@ export const TextField = (props: TextFieldProps) => {
   const labelId = `${name}-label`;
   const maxRows = multiline ? 6 : undefined;
 
+  type passThroughPropsType = Partial<OutlinedInputProps>;
+  const passThroughProps: passThroughPropsType = {};
+
+  if (onKeyDown) {
+    passThroughProps.onKeyDown = onKeyDown as KeyboardEventHandler<
+      HTMLTextAreaElement | HTMLInputElement
+    >;
+  }
+  if (onClick) {
+    passThroughProps.onClick = onClick;
+  }
+
   return (
     <FormControl
       variant='standard'
@@ -72,6 +88,7 @@ export const TextField = (props: TextFieldProps) => {
         </label>
       )}
       <OutlinedInput
+        {...passThroughProps}
         ref={InputProps?.ref}
         name={name}
         type={type}