Skip to content

Commit b13795c

Browse files
benlohbenloh
authored
Merge pull request #37 from daveseah/templatize-labels
Templatize Labels
2 parents f6a7e5d + d68d7da commit b13795c

File tree

6 files changed

+182
-141
lines changed

6 files changed

+182
-141
lines changed

‎build/app/assets/templates/alexander.json

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
{
22

3-
"_comment": "/// NetCreate Template File ///",
4-
"_comment2": "/// IMPORTANT: As of 9/6/2018 only nodePrompts.type and edgePrompts.type are being used ///",
5-
"_comment3": "/// The rest of the definitions are there as placeholders for future functionality ///",
6-
3+
"_comments": [ "/// NetCreate Template File ///",
4+
"/// IMPORTANT: As of 10/2/2018, the following functionality is available: ///",
5+
"/// * `label` parameter for each field may be customized ///",
6+
"/// * `hidden` parameter may be used to hide fields ///",
7+
"/// * changing the order of the `options` WILL change their order on selections ///",
8+
"/// * changing the order of the prompts themselves will NOT change their order ///",
9+
"/// The rest of the definitions are there as placeholders for future functionality ///"
10+
],
711

812
"name": "Alexander The Great",
913

@@ -14,11 +18,13 @@
1418
"nodePrompts": {
1519
"label": {
1620
"label": "Label",
17-
"help": "A short title for the node"
21+
"help": "A short title for the node",
22+
"_cmt4": "/// `Label` is always required and cannot be hidden"
1823
},
1924
"type": {
2025
"label": "Type",
2126
"help": "Multiple people are a 'Group'",
27+
"hidden": false,
2228
"options": [
2329
{
2430
"_comment": "Default color when nothing is selected",
@@ -54,12 +60,14 @@
5460
]
5561
},
5662
"notes": {
57-
"label": "Notes",
58-
"help": "Add some details."
63+
"label": "Significance",
64+
"help": "Add some details.",
65+
"hidden": false
5966
},
6067
"info": {
6168
"label": "Geocode or Date",
62-
"help": "Use latitude/longitude or a date mm/dd/yyy"
69+
"help": "Use latitude/longitude or a date mm/dd/yyy",
70+
"hidden": true
6371
}
6472
},
6573

@@ -68,11 +76,13 @@
6876
"edgePrompts": {
6977
"source": {
7078
"label": "Source",
71-
"help": ""
79+
"help": "",
80+
"hidden": false
7281
},
7382
"type": {
7483
"label": "Type",
7584
"help": "",
85+
"hidden": false,
7686
"options": [
7787
{
7888
"id": "notSelected",
@@ -106,19 +116,23 @@
106116
},
107117
"target": {
108118
"label": "Target",
109-
"help": ""
119+
"help": "",
120+
"hidden": false
110121
},
111122
"notes": {
112-
"label": "Notes",
113-
"help": ""
123+
"label": "Signficance",
124+
"help": "",
125+
"hidden": false
114126
},
115127
"info": {
116128
"label": "Approximate Date of Interaction",
117-
"help": ""
129+
"help": "",
130+
"hidden": true
118131
},
119132
"citation": {
120133
"label": "Citation",
121-
"help": "Enter Chapter number."
134+
"help": "Enter Chapter number.",
135+
"hidden": false
122136
}
123137
}
124138

‎build/app/view/netcreate/components/EdgeEditor.jsx

Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,7 @@ class EdgeEditor extends UNISYS.Component {
192192
constructor (props) {
193193
super(props);
194194
this.state = {
195+
edgePrompts: this.AppState('TEMPLATE').edgePrompts,
195196
formData: { // Holds the state of the form fields
196197
sourceId: '',
197198
targetId: '',
@@ -264,14 +265,9 @@ class EdgeEditor extends UNISYS.Component {
264265
this.handleEdgeEdit(data);
265266
});
266267

267-
// Load template
268-
const options = this.AppState('EDGETYPES').options;
269-
if ( (options===undefined) || !Array.isArray(options) ) console.error(PR,'received bad Options definition:',options);
270-
this.state.options = options;
271-
272268
// Template handler
273-
this.OnAppStateChange('EDGETYPES',(data) => {
274-
this.setState({options: data.options});
269+
this.OnAppStateChange('TEMPLATE',(data) => {
270+
this.setState({edgePrompts: data.edgePrompts});
275271
});
276272

277273
} // constructor
@@ -681,7 +677,7 @@ class EdgeEditor extends UNISYS.Component {
681677
/*/
682678
/*/ render () {
683679
const { edgeID, parentNodeLabel } = this.props;
684-
const { formData, sourceNode, targetNode, options } = this.state;
680+
const { formData, sourceNode, targetNode, edgePrompts } = this.state;
685681
const me = <span style={{color:"rgba(0,0,0,0.2)",fontStyle:"italic"}}>this</span>;
686682
return (
687683
<div>
@@ -721,7 +717,7 @@ class EdgeEditor extends UNISYS.Component {
721717
>Change Source</Button>
722718
</Col>
723719
</FormGroup>
724-
<FormGroup row>
720+
<FormGroup row hidden={edgePrompts.type.hidden}>
725721
<Col sm={3}>
726722
<Label for="relationship" className="small text-muted">Type</Label>
727723
</Col>
@@ -731,7 +727,7 @@ class EdgeEditor extends UNISYS.Component {
731727
onChange={this.onRelationshipChange}
732728
disabled={!this.state.isEditable}
733729
>
734-
{options.map( (option,i) => (
730+
{edgePrompts.type.options.map( (option,i) => (
735731
<option id={option.id} key={option.id}>{option.label}</option>
736732
))}
737733
</Input>
@@ -762,38 +758,38 @@ class EdgeEditor extends UNISYS.Component {
762758
>&uarr;&darr;</Button>
763759
</Col>
764760
</FormGroup>
765-
<FormGroup row>
761+
<FormGroup row hidden={edgePrompts.citation.hidden}>
766762
<Col sm={3}>
767-
<Label for="notes" className="small text-muted">Notes</Label>
763+
<Label for="citation" className="small text-muted">{edgePrompts.citation.label}</Label>
768764
</Col>
769765
<Col sm={9}>
770-
<Input type="text" name="notes" id="notes"
771-
value={formData.notes}
772-
onChange={this.onNotesChange}
766+
<Input type="text" name="citation" id="citation"
767+
value={formData.citation}
768+
onChange={this.onCitationChange}
773769
readOnly={!this.state.isEditable}
774770
/>
775771
</Col>
776772
</FormGroup>
777-
<FormGroup row>
773+
<FormGroup row hidden={edgePrompts.notes.hidden}>
778774
<Col sm={3}>
779-
<Label for="info" className="small text-muted">Approximate Date of Interaction</Label>
775+
<Label for="notes" className="small text-muted">{edgePrompts.notes.label}</Label>
780776
</Col>
781777
<Col sm={9}>
782-
<Input type="text" name="info" id="info"
783-
value={formData.info}
784-
onChange={this.onInfoChange}
778+
<Input type="textarea" name="notes" id="notes"
779+
value={formData.notes}
780+
onChange={this.onNotesChange}
785781
readOnly={!this.state.isEditable}
786782
/>
787783
</Col>
788784
</FormGroup>
789-
<FormGroup row>
785+
<FormGroup row hidden={edgePrompts.info.hidden}>
790786
<Col sm={3}>
791-
<Label for="citation" className="small text-muted">Citation</Label>
787+
<Label for="info" className="small text-muted">{edgePrompts.info.label}</Label>
792788
</Col>
793789
<Col sm={9}>
794-
<Input type="text" name="citation" id="citation"
795-
value={formData.citation}
796-
onChange={this.onCitationChange}
790+
<Input type="text" name="info" id="info"
791+
value={formData.info}
792+
onChange={this.onInfoChange}
797793
readOnly={!this.state.isEditable}
798794
/>
799795
</Col>

‎build/app/view/netcreate/components/EdgeTable.jsx

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,10 @@ class EdgeTable extends UNISYS.Component {
3636
super(props);
3737

3838
this.state = {
39-
edges: [],
40-
isExpanded: false,
41-
sortkey: 'Citations'
39+
edgePrompts: this.AppState('TEMPLATE').edgePrompts,
40+
edges: [],
41+
isExpanded: false,
42+
sortkey: 'Citations'
4243
};
4344

4445
this.onButtonClick = this.onButtonClick.bind(this);
@@ -57,6 +58,11 @@ class EdgeTable extends UNISYS.Component {
5758
this.OnAppStateChange('D3DATA',(data) => {
5859
this.handleDataUpdate(data);
5960
});
61+
62+
// Handle Template updates
63+
this.OnAppStateChange('TEMPLATE',(data) => {
64+
this.setState({edgePrompts: data.edgePrompts});
65+
});
6066
} // constructor
6167

6268

@@ -250,6 +256,7 @@ class EdgeTable extends UNISYS.Component {
250256
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
251257
/*/
252258
/*/ render () {
259+
let { edgePrompts } = this.state;
253260
return (
254261
<div style={{maxHeight:'50vh',overflow:'scroll',backgroundColor:'#f3f3ff'}}>
255262
<Button size="sm" outline
@@ -260,51 +267,43 @@ class EdgeTable extends UNISYS.Component {
260267
>
261268
<thead>
262269
<tr>
263-
{DBG
264-
? <th><Button size="sm"
270+
<th hidden={!DBG}><Button size="sm"
265271
disabled={this.state.sortkey==="id"}
266272
onClick={()=>this.setSortKey("id")}
267273
>ID</Button></th>
268-
: <th></th>}
269-
{DBG
270-
? <th>Size</th>
271-
: <th></th>}
274+
<th hidden={!DBG}>Size</th>
272275
<th></th>
273276
<th><Button size="sm"
274277
disabled={this.state.sortkey==="source"}
275278
onClick={()=>this.setSortKey("source")}
276-
>Source</Button></th>
279+
>{edgePrompts.source.label}</Button></th>
277280
<th><Button size="sm"
278281
disabled={this.state.sortkey==="Relationship"}
279282
onClick={()=>this.setSortKey("Relationship")}
280-
>Type</Button></th>
283+
>{edgePrompts.type.label}</Button></th>
281284
<th><Button size="sm"
282285
disabled={this.state.sortkey==="target"}
283286
onClick={()=>this.setSortKey("target")}
284-
>Target</Button></th>
285-
<th><Button size="sm"
287+
>{edgePrompts.target.label}</Button></th>
288+
<th hidden={edgePrompts.citation.hidden}><Button size="sm"
286289
disabled={this.state.sortkey==="Citations"}
287290
onClick={()=>this.setSortKey("Citations")}
288-
>Citations</Button></th>
289-
<th><Button size="sm"
291+
>{edgePrompts.citation.label}</Button></th>
292+
<th hidden={edgePrompts.notes.hidden}><Button size="sm"
290293
disabled={this.state.sortkey==="Notes"}
291294
onClick={()=>this.setSortKey("Notes")}
292-
>Notes</Button></th>
293-
<th><Button size="sm"
295+
>{edgePrompts.notes.label}</Button></th>
296+
<th hidden={edgePrompts.info.hidden}><Button size="sm"
294297
disabled={this.state.sortkey==="Info"}
295298
onClick={()=>this.setSortKey("Info")}
296-
>Info</Button></th>
299+
>{edgePrompts.info.label}</Button></th>
297300
</tr>
298301
</thead>
299302
<tbody>
300303
{this.state.edges.map( (edge,i) => (
301304
<tr key={i}>
302-
{DBG
303-
? <td>{edge.id}</td>
304-
: <td></td>}
305-
{DBG
306-
? <td>{edge.size}</td>
307-
: <td></td>}
305+
<td hidden={!DBG}>{edge.id}</td>
306+
<td hidden={!DBG}>{edge.size}</td>
308307
<td><Button size="sm" outline
309308
value={edge.id}
310309
onClick={this.onButtonClick}
@@ -315,9 +314,9 @@ class EdgeTable extends UNISYS.Component {
315314
<td>{edge.attributes["Relationship"]}</td>
316315
<td><a href="#" onClick={(e)=>this.selectNode(edge.target.id,e)}
317316
>{edge.target.label || edge.target}</a></td>
318-
<td>{edge.attributes["Citations"]}</td>
319-
<td>{edge.attributes["Notes"]}</td>
320-
<td>{edge.attributes["Info"]}</td>
317+
<td hidden={edgePrompts.citation.hidden}>{edge.attributes["Citations"]}</td>
318+
<td hidden={edgePrompts.notes.hidden}>{edge.attributes["Notes"]}</td>
319+
<td hidden={edgePrompts.info.hidden}>{edge.attributes["Info"]}</td>
321320
</tr>
322321
))}
323322
</tbody>

0 commit comments

Comments
 (0)