implement error display

src/client/js/components/PageEditor/HandsontableModal.jsx

@@ -244,18 +244,8 @@ export default class HandsontableModal extends React.PureComponent {
     this.setState({ isDataImportAreaExpanded: !this.state.isDataImportAreaExpanded });
   }
 
-  importData(dataFormat, data) {
-    switch (dataFormat) {
-      case 'csv':
-        this.init(MarkdownTable.fromDSV(data, ','));
-        break;
-      case 'tsv':
-        this.init(MarkdownTable.fromDSV(data, '\t'));
-        break;
-      case 'html':
-        this.init(MarkdownTable.fromHTMLTableTag(data));
-        break;
-    }
+  importData(markdownTable) {
+    this.init(markdownTable);
     this.toggleDataImportArea();
   }
 

src/client/js/components/PageEditor/TableDataImportForm.jsx

@@ -4,6 +4,8 @@ import FormGroup from 'react-bootstrap/es/FormGroup';
 import ControlLabel from 'react-bootstrap/es/ControlLabel';
 import FormControl from 'react-bootstrap/es/FormControl';
 import Button from 'react-bootstrap/es/Button';
+import MarkdownTable from '../../models/MarkdownTable';
+import Collapse from 'react-bootstrap/es/Collapse';
 
 export default class TableDataImportForm extends React.Component {
 
@@ -12,14 +14,37 @@ export default class TableDataImportForm extends React.Component {
 
     this.state = {
       dataFormat: 'csv',
-      data: ''
+      data: '',
+      parserErrorMessage: null
     };
 
     this.importButtonHandler = this.importButtonHandler.bind(this);
   }
 
   importButtonHandler() {
-    this.props.onImport(this.state.dataFormat, this.state.data);
+    try {
+      const markdownTable = this.convertFormDataToMarkdownTable();
+      this.props.onImport(markdownTable);
+    }
+    catch (e) {
+      this.setState({parserErrorMessage: e.message});
+    }
+  }
+
+  convertFormDataToMarkdownTable() {
+    let result;
+    switch (this.state.dataFormat) {
+      case 'csv':
+        result = MarkdownTable.fromDSV(this.state.data, ',');
+        break;
+      case 'tsv':
+        result = MarkdownTable.fromDSV(this.state.data, '\t');
+        break;
+      case 'html':
+        result = MarkdownTable.fromHTMLTableTag(this.state.data);
+        break;
+    }
+    return result;
   }
 
   render() {
@@ -39,6 +64,12 @@ export default class TableDataImportForm extends React.Component {
           <FormControl componentClass="textarea" placeholder="Paste table data" style={{ height: 200 }}
                        onChange={e => this.setState({data: e.target.value})}/>
         </FormGroup>
+        <Collapse in={this.state.parserErrorMessage != null}>
+          <FormGroup>
+            <ControlLabel>Parser Error</ControlLabel>
+            <FormControl componentClass="textarea" style={{ height: 100 }}  value={this.state.parserErrorMessage} readOnly/>
+          </FormGroup>
+        </Collapse>
         <div className="d-flex justify-content-end">
           <Button bsStyle="default" onClick={this.props.onCancel}>Cancel</Button>
           <Button bsStyle="primary" onClick={this.importButtonHandler}>Import</Button>