refactor

Author: odeimaiz

services/static-webserver/client/source/class/osparc/jobs/JobsTable.js

@@ -36,7 +36,8 @@ qx.Class.define("osparc.jobs.JobsTable", {
 
     Object.values(this.self().COLS).forEach(col => columnModel.setColumnWidth(col.column, col.width));
 
-    const fontButtonRenderer = new osparc.ui.table.cellrenderer.SVGButtonRenderer();
+    const fontButtonRenderer = new osparc.ui.table.cellrenderer.ImageButtonRenderer();
+    fontButtonRenderer.setIconPath("osparc/offline.svg");
     columnModel.setDataCellRenderer(this.self().COLS.INFO.column, fontButtonRenderer);
   },
 

services/static-webserver/client/source/class/osparc/jobs/JobsTableModel.js

@@ -126,7 +126,6 @@ qx.Class.define("osparc.jobs.JobsTableModel", {
                 [jobsCols.SUBMIT.id]: job.getSubmittedAt() ? osparc.utils.Utils.formatDateAndTime(job.getSubmittedAt()) : "-",
                 [jobsCols.START.id]: job.getStartedAt() ? osparc.utils.Utils.formatDateAndTime(job.getStartedAt()) : "-",
                 [jobsCols.INSTANCE.id]: job.getInstance(),
-                [jobsCols.INFO.id]: "@FontAwesome5Solid/copy/14",
               });
             });
             return data;

services/static-webserver/client/source/class/osparc/ui/table/cellrenderer/SVGButtonRenderer.js renamed to services/static-webserver/client/source/class/osparc/ui/table/cellrenderer/ButtonRenderer.js

@@ -15,10 +15,10 @@
 
 ************************************************************************ */
 
-qx.Class.define("osparc.ui.table.cellrenderer.SVGButtonRenderer", {
+qx.Class.define("osparc.ui.table.cellrenderer.ButtonRenderer", {
   extend: osparc.ui.table.cellrenderer.Html,
 
-  construct: function(id, icon) {
+  construct: function(clickAction, icon) {
     this.base(arguments);
   },
 
@@ -29,28 +29,26 @@ qx.Class.define("osparc.ui.table.cellrenderer.SVGButtonRenderer", {
       init: "clickAction",
     },
 
-    svgIcon: {
+    buttonContent: {
       check: "String",
       nullable: false,
-      init: "osparc/offline.svg", // Default icon
-    },
+      init: "",
+    }
   },
 
   members: {
     // Override
     _getContentHtml: function(cellInfo) {
       const clickAction = this.getClickAction();
-      const iconPath = this.getSvgIcon();
-      const resMgr = qx.util.ResourceManager.getInstance();
-      const iconUrl = resMgr.toUri(iconPath); // Resolves to the correct URL of the asset
+      const buttonContent = this.getButtonContent();
 
       // Return the button with the image
       return `
         <div class="qx-material-button"
           data-action="${clickAction}" data-row="${cellInfo.row}"
           style="cursor:pointer; padding:2px 2px; width:29px; height:20px; display:flex; align-items:center; justify-content:center;"
         >
-          <img src="${iconUrl}" style="width:16px; height:16px;" alt="icon"/>
+          ${buttonContent}
         </div>
       `;
     },

services/static-webserver/client/source/class/osparc/ui/table/cellrenderer/ImageButtonRenderer.js

@@ -0,0 +1,42 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2035 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.ui.table.cellrenderer.ImageButtonRenderer", {
+  extend: osparc.ui.table.cellrenderer.ButtonRenderer,
+
+  construct: function(clickAction, icon) {
+    this.base(arguments);
+  },
+
+  properties: {
+    iconPath: {
+      check: "String",
+      init: null,
+      nullable: false,
+      apply: "__applyIconPath",
+    },
+  },
+
+  members: {
+    __applyIconPath: function(iconPath) {
+      const resMgr = qx.util.ResourceManager.getInstance();
+      const iconUrl = resMgr.toUri(iconPath); // Resolves to the correct URL of the asset
+
+      this.setButtonContent(`<img src="${iconUrl}" style="width:16px; height:16px;" alt="icon"/>`);
+    },
+  }
+});