From dd7ba5ec117bdf7f84591f60014bc6fd68f862c2 Mon Sep 17 00:00:00 2001
From: Peter Stuifzand <peter@stuifzand.eu>
Date: Sun, 25 Oct 2020 15:37:03 +0100
Subject: [PATCH] Improve loading of table rows in editor

---
 editor/src/editor.js | 72 +++++++++++++++++++++-----------------------
 1 file changed, 34 insertions(+), 38 deletions(-)

diff --git a/editor/src/editor.js b/editor/src/editor.js
index 69a8225..9bf1ab0 100644
--- a/editor/src/editor.js
+++ b/editor/src/editor.js
@@ -142,7 +142,7 @@ function renderGraphs() {
     })
 }
 
-function createElement(tag, children) {
+function el(tag, children = []) {
     let el = document.createElement(tag)
     _.each(children, item => {
         el.appendChild(item)
@@ -158,7 +158,7 @@ function Editor(holder, input) {
 
         MD.options.html = true
         let rendered = MD.renderInline(cellText)
-        let span = $("<span>"+rendered+"</span>")
+        let span = $("<span>" + rendered + "</span>")
         MD.options.html = false
         return span[0];
     }
@@ -175,45 +175,41 @@ function Editor(holder, input) {
                 editor.treeForId(id).then(tree => {
                     let [header, rows] = tree[0].children
                     let rowData = _.map(rows.children, row => {
-                        let page = row.text.substring(2).substring(0, row.text.length-4)
-                        return fetch('/'+page+'?format=metakv')
+                        let page = row.text.substring(2).substring(0, row.text.length - 4)
+                        return fetch('/' + page + '?format=metakv')
                             .then(res => res.json())
-                            .then(res => [page, res.meta])
+                            .then(res => res.meta)
+                            .then(rowData => {
+                                return el("tr", [
+                                    el("td", [renderInline(row.text)]),
+                                    ..._.map(header.children, col => {
+                                        let td = el("td")
+                                        this.transform(rowData[_.snakeCase(_.trim(col.text))], $(td), id, editor)
+                                        return td
+                                    })
+                                ])
+                            })
                     })
 
-                    // FIXME: don't wait for promises here, but at the end
-                    Promise.all(rowData).then(res => {
-                        return _.fromPairs(res)
-                    }).then(data => {
-                        return createElement("table", [
-                            createElement("thead", [
-                                createElement("tr", [
-                                        createElement("th", [
-                                            document.createTextNode("Title")
-                                        ]),
-                                        ..._.map(header.children, col => {
-                                            return createElement("th", [
-                                                document.createTextNode(col.text)
-                                            ])
-                                        })
-                                    ]
-                                ),
-                            ]),
-                            createElement("tbody",
-                                _.map(rows.children, row => {
-                                    let page = row.text.substring(2).substring(0, row.text.length-4)
-                                    return createElement("tr", [
-                                        createElement("td", [renderInline(row.text)]),
-                                        ..._.map(header.children, col => {
-                                            let td = createElement("td", []);
-                                            this.transform(data[page][col.text.toLowerCase()], $(td), id, editor)
-                                            return td
-                                        })
-                                    ])
-                                })
-                            )
-                        ])
-                    }).then(table => element.html(table))
+                    Promise.all(rowData)
+                        .then(trs => {
+                            return el("table", [
+                                el("thead", [
+                                    el("tr", [
+                                            el("th", [
+                                                document.createTextNode("Title")
+                                            ]),
+                                            ..._.map(header.children, col => {
+                                                return el("th", [
+                                                    document.createTextNode(col.text)
+                                                ])
+                                            })
+                                        ]
+                                    ),
+                                ]),
+                                el("tbody", trs)
+                            ])
+                        }).then(table => element.html(table))
                 })
                 return
             } else if (converted.startsWith("```", 0) || converted.startsWith("$$", 0)) {