🎨 [Frontend] Enh Drag&Drop: Drop on Trash

services/static-webserver/client/source/class/osparc/auth/Data.js

@@ -147,6 +147,17 @@ qx.Class.define("osparc.auth.Data", {
       return this.getUsername();
     },
 
+    getFullName: function() {
+      let name = "";
+      if (this.getFirstName()) {
+        name += this.getFirstName();
+      }
+      if (this.getLastName()) {
+        name += " " + this.getLastName();
+      }
+      return name;
+    },
+
     getFriendlyRole: function() {
       const role = this.getRole();
       let friendlyRole = role.replace(/_/g, " ");

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

@@ -161,6 +161,7 @@ qx.Class.define("osparc.dashboard.DragDropHelpers", {
         const folderOrigin = event.getData("osparc-moveFolder")["folderOrigin"];
         const folderToFolderData = {
           folderId: folderOrigin.getFolderId(),
+          workspaceId: folderOrigin.getWorkspaceId(),
           destWorkspaceId,
           destFolderId,
         };
@@ -169,11 +170,76 @@ qx.Class.define("osparc.dashboard.DragDropHelpers", {
       },
     },
 
+    trashStudy: {
+      dragOver: function(event) {
+        let compatible = false;
+        const studyDataOrigin = event.getData("osparc-moveStudy")["studyDataOrigin"];
+        const workspaceIdOrigin = studyDataOrigin["workspaceId"];
+        const workspaceOrigin = osparc.store.Workspaces.getInstance().getWorkspace(workspaceIdOrigin);
+        // Compatibility checks:
+        // - My Workspace -> Trash (0)
+        //   - Delete on Study
+        // - Shared Workspace -> Trash (1)
+        //   - Delete on Shared Workspace
+        if (workspaceIdOrigin === null) { // (0)
+          compatible = osparc.data.model.Study.canIDelete(studyDataOrigin["accessRights"]);
+        } else if (workspaceIdOrigin !== null) { // (1)
+          compatible = workspaceOrigin.getMyAccessRights()["delete"];
+        }
+
+        if (!compatible) {
+          // do not allow
+          event.preventDefault();
+        }
+
+        const dragWidget = osparc.dashboard.DragWidget.getInstance();
+        dragWidget.setDropAllowed(compatible);
+      },
+
+      drop: function(event) {
+        return event.getData("osparc-moveStudy")["studyDataOrigin"];
+      },
+    },
+
+    trashFolder: {
+      dragOver: function(event) {
+        let compatible = false;
+        const folderOrigin = event.getData("osparc-moveFolder")["folderOrigin"];
+        const workspaceIdOrigin = folderOrigin.getWorkspaceId();
+        const workspaceOrigin = osparc.store.Workspaces.getInstance().getWorkspace(workspaceIdOrigin);
+        // Compatibility checks:
+        // - My Workspace -> Trash (0)
+        //   - Yes
+        // - Shared Workspace -> Trash (1)
+        //   - Delete on Shared Workspace
+        if (workspaceIdOrigin === null) { // (0)
+          compatible = true;
+        } else if (workspaceIdOrigin !== null) { // (1)
+          compatible = workspaceOrigin.getMyAccessRights()["delete"];
+        }
+
+        if (!compatible) {
+          // do not allow
+          event.preventDefault();
+        }
+
+        const dragWidget = osparc.dashboard.DragWidget.getInstance();
+        dragWidget.setDropAllowed(compatible);
+      },
+
+      drop: function(event) {
+        const folderOrigin = event.getData("osparc-moveFolder")["folderOrigin"];
+        return folderOrigin.getFolderId();
+      },
+    },
+
     dragLeave: function(item) {
       const dragWidget = osparc.dashboard.DragWidget.getInstance();
       dragWidget.setDropAllowed(false);
 
-      item.getChildControl("icon").resetTextColor();
+      if (item) {
+        item.getChildControl("icon").resetTextColor();
+      }
     },
 
     dragEnd: function(draggedItem) {

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

@@ -27,10 +27,10 @@ qx.Class.define("osparc.dashboard.DragWidget", {
     }));
 
     this.set({
+      appearance: "strong-ui",
       opacity: 0.9,
       padding: 10,
       zIndex: 1000,
-      backgroundColor: "strong-main",
       decorator: "rounded",
       visibility: "excluded",
     });
@@ -71,7 +71,7 @@ qx.Class.define("osparc.dashboard.DragWidget", {
     __dropAllowed: function(allowed) {
       this.getChildControl("allowed-icon").set({
         source: allowed ? "@FontAwesome5Solid/check/14" : "@FontAwesome5Solid/times/14",
-        textColor: allowed ? "text" : "danger-red",
+        textColor: allowed ? "default-button-text" : "danger-red",
       });
     },
 

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

@@ -272,7 +272,7 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
         menu.addSeparator();
 
         const trashButton = new qx.ui.menu.Button(this.tr("Trash"), "@FontAwesome5Solid/trash/12");
-        trashButton.addListener("execute", () => this.__trashFolderRequested(), this);
+        trashButton.addListener("execute", () => this.fireDataEvent("trashFolderRequested", this.getFolderId()), this);
         menu.add(trashButton);
       } else if (studyBrowserContext === "trash") {
         const restoreButton = new qx.ui.menu.Button(this.tr("Restore"), "@MaterialIcons/restore_from_trash/16");
@@ -325,24 +325,6 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
       folderEditor.addListener("cancel", () => win.close());
     },
 
-    __trashFolderRequested: function() {
-      const trashDays = osparc.store.StaticInfo.getInstance().getTrashRetentionDays();
-      let msg = this.tr("Are you sure you want to move the Folder and all its content to the trash?");
-      msg += "<br><br>" + this.tr("It will be permanently deleted after ") + trashDays + " days.";
-      const confirmationWin = new osparc.ui.window.Confirmation(msg).set({
-        caption: this.tr("Move to Trash"),
-        confirmText: this.tr("Move to Trash"),
-        confirmAction: "delete"
-      });
-      confirmationWin.center();
-      confirmationWin.open();
-      confirmationWin.addListener("close", () => {
-        if (confirmationWin.getConfirmed()) {
-          this.fireDataEvent("trashFolderRequested", this.getFolderId());
-        }
-      }, this);
-    },
-
     __deleteFolderRequested: function() {
       const msg = this.tr("Are you sure you want to delete") + " <b>" + this.getTitle() + "</b>?";
       const confirmationWin = new osparc.ui.window.Confirmation(msg).set({

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

@@ -35,6 +35,8 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
 
   events: {
     "trashContext": "qx.event.type.Event",
+    "trashStudyRequested": "qx.event.type.Data",
+    "trashFolderRequested": "qx.event.type.Data",
     "changeSharedWith": "qx.event.type.Data",
     "changeSelectedTags": "qx.event.type.Data",
     "changeServiceType": "qx.event.type.Data"
@@ -114,9 +116,36 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
         }
       });
       this.evaluateTrashEmpty();
+      this.__attachDropHandlers(trashButton);
       return trashButton;
     },
 
+    __attachDropHandlers: function(trashButton) {
+      trashButton.setDroppable(true);
+
+      trashButton.addListener("dragover", e => {
+        if (e.supportsType("osparc-moveStudy")) {
+          osparc.dashboard.DragDropHelpers.trashStudy.dragOver(e);
+        } else if (e.supportsType("osparc-moveFolder")) {
+          osparc.dashboard.DragDropHelpers.trashFolder.dragOver(e);
+        }
+      });
+
+      trashButton.addListener("dragleave", () => {
+        osparc.dashboard.DragDropHelpers.dragLeave();
+      });
+
+      trashButton.addListener("drop", e => {
+        if (e.supportsType("osparc-moveStudy")) {
+          const studyData = osparc.dashboard.DragDropHelpers.trashStudy.drop(e);
+          this.fireDataEvent("trashStudyRequested", studyData);
+        } else if (e.supportsType("osparc-moveFolder")) {
+          const folderId = osparc.dashboard.DragDropHelpers.trashFolder.drop(e);
+          this.fireDataEvent("trashFolderRequested", folderId);
+        }
+      });
+    },
+
     evaluateTrashEmpty: function() {
       const studiesParams = {
         url: {