From 09c92616770cadd6aaedde05fccd429b0412e185 Mon Sep 17 00:00:00 2001
From: Maciej Ziarkowski <maciej.ziarkowski@gmail.com>
Date: Thu, 9 Jan 2020 19:43:59 +0000
Subject: [PATCH] Improve multi-data-entry UI

The "No entries" state is now contained in a dashed-border box
Adding an empty entry is not not possible
---
 .../multi-data-entry/multi-data-entry.css     |  5 ++++
 .../multi-data-entry.tsx                      | 23 ++++++++++++-------
 .../frontend/building/data-containers/age.tsx |  2 +-
 .../frontend/building/data-containers/use.tsx |  2 +-
 4 files changed, 22 insertions(+), 10 deletions(-)
 create mode 100644 app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.css
 rename app/src/frontend/building/data-components/{ => multi-data-entry}/multi-data-entry.tsx (86%)

diff --git a/app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.css b/app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.css
new file mode 100644
index 00000000..e18692e7
--- /dev/null
+++ b/app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.css
@@ -0,0 +1,5 @@
+.input-group .no-entries {
+    border-style: dashed;
+    border-color: #aaa;
+    margin-bottom: 0.4em;
+}
\ No newline at end of file
diff --git a/app/src/frontend/building/data-components/multi-data-entry.tsx b/app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.tsx
similarity index 86%
rename from app/src/frontend/building/data-components/multi-data-entry.tsx
rename to app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.tsx
index 29db6330..c2b30583 100644
--- a/app/src/frontend/building/data-components/multi-data-entry.tsx
+++ b/app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.tsx
@@ -1,8 +1,10 @@
 import React, { Component, Fragment } from 'react';
 
-import { BaseDataEntryProps } from './data-entry';
-import { DataEntryInput, TextDataEntryInputProps } from './data-entry-input';
-import { DataTitleCopyable } from './data-title';
+import './multi-data-entry.css';
+
+import { BaseDataEntryProps } from '../data-entry';
+import { DataEntryInput, TextDataEntryInputProps } from '../data-entry-input';
+import { DataTitleCopyable } from '../data-title';
 
 
 interface MultiDataEntryProps extends BaseDataEntryProps, TextDataEntryInputProps {
@@ -18,7 +20,7 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
     constructor(props) {
         super(props);
         this.state = {
-            newValue: ''
+            newValue: null
         };
         
         this.setNewValue = this.setNewValue.bind(this);
@@ -47,6 +49,7 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
     }
     addNew(event) {
         event.preventDefault();
+        if (this.state.newValue == undefined) return;
         const values = this.cloneValues().concat(this.state.newValue);
         this.setState({newValue: ''});
         this.props.onChange(this.props.slug, values);
@@ -73,7 +76,9 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
                 <ul className="data-link-list">
                 {
                     values.length === 0 &&
-                    <div>No entries</div>
+                    <div className="input-group">
+                        <input className="form-control no-entries" type="text" value="No entries" disabled={true} />
+                    </div>
                 }
                 {
                     values.map((val, i) => (
@@ -87,7 +92,6 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
                                 onChange={(key, val) => this.edit(i, val)}
 
                                 maxLength={props.maxLength}
-                                placeholder={props.placeholder}
                                 valueTransform={props.valueTransform}
                                 autofill={props.autofill}
                             />
@@ -120,9 +124,12 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
                             autofill={props.autofill}
                         />
                         <div className="input-group-append">
-                            <button type="button" onClick={this.addNew}
+                            <button type="button"
+                                className="btn btn-outline-dark"
                                 title="Add to list"
-                                className="btn btn-outline-dark">+</button>
+                                onClick={this.addNew}
+                                disabled={this.state.newValue == undefined}
+                            >+</button>
                         </div>
                     </div>
                 }
diff --git a/app/src/frontend/building/data-containers/age.tsx b/app/src/frontend/building/data-containers/age.tsx
index 1be202d7..61d03e0a 100644
--- a/app/src/frontend/building/data-containers/age.tsx
+++ b/app/src/frontend/building/data-containers/age.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 
 import { dataFields } from '../../data_fields';
-import MultiDataEntry from '../data-components/multi-data-entry';
+import MultiDataEntry from '../data-components/multi-data-entry/multi-data-entry';
 import NumericDataEntry from '../data-components/numeric-data-entry';
 import SelectDataEntry from '../data-components/select-data-entry';
 import TextboxDataEntry from '../data-components/textbox-data-entry';
diff --git a/app/src/frontend/building/data-containers/use.tsx b/app/src/frontend/building/data-containers/use.tsx
index 67f292d3..7956f9ab 100644
--- a/app/src/frontend/building/data-containers/use.tsx
+++ b/app/src/frontend/building/data-containers/use.tsx
@@ -3,7 +3,7 @@ import React, { Fragment } from 'react';
 import InfoBox from '../../components/info-box';
 import { dataFields } from '../../data_fields';
 import DataEntry from '../data-components/data-entry';
-import MultiDataEntry from '../data-components/multi-data-entry';
+import MultiDataEntry from '../data-components/multi-data-entry/multi-data-entry';
 import withCopyEdit from '../data-container';
 
 import { CategoryViewProps } from './category-view-props';