[webapp] Improve Transfer Options submenu

- show Transfer Syntax UID in each option
- simplify and restyle form, reduce text
- have two "Select all" buttons instead of one
   - one of them changes TSes for the selected SOP class,
     the other one changes all transfer syntaxes

dicoogle/src/main/resources/webapp/js/actions/transferActions.js

@@ -1,7 +1,17 @@
 import Reflux from "reflux";
+
+export const get = Reflux.createAction();
+export const set = Reflux.createAction();
+export const selectAll = Reflux.createAction();
+export const unSelectAll = Reflux.createAction();
+export const selectAllSOP = Reflux.createAction();
+export const unSelectAllSOP = Reflux.createAction();
+
 export const TransferActions = {
-  get: Reflux.createAction(),
-  set: Reflux.createAction(),
-  selectAll: Reflux.createAction(),
-  unSelectAll: Reflux.createAction()
+  get,
+  set,
+  selectAll,
+  unSelectAll,
+  selectAllSOP,
+  unSelectAllSOP,
 };

dicoogle/src/main/resources/webapp/js/components/management/transferOptionsView.js

@@ -1,33 +1,54 @@
 import React from "react";
-import createReactClass from "create-react-class";
 
 import { TransferStore } from "../../stores/transferStore";
-import { TransferActions } from "../../actions/transferActions";
+import * as TransferActions from "../../actions/transferActions";
 
-const TransferOptionsView = createReactClass({
-  getInitialState() {
+/**
+ * @typedef {Object} SOPClassTransferRecord
+ * @property {string} uid
+ * @property {string} sop_name
+ * @property {Array<TransferSyntaxRecord>} options
+ */
+
+/**
+ * @typedef {Object} TransferSyntaxRecord
+ * @property {string} uid
+ * @property {string} sop_name
+ */
+
+class TransferOptionsView extends React.Component {
+
+  constructor(props) {
+    super(props);
     this.selectAllOn = true;
-    return {
-      data: [],
+    this.selectSOPOn = true;
+    this.state = {
+      /** @type {{data: Array<SOPClassTransferRecord>}} */
+      data: {},
       status: "loading",
       selectedIndex: 0
     };
-  },
-  componentDidMount() {
-    console.log("componentdidmount: get");
+
+    this._onChange = this._onChange.bind(this);
+    this.handleSelectSop = this.handleSelectSop.bind(this);
+    this.handleSelectAll = this.handleSelectAll.bind(this);
+    this.onSopSelected = this.onSopSelected.bind(this);
+  }
 
+  componentDidMount() {
     TransferActions.get();
-  },
+  }
+
   componentWillMount() {
     // Subscribe to the store.
-    console.log("subscribe listener");
     this.unsubscribe = TransferStore.listen(this._onChange);
-  },
+  }
+
   componentWillUnmount() {
     this.unsubscribe();
-  },
+  }
+
   _onChange(data) {
-    //console.log(data);
     if (!data.success) {
       this.props.showToastMessage("error", {
         title: "Error",
@@ -38,7 +59,8 @@ const TransferOptionsView = createReactClass({
     }
 
     this.setState({ data: data, status: "done" });
-  },
+  }
+
   render() {
     if (this.state.status === "loading") {
       return (
@@ -50,9 +72,8 @@ const TransferOptionsView = createReactClass({
       );
     }
 
-    var array = this.state.data;
-    console.log("array", array);
-    var options = array.data[this.state.selectedIndex].options.map(
+    let array = this.state.data.data;
+    let options = array[this.state.selectedIndex].options.map(
       (item, index) => {
         return (
           <div key={index} className="data-table-row">
@@ -64,14 +85,14 @@ const TransferOptionsView = createReactClass({
                 checked={item.value}
                 onChange={this.handleChange.bind(this, item.name, index)}
               />
-              {item.name}
+              {item.name} -- {item.uid}
             </label>
           </div>
         );
       }
     );
 
-    var sopclasses = array.data.map((item, index) => {
+    var sopclasses = array.map((item, index) => {
       return (
         <option key={index}>
           {item.sop_name} -- {item.uid}
@@ -99,52 +120,67 @@ const TransferOptionsView = createReactClass({
                 </select>
                 <li className="list-group-item list-group-item-management">
                   <div className="row">
-                    <div className="col-xs-6 col-sm-4">
-                      Global Transfer Storage
-                    </div>
                     <div className="col-xs-6 col-sm-8">
-                      <div id="GlobalTransferStorage" className="data-table">
+                      <div id="GlobalTransferStorage" className="data-table manage-ts-options">
                         {options}
                       </div>
                     </div>
                   </div>
                 </li>
               </ul>
               <div>
+                <button
+                  className="btn btn_dicoogle"
+                  onClick={this.handleSelectSop}
+                >
+                  {this.selectSOPOn ? "Select all for this SOP class" : "Unselect all for this SOP class"}
+                </button>
+
                 <button
                   className="btn btn_dicoogle"
                   onClick={this.handleSelectAll}
                 >
-                  {this.selectAllOn ? "Select all" : "Unselect all"}
+                  {this.selectAllOn ? "Select all for ALL SOP classes" : "Unselect all for ALL SOP classes"}
                 </button>
               </div>
             </div>
           </div>
         </div>
       </div>
     );
-  },
+  }
 
   handleSelectAll() {
     if (this.selectAllOn) TransferActions.selectAll();
     else TransferActions.unSelectAll();
 
     this.selectAllOn = !this.selectAllOn;
-  },
+  }
+
+  handleSelectSop(e) {
+    let sop = this.state.data.data[this.state.selectedIndex]
+    let sopClassUid = sop.uid;
+    if (this.selectSOPOn) {
+      TransferActions.selectAllSOP(sopClassUid);
+    } else {
+      TransferActions.unSelectAllSOP(sopClassUid);
+    }
+
+    this.selectSOPOn = !this.selectSOPOn;
+  }
 
   handleChange(id, index) {
     let uid = this.state.data.data[
       document.getElementById("sop_select").selectedIndex
     ].uid;
     let value = document.getElementById(id).checked;
     TransferActions.set(this.state.selectedIndex, index, uid, id, value);
-  },
+  }
 
   onSopSelected() {
-    var selectedId = document.getElementById("sop_select").selectedIndex;
-
+    let selectedId = document.getElementById("sop_select").selectedIndex;
     this.setState({ selectedIndex: selectedId });
   }
-});
+}
 
 export { TransferOptionsView };

dicoogle/src/main/resources/webapp/js/stores/transferStore.js

@@ -53,6 +53,28 @@ const TransferStore = Reflux.createStore({
     this.select(false);
   },
 
+  onSelectAllSOP(sopClassOption) {
+    this.selectSOP(sopClassOption, true);
+  },
+
+  onUnSelectAllSOP(sopClassOption) {
+    this.selectSOP(sopClassOption, false);
+  },
+
+  selectSOP(sopClassUid, value) {
+    let sop = this._contents.find((sop) => sop.uid === sopClassUid);
+
+    Promise.all(sop.options.map((tsOptions) => {
+      tsOptions.value = value;
+      return this.request(sop.uid, tsOptions.name, tsOptions.value);
+    })).then(() => {
+      this.trigger({
+        data: this._contents,
+        success: true
+      });
+    });
+  },
+
   select(value) {
     for (let index of this._contents) {
       for (let indexOptions of index.options) {
@@ -66,12 +88,8 @@ const TransferStore = Reflux.createStore({
     });
   },
 
-  request(uid, id, value) {
-    this.dicoogle.setTransferSyntaxOption(uid, id, value, error => {
-      if (error) {
-        console.error("Dicoogle service error", error);
-      }
-    });
+  async request(uid, id, value) {
+    await this.dicoogle.setTransferSyntaxOption(uid, id, value);
   },
 
   onSet(index, indexOption, uid, id, value) {

dicoogle/src/main/resources/webapp/sass/modules/_management.scss

@@ -81,3 +81,7 @@
 .panel-heading-toggle {
   padding-right: 40px;
 }
+
+.manage-ts-options {
+  padding-left: 20px;
+}