🎨 [Frontend] Show trashedAt and trashedBy on Bin cards

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

@@ -151,27 +151,27 @@ qx.Class.define("osparc.dashboard.CardBase", {
     populateShareIcon: function(shareIcon, accessRights) {
       const gids = Object.keys(accessRights).map(key => parseInt(key));
 
-      const groupsStore = osparc.store.Groups.getInstance();
-
       // Icon
+      const groupsStore = osparc.store.Groups.getInstance();
       const groupEveryone = groupsStore.getEveryoneGroup();
       const groupProductEveryone = groupsStore.getEveryoneProductGroup();
       const organizations = groupsStore.getOrganizations();
+      const myGroupId = groupsStore.getMyGroupId();
+
       const organizationIds = Object.keys(organizations).map(key => parseInt(key));
       if (gids.includes(groupEveryone.getGroupId()) || gids.includes(groupProductEveryone.getGroupId())) {
         shareIcon.setSource(osparc.dashboard.CardBase.SHARED_ALL);
       } else if (organizationIds.filter(value => gids.includes(value)).length) { // find intersection
         shareIcon.setSource(osparc.dashboard.CardBase.SHARED_ORGS);
-      } else if (gids.length === 1) {
+      } else if (gids.length === 1 && gids[0] === myGroupId) {
         shareIcon.setSource(osparc.dashboard.CardBase.SHARE_ICON);
       } else {
         shareIcon.setSource(osparc.dashboard.CardBase.SHARED_USER);
       }
 
       // Tooltip
-      const canIWrite = osparc.data.model.Study.canIWrite(accessRights);
-      const myGroupId = groupsStore.getMyGroupId();
       if (gids.length === 0 || (gids.length === 1 && gids[0] === myGroupId)) {
+        const canIWrite = osparc.data.model.Study.canIWrite(accessRights);
         if (canIWrite) {
           shareIcon.set({
             toolTipText: qx.locale.Manager.tr("Share")
@@ -180,6 +180,16 @@ qx.Class.define("osparc.dashboard.CardBase", {
         return;
       }
 
+      this.addHintFromGids(shareIcon, gids);
+    },
+
+    addHintFromGids: function(icon, gids) {
+      const groupsStore = osparc.store.Groups.getInstance();
+      const groupEveryone = groupsStore.getEveryoneGroup();
+      const groupProductEveryone = groupsStore.getEveryoneProductGroup();
+      const organizations = groupsStore.getOrganizations();
+      const myGroupId = groupsStore.getMyGroupId();
+
       const sharedGrps = [];
       const groups = [];
       groups.push(groupEveryone);
@@ -193,8 +203,8 @@ qx.Class.define("osparc.dashboard.CardBase", {
         }
       });
 
-      const hint = new osparc.ui.hint.Hint(shareIcon);
-      shareIcon.addListener("mouseover", async () => {
+      const hint = new osparc.ui.hint.Hint(icon);
+      icon.addListener("mouseover", async () => {
         hint.show();
 
         // lazy load tooltip, this can be an expensive call
@@ -230,7 +240,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
           }
         }
       }, this);
-      shareIcon.addListener("mouseout", () => hint.exclude(), this);
+      icon.addListener("mouseout", () => hint.exclude(), this);
     },
   },
 
@@ -308,6 +318,18 @@ qx.Class.define("osparc.dashboard.CardBase", {
       nullable: true
     },
 
+    trashedAt: {
+      check: "Date",
+      apply: "_applyTrasehdAt",
+      nullable: true
+    },
+
+    trashedBy: {
+      check: "Number",
+      apply: "_applyTrashedBy",
+      nullable: true
+    },
+
     classifiers: {
       check: "Array"
     },
@@ -457,6 +479,8 @@ qx.Class.define("osparc.dashboard.CardBase", {
         owner,
         accessRights: resourceData.accessRights ? resourceData.accessRights : {},
         lastChangeDate: resourceData.lastChangeDate ? new Date(resourceData.lastChangeDate) : null,
+        trashedAt: resourceData.trashedAt ? new Date(resourceData.trashedAt) : null,
+        trashedBy: resourceData.trashedBy || null,
         icon: resourceData.thumbnail || this.self().PRODUCT_ICON,
         state: resourceData.state ? resourceData.state : {},
         classifiers: resourceData.classifiers && resourceData.classifiers ? resourceData.classifiers : [],
@@ -523,6 +547,14 @@ qx.Class.define("osparc.dashboard.CardBase", {
       throw new Error("Abstract method called!");
     },
 
+    _applyTrasehdAt: function(value, old) {
+      throw new Error("Abstract method called!");
+    },
+
+    _applyTrashedBy: function(value, old) {
+      throw new Error("Abstract method called!");
+    },
+
     _applyAccessRights: function(value, old) {
       throw new Error("Abstract method called!");
     },

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

@@ -90,6 +90,18 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
       nullable: true,
       apply: "__applyLastModified"
     },
+
+    trashedAt: {
+      check: "Date",
+      nullable: true,
+      apply: "__applyTrashedAt"
+    },
+
+    trashedBy: {
+      check: "Number",
+      nullable: true,
+      apply: "__applyTrashedBy"
+    },
   },
 
   members: {
@@ -107,16 +119,12 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
         }
         case "title":
           control = new qx.ui.basic.Label().set({
-            anonymous: true,
             font: "text-14",
           });
           this._add(control, osparc.dashboard.FolderButtonBase.POS.TITLE);
           break;
-        case "last-modified":
-          control = new qx.ui.basic.Label().set({
-            anonymous: true,
-            font: "text-12",
-          });
+        case "date-by":
+          control = new osparc.ui.basic.DateAndBy();
           this._add(control, osparc.dashboard.FolderButtonBase.POS.SUBTITLE);
           break;
         case "menu-button": {
@@ -150,6 +158,8 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
       folder.bind("parentFolderId", this, "parentFolderId");
       folder.bind("name", this, "title");
       folder.bind("lastModified", this, "lastModified");
+      folder.bind("trashedAt", this, "trashedAt");
+      folder.bind("trashedBy", this, "trashedBy");
 
       osparc.utils.Utils.setIdToWidget(this, "folderItem_" + folder.getFolderId());
 
@@ -222,15 +232,36 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
 
     __applyTitle: function(value) {
       const label = this.getChildControl("title");
-      label.setValue(value);
-
-      this.setToolTipText(value);
+      label.set({
+        value,
+        toolTipText: value,
+      });
     },
 
     __applyLastModified: function(value) {
       if (value) {
-        const label = this.getChildControl("last-modified");
-        label.setValue(osparc.utils.Utils.formatDateAndTime(value));
+        const dateBy = this.getChildControl("date-by");
+        dateBy.set({
+          date: value,
+          toolTipText: this.tr("Last modified"),
+        })
+      }
+    },
+
+    __applyTrashedAt: function(value) {
+      if (value && value.getTime() !== new Date(0).getTime()) {
+        const dateBy = this.getChildControl("date-by");
+        dateBy.set({
+          date: value,
+          toolTipText: this.tr("Moved to the bin"),
+        });
+      }
+    },
+
+    __applyTrashedBy: function(gid) {
+      if (gid) {
+        const dateBy = this.getChildControl("date-by");
+        dateBy.setGroupid(gid);
       }
     },
 

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

@@ -251,15 +251,8 @@ qx.Class.define("osparc.dashboard.GridButtonBase", {
           layout.add(control, {flex: 1});
           break;
         }
-        case "modified-text":
-          control = new qx.ui.basic.Label().set({
-            textColor: "contrasted-text-dark",
-            alignY: "middle",
-            rich: true,
-            anonymous: true,
-            font: "text-12",
-            allowGrowY: false
-          });
+        case "date-by":
+          control = new osparc.ui.basic.DateAndBy();
           layout = this.getChildControl("footer");
           layout.add(control, this.self().FPOS.MODIFIED);
           break;

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

@@ -176,9 +176,37 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
 
     // overridden
     _applyLastChangeDate: function(value, old) {
-      if (value && (this.isResourceType("study") || this.isResourceType("template"))) {
-        const label = this.getChildControl("modified-text");
-        label.setValue(osparc.utils.Utils.formatDateAndTime(value));
+      if (value) {
+        if (this.isResourceType("study") || this.isResourceType("template")) {
+          const dateBy = this.getChildControl("date-by");
+          dateBy.set({
+            date: value,
+            toolTipText: this.tr("Last modified"),
+          });
+        }
+      }
+    },
+
+    // overridden
+    _applyTrasehdAt: function(value) {
+      if (value && value.getTime() !== new Date(0).getTime()) {
+        if (this.isResourceType("study") || this.isResourceType("template")) {
+          const dateBy = this.getChildControl("date-by");
+          dateBy.set({
+            date: value,
+            toolTipText: this.tr("Moved to the bin"),
+          });
+        }
+      }
+    },
+
+    // overridden
+    _applyTrashedBy: function(gid) {
+      if (gid) {
+        if (this.isResourceType("study") || this.isResourceType("template")) {
+          const dateBy = this.getChildControl("date-by");
+          dateBy.setGroupId(gid);
+        }
       }
     },
 

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

@@ -68,9 +68,8 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
             column: osparc.dashboard.ListButtonBase.POS.SHARED
           });
           break;
-        case "last-change":
+        case "date-text":
           control = new qx.ui.basic.Label().set({
-            anonymous: true,
             font: "text-13",
             allowGrowY: false,
             minWidth: 120,
@@ -191,10 +190,39 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
       return control || this.base(arguments, id);
     },
 
+    // overridden
     _applyLastChangeDate: function(value, old) {
       if (value) {
-        const label = this.getChildControl("last-change");
-        label.setValue(osparc.utils.Utils.formatDateAndTime(value));
+        if (this.isResourceType("study") || this.isResourceType("template")) {
+          const dateBy = this.getChildControl("date-by");
+          dateBy.set({
+            date: value,
+            toolTipText: this.tr("Last modified"),
+          });
+        }
+      }
+    },
+
+    // overridden
+    _applyTrasehdAt: function(value) {
+      if (value && value.getTime() !== new Date(0).getTime()) {
+        if (this.isResourceType("study") || this.isResourceType("template")) {
+          const dateBy = this.getChildControl("date-by");
+          dateBy.set({
+            date: value,
+            toolTipText: this.tr("Moved to the bin"),
+          });
+        }
+      }
+    },
+
+    // overridden
+    _applyTrashedBy: function(gid) {
+      if (gid) {
+        if (this.isResourceType("study") || this.isResourceType("template")) {
+          const dateBy = this.getChildControl("date-by");
+          dateBy.setGroupId(gid);
+        }
       }
     },
 

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

@@ -90,7 +90,7 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", {
       MENU: 2,
     },
     FPOS: {
-      MODIFIED: 0
+      DATE: 0,
     }
   },