Merge branch 'bug-do-not-add-keys-when-change-label'

Author: RafaelGB

docs/changelog.md

@@ -1,3 +1,14 @@
+## 1.0.0
+*Published on 2022/05/13*
+### Shiny new things
+- New type of column: Calendar
+- 2 new settings to show metadata file of created and modified using a toggle button
+- Now metadata columns can be sorted and add columns to the right or left
+### Improved
+- Type control using Literal of dataview. this will allow with futures versions the versatility of dataview plugin (images,links,...)
+- Refactor of settings to control errors in case of something is missing with a marshall and unmarshall
+### No longer broken
+- Control of options as unique with Select column type
 ## 0.3.1
 *Published on 2022/05/10*
 ### Shiny new things

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "dbfolder",
 	"name": "DB Folder",
-	"version": "0.3.1",
+	"version": "1.0.0",
 	"minAppVersion": "0.14.6",
 	"description": "Folder with the capability to store and retrieve data from a folder like database",
 	"author": "RafaelGB",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-dbfolder",
-	"version": "0.3.1",
+	"version": "1.0.0",
 	"description": "This is a sample plugin for Obsidian (https://obsidian.md)",
 	"main": "main.js",
 	"scripts": {

src/cdm/DatabaseModel.ts

@@ -1,4 +1,5 @@
 import { RowType } from "cdm/RowTypeModel"
+import { Literal } from "obsidian-dataview/lib/data-model/value";
 import { LocalSettings } from "Settings"
 
 /** database column */
@@ -30,12 +31,17 @@ export interface DatabaseYaml {
 }
 
 export type RowDatabaseFields = {
-    frontmatter: Record<string, any>;
-    inline: Record<string, any>;
+    frontmatter: Record<string, Literal>;
+    inline: Record<string, Literal>;
 }
 
 export type FilterCondition = {
     field: string;
     operator: string;
     value?: any;
+}
+
+export type OptionSelect = {
+    label: string;
+    backgroundColor: string;
 }

src/components/Cell.tsx

@@ -1,5 +1,5 @@
 import { ActionTypes, DataTypes } from "helpers/Constants";
-import React, { useLayoutEffect, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import ContentEditable, { ContentEditableEvent } from "react-contenteditable";
 import { LOGGER } from "services/Logger";
 import { Cell } from "react-table";
@@ -28,6 +28,7 @@ function getFilePath(cellValue: string): string {
 }
 
 export default function DefaultCell(cellProperties: Cell) {
+  console.log("render cell");
   const dataDispatch = (cellProperties as any).dataDispatch;
   /** Initial state of cell */
   const initialValue = cellProperties.value;
@@ -44,10 +45,20 @@ export default function DefaultCell(cellProperties: Cell) {
   });
   /** state for keeping the timeout to trigger the editior */
   const [editNoteTimeout, setEditNoteTimeout] = useState(null);
+  const [dirtyCell, setDirtyCell] = useState(false);
   /** states for selector option  */
   LOGGER.debug(
     `<=> Cell.rendering dataType: ${dataType}. value: ${contextValue.value}`
   );
+  // set contextValue when cell is loaded
+  useEffect(() => {
+    if (!dirtyCell && initialValue !== contextValue.value) {
+      setContextValue({
+        value: initialValue,
+        update: false,
+      });
+    }
+  }, []);
 
   const handleKeyDown = (event: any) => {
     if (event.key === "Enter") {
@@ -62,6 +73,7 @@ export default function DefaultCell(cellProperties: Cell) {
     }
     // first update the input text as user type
     setContextValue({ value: event.target.value, update: false });
+    setDirtyCell(true);
     // initialize a setimeout by wrapping in our editNoteTimeout so that we can clear it out using clearTimeout
     setEditNoteTimeout(
       setTimeout(() => {
@@ -81,6 +93,7 @@ export default function DefaultCell(cellProperties: Cell) {
       row: cellProperties.row,
       columnId: (cellProperties.column as any).id,
     });
+    setDirtyCell(false);
   }
 
   function getCellElement() {

src/components/portals/CalendarPortal.tsx

@@ -29,11 +29,10 @@ const CalendarPortal = (calendarProps: CalendarProps) => {
 
   /** Note info of current Cell */
   const note: NoteInfo = (cellProperties.row.original as any).note;
-
   const [calendarState, setCalendarState] = useState(
     (
       DataviewService.parseLiteral(
-        contextValue.value,
+        cellProperties.value,
         DataTypes.CALENDAR
       ) as DateTime
     ).toJSDate()
@@ -60,11 +59,19 @@ const CalendarPortal = (calendarProps: CalendarProps) => {
 
   function handlerOnClick(e: any) {
     if (!column.isMetadata) {
+      const portalActive = document.getElementById("unique-calendar-portal");
+      if (!showCalendar && portalActive !== null) {
+        // Hacky way to trigger focus event on opened calendar
+        // react-calendar has a bug where it doesn't trigger focus event
+        portalActive.setAttribute("tabindex", "-1");
+        portalActive.focus();
+        portalActive.blur();
+      }
       setShowCalendar(!showCalendar);
     }
   }
 
-  function renderCalendar() {
+  function displayCalendar() {
     return (
       <div
         className="menu"
@@ -79,26 +86,28 @@ const CalendarPortal = (calendarProps: CalendarProps) => {
           background: StyleVariables.BACKGROUND_SECONDARY,
         }}
         onMouseLeave={() => setShowCalendar(false)}
+        onBlur={() => setShowCalendar(false)}
+        id={"unique-calendar-portal"}
       >
         <Calendar onChange={handleCalendarChange} value={calendarState} />
       </div>
     );
   }
+
   return (
     <>
       <div
         className="data-input calendar"
         ref={setCalendarRef}
         onClick={handlerOnClick}
-        onBlur={() => setShowCalendar(false)}
       >
         <span>
           {DataviewService.parseLiteral(contextValue.value, DataTypes.TEXT)}
         </span>
       </div>
       {showCalendar &&
         ReactDOM.createPortal(
-          renderCalendar(),
+          displayCalendar(),
           document.getElementById("popper-container")
         )}
     </>

src/components/reducers/DatabaseDispatch.tsx

@@ -13,9 +13,14 @@ import { ActionType } from "react-table";
 import { VaultManagerDB } from "services/FileManagerService";
 import { moveFile, updateRowFile } from "helpers/VaultManagement";
 import { randomColor } from "helpers/Colors";
-import { DatabaseColumn, RowDatabaseFields } from "cdm/DatabaseModel";
+import {
+  DatabaseColumn,
+  OptionSelect,
+  RowDatabaseFields,
+} from "cdm/DatabaseModel";
 import NoteInfo from "services/NoteInfo";
 import { DataviewService } from "services/DataviewService";
+import { obtainUniqueOptionValues } from "helpers/SelectHelper";
 
 export function databaseReducer(state: TableDataType, action: ActionType) {
   LOGGER.debug(
@@ -166,13 +171,13 @@ export function databaseReducer(state: TableDataType, action: ActionType) {
         ...row,
         [action.columnId]: DataviewService.parseLiteral(
           row[action.columnId],
-          action.dataType // Destination type to parse
+          action.TEXT // Destination type to parse
         ),
       }));
       // Update state
       switch (action.dataType) {
         case DataTypes.SELECT:
-          const options: any = [];
+          const options: OptionSelect[] = [];
           // Generate selected options
           parsedData.forEach((row) => {
             if (row[action.columnId]) {
@@ -191,7 +196,7 @@ export function databaseReducer(state: TableDataType, action: ActionType) {
                 {
                   ...state.columns[typeIndex],
                   dataType: action.dataType,
-                  options: [...state.columns[typeIndex].options, ...options],
+                  options: obtainUniqueOptionValues(options),
                 },
                 ...state.columns.slice(typeIndex + 1, state.columns.length),
               ],

src/helpers/SelectHelper.ts

@@ -0,0 +1,11 @@
+import { OptionSelect } from "cdm/DatabaseModel";
+
+export function obtainUniqueOptionValues(arrayOptions: OptionSelect[]): OptionSelect[] {
+    const uniqueValues: OptionSelect[] = [];
+    arrayOptions.forEach(option => {
+        if (!uniqueValues.some(unique => unique.label === option.label)) {
+            uniqueValues.push(option);
+        }
+    });
+    return uniqueValues;
+}

src/helpers/VaultManagement.ts

@@ -94,6 +94,7 @@ export async function updateRowFile(file: TFile, columnId: string, newValue: str
   LOGGER.info(`=>updateRowFile. file: ${file.path} | columnId: ${columnId} | newValue: ${newValue} | option: ${option}`);
   const rowFields = obtainRowDatabaseFields(file, state.columns);
   const content = await VaultManagerDB.obtainContentFromTfile(file);
+  let currentFrontmatter = VaultManagerDB.ontainCurrentFrontmatter(content);
   const column = state.columns.find(c => c.key === columnId);
 
   // Adds an empty frontmatter at the beginning of the file
@@ -128,12 +129,15 @@ export async function updateRowFile(file: TFile, columnId: string, newValue: str
   // Modify key of a column
   async function columnKey(): Promise<void> {
     if (column.isInline) {
+      // Go to inline mode
       await inlineColumnKey();
       return;
     }
-    if (!Object.prototype.hasOwnProperty.call(rowFields.frontmatter, columnId)) {
+    // If field does not exist yet, ignore it
+    if (!Object.prototype.hasOwnProperty.call(currentFrontmatter, columnId)) {
       return;
     }
+
     // Check if the column is already in the frontmatter
     // assign an empty value to the new key
     rowFields.frontmatter[newValue] = rowFields.frontmatter[columnId] ?? "";
@@ -157,7 +161,7 @@ export async function updateRowFile(file: TFile, columnId: string, newValue: str
       action: 'replace',
       file: file,
       regexp: frontmatterGroupRegex,
-      newValue: parseFrontmatterFieldsToString(rowFields, content, deletedColumn)
+      newValue: parseFrontmatterFieldsToString(rowFields, currentFrontmatter, deletedColumn)
     };
     await VaultManagerDB.editNoteContent(noteObject);
   }
@@ -238,9 +242,10 @@ export async function updateRowFile(file: TFile, columnId: string, newValue: str
   // Execute action
   if (updateOptions[option]) {
     // Check if file has frontmatter
-    if (!hasFrontmatterKey(content)) {
+    if (currentFrontmatter === undefined) {
       // If not, add it
       await addFrontmatter();
+      currentFrontmatter = {};
     }
     // Then execute the action
     await updateOptions[option]();

src/parsers/RowDatabaseFieldsToFile.ts

@@ -1,28 +1,25 @@
 import { RowDatabaseFields } from "cdm/DatabaseModel";
 import { parseYaml } from "obsidian";
-export const parseFrontmatterFieldsToString = (databaseFields: RowDatabaseFields, original: string, deletedColumn?: string): string => {
+export const parseFrontmatterFieldsToString = (databaseFields: RowDatabaseFields, original: Record<string, string>, deletedColumn?: string): string => {
     const frontmatterFields = databaseFields.frontmatter;
     const inlineFields = databaseFields.inline;
     const array: string[] = [];
     array.push(`---`);
     Object.keys(frontmatterFields).forEach(key => {
         array.push(`${key}: ${frontmatterFields[key]}`);
     });
-    const match = original.match(/^---\s+([\w\W]+?)\s+---/);
-    if (match) {
-        const frontmatterRaw = match[1];
-        const yaml = parseYaml(frontmatterRaw);
-        Object.keys(yaml)
-            .filter(fkey =>
-                // Filter out duplicates and deleted columns
-                !Object.prototype.hasOwnProperty.call(inlineFields, fkey)
-                && !Object.prototype.hasOwnProperty.call(frontmatterFields, fkey)
-                && fkey !== deletedColumn)
-            .forEach(key => {
-                // add frontmatter fields that are not specified as database fields
-                array.push(`${key}: ${yaml[key] ?? ''}`);
-            });
-    }
+
+    Object.keys(original)
+        .filter(fkey =>
+            // Filter out duplicates and deleted columns
+            !Object.prototype.hasOwnProperty.call(inlineFields, fkey)
+            && !Object.prototype.hasOwnProperty.call(frontmatterFields, fkey)
+            && fkey !== deletedColumn)
+        .forEach(key => {
+            // add frontmatter fields that are not specified as database fields
+            array.push(`${key}: ${original[key] ?? ''}`);
+        });
+
     array.push(`---`);
     return array.join('\n');
 }