funcional work, needs an optimization

Author: RafaelGB

src/cdm/DatabaseModel.ts

@@ -39,4 +39,9 @@ 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

@@ -1,9 +1,9 @@
 import { TableColumn, TableDataType } from "cdm/FolderModel";
 import { CellContext } from "components/contexts/CellContext";
 import { ActionTypes, DataTypes, StyleVariables } from "helpers/Constants";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useState } from "react";
 import Calendar from "react-calendar";
-import ReactDOM, { unmountComponentAtNode } from "react-dom";
+import ReactDOM from "react-dom";
 import { DateTime } from "luxon";
 import { usePopper } from "react-popper";
 import { Cell } from "react-table";
@@ -29,9 +29,13 @@ const CalendarPortal = (calendarProps: CalendarProps) => {
 
   /** Note info of current Cell */
   const note: NoteInfo = (cellProperties.row.original as any).note;
-
   const [calendarState, setCalendarState] = useState(
-    (contextValue.value as DateTime).toJSDate()
+    (
+      DataviewService.parseLiteral(
+        cellProperties.value,
+        DataTypes.CALENDAR
+      ) as DateTime
+    ).toJSDate()
   );
 
   function handleCalendarChange(date: Date) {

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/services/FileManagerService.ts

@@ -65,7 +65,6 @@ class VaultManager {
 
   ontainCurrentFrontmatter(content: string): Record<string, string> {
     const match = content.match(/^---\s+([\w\W]+?)\s+---/);
-    console.log("probando");
     if (match) {
       const frontmatterRaw = match[1];
       const yaml = parseYaml(frontmatterRaw);