Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
var TextInput = React.createClass({
componentDidMount: function() {
// If there is a tooltip, attach to input box; show on focus.
if (this.props.tooltip) {
Helpers.$React(this.refs.input).tooltip({trigger:'focus'});
}
},
handleChange: function(e) {
// Attach field name to event for parent reference.
e.updateMap = {};
e.updateMap[this.props.field] = e.target.value;
},
/**
* @param props.id Unique html `id`
* @param props.label Label displayed above input box
* @param props.tooltip Helper text for popup tooltip
* @param props.value Value passed in from model state
*/
render: function() {
var value = this.props.model[this.props.field];
return (
<div className="form-group">
<label htmlFor={this.props.id}>{this.props.label}</label>
<input disabled={this.props.readonly} onChange={this.handleChange} className="form-control" data-placement="bottom" title={this.props.tooltip} id={this.props.id} value={value} ref="input"/>
</div>
);
}
});
var DateInput = React.createClass({
componentDidMount: function() {
// Bind the bootstrap datetimepicker.
var node = Helpers.$React(this.refs.dateinput);
node.datetimepicker({format: dateFormat.DISPLAY});
// Wire change event on DTP to trigger component change.
node.on('dp.change', function(e) {
// Manually calling change event.
this.handleChange(e);
}.bind(this));
},
handleChange: function(e) {
// Attach field name to event for parent reference.
// Reformat date to state/server format.
e.updateMap = {};
e.updateMap[this.props.field] = moment(e.target.value,
dateFormat.DISPLAY).format(dateFormat.SERVER);
// Native events do not bubble up the React v-DOM.
// Manually call parent update.
this.props.updateModel(e.updateMap);
},
formatDate: function(dt) {
// Parse date using server formatting, reformat for display.
return moment(dt, dateFormat.SERVER).format(dateFormat.DISPLAY);
},
/**
* @param props.id Unique html `id`
* @param props.label Label displayed above input box
* @param props.tooltip Helper text for popup tooltip
* @param props.value Value passed in from model state
*/
render: function() {
var value = this.props.model[this.props.field];
return (
<div className="form-group">
<label htmlFor={this.props.id}>{this.props.label}</label>
<input onChange={this.handleChange} className="form-control" data-placement="bottom" title={this.props.tooltip} id={this.props.id} value={this.formatDate(value)} disabled={this.props.readonly} ref="dateinput"/>
</div>
);
}
});
var SelectInput = React.createClass({
handleChange: function(e) {
// Attach field name to event for parent reference.
e.updateMap = {};
e.updateMap[this.props.field] = e.target.value;
},
componentDidMount: function() {
Helpers.$React(this.refs.select).tooltip({trigger: 'focus'});
},
render: function() {
var value = this.props.model[this.props.field];
var opts = this.props.options.map(function(o) {
return <option value={o.value} key={o.value}>{o.label}</option>
});
return (
<div className="form-group">
<label htmlFor={this.props.id}>{this.props.label}</label>
<select className="form-control" data-placement="bottom" title={this.props.tooltip} onChange={this.handleChange} id={this.props.id} value={value} disabled={this.props.readonly}>
{opts}
</select>
</div>
);
}
});
var MarkdownInput = React.createClass({
getInitialState: function() {
return {renderMarkdown: false}
},
handleToggle: function() {
this.setState({renderMarkdown: !this.state.renderMarkdown});
},
handleChange: function(e) {
// Attach field name to event for parent reference.
e.updateMap = {};
e.updateMap[this.props.field] = e.target.value;
},
componentDidMount: function() {
Helpers.$React(this.refs.markdownButton).toggle(!this.props.readonly);
},
componentDidUpdate: function() {
Helpers.$React(this.refs.markdownButton).toggle(!this.props.readonly);
},
markdownToHtml: function(markedText) {
var reader = new commonmark.Parser();
var writer = new commonmark.HtmlRenderer();
var parsed = reader.parse(markedText);
var result = writer.render(parsed);
return result;
},
render: function() {
var value = this.props.model[this.props.field];
// If the markdown button is toggled, switch between rendered and input
// modes. If we're in readonly mode, only show rendered and no button.
var el;
var buttonType;
if (this.props.readonly || this.state.renderMarkdown) {
var html = this.markdownToHtml(value);
el = <div className="form-group" dangerouslySetInnerHTML={{__html: html}}></div>
buttonType = 'btn btn-sm btn-default';
} else {
el = <textarea onChange={this.handleChange} className="form-control" value={value} rows="14"/>
buttonType = 'btn btn-sm btn-primary';
}
//` Ad-hoc css.
return (
<div style={{height: '28em', overflow: 'auto'}}>
<div>
<label>{this.props.label}</label>
</div>
<div ref="markdownButton" className="form-group">
<button onClick={this.handleToggle} className={buttonType}>
<span className="glyphicon glyphicon-cog"></span> markdown
</button>
</div>
<div className="form-group">
{el}
</div>
</div>
);
}
});
/**
* Total width: col-md-4
*/
var ButtonArray = React.createClass({
render: function() {
return this.props.editMode ? (
<div className="row">
<div className="col-md-2 form-group">
<button onClick={this.props.handleSave} id="saveForm" className="btn btn-default btn-primary">
<span className="glyphicon glyphicon-save"></span> Save
</button>
</div>
<div className="col-md-2 form-group">
<button onClick={this.props.handleCancel} id="cancelForm" className="btn btn-default">
<span className="glyphicon glyphicon-remove"></span> Cancel
</button>
</div>
</div>
) : (
<div className="row">
<div className="col-md-2 col-md-offset-2 form-group">
<button onClick={this.props.handleEdit} id="editForm" className="btn btn-default">
<span className="glyphicon glyphicon-edit"></span> Edit
</button>
</div>
</div>
);
}
});
var HealthrecInputGroup = React.createClass({
onChange: function(e) {
// Requires field value set by child event.
if (typeof e.updateMap === 'undefined') {
konsole.warn(null, 'e.updateMap was not set by child component.');
return;
}
this.props.updateModel(e.updateMap);
},
selectOptionalFields: function(model, readonly) {
// This table determines which fields to render based on which
// RecordType was selected.
//
// 'RecordType': [Measurement, MedicationName, MedicationUrl, Symptom]
var renderArray = {
'Symptom': [false, false, false, true],
'Temperature': [true, false, false, false],
'Medication': [true, true, true, false]
}[model.RecordType];
var optionalFields = [
<TextInput id="MeasurementId"
ref="Measurement"
label="Measurement"
tooltip="Enter measurement with units"
readonly={readonly}
key="Measurement"
field="Measurement"
model={model}/>,
<TextInput id="MedicationNameId"
ref="MedicationName"
label="Medication Name"
tooltip="Medication name"
readonly={readonly}
key="MedicationName"
field="MedicationName"
model={model}/>,
<TextInput id="MedicationUrlId"
ref="MedicationUrl"
label="Medication Link"
tooltip="Provide url/link to drugs.com"
readonly={readonly}
key="MedicationUrl"
field="MedicationUrl"
model={model}/>,
<TextInput id="SymptomId"
ref="Symptom"
label="Symptom"
tooltip="Describe any symptoms"
readonly={readonly}
key="Symptom"
field="Symptom"
model={model}/>
];
// Select only the fields corresponding marked to render.
var fieldsToRender = _.filter(optionalFields, function(_ignore, idx) {
return renderArray[idx];
});
return fieldsToRender;
},
render: function() {
var model = this.props.healthrec;
var readonly = !this.props.editMode;
var optionalFields = this.selectOptionalFields(model, readonly);
// id: unique DOM id.
// field: name of field within model.
// label: UI visible label.
return (
<div onChange={this.onChange}>
<div className="col-md-4">
<DateInput id="DateActionId"
label="Date of action"
updateModel={this.props.updateModel}
readonly={readonly}
field="DateAction"
model={model}/>
<SelectInput id="PatientId"
label="Patient Name"
options={this.props.patients}
readonly={readonly}
field="Patient"
model={model}/>
<SelectInput id="RecordTypeId"
label="Record Type"
tooltip="Select record type"
options={this.props.recordTypes}
readonly={readonly}
field="RecordType"
model={model}/>
{optionalFields}
</div>
<div className="col-md-5">
<MarkdownInput id="NoteId"
label="Additional Notes"
readonly={readonly}
field="Note"
model={model}/>
<ButtonArray editMode={!readonly} handleEdit={this.props.handleEdit} handleCancel={this.props.handleCancel} handleSave={this.props.handleSave}/>
</div>
</div>
);
}
});
/**
* @description HealthrecForm maintains model state, pushes updates to children,
* calls data manager for fetch/save.
*/
var HealthrecForm = React.createClass({
// Local interface for external objects loaded here, to keep direct
// references to a mininum; common libraries permitted of course (i.e.,
// jQuery, lodash, obviously React).
//
// Stubs imply known used values. Should be private and loaded through a
// constructor but ... well ... javascript :/
ext: {
// This object should implement the DataManager methods/callbacks.
dataManager: null,
// Record id, null if new record.
id: null,
// Id of record to be copied, if exists.
copyId: null,
// Base URL.
currentPath: null,
// Canceled creates will return back to home.
parentPath: null,
patients: [
{value: 'Martin', label: 'Martin'},
{value: 'Donald', label: 'Donald'},
{value: 'Liz', label: 'Liz'},
{value: 'Whistler', label: 'Whistler'},
{value: 'Mother', label: 'Mother'},
{value: 'Carl', label: 'Carl'}
],
recordTypes: [
{value: 'Symptom', label: 'Symptom'},
{value: 'Medication', label: 'Medication'},
{value: 'Temperature', label: 'Temperature'}
]
},
componentWillMount: function() {
// Welp, gonna use this as my constructor till I know better...
var args = _.pick(this.props.args, ['dataManager', 'id', 'copyId',
'currentPath', 'parentPath']);
_.extend(this.ext, args);
},
// Cache of model for aborted edits.
serverModel: null,
getInitialState: function() {
return {PageBusy: true, EditMode: false, Id: null, Model: {
Patient: this.ext.patients[0].value,
DateAction: moment().format(dateFormat.SERVER),
RecordType: this.ext.recordTypes[0].value,
Symptom: '',
Note: '',
MedicationName: '',
MedicationUrl: '',
Measurement: ''
}};
},
updateModel: function(updateMap){
Helpers.updateState.call(this, {Model: {$merge: updateMap}});
},
handleSave: function() {
// Put page in freeze mode before going async.
Helpers.updateState.call(this, {EditMode: {$set: false}});
statusBox.busy(' Saving...', true);
var model = this.state.Model;
var id = this.state.Id;
this.ext.dataManager.save(model, id, function(err, result) {
if (err != null) {
statusBox.warning(err.message);
statusBox.display();
return;
}
// If data manager signals a fresh record, reload page.
if (result.isNewRecord) {
// Store this message for later display.
statusBox.success('Record created.');
// Incur full page refresh to properly set URL; fudging with it
// manually is unstable.
location.href = this.ext.currentPath + result.Id;
return;
}
var newState = _.pick(result, ['Id', 'Model']);
Helpers.updateState.call(this, {$merge: newState});
statusBox.success('Record saved.');
statusBox.display();
}.bind(this));
},
handleEdit: function() {
// Cache deep copy of model in case of revert.
this.serverModel = _.clone(this.state.Model, true);
var newState = {PageBusy: false, EditMode: true};
Helpers.updateState.call(this, {$merge: newState});
},
handleCancel: function() {
// For canceled saves, revert record from cache.
if (this.state.Id !== null) {
Helpers.updateState.call(this, {$merge: {EditMode: false, Model:
this.serverModel}});
statusBox.info('Save canceled; original values restored.');
statusBox.display();
return;
}
// For canceled new records/copies, return to caller (usually home).
statusBox.info('Record creation canceled.');
location.href = this.ext.parentPath;
},
componentDidMount: function() {
// PageBusy suppresses rendering to prevent intermittent updates from
// causing multiple ui flashes.
Helpers.updateState.call(this, {PageBusy: {$set: true}});
statusBox.busy(' Loading...', true);
// Fetch record from server.
var id = this.ext.id || this.ext.copyId;
if (id === null) {
// Use initial state for new record.
statusBox.info('New record.');
statusBox.display();
this.handleEdit();
return;
}
this.ext.dataManager.get(id, function(err, result){
if (err !== null) {
statusBox.warning(err.message);
statusBox.display();
return;
}
// Found a copyId, treat as new record.
if (this.ext.copyId !== null) {
// Don't copy over Date, overwrite with today.
result.Model.DateAction = moment().format(dateFormat.SERVER);
var newState = {PageBusy: false, EditMode: true, Id: null,
Model: result.Model};
Helpers.updateState.call(this, {$merge: newState});
statusBox.info('Information copied into new record.');
statusBox.display();
return;
}
var newState = {PageBusy: false, EditMode: false, Id: result.Id,
Model: result.Model};
Helpers.updateState.call(this, {$merge: newState});
// Could have incurred a reload from record creation, so check
// for existing message first.
if (statusBox.hasMessage()) {
statusBox.display();
} else {
statusBox.clear();
}
}.bind(this));
},
render: function() {
var mode;
if (!this.state.EditMode) {
mode = 'Record Detail';
} else if (this.ext.id === null) {
mode = 'Create New Record';
} else {
mode = 'Edit Record';
}
return this.state.PageBusy ? null : (
<div className="panel panel-default">
<div className="panel-heading">
<h2 className="panel-title">{mode}</h2>
</div>
<div className="panel-body">
<div className="row">
<HealthrecInputGroup updateModel={this.updateModel} healthrec={this.state.Model} editMode={this.state.EditMode} handleEdit={this.handleEdit} handleCancel={this.handleCancel} handleSave={this.handleSave} ref="inputGroup" patients={this.ext.patients} recordTypes={this.ext.recordTypes}/>
</div>
</div>
</div>
);
}
});