🎨 [Frontend] Support center: Enhance conversation list item

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

@@ -45,7 +45,7 @@ qx.Class.define("osparc.data.model.Conversation", {
     this.__listenToConversationMessageWS();
 
     if (conversationData.type === "SUPPORT") {
-      this.__fetchLastMessage();
+      this.__fetchFirstAndLastMessages();
     }
   },
 
@@ -132,6 +132,13 @@ qx.Class.define("osparc.data.model.Conversation", {
       event: "changeNameAlias",
     },
 
+    firstMessage: {
+      check: "Object",
+      nullable: true,
+      init: null,
+      event: "changeFirstMessage",
+    },
+
     lastMessage: {
       check: "Object",
       nullable: true,
@@ -154,7 +161,7 @@ qx.Class.define("osparc.data.model.Conversation", {
   },
 
   members: {
-    __fetchLastMessagePromise: null,
+    __fetchingFirstAndLastMessage: null,
     __nextRequestParams: null,
     __messages: null,
 
@@ -200,24 +207,34 @@ qx.Class.define("osparc.data.model.Conversation", {
       });
     },
 
-    __fetchLastMessage: function() {
-      if (this.__fetchLastMessagePromise) {
-        return this.__fetchLastMessagePromise;
+    __fetchFirstAndLastMessages: function() {
+      if (this.__fetchingFirstAndLastMessage) {
+        return this.__fetchingFirstAndLastMessage;
       }
 
-      let promise = osparc.store.ConversationsSupport.getInstance().fetchLastMessage(this.getConversationId());
-      promise
-        .then(lastMessage => {
-          this.addMessage(lastMessage);
-          promise = null;
-          return lastMessage;
+      this.__fetchingFirstAndLastMessage = true;
+      osparc.store.ConversationsSupport.getInstance().fetchLastMessage(this.getConversationId())
+        .then(resp => {
+          const messages = resp["data"];
+          if (messages.length) {
+            this.addMessage(messages[0]);
+            this.setLastMessage(messages[0]);
+          }
+          // fetch first message only if there is more than one message
+          if (resp["_meta"]["total"] === 1) {
+            this.setFirstMessage(messages[0]);
+          } else if (resp["_meta"]["total"] > 1) {
+            osparc.store.ConversationsSupport.getInstance().fetchFirstMessage(this.getConversationId(), resp["_meta"])
+              .then(firstMessages => {
+                if (firstMessages.length) {
+                  this.setFirstMessage(firstMessages[0]);
+                }
+              });
+          }
+          return null;
         })
-        .finally(() => {
-          this.__fetchLastMessagePromise = null;
-        });
-
-      this.__fetchLastMessagePromise = promise;
-      return promise;
+        .catch(err => osparc.FlashMessenger.logError(err))
+        .finally(() => this.__fetchingFirstAndLastMessage = null);
     },
 
     amIOwner: function() {

services/static-webserver/client/source/class/osparc/desktop/StudyEditor.js

@@ -288,7 +288,7 @@ qx.Class.define("osparc.desktop.StudyEditor", {
       }, this);
 
       study.listenToChanges(); // this includes the listener on the workbench and ui
-      study.addListener("projectDocumentChanged", e => this.projectDocumentChanged(e.getData()), this);
+      study.addListener("projectDocumentChanged", e => this.__projectDocumentChanged(e.getData()), this);
 
       if (osparc.utils.DisabledPlugins.isRTCEnabled()) {
         this.__listenToProjectDocument();
@@ -998,7 +998,7 @@ qx.Class.define("osparc.desktop.StudyEditor", {
     /**
      * @param {JSON Patch} data It will soon be used to patch the project document https://datatracker.ietf.org/doc/html/rfc6902
      */
-    projectDocumentChanged: function(patchData) {
+    __projectDocumentChanged: function(patchData) {
       patchData["userGroupId"] = osparc.auth.Data.getInstance().getGroupId();
       // avoid echo loop
       if (this.__blockUpdates) {

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

@@ -140,29 +140,28 @@ qx.Class.define("osparc.store.ConversationsSupport", {
     },
 
     fetchLastMessage: function(conversationId) {
-      if (
-        conversationId in this.__conversationsCached &&
-        this.__conversationsCached[conversationId].getLastMessage()
-      ) {
-        return Promise.resolve(this.__conversationsCached[conversationId].getLastMessage());
-      }
-
       const params = {
         url: {
           conversationId,
           offset: 0,
           limit: 1,
         }
       };
-      return osparc.data.Resources.fetch("conversationsSupport", "getMessagesPage", params)
-        .then(messagesData => {
-          if (messagesData && messagesData.length) {
-            const lastMessage = messagesData[0];
-            this.__addMessageToConversation(conversationId, lastMessage);
-            return lastMessage;
-          }
-          return null;
-        });
+      const options = {
+        resolveWResponse: true
+      };
+      return osparc.data.Resources.fetch("conversationsSupport", "getMessagesPage", params, options);
+    },
+
+    fetchFirstMessage: function(conversationId, conversationPaginationMetadata) {
+      const params = {
+        url: {
+          conversationId,
+          offset: Math.max(0, conversationPaginationMetadata["total"] - 1),
+          limit: 1,
+        }
+      };
+      return osparc.data.Resources.fetch("conversationsSupport", "getMessagesPage", params);
     },
 
     postMessage: function(conversationId, message) {

services/static-webserver/client/source/class/osparc/support/Conversation.js

@@ -155,7 +155,9 @@ qx.Class.define("osparc.support.Conversation", {
       if (showLayout) {
         this.__populateShareProjectCB();
         const currentStudy = osparc.store.Store.getInstance().getCurrentStudy();
-        currentStudy.addListener("changeAccessRights", () => this.__populateShareProjectCB(), this);
+        if (currentStudy) {
+          currentStudy.addListener("changeAccessRights", () => this.__populateShareProjectCB(), this);
+        }
       }
     },
 

services/static-webserver/client/source/class/osparc/support/ConversationListItem.js

@@ -27,7 +27,13 @@ qx.Class.define("osparc.support.ConversationListItem", {
 
     // decorate
     this.getChildControl("thumbnail").setDecorator("circled");
+    this.getChildControl("title").set({
+      rich: false, // let ellipsis work
+    });
     this.getChildControl("subtitle").set({
+      rich: false, // let ellipsis work
+    });
+    this.getChildControl("sub-subtitle").set({
       textColor: "text-disabled",
     });
   },
@@ -48,26 +54,53 @@ qx.Class.define("osparc.support.ConversationListItem", {
 
       this.__populateWithLastMessage();
       conversation.addListener("changeLastMessage", this.__populateWithLastMessage, this);
+
+      this.__populateWithFirstMessage();
+      conversation.addListener("changeFirstMessage", this.__populateWithFirstMessage, this);
     },
 
     __populateWithLastMessage: function() {
-      const lastMessage = this.getConversation().getLastMessage();
+      const conversation = this.getConversation();
+      const lastMessage = conversation.getLastMessage();
       if (lastMessage) {
         const date = osparc.utils.Utils.formatDateAndTime(new Date(lastMessage.created));
         this.set({
-          subtitle: date,
+          role: date,
         });
         const userGroupId = lastMessage.userGroupId;
         osparc.store.Users.getInstance().getUser(userGroupId)
           .then(user => {
             if (user) {
               this.set({
                 thumbnail: user.getThumbnail(),
-                subtitle: user.getLabel() + " - " + date,
+                subtitle: user.getLabel() + ": " + lastMessage["content"],
+              });
+            }
+          });
+      }
+    },
+
+    __populateWithFirstMessage: function() {
+      const conversation = this.getConversation();
+      const firstMessage = conversation.getFirstMessage();
+      if (firstMessage) {
+        const userGroupId = firstMessage.userGroupId;
+        osparc.store.Users.getInstance().getUser(userGroupId)
+          .then(user => {
+            if (user) {
+              const amISupporter = osparc.store.Groups.getInstance().amIASupportUser();
+              let subSubtitle = "Started";
+              if (amISupporter) {
+                subSubtitle += " by " + user.getLabel();
+              }
+              const date = osparc.utils.Utils.formatDateAndTime(new Date(firstMessage.created));
+              subSubtitle += " on " + date;
+              this.set({
+                subSubtitle,
               });
             }
           });
       }
     },
-  }
+  },
 });

services/static-webserver/client/source/class/osparc/support/ConversationPage.js

@@ -249,6 +249,11 @@ qx.Class.define("osparc.support.ConversationPage", {
           if (extraContext && Object.keys(extraContext).length) {
             const ticketIdLabel = createExtraContextLabel(`Ticket ID: ${osparc.utils.Utils.uuidToShort(conversation.getConversationId())}`);
             extraContextLayout.add(ticketIdLabel);
+            const contextProjectId = conversation.getContextProjectId();
+            if (contextProjectId) {
+              const projectIdLabel = createExtraContextLabel(`Project ID: ${osparc.utils.Utils.uuidToShort(contextProjectId)}`);
+              extraContextLayout.add(projectIdLabel);
+            }
             if (amISupporter) {
               const fogbugzLink = conversation.getFogbugzLink();
               if (fogbugzLink) {
@@ -260,12 +265,6 @@ qx.Class.define("osparc.support.ConversationPage", {
                 });
                 extraContextLayout.add(fogbugzLabel);
               }
-              const contextProjectId = conversation.getContextProjectId();
-              if (contextProjectId) {
-                const projectIdLabel = createExtraContextLabel(`Project ID: ${osparc.utils.Utils.uuidToShort(contextProjectId)}`);
-                extraContextLayout.add(projectIdLabel);
-              }
-
             }
           }
         };

services/static-webserver/client/source/class/osparc/support/SupportCenter.js

@@ -51,7 +51,7 @@ qx.Class.define("osparc.support.SupportCenter", {
   },
 
   statics: {
-    WINDOW_WIDTH: 430,
+    WINDOW_WIDTH: 450,
     WINDOW_HEIGHT: 700,
     REQUEST_CALL_MESSAGE: "Dear Support,\nI would like to make an appointment for a support call.",
 

services/static-webserver/client/source/class/osparc/ui/list/CollaboratorListItem.js

@@ -16,7 +16,7 @@
 ************************************************************************ */
 
 qx.Class.define("osparc.ui.list.CollaboratorListItem", {
-  extend: osparc.ui.list.ListItem,
+  extend: osparc.ui.list.ListItemWithMenu,
 
   properties: {
     collabType: {
@@ -30,20 +30,6 @@ qx.Class.define("osparc.ui.list.CollaboratorListItem", {
       nullable: true
     },
 
-    accessRights: {
-      check: "Object",
-      apply: "__applyAccessRights",
-      event: "changeAccessRights",
-      nullable: true
-    },
-
-    showOptions: {
-      check: "Boolean",
-      apply: "__applyShowOptions",
-      event: "changeShowOptions",
-      nullable: true
-    },
-
     resourceType : {
       check: "String",
       event: "changeResourceType",
@@ -103,31 +89,6 @@ qx.Class.define("osparc.ui.list.CollaboratorListItem", {
       return roleInfo;
     },
 
-    _createChildControlImpl: function(id) {
-      let control;
-      switch (id) {
-        case "options": {
-          const iconSize = 25;
-          control = new qx.ui.form.MenuButton().set({
-            maxWidth: iconSize,
-            maxHeight: iconSize,
-            alignX: "center",
-            alignY: "middle",
-            icon: "@FontAwesome5Solid/ellipsis-v/"+(iconSize-11),
-            focusable: false
-          });
-          this._add(control, {
-            row: 0,
-            column: 3,
-            rowSpan: 2
-          });
-          break;
-        }
-      }
-
-      return control || this.base(arguments, id);
-    },
-
     // overridden
     _applyTitle: function(value) {
       if (value === null) {
@@ -175,7 +136,8 @@ qx.Class.define("osparc.ui.list.CollaboratorListItem", {
       }
     },
 
-    __applyAccessRights: function(value) {
+    // overridden
+    _applyAccessRights: function(value) {
       if (value === null) {
         return;
       }
@@ -278,10 +240,5 @@ qx.Class.define("osparc.ui.list.CollaboratorListItem", {
 
       return menu;
     },
-
-    __applyShowOptions: function(value) {
-      const optionsMenu = this.getChildControl("options");
-      optionsMenu.setVisibility(value ? "visible" : "excluded");
-    }
   }
 });