From 27b7b72a576f1e47dcfee4ca499b900a6e5ac4d7 Mon Sep 17 00:00:00 2001
From: Maciej Ziarkowski <maciej.ziarkowski@gmail.com>
Date: Tue, 16 Mar 2021 19:02:11 +0000
Subject: [PATCH] Improve data netry list UI for new entry

---
 .../multi-data-entry/multi-data-entry.tsx     | 95 +++++++++++--------
 .../dynamics/dynamics-data-entry.tsx          |  5 +-
 app/src/frontend/building/sidebar.css         |  8 +-
 app/src/frontend/styles/forms.css             |  4 +-
 4 files changed, 64 insertions(+), 48 deletions(-)

diff --git a/app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.tsx b/app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.tsx
index 3614e642..50e38742 100644
--- a/app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.tsx
+++ b/app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.tsx
@@ -5,6 +5,7 @@ import './multi-data-entry.css';
 import { BaseDataEntryProps } from '../data-entry';
 import { DataEntryInput, TextDataEntryInputProps } from '../data-entry-input';
 import { DataTitleCopyable } from '../data-title';
+import { CloseIcon, SaveIcon } from '../../../components/icons';
 
 interface MultiDataEntryProps extends BaseDataEntryProps, TextDataEntryInputProps {
     value: string[];
@@ -42,6 +43,9 @@ export const MultiDataEntry: React.FC<MultiDataEntryProps> = ({
         props.onChange(props.slug, editedValues);
     }, [newValue, values, props.onChange, props.slug]);
 
+    const clearNew = useCallback(() => {
+        setNewValue(null);
+    }, []);
 
     const remove = useCallback((index: number) => {
         const editedValues = values.slice();
@@ -65,13 +69,13 @@ export const MultiDataEntry: React.FC<MultiDataEntryProps> = ({
             copy={copyable ? props.copy : undefined}
         />
         <div id={`${props.slug}-wrapper`}>
-            <ul className="data-link-list">
-                {
-                    values.length === 0 && !isEditing &&
-                    <div className="input-group">
-                        <input className="form-control no-entries" type="text" value="No entries" disabled={true} />
-                    </div>
-                }
+            {
+                values.length === 0 && !isEditing &&
+                <div className="input-group">
+                    <input className="form-control no-entries" type="text" value="No entries" disabled={true} />
+                </div>
+            }
+            <ul className="data-entry-list">
                 {
                     values.map((val, i) => (
                         <li className="input-group" key={i /* i as key prevents input component recreation on edit */}>
@@ -95,46 +99,55 @@ export const MultiDataEntry: React.FC<MultiDataEntryProps> = ({
                                 <div className="input-group-append">
                                     <button type="button" onClick={() => remove(i)}
                                         title="Remove"
-                                        data-index={i} className="btn btn-outline-dark">✕</button>
+                                        data-index={i} className="btn btn-outline-dark data-entry-list-button"><CloseIcon /></button>
                                 </div>
                             }
                         </li>
                     ))
                 }
+                {
+                    !isDisabled &&
+                        <li className="input-group">
+                            <DataEntryInput
+                                slug={props.slug}
+                                name={slugWithModifier}
+                                id={slugWithModifier}
+                                value={newValue}
+                                disabled={props.disabled}
+                                required={props.required && values.length < 1}
+                                onChange={(_key, val) => setNewValue(val)}
+                                onConfirm={(_key, val) => addNew(val)}
+
+                                maxLength={props.maxLength}
+                                placeholder={props.placeholder}
+                                isUrl={props.isUrl}
+                                valueTransform={props.valueTransform}
+                                confirmOnEnter={confirmOnEnter}
+
+                                autofill={props.autofill}
+                                showAllOptionsOnEmpty={props.showAllOptionsOnEmpty}
+                                confirmOnAutofillSelect={true}
+                            />
+                            {
+                                newValue != undefined &&
+                                    <>
+                                        <div className="input-group-append">
+                                            <button type="button"
+                                                className="btn btn-primary data-entry-list-button"
+                                                title="Confirm new value"
+                                                onClick={() => addNew()}
+                                            ><SaveIcon /></button>
+                                        </div>
+                                        <div className="input-group-append">
+                                            <button type="button" onClick={() => clearNew()}
+                                                title="Clear new value"
+                                                className="btn btn-warning data-entry-list-button"><CloseIcon /></button>
+                                        </div>
+                                    </>
+                            }
+                        </li>
+                }
             </ul>
-            {
-                !isDisabled &&
-                    <div className="input-group">
-                        <DataEntryInput
-                            slug={props.slug}
-                            name={slugWithModifier}
-                            id={slugWithModifier}
-                            value={newValue}
-                            disabled={props.disabled}
-                            required={props.required && values.length < 1}
-                            onChange={(_key, val) => setNewValue(val)}
-                            onConfirm={(_key, val) => addNew(val)}
-
-                            maxLength={props.maxLength}
-                            placeholder={props.placeholder}
-                            isUrl={props.isUrl}
-                            valueTransform={props.valueTransform}
-                            confirmOnEnter={confirmOnEnter}
-
-                            autofill={props.autofill}
-                            showAllOptionsOnEmpty={props.showAllOptionsOnEmpty}
-                            confirmOnAutofillSelect={true}
-                        />
-                        <div className="input-group-append">
-                            <button type="button"
-                                className="btn btn-outline-dark"
-                                title="Add to list"
-                                onClick={() => addNew()}
-                                disabled={newValue == undefined}
-                            >+</button>
-                        </div>
-                    </div>
-            }
         </div>
     </>)
 };
diff --git a/app/src/frontend/building/data-containers/dynamics/dynamics-data-entry.tsx b/app/src/frontend/building/data-containers/dynamics/dynamics-data-entry.tsx
index 193ee940..53e7d780 100644
--- a/app/src/frontend/building/data-containers/dynamics/dynamics-data-entry.tsx
+++ b/app/src/frontend/building/data-containers/dynamics/dynamics-data-entry.tsx
@@ -10,6 +10,7 @@ import { MultiDataEntry } from '../../data-components/multi-data-entry/multi-dat
 import { NumberRangeDataEntry } from './number-range-data-entry';
 
 import './dynamics-data-entry.css';
+import { CloseIcon } from '../../../components/icons';
 
 type DemolishedBuilding = (BuildingAttributes['demolished_buildings'][number]);
 
@@ -211,7 +212,7 @@ export const DynamicsDataEntry: React.FC<DynamicsDataEntryProps> = (props) => {
                             <label>Please supply sources for any edits of existing records</label>
                         </>
                 }
-                <ul className="data-link-list">
+                <ul className="data-entry-list">
                     {
                         values.length === 0 &&
                         <div className="input-group">
@@ -229,7 +230,7 @@ export const DynamicsDataEntry: React.FC<DynamicsDataEntryProps> = (props) => {
                                                 title="Delete Record"
                                                 onClick={() => remove(id)}
                                                 data-index={id}
-                                            >x</button>
+                                            ><CloseIcon /></button>
                                     }
                                     <DynamicsDataRow
                                         value={pastBuilding}
diff --git a/app/src/frontend/building/sidebar.css b/app/src/frontend/building/sidebar.css
index 037f294d..929dc904 100644
--- a/app/src/frontend/building/sidebar.css
+++ b/app/src/frontend/building/sidebar.css
@@ -162,13 +162,17 @@
     list-style: none;
     padding-left: 0;
 }
-.data-section .data-link-list {
+.data-section .data-entry-list {
     padding: 0;
     list-style: none;
     margin-bottom: 0;
     margin-top: 0.5rem;
 }
-.data-link-list li {
+.data-entry-list li {
     border-color: #6c757d;
     border-radius: 0;
 }
+
+.data-entry-list-button {
+    width: 2.5em;
+}
\ No newline at end of file
diff --git a/app/src/frontend/styles/forms.css b/app/src/frontend/styles/forms.css
index d601573e..e982d29b 100644
--- a/app/src/frontend/styles/forms.css
+++ b/app/src/frontend/styles/forms.css
@@ -43,9 +43,7 @@ label {
     margin-bottom: 0.25rem;
     margin-right: 0.25rem;
 }
-form .btn {
-    margin-bottom: 0.25rem;
-}
+
 .buttons-container.btn-center {
     margin-right: 0;
     text-align: center;