-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathboard.js
97 lines (87 loc) · 3.5 KB
/
board.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/** A Board of vertical columns
*
* Like a github "project", or a kanbam board, a board allows
* you to triage stuff into simple cateories.
*
* if an object is added in a refresh, then a new column should be added if needed
* if its value is previously unseen
* (Should the coluimn order be defined by user or caller?)
*
* @returns dom:Element
*/
import { ns, rdf, utils, widgets } from 'solid-ui'
import { store } from 'solid-logic'
const $rdf = rdf
export function board (dom, columnValues, renderItem, options) {
const board = dom.createElement('div')
board.style = 'width: 100%;'
board.style.margin = '1em'
const table = board.appendChild(dom.createElement('table'))
table.style = 'width: 100%;'
table.style.borderCollapse = 'collapse'
const headerRow = table.appendChild(dom.createElement('tr'))
const mainRow = table.appendChild(dom.createElement('tr'))
columnValues.forEach(x => {
const cell = headerRow.appendChild(dom.createElement('th'))
cell.textContent = utils.label(x, true) // Initial capital
cell.subject = x
cell.style = 'margin: 0.3em; padding: 0.5em 1em; font-treatment: bold; font-size: 120%;'
const column = mainRow.appendChild(dom.createElement('td'))
column.subject = x
column.style = 'border: 0.01em solid white; padding: 0.1em;' // display: flex; flex-direction: column; align-items: center;
function droppedURIHandler (uris) {
uris.forEach(function (u) {
console.log('Dropped on column: ' + u)
const item = store.sym(u)
options.columnDropHandler(item, x)
})
}
if (options.columnDropHandler) {
widgets.makeDropTarget(column, droppedURIHandler)
}
})
/* Each item on the board
* normally App will override this
*/
function defaultRenderItem (item, category) {
const card = dom.createElement('div')
const table = card.appendChild(dom.createElement('table'))
const classes = store.each(item, ns.rdf('type'))
const catColors = classes.map(cat => store.any(cat, ns.ui('backgroundColor'))).filter(c => c)
table.appendChild(widgets.personTR(dom, null, item))
table.subject = item
table.style = 'margin: 1em;' // @@ use style.js
const backgroundColor = catColors[0] || store.any(category, ns.ui('backgroundColor'))
card.style.backgroundColor = backgroundColor ? backgroundColor.value : '#fff'
return card
}
function sortedBy (values, predicate, defaultSortValue, reverse) {
const toBeSorted = values.map(x => [store.any(x, predicate) || defaultSortValue, x])
toBeSorted.sort()
if (reverse) toBeSorted.reverse() // @@ check
return toBeSorted.map(pair => pair[1])
}
board.refresh = function () {
const now = new $rdf.Literal(new Date())
const actualRenderItem = renderItem || options.renderItem || defaultRenderItem
function localRenderItem (subject) {
const ele = actualRenderItem(subject)
widgets.makeDraggable(ele, subject)
ele.subject = subject
return ele
}
for (let col = mainRow.firstChild; col; col = col.nextSibling) {
const category = col.subject
let items = store.each(null, ns.rdf('type'), category)
const sortBy = options.sortBy || ns.dct('created')
if (options.filter) {
items = items.filter(options.filter)
}
const sortedItems = sortedBy(items, sortBy, now, true)
utils.syncTableToArrayReOrdered(col, sortedItems, localRenderItem)
}
}
// kb.query(query, addCellFromBindings, undefined, whenDone) // Populate the board
board.refresh()
return board
}