Change Area layout rendering with dataview table

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

@@ -2,45 +2,51 @@ 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, private dvRender: DvRenderer) {
+    constructor(private ctx: ExoContext, private dvRender: DvRenderer) {
-	}
+    }
 
-	async render(ko: Area, el: HTMLElement): Promise<void> {
+    async render(ko: Area, el: HTMLElement): Promise<void> {
-		const unresolvedEfforts = await this.ctx.effortRepository.find(e => {
+        const unresolvedEfforts = await this.ctx.effortRepository.find(e => {
-			if (e.area === null) {
+            if (e.area === null) {
-				return false;
+                return false;
-			}
+            }
-			const sameArea = e.area.id == ko.id;
+            const sameArea = e.area.id == ko.id;
-			const unresolved = e.isUnresolved();
+            const unresolved = e.isUnresolved();
-			return sameArea && unresolved;
+            return sameArea && unresolved;
-		});
+        });
 
-		if (unresolvedEfforts.length > 0) {
+        if (unresolvedEfforts.length > 0) {
-			let header = this.createH1("Unresolved Efforts");
+            let header = this.createH1("Unresolved Efforts");
-			el.appendChild(header);
+            el.appendChild(header);
 
-			const dvTable = await this.createTable(unresolvedEfforts);
+            const dvTable = await this.createTable(unresolvedEfforts);
-			el.appendChild(dvTable)
+            el.appendChild(dvTable)
-		}
+        }
-	}
+    }
 
-	private createH1(textContent: string) {
+    private createH1(textContent: string) {
-		const h1 = document.createElement("h1");
+        const h1 = document.createElement("h1");
-		h1.textContent = textContent;
+        h1.textContent = textContent;
-		return h1;
+        return h1;
-	}
+    }
 
-	private async createTable(unresolvedEfforts: Effort[]) {
+    private async createTable(unresolvedEfforts: Effort[]) {
-		let effortsLinks: Link[] = unresolvedEfforts.map(e => {
+        const headers = ["Effort", "Area", "Status", "Votes"];
-			let file = this.ctx.appUtils.getObjectFileOrThrow(e);
+        const rows = unresolvedEfforts.map(e => {
-			return this.dvRender.dvApi.fileLink(file.path);
+            const effortLink = this.toLink(e);
-		});
+            const aresStr = e.area?.name ?? "--"; // TODO use inherited area
-		const dvDiv = document.createElement("div");
+            const statusStr = e.status;
-		await this.dvRender.list(effortsLinks, dvDiv);
+            const votesStr = "--"; // TODO implement votes
-		return dvDiv;
+            return [effortLink, aresStr, statusStr, votesStr];
-	}
+        });
+        return await this.dvRender.table(headers, rows);
+    }
+
+    private toLink(e: Effort) {
+        let file = this.ctx.appUtils.getObjectFileOrThrow(e);
+        return this.dvRender.dvApi.fileLink(file.path);
+    }
 }

app/src/utils/dv/DvRenderer.ts

@@ -19,12 +19,26 @@ export default class DvRenderer {
 		this.dvApi = dvApi;
 	}
 
-	async list(links: Link[], el: HTMLElement) {
+	// noinspection JSUnusedGlobalSymbols
-		await this.dvApi.list(
+	async list(links: Link[]) {
-			links,
+		const div = document.createElement("div");
-			el,
+		div.addClass("dv-renderer");
-			this.component,
+
+		await this.dvApi.list(links, div, this.component,
 			this.mdCtx.sourcePath // TODO maybe this in unnecessary
 		);
+
+		return div;
+	}
+
+	async table(headers: string[], rows: any[][]) {
+		const div = document.createElement("div");
+		div.addClass("dv-renderer");
+
+		await this.dvApi.table(headers, rows, div, this.component,
+			this.mdCtx.sourcePath // TODO maybe this in unnecessary
+		);
+
+		return div;
 	}
 }