Change Area layout rendering with dataview

app/src/adapters/input/layouts/AreaLayout.ts

@@ -1,14 +1,15 @@
 import Layout from "./Layout";
 import ExoContext from "../../../../../common/ExoContext";
 import Area from "../../../../../core/src/domain/Area";
+import DvRenderer from "../../../utils/dv/DvRenderer";
+import {Link} from "obsidian-dataview";
+import Effort from "../../../../../core/src/domain/effort/Effort";
 
 export default class AreaLayout implements Layout<Area> {
-	constructor(private ctx: ExoContext) {
+	constructor(private ctx: ExoContext, private dvRender: DvRenderer) {
 	}
 
-	async render(ko: Area): Promise<HTMLDivElement> {
-		const renderText = document.createElement("div");
-
+	async render(ko: Area, el: HTMLElement): Promise<void> {
 		const unresolvedEfforts = await this.ctx.effortRepository.find(e => {
 			if (e.area === null) {
 				return false;
@@ -19,28 +20,27 @@ export default class AreaLayout implements Layout<Area> {
 		});
 
 		if (unresolvedEfforts.length > 0) {
-			let h1 = document.createElement("h1");
-			h1.textContent = "Unresolved Efforts";
-			renderText.appendChild(h1);
+			let header = this.createH1("Unresolved Efforts");
+			el.appendChild(header);
 
-			let table = document.createElement("table");
-			renderText.appendChild(table);
-
-			const headerRow = document.createElement("tr");
-			const th = document.createElement("th");
-			th.innerText = "Name";
-			headerRow.appendChild(th);
-			table.appendChild(headerRow);
-
-			for (let effort of unresolvedEfforts) {
-				const tr = document.createElement("tr");
-				let td = document.createElement("td");
-				td.textContent = "[[" + effort.title + "]]";
-				tr.appendChild(td);
-				table.appendChild(tr);
-			}
+			const dvTable = await this.createTable(unresolvedEfforts);
+			el.appendChild(dvTable)
 		}
+	}
 
-		return renderText;
+	private createH1(textContent: string) {
+		const h1 = document.createElement("h1");
+		h1.textContent = textContent;
+		return h1;
+	}
+
+	private async createTable(unresolvedEfforts: Effort[]) {
+		let effortsLinks: Link[] = unresolvedEfforts.map(e => {
+			let file = this.ctx.appUtils.getObjectFileOrThrow(e);
+			return this.dvRender.dvApi.fileLink(file.path);
+		});
+		const dvDiv = document.createElement("div");
+		await this.dvRender.list(effortsLinks, dvDiv);
+		return dvDiv;
 	}
 }

app/src/adapters/input/layouts/Layout.ts

@@ -1,3 +1,3 @@
 export default interface Layout<KO> {
-	render(ko: KO): Promise<HTMLElement>;
+	render(ko: KO, el: HTMLElement): Promise<void>;
 }

app/src/adapters/input/layouts/LayoutFactory.ts

@@ -1,17 +1,18 @@
-import AreaLayout from "./AreaLayout";
 import {KOC} from "../../../../../core/src/domain/KOC";
 import ExoContext from "../../../../../common/ExoContext";
 import KObject from "../../../../../core/src/domain/KObject";
+import AreaLayoutDv from "./AreaLayout";
+import DvRenderer from "../../../utils/dv/DvRenderer";
 import Layout from "./Layout";
 
 export default class LayoutFactory {
 	constructor(private ctx: ExoContext) {
 	}
 
-	create(ko: KObject): Layout<KObject> | null {
+	create(ko: KObject, dvRender: DvRenderer): Layout<KObject> | null {
 		switch (ko.koc) {
 			case KOC.EMS_AREA:
-				return new AreaLayout(this.ctx);
+				return new AreaLayoutDv(this.ctx, dvRender);
 			default:
 				return null;
 		}

app/src/utils/creators/KObjectCreator.ts

@@ -24,7 +24,7 @@ export default class KObjectCreator {
 			case KOC.EMS_EFFORT:
 				return await this.ctx.effortCreator.create(file);
 			default:
-				throw new Error("Not implemented createFromTFileTyped")
+				throw new Error(`KOC '${koc}' not supported`);
 		}
 	}
 

app/src/utils/dv/DvRenderer.ts

@@ -0,0 +1,30 @@
+import ExoContext from "../../../../common/ExoContext";
+import {Component, MarkdownPostProcessorContext} from "obsidian";
+import {DataviewApi} from "api/plugin-api";
+import {getAPI, Link} from "obsidian-dataview";
+
+/**
+ * Dataview renderer for MarkdownPostProcessing
+ */
+export default class DvRenderer {
+	public readonly dvApi: DataviewApi;
+
+	constructor(private exoCtx: ExoContext,
+				private mdCtx: MarkdownPostProcessorContext,
+				private component: Component) {
+		const dvApi: DataviewApi | undefined = getAPI(this.exoCtx.app);
+		if (!dvApi) {
+			throw new Error('Dataview API not available.');
+		}
+		this.dvApi = dvApi;
+	}
+
+	async list(links: Link[], el: HTMLElement) {
+		await this.dvApi.list(
+			links,
+			el,
+			this.component,
+			this.mdCtx.sourcePath // TODO maybe this in unnecessary
+		);
+	}
+}

main.ts

@@ -3,6 +3,7 @@ import {ExoMainModal} from "./app/src/ExoMainModal";
 import "localforage";
 import ExoApi from "./core/src/ExoApi";
 import ExoContext from "./common/ExoContext";
+import DvRenderer from "./app/src/utils/dv/DvRenderer";
 
 export default class ExoPlugin extends Plugin {
 	private api: ExoApi;
@@ -22,16 +23,17 @@ export default class ExoPlugin extends Plugin {
 			}
 
 			if (el.classList.contains("mod-ui")) {
+				const renderer = new DvRenderer(this.ctx, ctx, this);
+
 				const file: TFile = this.ctx.appUtils.getFileByPathOrThrow(ctx.sourcePath);
-				console.log(file)
 				const ko = await this.ctx.kObjectCreator.createFromTFileTyped(file);
-				const layout = this.ctx.layoutFactory.create(ko);
-				if (!layout) {
+
+				const layout = this.ctx.layoutFactory.create(ko, renderer);
+				if (layout === null) {
 					return;
 				}
 
-				const renderText = await layout.render(ko);
-				el.prepend(renderText);
+				await layout.render(ko, el);
 			}
 		});
 	}