first steps with preview table

Author: RafaelGB

src/services/MarkdownPostProcessorService.ts

@@ -3,7 +3,10 @@ import DBFolderPlugin from "main";
 import { MarkdownPostProcessorContext } from "obsidian";
 import DatabaseInfo from "services/DatabaseInfo";
 import { VaultManagerDB } from "services/FileManagerService";
-
+import { DataviewService } from "services/DataviewService";
+import { obtainColumnsFromFolder, obtainMetadataColumns } from "components/Columns";
+import { adapterTFilesToRows } from "helpers/VaultManagement";
+import { DatabaseColumn } from "cdm/DatabaseModel";
 /**
  * Keep info about a note and offer methods to manipulate it
  */
@@ -70,18 +73,9 @@ export class PreviewDatabaseModeService {
             return;
         }
         el.empty();
-
-        const dbFile = VaultManagerDB.obtainTfileFromFilePath(ctx.sourcePath);
-        const databaseDisk = new DatabaseInfo(dbFile);
-        await databaseDisk.initDatabaseconfigYaml(
-            this.plugin.settings.local_settings
-        );
-        const div = createDiv();
-        div.textContent = `${databaseDisk
-            .yaml.description}`;
-        el.appendChild(div);
+        const previewContainer = await this.renderPreview(el, ctx);
         setTimeout(async () => {
-            let internalEmbedDiv: HTMLElement = div;
+            let internalEmbedDiv: HTMLElement = el;
             while (
                 !internalEmbedDiv.hasClass("internal-embed") &&
                 internalEmbedDiv.parentElement
@@ -91,12 +85,13 @@ export class PreviewDatabaseModeService {
 
             if (!internalEmbedDiv.hasClass("internal-embed")) {
                 el.empty();
-                el.appendChild(div);
+                el.appendChild(previewContainer);
                 return;
             }
 
             internalEmbedDiv.empty();
-
+            const previewTimeoutContainer = await this.renderPreview(internalEmbedDiv, ctx);
+            console.log("internalEmbedDiv");
             //timer to avoid the image flickering when the user is typing
             let timer: NodeJS.Timeout = null;
             const observer = new MutationObserver((m) => {
@@ -108,15 +103,58 @@ export class PreviewDatabaseModeService {
                 }
                 timer = setTimeout(() => {
                     timer = null;
-                    internalEmbedDiv.empty();
+                    previewTimeoutContainer.empty();
                 }, 500);
             });
-            observer.observe(internalEmbedDiv, {
+            observer.observe(previewTimeoutContainer, {
                 attributes: true, //configure it to listen to attribute changes
             });
         }, 300);
     };
 
+    private renderPreview = async (
+        el: HTMLElement,
+        ctx: MarkdownPostProcessorContext,
+    ): Promise<HTMLElement> => {
+        const dbFile = VaultManagerDB.obtainTfileFromFilePath(ctx.sourcePath);
+        const databaseDisk = new DatabaseInfo(dbFile);
+        await databaseDisk.initDatabaseconfigYaml(
+            this.plugin.settings.local_settings
+        );
+
+        const div = createDiv();
+        div.textContent = `${databaseDisk
+            .yaml.description}`;
+        el.appendChild(div);
+        let yamlColumns: Record<string, DatabaseColumn> =
+            databaseDisk.yaml.columns;
+        // Complete the columns with the metadata columns
+        yamlColumns = await obtainMetadataColumns(
+            yamlColumns,
+            databaseDisk.yaml.config
+        );
+        // Obtain base information about columns
+        const columns = await obtainColumnsFromFolder(yamlColumns);
+        const rows = await adapterTFilesToRows(
+            dbFile.parent.path,
+            columns,
+            databaseDisk.yaml.filters
+        );
+        const dataviewCols: string[] = columns.map((c) => c.key);
+        const dataviewMatrixRow: any[][] = rows.map((r) =>
+            dataviewCols.map((c) => r[c])
+        );
+
+        DataviewService.getDataviewAPI().table(
+            dataviewCols,
+            dataviewMatrixRow,
+            div,
+            null,
+            ctx.sourcePath
+        )
+        return div;
+    }
+
     public static getInstance(plugin?: DBFolderPlugin): PreviewDatabaseModeService {
         if (!this.instance) {
             this.instance = new PreviewDatabaseModeService(plugin);