From 4bc4d882fd9db0348e6dbd4b16512ff99db86245 Mon Sep 17 00:00:00 2001
From: Luis Bastiao Silva <bastiao@bmd-software.com>
Date: Sat, 2 Jan 2021 00:36:07 +0000
Subject: [PATCH 1/2] Improve the sentese in the footer at login page.

---
 .../webapp/js/components/login/loginView.js      | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/dicoogle/src/main/resources/webapp/js/components/login/loginView.js b/dicoogle/src/main/resources/webapp/js/components/login/loginView.js
index 43c64b66e..568a807f2 100644
--- a/dicoogle/src/main/resources/webapp/js/components/login/loginView.js
+++ b/dicoogle/src/main/resources/webapp/js/components/login/loginView.js
@@ -1,7 +1,7 @@
 import React from "react";
 import * as UserActions from "../../actions/userActions";
 import UserStore from "../../stores/userStore";
-import {Panel} from "react-bootstrap";
+import { Panel } from "react-bootstrap";
 
 const LoginView = React.createClass({
   contextTypes: {
@@ -101,7 +101,6 @@ const LoginView = React.createClass({
                 {guestCredentials}
               </form>
             </div>
-
           </section>
 
           {/*to fill the empty space between the login and footer*/}
@@ -109,11 +108,16 @@ const LoginView = React.createClass({
 
           <footer id="footer">
             <div style={{ width: "100%", textAlign: "center" }}>
-              For commercial support, contact
-              <a target="_new" href="http://www.bmd-software.com">{" "}
-                BMD Software
+              Community information and Learning Pack available on the{" "}
+              <a target="_new" href="http://www.dicoogle.com">
+                {" "}
+                the Dicoogle website
               </a>.{" "}
-              For community information go to <a target="_new" href="http://www.dicoogle.com"> the Dicoogle website</a>  .
+              Commercial support, by
+              <a target="_new" href="http://www.bmd-software.com">
+                {" "}
+                BMD Software
+              </a>.
             </div>
             <div
               style={{ width: "100%", textAlign: "center" }}

From 202b27f25190910796951a01c2f97a112c5846db Mon Sep 17 00:00:00 2001
From: Luis Bastiao Silva <bastiao@bmd-software.com>
Date: Sat, 2 Jan 2021 00:37:15 +0000
Subject: [PATCH 2/2] Syntax improvement

---
 .../webapp/js/components/about/aboutView.js   | 202 +++++++++---------
 .../js/components/management/aetitleView.js   |  68 +++---
 .../components/management/managementView.js   |  30 +--
 .../js/components/management/pluginsView.js   |   5 +-
 .../js/components/management/servicesView.js  |   5 +-
 .../js/components/management/storageView.js   |   9 +-
 .../management/transferOptionsView.js         |  10 +-
 .../webapp/js/components/mixins/toastView.js  |  10 +-
 .../webapp/js/components/search/exportView.js | 196 +++++++++--------
 .../js/components/search/searchResult.jsx     |  52 +++--
 10 files changed, 316 insertions(+), 271 deletions(-)

diff --git a/dicoogle/src/main/resources/webapp/js/components/about/aboutView.js b/dicoogle/src/main/resources/webapp/js/components/about/aboutView.js
index 9c3395bc1..f72d4efaa 100644
--- a/dicoogle/src/main/resources/webapp/js/components/about/aboutView.js
+++ b/dicoogle/src/main/resources/webapp/js/components/about/aboutView.js
@@ -24,112 +24,116 @@ const AboutView = React.createClass({
     let versionNumber = this.state.version;
     var title = <h3>Dicoogle PACS, version: {versionNumber}</h3>;
     var licenses = (
-        <Grid className="">
-          <Row className="show-grid">
-            <Col className="gridAbout" xs={2} md={2}>
-              <b>dcm4che2</b>
-              <br />License: GPL
-            </Col>
-            <Col className="gridAbout" xs={2} md={2}>
-              <b>react.js+reflux</b>
-              <br />License: BSD
-            </Col>
-            <Col className="gridAbout" xs={2} md={2}>
-              <b>Jetty</b>
-              <br />License: GPL
-            </Col>
-          </Row>
-        </Grid>
+      <Grid className="">
+        <Row className="show-grid">
+          <Col className="gridAbout" xs={2} md={2}>
+            <b>dcm4che2</b>
+            <br />License: GPL
+          </Col>
+          <Col className="gridAbout" xs={2} md={2}>
+            <b>react.js+reflux</b>
+            <br />License: BSD
+          </Col>
+          <Col className="gridAbout" xs={2} md={2}>
+            <b>Jetty</b>
+            <br />License: GPL
+          </Col>
+        </Row>
+      </Grid>
     );
 
     var panelsInstance = (
-        <div className="about">
-          <Panel header={title} bsStyle="primary">
-            Dicoogle is an open-source PACS archive software that replaces the traditional database model
-            with an extensible indexing and retrieval framework and provides easy
-            expansion of functionalities through the use of plug-ins. It was
-            designed to accommodate automatic information extraction,
-            indexing, and storage of all meta-data detected in medical images, without re-engineering or reconfiguration requirements,
-            thus overcoming the limitations of traditional DICOM query
-            services. By presenting the technical assets for plugin development
-            such as a Software Development Kit (SDK),
-            developers are free to expand the archive independently and
-            non-exclusively, without changes to the core platform. This extensible architecture of Dicoogle has enabled its use
-            in research and the healthcare industry, as many use cases can
-            be fulfilled in the same deployment
-            <br />
-          </Panel>
+      <div className="about">
+        <Panel header={title} bsStyle="primary">
+          Dicoogle is an open-source PACS archive software that replaces the
+          traditional database model with an extensible indexing and retrieval
+          framework and provides easy expansion of functionalities through the
+          use of plug-ins. It was designed to accommodate automatic information
+          extraction, indexing, and storage of all meta-data detected in medical
+          images, without re-engineering or reconfiguration requirements, thus
+          overcoming the limitations of traditional DICOM query services. By
+          presenting the technical assets for plugin development such as a
+          Software Development Kit (SDK), developers are free to expand the
+          archive independently and non-exclusively, without changes to the core
+          platform. This extensible architecture of Dicoogle has enabled its use
+          in research and the healthcare industry, as many use cases can be
+          fulfilled in the same deployment
+          <br />
+        </Panel>
 
-          <Panel header="Main third party components" bsStyle="primary">
-            {licenses}
-            Note: Although these are not the only components used, these are
-            considered the main ones.
-          </Panel>
+        <Panel header="Main third party components" bsStyle="primary">
+          {licenses}
+          Note: Although these are not the only components used, these are
+          considered the main ones.
+        </Panel>
 
-          <Panel header="Disclaimer" bsStyle="primary">
-            This software is provided by the copyright holders and contributors
-            "as is" and any express or implied warranties, including, but not
-            limited to, the implied warranties of merchantability and fitness for
-            a particular purpose are disclaimed. In no event shall the copyright
-            owner or contributors be liable for any direct, indirect, incidental,
-            special, exemplary, or consequential damages (including, but not
-            limited to, procurement of substitute goods or services; loss of use,
-            data, or profits; or business interruption) however caused and on any
-            theory of liability, whether in contract, strict liability, or tort
-            (including negligence or otherwise) arising in any way out of the use
-            of this software, even if advised of the possibility of such damage.
-          </Panel>
-          <Panel header="Developers" bsStyle="primary">
-            As an open source software, Dicoogle can accept contributions from
-            developers around the world. Dicoogle OSS is led and supported by
-            Bioinformatics UA and <a target="_new" href="http://www.bmd-software.com">
-            BMD Software</a>. Please check{" "} <a target="_new" href="http://www.dicoogle.com">
+        <Panel header="Disclaimer" bsStyle="primary">
+          This software is provided by the copyright holders and contributors
+          "as is" and any express or implied warranties, including, but not
+          limited to, the implied warranties of merchantability and fitness for
+          a particular purpose are disclaimed. In no event shall the copyright
+          owner or contributors be liable for any direct, indirect, incidental,
+          special, exemplary, or consequential damages (including, but not
+          limited to, procurement of substitute goods or services; loss of use,
+          data, or profits; or business interruption) however caused and on any
+          theory of liability, whether in contract, strict liability, or tort
+          (including negligence or otherwise) arising in any way out of the use
+          of this software, even if advised of the possibility of such damage.
+        </Panel>
+        <Panel header="Developers" bsStyle="primary">
+          As an open source software, Dicoogle can accept contributions from
+          developers around the world. Dicoogle OSS is led and supported by
+          Bioinformatics UA and{" "}
+          <a target="_new" href="http://www.bmd-software.com">
+            BMD Software
+          </a>. Please check{" "}
+          <a target="_new" href="http://www.dicoogle.com">
             the Dicoogle website
           </a>{" "}
-            or our{" "}
-            <a
-                target="_new"
-                href="http://www.github.com/bioinformatics-ua/dicoogle"
-            >
-              GitHub repository
-            </a>{" "}
-            for more information.
-            <div style={{ display: "inline-block", width: "100%" }}>
-              <a href="http://bioinformatics.ua.pt">
-                <img
-                    src="assets/logos/logobio.png"
-                    style={{ height: 40, margin: 5 }}
-                />
-              </a>
-              <a href="http://bmd-software.com/">
-                <img
-                    src="assets/logos/logo.png"
-                    style={{ height: 40, padding: 5, margin: 5 }}
-                />
-              </a>
-              <a href="http://www.ieeta.pt/">
-                <img
-                    src="assets/logos/logo-ieeta.png"
-                    style={{ height: 60, margin: 5 }}
-                />
-              </a>
-              <a href="http://www.ua.pt/">
-                <img
-                    src="assets/logos/logo-ua.png"
-                    style={{ height: 60, margin: 5 }}
-                />
-              </a>
-            </div>
-            <div style={{ display: "inline-block" }}>
-              <a>
-                <img
-                    src="assets/logos/logoFCT.png"
-                    style={{ height: 30, margin: 5 }}
-                />
-              </a>
-            </div>
-          </Panel>
-        </div>
+          or our{" "}
+          <a
+            target="_new"
+            href="http://www.github.com/bioinformatics-ua/dicoogle"
+          >
+            GitHub repository
+          </a>{" "}
+          for more information.
+          <div style={{ display: "inline-block", width: "100%" }}>
+            <a href="http://bioinformatics.ua.pt">
+              <img
+                src="assets/logos/logobio.png"
+                style={{ height: 40, margin: 5 }}
+              />
+            </a>
+            <a href="http://bmd-software.com/">
+              <img
+                src="assets/logos/logo.png"
+                style={{ height: 40, padding: 5, margin: 5 }}
+              />
+            </a>
+            <a href="http://www.ieeta.pt/">
+              <img
+                src="assets/logos/logo-ieeta.png"
+                style={{ height: 60, margin: 5 }}
+              />
+            </a>
+            <a href="http://www.ua.pt/">
+              <img
+                src="assets/logos/logo-ua.png"
+                style={{ height: 60, margin: 5 }}
+              />
+            </a>
+          </div>
+          <div style={{ display: "inline-block" }}>
+            <a>
+              <img
+                src="assets/logos/logoFCT.png"
+                style={{ height: 30, margin: 5 }}
+              />
+            </a>
+          </div>
+        </Panel>
+      </div>
     );
     return panelsInstance;
   }
diff --git a/dicoogle/src/main/resources/webapp/js/components/management/aetitleView.js b/dicoogle/src/main/resources/webapp/js/components/management/aetitleView.js
index 6b62489d3..91b8a215e 100644
--- a/dicoogle/src/main/resources/webapp/js/components/management/aetitleView.js
+++ b/dicoogle/src/main/resources/webapp/js/components/management/aetitleView.js
@@ -25,25 +25,25 @@ const AETitleView = React.createClass({
     AETitleActions.getAETitle();
   },
 
-
-    _onChange(data) {
-        if (data.success && this.state.status === "done") {
-            this.props.showToastMessage("success", { title: "Saved" });
-        } else if (data.success) {
-            this.setState({
-                aetitleText: data.message,
-                status: "done"
-            });
-
-        } else {
-            this.setState({
-                dirtyValue: true,
-            });
-
-            this.props.showToastMessage("error", { title: "Error", body: data.message });
-        }
-    },
-
+  _onChange(data) {
+    if (data.success && this.state.status === "done") {
+      this.props.showToastMessage("success", { title: "Saved" });
+    } else if (data.success) {
+      this.setState({
+        aetitleText: data.message,
+        status: "done"
+      });
+    } else {
+      this.setState({
+        dirtyValue: true
+      });
+
+      this.props.showToastMessage("error", {
+        title: "Error",
+        body: data.message
+      });
+    }
+  },
 
   render() {
     if (this.state.status === "loading") {
@@ -56,22 +56,22 @@ const AETitleView = React.createClass({
       );
     }
 
-      return (
-          <div className="panel panel-primary topMargin">
-              <div className="panel-heading">
-                  <h3 className="panel-title">AETitle</h3>
-              </div>
+    return (
+      <div className="panel panel-primary topMargin">
+        <div className="panel-heading">
+          <h3 className="panel-title">AETitle</h3>
+        </div>
 
-              <div className="panel-body">
-                  <AETitleForm
-                      aetitleText={this.state.aetitleText}
-                      onChangeAETitle={this.handleAETitleChange}
-                      onSubmitAETitle={this.handleSubmitAETitle}
-                      dirtyValue={this.state.dirtyValue}
-                  />
-              </div>
-          </div>
-      );
+        <div className="panel-body">
+          <AETitleForm
+            aetitleText={this.state.aetitleText}
+            onChangeAETitle={this.handleAETitleChange}
+            onSubmitAETitle={this.handleSubmitAETitle}
+            dirtyValue={this.state.dirtyValue}
+          />
+        </div>
+      </div>
+    );
   },
 
   handleAETitleChange(aetitle) {
diff --git a/dicoogle/src/main/resources/webapp/js/components/management/managementView.js b/dicoogle/src/main/resources/webapp/js/components/management/managementView.js
index fec15a496..019b3ca8e 100644
--- a/dicoogle/src/main/resources/webapp/js/components/management/managementView.js
+++ b/dicoogle/src/main/resources/webapp/js/components/management/managementView.js
@@ -7,25 +7,27 @@ import { StorageView } from "../management/storageView";
 import { ToastView } from "../mixins/toastView";
 
 const ManagementView = React.createClass({
-  getInitialState: function () {
+  getInitialState: function() {
     return {
       selectedtab: 0,
       showToast: false,
-      toastType: 'default',
+      toastType: "default",
       toastMessage: {}
     };
   },
 
-  showToastMessage: function (toastType, toastMessage) {
-    this.setState({
-      showToast: true,
-      toastType,
-      toastMessage
-    },
-      () => setTimeout(() => this.setState({ showToast: false }), 3000));
+  showToastMessage: function(toastType, toastMessage) {
+    this.setState(
+      {
+        showToast: true,
+        toastType,
+        toastMessage
+      },
+      () => setTimeout(() => this.setState({ showToast: false }), 3000)
+    );
   },
 
-  render: function () {
+  render: function() {
     var views = [
       <IndexerView showToastMessage={this.showToastMessage} />,
       <TransferOptionsView showToastMessage={this.showToastMessage} />,
@@ -89,11 +91,15 @@ const ManagementView = React.createClass({
           {views[this.state.selectedtab]}
         </div>
 
-        <ToastView show={showToast} message={toastMessage} toastType={toastType} />
+        <ToastView
+          show={showToast}
+          message={toastMessage}
+          toastType={toastType}
+        />
       </div>
     );
   },
-  onTabClicked: function (index) {
+  onTabClicked: function(index) {
     this.setState({ selectedtab: index });
   }
 });
diff --git a/dicoogle/src/main/resources/webapp/js/components/management/pluginsView.js b/dicoogle/src/main/resources/webapp/js/components/management/pluginsView.js
index 283c62981..4d14e281f 100644
--- a/dicoogle/src/main/resources/webapp/js/components/management/pluginsView.js
+++ b/dicoogle/src/main/resources/webapp/js/components/management/pluginsView.js
@@ -36,7 +36,10 @@ const PluginsView = React.createClass({
       });
 
       if (this.state.error) {
-        this.props.showToastMessage("error", { title: "Error", body: this.state.error });
+        this.props.showToastMessage("error", {
+          title: "Error",
+          body: this.state.error
+        });
       } else {
         this.props.showToastMessage("success", { title: "Saved" });
       }
diff --git a/dicoogle/src/main/resources/webapp/js/components/management/servicesView.js b/dicoogle/src/main/resources/webapp/js/components/management/servicesView.js
index 3ea3f726f..36e17311c 100644
--- a/dicoogle/src/main/resources/webapp/js/components/management/servicesView.js
+++ b/dicoogle/src/main/resources/webapp/js/components/management/servicesView.js
@@ -48,7 +48,10 @@ const ServicesView = React.createClass({
 
   _onChange(data) {
     if (data.error) {
-      this.props.showToastMessage("error", { title: "Error", body: data.error });
+      this.props.showToastMessage("error", {
+        title: "Error",
+        body: data.error
+      });
       return;
     } else if (!data.error && this.state.status === "done") {
       this.props.showToastMessage("success", { title: "Success" });
diff --git a/dicoogle/src/main/resources/webapp/js/components/management/storageView.js b/dicoogle/src/main/resources/webapp/js/components/management/storageView.js
index b9ca77088..10219615e 100644
--- a/dicoogle/src/main/resources/webapp/js/components/management/storageView.js
+++ b/dicoogle/src/main/resources/webapp/js/components/management/storageView.js
@@ -179,13 +179,16 @@ const StorageView = React.createClass({
   componentWillUnmount() {
     this.unsubscribe();
   },
-  _onChange: function (data) {
+  _onChange: function(data) {
     if (!data.success) {
-      this.props.showToastMessage("error", { title: "Error", body: data.status });
+      this.props.showToastMessage("error", {
+        title: "Error",
+        body: data.status
+      });
     } else if (!data.error && this.state.status === "done") {
       this.props.showToastMessage("success", { title: "Success" });
     }
-    
+
     this.setState({ data: data.data, status: "done" });
   },
 
diff --git a/dicoogle/src/main/resources/webapp/js/components/management/transferOptionsView.js b/dicoogle/src/main/resources/webapp/js/components/management/transferOptionsView.js
index b9c26f2f7..1fcd985e2 100644
--- a/dicoogle/src/main/resources/webapp/js/components/management/transferOptionsView.js
+++ b/dicoogle/src/main/resources/webapp/js/components/management/transferOptionsView.js
@@ -28,7 +28,10 @@ const TransferOptionsView = React.createClass({
   _onChange(data) {
     //console.log(data);
     if (!data.success) {
-      this.props.showToastMessage("error", { title: "Error", body: data.status });
+      this.props.showToastMessage("error", {
+        title: "Error",
+        body: data.status
+      });
     } else if (data.success && this.state.status === "done") {
       this.props.showToastMessage("success", { title: "Saved" });
     }
@@ -107,7 +110,10 @@ const TransferOptionsView = React.createClass({
                 </li>
               </ul>
               <div>
-                <button className="btn btn_dicoogle" onClick={this.handleSelectAll}>
+                <button
+                  className="btn btn_dicoogle"
+                  onClick={this.handleSelectAll}
+                >
                   {this.selectAllOn ? "Select all" : "Unselect all"}
                 </button>
               </div>
diff --git a/dicoogle/src/main/resources/webapp/js/components/mixins/toastView.js b/dicoogle/src/main/resources/webapp/js/components/mixins/toastView.js
index 10d46df16..d60c7d5cf 100644
--- a/dicoogle/src/main/resources/webapp/js/components/mixins/toastView.js
+++ b/dicoogle/src/main/resources/webapp/js/components/mixins/toastView.js
@@ -11,7 +11,7 @@ const ToastView = React.createClass({
 
     const transitionStyles = {
       entering: {
-        transition: `opacity 400ms ease-in-out`,
+        transition: `opacity 400ms ease-in-out`
       },
       exiting: {
         transition: `opacity 400ms ease-in-out`,
@@ -24,7 +24,7 @@ const ToastView = React.createClass({
 
     return (
       <Transition in={this.props.show} timeout={duration}>
-        {(state) => (
+        {state => (
           <div
             style={{
               ...transitionStyles[state]
@@ -33,11 +33,7 @@ const ToastView = React.createClass({
             <div className={`toast toast-${toastType}`}>
               <h3 className="panel-title">{message.title}</h3>
 
-              {message.body &&
-                <div className="toast-body">
-                  {message.body}
-                </div>
-              }
+              {message.body && <div className="toast-body">{message.body}</div>}
             </div>
           </div>
         )}
diff --git a/dicoogle/src/main/resources/webapp/js/components/search/exportView.js b/dicoogle/src/main/resources/webapp/js/components/search/exportView.js
index 6cb2f1e2d..5b1971906 100644
--- a/dicoogle/src/main/resources/webapp/js/components/search/exportView.js
+++ b/dicoogle/src/main/resources/webapp/js/components/search/exportView.js
@@ -14,7 +14,7 @@ import { ExportStore } from "../../stores/exportStore";
 import { ToastView } from "../mixins/toastView";
 
 const ExportView = React.createClass({
-  getInitialState: function () {
+  getInitialState: function() {
     return {
       fields: [],
       presets: [],
@@ -30,18 +30,18 @@ const ExportView = React.createClass({
       current: 0,
 
       showToast: false,
-      toastType: 'default',
+      toastType: "default",
       toastMessage: {}
     };
   },
 
-  componentWillMount: function () {
+  componentWillMount: function() {
     // Subscribe to the store.
     console.log("subscribe listener");
     this.unsubscribe = ExportStore.listen(this._onChange);
   },
 
-  componentDidMount: function () {
+  componentDidMount: function() {
     ExportActions.getFieldList();
     ExportActions.getPresets();
   },
@@ -50,16 +50,18 @@ const ExportView = React.createClass({
     this.unsubscribe();
   },
 
-  showToastMessage: function (toastType, toastMessage) {
-    this.setState({
-      showToast: true,
-      toastType,
-      toastMessage
-    },
-      () => setTimeout(() => this.setState({ showToast: false }), 3000));
+  showToastMessage: function(toastType, toastMessage) {
+    this.setState(
+      {
+        showToast: true,
+        toastType,
+        toastMessage
+      },
+      () => setTimeout(() => this.setState({ showToast: false }), 3000)
+    );
   },
 
-  _onChange: function (data) {
+  _onChange: function(data) {
     if (!data.success) {
       this.setState({
         status: "failed"
@@ -102,89 +104,93 @@ const ExportView = React.createClass({
     const { showToast, toastType, toastMessage } = this.state;
 
     return (
-        <Modal {...this.props} bsStyle="primary" animation>
-          <Modal.Header>
-            <Modal.Title>Export to CSV</Modal.Title>
-          </Modal.Header>
-          <Modal.Body>
-            <FormGroup>
-              <ControlLabel>Preset (optional):</ControlLabel>
-              <Select
-                simpleValue
-                id="selected-preset"
-                value={this.state.selectedPresetName}
-                options={presetNames}
-                placeholder="Choose a preset"
-                onChange={this.handlePresetSelect}
-              />
-            </FormGroup>
-            <FormGroup>
-              <ControlLabel>Fields to export:</ControlLabel>
-              <Select.AsyncCreatable
-                multi
-                id="selected-fields"
-                value={this.state.selectedFields}
-                loadOptions={this.loadOptionFields}
-                placeholder="Choose fields"
-                onChange={this.handleFieldSelect}
+      <Modal {...this.props} bsStyle="primary" animation>
+        <Modal.Header>
+          <Modal.Title>Export to CSV</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <FormGroup>
+            <ControlLabel>Preset (optional):</ControlLabel>
+            <Select
+              simpleValue
+              id="selected-preset"
+              value={this.state.selectedPresetName}
+              options={presetNames}
+              placeholder="Choose a preset"
+              onChange={this.handlePresetSelect}
+            />
+          </FormGroup>
+          <FormGroup>
+            <ControlLabel>Fields to export:</ControlLabel>
+            <Select.AsyncCreatable
+              multi
+              id="selected-fields"
+              value={this.state.selectedFields}
+              loadOptions={this.loadOptionFields}
+              placeholder="Choose fields"
+              onChange={this.handleFieldSelect}
+            />
+          </FormGroup>
+          <FormGroup>
+            <ControlLabel>Inline fields to export (optional):</ControlLabel>
+
+            <div className="modal-body">
+              <textarea
+                id="textFields"
+                placeholder="Paste export fields here (one per line)"
+                onChange={this.handleFieldSelectTextArea}
+                rows="10"
+                value={this.state.selectedFieldsAdditionals}
+                className="exportlist form-control"
               />
-            </FormGroup>
-            <FormGroup>
-              <ControlLabel>Inline fields to export (optional):</ControlLabel>
-
-              <div className="modal-body">
-                <textarea
-                  id="textFields"
-                  placeholder="Paste export fields here (one per line)"
-                  onChange={this.handleFieldSelectTextArea}
-                  rows="10"
-                  value={this.state.selectedFieldsAdditionals}
-                  className="exportlist form-control"
-                />
-              </div>
-            </FormGroup>
-          </Modal.Body>
-          <Modal.Footer id="hacked-modal-footer-do-not-remove">
-            <Form inline>
-              <FormControl
-                type="text"
-                value={this.state.exportPresetName}
-                placeholder="Name the preset"
-                onChange={this.handlePresetNameChange}
-                maxLength="100"
-              />
-
-              <Button
-                bsStyle="default"
-                onClick={this.handleSavePresetClicked}
-                disabled={!this.canExport()}
-              >
-                Save Preset
-              </Button>
-              <Button
-                bsStyle="primary"
-                onClick={this.handleExportClicked}
-                disabled={!this.canSave()}
-              >
-                Export
-              </Button>
-            </Form>
-          </Modal.Footer>
-          <ToastView show={showToast} message={toastMessage} toastType={toastType} />
-        </Modal>
+            </div>
+          </FormGroup>
+        </Modal.Body>
+        <Modal.Footer id="hacked-modal-footer-do-not-remove">
+          <Form inline>
+            <FormControl
+              type="text"
+              value={this.state.exportPresetName}
+              placeholder="Name the preset"
+              onChange={this.handlePresetNameChange}
+              maxLength="100"
+            />
+
+            <Button
+              bsStyle="default"
+              onClick={this.handleSavePresetClicked}
+              disabled={!this.canExport()}
+            >
+              Save Preset
+            </Button>
+            <Button
+              bsStyle="primary"
+              onClick={this.handleExportClicked}
+              disabled={!this.canSave()}
+            >
+              Export
+            </Button>
+          </Form>
+        </Modal.Footer>
+        <ToastView
+          show={showToast}
+          message={toastMessage}
+          toastType={toastType}
+        />
+      </Modal>
     );
   },
 
-  loadOptionFields: function (input, callback) {
+  loadOptionFields: function(input, callback) {
     // display no options if the input is empty
     let options =
       input.length === 0
         ? []
         : this.state.fields.filter(
-          i =>
-            i.value.toLowerCase().substr(0, input.length) ===
-            input.toLowerCase()
-        );
+            i =>
+              i.value.toLowerCase().substr(0, input.length) ===
+              input.toLowerCase()
+          );
 
     let data = {
       options: options,
@@ -194,19 +200,19 @@ const ExportView = React.createClass({
     callback(null, data);
   },
 
-  handleFieldSelectTextArea: function (event) {
+  handleFieldSelectTextArea: function(event) {
     this.setState({
       selectedFieldsAdditionals: event.target.value
     });
   },
 
-  handleFieldSelect: function (selectedFields) {
+  handleFieldSelect: function(selectedFields) {
     this.setState({
       selectedFields: selectedFields
     });
   },
 
-  handlePresetSelect: function (name) {
+  handlePresetSelect: function(name) {
     // default values if no preset is selected
     let selectedFields = [];
     let exportPresetName = "default";
@@ -226,12 +232,12 @@ const ExportView = React.createClass({
     });
   },
 
-  handlePresetNameChange: function (e) {
+  handlePresetNameChange: function(e) {
     this.setState({
       exportPresetName: e.target.value
     });
   },
-  __getSelectedFields: function () {
+  __getSelectedFields: function() {
     let fields = this.state.selectedFields.map(i => i.value);
     if (this.state.selectedFieldsAdditionals !== "") {
       let fieldsInline = this.state.selectedFieldsAdditionals.split("\n");
@@ -240,7 +246,7 @@ const ExportView = React.createClass({
 
     return fields;
   },
-  handleSavePresetClicked: function () {
+  handleSavePresetClicked: function() {
     let fields = this.__getSelectedFields();
     ExportActions.savePresets(this.state.exportPresetName, fields);
 
@@ -250,17 +256,17 @@ const ExportView = React.createClass({
     });
   },
 
-  handleExportClicked: function () {
+  handleExportClicked: function() {
     let fields = this.__getSelectedFields();
     let query = this.props.query;
     ExportActions.exportCSV(query, fields);
   },
 
-  canSave: function () {
+  canSave: function() {
     return this.__getSelectedFields().length !== 0;
   },
 
-  canExport: function () {
+  canExport: function() {
     return this.state.exportPresetName && this.canSave();
   }
 });
diff --git a/dicoogle/src/main/resources/webapp/js/components/search/searchResult.jsx b/dicoogle/src/main/resources/webapp/js/components/search/searchResult.jsx
index f868c1c3e..89e3d9966 100644
--- a/dicoogle/src/main/resources/webapp/js/components/search/searchResult.jsx
+++ b/dicoogle/src/main/resources/webapp/js/components/search/searchResult.jsx
@@ -37,7 +37,7 @@ const SearchResult = React.createClass({
     };
   },
 
-  getInitialState: function () {
+  getInitialState: function() {
     return {
       showExport: false,
       showDangerousOptions: DefaultOptions.showSearchOptions,
@@ -48,7 +48,7 @@ const SearchResult = React.createClass({
     };
   },
 
-  componentWillMount: function () {
+  componentWillMount: function() {
     Webcore.fetchPlugins("result-batch", packages => {
       Webcore.fetchModules(packages);
       this.setState({
@@ -71,7 +71,7 @@ const SearchResult = React.createClass({
       if (!this.state.current) this.onStepClicked(0);
     }
   },
-  _onSearchResult: function (_outcome) {
+  _onSearchResult: function(_outcome) {
     this.onStepClicked(0, true);
   },
   handleClickExport() {
@@ -98,7 +98,7 @@ const SearchResult = React.createClass({
     return this.props.searchOutcome.error;
   },
 
-  render: function () {
+  render: function() {
     const { searchOutcome } = this.props;
 
     if (this.isLoading()) {
@@ -238,19 +238,37 @@ const SearchResult = React.createClass({
     return view;
   },
 
-  onStepClicked: function (stepComponent, newData) {
-    this.setState({ current: stepComponent, maxStep: newData ? 0 : Math.max(this.state.maxStep, stepComponent) });
+  onStepClicked: function(stepComponent, newData) {
+    this.setState({
+      current: stepComponent,
+      maxStep: newData ? 0 : Math.max(this.state.maxStep, stepComponent)
+    });
   },
-  onPatientClicked: function (patient) {
-    this.setState({ current: 1, maxStep: Math.max(this.state.maxStep, 1), patient, study: null, serie: null });
+  onPatientClicked: function(patient) {
+    this.setState({
+      current: 1,
+      maxStep: Math.max(this.state.maxStep, 1),
+      patient,
+      study: null,
+      serie: null
+    });
   },
-  onStudyClicked: function (study) {
-    this.setState({ current: 2, maxStep: Math.max(this.state.maxStep, 2), study, serie: null });
+  onStudyClicked: function(study) {
+    this.setState({
+      current: 2,
+      maxStep: Math.max(this.state.maxStep, 2),
+      study,
+      serie: null
+    });
   },
-  onSeriesClicked: function (serie) {
-    this.setState({ current: 3, maxStep: Math.max(this.state.maxStep, 3), serie });
+  onSeriesClicked: function(serie) {
+    this.setState({
+      current: 3,
+      maxStep: Math.max(this.state.maxStep, 3),
+      serie
+    });
   },
-  toggleAdvOpt: function () {
+  toggleAdvOpt: function() {
     this.setState({ showDangerousOptions: !this.state.showDangerousOptions });
   }
 });
@@ -260,9 +278,9 @@ const Step = React.createClass({
     current: PropTypes.number.isRequired,
     maxStep: PropTypes.number.isRequired,
     counters: PropTypes.arrayOf(PropTypes.number).isRequired,
-    onClick: PropTypes.func.isRequired,
+    onClick: PropTypes.func.isRequired
   },
-  render: function () {
+  render: function() {
     const {
       current,
       counters: [nPatients, nStudies, nSeries, nImages]
@@ -325,12 +343,12 @@ const Step = React.createClass({
       </div>
     );
   },
-  getStep: function (current, step) {
+  getStep: function(current, step) {
     if (step === current) return "col-xs-3 wizardbar-item current";
     else if (step > current) return "col-xs-3 wizardbar-item disabled";
     else if (step < current) return "col-xs-3 wizardbar-item completed";
   },
-  onStepClicked: function (newStep) {
+  onStepClicked: function(newStep) {
     console.log(`onStepClicked(${newStep}, max = ${this.props.maxStep})`);
     // only allow moving to this step if the user had moved to it before
     if (this.props.maxStep >= newStep) {