Merge branch '17-fr-image-column-type'

Author: RafaelGB

src/cdm/DatabaseModel.ts

@@ -1,6 +1,8 @@
 import { RowType } from "cdm/RowTypeModel"
 import { Literal } from "obsidian-dataview/lib/data-model/value";
+import { Cell } from "react-table";
 import { LocalSettings } from "Settings"
+import { TableColumn, TableDataType } from "cdm/FolderModel";
 
 /** database column */
 export interface DatabaseColumn {
@@ -44,4 +46,10 @@ export type FilterCondition = {
 export type OptionSelect = {
     label: string;
     backgroundColor: string;
-}
+}
+
+export type CalendarProps = {
+    intialState: TableDataType;
+    column: TableColumn;
+    cellProperties: Cell;
+};

src/components/Cell.tsx

@@ -9,6 +9,7 @@ import { CellContext } from "components/contexts/CellContext";
 import { c } from "helpers/StylesHelper";
 import CalendarPortal from "./portals/CalendarPortal";
 import { TableColumn } from "cdm/FolderModel";
+import CalendarTimePortal from "./portals/CalendarTimePortal";
 
 export default function DefaultCell(cellProperties: Cell) {
   const dataDispatch = (cellProperties as any).dataDispatch;
@@ -75,8 +76,8 @@ export default function DefaultCell(cellProperties: Cell) {
   };
 
   const handlerEditableOnBlur = (event: any) => {
-    setDirtyCell(false);
     setContextValue((event) => ({ value: event.value, update: true }));
+    setDirtyCell(false);
   };
 
   // onChange handler
@@ -107,16 +108,13 @@ export default function DefaultCell(cellProperties: Cell) {
       row: cellProperties.row,
       columnId: (cellProperties.column as any).id,
     });
-    setDirtyCell(false);
   }
 
   function getCellElement() {
     switch (dataType) {
       /** Plain text option */
       case DataTypes.TEXT:
-        return (cellProperties.column as any).isMetadata ? (
-          <span className="data-input">{contextValue.value.toString()}</span>
-        ) : dirtyCell ? (
+        return dirtyCell ? (
           <input
             value={(contextValue.value && contextValue.value.toString()) || ""}
             onChange={handleOnChange}
@@ -156,9 +154,13 @@ export default function DefaultCell(cellProperties: Cell) {
       /** Calendar with time option */
       case DataTypes.CALENDAR_TIME:
         return (
-          <span className="data-input calendar-time">
-            {contextValue.value.toString()}
-          </span>
+          <CellContext.Provider value={{ contextValue, setContextValue }}>
+            <CalendarTimePortal
+              intialState={(cellProperties as any).initialState}
+              column={cellProperties.column as unknown as TableColumn}
+              cellProperties={cellProperties}
+            />
+          </CellContext.Provider>
         );
 
       /** Selector option */

src/components/HeaderMenu.tsx

@@ -1,5 +1,10 @@
 import { DatabaseHeaderProps } from "cdm/FolderModel";
-import { ActionTypes, DataTypes, StyleVariables } from "helpers/Constants";
+import {
+  ActionTypes,
+  DataTypes,
+  MetadataLabels,
+  StyleVariables,
+} from "helpers/Constants";
 import { dbTrim, c } from "helpers/StylesHelper";
 import ArrowUpIcon from "components/img/ArrowUp";
 import ArrowDownIcon from "components/img/ArrowDown";
@@ -9,6 +14,7 @@ import TrashIcon from "components/img/Trash";
 import TextIcon from "components/img/Text";
 import MultiIcon from "components/img/Multi";
 import HashIcon from "components/img/Hash";
+import CalendarTimeIcon from "components/img/CalendarTime";
 import CalendarIcon from "components/img/CalendarIcon";
 import AdjustmentsIcon from "components/img/AdjustmentsIcon";
 import React, { useContext, useEffect, useState } from "react";
@@ -214,6 +220,19 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
       icon: <CalendarIcon />,
       label: DataTypes.CALENDAR,
     },
+    {
+      onClick: (e: any) => {
+        dispatch({
+          type: ActionTypes.UPDATE_COLUMN_TYPE,
+          columnId: column.id,
+          dataType: DataTypes.CALENDAR_TIME,
+        });
+        setShowType(false);
+        setExpanded(false);
+      },
+      icon: <CalendarTimeIcon />,
+      label: MetadataLabels.CALENDAR_TIME,
+    },
   ];
 
   const typePopper = usePopper(typeReferenceElement, typePopperElement, {
@@ -468,9 +487,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
                           control={
                             <Switch
                               checked={isInline}
-                              onChange={(event) => {
-                                handleChangeToggleInlineFrontmatter(event);
-                              }}
+                              onChange={handleChangeToggleInlineFrontmatter}
                             />
                           }
                           label="Inline"

src/components/portals/CalendarPortal.tsx

@@ -1,18 +1,12 @@
-import { TableColumn, TableDataType } from "cdm/FolderModel";
 import { CellContext } from "components/contexts/CellContext";
 import { ActionTypes } from "helpers/Constants";
 import React, { useContext, useState } from "react";
 import { DateTime } from "luxon";
-import { Cell } from "react-table";
 import DatePicker from "react-datepicker";
 import NoteInfo from "services/NoteInfo";
 import { Portal } from "@material-ui/core";
+import { CalendarProps } from "cdm/DatabaseModel";
 
-type CalendarProps = {
-  intialState: TableDataType;
-  column: TableColumn;
-  cellProperties: Cell;
-};
 const CalendarPortal = (calendarProps: CalendarProps) => {
   const { column, cellProperties } = calendarProps;
   const dataDispatch = (cellProperties as any).dataDispatch;

src/components/portals/CalendarTimePortal.tsx

@@ -0,0 +1,70 @@
+import { CellContext } from "components/contexts/CellContext";
+import { ActionTypes } from "helpers/Constants";
+import React, { useContext, useState } from "react";
+import { DateTime } from "luxon";
+import DatePicker from "react-datepicker";
+import NoteInfo from "services/NoteInfo";
+import { Portal } from "@material-ui/core";
+import { CalendarProps } from "cdm/DatabaseModel";
+
+const CalendarTimePortal = (calendarProps: CalendarProps) => {
+  const { column, cellProperties } = calendarProps;
+  const dataDispatch = (cellProperties as any).dataDispatch;
+  // Selector reference state
+
+  // Selector popper state
+  /** state of cell value */
+  const { contextValue, setContextValue } = useContext(CellContext);
+
+  /** 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()
+      : null
+  );
+
+  function handleCalendarChange(date: Date) {
+    const newValue = DateTime.fromJSDate(date);
+    // save on disk
+    dataDispatch({
+      type: ActionTypes.UPDATE_CELL,
+      file: note.getFile(),
+      key: column.key,
+      value: DateTime.fromJSDate(date).toFormat("yyyy-MM-dd"),
+      row: cellProperties.row,
+      columnId: column.id,
+    });
+
+    setCalendarState(date);
+    setContextValue({
+      value: newValue,
+      update: true,
+    });
+  }
+
+  const CalendarContainer = (containerProps: any) => {
+    const el = document.getElementById("popper-container");
+    return <Portal container={el}>{containerProps.children}</Portal>;
+  };
+
+  return column.isMetadata ? (
+    <span className="data-input calendar-time">
+      {(contextValue.value as DateTime).toFormat("yyyy-MM-dd h:mm a")}
+    </span>
+  ) : (
+    <div className="data-input calendar-time">
+      <DatePicker
+        dateFormat="yyyy-MM-dd h:mm aa"
+        selected={calendarState}
+        onChange={handleCalendarChange}
+        popperContainer={CalendarContainer}
+        timeInputLabel="Time:"
+        showTimeInput
+        placeholderText="Pick a moment..."
+      />
+    </div>
+  );
+};
+
+export default CalendarTimePortal;

src/components/reducers/DatabaseDispatch.tsx

@@ -213,6 +213,7 @@ export function databaseReducer(state: TableDataType, action: ActionType) {
            * - TEXT
            * - NUMBER
            * - CALENDAR
+           * - CALENDAR_TIME
            */
           return update(state, {
             skipReset: { $set: true },

src/helpers/Constants.ts

@@ -41,6 +41,7 @@ export const MetadataLabels = Object.freeze({
   ADD_COLUMN: '+',
   CREATED: 'Created',
   MODIFIED: 'Modified',
+  CALENDAR_TIME: 'Calendar time',
 });
 
 export const MetadataDatabaseColumns = Object.freeze({

src/services/DataviewService.ts

@@ -66,10 +66,8 @@ class DataviewProxy {
         // Check empty or undefined literals
         switch (dataTypeDst) {
             case DataTypes.CALENDAR:
-                parsedLiteral = this.parseToCalendar(wrapped);
-                break;
             case DataTypes.CALENDAR_TIME:
-                parsedLiteral = this.parseToCalendarTime(wrapped);
+                parsedLiteral = this.parseToCalendar(wrapped);
                 break;
             case DataTypes.NUMBER:
                 parsedLiteral = wrapped.type === 'number' ? literal : Number(literal);
@@ -107,14 +105,6 @@ class DataviewProxy {
             return null;
         }
     }
-
-    private parseToCalendarTime(literal: WrappedLiteral): Literal {
-        if (literal.type === 'string') {
-            return DateTime.fromISO(literal.value);
-        } else {
-            return literal.value;
-        }
-    }
 }
 
 export const DataviewService = DataviewProxy.getInstance();