Reorganise multi data entry

app/src/frontend/building/data-components/multi-data-entry.tsx

@@ -50,16 +50,16 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
         this.props.onChange(this.props.slug, values);
     }
 
-    remove(event){
+    remove(index: number){
-        const removeIndex = +event.target.dataset.index;
         const values = this.getValues();
-        values.splice(removeIndex, 1);
+        values.splice(index, 1);
         this.props.onChange(this.props.slug, values);
     }
 
     render() {
         const values = this.getValues();
         const props = this.props;
+        const isDisabled = props.mode === 'view' || props.disabled;
         return <Fragment>
             <DataTitleCopyable
                 slug={props.slug}
@@ -67,41 +67,38 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
                 tooltip={props.tooltip}
                 disabled={props.disabled || props.value == undefined || props.value.length === 0}
             />
-            {
-                (props.mode === 'view')?
-                    (props.value && props.value.length)?
             <ul className="data-link-list">
             {
-                            props.value.map((item, index) => {
+                values.length === 0 &&
-                                return <li
+                <div>No elements</div>
-                                    key={index}
-                                    className="form-control">
-                                    <a href={sanitiseURL(item)}>{item}</a>
-                                </li>;
-                            })
             }
-                        </ul>
+            {
-                    :'\u00A0'
+                values.map((val, i) => (
-                : <>
+                    <li className="input-group" key={i}>
-                    {values.map((val, i) => (
-                        <div className="input-group" key={i}>
                         <TextDataEntryInput
                             slug={`${props.slug}-${i}`}
                             value={val}
-                                disabled={props.disabled}
+                            disabled={isDisabled}
                             onChange={(key, val) => this.edit(i, val)}
 
                             maxLength={props.maxLength}
                             placeholder={props.placeholder}
                             valueTransform={props.valueTransform}
                         />
+                        {
+                            !isDisabled &&
                             <div className="input-group-append">
-                                <button type="button" onClick={this.remove}
+                                <button type="button" onClick={e => this.remove(i)}
                                     title="Remove"
                                     data-index={i} className="btn btn-outline-dark">✕</button>
                             </div>
-                        </div>
+                        }
-                    ))}
+                    </li>
+                ))
+            }
+            </ul>
+            {
+                !isDisabled &&
                 <div className="input-group">
                     <TextDataEntryInput 
                         slug='new'
@@ -119,7 +116,6 @@ class MultiDataEntry extends Component<MultiDataEntryProps, MultiDataEntryState>
                             className="btn btn-outline-dark">Add to list</button>
                     </div>
                 </div>
-                </>
             }
         </Fragment>;
     }