✨ [Frontend] Search Files

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

@@ -27,7 +27,8 @@ qx.Class.define("osparc.dashboard.CardContainer", {
       return (
         widget instanceof osparc.dashboard.CardBase ||
         widget instanceof osparc.dashboard.FolderButtonBase ||
-        widget instanceof osparc.dashboard.WorkspaceButtonBase
+        widget instanceof osparc.dashboard.WorkspaceButtonBase ||
+        widget instanceof osparc.dashboard.FileButtonItem
       );
     },
   },

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

@@ -0,0 +1,136 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2025 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+/**
+ * Widget used for displaying a File in the Study Browser
+ *
+ */
+
+qx.Class.define("osparc.dashboard.FileButtonItem", {
+  extend: osparc.dashboard.ListButtonBase,
+
+  /**
+    * @param file {osparc.data.model.File} The file to display
+    */
+  construct: function(file) {
+    this.base(arguments);
+
+    this.set({
+      cursor: "default",
+    });
+
+    this.setPriority(osparc.dashboard.CardBase.CARD_PRIORITY.ITEM);
+
+    this.set({
+      file: file
+    });
+  },
+
+  events: {
+    "openLocation": "qx.event.type.Data",
+  },
+
+  properties: {
+    file: {
+      check: "osparc.data.model.File",
+      nullable: false,
+      init: null,
+      apply: "__applyFile",
+    },
+  },
+
+  members: {
+    _createChildControlImpl: function(id) {
+      let control;
+      switch (id) {
+        case "date-by":
+          control = new osparc.ui.basic.DateAndBy();
+          this._add(control, {
+            row: 0,
+            column: osparc.dashboard.ListButtonBase.POS.LAST_CHANGE
+          });
+          break;
+        case "menu-button": {
+          control = new qx.ui.form.MenuButton().set({
+            appearance: "form-button-outlined",
+            padding: [0, 8],
+            maxWidth: osparc.dashboard.ListButtonItem.MENU_BTN_DIMENSIONS,
+            maxHeight: osparc.dashboard.ListButtonItem.MENU_BTN_DIMENSIONS,
+            alignX: "center",
+            alignY: "middle",
+            icon: "@FontAwesome5Solid/ellipsis-v/14",
+            focusable: false
+          });
+          // make it circular
+          control.getContentElement().setStyles({
+            "border-radius": `${osparc.dashboard.ListButtonItem.MENU_BTN_DIMENSIONS / 2}px`
+          });
+          this._add(control, {
+            row: 0,
+            column: osparc.dashboard.ListButtonBase.POS.OPTIONS
+          });
+          break;
+        }
+      }
+      return control || this.base(arguments, id);
+    },
+
+    __applyFile: function(file) {
+      const id = file.getPath();
+      this.set({
+        cardKey: "file-" + id,
+      });
+      osparc.utils.Utils.setIdToWidget(this, "fileItem_" + id);
+
+      this.setIcon(file.getIsDirectory() ? "@FontAwesome5Solid/folder/" : "@FontAwesome5Solid/file/");
+      this.getChildControl("icon").getChildControl("image").set({
+        paddingTop: 5,
+      });
+
+      this.getChildControl("title").set({
+        value: file.getName(),
+        toolTipText: file.getName(),
+      });
+
+      this.getChildControl("owner").set({
+        value: "Project Id: " + osparc.utils.Utils.uuidToShort(file.getProjectId()),
+      });
+
+      this.getChildControl("date-by").set({
+        date: file.getModifiedAt(),
+        toolTipText: this.tr("Last modified"),
+      });
+
+      const menuButton = this.getChildControl("menu-button");
+      menuButton.setVisibility("visible");
+
+      const menu = new qx.ui.menu.Menu().set({
+        appearance: "menu-wider",
+        position: "bottom-right",
+      });
+
+      const openLocationButton = new qx.ui.menu.Button(this.tr("Open location"), "@FontAwesome5Solid/folder/12");
+      openLocationButton.addListener("execute", () => this.fireDataEvent("openLocation", {
+        projectId: file.getProjectId(),
+        path: file.getPath()
+      }), this);
+      menu.add(openLocationButton);
+
+      menuButton.setMenu(menu);
+    },
+  }
+});

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

@@ -42,7 +42,7 @@ qx.Class.define("osparc.dashboard.ListButtonBase", {
   },
 
   statics: {
-    ITEM_HEIGHT: 35,
+    ITEM_HEIGHT: 40,
     SPACING: 5,
     POS: {
       THUMBNAIL: 0,

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

@@ -39,12 +39,12 @@ qx.Class.define("osparc.dashboard.ListButtonLoadMore", {
   members: {
     _applyFetching: function(value) {
       this.setIcon(osparc.dashboard.CardBase.LOADING_ICON);
+      const image = this.getChildControl("icon").getChildControl("image");
+      image.setPadding(5); // add padding to make the rotation smoother
       if (value) {
-        this.getChildControl("icon").getChildControl("image").getContentElement()
-          .addClass("rotate");
+        image.getContentElement().addClass("rotate");
       } else {
-        this.getChildControl("icon").getChildControl("image").getContentElement()
-          .removeClass("rotate");
+        image.getContentElement().removeClass("rotate");
       }
       this.setEnabled(!value);
     },

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

@@ -357,6 +357,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       resourcesContainer.addListener("trashWorkspaceRequested", e => this._trashWorkspaceRequested(e.getData()));
       resourcesContainer.addListener("untrashWorkspaceRequested", e => this._untrashWorkspaceRequested(e.getData()));
       resourcesContainer.addListener("deleteWorkspaceRequested", e => this._deleteWorkspaceRequested(e.getData()));
+      resourcesContainer.addListener("openLocation", e => this._openLocation(e.getData()));
 
       this._addToLayout(resourcesContainer);
     },
@@ -928,7 +929,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       throw new Error("Abstract method called!");
     },
 
-    _workspaceSelected: function(workspaceId) {
+    _openLocation: function(data) {
       throw new Error("Abstract method called!");
     },
 

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

@@ -29,6 +29,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
 
     this.__workspacesList = [];
     this.__foldersList = [];
+    this.__filesList = [];
     this.__resourcesList = [];
     this.__groupedContainersList = [];
     this.__resourceType = resourceType || "study";
@@ -41,14 +42,16 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       const foldersContainer = this.__foldersContainer = new osparc.dashboard.CardContainer();
       this.__foldersContainer.exclude();
       this._add(foldersContainer);
+
+      const filesContainer = this.__filesContainer = new osparc.dashboard.CardContainer();
+      filesContainer.getLayout().set({
+        spacingY: osparc.dashboard.ListButtonBase.SPACING,
+      });
+      this.__filesContainer.exclude();
+      this._add(filesContainer);
     }
 
-    const noResourcesFound = this.__noResourcesFound = new qx.ui.basic.Label("No resources found").set({
-      visibility: "excluded",
-      font: "text-14"
-    });
-    noResourcesFound.exclude();
-    this._add(noResourcesFound);
+    this.getChildControl("no-resources-found");
 
     const nonGroupedContainer = this.__nonGroupedContainer = this.__createFlatList();
     this._add(nonGroupedContainer);
@@ -98,6 +101,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     "changeContext": "qx.event.type.Data",
     "studyToFolderRequested": "qx.event.type.Data",
     "folderToFolderRequested": "qx.event.type.Data",
+    "openLocation": "qx.event.type.Data",
   },
 
   statics: {
@@ -128,22 +132,52 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
         spacingY: spacing
       });
     },
+
+    fitToContainer: function(card, container) {
+      const __fitToContainer = () => {
+        const bounds = container.getBounds() || container.getSizeHint();
+        card.setWidth(bounds.width);
+      };
+      [
+        "appear",
+        "resize",
+      ].forEach(ev => {
+        container.addListener(ev, () => __fitToContainer());
+      });
+      __fitToContainer();
+    },
   },
 
   members: {
     __foldersList: null,
     __workspacesList: null,
+    __filesList: null,
     __resourcesList: null,
     __groupedContainersList: null,
     __foldersContainer: null,
     __workspacesContainer: null,
+    __filesContainer: null,
     __nonGroupedContainer: null,
     __groupedContainers: null,
     __resourceType: null,
-    __noResourcesFound: null,
     __noResourcesFoundTimer: null,
 
-    __evaluateNoResourcesFoundLabel: function() {
+    _createChildControlImpl: function(id) {
+      let control;
+      switch (id) {
+        case "no-resources-found":
+          control = new qx.ui.basic.Label().set({
+            value: this.tr("No Resources found"),
+            visibility: "excluded",
+            font: "text-14",
+          });
+          this._add(control);
+          break;
+      }
+      return control || this.base(arguments, id);
+    },
+
+    __getNotFoundText: function() {
       let text = null;
       switch (this.__resourceType) {
         case "study": {
@@ -175,26 +209,36 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
         case "service":
           text = this.tr("No Apps found");
           break;
-        default:
-          text = this.tr("No Resources found");
-          break;
       }
+      return text;
+    },
 
-      this.__noResourcesFound.exclude();
+    __evaluateNoResourcesFoundLabel: function() {
+      const noResourcesFound = this.getChildControl("no-resources-found");
+      noResourcesFound.exclude();
       if (this.__noResourcesFoundTimer) {
         clearTimeout(this.__noResourcesFoundTimer);
       }
-      if (text && this.__resourcesList.length === 0) {
+
+      if (this.__resourcesList.length === 0) {
         // delay it a bit to avoid the initial flickering
         this.__noResourcesFoundTimer = setTimeout(() => {
-          this.__noResourcesFound.set({
-            value: text,
-            visibility: "visible",
-          });
+          this.showNoResourcesFound();
         }, 2000);
       }
     },
 
+    showNoResourcesFound: function() {
+      const text = this.__getNotFoundText();
+      if (text) {
+        const noResourcesFound = this.getChildControl("no-resources-found");
+        noResourcesFound.set({
+          value: text,
+        });
+        noResourcesFound.show();
+      }
+    },
+
     addNonResourceCard: function(card) {
       if (osparc.dashboard.CardContainer.isValidCard(card)) {
         let groupContainer = null;
@@ -320,17 +364,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       container.add(card);
 
       if (this.getMode() === "list") {
-        const fitToContainer = () => {
-          const bounds = container.getBounds() || container.getSizeHint();
-          card.setWidth(bounds.width);
-        };
-        [
-          "appear",
-          "resize",
-        ].forEach(ev => {
-          container.addListener(ev, () => fitToContainer());
-        });
-        fitToContainer();
+        this.self().fitToContainer(card, container);
       }
     },
 
@@ -526,6 +560,39 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     },
     // /FOLDERS
 
+    // FILES
+    setFilesToList: function(filesList) {
+      this.__filesList = filesList;
+    },
+
+    reloadFiles: function() {
+      if (this.__filesContainer) {
+        this.__filesContainer.removeAll();
+        this.__filesContainer.exclude();
+      }
+      let fileCards = [];
+      this.__filesList.forEach(fileData => fileCards.push(this.__fileToCard(fileData)));
+      return fileCards;
+    },
+
+    __fileToCard: function(fileData) {
+      const card = this.__createFileCard(fileData);
+      this.__filesContainer.add(card);
+      this.__filesContainer.show();
+      this.self().fitToContainer(card, this.__filesContainer);
+      return card;
+    },
+
+    __createFileCard: function(fileData) {
+      const file = new osparc.data.model.File(fileData);
+      const card = new osparc.dashboard.FileButtonItem(file);
+      [
+        "openLocation",
+      ].forEach(eName => card.addListener(eName, e => this.fireDataEvent(eName, e.getData())));
+      return card;
+    },
+    // /FILES
+
     __moveNoGroupToLast: function() {
       const idx = this.__groupedContainers.getChildren().findIndex(grpContainer => grpContainer === this.__getGroupContainer("no-group"));
       if (idx > -1) {