Use dedicated thumbnails for ISAN templates (#904)

* Use existing thumbnail field if any
* thumbnails moved to GH repo
* expose "thumbnail" field

Author: odeimaiz

services/web/client/source/class/qxapp/desktop/StudyBrowser.js

@@ -389,13 +389,19 @@ qx.Class.define("qxapp.desktop.StudyBrowser", {
       return list;
     },
 
+    __uuidToNumber: function(uuid) {
+      const nThumbnails = 25;
+      const lastCharacters = uuid.substr(uuid.length-10);
+      const aNumber = parseInt(lastCharacters, 16);
+      return aNumber%nThumbnails;
+    },
+
     /**
      * Delegates appearance and binding of each study item
      */
     __getDelegate: function(fromTemplate, list) {
       const thumbnailWidth = 200;
       const thumbnailHeight = 120;
-      const nThumbnails = 25;
       let that = this;
       let delegate = {
         // Item's Layout
@@ -433,12 +439,15 @@ qx.Class.define("qxapp.desktop.StudyBrowser", {
         },
         // Item's data binding
         bindItem: function(controller, item, id) {
-          controller.bindProperty("uuid", "icon", {
+          controller.bindProperty("uuid", "model", null, item, id);
+          controller.bindProperty("thumbnail", "icon", {
             converter: function(data) {
-              if (data) {
-                const lastCharacters = data.substr(data.length-10);
-                const aNumber = parseInt(lastCharacters, 16);
-                const thumbnailId = aNumber%nThumbnails;
+              const uuid = item.getModel();
+              if (uuid) {
+                if (data) {
+                  return data;
+                }
+                const thumbnailId = that.__uuidToNumber(uuid); // eslint-disable-line no-underscore-dangle
                 return "qxapp/img"+ thumbnailId +".jpg";
               }
               return "@FontAwesome5Solid/plus-circle/80";
@@ -459,11 +468,6 @@ qx.Class.define("qxapp.desktop.StudyBrowser", {
               return data ? new Date(data) : null;
             }
           }, item, id);
-          controller.bindProperty("uuid", "model", {
-            converter: function(data) {
-              return data;
-            }
-          }, item, id);
         },
         configureItem: item => {
           item.getChildControl("icon").set({
@@ -514,8 +518,8 @@ qx.Class.define("qxapp.desktop.StudyBrowser", {
         this.__editStudyLayout.removeAt(1);
       }
 
-      const itemsToBeDisplayed = ["name", "description", "prjOwner", "creationDate", "lastChangeDate"];
-      const itemsToBeModified = fromTemplate ? [] : ["name", "description"];
+      const itemsToBeDisplayed = ["name", "description", "thumbnail", "prjOwner", "creationDate", "lastChangeDate"];
+      const itemsToBeModified = fromTemplate ? [] : ["name", "description", "thumbnail"];
       let form = new qx.ui.form.Form();
       let control;
       for (const dataId in studyData) {
@@ -529,6 +533,10 @@ qx.Class.define("qxapp.desktop.StudyBrowser", {
               control = new qx.ui.form.TextField();
               form.add(control, this.tr("Description"));
               break;
+            case "thumbnail":
+              control = new qx.ui.form.TextField();
+              form.add(control, this.tr("Thumbnail"));
+              break;
             case "prjOwner":
               control = new qx.ui.form.TextField();
               form.add(control, this.tr("Owner"));