🎨 [Frontend] Search with tags filter (ITISFoundation#6554)

Author: odeimaiz

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

@@ -177,7 +177,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
           return;
         }
         this.__setFoldersToList([]);
-        osparc.store.Folders.getInstance().fetchFolders(folderId, workspaceId)
+        osparc.store.Folders.getInstance().fetchFolders(folderId, workspaceId, this.getOrderBy())
           .then(folders => {
             this.__setFoldersToList(folders);
           })
@@ -290,7 +290,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
           this._resourcesList.push(study);
         }
       });
-      this._reloadNewCards();
+      this.__reloadNewCards();
 
       studiesList.forEach(study => {
         const state = study["state"];
@@ -317,24 +317,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     __setFoldersToList: function(folders) {
       this.__foldersList = folders;
       folders.forEach(folder => folder["resourceType"] = "folder");
-
-      const sortByValueBE = this.getOrderBy().field;
-      let sortByValue = null;
-      switch (sortByValueBE) {
-        case "name":
-          sortByValue = "name";
-          break;
-        case "prj_owner":
-          sortByValue = "owner";
-          break;
-        case "creation_date":
-          sortByValue = "createdAt";
-          break;
-        case "last_change_date":
-          sortByValue = "lastModified";
-          break;
-      }
-      this.self().sortFoldersList(this.__foldersList, sortByValue);
       this.__reloadFolderCards();
     },
 
@@ -352,6 +334,9 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       const cards = this._resourcesContainer.reloadCards("studies");
       this.__configureStudyCards(cards);
 
+      // they were removed in the above reloadCards
+      this.__reloadFolders();
+
       this.__addNewStudyButtons();
 
       const loadMoreBtn = this.__createLoadMoreButton();
@@ -365,7 +350,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       osparc.filter.UIFilterController.dispatch("searchBarFilter");
     },
 
-    _reloadNewCards: function() {
+    __reloadNewCards: function() {
       this._resourcesContainer.setResourcesToList(this._resourcesList);
       const cards = this._resourcesContainer.reloadNewCards();
       this.__configureStudyCards(cards);
@@ -615,8 +600,14 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       delete reqParams["limit"];
       delete reqParams["offset"];
 
+      const cParams = this.__getRequestParams();
+      const currentParams = {};
+      Object.entries(cParams).forEach(([snakeKey, value]) => {
+        const key = osparc.utils.Utils.snakeToCamel(snakeKey);
+        currentParams[key] = value === "null" ? null : value;
+      });
+
       // check the entries in currentParams are the same as the reqParams
-      const currentParams = this.__getRequestParams();
       let sameContext = true;
       Object.entries(currentParams).forEach(([key, value]) => {
         sameContext &= key in reqParams && reqParams[key] === value;
@@ -655,8 +646,11 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       requestParams.orderBy = JSON.stringify(this.getOrderBy());
 
       const filterData = this._searchBarFilter.getFilterData();
+      // Use the ``search`` functionality only if the user types some text
+      // tags should only be used to filter the current context (search context ot workspace/folder context)
       if (filterData.text) {
-        requestParams.text = encodeURIComponent(filterData.text); // name, description and uuid
+        requestParams.text = filterData.text ? encodeURIComponent(filterData.text) : ""; // name, description and uuid
+        requestParams["tagIds"] = filterData.tags.length ? filterData.tags.join(",") : "";
         return requestParams;
       }
 
@@ -988,9 +982,9 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       });
       osparc.utils.Utils.setIdToWidget(sortByButton, "sortByButton");
       sortByButton.addListener("sortByChanged", e => {
-        this.setOrderBy(e.getData())
-        this.__resetStudiesList();
-        this.__reloadStudies();
+        this.setOrderBy(e.getData());
+        this.invalidateStudies();
+        this.reloadResources();
       }, this);
       this._toolbar.add(sortByButton);
     },
@@ -1228,13 +1222,12 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
 
     _updateStudyData: function(studyData) {
       studyData["resourceType"] = "study";
-      const studies = this._resourcesList;
-      const index = studies.findIndex(study => study["uuid"] === studyData["uuid"]);
+      const index = this._resourcesList.findIndex(study => study["uuid"] === studyData["uuid"]);
       if (index === -1) {
         // add it in first position, most likely it's a new study
-        studies.unshift(studyData);
+        this._resourcesList.unshift(studyData);
       } else {
-        studies[index] = studyData;
+        this._resourcesList[index] = studyData;
       }
       this._reloadCards();
     },

services/static-webserver/client/source/class/osparc/data/Resources.js

@@ -127,8 +127,7 @@ qx.Class.define("osparc.data.Resources", {
           getPageSearch: {
             useCache: false,
             method: "GET",
-            url: statics.API + "/projects:search?offset={offset}&limit={limit}&text={text}&order_by={orderBy}"
-            // url: statics.API + "/projects:search?offset={offset}&limit={limit}&text={text}&tags={tags}&order_by={orderBy}"
+            url: statics.API + "/projects:search?offset={offset}&limit={limit}&text={text}&tag_ids={tagIds}&order_by={orderBy}"
           },
           getOne: {
             useCache: false,
@@ -300,7 +299,7 @@ qx.Class.define("osparc.data.Resources", {
         endpoints: {
           getPage: {
             method: "GET",
-            url: statics.API + "/folders?workspace_id={workspaceId}&folder_id={folderId}&offset={offset}&limit={limit}"
+            url: statics.API + "/folders?workspace_id={workspaceId}&folder_id={folderId}&offset={offset}&limit={limit}&order_by={orderBy}"
           },
           getOne: {
             method: "GET",

services/static-webserver/client/source/class/osparc/store/Folders.js

@@ -34,17 +34,31 @@ qx.Class.define("osparc.store.Folders", {
   members: {
     foldersCached: null,
 
-    fetchFolders: function(folderId = null, workspaceId = null) {
+    fetchFolders: function(
+      folderId = null,
+      workspaceId = null,
+      orderBy = {
+        field: "modified_at",
+        direction: "desc"
+      }
+    ) {
       if (osparc.auth.Data.getInstance().isGuest()) {
         return new Promise(resolve => {
           resolve([]);
         });
       }
 
+      const curatedOrderBy = osparc.utils.Utils.deepCloneObject(orderBy);
+      if (curatedOrderBy.field !== "name") {
+        // only "modified_at" and "name" supported
+        curatedOrderBy.field = "modified_at";
+      }
+
       const params = {
-        "url": {
+        url: {
           workspaceId,
           folderId,
+          orderBy: JSON.stringify(curatedOrderBy),
         }
       };
       return osparc.data.Resources.getInstance().getAllPages("folders", params)

services/static-webserver/client/source/class/osparc/utils/Utils.js

@@ -1010,12 +1010,15 @@ qx.Class.define("osparc.utils.Utils", {
     isUrl: url => /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/gm.test(url),
 
     snakeToCamel: str => {
-      return str.toLowerCase().replace(/([-_][a-z])/g, group =>
-        group
-          .toUpperCase()
-          .replace("-", "")
-          .replace("_", "")
-      );
+      if (str.includes("_")) {
+        return str.toLowerCase().replace(/([-_][a-z])/g, group =>
+          group
+            .toUpperCase()
+            .replace("-", "")
+            .replace("_", "")
+        );
+      }
+      return str;
     },
 
     setIdToWidget: (qWidget, id) => {