added datetime-local UI helper in the search form

irontec · May 24, 2024 · 9cda21b · 9cda21b
1 parent 2c5ac9d
commit 9cda21b
Show file tree

Hide file tree

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

diff --git a/library/src/components/List/Filter/ContentFilterSelector/ContentFilterRow.tsx b/library/src/components/List/Filter/ContentFilterSelector/ContentFilterRow.tsx
@@ -10,6 +10,7 @@ import { NullablePropertyFkChoices } from '../../../../entities';
 import {
   PropertyList,
   isPropertyFk,
+  isPropertyScalar,
 } from '../../../../services/api/ParsedApiSpecInterface';
 import {
   DropdownChoices,
@@ -80,6 +81,7 @@ export default function ContentFilterRow(
   }, [row]);
 
   const column = columns[name];
+
   let enumValue: DropdownChoices | null = null;
   if (isPropertyFk(column)) {
     enumValue = fkChoices[name] || {};
@@ -92,6 +94,17 @@ export default function ContentFilterRow(
     };
   }
 
+  const columnFormat = isPropertyScalar(column) && column.format;
+  let textFieldInputType = 'text';
+  const inputProps: Record<string, unknown> = {};
+
+  switch (columnFormat) {
+    case 'date-time':
+      textFieldInputType = 'datetime-local';
+      inputProps.step = 1;
+      break;
+  }
+
   const updateCriteria = () => {
     setRow(idx, name, type, value);
   };
@@ -149,14 +162,19 @@ export default function ContentFilterRow(
         <StyledTextField
           name='value'
           value={value}
-          type='text'
+          type={textFieldInputType}
           error={false}
           errorMsg=''
-          inputProps={{}}
+          inputProps={inputProps}
           InputProps={{}}
           hasChanged={false}
           onChange={({ target }) => {
-            setValue(target.value);
+            let { value } = target;
+            if (textFieldInputType === 'datetime-local') {
+              value = value.replace('T', ' ');
+            }
+
+            setValue(value);
           }}
         />
       )}

diff --git a/library/src/components/List/Filter/ContentFilterSelector/ContentFilterSelector.styles.tsx b/library/src/components/List/Filter/ContentFilterSelector/ContentFilterSelector.styles.tsx
@@ -8,7 +8,7 @@ export const StyledContentFilterSelector = styled(ContentFilterSelector)(
       flexDirection: 'column',
       gap: 'var(--spacing-xl)',
       padding: 'var(--spacing-lg)',
-      width: '700px',
+      width: '735px',
       maxWidth: '100%',
       [theme.breakpoints.down('md')]: {
         width: '320px',

diff --git a/library/src/entities/DefaultEntityBehavior/ListDecorator.tsx b/library/src/entities/DefaultEntityBehavior/ListDecorator.tsx
@@ -58,6 +58,10 @@ const ListDecorator: ListDecoratorType = (props) => {
     return value?.substring(0, 10) || '';
   }
 
+  if (isPropertyScalar(property) && property.format === 'date-time') {
+    return value ? new Date(value).toLocaleString() : '';
+  }
+
   if (!value && property.null) {
     value = property.null;
   }