now options are persisted

Author: RafaelGB

src/cdm/RowSelectModel.ts

@@ -1,6 +1,6 @@
 import { ActionType } from "react-table";
 import NoteInfo from "services/NoteInfo";
-import { TableDataType } from "cdm/FolderModel";
+import { TableColumn, TableDataType } from "cdm/FolderModel";
 
 export type RowSelectOption = {
     backgroundColor: string,
@@ -9,7 +9,7 @@ export type RowSelectOption = {
 export type PopperProps = {
     dispatch: (action: ActionType) => void;
     row: any;
-    column: any;
+    column: TableColumn;
     columns: any;
     note: NoteInfo;
     state: TableDataType;

src/components/Cell.tsx

@@ -170,7 +170,7 @@ export default function DefaultCell(cellProperties: Cell) {
             <PopperSelectPortal
               dispatch={dataDispatch}
               row={cellProperties.row}
-              column={cellProperties.column}
+              column={cellProperties.column as unknown as TableColumn}
               columns={columns}
               note={note}
               state={(cellProperties as any).initialState}

src/components/Columns.tsx

@@ -75,7 +75,6 @@ function columnOptions(
 ): TableColumn {
   LOGGER.debug(`=> columnOptions. column: ${JSON.stringify(column)}`);
   const options: RowSelectOption[] = column.options ?? [];
-
   if (Object.values(DataTypes).includes(column.input)) {
     LOGGER.debug(`<= columnOptions`, `return ${column.input} column`);
     return {

src/components/Header.tsx

@@ -19,9 +19,17 @@ import { DatabaseHeaderProps } from "cdm/FolderModel";
 import ReactDOM from "react-dom";
 import { c } from "helpers/StylesHelper";
 import { HeaderContext } from "components/contexts/HeaderContext";
+import { RowSelectOption } from "cdm/RowSelectModel";
 
+/**
+ * Generate column Options with Select type
+ * @param options
+ * @param rows
+ * @param columnId
+ * @returns
+ */
 function setOptionsOfSelectDataType(
-  options: any[],
+  options: RowSelectOption[],
   rows: any,
   columnId: string
 ): any[] {

src/components/portals/PopperSelectPortal.tsx

@@ -39,7 +39,7 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
     dispatch({
       type: ActionTypes.UPDATE_OPTION_CELL,
       file: note.getFile(),
-      key: (column as any).key,
+      key: column.key,
       value: option.label,
       row: row,
       columnId: column.id,
@@ -53,7 +53,7 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
         type: ActionTypes.ADD_OPTION_TO_COLUMN,
         option: e.target.value,
         backgroundColor: randomColor(),
-        columnId: (column as any).id,
+        columnId: column.id,
       });
     }
     setShowAdd(false);
@@ -70,7 +70,7 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
           columns: columns,
           option: e.target.value,
           backgroundColor: randomColor(),
-          columnId: (column as any).id,
+          columnId: column.id,
           type: ActionTypes.ADD_OPTION_TO_COLUMN,
         });
       }
@@ -79,8 +79,8 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
   }
 
   function getColor() {
-    const match = (column as any).options.find(
-      (option: { label: any }) => option.label === contextValue.value
+    const match = column.options.find(
+      (option: { label: string }) => option.label === contextValue.value
     );
     return (match && match.backgroundColor) || grey(200);
   }

src/parsers/handlers/unmarshall/UnmarshallColumnsHandler.ts

@@ -1,7 +1,6 @@
 import { DatabaseColumn } from "cdm/DatabaseModel";
 import { DiskHandlerResponse } from "cdm/MashallModel";
 import { DataTypes, YAML_INDENT } from "helpers/Constants";
-import { Literal } from "obsidian-dataview/lib/data-model/value";
 import { AbstractDiskHandler } from "parsers/handlers/unmarshall/AbstractDiskPropertyHandler";
 
 export class UnmarshallColumnsHandler extends AbstractDiskHandler {
@@ -46,8 +45,8 @@ function unmarshallParticularInputInfo(column: DatabaseColumn): string[] {
             if (column.options && Array.isArray(column.options)) {
                 particularInputString.push(`${YAML_INDENT.repeat(2)}options:`);
                 column.options.forEach(option => {
-                    particularInputString.push(`${YAML_INDENT.repeat(3)}- {label: ${option.label}, backgroundColor: ${option
-                        .backgroundColor.toString()}}`);
+                    particularInputString.push(`${YAML_INDENT.repeat(3)}- { label: "${option.label}", backgroundColor: "${option
+                        .backgroundColor}"}`);
                 });
             }
     }