🎨 [Frontend] Support Conversations: Listen to websocket

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

@@ -40,7 +40,22 @@ qx.Class.define("osparc.data.model.Conversation", {
     });
 
     this.__messages = [];
-    this.__fetchLastMessage();
+    this.__listenToConversationMessageWS();
+
+    if (conversationData.type === "SUPPORT") {
+      this.__fetchLastMessage();
+    }
+  },
+
+  statics: {
+    CHANNELS: {
+      CONVERSATION_CREATED: "conversation:created",
+      CONVERSATION_UPDATED: "conversation:updated",
+      CONVERSATION_DELETED: "conversation:deleted",
+      CONVERSATION_MESSAGE_CREATED: "conversation:message:created",
+      CONVERSATION_MESSAGE_UPDATED: "conversation:message:updated",
+      CONVERSATION_MESSAGE_DELETED: "conversation:message:deleted",
+    },
   },
 
   properties: {
@@ -121,6 +136,12 @@ qx.Class.define("osparc.data.model.Conversation", {
     },
   },
 
+  events: {
+    "messageAdded": "qx.event.type.Data",
+    "messageUpdated": "qx.event.type.Data",
+    "messageDeleted": "qx.event.type.Data",
+  },
+
   members: {
     __fetchLastMessagePromise: null,
     __nextRequestParams: null,
@@ -139,6 +160,35 @@ qx.Class.define("osparc.data.model.Conversation", {
       }
     },
 
+    __listenToConversationMessageWS: function() {
+      const socket = osparc.wrapper.WebSocket.getInstance();
+      [
+        this.self().CHANNELS.CONVERSATION_MESSAGE_CREATED,
+        this.self().CHANNELS.CONVERSATION_MESSAGE_UPDATED,
+        this.self().CHANNELS.CONVERSATION_MESSAGE_DELETED,
+      ].forEach(eventName => {
+        const eventHandler = message => {
+          if (message) {
+            const conversationId = message["conversationId"];
+            if (conversationId === this.getConversationId()) {
+              switch (eventName) {
+                case this.self().CHANNELS.CONVERSATION_MESSAGE_CREATED:
+                  this.addMessage(message);
+                  break;
+                case this.self().CHANNELS.CONVERSATION_MESSAGE_UPDATED:
+                  this.updateMessage(message);
+                  break;
+                case this.self().CHANNELS.CONVERSATION_MESSAGE_DELETED:
+                  this.deleteMessage(message);
+                  break;
+              }
+            }
+          }
+        };
+        socket.on(eventName, eventHandler, this);
+      });
+    },
+
     __fetchLastMessage: function() {
       if (this.__fetchLastMessagePromise) {
         return this.__fetchLastMessagePromise;
@@ -201,13 +251,34 @@ qx.Class.define("osparc.data.model.Conversation", {
         const found = this.__messages.find(msg => msg["messageId"] === message["messageId"]);
         if (!found) {
           this.__messages.push(message);
+          this.fireDataEvent("messageAdded", message);
         }
         // latest first
         this.__messages.sort((a, b) => new Date(b.created) - new Date(a.created));
         this.setLastMessage(this.__messages[0]);
       }
     },
 
+    updateMessage: function(message) {
+      if (message) {
+        const found = this.__messages.find(msg => msg["messageId"] === message["messageId"]);
+        if (found) {
+          Object.assign(found, message);
+          this.fireDataEvent("messageUpdated", found);
+        }
+      }
+    },
+
+    deleteMessage: function(message) {
+      if (message) {
+        const found = this.__messages.find(msg => msg["messageId"] === message["messageId"]);
+        if (found) {
+          this.__messages.splice(this.__messages.indexOf(found), 1);
+          this.fireDataEvent("messageDeleted", found);
+        }
+      }
+    },
+
     getContextProjectId: function() {
       if (this.getExtraContext() && "projectId" in this.getExtraContext()) {
         return this.getExtraContext()["projectId"];

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

@@ -37,7 +37,7 @@ qx.Class.define("osparc.store.ConversationsSupport", {
   },
 
   members: {
-    getConversations: function() {
+    fetchConversations: function() {
       const params = {
         url: {
           offset: 0,

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

@@ -21,16 +21,17 @@ qx.Class.define("osparc.study.Conversation", {
 
   /**
     * @param studyData {String} Study Data
-    * @param conversationId {String} Conversation Id
+    * @param conversationData {Object} Conversation Data
     */
-  construct: function(studyData, conversationId) {
+  construct: function(studyData, conversationData) {
     this.base(arguments);
 
     this.__studyData = studyData;
     this.__messages = [];
 
-    if (conversationId) {
-      this.setConversationId(conversationId);
+    if (conversationData) {
+      const conversation = new osparc.data.model.Conversation(conversationData);
+      this.setConversation(conversation);
     }
 
     this._setLayout(new qx.ui.layout.VBox(5));
@@ -51,11 +52,12 @@ qx.Class.define("osparc.study.Conversation", {
   },
 
   properties: {
-    conversationId: {
-      check: "String",
+    conversation: {
+      check: "osparc.data.model.Conversation",
       init: null,
       nullable: false,
-      event: "changeConversationId"
+      event: "changeConversation",
+      apply: "__applyConversation",
     },
   },
 
@@ -68,6 +70,28 @@ qx.Class.define("osparc.study.Conversation", {
     __messagesList: null,
     __loadMoreMessages: null,
 
+    __applyConversation: function(conversation) {
+      conversation.addListener("messageAdded", e => {
+        const message = e.getData();
+        this.addMessage(message);
+      }, this);
+      conversation.addListener("messageUpdated", e => {
+        const message = e.getData();
+        this.updateMessage(message);
+      }, this);
+      conversation.addListener("messageDeleted", e => {
+        const message = e.getData();
+        this.deleteMessage(message);
+      }, this);
+    },
+
+    getConversationId: function() {
+      if (this.getConversation()) {
+        return this.getConversation().getConversationId();
+      }
+      return null;
+    },
+
     __addConversationButtons: function() {
       const tabButton = this.getChildControl("button");
 
@@ -93,7 +117,8 @@ qx.Class.define("osparc.study.Conversation", {
             // create new conversation first
             osparc.store.ConversationsProject.getInstance().postConversation(this.__studyData["uuid"], newLabel)
               .then(data => {
-                this.setConversationId(data["conversationId"]);
+                const conversation = new osparc.data.model.Conversation(data);
+                this.setConversation(conversation);
                 this.getChildControl("button").setLabel(newLabel);
               });
           }
@@ -135,7 +160,7 @@ qx.Class.define("osparc.study.Conversation", {
         row: 0,
         column: 4
       });
-      this.bind("conversationId", closeButton, "visibility", {
+      this.bind("conversation", closeButton, "visibility", {
         converter: value => value ? "visible" : "excluded"
       });
     },
@@ -174,8 +199,14 @@ qx.Class.define("osparc.study.Conversation", {
       });
       addMessages.addListener("messageAdded", e => {
         const data = e.getData();
-        if (data["conversationId"]) {
-          this.setConversationId(data["conversationId"]);
+        if (data["conversationId"] && this.getConversation() === null) {
+          osparc.store.ConversationsProject.getInstance().getConversation(this.__studyData["uuid"], data["conversationId"])
+            .then(conversationData => {
+              const conversation = new osparc.data.model.Conversation(conversationData);
+              this.setConversation(conversation);
+            });
+        } else {
+          this.getConversation().addMessage(data);
           this.addMessage(data);
         }
       });

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

@@ -47,15 +47,6 @@ qx.Class.define("osparc.study.Conversations", {
   },
 
   statics: {
-    CHANNELS: {
-      CONVERSATION_CREATED: "conversation:created",
-      CONVERSATION_UPDATED: "conversation:updated",
-      CONVERSATION_DELETED: "conversation:deleted",
-      CONVERSATION_MESSAGE_CREATED: "conversation:message:created",
-      CONVERSATION_MESSAGE_UPDATED: "conversation:message:updated",
-      CONVERSATION_MESSAGE_DELETED: "conversation:message:deleted",
-    },
-
     popUpInWindow: function(studyData, openConversationId = null) {
       const conversations = new osparc.study.Conversations(studyData, openConversationId);
       const title = qx.locale.Manager.tr("Conversations");
@@ -112,22 +103,22 @@ qx.Class.define("osparc.study.Conversations", {
       const socket = osparc.wrapper.WebSocket.getInstance();
 
       [
-        this.self().CHANNELS.CONVERSATION_CREATED,
-        this.self().CHANNELS.CONVERSATION_UPDATED,
-        this.self().CHANNELS.CONVERSATION_DELETED,
+        osparc.data.model.Conversation.CHANNELS.CONVERSATION_CREATED,
+        osparc.data.model.Conversation.CHANNELS.CONVERSATION_UPDATED,
+        osparc.data.model.Conversation.CHANNELS.CONVERSATION_DELETED,
       ].forEach(eventName => {
         const eventHandler = conversation => {
           if (conversation) {
             switch (eventName) {
-              case this.self().CHANNELS.CONVERSATION_CREATED:
+              case osparc.data.model.Conversation.CHANNELS.CONVERSATION_CREATED:
                 if (conversation["projectId"] === this.getStudyData()["uuid"]) {
                   this.__addConversationPage(conversation);
                 }
                 break;
-              case this.self().CHANNELS.CONVERSATION_UPDATED:
+              case osparc.data.model.Conversation.CHANNELS.CONVERSATION_UPDATED:
                 this.__updateConversationName(conversation);
                 break;
-              case this.self().CHANNELS.CONVERSATION_DELETED:
+              case osparc.data.model.Conversation.CHANNELS.CONVERSATION_DELETED:
                 this.__removeConversationPage(conversation["conversationId"]);
                 break;
             }
@@ -136,38 +127,10 @@ qx.Class.define("osparc.study.Conversations", {
         socket.on(eventName, eventHandler, this);
         this.__wsHandlers.push({ eventName, handler: eventHandler });
       });
-
-      [
-        this.self().CHANNELS.CONVERSATION_MESSAGE_CREATED,
-        this.self().CHANNELS.CONVERSATION_MESSAGE_UPDATED,
-        this.self().CHANNELS.CONVERSATION_MESSAGE_DELETED,
-      ].forEach(eventName => {
-        const eventHandler = message => {
-          if (message) {
-            const conversationId = message["conversationId"];
-            const conversationPage = this.__getConversationPage(conversationId);
-            if (conversationPage) {
-              switch (eventName) {
-                case this.self().CHANNELS.CONVERSATION_MESSAGE_CREATED:
-                  conversationPage.addMessage(message);
-                  break;
-                case this.self().CHANNELS.CONVERSATION_MESSAGE_UPDATED:
-                  conversationPage.updateMessage(message);
-                  break;
-                case this.self().CHANNELS.CONVERSATION_MESSAGE_DELETED:
-                  conversationPage.deleteMessage(message);
-                  break;
-              }
-            }
-          }
-        };
-        socket.on(eventName, eventHandler, this);
-        this.__wsHandlers.push({ eventName, handler: eventHandler });
-      });
     },
 
     __getConversationPage: function(conversationId) {
-      return this.__conversationsPages.find(conversation => conversation.getConversationId() === conversationId);
+      return this.__conversationsPages.find(conversationPage => conversationPage.getConversationId() === conversationId);
     },
 
     __applyStudyData: function(studyData) {
@@ -200,9 +163,9 @@ qx.Class.define("osparc.study.Conversations", {
       const studyData = this.getStudyData();
       let conversationPage = null;
       if (conversationData) {
-        const conversationId = conversationData["conversationId"];
-        conversationPage = new osparc.study.Conversation(studyData, conversationId);
+        conversationPage = new osparc.study.Conversation(studyData, conversationData);
         conversationPage.setLabel(conversationData["name"]);
+        const conversationId = conversationData["conversationId"];
         osparc.store.ConversationsProject.getInstance().addListener("conversationDeleted", e => {
           const data = e.getData();
           if (conversationId === data["conversationId"]) {

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

@@ -144,6 +144,27 @@ qx.Class.define("osparc.support.Conversation", {
     __applyConversation: function(conversation) {
       this.__reloadMessages(true);
 
+      if (conversation) {
+        conversation.addListener("messageAdded", e => {
+          const data = e.getData();
+          this.addMessage(data);
+        });
+        conversation.addListener("messageUpdated", e => {
+          const data = e.getData();
+          this.updateMessage(data);
+        });
+        conversation.addListener("messageDeleted", e => {
+          const data = e.getData();
+          this.deleteMessage(data);
+        });
+      }
+
+      this.__populateShareProjectCheckbox();
+    },
+
+    __populateShareProjectCheckbox: function() {
+      const conversation = this.getConversation();
+
       const shareProjectCB = this.getChildControl("share-project-checkbox");
       const shareProjectLayout = this.getChildControl("share-project-layout");
       const currentStudy = osparc.store.Store.getInstance().getCurrentStudy();
@@ -302,12 +323,13 @@ qx.Class.define("osparc.support.Conversation", {
 
       // Update the UI element from the messages list
       const messagesContainer = this.getChildControl("messages-container");
-      messagesContainer.getChildren().forEach(control => {
-        if ("getMessage" in control && control.getMessage()["messageId"] === message["messageId"]) {
-          control.setMessage(message);
-          return;
-        }
+      const messageUI = messagesContainer.getChildren().find(control => {
+        return "getMessage" in control && control.getMessage()["messageId"] === message["messageId"];
       });
+      if (messageUI) {
+        // Force a new reference
+        messageUI.setMessage(Object.assign({}, message));
+      }
     },
   }
 });

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

@@ -68,7 +68,7 @@ qx.Class.define("osparc.support.Conversations", {
       const loadMoreButton = this.getChildControl("loading-button");
       loadMoreButton.setFetching(true);
 
-      osparc.store.ConversationsSupport.getInstance().getConversations()
+      osparc.store.ConversationsSupport.getInstance().fetchConversations()
         .then(conversations => {
           if (conversations.length) {
             conversations.forEach(conversation => this.__addConversation(conversation));