Portal list configuration

src/containers/Configuration/Configuration.js

@@ -86,15 +86,19 @@ class Configuration extends IPCContainer {
     const itemList = Object
       .keys(config)
       .map(key => {
-        return {
+        const ret = {
           advanced: template[key] ? template[key].advanced : false,
           hide_remote: template[key] ? template[key].hide_remote : false,
           label: key,
           remote: template[key] ? template[key].remote : false,
+          type: template[key] ? template[key].type : null,
           value: (template[key] && (template[key].type === 'object')) ?
+            config[key] :
+            (template[key] && (template[key].type === 'string_array')) ?
               config[key] :
               config[key].toString(),
         };
+        return ret;
       })
       .filter(i=> {
         let ret = template[i.label];
@@ -114,7 +118,7 @@ class Configuration extends IPCContainer {
     const itemList = [
       ...this.state.ItemList
     ];
-    itemList[idx].value = target.value.toString();
+    itemList[idx].value = target.type === 'textarea' ? target.string_array : target.value.toString();
     this.setState({
       ItemList: itemList
     });
@@ -128,7 +132,7 @@ class Configuration extends IPCContainer {
       ...this.state.ObjectLookup,
     };
 
-    itemList[idx].value = target.value.toString();
+    itemList[idx].value = target.type === 'textarea' ? target.string_array : target.value.toString();
     objectLookup[name] = itemList;
     this.setState({
       ObjectLookup: objectLookup,
@@ -203,7 +207,9 @@ class Configuration extends IPCContainer {
       for (const item of this.state.ChangedItems) {
         changedItems.push({
           Name: item.label,
-          Value: item.value,
+          Value: item.type === 'string_array' ?
+            item.value.join(';') :
+            item.value,
         });
       }
 
@@ -212,7 +218,9 @@ class Configuration extends IPCContainer {
           for (const item of this.state.ChangedObjectLookup[key]) {
             changedItems.push({
               Name: key + '.' + item.label,
-              Value: item.value,
+              Value: item.type === 'string_array' ?
+                item.value.join(';') :
+                item.value,
             });
           }
         }

src/containers/Configuration/ConfigurationItem/ConfigurationItem.css

@@ -16,6 +16,23 @@ input.ConfigurationItemInput {
   box-sizing: border-box;
 }
 
+textarea.ConfigurationItemInput {
+  display: block;
+  margin: 0;
+  padding: 2px;
+  border-radius: var(--border_radius);
+  background: rgba(160, 160, 160, 0.1);
+  border: none;
+  box-shadow: none;
+  outline: none;
+  color: var(--text_color);
+  box-sizing: border-box;
+  resize: none;
+  overflow-y: scroll;
+  overflow:-moz-scrollbars-horizontal;
+  white-space: nowrap;
+}
+
 .ConfigurationInfo {
   cursor: pointer;
 }

src/containers/Configuration/ConfigurationItem/ConfigurationItem.js

@@ -19,6 +19,8 @@ export default connect(null, mapDispatchToProps)(props => {
     const target = e.target;
     if (target.type === 'checkbox') {
       target.value = e.target.checked ? 'true' : 'false';
+    } else if (target.type === 'textarea') {
+      e.target.string_array = String(e.target.value).replace(/\r\n/g,'\n').split('\n');
     }
     props.changed(target);
   };
@@ -118,6 +120,18 @@ export default connect(null, mapDispatchToProps)(props => {
                     value={props.value}/>;
     break;
 
+    case 'string_array':
+      data = (
+        <textarea autoFocus={props.autoFocus}
+                  disabled={props.readOnly}
+                  rows={4}
+                  cols={40}
+                  onChange={e=>handleChanged(e)}
+                  className={'ConfigurationItemInput'}
+                  value={props.value.join('\n')} />
+      );
+    break;
+
     default:
       data = <div>{props.value}</div>;
   }
@@ -130,7 +144,7 @@ export default connect(null, mapDispatchToProps)(props => {
           <tr>
             {infoDisplay ?
               <td width='100%'>{infoDisplay} {props.label}</td> :
-              <td width='100%'>{props.label}</td>}
+              <td width='100%' valign={'top'}>{props.label}</td>}
             <td>{data}</td>
           </tr>
         </tbody>