Dashboard UI/UX: Study multi-selection (ITISFoundation#2852)

Author: odeimaiz

services/web/client/source/class/osparc/dashboard/ResourceBrowserBase.js

@@ -120,7 +120,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       const topBar = this.__createTopBar(resourceType);
       resourcesLayout.add(topBar);
 
-      const secondaryBar = this._secondaryBar = new qx.ui.container.Composite(new qx.ui.layout.HBox());
+      const secondaryBar = this._secondaryBar = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
       resourcesLayout.add(secondaryBar);
 
       const resourcesContainer = this._resourcesContainer = this.__createResourcesContainer();

services/web/client/source/class/osparc/dashboard/StudyBrowser.js

@@ -39,6 +39,16 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     "updateTemplates": "qx.event.type.Event"
   },
 
+  properties: {
+    multiSelection: {
+      check: "Boolean",
+      init: false,
+      nullable: false,
+      event: "changeMultiSelection",
+      apply: "__applyMultiSelection"
+    }
+  },
+
   members: {
     __studies: null,
     __newStudyBtn: null,
@@ -131,9 +141,22 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
 
       const importStudyButton = this.__createImportButton();
       this._secondaryBar.add(importStudyButton);
+      importStudyButton.exclude();
+      osparc.utils.DisabledPlugins.isImportDisabled()
+        .then(isDisabled => {
+          importStudyButton.setVisibility(isDisabled ? "excluded" : "visible");
+        });
+
+      this._secondaryBar.add(new qx.ui.core.Spacer(), {
+        flex: 1
+      });
+
       const studiesDeleteButton = this.__createDeleteButton(false);
       this._secondaryBar.add(studiesDeleteButton);
 
+      const selectStudiesButton = this.__createSelectButton();
+      this._secondaryBar.add(selectStudiesButton);
+
       osparc.utils.Utils.setIdToWidget(this._resourcesContainer, "studiesList");
 
       const newStudyButton = this.__createNewStudyButton();
@@ -142,19 +165,11 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       const loadingStudiesBtn = this._createLoadMoreButton("studiesLoading");
       this._resourcesContainer.add(loadingStudiesBtn);
 
-      this._resourcesContainer.addListener("changeSelection", e => {
-        const nSelected = e.getData().length;
-        this._resourcesContainer.getChildren().forEach(studyItem => {
-          if (osparc.dashboard.ResourceBrowserBase.isCardButtonItem(studyItem)) {
-            studyItem.setMultiSelectionMode(Boolean(nSelected));
-          }
-        });
-      }, this);
-      this._resourcesContainer.bind("selection", this.__newStudyBtn, "enabled", {
-        converter: selection => !selection.length
+      this.bind("multiSelection", this.__newStudyBtn, "enabled", {
+        converter: val => !val
       });
-      this._resourcesContainer.bind("selection", importStudyButton, "enabled", {
-        converter: selection => !selection.length
+      this.bind("multiSelection", importStudyButton, "enabled", {
+        converter: val => !val
       });
       this._resourcesContainer.bind("selection", studiesDeleteButton, "visibility", {
         converter: selection => selection.length ? "visible" : "excluded"
@@ -249,6 +264,29 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       return deleteButton;
     },
 
+    __createSelectButton: function() {
+      const selectButton = new qx.ui.form.ToggleButton().set({
+        marginRight: 8
+      });
+      selectButton.bind("value", this, "multiSelection");
+      selectButton.bind("value", selectButton, "label", {
+        converter: val => val ? this.tr("Cancel Selection") : this.tr("Select Studies")
+      });
+      this.bind("multiSelection", selectButton, "value");
+      return selectButton;
+    },
+
+    __applyMultiSelection: function(value) {
+      this._resourcesContainer.getChildren().forEach(studyItem => {
+        if (osparc.dashboard.ResourceBrowserBase.isCardButtonItem(studyItem)) {
+          studyItem.setMultiSelectionMode(value);
+          if (value === false) {
+            studyItem.setValue(false);
+          }
+        }
+      });
+    },
+
     __getStudyAndStart: function(loadStudyId) {
       const params = {
         url: {
@@ -295,6 +333,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       const commandEsc = new qx.ui.command.Command("Esc");
       commandEsc.addListener("execute", e => {
         this.resetSelection();
+        this.setMultiSelection(false);
       });
       osparc.store.Store.getInstance().addListener("changeTags", () => {
         this.invalidateStudies();
@@ -427,11 +466,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
         position: "bottom-right"
       });
 
-      const selectButton = this.__getSelectMenuButton(item, studyData);
-      if (selectButton) {
-        menu.add(selectButton);
-      }
-
       const renameStudyButton = this.__getRenameStudyMenuButton(studyData);
       menu.add(renameStudyButton);
 
@@ -453,15 +487,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       return menu;
     },
 
-    __getSelectMenuButton: function(item) {
-      const selectButton = new qx.ui.menu.Button(this.tr("Select"));
-      selectButton.addListener("execute", () => {
-        item.setValue(true);
-        this._resourcesContainer.setLastSelectedItem(item);
-      }, this);
-      return selectButton;
-    },
-
     __getRenameStudyMenuButton: function(studyData) {
       const renameButton = new qx.ui.menu.Button(this.tr("Rename"));
       renameButton.addListener("execute", () => {
@@ -550,8 +575,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
 
     __itemClicked: function(item, isShiftPressed) {
       const studiesCont = this._resourcesContainer;
-      const selected = item.getValue();
-      const selection = studiesCont.getSelection();
 
       if (isShiftPressed) {
         const lastIdx = studiesCont.getLastSelectedIndex();
@@ -566,7 +589,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       }
       studiesCont.setLastSelectedIndex(studiesCont.getIndex(item));
 
-      if (selected && selection.length === 1) {
+      if (!item.isMultiSelectionMode()) {
         const studyData = this.__getStudyData(item.getUuid(), false);
         this._startStudy(studyData);
       }

services/web/client/source/class/osparc/utils/DisabledPlugins.js

@@ -25,6 +25,7 @@ qx.Class.define("osparc.utils.DisabledPlugins", {
   statics: {
     EXPORT: "WEBSERVER_EXPORTER",
     DUPLICATE: "WEBSERVER_EXPORTER",
+    IMPORT: "WEBSERVER_EXPORTER",
     SCICRUNCH: "WEBSERVER_SCICRUNCH",
     VERSION_CONTROL: "WEBSERVER_VERSION_CONTROL",
     META_MODELING: "WEBSERVER_META_MODELING",
@@ -37,6 +38,10 @@ qx.Class.define("osparc.utils.DisabledPlugins", {
       return this.self().isPluginDisabled(this.self().EXPORT);
     },
 
+    isImportDisabled: function() {
+      return this.self().isPluginDisabled(this.self().EXPORT);
+    },
+
     isScicrunchDisabled: function() {
       return this.self().isPluginDisabled(this.self().SCICRUNCH);
     },