fix of options dont been updated on memory (was ok on disk)

Author: RafaelGB

src/cdm/ComponentsModel.ts

@@ -8,6 +8,12 @@ export type RowSelectOption = {
     label: string,
 }
 
+export type ColumnOption = {
+    value: string;
+    label: string;
+    color: string;
+}
+
 export type SelectValue = {
     label: string;
     value: string;

src/cdm/TableStateInterface.ts

@@ -1,6 +1,7 @@
 import { SortingState } from "@tanstack/react-table";
 import { ConfigColumn, RowDataType, TableColumn } from "cdm/FolderModel";
 import { FilterSettings, GlobalSettings, LocalSettings } from "cdm/SettingsModel";
+import { ColumnOption } from "cdm/ComponentsModel";
 import { DatabaseView } from "DatabaseView";
 import { Literal } from "obsidian-dataview";
 import { StoreApi, UseBoundStore } from "zustand";
@@ -80,6 +81,7 @@ export interface ColumnsState {
         getAllColumns: () => TableColumn[];
         getValueOfAllColumnsAsociatedWith: <K extends keyof TableColumn>(key: K) => TableColumn[K][];
         getVisibilityRecord: () => Record<string, boolean>;
+        getColumnOptions: (id: string) => ColumnOption[];
     }
 }
 export interface ColumnSortingState {

src/components/cellTypes/SelectCell.tsx

@@ -24,7 +24,7 @@ const SelectCell = (popperProps: CellComponentProps) => {
   const selectRow = tableState.data((state) => state.rows[row.index]);
   const columnsInfo = tableState.columns((state) => state.info);
   const configInfo = tableState.configState((state) => state.info);
-  const selectCell = tableState.data(
+  const cellValue = tableState.data(
     (state) =>
       ParseService.parseRowToCell(
         state.rows[row.index],
@@ -37,44 +37,28 @@ const SelectCell = (popperProps: CellComponentProps) => {
   const [showSelect, setShowSelect] = useState(false);
 
   const columnActions = tableState.columns((state) => state.actions);
-
+  const columnOptions = columnsInfo.getColumnOptions(column.id);
   function getColor() {
-    const match = tableColumn.options.find(
-      (option: { label: string }) => option.label === selectCell
+    const match = columnOptions.find(
+      (option: { label: string }) => option.label === cellValue
     );
     if (match) {
-      return match.backgroundColor;
+      return match.color;
     } else {
       // In case of new select, generate random color
       const color = randomColor();
-      columnActions.addOptionToColumn(tableColumn, selectCell, color);
+      columnActions.addOptionToColumn(tableColumn, cellValue, color);
       return color;
     }
   }
 
   const defaultValue = useMemo(
     () => ({
-      label: selectCell?.toString(),
-      value: selectCell?.toString(),
-      color: selectCell ? getColor() : grey(200),
+      label: cellValue?.toString(),
+      value: cellValue?.toString(),
+      color: cellValue ? getColor() : grey(200),
     }),
-    [selectCell]
-  );
-
-  const multiOptions = useMemo(
-    () =>
-      tableColumn.options
-        .filter(
-          (option: RowSelectOption) =>
-            option && option.label !== undefined && option.label !== null
-        )
-        .sort((a, b) => a.label.localeCompare(b.label))
-        .map((option: RowSelectOption) => ({
-          value: option.label,
-          label: option.label,
-          color: option.backgroundColor,
-        })),
-    [selectRow]
+    [cellValue]
   );
 
   const handleOnChange = async (
@@ -89,27 +73,23 @@ const SelectCell = (popperProps: CellComponentProps) => {
     );
 
     // Update on disk & memory
-    dataActions.updateCell(
+    await dataActions.updateCell(
       row.index,
       tableColumn,
       newCell,
       columnsInfo.getAllColumns(),
       configInfo.getLocalSettings(),
       true
     );
-    // Add new option to column options
 
-    if (
-      selectValue &&
-      !tableColumn.options.find((option) => option.label === selectValue)
-    ) {
+    // Add new option to column options
+    if (actionMeta.action === "create-option") {
       await columnActions.addOptionToColumn(
         tableColumn,
         selectValue,
         randomColor()
       );
     }
-    setShowSelect(false);
   };
 
   function SelectComponent() {
@@ -127,8 +107,8 @@ const SelectCell = (popperProps: CellComponentProps) => {
             IndicatorSeparator: () => null,
           }}
           styles={CustomTagsStyles}
-          options={multiOptions}
-          onBlur={() => setShowSelect(false)}
+          options={columnsInfo.getColumnOptions(column.id)}
+          onMenuClose={() => setShowSelect(false)}
           onChange={handleOnChange}
           isMulti={false}
           menuPortalTarget={activeDocument.body}
@@ -160,9 +140,9 @@ const SelectCell = (popperProps: CellComponentProps) => {
           onClick={() => setShowSelect(true)}
           style={{ width: column.getSize() }}
         >
-          {selectCell && (
-            <Relationship value={selectCell} backgroundColor={getColor()} />
-          )}
+          {cellValue ? (
+            <Relationship value={cellValue} backgroundColor={getColor()} />
+          ) : null}
         </div>
       )}
     </>

src/components/cellTypes/TagsCell.tsx

@@ -38,12 +38,13 @@ const TagsCell = (tagsProps: CellComponentProps) => {
   // Tags reference state
   const [showSelectTags, setShowSelectTags] = useState(false);
 
+  const columnOptions = columnsInfo.getColumnOptions(column.id);
   function getColor(tag: string) {
-    const match = tableColumn.options.find(
+    const match = columnOptions.find(
       (option: { label: string }) => option.label === tag
     );
     if (match) {
-      return match.backgroundColor;
+      return match.color;
     } else {
       // In case of new tag, generate random color
       const color = randomColor();
@@ -62,22 +63,6 @@ const TagsCell = (tagsProps: CellComponentProps) => {
     }));
   }, [tagsCell]);
 
-  const multiOptions = useMemo(
-    () =>
-      tableColumn.options
-        .filter(
-          (option: RowSelectOption) =>
-            option && option.label !== undefined && option.label !== null
-        )
-        .sort((a, b) => a.label.localeCompare(b.label))
-        .map((option: RowSelectOption) => ({
-          value: option.label,
-          label: option.label,
-          color: option.backgroundColor,
-        })),
-    [tagsCell]
-  );
-
   const handleOnChange = async (
     newValue: OnChangeValue<SelectValue, true>,
     actionMeta: ActionMeta<RowSelectOption>
@@ -125,7 +110,7 @@ const TagsCell = (tagsProps: CellComponentProps) => {
           openMenuOnFocus
           menuPosition="fixed"
           styles={CustomTagsStyles}
-          options={multiOptions}
+          options={columnOptions}
           onBlur={() => setShowSelectTags(false)}
           onChange={handleOnChange}
           menuPortalTarget={activeDocument.body}

src/stateManagement/columns/handlers/InfoColumnFunctions.ts

@@ -1,3 +1,4 @@
+import { ColumnOption, RowSelectOption } from "cdm/ComponentsModel";
 import { TableColumn } from "cdm/FolderModel";
 import { ColumnsState, TableActionResponse } from "cdm/TableStateInterface";
 import { AbstractTableAction } from "stateManagement/AbstractTableAction";
@@ -21,6 +22,24 @@ export default class InfoColumnFunctions extends AbstractTableAction<ColumnsStat
             return get().columns;
         }
 
+        implementation.info.getColumnOptions = (id: string): ColumnOption[] => {
+            const opColumn = get().columns.find((c) => c.id === id);
+            if (!opColumn) {
+                return [];
+            }
+            return opColumn.options
+                .filter(
+                    (option: RowSelectOption) =>
+                        option && option.label !== undefined && option.label !== null
+                )
+                .sort((a, b) => a.label.localeCompare(b.label))
+                .map((option: RowSelectOption) => ({
+                    value: option.label,
+                    label: option.label,
+                    color: option.backgroundColor,
+                }))
+        };
+
         response.implementation = implementation;
         return this.goNext(response);
     }

src/stateManagement/useColumnsStore.tsx

@@ -40,6 +40,7 @@ function emptyColumnsState(): Omit<ColumnsState, "columns" | "shadowColumns"> {
       getValueOfAllColumnsAsociatedWith: null,
       getVisibilityRecord: null,
       getAllColumns: null,
+      getColumnOptions: null,
     },
   };
 }