new metadata tags column option

Author: RafaelGB

src/cdm/DatabaseModel.ts

@@ -46,7 +46,7 @@ export type TableOptionsResponse = {
 }
 
 export type NoteInfoPage = Omit<SMarkdownPage, "file"> & {
-    file: Pick<SMarkdownPage["file"], "link" | "path" | "ctime" | "mtime" | "tasks" | "outlinks" | "inlinks" | "folder">
+    file: Pick<SMarkdownPage["file"], "link" | "path" | "ctime" | "mtime" | "tasks" | "outlinks" | "inlinks" | "folder" | "tags">;
 };
 
 export type LocaleDict = keyof typeof en;

src/cdm/SettingsModel.ts

@@ -49,6 +49,7 @@ export interface LocalSettings {
     show_metadata_tasks: boolean;
     show_metadata_inlinks: boolean;
     show_metadata_outlinks: boolean;
+    show_metadata_tags: boolean;
     source_form_result: string;
     source_destination_path: string;
     source_data: string;

src/components/Columns.tsx

@@ -84,6 +84,16 @@ export async function obtainMetadataColumns(
     delete yamlColumns[MetadataColumns.OUTLINKS];
   }
 
+  if (localSetting.show_metadata_tags) {
+    // If TAGS is not already in the table, add it
+    yamlColumns[MetadataColumns.TAGS] = {
+      ...MetadataDatabaseColumns.TAGS,
+      ...(yamlColumns[MetadataColumns.TAGS] ?? {}),
+    };
+  } else {
+    delete yamlColumns[MetadataColumns.TAGS];
+  }
+
   yamlColumns[MetadataColumns.ADD_COLUMN] = {
     ...MetadataDatabaseColumns.ADD_COLUMN,
     position: DatabaseLimits.MAX_COLUMNS + 1,

src/components/DefaultCell.tsx

@@ -18,6 +18,7 @@ import RelationCell from "components/cellTypes/RelationCell";
 import RollupCell from "components/cellTypes/RollupCell";
 import { CellContext } from "@tanstack/react-table";
 import { Literal } from "obsidian-dataview";
+import MetadataTagsCell from "./cellTypes/MetadataTagsCell";
 
 export default function DefaultCell(
   defaultCell: CellContext<RowDataType, Literal>
@@ -70,6 +71,10 @@ export default function DefaultCell(
       case InputType.OUTLINKS:
         return <InOutLinksCell defaultCell={defaultCell} />;
 
+      /** Metadata file tags */
+      case InputType.METADATA_TAGS:
+        return <MetadataTagsCell defaultCell={defaultCell} />;
+
       /** Checkbox option */
       case InputType.CHECKBOX:
         return <CheckboxCell defaultCell={defaultCell} />;

src/components/DefaultHeader.tsx

@@ -16,6 +16,7 @@ import IncomingLinkIcon from "components/img/IncomingLinkIcon";
 import CodeIcon from "components/img/CodeIcon";
 import RelationBidirectionalIcon from "components/img/RelationBidirectionalIcon";
 import RollupIcon from "components/img/RollupIcon";
+import MetadataTagsIcon from "components/img/MetadataTags";
 import { AddColumnModal } from "components/modals/newColumn/addColumnModal";
 import {
   BaseFilter,
@@ -98,6 +99,10 @@ export default function DefaultHeader(headerProps: DatabaseHeaderProps) {
       propertyIcon = <TaskIcon />;
       columnSearch = <BaseFilter {...headerProps} />;
       break;
+    case InputType.METADATA_TAGS:
+      propertyIcon = <MetadataTagsIcon />;
+      columnSearch = <BaseFilter {...headerProps} />;
+      break;
     case InputType.CHECKBOX:
       propertyIcon = <TaskIcon />;
       columnSearch = <BooleanFilter {...headerProps} />;

src/components/cellTypes/MetadataTagsCell.tsx

@@ -0,0 +1,32 @@
+import { CellComponentProps } from "cdm/ComponentsModel";
+import { c } from "helpers/StylesHelper";
+import React, { useEffect, useRef } from "react";
+import { MarkdownService } from "services/MarkdownRenderService";
+
+const MetadataTagsCell = (mdProps: CellComponentProps) => {
+  const { defaultCell } = mdProps;
+  const { table, row, column } = defaultCell;
+  const { tableState } = table.options.meta;
+  const metaTagsRow = tableState.data((state) => state.rows[row.index]);
+  const mdRef = useRef<HTMLDivElement>();
+  useEffect(() => {
+    if (mdRef.current === null) return;
+
+    const metaTags = metaTagsRow[column.id] as string[];
+    MarkdownService.renderMarkdown(
+      defaultCell,
+      metaTags.join(" "),
+      mdRef.current,
+      5
+    );
+  });
+  return (
+    <span
+      ref={mdRef}
+      className={c("md_cell text-align-left tabIndex")}
+      tabIndex={0}
+    />
+  );
+};
+
+export default MetadataTagsCell;

src/components/img/MetadataTags.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+export default function MetadataTagsIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      stroke-width="2"
+      stroke="currentColor"
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M13 7a2 2 0 0 1 2 2v12l-5 -3l-5 3v-12a2 2 0 0 1 2 -2h6z"></path>
+      <path d="M9.265 4a2 2 0 0 1 1.735 -1h6a2 2 0 0 1 2 2v12l-1 -.6"></path>
+    </svg>
+  );
+}

src/components/modals/columnSettings/ColumnSections.ts

@@ -94,7 +94,7 @@ class BehaviorSetttingsSection extends AbstractChain<ColumnSettingsHandlerRespon
             case InputType.METATADA_TIME:
             case InputType.INLINKS:
             case InputType.OUTLINKS:
-
+            case InputType.METADATA_TAGS:
                 // do nothing
                 break;
             default:

src/components/modals/newColumn/handlers/MetadataToggleGroupHandler.ts

@@ -116,6 +116,23 @@ export class MetadataToggleGroupHandler extends AbstractHandlerClass<AddColumnMo
                     .onChange(metadata_outlinks_toggle_promise)
             );
 
+        /************************
+        * METADATA TAGS COLUMN
+        ************************/
+        const metadata_tags_toggle_promise = async (value: boolean): Promise<void> => {
+            // Persist value
+            view.diskConfig.updateConfig({ show_metadata_tags: value });
+            addColumnModalManager.addColumnModal.enableReset = true;
+        }
+
+        new Setting(metadata_section)
+            .setName(t("settings_metatata_tags_toggle_title"))
+            .setDesc(t("settings_metatata_tags_toggle_desc"))
+            .addToggle(toggle =>
+                toggle.setValue(view.diskConfig.yaml.config.show_metadata_tags)
+                    .onChange(metadata_tags_toggle_promise)
+            );
+
         return this.goNext(response);
     }
 }

src/helpers/Constants.ts

@@ -30,6 +30,7 @@ export const StaticInputType = Object.freeze({
   TASK: 'task',
   INLINKS: 'inlinks',
   OUTLINKS: 'outlinks',
+  METADATA_TAGS: 'metadata_tags',
   NEW_COLUMN: 'new_column',
 });
 
@@ -51,7 +52,8 @@ export const MetadataColumns = Object.freeze({
   TASKS: `__tasks__`,
   OUTLINKS: `__outlinks__`,
   INLINKS: `__inlinks__`,
-  ROW_CONTEXT_MENU: "__rowContextMenu__"
+  ROW_CONTEXT_MENU: "__rowContextMenu__",
+  TAGS: `__tags__`,
 });
 
 export const MetadataLabels = Object.freeze({
@@ -62,6 +64,7 @@ export const MetadataLabels = Object.freeze({
   TASK: 'Task',
   OUTLINKS: 'Outlinks',
   INLINKS: 'Inlinks',
+  TAGS: 'File Tags',
 });
 
 export const PaginationRenderOptions = Object.freeze({
@@ -214,6 +217,18 @@ export const MetadataDatabaseColumns: MetadataColumnsModel = Object.freeze({
     config: DEFAULT_COLUMN_CONFIG
 
   },
+  TAGS: {
+    key: MetadataColumns.TAGS,
+    id: MetadataColumns.TAGS,
+    input: InputType.METADATA_TAGS,
+    label: MetadataLabels.TAGS,
+    accessorKey: MetadataColumns.TAGS,
+    isMetadata: true,
+    isDragDisabled: false,
+    skipPersist: false,
+    csvCandidate: false,
+    config: DEFAULT_COLUMN_CONFIG
+  },
   ROW_CONTEXT_MENU: {
     id: MetadataColumns.ROW_CONTEXT_MENU,
     key: MetadataColumns.ROW_CONTEXT_MENU,
@@ -413,6 +428,7 @@ export const DEFAULT_SETTINGS: DatabaseSettings = {
     show_metadata_tasks: false,
     show_metadata_inlinks: false,
     show_metadata_outlinks: false,
+    show_metadata_tags: false,
     source_data: SourceDataTypes.CURRENT_FOLDER,
     source_form_result: '',
     source_destination_path: '/',