🎨 Frontend: Dashboard card bind to model

services/static-webserver/client/source/class/osparc/dashboard/CardBase.js

@@ -313,7 +313,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
     },
 
     workbench: {
-      check: "Object",
+      check: "osparc.data.model.Workbench",
       nullable: true,
       apply: "__applyWorkbench"
     },
@@ -403,49 +403,70 @@ qx.Class.define("osparc.dashboard.CardBase", {
       dragover : true
     },
 
+    __resourceModel: null,
+
     isResourceType: function(resourceType) {
       return this.getResourceType() === resourceType;
     },
 
     __applyResourceData: function(resourceData) {
-      let uuid = null;
-      let owner = null;
-      let workbench = null;
-      let defaultHits = null;
-      switch (resourceData["resourceType"]) {
-        case "study":
-          uuid = resourceData.uuid ? resourceData.uuid : null;
-          owner = resourceData.prjOwner ? resourceData.prjOwner : "";
-          workbench = resourceData.workbench ? resourceData.workbench : {};
-          break;
-        case "template":
-          uuid = resourceData.uuid ? resourceData.uuid : null;
-          owner = resourceData.prjOwner ? resourceData.prjOwner : "";
-          workbench = resourceData.workbench ? resourceData.workbench : {};
-          break;
-        case "service":
-          uuid = resourceData.key ? resourceData.key : null;
-          owner = resourceData.owner ? resourceData.owner : "";
-          defaultHits = 0;
-          break;
+      if (resourceData["resourceType"]) {
+        this.set({
+          resourceType: resourceData.resourceType
+        });
+
+        let model = null;
+        switch (resourceData["resourceType"]) {
+          case "study":
+          case "template":
+            model = new osparc.data.model.Study(resourceData);
+            model["resourceType"] = resourceData["resourceType"];
+            break;
+          case "service":
+            model = new osparc.data.model.Service(resourceData);
+            model["resourceType"] = resourceData["resourceType"];
+            break;
+        }
+        if (model) {
+          this.__bindModelToCard(model);
+        }
       }
+    },
 
-      this.set({
-        resourceType: resourceData.resourceType,
-        uuid,
-        title: resourceData.name,
-        description: resourceData.description,
-        owner,
-        accessRights: resourceData.accessRights ? resourceData.accessRights : {},
-        lastChangeDate: resourceData.lastChangeDate ? new Date(resourceData.lastChangeDate) : null,
-        icon: resourceData.thumbnail || this.self().PRODUCT_ICON,
-        state: resourceData.state ? resourceData.state : {},
-        classifiers: resourceData.classifiers && resourceData.classifiers ? resourceData.classifiers : [],
-        quality: resourceData.quality ? resourceData.quality : null,
-        uiMode: resourceData.ui && resourceData.ui.mode ? resourceData.ui.mode : null,
-        hits: resourceData.hits ? resourceData.hits : defaultHits,
-        workbench
-      });
+    getResourceModel: function() {
+      return this.__resourceModel;
+    },
+
+    __bindModelToCard: function(model) {
+      this.__resourceModel = model;
+      if (model instanceof osparc.data.model.Study) {
+        model.bind("uuid", this, "uuid");
+        model.bind("name", this, "title");
+        model.bind("description", this, "description");
+        model.bind("workbench", this, "workbench");
+        model.bind("prjOwner", this, "owner");
+        model.bind("accessRights", this, "accessRights");
+        model.bind("lastChangeDate", this, "lastChangeDate");
+        model.bind("thumbnail", this, "icon", {
+          converter: t => t || this.self().PRODUCT_ICON
+        });
+        model.bind("state", this, "state");
+        model.bind("classifiers", this, "classifiers");
+        model.bind("quality", this, "quality");
+        model.getUi().bind("mode", this, "uiMode");
+      } else if (model instanceof osparc.data.model.Service) {
+        model.bind("key", this, "uuid");
+        model.bind("name", this, "title");
+        model.bind("description", this, "description");
+        model.bind("owner", this, "owner");
+        model.bind("accessRights", this, "accessRights");
+        model.bind("thumbnail", this, "icon", {
+          converter: t => t || this.self().PRODUCT_ICON
+        });
+        model.bind("classifiers", this, "classifiers");
+        model.bind("quality", this, "quality");
+        model.bind("hits", this, "hits");
+      }
     },
 
     __applyUuid: function(value, old) {
@@ -533,14 +554,15 @@ qx.Class.define("osparc.dashboard.CardBase", {
         return;
       }
 
+      const workbenchData = workbench.serialize();
       if (this.isResourceType("study") || this.isResourceType("template")) {
-        this.setEmptyWorkbench(Object.keys(workbench).length === 0);
+        this.setEmptyWorkbench(Object.keys(workbenchData).length === 0);
       }
 
       // Updatable study
-      if (osparc.study.Utils.isWorkbenchRetired(workbench)) {
+      if (osparc.study.Utils.isWorkbenchRetired(workbenchData)) {
         this.setUpdatable("retired");
-      } else if (osparc.study.Utils.isWorkbenchDeprecated(workbench)) {
+      } else if (osparc.study.Utils.isWorkbenchDeprecated(workbenchData)) {
         this.setUpdatable("deprecated");
       } else {
         const updatable = osparc.study.Utils.isWorkbenchUpdatable(workbench)
@@ -786,7 +808,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
     },
 
     __openMoreOptions: function() {
-      const resourceData = this.getResourceData();
+      const resourceData = this.__resourceModel.serialize();
       const resourceDetails = new osparc.dashboard.ResourceDetails(resourceData);
       const win = osparc.dashboard.ResourceDetails.popUpInWindow(resourceDetails);
       [

services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js

@@ -396,6 +396,16 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       return isLogged;
     },
 
+    _updateCard: function(resourceData) {
+      const cards = this._resourcesContainer.getCards();
+      const found = cards.filter(c => osparc.dashboard.ResourceBrowserBase.isCardButtonItem(c) && c.getUuid() === resourceData["uuid"]);
+      found.forEach(f => {
+        // since we are passing and object, the property change won't be triggered. reset the value first
+        f.setResourceData({});
+        f.setResourceData(resourceData);
+      });
+    },
+
     _removeResourceCards: function() {
       const cards = this._resourcesContainer.getCards();
       for (let i=cards.length-1; i>=0; i--) {
@@ -481,8 +491,8 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       return openButton;
     },
 
-    _openResourceDetails: function(resourceData) {
-      const resourceDetails = new osparc.dashboard.ResourceDetails(resourceData);
+    _openResourceDetails: function(resourceData, resourceModel) {
+      const resourceDetails = new osparc.dashboard.ResourceDetails(resourceData, resourceModel);
       const win = osparc.dashboard.ResourceDetails.popUpInWindow(resourceDetails);
       resourceDetails.addListener("updateStudy", e => this._updateStudyData(e.getData()));
       resourceDetails.addListener("updateTemplate", e => this._updateTemplateData(e.getData()));

services/static-webserver/client/source/class/osparc/dashboard/ResourceDetails.js

@@ -18,10 +18,11 @@
 qx.Class.define("osparc.dashboard.ResourceDetails", {
   extend: osparc.ui.window.TabbedView,
 
-  construct: function(resourceData) {
+  construct: function(resourceData, resourceModel) {
     this.base(arguments);
 
     this.__resourceData = resourceData;
+    this.__resourceModel = resourceModel;
 
     this.__resourceModel = null;
     switch (resourceData["resourceType"]) {
@@ -136,6 +137,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
         this.__openResource();
         return;
       }
+
       this.__openButton.setFetching(true);
       const params = {
         url: {
@@ -344,6 +346,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
         infoCard.addListener("openAccessRights", () => this.openAccessRights());
         infoCard.addListener("openClassifiers", () => this.openClassifiers());
         infoCard.addListener("openQuality", () => this.openQuality());
+
         page.addToContent(infoCard);
       }
       page.addListenerOnce("appear", lazyLoadContent, this);

services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js

@@ -448,7 +448,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
 
       if (!item.isMultiSelectionMode()) {
         const studyData = this.__getStudyData(item.getUuid(), false);
-        this._openResourceDetails(studyData);
+        this._openResourceDetails(studyData, item.getResourceModel());
         this.resetSelection();
       }
     },
@@ -996,7 +996,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       } else {
         studies[index] = studyData;
       }
-      this._reloadCards();
+      this._updateCard(studyData);
     },
 
     __removeFromStudyList: function(studyId) {

services/static-webserver/client/source/class/osparc/dashboard/TemplateBrowser.js

@@ -127,7 +127,7 @@ qx.Class.define("osparc.dashboard.TemplateBrowser", {
       if (!card.isLocked()) {
         card.setValue(false);
         const templateData = this.__getTemplateData(card.getUuid());
-        this._openResourceDetails(templateData);
+        this._openResourceDetails(templateData, card.getResourceModel());
       }
       this.resetSelection();
     },