Merge branch 'customFilters'

Author: RafaelGB

src/cdm/TableStateInterface.ts

@@ -1,8 +1,8 @@
-import { ColumnOrderState, SortingState } from "@tanstack/react-table";
+import { SortingState } from "@tanstack/react-table";
 import { ConfigColumn, RowDataType, TableColumn } from "cdm/FolderModel";
 import { FilterSettings, GlobalSettings, LocalSettings } from "cdm/SettingsModel";
 import { DatabaseView } from "DatabaseView";
-import { Link, Literal } from "obsidian-dataview";
+import { Literal } from "obsidian-dataview";
 import { StoreApi, UseBoundStore } from "zustand";
 
 export type TableActionResponse<T> = {
@@ -19,17 +19,24 @@ export type TableAction<T> = {
 /**
  * TABLE STATE INTERFACE
  */
+export type EphimeralSettings = {
+    enable_columns_filter: boolean,
+}
+
 export interface ConfigState {
     ddbbConfig: LocalSettings;
     filters: FilterSettings;
     global: GlobalSettings;
+    ephimeral: EphimeralSettings;
     actions: {
         alterFilters: (filters: Partial<FilterSettings>) => Promise<void>;
         alterConfig: (config: Partial<LocalSettings>) => void;
+        alterEphimeral: (ephimeral: Partial<EphimeralSettings>) => Promise<void>;
     }
     info: {
         getLocalSettings: () => LocalSettings;
         getFilters: () => FilterSettings;
+        getEphimeralSettings: () => EphimeralSettings;
     }
 }
 

src/components/Columns.tsx

@@ -16,8 +16,9 @@ import { DataviewService } from "services/DataviewService";
 import { Literal } from "obsidian-dataview/lib/data-model/value";
 import { DatabaseView } from "DatabaseView";
 import { obtainAllPossibleRows } from "helpers/VaultManagement";
-import rowContextMenuColumn from "components/RowContextMenu";
+import rowContextMenuColumn from "components/contextMenu/RowContextMenu";
 import { containsUpper } from "helpers/WindowElement";
+import { getFilterKeyInFunctionOfInputType } from "helpers/TableFiltersHelper";
 
 /**
  * Add mandatory and configured metadata columns of the table
@@ -88,7 +89,6 @@ export async function obtainMetadataColumns(
     ...MetadataDatabaseColumns.ADD_COLUMN,
     position: DatabaseLimits.MAX_COLUMNS + 1,
   };
-
   return yamlColumns;
 }
 
@@ -235,8 +235,7 @@ function columnOptions(
   LOGGER.debug(`=> columnOptions. column: ${JSON.stringify(column)}`);
   const options: RowSelectOption[] = column.options ?? [];
   if ((Object.values(InputType) as Array<string>).includes(column.input)) {
-    LOGGER.debug(`<= columnOptions`, `return ${column.input} column`);
-    return {
+    const columnOption = {
       ...(column as Partial<TableColumn>),
       position: column.position ?? index,
       key: column.key ?? columnKey,
@@ -248,6 +247,10 @@ function columnOptions(
       options: options,
       config: column.config,
     };
+    // Custom react-table attributes
+    columnOption["filterFn"] = getFilterKeyInFunctionOfInputType(column.input);
+    LOGGER.debug(`<= columnOptions`, `return ${column.input} column`);
+    return columnOption;
   } else {
     throw `Error: option ${column.input} not supported yet`;
   }

src/components/DefaultHeader.tsx

@@ -17,10 +17,16 @@ import CodeIcon from "components/img/CodeIcon";
 import RelationBidirectionalIcon from "components/img/RelationBidirectionalIcon";
 import RollupIcon from "components/img/RollupIcon";
 import { AddColumnModal } from "components/modals/newColumn/addColumnModal";
+import {
+  BaseFilter,
+  BooleanFilter,
+  DateRangeFilter,
+  NumberFilter,
+  TextFilter,
+} from "components/reducers/ColumnFilters";
 import { InputType, MetadataColumns } from "helpers/Constants";
 import { LOGGER } from "services/Logger";
 import { DatabaseHeaderProps, TableColumn } from "cdm/FolderModel";
-import ReactDOM from "react-dom";
 import { c } from "helpers/StylesHelper";
 import { AddColumnModalProps } from "cdm/ModalsModel";
 
@@ -40,6 +46,10 @@ export default function DefaultHeader(headerProps: DatabaseHeaderProps) {
     state.actions,
   ]);
 
+  const areColumnsFilterable = tableState.configState(
+    (state) => state.ephimeral.enable_columns_filter
+  );
+
   const configInfo = tableState.configState((state) => state.info);
 
   /** Column values */
@@ -50,9 +60,11 @@ export default function DefaultHeader(headerProps: DatabaseHeaderProps) {
   const [labelState, setLabelState] = useState(label);
 
   let propertyIcon: JSX.Element;
+  let columnSearch = <TextFilter {...headerProps} />;
   switch (input) {
     case InputType.NUMBER:
       propertyIcon = <HashIcon />;
+      columnSearch = <NumberFilter {...headerProps} />;
       break;
     case InputType.TEXT:
       propertyIcon = <TextIcon />;
@@ -62,38 +74,48 @@ export default function DefaultHeader(headerProps: DatabaseHeaderProps) {
       break;
     case InputType.CALENDAR:
       propertyIcon = <CalendarIcon />;
+      columnSearch = <DateRangeFilter {...headerProps} />;
       break;
     case InputType.CALENDAR_TIME:
     case InputType.METATADA_TIME:
       propertyIcon = <CalendarTimeIcon />;
+      columnSearch = <DateRangeFilter {...headerProps} />;
       break;
     case InputType.MARKDOWN:
       propertyIcon = <MarkdownObsidian />;
+      columnSearch = <BaseFilter {...headerProps} />;
       break;
     case InputType.TAGS:
       propertyIcon = <TagsIcon />;
       break;
     case InputType.INLINKS:
       propertyIcon = <IncomingLinkIcon />;
+      columnSearch = <BaseFilter {...headerProps} />;
       break;
     case InputType.OUTLINKS:
       propertyIcon = <OutlinkIcon />;
+      columnSearch = <BaseFilter {...headerProps} />;
       break;
     case InputType.TASK:
+      propertyIcon = <TaskIcon />;
+      columnSearch = <BaseFilter {...headerProps} />;
+      break;
     case InputType.CHECKBOX:
       propertyIcon = <TaskIcon />;
+      columnSearch = <BooleanFilter {...headerProps} />;
       break;
     case InputType.FORMULA:
       propertyIcon = <CodeIcon />;
       break;
     case InputType.RELATION:
       propertyIcon = <RelationBidirectionalIcon />;
+      columnSearch = <BaseFilter {...headerProps} />;
       break;
     case InputType.ROLLUP:
       propertyIcon = <RollupIcon />;
       break;
     default:
-      break;
+    // Do nothing
   }
 
   function handlerAddColumnToLeft() {
@@ -141,6 +163,9 @@ export default function DefaultHeader(headerProps: DatabaseHeaderProps) {
           </span>
         )}
       </div>
+      {/** Header Filter */}
+      {areColumnsFilterable && columnSearch}
+      {/** Header Menu Popper */}
       <HeaderMenu
         headerProps={headerProps}
         propertyIcon={propertyIcon}