🎨 [Frontend] Enh: Empty trash workflow (#7253)

Author: odeimaiz

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

@@ -1066,7 +1066,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       this._createSearchBar();
 
       const header = this.__header = new osparc.dashboard.StudyBrowserHeader();
-      this.__header.addListener("emptyTrashRequested", () => this.__emptyTrash(), this);
+      this.__header.addListener("trashEmptied", () => this.reloadResources(), this);
       this._addToLayout(header);
 
       this._createResourcesLayout("studiesList");
@@ -1444,19 +1444,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       return deleteButton;
     },
 
-    __emptyTrash: function() {
-      const win = this.__createConfirmEmptyTrashWindow();
-      win.center();
-      win.open();
-      win.addListener("close", () => {
-        if (win.getConfirmed()) {
-          osparc.data.Resources.fetch("trash", "delete")
-            .then(() => {
-              this.__resetStudiesList();
-            });
-        }
-      }, this);
-    },
+
 
     __createSelectButton: function() {
       const selectButton = new qx.ui.form.ToggleButton().set({
@@ -2241,16 +2229,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       return confirmationWin;
     },
 
-    __createConfirmEmptyTrashWindow: function() {
-      const msg = this.tr("All items will be permanently deleted");
-      const confirmationWin = new osparc.ui.window.Confirmation(msg).set({
-        caption: this.tr("Delete"),
-        confirmText: this.tr("Delete permanently"),
-        confirmAction: "delete"
-      });
-      return confirmationWin;
-    },
-
     // TASKS //
     __tasksReceived: function(tasks) {
       tasks.forEach(taskData => this._taskDataReceived(taskData));

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

@@ -45,7 +45,7 @@ qx.Class.define("osparc.dashboard.StudyBrowserHeader", {
     "locationChanged": "qx.event.type.Data",
     "workspaceUpdated": "qx.event.type.Data",
     "deleteWorkspaceRequested": "qx.event.type.Data",
-    "emptyTrashRequested": "qx.event.type.Event",
+    "trashEmptied": "qx.event.type.Event",
   },
 
   properties: {
@@ -193,12 +193,28 @@ qx.Class.define("osparc.dashboard.StudyBrowserHeader", {
           break;
         }
         case "empty-trash-button": {
-          control = new qx.ui.form.Button(this.tr("Delete all"), "@FontAwesome5Solid/trash/14").set({
+          control = new osparc.ui.form.FetchButton(this.tr("Delete all"), "@FontAwesome5Solid/trash/14").set({
             appearance: "danger-button",
             allowGrowY: false,
             alignY: "middle",
           });
-          control.addListener("execute", () => this.fireEvent("emptyTrashRequested"));
+          control.addListener("execute", () => {
+            const win = this.__createConfirmEmptyTrashWindow();
+            win.center();
+            win.open();
+            win.addListener("close", () => {
+              control.setFetching(true);
+              if (win.getConfirmed()) {
+                osparc.data.Resources.fetch("trash", "delete")
+                  .then(() => {
+                    this.fireEvent("trashEmptied")
+                  })
+                  .finally(() => control.setFetching(false));
+              } else {
+                control.setFetching(false)
+              }
+            }, this);
+          });
           this._addAt(control, this.self().POS.EMPTY_TRASH_BUTTON);
           break;
         }
@@ -207,6 +223,16 @@ qx.Class.define("osparc.dashboard.StudyBrowserHeader", {
       return control || this.base(arguments, id);
     },
 
+    __createConfirmEmptyTrashWindow: function() {
+      const msg = this.tr("All items will be permanently deleted");
+      const confirmationWin = new osparc.ui.window.Confirmation(msg).set({
+        caption: this.tr("Delete"),
+        confirmText: this.tr("Delete permanently"),
+        confirmAction: "delete"
+      });
+      return confirmationWin;
+    },
+
     __titleTapped: function() {
       const workspaceId = this.getCurrentWorkspaceId();
       const folderId = null;

services/static-webserver/client/source/class/osparc/ui/basic/Thumbnail.js

@@ -72,7 +72,7 @@ qx.Class.define("osparc.ui.basic.Thumbnail", {
             allowStretchX: true,
             allowStretchY: true,
             alignX: "center",
-            alignY: "middle"
+            alignY: "middle",
           });
           this.addCenteredWidget(control);
           break;
@@ -96,37 +96,55 @@ qx.Class.define("osparc.ui.basic.Thumbnail", {
         if (srcWidth && srcHeight) {
           const aspectRatio = srcWidth/srcHeight;
           if (this.getBounds() && this.getBounds().width < image.getMaxWidth()) {
-            image.setMaxWidth(this.getBounds().width);
+            image.set({
+              minWidth: parseInt(this.getBounds().width),
+              maxWidth: parseInt(this.getBounds().width),
+            });
           }
           if (this.getBounds() && this.getBounds().height < image.getMaxHeight()) {
-            image.setMaxHeight(this.getBounds().height);
+            image.set({
+              minHeight: parseInt(this.getBounds().height),
+              maxHeight: parseInt(this.getBounds().height),
+            });
           }
           const maxWidth = image.getMaxWidth();
           const maxHeight = image.getMaxHeight();
 
           if (maxWidth && maxHeight) {
             const newMaxHeight = maxWidth/aspectRatio;
             if (newMaxHeight < maxHeight) {
-              image.setMaxHeight(parseInt(newMaxHeight));
+              image.set({
+                minHeight: parseInt(newMaxHeight),
+                maxHeight: parseInt(newMaxHeight),
+              });
               return;
             }
             const newMaxWidth = maxHeight*aspectRatio;
             if (newMaxWidth < maxWidth) {
-              image.setMaxWidth(parseInt(newMaxWidth));
+              image.set({
+                minWidth: parseInt(newMaxWidth),
+                maxWidth: parseInt(newMaxWidth),
+              });
               return;
             }
             return;
           }
 
           if (maxWidth) {
             const newMaxHeight = maxWidth/aspectRatio;
-            image.setMaxHeight(parseInt(newMaxHeight));
+            image.set({
+              minHeight: parseInt(newMaxHeight),
+              maxHeight: parseInt(newMaxHeight),
+            });
             return;
           }
 
           if (maxHeight) {
             const newMaxWidth = maxHeight*aspectRatio;
-            image.setMaxWidth(parseInt(newMaxWidth));
+            image.set({
+              minWidth: parseInt(newMaxWidth),
+              maxWidth: parseInt(newMaxWidth),
+            });
             return;
           }
         }