Skip to content

Commit c7425c6

Browse files
dan-fdan-f
committed
Extract error widget, render people picker
1 parent cf397a7 commit c7425c6

3 files changed

Lines changed: 56 additions & 39 deletions

File tree

‎src/widgets/error.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports.errorMessageBlock = errorMessageBlock
2+
3+
function errorMessageBlock (dom, msg, backgroundColor) {
4+
var div = dom.createElement('div')
5+
div.setAttribute('style', 'margin: 0.1em; padding: 0.5em; border: 0.05em solid gray; background-color: ' +
6+
(backgroundColor || '#fee') + '; color:black;')
7+
div.textContent = msg
8+
return div
9+
}

‎src/widgets/index.js‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@ var widgets = module.exports = Object.assign(
2323
{
2424
PeoplePicker: require('./peoplePicker').default
2525
},
26-
require('./dragAndDrop')
26+
require('./dragAndDrop'),
27+
require('./error')
2728
)
2829

2930
var UI = {
@@ -1094,14 +1095,6 @@ UI.widgets.fieldLabel = function (dom, property, form) {
10941095
**
10951096
*/
10961097

1097-
UI.widgets.errorMessageBlock = function (dom, msg, backgroundColor) {
1098-
var div = dom.createElement('div')
1099-
div.setAttribute('style', 'margin: 0.1em; padding: 0.5em; border: 0.05em solid gray; background-color: ' +
1100-
(backgroundColor || '#fee') + '; color:black;')
1101-
div.textContent = msg
1102-
return div
1103-
}
1104-
11051098
UI.widgets.bottomURI = function (x) {
11061099
var kb = UI.store
11071100
var ft = kb.findTypeURIs(x)

‎src/widgets/peoplePicker.js‎

Lines changed: 45 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
/* global $rdf */
2-
31
/**
42
*
53
* People Picker Pane
@@ -11,45 +9,46 @@
119
import escape from 'escape-html'
1210

1311
import { makeDropTarget } from './dragAndDrop'
12+
import { errorMessageBlock } from './error'
1413
import { iconBase } from '../iconBase'
1514
import ns from '../ns'
15+
import rdf from 'rdflib'
1616
import kb from '../store'
1717

18-
// Note: it's the established pattern to stick all semantic data in the global store.
19-
// This probably means that I'm going to:
20-
// 1) stick all new webIds in the global store
21-
// 2) fetch and store metadata about those webIds in the global store
22-
// 3) keep local track (an ordered set of webIds, for example) of which of those global
23-
// webIds belong to the people picker.
24-
2518
export default class PeoplePicker {
2619
constructor (element, handleDonePicking) {
2720
this.element = element
2821
this.handleDonePicking = handleDonePicking
29-
this.pickedWebIds = new Set()
22+
this.pickedWebIdNodes = new Set()
3023
}
3124

3225
render () {
3326
// This could be more efficient and readable using a view library
3427
const dropContainer = document.createElement('div')
35-
dropContainer.style.maxWidth = '75%'
28+
dropContainer.style.maxWidth = '350px'
3629
dropContainer.style.minHeight = '200px'
3730
dropContainer.style.outline = '1px solid black'
31+
dropContainer.style.display = 'flex'
32+
dropContainer.style.flexDirection = 'column'
3833

3934
makeDropTarget(dropContainer, uris => {
4035
console.log('uris:', uris)
36+
uris.map(uri => {
37+
this.add(uri)
38+
.then()
39+
.catch(err => {
40+
errorMessageBlock(document, 'Could not load the given WebId')
41+
})
42+
})
4143
})
4244

43-
const peopleUl = document.createElement('ul')
44-
this.pickedWebIds
45-
.forEach(webId => {
46-
const personLi = document.createElement('li')
47-
new Person(personLi, webId, () => { console.log('not yet handling remove') }).render()
48-
peopleUl.appendChild(personLi)
45+
this.pickedWebIdNodes
46+
.forEach(webIdNode => {
47+
const personDiv = document.createElement('div')
48+
new Person(personDiv, webIdNode, () => { console.log('not yet handling remove') }).render()
49+
dropContainer.appendChild(personDiv)
4950
})
5051

51-
dropContainer.appendChild(peopleUl)
52-
5352
this.element.innerHTML = ''
5453
this.element.appendChild(dropContainer)
5554
return this
@@ -65,48 +64,64 @@ export default class PeoplePicker {
6564
// TODO: render an error widget with the 'err' message
6665
reject(err)
6766
} else {
68-
this.pickedWebIds.add(webId)
67+
// make sure it's a valid person, group, or entity (for now just handle
68+
// webId)
69+
const webIdNode = rdf.namedNode(webId)
70+
const rdfClass = kb.any(webIdNode, ns.rdf('type'))
71+
if (!rdfClass.equals(ns.foaf('Person'))) {
72+
reject(new Error('Only people supported right now'))
73+
}
74+
this.pickedWebIdNodes.add(webIdNode)
6975
this.render()
70-
resolve(webId)
76+
resolve(webIdNode)
7177
}
7278
})
7379
})
7480
}
7581
}
7682

7783
class Person {
78-
constructor (element, webId, handleRemove) {
79-
this.webId = webId
84+
constructor (element, webIdNode, handleRemove) {
85+
this.webIdNode = webIdNode
8086
this.element = element
8187
this.handleRemove = handleRemove
8288
}
8389

8490
render () {
85-
const personDiv = document.createElement('div')
91+
const container = document.createElement('div')
92+
container.style.display = 'flex'
8693

8794
// TODO: take a look at UI.widgets.setName
8895
const imgSrc = this.getWithDefault(ns.foaf('img'), iconBase + 'noun_15059.svg')
8996
const profileImg = document.createElement('img')
9097
profileImg.src = escape(imgSrc)
98+
profileImg.width = '50'
99+
profileImg.height = '50'
100+
profileImg.style.margin = '5px'
91101

92102
// TODO: take a look at UI.widgets.setImage
93-
const name = this.getWithDefault(ns.foaf('name'), `[${this.webId}]`)
103+
const name = this.getWithDefault(ns.foaf('name'), `[${this.webIdNode}]`)
94104
const nameSpan = document.createElement('span')
95105
nameSpan.innerHTML = escape(name)
106+
nameSpan.style.flexGrow = '1'
107+
nameSpan.style.margin = 'auto 0'
96108

97109
const removeButton = document.createElement('button')
110+
removeButton.textContent = 'Remove'
98111
removeButton.addEventListener('click', event => this.handleRemove())
112+
removeButton.style.margin = '5px'
99113

100-
personDiv.appendChild(profileImg)
101-
personDiv.appendChild(nameSpan)
102-
personDiv.appendChild(removeButton)
114+
container.appendChild(profileImg)
115+
container.appendChild(nameSpan)
116+
container.appendChild(removeButton)
103117

104118
this.element.innerHTML = ''
105-
this.element.appendChild(personDiv)
119+
this.element.appendChild(container)
106120
return this
107121
}
108122

109123
getWithDefault (predicate, defaultValue) {
110-
return kb.anyValue($rdf.namedNode(this.webId), predicate) || defaultValue
124+
const object = kb.any(this.webIdNode, predicate)
125+
return object ? object.value : defaultValue
111126
}
112127
}

0 commit comments

Comments
 (0)