Improve loading of table rows in editor

This commit is contained in:
Peter Stuifzand 2020-10-25 15:37:03 +01:00
parent 6c9b82493e
commit dd7ba5ec11

View File

@ -142,7 +142,7 @@ function renderGraphs() {
}) })
} }
function createElement(tag, children) { function el(tag, children = []) {
let el = document.createElement(tag) let el = document.createElement(tag)
_.each(children, item => { _.each(children, item => {
el.appendChild(item) el.appendChild(item)
@ -158,7 +158,7 @@ function Editor(holder, input) {
MD.options.html = true MD.options.html = true
let rendered = MD.renderInline(cellText) let rendered = MD.renderInline(cellText)
let span = $("<span>"+rendered+"</span>") let span = $("<span>" + rendered + "</span>")
MD.options.html = false MD.options.html = false
return span[0]; return span[0];
} }
@ -175,43 +175,39 @@ function Editor(holder, input) {
editor.treeForId(id).then(tree => { editor.treeForId(id).then(tree => {
let [header, rows] = tree[0].children let [header, rows] = tree[0].children
let rowData = _.map(rows.children, row => { let rowData = _.map(rows.children, row => {
let page = row.text.substring(2).substring(0, row.text.length-4) let page = row.text.substring(2).substring(0, row.text.length - 4)
return fetch('/'+page+'?format=metakv') return fetch('/' + page + '?format=metakv')
.then(res => res.json()) .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)
Promise.all(rowData).then(res => { .then(trs => {
return _.fromPairs(res) return el("table", [
}).then(data => { el("thead", [
return createElement("table", [ el("tr", [
createElement("thead", [ el("th", [
createElement("tr", [
createElement("th", [
document.createTextNode("Title") document.createTextNode("Title")
]), ]),
..._.map(header.children, col => { ..._.map(header.children, col => {
return createElement("th", [ return el("th", [
document.createTextNode(col.text) document.createTextNode(col.text)
]) ])
}) })
] ]
), ),
]), ]),
createElement("tbody", el("tbody", trs)
_.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)) }).then(table => element.html(table))
}) })