tap on conversation

Author: odeimaiz

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

@@ -27,23 +27,22 @@ qx.Class.define("osparc.support.Conversation", {
 
     this.__messages = [];
 
-    if (conversationId) {
-      this.setConversationId(conversationId);
-    }
-
     this._setLayout(new qx.ui.layout.VBox(5));
 
     this.__buildLayout();
 
-    this.__reloadMessages();
+    if (conversationId) {
+      this.setConversationId(conversationId);
+    }
   },
 
   properties: {
     conversationId: {
       check: "String",
       init: null,
       nullable: true,
-      event: "changeConversationId"
+      event: "changeConversationId",
+      apply: "__applyConversationId",
     },
   },
 
@@ -84,6 +83,10 @@ qx.Class.define("osparc.support.Conversation", {
       this._add(addMessages);
     },
 
+    __applyConversationId: function(value) {
+      this.__reloadMessages(true);
+    },
+
     __getNextRequest: function() {
       const params = {
         url: {
@@ -100,7 +103,7 @@ qx.Class.define("osparc.support.Conversation", {
       const options = {
         resolveWResponse: true
       };
-      return osparc.data.Resources.fetch("conversationsStudies", "getMessagesPage", params, options)
+      return osparc.data.Resources.fetch("conversationsSupport", "getMessagesPage", params, options)
         .catch(err => osparc.FlashMessenger.logError(err));
     },
 

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

@@ -23,8 +23,9 @@ qx.Class.define("osparc.support.ConversationListItem", {
 
     const layout = this._getLayout();
     layout.setSpacingX(10);
-    layout.setSpacingY(10);
-    layout.setColumnFlex(this.self().GRID_POS.ICON, 0);
+    layout.setSpacingY(4);
+
+    this.setMinHeight(32);
   },
 
   properties: {
@@ -42,8 +43,8 @@ qx.Class.define("osparc.support.ConversationListItem", {
       osparc.store.ConversationsSupport.getInstance().getLastMessage(conversationId)
         .then(lastMessages => {
           if (lastMessages && lastMessages.length) {
-            this.getChildControl("thumbnail").set({
-              decorator: "rounded",
+            this.getChildControl("thumbnail").getContentElement().setStyles({
+              "border-radius": "16px"
             });
             const lastMessage = lastMessages[0];
             const date = osparc.utils.Utils.formatDateAndTime(new Date(lastMessage.created));

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

@@ -22,7 +22,7 @@ qx.Class.define("osparc.support.Conversations", {
   construct: function(openConversationId = null) {
     this.base(arguments);
 
-    this._setLayout(new qx.ui.layout.VBox(5));
+    this._setLayout(new qx.ui.layout.VBox(10));
 
     this.__conversationListItems = [];
     this.__openConversationId = openConversationId;
@@ -46,6 +46,10 @@ qx.Class.define("osparc.support.Conversations", {
     },
   },
 
+  events: {
+    "openConversation": "qx.event.type.Data",
+  },
+
   members: {
     __conversationListItems: null,
     __openConversationId: null,
@@ -59,7 +63,7 @@ qx.Class.define("osparc.support.Conversations", {
           this._add(control);
           break;
         case "conversations-layout":
-          control = new qx.ui.container.Composite(new qx.ui.layout.VBox());
+          control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
           this._add(control, {
             flex: 1
           });
@@ -167,6 +171,7 @@ qx.Class.define("osparc.support.Conversations", {
 
       const conversationListItem = new osparc.support.ConversationListItem();
       conversationListItem.setConversationId(conversationData["conversationId"]);
+      conversationListItem.addListener("tap", () => this.fireDataEvent("openConversation", conversationData["conversationId"]), this);
 
       const conversationsLayout = this.getChildControl("conversations-layout");
       conversationsLayout.add(conversationListItem);

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

@@ -97,6 +97,10 @@ qx.Class.define("osparc.support.SupportCenter", {
           break;
         case "conversations-list": {
           control = new osparc.support.Conversations();
+          control.addListener("openConversation", e => {
+            const conversationId = e.getData();
+            this.__openConversation(conversationId);
+          }, this);
           const scroll = new qx.ui.container.Scroll();
           scroll.add(control);
           this.getChildControl("conversations-layout").add(scroll, {
@@ -150,16 +154,19 @@ qx.Class.define("osparc.support.SupportCenter", {
     },
 
     __openConversation: function(conversationId) {
-      const conversationContent = this.getChildControl("conversation-content");
-      if (conversationId) {
+      const openConversation = conversationId => {
+        this.getChildControl("conversation-back-button");
+        const conversationContent = this.getChildControl("conversation-content");
         conversationContent.setConversationId(conversationId);
         this.__showConversation();
+      }
+      if (conversationId) {
+        openConversation(conversationId);
       } else {
         this.getChildControl("ask-a-question-button").setFetching(true);
         osparc.store.ConversationsSupport.getInstance().addConversation()
           .then(data => {
-            conversationContent.setConversationId(data["conversationId"]);
-            this.__showConversation();
+            openConversation(data["conversationId"]);
           })
           .finally(() => {
             this.getChildControl("ask-a-question-button").setFetching(false);