new relation design

Author: RafaelGB

src/cdm/FolderModel.ts

@@ -55,6 +55,7 @@ export interface ConfigColumn {
     // Relations
     related_note_path?: string;
     bidirectional_relation?: boolean;
+    relation_color?: string;
     // Rollups
     asociated_relation_id?: string;
     rollup_action?: string;

src/components/cellTypes/RelationCell.tsx

@@ -1,19 +1,20 @@
 import { CellComponentProps } from "cdm/ComponentsModel";
 import { TableColumn } from "cdm/FolderModel";
-import { InputType } from "helpers/Constants";
+import { InputType, StyleVariables } from "helpers/Constants";
 import { c, getAlignmentClassname } from "helpers/StylesHelper";
 import { Notice } from "obsidian";
 import { Link } from "obsidian-dataview";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { DataviewService } from "services/DataviewService";
 import { ParseService } from "services/ParseService";
 import RelationEditor from "components/cellTypes/Editor/RelationEditor";
-import { MarkdownService } from "services/MarkdownRenderService";
+import Relationship from "components/RelationShip";
+import { grey } from "helpers/Colors";
 
 const RelationCell = (mdProps: CellComponentProps) => {
   const { defaultCell } = mdProps;
   const { table, row, column } = defaultCell;
-  const { tableState } = table.options.meta;
+  const { tableState, view } = table.options.meta;
   const tableColumn = column.columnDef as TableColumn;
   const relationRow = tableState.data((state) => state.rows[row.index]);
   const dataActions = tableState.data((state) => state.actions);
@@ -29,34 +30,8 @@ const RelationCell = (mdProps: CellComponentProps) => {
       ) as Link[]
   );
 
-  const containerCellRef = useRef<HTMLDivElement>();
   const [dirtyCell, setDirtyCell] = useState(false);
 
-  /**
-   * Render markdown content of Obsidian on load
-   */
-  useEffect(() => {
-    if (relationCell.length === 0 || dirtyCell) {
-      // End useEffect
-      return;
-    }
-
-    if (containerCellRef.current !== undefined) {
-      containerCellRef.current.innerHTML = "";
-      const mdRelations = relationCell
-        .map((relation) => {
-          return relation.markdown();
-        })
-        .join(",");
-      MarkdownService.renderMarkdown(
-        defaultCell,
-        `[ ${mdRelations} ]`,
-        containerCellRef.current,
-        5
-      );
-    }
-  }, [row, column, dirtyCell]);
-
   const persistChange = (newPaths: string[]) => {
     const oldPaths = relationCell
       ? relationCell.map((relation) => relation.path)
@@ -115,9 +90,14 @@ const RelationCell = (mdProps: CellComponentProps) => {
       relationCell={relationCell}
     />
   ) : (
-    <span
-      ref={containerCellRef}
+    <div
       onDoubleClick={handleOnClick}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          handleOnClick();
+        }
+      }}
       style={{ width: column.getSize() }}
       className={c(
         getAlignmentClassname(
@@ -126,14 +106,19 @@ const RelationCell = (mdProps: CellComponentProps) => {
           ["tabIndex"]
         )
       )}
-      onKeyDown={(e) => {
-        if (e.key === "Enter") {
-          e.preventDefault();
-          handleOnClick();
-        }
-      }}
       tabIndex={0}
-    />
+    >
+      {relationCell
+        ? relationCell.map((link: Link, index) => (
+            <Relationship
+              key={`relation-${index}-${tableColumn.key}-${link.path}`}
+              value={link.markdown()}
+              backgroundColor={tableColumn.config.relation_color || grey(300)}
+              view={view}
+            />
+          ))
+        : null}
+    </div>
   );
 };
 

src/components/modals/columnSettings/ColumnSections.ts

@@ -17,13 +17,13 @@ import { RollupActionHandler } from "./handlers/rollups/RollupActionHandler";
 import { RollupKeyHandler } from "./handlers/rollups/RollupKeyHandler";
 import { RollupPersistToggleHandler } from "./handlers/rollups/RollupPersistToggleHandler";
 import { RollupFormulaHandler } from "./handlers/rollups/RollupFormulaHandler";
-import { BidirectionalRelationToggleHandler } from "./handlers/automations/BidirectionalRelationToggleHandler";
+import { BidirectionalRelationToggleHandler } from "./handlers/relations/BidirectionalRelationToggleHandler";
+import { RelationColorSelectorHandler } from "./handlers/relations/RelationColorSelectorHandler";
 import { InputType } from "helpers/Constants";
 import { AbstractChain } from "patterns/chain/AbstractFactoryChain";
 import { AbstractHandler } from "patterns/chain/AbstractHandler";
 import { t } from "lang/helpers";
 
-
 class StyleSetttingsSection extends AbstractChain<ColumnSettingsHandlerResponse> {
     private input: string = InputType.TEXT;
     protected runBefore(columnHandlerResponse: ColumnSettingsHandlerResponse): ColumnSettingsHandlerResponse {
@@ -145,6 +145,7 @@ class ParticularSetttingsSection extends AbstractChain<ColumnSettingsHandlerResp
             case InputType.RELATION:
                 particularHandlers.push(new DatabaseSelectorHandler());
                 particularHandlers.push(new BidirectionalRelationToggleHandler());
+                particularHandlers.push(new RelationColorSelectorHandler());
                 break;
             case InputType.ROLLUP:
                 particularHandlers.push(new RollupAsociatedRelationHandler());

…ns/BidirectionalRelationToggleHandler.ts …ns/BidirectionalRelationToggleHandler.tssrc/components/modals/columnSettings/handlers/automations/BidirectionalRelationToggleHandler.ts renamed to src/components/modals/columnSettings/handlers/relations/BidirectionalRelationToggleHandler.ts src/components/modals/columnSettings/handlers/automations/BidirectionalRelationToggleHandler.ts renamed to src/components/modals/columnSettings/handlers/relations/BidirectionalRelationToggleHandler.ts

@@ -0,0 +1,31 @@
+import { ColumnSettingsHandlerResponse } from "cdm/ModalsModel";
+import { AbstractHandlerClass } from "patterns/chain/AbstractHandler";
+import { Setting } from "obsidian";
+import { t } from "lang/helpers";
+import { castHslToString, castStringtoHsl } from "helpers/Colors";
+
+export class RelationColorSelectorHandler extends AbstractHandlerClass<ColumnSettingsHandlerResponse>  {
+    settingTitle: string = t("column_settings_modal_relation_color_title");
+    handle(columnHandlerResponse: ColumnSettingsHandlerResponse): ColumnSettingsHandlerResponse {
+        const { column, containerEl, columnSettingsManager } = columnHandlerResponse;
+        const { view } = columnSettingsManager.modal;
+
+        new Setting(containerEl)
+            .setName(this.settingTitle)
+            .setDesc(t("column_settings_modal_relation_color_desc"))
+            .addColorPicker((colorPicker) => {
+                colorPicker
+                    .setValueHsl(castStringtoHsl(column.config.relation_color))
+                    .onChange(async () => {
+                        const newColor = castHslToString(
+                            colorPicker.getValueHsl()
+                        );
+                        await view.diskConfig.updateColumnConfig(column.id, {
+                            relation_color: newColor,
+                        });
+                        columnSettingsManager.modal.enableReset = true;
+                    });
+            })
+        return this.goNext(columnHandlerResponse);
+    }
+}

src/components/modals/columnSettings/handlers/relations/RelationColorSelectorHandler.ts

@@ -215,6 +215,8 @@ export default {
   "column_settings_modal_selected_column_options_notice_update_error": "Error editing {0}",
   "column_settings_modal_selected_column_options_notice_delete_success": "Label {0} was deleted successfully for all the notes!",
   "column_settings_modal_selected_column_options_notice_delete_error": "Error deleting {0}",
+  "column_settings_modal_relation_color_title": "Relation color",
+  "column_settings_modal_relation_color_desc": "Select the color of the relation",
   /** TEXT MODAL */
   "text_modal_default_placeholder": "Insert text...",
   /******************************************