css and new metadata working

Author: RafaelGB

src/components/DefaultCell.tsx

@@ -11,9 +11,10 @@ import MarkdownCell from "components/cellTypes/MarkdownCell";
 import TagsPortal from "components/portals/TagsPortal";
 import NumberCell from "components/cellTypes/NumberCell";
 import TextCell from "components/cellTypes/TextCell";
+import MetadataTimeCell from "components/cellTypes/MetadataTimeCell";
+import InOutLinksCell from "components/cellTypes/InOutLinksCell";
 import { CellContext } from "@tanstack/react-table";
 import { Literal } from "obsidian-dataview";
-import MetadataTimeCell from "./cellTypes/MetadataTimeCell";
 
 export default function DefaultCell(
   defaultCell: CellContext<RowDataType, Literal>
@@ -63,6 +64,11 @@ export default function DefaultCell(
       case InputType.TASK:
         return <TaskCell defaultCell={defaultCell} />;
 
+      /** InOut links option */
+      case InputType.INLINKS:
+      case InputType.OUTLINKS:
+        return <InOutLinksCell defaultCell={defaultCell} />;
+
       /** Checkbox option */
       case InputType.CHECKBOX:
         return <CheckboxCell defaultCell={defaultCell} />;

src/components/DefaultHeader.tsx

@@ -104,6 +104,10 @@ export default function DefaultHeader(headerProps: DatabaseHeaderProps) {
     case InputType.TAGS:
       propertyIcon = <TagsIcon />;
       break;
+    case InputType.INLINKS:
+    case InputType.OUTLINKS:
+      propertyIcon = <TaskIcon />;
+      break;
     case InputType.TASK:
     case InputType.CHECKBOX:
       propertyIcon = <TaskIcon />;

src/components/cellTypes/InOutLinksCell.tsx

@@ -0,0 +1,27 @@
+import { CellComponentProps } from "cdm/ComponentsModel";
+import { renderMarkdown } from "components/obsidianArq/MarkdownRenderer";
+import { c } from "helpers/StylesHelper";
+import { Link } from "obsidian-dataview";
+import React, { useEffect, useRef } from "react";
+
+const InOutLinksCell = (mdProps: CellComponentProps) => {
+  const { defaultCell } = mdProps;
+  const { table, row, column } = defaultCell;
+  const { tableState } = table.options.meta;
+  const markdownRow = tableState.data((state) => state.rows[row.index]);
+  const mdRef = useRef<HTMLDivElement>();
+  useEffect(() => {
+    if (mdRef.current !== null) {
+      mdRef.current.innerHTML = "";
+      const links = markdownRow[column.id] as Link[];
+      const markdownLinks: string[] = [];
+      links.forEach((link) => {
+        markdownLinks.push(`- ${link.markdown()}`);
+      });
+      renderMarkdown(defaultCell, markdownLinks.join("\n"), mdRef.current, 5);
+    }
+  });
+  return <span ref={mdRef} className={c("md_cell text-align-left")}></span>;
+};
+
+export default InOutLinksCell;

src/components/cellTypes/TaskCell.tsx

@@ -35,7 +35,7 @@ const TaskCell = (taskProps: CellComponentProps) => {
   }, []);
   const taskRef = useRef<HTMLDivElement>();
 
-  return <div ref={taskRef} className={c("text-align-left")}></div>;
+  return <div ref={taskRef} className={c("md_cell text-align-left")}></div>;
 };
 
 export default TaskCell;

src/stateManagement/data/handlers/AddRowHandlerAction.ts

@@ -6,6 +6,7 @@ import { DatabaseView } from "DatabaseView";
 import { SourceDataTypes } from "helpers/Constants";
 import { resolve_tfolder } from "helpers/FileManagement";
 import { DateTime } from "luxon";
+import { Link } from "obsidian-dataview";
 import { VaultManagerDB } from "services/FileManagerService";
 import NoteInfo from "services/NoteInfo";
 import { AbstractTableAction } from "stateManagement/AbstractTableAction";
@@ -44,19 +45,17 @@ export default class AddRowlHandlerAction extends AbstractTableAction<DataState>
                 rowRecord,
                 ddbbConfig
             );
-
             const newNote = new NoteInfo({
                 ...rowRecord.frontmatter,
                 ...rowRecord.inline,
                 file: {
                     path: filepath,
                     ctime: DateTime.now(),
                     mtime: DateTime.now(),
-                    link: {
-                        path: filepath,
-                        fileName: () => filename,
-                    },
+                    link: Link.file(filepath),
                     tasks: [],
+                    inlinks: [],
+                    outlinks: [],
                 },
             });
 

src/stateManagement/data/handlers/SaveDataFromFileHandlerAction.ts

@@ -4,7 +4,7 @@ import { DataState, TableActionResponse } from "cdm/TableStateInterface";
 import { DatabaseView } from "DatabaseView";
 import { DEFAULT_SETTINGS, SourceDataTypes } from "helpers/Constants";
 import { Notice } from "obsidian";
-import { Literal } from "obsidian-dataview";
+import { Link, Literal } from "obsidian-dataview";
 import { DateTime } from "luxon";
 import NoteInfo from "services/NoteInfo";
 import { AbstractTableAction } from "stateManagement/AbstractTableAction";
@@ -86,11 +86,10 @@ export default class SaveDataFromFileHandlerAction extends AbstractTableAction<D
                         path: filepath,
                         ctime: DateTime.now(),
                         mtime: DateTime.now(),
-                        link: {
-                            path: filepath,
-                            fileName: () => filename,
-                        },
+                        link: Link.file(filepath),
                         tasks: [],
+                        inlinks: [],
+                        outlinks: [],
                     },
                 });
 

styles.css

@@ -188,6 +188,12 @@ div.database-plugin__checkbox {
   display: inline;
 }
 
+.database-plugin__md_cell ul {
+  margin-block-start: unset !important;
+  margin-block-end: unset !important;
+  display: inline-table;
+}
+
 .database-plugin__markdown-preview-view {
   padding: 0;
   height: fit-content;