dinamic value component in function of type of field. Calendar with autocomplete

Author: RafaelGB

src/components/img/MetadataTags.tsx

@@ -6,11 +6,11 @@ export default function MetadataTagsIcon() {
       width="24"
       height="24"
       viewBox="0 0 24 24"
-      stroke-width="2"
+      strokeWidth="2"
       stroke="currentColor"
       fill="none"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
       <path d="M13 7a2 2 0 0 1 2 2v12l-5 -3l-5 3v-12a2 2 0 0 1 2 -2h6z"></path>

src/components/modals/newColumn/handlers/MetadataToggleGroupHandler.ts

@@ -27,7 +27,7 @@ export class MetadataToggleGroupHandler extends AbstractHandlerClass<AddColumnMo
             .setName(t("settings_metatata_file_toggle_title"))
             .setDesc(t("settings_metatata_file_toggle_desc"))
             .addToggle(toggle =>
-                toggle.setValue(view.diskConfig.yaml.columns.__file__.isHidden)
+                toggle.setValue(!view.diskConfig.yaml.columns.__file__.isHidden)
                     .onChange(metadata_file_toggle_promise)
             );
 

src/lib/features/filters/components/ValueFilterComponent.tsx

@@ -1,19 +1,24 @@
+import Autocomplete from "@mui/material/Autocomplete";
 import Input from "@mui/material/Input";
-import React, { useState } from "react";
+import TextField from "@mui/material/TextField";
+import { InputType, StyleVariables } from "helpers/Constants";
+import React, { ChangeEvent, useState } from "react";
+import { valueToCalendarConverter } from "../mappers/FilterValuesMapper";
 
 const ValueFilterComponent = (props: {
   handler: (event: React.ChangeEvent<HTMLInputElement>) => void;
   value: string;
   type: string;
 }) => {
-  const [value, setValue] = useState(props.value);
+  const { type, value } = props;
+  const [valueState, setValueSate] = useState(value);
   const [valueTimeout, setValueTimeout] = useState(null);
   const proxyHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (valueTimeout) {
       clearTimeout(valueTimeout);
     }
     // first update the input text as user type
-    setValue(event.target.value);
+    setValueSate(event.target.value);
     // initialize a setimeout by wrapping in our editNoteTimeout so that we can clear it out using clearTimeout
     setValueTimeout(
       setTimeout(() => {
@@ -22,15 +27,89 @@ const ValueFilterComponent = (props: {
       }, 1500)
     );
   };
+  switch (type) {
+    case InputType.CALENDAR:
+    case InputType.CALENDAR_TIME:
+      return (
+        <AutocompleteFrom
+          value={valueState}
+          handler={proxyHandler}
+          options={Array.from(valueToCalendarConverter.keys()).map(
+            (key) => `@${key}`
+          )}
+        />
+      );
+    case InputType.NUMBER:
+      return (
+        <InputForm value={valueState} handler={proxyHandler} type="number" />
+      );
+    default:
+      return <InputForm value={valueState} handler={proxyHandler} />;
+  }
+};
 
+function InputForm(props: {
+  handler: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  value: string;
+  type?: string;
+}) {
+  const { value, handler, type } = props;
   return (
     <Input
-      type="text"
+      type={type !== undefined ? type : "text"}
       className="form-control"
       value={value}
-      onChange={proxyHandler}
+      onChange={handler}
     />
   );
-};
+}
+
+function AutocompleteFrom(props: {
+  handler: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  value: string;
+  options: string[];
+}) {
+  const { value, handler, options } = props;
+  const [valueState, setValueSate] = useState(value);
+  const [inputValue, setInputValue] = useState(value);
+  return (
+    <Autocomplete
+      freeSolo
+      disableClearable
+      options={options}
+      value={valueState}
+      onChange={(event: any, newValue: string | null) => {
+        setValueSate(newValue);
+        handler({
+          target: { value: newValue },
+        } as ChangeEvent<HTMLInputElement>);
+      }}
+      inputValue={inputValue}
+      onInputChange={(event, newInputValue) => {
+        setInputValue(newInputValue);
+      }}
+      componentsProps={{
+        paper: {
+          sx: {
+            width: "max-content",
+            backgroundColor: StyleVariables.BACKGROUND_PRIMARY,
+            color: StyleVariables.TEXT_NORMAL,
+          },
+        },
+      }}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          className="form-control"
+          InputProps={{
+            ...params.InputProps,
+            type: "search",
+          }}
+          variant="standard"
+        />
+      )}
+    />
+  );
+}
 
 export default ValueFilterComponent;

src/lib/features/filters/domain/ValidateFilter.ts

@@ -1,5 +1,5 @@
 import { Literal } from "obsidian-dataview";
-import { DateTime } from "luxon";
+import { DateTime, DurationUnit } from "luxon";
 import { AtomicFilter, FilterGroup, FilterGroupCondition } from "../model/FiltersModel";
 import { LocalSettings } from "cdm/SettingsModel";
 import { ParseService } from "services/ParseService";
@@ -84,7 +84,7 @@ class ValidateFilter {
             return false;
         }
         const mappedValue = FilterValuesMapper.toCalendarValue(value);
-        const diffMinutes = literalToCheck.diff(mappedValue, 'minute').minutes;
+        const diffMinutes = literalToCheck.diff(mappedValue.date, mappedValue.unit).as(`${mappedValue.unit}s` as DurationUnit);
         switch (operator) {
             case OperatorFilter.EQUAL[1]:
                 return diffMinutes === 0;

src/lib/features/filters/mappers/FilterValuesMapper.ts

@@ -1,30 +1,30 @@
 import { DateTime } from "luxon";
-const valueToCalendarConverter = new Map<string, DateTime>([
-    ["today", DateTime.local().startOf("day")],
-    ["yesterday", DateTime.local().minus({ days: 1 }).startOf("day")],
-    ["tomorrow", DateTime.local().plus({ days: 1 }).startOf("day")],
-    ["thisweek", DateTime.local().startOf("week")],
-    ["lastweek", DateTime.local().minus({ weeks: 1 }).startOf("week")],
-    ["nextweek", DateTime.local().plus({ weeks: 1 }).startOf("week")],
-    ["thismonth", DateTime.local().startOf("month")],
-    ["lastmonth", DateTime.local().minus({ months: 1 }).startOf("month")],
-    ["nextmonth", DateTime.local().plus({ months: 1 }).startOf("month")],
-    ["thisyear", DateTime.local().startOf("year")],
-    ["lastyear", DateTime.local().minus({ years: 1 }).startOf("year")],
-    ["nextyear", DateTime.local().plus({ years: 1 }).startOf("year")],
-    ["thisquarter", DateTime.local().startOf("quarter")],
-    ["lastquarter", DateTime.local().minus({ quarters: 1 }).startOf("quarter")],
-    ["nextquarter", DateTime.local().plus({ quarters: 1 }).startOf("quarter")],
+import { FilterCalendarResponse } from "../model/FiltersModel";
+export const valueToCalendarConverter = new Map<string, FilterCalendarResponse>([
+    ["today", { unit: "day", date: DateTime.local().startOf("day") }],
+    ["yesterday", { unit: "day", date: DateTime.local().minus({ days: 1 }).startOf("day") }],
+    ["tomorrow", { unit: "day", date: DateTime.local().plus({ days: 1 }).startOf("day") }],
+    ["thisweek", { unit: "week", date: DateTime.local().startOf("week") }],
+    ["lastweek", { unit: "week", date: DateTime.local().minus({ weeks: 1 }).startOf("week") }],
+    ["nextweek", { unit: "week", date: DateTime.local().plus({ weeks: 1 }).startOf("week") }],
+    ["thismonth", { unit: "month", date: DateTime.local().startOf("month") }],
+    ["lastmonth", { unit: "month", date: DateTime.local().minus({ months: 1 }).startOf("month") }],
+    ["nextmonth", { unit: "month", date: DateTime.local().plus({ months: 1 }).startOf("month") }],
+    ["thisyear", { unit: "year", date: DateTime.local().startOf("year") }],
+    ["lastyear", { unit: "year", date: DateTime.local().minus({ years: 1 }).startOf("year") }],
+    ["nextyear", { unit: "year", date: DateTime.local().plus({ years: 1 }).startOf("year") }],
+    ["thisquarter", { unit: "quarter", date: DateTime.local().startOf("quarter") }],
+    ["lastquarter", { unit: "quarter", date: DateTime.local().minus({ quarters: 1 }).startOf("quarter") }],
+    ["nextquarter", { unit: "quarter", date: DateTime.local().plus({ quarters: 1 }).startOf("quarter") }],
 ]);
 
 export default class FilterValuesMapper {
-    public static toCalendarValue(filterValue: string): DateTime {
+    public static toCalendarValue(filterValue: string): FilterCalendarResponse {
         if (filterValue.startsWith("@")) {
             const potentialDate = valueToCalendarConverter.get(filterValue.slice(1).toLowerCase());
-            return potentialDate ? potentialDate : DateTime.local();
+            return potentialDate ? potentialDate : valueToCalendarConverter.get("today");
         }
-
         const potentialDate = DateTime.fromISO(filterValue);
-        return potentialDate.isValid ? potentialDate : DateTime.local();
+        return { unit: "day", date: potentialDate.isValid ? potentialDate : DateTime.local() };
     }
 }

src/lib/features/filters/model/FiltersModel.ts

@@ -2,6 +2,7 @@ import { Table } from "@tanstack/react-table";
 import { RowDataType } from "cdm/FolderModel";
 import { FiltersModalManager } from "../domain/FiltersModal";
 import { BaseModalHandlerResponse } from "cdm/ModalsModel";
+import { DateTime, DurationUnits } from "luxon";
 
 export type FilterGroup = AtomicFilter | FilterGroupCondition;
 
@@ -51,6 +52,13 @@ export type GroupFilterComponentProps = {
     possibleColumns: ColumnFilterOption[];
 };
 
+/***************************************
+ *      FILTERS MAPPERS
+***************************************/
+export type FilterCalendarResponse = {
+    unit: DurationUnits;
+    date: DateTime;
+}
 /***************************************
  *         FILTERS  MODAL
  ***************************************/