From 71fc4d2c691d9f09cef33df0c5b47a8354408d0e Mon Sep 17 00:00:00 2001
From: Eduardo Pinho <eduardopinho@bmd-software.com>
Date: Mon, 19 Jun 2023 23:34:02 +0100
Subject: [PATCH] Transfer Options - improve web service and UI (#649)

* [core] Include transfer syntax UID in transfer options response

* Accept PUT in tranfer option update endpoint

* [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
---
 .../java/pt/ua/dicoogle/server/SOPList.java   |  1 +
 .../ua/dicoogle/server/TransfersStorage.java  |  4 +
 .../management/TransferOptionsServlet.java    |  7 +-
 .../webapp/js/actions/transferActions.js      | 18 +++-
 .../management/transferOptionsView.js         | 98 +++++++++++++------
 .../webapp/js/stores/transferStore.js         | 30 ++++--
 .../webapp/sass/modules/_management.scss      |  4 +
 7 files changed, 120 insertions(+), 42 deletions(-)

diff --git a/dicoogle/src/main/java/pt/ua/dicoogle/server/SOPList.java b/dicoogle/src/main/java/pt/ua/dicoogle/server/SOPList.java
index ffeea11d4..9cef7f583 100644
--- a/dicoogle/src/main/java/pt/ua/dicoogle/server/SOPList.java
+++ b/dicoogle/src/main/java/pt/ua/dicoogle/server/SOPList.java
@@ -339,6 +339,7 @@ public String getSOPList() {
                 JSONObject tsobj = new JSONObject();
                 String name = TransfersStorage.getGlobalTransferMap().get(i);
                 boolean value = ts.getTS()[i];
+                tsobj.put("uid", TransfersStorage.convertTsNameToUID(name));
                 tsobj.put("name", name);
                 tsobj.put("value", value);
 
diff --git a/dicoogle/src/main/java/pt/ua/dicoogle/server/TransfersStorage.java b/dicoogle/src/main/java/pt/ua/dicoogle/server/TransfersStorage.java
index 839fc5a51..b981b0d82 100755
--- a/dicoogle/src/main/java/pt/ua/dicoogle/server/TransfersStorage.java
+++ b/dicoogle/src/main/java/pt/ua/dicoogle/server/TransfersStorage.java
@@ -185,6 +185,10 @@ public String[] getVerboseTS() {
         }
         return return_value;
     }
+    
+    public static String convertTsNameToUID(String name) {
+        return namesUidMapping.getKey(name).toString();
+    }
 
     public List<String> asList() {
         return Arrays.asList(this.getVerboseTS());
diff --git a/dicoogle/src/main/java/pt/ua/dicoogle/server/web/servlets/management/TransferOptionsServlet.java b/dicoogle/src/main/java/pt/ua/dicoogle/server/web/servlets/management/TransferOptionsServlet.java
index fc9cf9c17..36423ab97 100644
--- a/dicoogle/src/main/java/pt/ua/dicoogle/server/web/servlets/management/TransferOptionsServlet.java
+++ b/dicoogle/src/main/java/pt/ua/dicoogle/server/web/servlets/management/TransferOptionsServlet.java
@@ -50,7 +50,7 @@ protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws Se
     }
 
     @Override
-    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
+    protected void doPut(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
 
         String UID = req.getParameter("uid");
         String option = req.getParameter("option");
@@ -77,6 +77,11 @@ protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws S
         ServerSettingsManager.saveSettings();
         ResponseUtil.simpleResponse(resp, "success", true);
     }
+    
+    @Override
+    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
+        this.doPut(req, resp);
+    }
 
     public static class TransferenceOptionsResponse {
         List<Option> options;
diff --git a/dicoogle/src/main/resources/webapp/js/actions/transferActions.js b/dicoogle/src/main/resources/webapp/js/actions/transferActions.js
index b926b898a..77a3f1617 100644
--- a/dicoogle/src/main/resources/webapp/js/actions/transferActions.js
+++ b/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,
 };
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 554be3aea..723eabd03 100644
--- a/dicoogle/src/main/resources/webapp/js/components/management/transferOptionsView.js
+++ b/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,11 +120,8 @@ 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>
@@ -111,11 +129,18 @@ const TransferOptionsView = createReactClass({
                 </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>
@@ -123,14 +148,26 @@ const TransferOptionsView = createReactClass({
         </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[
@@ -138,13 +175,12 @@ const TransferOptionsView = createReactClass({
     ].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 };
diff --git a/dicoogle/src/main/resources/webapp/js/stores/transferStore.js b/dicoogle/src/main/resources/webapp/js/stores/transferStore.js
index c80fd563e..7f3dd8bb1 100644
--- a/dicoogle/src/main/resources/webapp/js/stores/transferStore.js
+++ b/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) {
diff --git a/dicoogle/src/main/resources/webapp/sass/modules/_management.scss b/dicoogle/src/main/resources/webapp/sass/modules/_management.scss
index d85c415e4..76229b981 100644
--- a/dicoogle/src/main/resources/webapp/sass/modules/_management.scss
+++ b/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;
+}