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 (
+
+
+ {
+ values.map((item, i) => (
+
+ ))
+ }
+
+
+ )
+ }
+}
+
const TextListInput = (props) => (
diff --git a/app/src/frontend/fields-config.json b/app/src/frontend/fields-config.json
index d8d5a69c..85ae0faa 100644
--- a/app/src/frontend/fields-config.json
+++ b/app/src/frontend/fields-config.json
@@ -83,6 +83,15 @@
"Other website",
"Other"
]
+ },
+ {
+ "title": "Source details", "slug": "date_source_detail", "type": "text_long",
+ "tooltip": "References for date source (max 500 characters)"
+ },
+ {
+ "title": "Text and Image Links", "slug": "date_link", "type": "text_multi",
+ "placeholder": "https://...",
+ "tooltip": "URL for age and date reference"
}
]
},
diff --git a/app/src/frontend/sidebar.css b/app/src/frontend/sidebar.css
index 39bff96e..a31e77fd 100644
--- a/app/src/frontend/sidebar.css
+++ b/app/src/frontend/sidebar.css
@@ -255,6 +255,11 @@
font-weight: normal;
color: #555;
}
+.data-section input,
+.data-section textarea,
+.data-section select {
+ margin: 0 0 0.5em 0;
+}
.data-list dd {
margin: 0 0 0.5rem;
line-height: 1.5;
diff --git a/app/src/frontend/styles/forms.css b/app/src/frontend/styles/forms.css
index b5e0a2c2..9796cb6d 100644
--- a/app/src/frontend/styles/forms.css
+++ b/app/src/frontend/styles/forms.css
@@ -33,7 +33,7 @@ label {
margin-right: 0.25rem;
}
form .btn {
- margin-top: 1em;
+ margin-bottom: 0.25rem;
}
.buttons-container.btn-center {
margin-right: 0;