Skip to content

Instantly share code, notes, and snippets.

@Siyfion
Last active November 10, 2015 17:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Siyfion/f252a6daef3c735b7767 to your computer and use it in GitHub Desktop.
Save Siyfion/f252a6daef3c735b7767 to your computer and use it in GitHub Desktop.
EditPrintList = React.createClass({
mixins: [ReactMeteorData],
getMeteorData() {
let data = {},
printListHandle = Meteor.subscribe('print-lists', [FlowRouter.getParam('listId')], () => {
let printList = PrintLists.findOne({ _id: FlowRouter.getParam('listId') });
this.setState({
selectedLabel: printList.label
});
}),
labelsHandle = Meteor.subscribe('labels'),
templatesHandle = Meteor.subscribe('templates-for-label', this.state.selectedLabel);
data.isLoading = !printListHandle.ready() || !labelsHandle.ready();
data.printList = PrintLists.findOne({ _id: FlowRouter.getParam('listId') });
data.labels = Labels.find({}).fetch();
data.templates = Templates.find({ label: this.state.selectedLabel }).fetch();
return data;
},
getInitialState() {
return {
selectedLabel: null
};
},
componentDidMount() {
Modules.client.editPrintList({ form: '#editPrintList' });
},
handleSubmit(event) {
event.preventDefault();
},
labelSelected(event) {
let labelId = event.target.value;
this.setState({
selectedLabel: labelId
});
},
renderLabelList() {
return this.data.labels.map((label) => {
return <option key={label._id} value={label._id}>{label.name}</option>;
});
},
renderTemplateList() {
return this.data.templates.map((template) => {
return <option key={template._id} value={template._id}>{template.name}</option>;
});
},
render() {
let renderForm = () => {
if (this.data.isLoading) {
return <Loading />;
} else {
return (
<div>
<div className="form-group">
<label className="col-sm-2 control-label" htmlFor="name">Name</label>
<div className="col-sm-8">
<input type="text" className="form-control" name="name" id="name"
defaultValue={this.data.printList.name}/>
</div>
</div>
<div className="form-group">
<label className="col-sm-2 control-label" htmlFor="label">Label</label>
<div className="col-sm-8">
<select className="form-control" name="label" id="label" onChange={this.labelSelected}
defaultValue={this.data.printList.label}>
{this.renderLabelList()}
</select>
</div>
<div className="col-sm-2">
<button className="btn btn-block btn-planglow-pink" type="button">Choose Label</button>
</div>
</div>
<div className="form-group">
<label className="col-sm-2 control-label" htmlFor="template">Default Template</label>
<div className="col-sm-8">
<select className="form-control" name="template" id="template"
defaultValue={this.data.printList.template}>
{this.renderTemplateList()}
</select>
</div>
<div className="col-sm-2">
<button className="btn btn-block btn-planglow-pink" type="button">Choose Template</button>
</div>
</div>
<div className="form-group">
<div className="col-sm-8 col-sm-offset-2">
<div className="checkbox">
<label>
<input id="override" name="override" type="checkbox"/>
Override existing template choices
</label>
</div>
</div>
</div>
<div className="form-group">
<div className="col-sm-offset-2 col-sm-8">
<input type="submit" className="btn btn-primary" value="Save"/>
</div>
</div>
</div>
)
}
};
return (
<div>
<div className="row">
<div className="col-lg-12">
<h1 className="page-header">
Edit Print List
</h1>
</div>
</div>
<form id="editPrintList" className="form-horizontal" onSubmit={this.handleSubmit}>
{renderForm()}
</form>
</div>
);
}
});
@Siyfion
Copy link
Author

Siyfion commented Nov 10, 2015

Realised that the jQuery Validation needed to be able to find the

immediately, hence the new renderForm() function.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment