preparing different kind of values

Author: RafaelGB

package-lock.json

@@ -28,46 +28,46 @@
 		"@rollup/plugin-terser": "0.4.0",
 		"@testing-library/jest-dom": "5.16.5",
 		"@testing-library/react": "14.0.0",
-		"@types/jest": "29.4.0",
+		"@types/jest": "29.5.0",
 		"@types/luxon": "3.2.0",
-		"@types/node": "18.14.2",
+		"@types/node": "18.15.3",
 		"@types/react": "18.0.28",
-		"@types/react-datepicker": "4.8.0",
+		"@types/react-datepicker": "4.10.0",
 		"@types/react-dom": "18.0.11",
 		"@types/react-window": "1.8.5",
 		"@types/papaparse": "5.3.7",
-		"@typescript-eslint/eslint-plugin": "5.53.0",
-		"@typescript-eslint/parser": "5.53.0",
-		"eslint": "8.35.0",
-		"jest": "29.4.3",
-		"jest-mock-extended": "3.0.2",
-		"jest-environment-jsdom": "29.4.3",
+		"@typescript-eslint/eslint-plugin": "5.56.0",
+		"@typescript-eslint/parser": "5.56.0",
+		"eslint": "8.36.0",
+		"jest": "29.5.0",
+		"jest-mock-extended": "3.0.3",
+		"jest-environment-jsdom": "29.5.0",
 		"obsidian": "1.1.1",
-		"rollup": "3.17.3",
+		"rollup": "3.20.0",
 		"rollup-plugin-typescript2": "0.34.1",
 		"ts-jest": "29.0.5",
 		"tslib": "2.5.0",
 		"typescript": "4.9.5"
 	},
 	"dependencies": {
 		"@emotion/styled": "11.10.6",
-		"@mui/icons-material": "5.11.9",
-		"@mui/material": "5.11.10",
+		"@mui/icons-material": "5.11.11",
+		"@mui/material": "5.11.13",
 		"@popperjs/core": "2.11.6",
 		"@tanstack/match-sorter-utils": "8.7.6",
 		"@tanstack/react-table": "8.7.9",
 		"eventemitter3": "5.0.0",
 		"fuse.js": "6.6.2",
-		"luxon": "3.2.1",
+		"luxon": "3.3.0",
 		"monkey-around": "2.3.0",
 		"obsidian-dataview": "0.5.55",
 		"obsidian-projects-types": "0.7.1",
 		"react": "18.2.0",
-		"papaparse": "5.3.2",
+		"papaparse": "5.4.0",
 		"react-datepicker": "4.10.0",
 		"react-dom": "18.2.0",
-		"react-select": "5.7.0",
+		"react-select": "5.7.1",
 		"react-window": "1.8.8",
-		"zustand": "4.3.3"
+		"zustand": "4.3.6"
 	}
 }

package.json

@@ -1,6 +1,7 @@
 import { DatabaseYaml } from 'cdm/DatabaseModel';
 import { YamlHandlerResponse } from 'cdm/MashallModel';
 import { AtomicFilter, FilterGroup, FilterGroupCondition } from 'cdm/SettingsModel';
+import { InputType } from 'helpers/Constants';
 import { AbstractYamlHandler } from 'IO/md/handlers/marshall/AbstractYamlPropertyHandler';
 import { DataviewService } from 'services/DataviewService';
 
@@ -59,6 +60,10 @@ export class MarshallFiltersHandler extends AbstractYamlHandler {
                 this.addError(`There was not operator key in filter: ${JSON.stringify(filter)}`);
                 return false;
             }
+            // Type of filter: Optional (if not present, it will be set to TEXT)
+            if (!DataviewService.isTruthy((filter as AtomicFilter).type)) {
+                (filter as AtomicFilter).type = InputType.TEXT;
+            }
         }
         return true;
     }

src/IO/md/handlers/marshall/MarshallFiltersHandler.ts

@@ -53,6 +53,7 @@ export class UnmarshallFiltersHandler extends AbstractDiskHandler {
             this.localDisk.push(`${YAML_INDENT.repeat(indentLevel)}- field: ${(filter as AtomicFilter).field}`);
             this.localDisk.push(`${YAML_INDENT.repeat(indentLevel)}  operator: ${(filter as AtomicFilter).operator}`);
             this.localDisk.push(`${YAML_INDENT.repeat(indentLevel)}  value: "${(filter as AtomicFilter).value ?? ''}"`);
+            this.localDisk.push(`${YAML_INDENT.repeat(indentLevel)}  type: ${(filter as AtomicFilter).type}`);
         }
     }
 }

src/IO/md/handlers/unmarshall/UnmarshallFiltersHandler.ts

@@ -17,6 +17,7 @@ export type FilterGroupCondition = {
 export type AtomicFilter = {
     field: string;
     operator: string;
+    type: string;
     value?: string;
 }
 /**

src/cdm/SettingsModel.ts

@@ -5,6 +5,7 @@ import {
 } from "cdm/ModalsModel";
 import {
   ConditionFiltersOptions,
+  InputType,
   OperatorFilter,
   StyleVariables,
 } from "helpers/Constants";
@@ -50,6 +51,7 @@ const NewFiltersForm = (props: FiltersModalProps) => {
       field: possibleColumns[0],
       operator: OperatorFilter.CONTAINS[0],
       value: "",
+      type: InputType.TEXT,
     });
     configActions.alterFilters(alteredFilterState);
   };
@@ -67,6 +69,7 @@ const NewFiltersForm = (props: FiltersModalProps) => {
       field: possibleColumns[0],
       operator: OperatorFilter.CONTAINS[0],
       value: "",
+      type: InputType.TEXT,
     };
 
     alteredFilterState.conditions.push({

src/components/modals/filters/handlers/AddNewFilterHandler.tsx

@@ -15,7 +15,7 @@ import IconButton from "@mui/material/IconButton";
 const AtomicFilterComponent = (props: AtomicFilterComponentProps) => {
   const { table, recursiveIndex, level, atomicFilter, possibleColumns } = props;
   const { tableState } = table.options.meta;
-  const { field, operator, value } = atomicFilter;
+  const { field, operator, value, type } = atomicFilter;
   const configActions = tableState.configState((state) => state.actions);
   const configInfo = tableState.configState((state) => state.info);
   const columnsInfo = tableState.columns((state) => state.info);
@@ -118,6 +118,7 @@ const AtomicFilterComponent = (props: AtomicFilterComponentProps) => {
         >
           <ValueFilterComponent
             value={value}
+            type={type}
             handler={onChangeFilterValueHandler(recursiveIndex, level)}
           />
         </Grid>

src/components/modals/filters/handlers/AtomicFilterComponent.tsx

@@ -42,6 +42,7 @@ const modifyRecursiveFilterGroups = (
                         field: possibleColumns[0].key,
                         operator: OperatorFilter.CONTAINS[0],
                         value: "",
+                        type: possibleColumns[0].type,
                     });
                 break;
             case ModifyFilterOptionsEnum.ADD_GROUP:
@@ -54,6 +55,7 @@ const modifyRecursiveFilterGroups = (
                                 field: possibleColumns[0].key,
                                 operator: OperatorFilter.CONTAINS[0],
                                 value: "",
+                                type: possibleColumns[0].type,
                             },
                         ],
                     });

src/components/modals/filters/handlers/FiltersHelper.ts

@@ -1,15 +1,9 @@
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
-import {
-  AtomicFilter,
-  FilterGroup,
-  FilterGroupCondition,
-} from "cdm/SettingsModel";
+import { AtomicFilter, FilterGroupCondition } from "cdm/SettingsModel";
 import { StyleVariables } from "helpers/Constants";
 import React, { ChangeEventHandler, useEffect, useState } from "react";
 import AtomicFilterComponent from "components/modals/filters/handlers/AtomicFilterComponent";
-import { Table } from "@tanstack/react-table";
-import { RowDataType } from "cdm/FolderModel";
 import AddIcon from "@mui/icons-material/Add";
 import CreateNewFolderIcon from "@mui/icons-material/CreateNewFolder";
 import FolderDeleteIcon from "@mui/icons-material/FolderDelete";

src/components/modals/filters/handlers/GroupFilterComponent.tsx

@@ -1,9 +1,11 @@
 import Input from "@mui/material/Input";
+import { InputType } from "helpers/Constants";
 import React, { useState } from "react";
 
 const ValueFilterComponent = (props: {
   handler: (event: React.ChangeEvent<HTMLInputElement>) => void;
   value: string;
+  type: string;
 }) => {
   const [value, setValue] = useState(props.value);
   const [valueTimeout, setValueTimeout] = useState(null);
@@ -21,14 +23,19 @@ const ValueFilterComponent = (props: {
       }, 1500)
     );
   };
-  return (
-    <Input
-      type="text"
-      className="form-control"
-      value={value}
-      onChange={proxyHandler}
-    />
-  );
+  switch (props.type) {
+    case InputType.CALENDAR:
+      break;
+    default:
+      return (
+        <Input
+          type="text"
+          className="form-control"
+          value={value}
+          onChange={proxyHandler}
+        />
+      );
+  }
 };
 
 export default ValueFilterComponent;