refactor from string to Literal dataview of all inputs.

Calendar working

Author: RafaelGB

src/cdm/FolderModel.ts

@@ -7,6 +7,7 @@ import NoteInfo from "services/NoteInfo";
 import { TFile } from "obsidian";
 import { DatabaseColumn } from "cdm/DatabaseModel";
 import { Column } from "react-table";
+import { Literal } from "obsidian-dataview/lib/data-model/value";
 
 export type Group = Parameter | Parameters | FolderModel | Models;
 type Parameter = {
@@ -42,7 +43,7 @@ export interface TableColumn {
     accessor: any;
     minWidth?: number;
     width?: number;
-    dataType?: string;
+    dataType: string;
     options?: RowSelectOption[];
     Cell?: any;
     getHeaderProps?: any;
@@ -56,7 +57,7 @@ export interface TableColumn {
 export type RowDataType = {
     id: number,
     note: NoteInfo,
-    [key: string]: RowType
+    [key: string]: Literal | NoteInfo
 }
 
 export type TableDataType = {

src/components/Cell.tsx

@@ -38,12 +38,15 @@ export default function DefaultCell(cellProperties: Cell) {
   /** Note info of current Cell */
   const note: NoteInfo = (cellProperties.row.original as any).note;
   /** state of cell value */
-  const [value, setValue] = useState({ value: initialValue, update: false });
+  const [contextValue, setContextValue] = useState({
+    value: initialValue,
+    update: false,
+  });
   /** state for keeping the timeout to trigger the editior */
   const [editNoteTimeout, setEditNoteTimeout] = useState(null);
   /** states for selector option  */
   LOGGER.debug(
-    `<=> Cell.rendering dataType: ${dataType}. value: ${value.value}`
+    `<=> Cell.rendering dataType: ${dataType}. value: ${contextValue.value}`
   );
 
   const handleKeyDown = (event: any) => {
@@ -58,7 +61,7 @@ export default function DefaultCell(cellProperties: Cell) {
       clearTimeout(editNoteTimeout);
     }
     // first update the input text as user type
-    setValue({ value: event.target.value, update: false });
+    setContextValue({ value: event.target.value, update: false });
     // initialize a setimeout by wrapping in our editNoteTimeout so that we can clear it out using clearTimeout
     setEditNoteTimeout(
       setTimeout(() => {
@@ -85,14 +88,14 @@ export default function DefaultCell(cellProperties: Cell) {
       /** Plain text option */
       case DataTypes.TEXT:
         return (cellProperties.column as any).isMetadata ? (
-          <span className="data-input">{value.value.toString()}</span>
+          <span className="data-input">{contextValue.value.toString()}</span>
         ) : (
           <ContentEditable
-            html={(value.value && value.value.toString()) || ""}
+            html={(contextValue.value && contextValue.value.toString()) || ""}
             onChange={handleOnChange}
             onKeyDown={handleKeyDown}
             onBlur={() =>
-              setValue((old) => ({ value: old.value, update: true }))
+              setContextValue((old) => ({ value: old.value, update: true }))
             }
             className="data-input"
           />
@@ -101,10 +104,10 @@ export default function DefaultCell(cellProperties: Cell) {
       case DataTypes.NUMBER:
         return (
           <ContentEditable
-            html={(value.value && value.value.toString()) || ""}
+            html={(contextValue.value && contextValue.value.toString()) || ""}
             onChange={handleOnChange}
             onBlur={() =>
-              setValue((old) => ({ value: old.value, update: true }))
+              setContextValue((old) => ({ value: old.value, update: true }))
             }
             className="data-input text-align-right"
           />
@@ -127,7 +130,7 @@ export default function DefaultCell(cellProperties: Cell) {
       /** Selector option */
       case DataTypes.SELECT:
         return (
-          <CellContext.Provider value={{ value, setValue }}>
+          <CellContext.Provider value={{ contextValue, setContextValue }}>
             <PopperSelectPortal
               dispatch={dataDispatch}
               row={cellProperties.row}
@@ -141,10 +144,11 @@ export default function DefaultCell(cellProperties: Cell) {
       /** Calendar option */
       case DataTypes.CALENDAR:
         return (
-          <CellContext.Provider value={{ value, setValue }}>
+          <CellContext.Provider value={{ contextValue, setContextValue }}>
             <CalendarPortal
               intialState={(cellProperties as any).initialState}
               column={cellProperties.column as unknown as TableColumn}
+              cellProperties={cellProperties}
             />
           </CellContext.Provider>
         );

src/components/Columns.tsx

@@ -76,6 +76,7 @@ function parseDatabaseToTableColumn(
   const tableColumn: TableColumn = {
     ...(databaseColumn as Partial<TableColumn>),
     id: columnKey,
+    dataType: databaseColumn.input,
     position: databaseColumn.position ?? index,
     key: databaseColumn.key ?? columnKey,
     label: databaseColumn.label,

src/components/HeaderMenu.tsx

@@ -243,11 +243,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
     });
     setExpanded(false);
     setkeyState(newKey);
-    columnWidthState.widthRecord[newKey] = getColumnWidthStyle(
-      rows,
-      newKey,
-      labelState
-    );
+    columnWidthState.widthRecord[newKey] = getColumnWidthStyle(rows, column);
 
     /*
       To adjust column settings to the new key, we need to update the order 
@@ -296,8 +292,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
     const columnLabel = `New Column ${columnNumber}`;
     columnWidthState.widthRecord[columnName] = getColumnWidthStyle(
       rows,
-      columnName,
-      columnLabel
+      column
     );
     setColumnWidthState(columnWidthState);
     return { name: columnName, position: wantedPosition, label: columnLabel };

src/components/contexts/CellContext.tsx

@@ -1,12 +1,13 @@
+import { Literal } from "obsidian-dataview/lib/data-model/value";
 import React from "react";
 
 export type CellDataType = {
-  value: string;
+  value: Literal;
   update: boolean;
 };
 
 type CellContextType = {
-  value: CellDataType;
-  setValue: (value: CellDataType) => void;
+  contextValue: CellDataType;
+  setContextValue: (value: CellDataType) => void;
 };
 export const CellContext = React.createContext<CellContextType | null>(null); //exporting context object

src/components/portals/CalendarPortal.tsx

@@ -1,38 +1,55 @@
 import { TableColumn, TableDataType } from "cdm/FolderModel";
 import { CellContext } from "components/contexts/CellContext";
-import { StyleVariables } from "helpers/Constants";
+import { ActionTypes, StyleVariables } from "helpers/Constants";
 import React, { useContext, useState } from "react";
 import Calendar from "react-calendar";
 import ReactDOM from "react-dom";
 import { DateTime } from "luxon";
 import { usePopper } from "react-popper";
+import { Cell } from "react-table";
+import NoteInfo from "services/NoteInfo";
 
 type CalendarProps = {
   intialState: TableDataType;
   column: TableColumn;
+  cellProperties: Cell;
 };
 const CalendarPortal = (calendarProps: CalendarProps) => {
-  const { column } = calendarProps;
+  const { column, cellProperties } = calendarProps;
+  const dataDispatch = (cellProperties as any).dataDispatch;
   const [showCalendar, setShowCalendar] = useState(false);
   // Selector reference state
   const [calendarRef, setCalendarRef] = useState(null);
   // Selector popper state
   const [selectPop, setSelectPop] = useState(null);
   const { styles, attributes } = usePopper(calendarRef, selectPop);
   /** state of cell value */
-  const { value, setValue } = useContext(CellContext);
+  const { contextValue, setContextValue } = useContext(CellContext);
 
-  let initialDate = new Date();
-  if (DateTime.isDateTime(value.value)) {
-    initialDate = DateTime.fromFormat(value.value, "yyyy-MM-dd").toJSDate();
-  }
-  const [calendarState, setCalendarState] = useState(initialDate);
+  /** Note info of current Cell */
+  const note: NoteInfo = (cellProperties.row.original as any).note;
+
+  const [calendarState, setCalendarState] = useState(
+    DateTime.isDateTime(contextValue.value)
+      ? contextValue.value.toJSDate()
+      : new Date()
+  );
 
   function handleCalendarChange(date: Date) {
+    const newValue = DateTime.fromJSDate(date);
+    // save on disk
+    dataDispatch({
+      type: ActionTypes.UPDATE_CELL,
+      file: note.getFile(),
+      key: (cellProperties.column as any).key,
+      value: DateTime.fromJSDate(date).toFormat("yyyy-MM-dd"),
+      row: cellProperties.row,
+      columnId: (cellProperties.column as any).id,
+    });
     setCalendarState(date);
     setShowCalendar(false);
-    setValue({
-      value: DateTime.fromJSDate(date).toFormat("yyyy-MM-dd"),
+    setContextValue({
+      value: newValue,
       update: true,
     });
   }
@@ -57,7 +74,7 @@ const CalendarPortal = (calendarProps: CalendarProps) => {
           padding: "0.5rem",
           background: StyleVariables.BACKGROUND_SECONDARY,
         }}
-        onBlur={() => setShowCalendar(false)}
+        onMouseLeave={() => setShowCalendar(false)}
       >
         <Calendar onChange={handleCalendarChange} value={calendarState} />
       </div>
@@ -69,8 +86,13 @@ const CalendarPortal = (calendarProps: CalendarProps) => {
         className="data-input calendar"
         ref={setCalendarRef}
         onClick={handlerOnClick}
+        onBlur={() => setShowCalendar(false)}
       >
-        <span>{value.value}</span>
+        <span>
+          {DateTime.isDateTime(contextValue.value)
+            ? contextValue.value.toFormat("yyyy-MM-dd")
+            : ""}
+        </span>
       </div>
       {showCalendar &&
         ReactDOM.createPortal(

src/components/portals/PopperSelectPortal.tsx

@@ -11,7 +11,7 @@ import { CellContext } from "components/contexts/CellContext";
 const PopperSelectPortal = (popperProps: PopperProps) => {
   const { dispatch, row, column, columns, note, state } = popperProps;
   /** state of cell value */
-  const { value, setValue } = useContext(CellContext);
+  const { contextValue, setContextValue } = useContext(CellContext);
   // Selector reference state
   const [selectRef, setSelectRef] = useState(null);
   const [showSelect, setShowSelect] = useState(false);
@@ -31,7 +31,7 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
   }
 
   function handleOptionClick(option: { label: string; backgroundColor?: any }) {
-    setValue({ value: option.label, update: true });
+    setContextValue({ value: option.label, update: true });
     setShowSelect(false);
     // save on disk & move file if its configured on the column
     dispatch({
@@ -78,7 +78,7 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
 
   function getColor() {
     const match = (column as any).options.find(
-      (option: { label: any }) => option.label === value.value
+      (option: { label: any }) => option.label === contextValue.value
     );
     return (match && match.backgroundColor) || grey(200);
   }
@@ -170,8 +170,11 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
         className="cell-padding d-flex cursor-default align-items-center flex-1"
         onClick={() => setShowSelect(true)}
       >
-        {value.value && (
-          <Relationship value={value.value} backgroundColor={getColor()} />
+        {contextValue.value && (
+          <Relationship
+            value={contextValue.value}
+            backgroundColor={getColor()}
+          />
         )}
       </div>
       {domReady

src/components/reducers/DatabaseDispatch.tsx

@@ -268,6 +268,7 @@ export function databaseReducer(state: TableDataType, action: ActionType) {
             ...state.columns.slice(0, leftIndex),
             {
               ...TableColumnsTemplate,
+              dataType: newLeftColumn.input,
               id: newLeftColumn.accessor,
               label: newLeftColumn.label,
               key: newLeftColumn.key,
@@ -306,6 +307,7 @@ export function databaseReducer(state: TableDataType, action: ActionType) {
             ...state.columns.slice(0, rightIndex + 1),
             {
               ...TableColumnsTemplate,
+              dataType: newRIghtColumn.input,
               id: newRIghtColumn.accessor,
               label: newRIghtColumn.label,
               key: newRIghtColumn.key,

src/components/styles/ColumnWidthStyle.ts

@@ -1,34 +1,48 @@
 import { TableColumn } from "cdm/FolderModel";
 import { ColumnWidthState } from "cdm/StyleModel";
-import { MetadataColumns, WidthVariables } from "helpers/Constants";
+import { DataTypes, MetadataColumns, WidthVariables } from "helpers/Constants";
 import { getNormalizedPath } from "helpers/VaultManagement";
+import { DateTime } from "luxon";
 import { Row } from "react-table";
 
-export const getColumnWidthStyle = (rows: Array<Row<object>>, accessor: string, headerText: string, customMaxWidth?: number): number => {
+export const getColumnWidthStyle = (rows: Array<Row<object>>, column: TableColumn, customMaxWidth?: number): number => {
   const maxWidth = (customMaxWidth ?? 400)
 
   const cellLength = Math.max(
-    ...rows.map((row: any) => lengthOfNormalizeCellValue(row, accessor)),
-    headerText.length, WidthVariables.ICON_SPACING
+    ...rows.map((row: any) => lengthOfNormalizeCellValue(row, column)),
+    column.label.length, WidthVariables.ICON_SPACING
   )
   return Math.min(maxWidth, cellLength * WidthVariables.MAGIC_SPACING)
 }
 
-const lengthOfNormalizeCellValue = (row: any, accessor: string): number => {
-  const value = (`${row.original[accessor]}` || '');
-  switch (accessor) {
-    case MetadataColumns.FILE:
-      return getNormalizedPath(value).alias.length
+/**
+ * Obtain length of a cell value in function of its type and render strategy
+ * @param row 
+ * @param column 
+ * @returns 
+ */
+const lengthOfNormalizeCellValue = (row: any, column: TableColumn): number => {
+  const value = (`${row.original[column.key]}` || '');
+  let result = 0;
+  switch (column.dataType) {
+    case DataTypes.MARKDOWN:
+      result = getNormalizedPath(value).alias.length
+      break;
+    case DataTypes.CALENDAR:
+      result = DateTime.isDateTime(value) ? value.toFormat('yyyy-MM-dd').length : 0
+      break;
+    default:
+      result = value.length
   }
-  return value.length
+  return result
 }
 
 export const getColumnsWidthStyle = (rows: Array<Row<object>>, columns: TableColumn[]): ColumnWidthState => {
   const columnWidthStyle: ColumnWidthState = {
     widthRecord: {}
   }
   columns.forEach((column: TableColumn) => {
-    columnWidthStyle.widthRecord[column.id] = getColumnWidthStyle(rows, column.key, column.label);
+    columnWidthStyle.widthRecord[column.id] = getColumnWidthStyle(rows, column);
   })
   return columnWidthStyle
 }

src/helpers/Constants.ts

@@ -88,7 +88,6 @@ export const MetadataDatabaseColumns = Object.freeze({
 
 export const TableColumnsTemplate: Partial<TableColumn> =
 {
-  dataType: DataTypes.TEXT,
   isMetadata: false,
   skipPersist: false,
   isInline: false,