diff --git a/app/src/frontend/building-edit.js b/app/src/frontend/building-edit.js index c0cb3926..f7a58b51 100644 --- a/app/src/frontend/building-edit.js +++ b/app/src/frontend/building-edit.js @@ -55,8 +55,15 @@ class EditForm extends Component { this.handleChange = this.handleChange.bind(this); this.handleLike = this.handleLike.bind(this); this.handleSubmit = this.handleSubmit.bind(this); + this.handleUpdate = this.handleUpdate.bind(this); } + /** + * Handle changes on typical inputs + * - e.g. input[type=text], radio, select, textare + * + * @param {DocumentEvent} event + */ handleChange(event) { const target = event.target; let value = (target.value === '')? null : target.value; @@ -72,6 +79,25 @@ class EditForm extends Component { }); } + /** + * Handle update directly + * - e.g. as callback from MultiTextInput where we set a list of strings + * + * @param {String} key + * @param {*} value + */ + handleUpdate(key, value) { + this.setState({ + [key]: value + }); + } + + /** + * Handle likes separately + * - like/love reaction is limited to set/unset per user + * + * @param {DocumentEvent} event + */ handleLike(event) { event.preventDefault(); @@ -160,29 +186,28 @@ class EditForm extends Component { { this.props.fields.map((props) => { - var el; switch (props.type) { case "text": - el = - break; case "text_list": - el = + case "text_long": + return - break; case "number": - el = + case "text_multi": + return - break; case "like": - el = - break; default: - el = null - break; + return null } - return el }) } @@ -219,6 +244,87 @@ const TextInput = (props) => ( ); +const LongTextInput = (props) => ( + + +) + + +class MultiTextInput extends Component { + constructor(props) { + super(props); + this.edit = this.edit.bind(this); + this.add = this.add.bind(this); + this.remove = this.remove.bind(this); + this.getValues = this.getValues.bind(this); + } + + getValues() { + return (this.props.value && this.props.value.length)? this.props.value : [null]; + } + + edit(event) { + const edit_i = +event.target.dataset.index; + const edit_item = event.target.value; + const old_values = this.getValues(); + const values = old_values.map((item, i) => { + return i === edit_i ? edit_item : item; + }); + this.props.handleChange(this.props.slug, values); + } + + add(event) { + event.preventDefault(); + const values = this.getValues().concat(""); + this.props.handleChange(this.props.slug, values); + } + + remove(event){ + const remove_i = +event.target.dataset.index; + const values = this.getValues().filter((_, i) => { + return i !== remove_i; + }); + this.props.handleChange(this.props.slug, values); + } + + render() { + const values = this.getValues(); + return ( + + + ) + } +} + const TextListInput = (props) => (