Merge branch '443-fr-allow-renaming-labels-for-tags-and-select-field-…

…types'

docs/docs/changelog.md

@@ -1,3 +1,8 @@
+## 2.7.3
+### Improved
+- Use of Obsidian 1.0 color picker [ISSUE#497](https://github.com/RafaelGB/obsidian-db-folder/issues/497)
+### No longer broken
+- Hotfix with rename ids breaking the rendering of the plugin [ISSUE#505](https://github.com/RafaelGB/obsidian-db-folder/issues/505)
 ## 2.7.2
 ### Shiny new things
 - Edit nested metadata arrives! You can now edit nested metadata in the cell editor [ISSUE#442](https://github.com/RafaelGB/obsidian-db-folder/issues/442)

manifest-beta.json

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

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "dbfolder",
 	"name": "DB Folder",
-	"version": "2.7.2",
+	"version": "2.7.3",
 	"minAppVersion": "0.16.3",
 	"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": "2.7.2",
+	"version": "2.7.3",
 	"description": "This is a sample plugin for Obsidian (https://obsidian.md)",
 	"main": "main.js",
 	"scripts": {
@@ -28,7 +28,7 @@
 		"@testing-library/react": "13.4.0",
 		"@types/jest": "29.1.2",
 		"@types/luxon": "3.0.1",
-		"@types/node": "18.8.4",
+		"@types/node": "18.11.0",
 		"@types/react": "18.0.21",
 		"@types/react-csv": "1.1.3",
 		"@types/react-datepicker": "4.4.2",
@@ -37,7 +37,7 @@
 		"@typescript-eslint/eslint-plugin": "5.40.0",
 		"@typescript-eslint/parser": "5.40.0",
 		"eslint": "8.25.0",
-		"jest": "29.1.2",
+		"jest": "29.2.0",
 		"jest-mock-extended": "3.0.1",
 		"obsidian": "0.16.3",
 		"rollup": "2.79.1",

src/cdm/TableStateInterface.ts

@@ -59,7 +59,7 @@ export interface ColumnsState {
         addToRight: (column: TableColumn, customName?: string) => void;
         remove: (column: TableColumn) => void;
         alterSorting: (column: TableColumn) => void;
-        addOptionToColumn: (column: TableColumn, option: string, backgroundColor: string) => void;
+        addOptionToColumn: (column: TableColumn, option: string, backgroundColor: string) => Promise<void>;
         alterColumnType: (column: TableColumn, input: string, parsedRows?: RowDataType[]) => Promise<void>;
         alterColumnId: (column: TableColumn, root: string, nestedIds: string[]) => Promise<void>;
         alterColumnLabel: (column: TableColumn, label: string) => Promise<void>;

src/components/DefaultHeader.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { randomColor } from "helpers/Colors";
 import TextIcon from "components/img/Text";
 import MultiIcon from "components/img/Multi";
 import HashIcon from "components/img/Hash";
@@ -21,33 +20,8 @@ import { LOGGER } from "services/Logger";
 import { DatabaseHeaderProps, TableColumn } from "cdm/FolderModel";
 import ReactDOM from "react-dom";
 import { c } from "helpers/StylesHelper";
-import { RowSelectOption } from "cdm/ComponentsModel";
 import { AddColumnModalProps } from "cdm/ModalsModel";
 
-/**
- * Generate column Options with Select type
- * @param options
- * @param rows
- * @param columnId
- * @returns
- */
-function setOptionsOfSelectDataType(
-  options: RowSelectOption[],
-  rows: any,
-  columnId: string
-): any[] {
-  rows.forEach((row: any) => {
-    const rowValue = row.original[columnId];
-    let match = options.find(
-      (option: { label: string }) => option.label === rowValue
-    );
-    if (!match && rowValue !== undefined && rowValue !== "") {
-      options.push({ label: rowValue, backgroundColor: randomColor() });
-    }
-  });
-  return options;
-}
-
 /**
  * Default headers of the table
  * @param headerProps
@@ -85,7 +59,6 @@ export default function DefaultHeader(headerProps: DatabaseHeaderProps) {
       propertyIcon = <TextIcon />;
       break;
     case InputType.SELECT:
-      setOptionsOfSelectDataType(options, table.getRowModel().rows, id);
       propertyIcon = <MultiIcon />;
       break;
     case InputType.CALENDAR:

src/components/cellTypes/SelectCell.tsx

@@ -38,21 +38,31 @@ const SelectCell = (popperProps: CellComponentProps) => {
     const match = tableColumn.options.find(
       (option: { label: string }) => option.label === selectCell
     );
-    return (match && match.backgroundColor) || grey(200);
+    if (match) {
+      return match.backgroundColor;
+    } else {
+      // In case of new select, generate random color
+      const color = randomColor();
+      columnActions.addOptionToColumn(tableColumn, selectCell, color);
+      return color;
+    }
   }
 
-  const defaultValue = {
-    label: selectCell?.toString(),
-    value: selectCell?.toString(),
-    color: getColor(),
-  };
+  const defaultValue = useMemo(
+    () => ({
+      label: selectCell?.toString(),
+      value: selectCell?.toString(),
+      color: selectCell ? getColor() : grey(200),
+    }),
+    [selectCell]
+  );
 
   const multiOptions = useMemo(
     () =>
       tableColumn.options
         .filter(
           (option: RowSelectOption) =>
-            option.label !== undefined && option.label !== null
+            option && option.label !== undefined && option.label !== null
         )
         .sort((a, b) => a.label.localeCompare(b.label))
         .map((option: RowSelectOption) => ({

src/components/cellTypes/TagsCell.tsx

@@ -43,17 +43,7 @@ const TagsCell = (tagsProps: CellComponentProps) => {
     } else {
       // In case of new tag, generate random color
       const color = randomColor();
-      const newOption: RowSelectOption = {
-        label: tag,
-        backgroundColor: color,
-      };
-      const currentColumn = columnsInfo
-        .getAllColumns()
-        .find((col: TableColumn) => col.key === tableColumn.key);
-      currentColumn.options.push(newOption);
-      table.options.meta.view.diskConfig.updateColumnProperties(column.id, {
-        options: currentColumn.options,
-      });
+      columnActions.addOptionToColumn(tableColumn, tag, color);
       return color;
     }
   }
@@ -73,7 +63,7 @@ const TagsCell = (tagsProps: CellComponentProps) => {
       tableColumn.options
         .filter(
           (option: RowSelectOption) =>
-            option.label !== undefined && option.label !== null
+            option && option.label !== undefined && option.label !== null
         )
         .sort((a, b) => a.label.localeCompare(b.label))
         .map((option: RowSelectOption) => ({

src/components/modals/columnSettings/handlers/ColumnIdInputHandler.ts

@@ -25,9 +25,9 @@ export class ColumnIdInputHandler extends AbstractHandlerClass<ColumnSettingsHan
                     .onClick(async (): Promise<void> => {
                         const arrayKey = value.split('.');
                         const rootKey = arrayKey.shift();
-
-                        if (!this.validateNewId(rootKey, arrayKey, columnsState.info.getAllColumns())) {
-                            new Notice(`Error saving id. There is a conflict with another column id or the id is empty`, 3000);
+                        const validateMessage = this.validateNewId(rootKey, arrayKey, columnsState.info.getAllColumns());
+                        if (validateMessage) {
+                            new Notice(`Error saving id. ${validateMessage}`, 3000);
                             return;
                         }
                         // Update state of altered column
@@ -61,14 +61,23 @@ export class ColumnIdInputHandler extends AbstractHandlerClass<ColumnSettingsHan
 
         return this.goNext(response);
     }
-    private validateNewId(rootKey: string, arrayKey: string[], columns: TableColumn[]): boolean {
+    private validateNewId(rootKey: string, arrayKey: string[], columns: TableColumn[]): string {
         const candidateId = `${rootKey}${arrayKey.length > 0 ? `-${arrayKey.join('-')}` : ''}`;
+        // Check if new root key is not empty
         if (!rootKey) {
-            return false;
+            return "The root key is required";
+        }
+        // Validate special characters in root key
+        if (rootKey.match(/[^a-zA-Z0-9_]/)) {
+            return "The root key can only contain letters, numbers and underscores";
         }
+        // Validate if new root key is not duplicated
         const conflictId = columns.some((column: TableColumn) =>
             column.id === candidateId
         );
-        return !conflictId;
+        if (conflictId) {
+            return "The id already exists";
+        }
+        return '';
     }
 }

src/components/modals/columnSettings/handlers/SelectedColumnOptionsHandler.tsx

@@ -2,8 +2,6 @@ import { ColumnSettingsHandlerResponse } from "cdm/ModalsModel";
 import { randomColor, castStringtoHsl, castHslToString } from "helpers/Colors";
 import { ButtonComponent, Notice, Setting } from "obsidian";
 import { AbstractHandlerClass } from "patterns/AbstractHandler";
-import React from "react";
-import { createRoot } from "react-dom/client";
 import { LOGGER } from "services/Logger";
 
 export class SelectedColumnOptionsHandler extends AbstractHandlerClass<ColumnSettingsHandlerResponse> {
@@ -71,10 +69,7 @@ export class SelectedColumnOptionsHandler extends AbstractHandlerClass<ColumnSet
           colorPicker
             .setValueHsl(castStringtoHsl(option.backgroundColor))
             .onChange(async () => {
-              const optionIndex = options.findIndex(
-                (option) => option.label === option.label
-              );
-              options[optionIndex].backgroundColor = castHslToString(
+              options[index].backgroundColor = castHslToString(
                 colorPicker.getValueHsl()
               );
               await view.diskConfig.updateColumnProperties(column.id, {

src/services/DatabaseInfo.ts

@@ -79,18 +79,22 @@ export default class DatabaseInfo {
         Object
             .entries(this.yaml.columns)
             .forEach(([key, value]) => {
+                // Check if column key is the same as the one we are updating 
                 if (value.key === currentCol.key) {
+                    // Check if we are updating the key
                     if (currentCol.key !== newColumnKey) {
                         delete this.yaml.columns[key];
                         value.key = newColumnKey;
                         value.accessorKey = newColumnKey;
+                        // If the nested key is the same as the column key, we use the new column key
                         if (value.nestedKey === currentCol.nestedKey) {
                             value.nestedKey = newNestedKey.join('.');
-                            this.yaml.columns[`${newColumnKey}${newNestedKey ? `-${newNestedKey}` : ''}`] = value;
+                            this.yaml.columns[`${newColumnKey}${newNestedKey.length > 0 ? `-${newNestedKey}` : ''}`] = value;
                         } else {
                             this.yaml.columns[`${newColumnKey}${value.nestedKey ? `-${value.nestedKey}` : ''}`] = value;
                         }
                     }
+                    // Check if we are updating the nested key without changing the column key
                     else if (value.nestedKey === currentCol.nestedKey) {
                         delete this.yaml.columns[key];
                         value.nestedKey = newNestedKey.join('.');

src/stateManagement/columns/handlers/AlterOptionToColumnAction.ts

@@ -1,31 +1,29 @@
-import { RowSelectOption } from "cdm/ComponentsModel";
 import { TableColumn } from "cdm/FolderModel";
 import { ColumnsState, TableActionResponse } from "cdm/TableStateInterface";
 import { AbstractTableAction } from "stateManagement/AbstractTableAction";
 
 export default class AlterOptionToColumnHandlerAction extends AbstractTableAction<ColumnsState> {
     handle(tableActionResponse: TableActionResponse<ColumnsState>): TableActionResponse<ColumnsState> {
         const { view, set, implementation } = tableActionResponse;
-        implementation.actions.addOptionToColumn = (
+        implementation.actions.addOptionToColumn = async (
             column: TableColumn,
             option: string,
             backgroundColor: string
-        ) =>
+        ) => {
+            // Save on disk
+            const newOptions = [...column.options, { label: option, backgroundColor: backgroundColor }];
+            await view.diskConfig.updateColumnProperties(column.id, {
+                options: newOptions,
+            });
+            // Save on memory
             set((updater) => {
                 const optionIndex = updater.columns.findIndex(
                     (col: TableColumn) => col.id === column.id
                 );
-                const newOption: RowSelectOption = {
-                    label: option,
-                    backgroundColor: backgroundColor,
-                };
-
-                updater.columns[optionIndex].options.push(newOption);
-                view.diskConfig.updateColumnProperties(column.id, {
-                    options: updater.columns[optionIndex].options,
-                });
+                updater.columns[optionIndex].options = newOptions;
                 return { columns: updater.columns };
             });
+        }
 
         tableActionResponse.implementation = implementation;
         return this.goNext(tableActionResponse);