Merge branch '26-fr-metadata-columns-of-created-and-updated'

Author: RafaelGB

README.md

@@ -25,3 +25,7 @@ The information you add or edit will be saved into the target obsidian note.
 ### React UI
 - [react-table](https://github.com/TanStack/react-table)
 - [Notion Style base](https://github.com/archit-p/editable-react-table)
+
+## Support
+If you enjoy dbfolder, consider [buy me a coffee](https://www.buymeacoffee.com/5tsytn22v9Z)
+[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/5tsytn22v9Z)

package.json

@@ -22,24 +22,25 @@
 		"@rollup/plugin-json": "4.1.0",
 		"@rollup/plugin-node-resolve": "13.3.0",
 		"@rollup/plugin-typescript": "8.3.2",
-		"@types/jest": "27.5.0",
-		"@types/faker": "6.6.9",
+		"@types/jest": "27.5.1",
 		"@testing-library/jest-dom": "5.16.4",
     	"@testing-library/react": "12.1.2",
 		"@types/node": "17.0.31",
 		"@types/react": "17.0.43",
 		"@types/react-dom": "17.0.14",
 		"@types/react-table": "7.7.11",
 		"@types/react-window": "1.8.5",
+		"@types/react-calendar": "3.5.0",
 		"@types/react-beautiful-dnd": "13.1.2",
 		"@types/react-csv": "1.1.2",
-		"@typescript-eslint/eslint-plugin": "5.22.0",
-		"@typescript-eslint/parser": "5.22.0",
-		"eslint": "8.14.0",
+		"@types/luxon": "2.3.2",
+		"@typescript-eslint/eslint-plugin": "5.23.0",
+		"@typescript-eslint/parser": "5.23.0",
+		"eslint": "8.15.0",
 		"jest": "27.5.1",
-		"jest-mock-extended": "2.0.5",
+		"jest-mock-extended": "2.0.6",
 		"obsidian": "0.14.6",
-		"obsidian-dataview": "0.5.18",
+		"obsidian-dataview": "0.5.20",
 		"rollup": "2.72.0",
 		"ts-jest": "27.1.4",
 		"tslib": "2.4.0",
@@ -61,6 +62,8 @@
 		"react-popper": "2.3.0",
 		"react-table": "7.7.0",
 		"react-window": "1.8.7",
-		"regenerator-runtime": "0.13.9"
+		"react-calendar": "3.7.0",
+		"regenerator-runtime": "0.13.9",
+		"luxon": "2.4.0"
 	}
 }

src/DatabaseView.tsx

@@ -122,11 +122,15 @@ export class DatabaseView extends TextFileView implements HoverParent {
       let yamlColumns: Record<string, DatabaseColumn> =
         this.diskConfig.yaml.columns;
       // Complete the columns with the metadata columns
-      yamlColumns = await obtainMetadataColumns(yamlColumns);
+      yamlColumns = await obtainMetadataColumns(
+        yamlColumns,
+        this.diskConfig.yaml.config
+      );
       // Obtain base information about columns
       const columns = await obtainColumnsFromFolder(yamlColumns);
       const rows = await adapterTFilesToRows(
         this.file.parent.path,
+        columns,
         this.diskConfig.yaml.filters
       );
       // Define table properties

src/Settings.ts

@@ -18,7 +18,10 @@ export interface LocalSettings {
   enable_show_state: boolean;
   group_folder_column: string;
   remove_field_when_delete_column: boolean;
+  show_metadata_created: boolean;
+  show_metadata_modified: boolean;
 }
+
 export interface DatabaseSettings {
   global_settings: GlobalSettings;
   local_settings: LocalSettings;
@@ -32,7 +35,9 @@ export const DEFAULT_SETTINGS: DatabaseSettings = {
   local_settings: {
     enable_show_state: false,
     remove_field_when_delete_column: false,
-    group_folder_column: ''
+    group_folder_column: '',
+    show_metadata_created: false,
+    show_metadata_modified: false
   }
 };
 

src/__tests__/IO/columns.test.ts

@@ -5,13 +5,25 @@ describe("Columns", () => {
     /** Metadata columns */
     test('obtainMetadataColumns()', async () => {
         // Check if mandatory columns exists
-        const columnsRecord = await obtainMetadataColumns(generateYamlColumns(5));
+        const columnsRecord = await obtainMetadataColumns(generateYamlColumns(5), {
+            enable_show_state: false,
+            remove_field_when_delete_column: false,
+            group_folder_column: '',
+            show_metadata_created: false,
+            show_metadata_modified: false
+        });
         expect(columnsRecord).toHaveProperty(MetadataColumns.FILE);
         expect(columnsRecord).toHaveProperty(MetadataColumns.ADD_COLUMN);
     });
     /** Table columns */
     test('obtainColumnsFromFolder()', async () => {
-        const columnsRecord = await obtainMetadataColumns(generateYamlColumns(5));
+        const columnsRecord = await obtainMetadataColumns(generateYamlColumns(5), {
+            enable_show_state: false,
+            remove_field_when_delete_column: false,
+            group_folder_column: '',
+            show_metadata_created: false,
+            show_metadata_modified: false
+        });
         const tableColumns = await obtainColumnsFromFolder(columnsRecord);
         expect(tableColumns.length >= 5).toBeTruthy();
     });

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

@@ -8,6 +8,8 @@ import NoteInfo from "services/NoteInfo";
 import PopperSelectPortal from "components/portals/PopperSelectPortal";
 import { CellContext } from "components/contexts/CellContext";
 import { c } from "helpers/StylesHelper";
+import CalendarPortal from "./portals/CalendarPortal";
+import { TableColumn } from "cdm/FolderModel";
 
 /**
  * Obtain the path of the file inside cellValue
@@ -36,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) => {
@@ -56,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(() => {
@@ -82,13 +87,15 @@ export default function DefaultCell(cellProperties: Cell) {
     switch (dataType) {
       /** Plain text option */
       case DataTypes.TEXT:
-        return (
+        return (cellProperties.column as any).isMetadata ? (
+          <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"
           />
@@ -97,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"
           />
@@ -119,11 +126,11 @@ export default function DefaultCell(cellProperties: Cell) {
           );
         });
 
-        return <span ref={containerRef} className={`${c("md_cell")}`} ></span>;
+        return <span ref={containerRef} className={`${c("md_cell")}`}></span>;
       /** Selector option */
       case DataTypes.SELECT:
         return (
-          <CellContext.Provider value={{ value, setValue }}>
+          <CellContext.Provider value={{ contextValue, setContextValue }}>
             <PopperSelectPortal
               dispatch={dataDispatch}
               row={cellProperties.row}
@@ -134,7 +141,17 @@ export default function DefaultCell(cellProperties: Cell) {
             />
           </CellContext.Provider>
         );
-
+      /** Calendar option */
+      case DataTypes.CALENDAR:
+        return (
+          <CellContext.Provider value={{ contextValue, setContextValue }}>
+            <CalendarPortal
+              intialState={(cellProperties as any).initialState}
+              column={cellProperties.column as unknown as TableColumn}
+              cellProperties={cellProperties}
+            />
+          </CellContext.Provider>
+        );
       /** Default option */
       default:
         LOGGER.warn(`Unknown data type: ${dataType}`);

src/components/Columns.tsx

@@ -8,20 +8,43 @@ import { LOGGER } from "services/Logger";
 import { DatabaseColumn } from "cdm/DatabaseModel";
 import { RowSelectOption } from "cdm/RowSelectModel";
 import { dbTrim } from "helpers/StylesHelper";
+import { LocalSettings } from "Settings";
 
 /**
  * Add mandatory columns to the table
  * @param columns
  * @returns
  */
 export async function obtainMetadataColumns(
-  yamlColumns: Record<string, DatabaseColumn>
+  yamlColumns: Record<string, DatabaseColumn>,
+  localSetting: LocalSettings
 ): Promise<Record<string, DatabaseColumn>> {
   // If File is not already in the table, add it
   yamlColumns[MetadataColumns.FILE] = {
     ...MetadataDatabaseColumns.FILE,
     ...(yamlColumns[MetadataColumns.FILE] ?? {}),
   };
+
+  if (localSetting.show_metadata_created) {
+    // If Created is not already in the table, add it
+    yamlColumns[MetadataColumns.CREATED] = {
+      ...MetadataDatabaseColumns.CREATED,
+      ...(yamlColumns[MetadataColumns.CREATED] ?? {}),
+    };
+  } else {
+    delete yamlColumns[MetadataColumns.CREATED];
+  }
+
+  if (localSetting.show_metadata_modified) {
+    // If Modified is not already in the table, add it
+    yamlColumns[MetadataColumns.MODIFIED] = {
+      ...MetadataDatabaseColumns.MODIFIED,
+      ...(yamlColumns[MetadataColumns.MODIFIED] ?? {}),
+    };
+  } else {
+    delete yamlColumns[MetadataColumns.MODIFIED];
+  }
+
   yamlColumns[MetadataColumns.ADD_COLUMN] = MetadataDatabaseColumns.ADD_COLUMN;
   return yamlColumns;
 }
@@ -53,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,
@@ -134,13 +158,23 @@ async function columnOptions(
     };
   }
 
+  function isCalendar(): TableColumn {
+    LOGGER.debug(`<= columnOptions`, `return calendar column`);
+    return {
+      ...tableRow,
+      dataType: DataTypes.CALENDAR,
+      options: options,
+    };
+  }
+
   // Record of options
   let inputs: Record<string, any> = {};
   inputs[DataTypes.TEXT] = isText;
   inputs[DataTypes.NUMBER] = isNumber;
   inputs[DataTypes.SELECT] = isSelect;
   inputs[DataTypes.MARKDOWN] = isMarkdown;
   inputs[DataTypes.NEW_COLUMN] = isNewColumn;
+  inputs[DataTypes.CALENDAR] = isCalendar;
   if (inputs.hasOwnProperty(column.input)) {
     return await inputs[column.input]();
   } else {

src/components/Header.tsx

@@ -5,6 +5,7 @@ import MultiIcon from "components/img/Multi";
 import HashIcon from "components/img/Hash";
 import PlusIcon from "components/img/Plus";
 import HeaderMenu from "components/HeaderMenu";
+import CalendarIcon from "components/img/CalendarIcon";
 import MarkdownObsidian from "components/img/Markdown";
 import {
   ActionTypes,
@@ -56,7 +57,6 @@ export default function Header(headerProps: DatabaseHeaderProps) {
   const [expanded, setExpanded] = useState(created || false);
   const [domReady, setDomReady] = useState(false);
   const [referenceElement, setReferenceElement] = useState(null);
-  const [isMetadata, setIsMetadata] = useState(headerProps.column.isMetadata);
   const [isInline, setIsInline] = useState(headerProps.column.isInline);
   const [labelState, setLabelState] = useState(headerProps.column.label);
   React.useEffect(() => {
@@ -75,6 +75,9 @@ export default function Header(headerProps: DatabaseHeaderProps) {
       setOptionsOfSelectDataType(options, rows, id);
       propertyIcon = <MultiIcon />;
       break;
+    case DataTypes.CALENDAR:
+      propertyIcon = <CalendarIcon />;
+      break;
     case DataTypes.MARKDOWN:
       // TODO : add a markdown icon
       propertyIcon = <MarkdownObsidian />;
@@ -117,7 +120,7 @@ export default function Header(headerProps: DatabaseHeaderProps) {
         {labelState}
         {isInline && <span>*</span>}
       </div>
-      {!isMetadata && domReady
+      {domReady
         ? ReactDOM.createPortal(
             <HeaderMenu
               headerProps={headerProps}