preparing types inside filters

Author: RafaelGB

src/cdm/ComponentsModel.ts

@@ -1,7 +1,7 @@
 import { CellContext, Table } from "@tanstack/react-table";
 import { RowDataType } from "cdm/FolderModel";
 import { Link, Literal } from "obsidian-dataview/lib/data-model/value";
-import { AtomicFilter } from "cdm/SettingsModel";
+import { AtomicFilter, FilterGroup } from "cdm/SettingsModel";
 
 export type ColumnOption = {
     value: string;
@@ -37,5 +37,19 @@ export type AtomicFilterComponentProps = {
     recursiveIndex: number[];
     level: number;
     atomicFilter: AtomicFilter;
-    possibleColumns: string[];
-} & DataviewFiltersProps;
+    possibleColumns: ColumnFilterOption[];
+} & DataviewFiltersProps;
+
+export type ColumnFilterOption = {
+    key: string;
+    enabled: boolean;
+    type: string;
+}
+
+export type GroupFilterComponentProps = {
+    group: FilterGroup;
+    recursiveIndex: number[];
+    level: number;
+    table: Table<RowDataType>;
+    possibleColumns: ColumnFilterOption[];
+};

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

@@ -1,9 +1,10 @@
-import { DataviewFiltersProps } from "cdm/ComponentsModel";
+import { ColumnFilterOption, DataviewFiltersProps } from "cdm/ComponentsModel";
 import { obtainColumnsFromRows } from "components/Columns";
 import React, { useEffect, useState } from "react";
 import { FilterGroupCondition } from "cdm/SettingsModel";
 import GroupFilterComponent from "components/modals/filters/handlers/GroupFilterComponent";
 import DnDComponent from "components/behavior/DnDComponent";
+import { InputType } from "helpers/Constants";
 
 const DataviewFiltersComponent = (props: DataviewFiltersProps) => {
   const { table } = props;
@@ -13,8 +14,10 @@ const DataviewFiltersComponent = (props: DataviewFiltersProps) => {
   const filters = tableState.configState((state) => state.filters);
   const columnsInfo = tableState.columns((state) => state.info);
 
-  const [possibleColumns, setPossibleColumns] = useState([] as string[]);
-
+  const [possibleColumns, setPossibleColumns] = useState(
+    [] as ColumnFilterOption[]
+  );
+  const DbColumns = columnsInfo.getAllColumns();
   useEffect(() => {
     new Promise<string[]>((resolve) => {
       // Empty conditions to refresh the dataview
@@ -25,11 +28,25 @@ const DataviewFiltersComponent = (props: DataviewFiltersProps) => {
           view.file.parent.path,
           configInfo.getLocalSettings(),
           emptyFilterConditions,
-          columnsInfo.getAllColumns()
+          DbColumns
         )
       );
     }).then((columns) => {
-      setPossibleColumns(columns.sort((a, b) => a.localeCompare(b)));
+      const columnOptions: ColumnFilterOption[] = [];
+      columns.forEach((column) => {
+        const possibleColumn = DbColumns.find(
+          (dbColumn) => dbColumn.key === column
+        );
+        const isColumnExistent = possibleColumn !== undefined;
+        columnOptions.push({
+          enabled: isColumnExistent,
+          key: column,
+          type: isColumnExistent ? possibleColumn.input : InputType.TEXT,
+        });
+      });
+      setPossibleColumns(
+        columnOptions.sort((a, b) => a.key.localeCompare(b.key))
+      );
     });
   }, []);
 

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

@@ -1,5 +1,6 @@
 import FormControl from "@mui/material/FormControl";
 import Select, { SelectChangeEvent } from "@mui/material/Select";
+import { ColumnFilterOption } from "cdm/ComponentsModel";
 import { StyleVariables } from "helpers/Constants";
 import React from "react";
 
@@ -11,7 +12,7 @@ const ExistedColumnSelectorComponent = (selectorProps: {
     conditionIndex: number[],
     level: number
   ) => (event: SelectChangeEvent<string>, child: React.ReactNode) => void;
-  possibleColumns: string[];
+  possibleColumns: ColumnFilterOption[];
 }) => {
   const { currentCol, recursiveIndex, level, onchange, possibleColumns } =
     selectorProps;
@@ -40,13 +41,13 @@ const ExistedColumnSelectorComponent = (selectorProps: {
         }}
       >
         <optgroup label="Fields from notes">
-          {possibleColumns.map((key, index) => {
+          {possibleColumns.map((columnOption, index) => {
             return (
               <option
-                value={key}
-                key={`MenuItem-${index}-existedColumnSelector-${key}--${level}-${recursiveIndex[level]}}`}
+                value={columnOption.key}
+                key={`MenuItem-${index}-existedColumnSelector-${columnOption.key}--${level}-${recursiveIndex[level]}}`}
               >
-                {key}
+                {columnOption.key}
               </option>
             );
           })}

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

@@ -1,3 +1,4 @@
+import { ColumnFilterOption } from "cdm/ComponentsModel";
 import { AtomicFilter, FilterGroup, FilterGroupCondition } from "cdm/SettingsModel";
 import { ConditionFiltersOptions, OperatorFilter } from "helpers/Constants";
 
@@ -15,7 +16,7 @@ export enum ModifyFilterOptionsEnum {
 }
 
 const modifyRecursiveFilterGroups = (
-    possibleColumns: string[],
+    possibleColumns: ColumnFilterOption[],
     filterGroups: FilterGroup[],
     recursiveIndex: number[],
     level: number,
@@ -38,7 +39,7 @@ const modifyRecursiveFilterGroups = (
             case ModifyFilterOptionsEnum.ADD:
                 (filterGroups[recursiveIndex[level]] as FilterGroupCondition)
                     .filters.push({
-                        field: possibleColumns[0],
+                        field: possibleColumns[0].key,
                         operator: OperatorFilter.CONTAINS[0],
                         value: "",
                     });
@@ -50,7 +51,7 @@ const modifyRecursiveFilterGroups = (
                         disabled: false,
                         filters: [
                             {
-                                field: possibleColumns[0],
+                                field: possibleColumns[0].key,
                                 operator: OperatorFilter.CONTAINS[0],
                                 value: "",
                             },

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

@@ -24,13 +24,8 @@ import LabelComponent from "components/modals/filters/handlers/LabelComponent";
 import { Setting } from "obsidian";
 import { t } from "lang/helpers";
 import { Db } from "services/CoreService";
-type GroupFilterComponentProps = {
-  group: FilterGroup;
-  recursiveIndex: number[];
-  level: number;
-  table: Table<RowDataType>;
-  possibleColumns: string[];
-};
+import { GroupFilterComponentProps } from "cdm/ComponentsModel";
+
 const GroupFilterComponent = (groupProps: GroupFilterComponentProps) => {
   const { group, recursiveIndex, level, table, possibleColumns } = groupProps;
   const { tableState } = table.options.meta;

src/components/reducers/ColumnFilters.tsx

@@ -71,12 +71,15 @@ export function TextFilter(headerProps: DatabaseHeaderProps) {
 
 export function NumberFilter(headerProps: DatabaseHeaderProps) {
   const { column } = headerProps;
-  const min = Number(column.getFacetedMinMaxValues()?.[0] ?? undefined);
-  const max = Number(column.getFacetedMinMaxValues()?.[1] ?? undefined);
+  const minRaw = Number(column.getFacetedMinMaxValues()?.[0] ?? undefined);
+  const maxRaw = Number(column.getFacetedMinMaxValues()?.[1] ?? undefined);
   const minValue =
     (column.getFilterValue() as [number, number])?.[0] ?? undefined;
   const maxValue =
     (column.getFilterValue() as [number, number])?.[1] ?? undefined;
+
+  const min = Number.isNaN(minRaw) ? Number.MIN_SAFE_INTEGER : minRaw;
+  const max = Number.isNaN(maxRaw) ? Number.MAX_SAFE_INTEGER : maxRaw;
   return (
     <>
       <div className="flex space-x-2" key={`${column.id}-number-filter`}>
@@ -103,8 +106,8 @@ export function NumberFilter(headerProps: DatabaseHeaderProps) {
         />
         <DynamicDebouncedInput
           type="number"
-          min={Number.isNaN(min) ? undefined : min}
-          max={Number.isNaN(max) ? undefined : max}
+          min={min}
+          max={max}
           value={maxValue}
           onChange={(value) => {
             if (value === "" || value === null) {