♻️ [Frontend] Refactor: Message model

services/static-webserver/client/source/class/osparc/conversation/AddMessage.js

@@ -44,7 +44,7 @@ qx.Class.define("osparc.conversation.AddMessage", {
     },
 
     message: {
-      check: "Object",
+      check: "osparc.data.model.Message",
       init: null,
       nullable: true,
       event: "changeMessage",
@@ -81,22 +81,28 @@ qx.Class.define("osparc.conversation.AddMessage", {
           this.getChildControl("add-comment-layout").add(control);
           break;
         }
-        case "comment-field":
+        case "comment-field": {
           control = new osparc.editor.MarkdownEditor();
           control.addListener("textChanged", () => this.__addCommentPressed(), this);
           control.setCompact(true);
-          control.getChildControl("text-area").set({
+          const textArea = control.getChildControl("text-area");
+          textArea.set({
             maxLength: osparc.data.model.Conversation.MAX_CONTENT_LENGTH,
           });
+          textArea.addListener("appear", () => {
+            textArea.focus();
+            textArea.activate();
+          });
           // make it visually connected to the button
-          control.getChildControl("text-area").getContentElement().setStyles({
+          textArea.getContentElement().setStyles({
             "border-top-right-radius": "0px", // no roundness there to match the arrow button
           });
           // make it more compact
           this.getChildControl("add-comment-layout").add(control, {
             flex: 1
           });
           break;
+        }
         case "add-comment-button":
           control = new qx.ui.form.Button(null, "@FontAwesome5Solid/arrow-up/16").set({
             toolTipText: this.tr("Ctrl+Enter"),
@@ -129,7 +135,7 @@ qx.Class.define("osparc.conversation.AddMessage", {
           control = new qx.ui.form.Button("🔔 " + this.tr("Notify user")).set({
             appearance: "form-button",
             allowGrowX: false,
-            alignX: "right"
+            alignX: "right",
           });
           control.addListener("execute", () => this.__notifyUserTapped());
           this._add(control);
@@ -161,7 +167,7 @@ qx.Class.define("osparc.conversation.AddMessage", {
       if (message) {
         // edit mode
         const commentField = this.getChildControl("comment-field");
-        commentField.setText(message["content"]);
+        commentField.setText(message.getContent());
       }
     },
 

services/static-webserver/client/source/class/osparc/conversation/Conversation.js → services/static-webserver/client/source/class/osparc/conversation/MessageList.js

@@ -16,7 +16,7 @@
 ************************************************************************ */
 
 
-qx.Class.define("osparc.conversation.Conversation", {
+qx.Class.define("osparc.conversation.MessageList", {
   extend: qx.ui.core.Widget,
 
   /**
@@ -25,8 +25,6 @@ qx.Class.define("osparc.conversation.Conversation", {
   construct: function(conversation) {
     this.base(arguments);
 
-    this._messages = [];
-
     this._setLayout(new qx.ui.layout.VBox(5));
 
     this._buildLayout();
@@ -51,8 +49,6 @@ qx.Class.define("osparc.conversation.Conversation", {
   },
 
   members: {
-    _messages: null,
-
     _createChildControlImpl: function(id) {
       let control;
       switch (id) {
@@ -104,15 +100,11 @@ qx.Class.define("osparc.conversation.Conversation", {
       if (conversation) {
         conversation.addListener("messageAdded", e => {
           const data = e.getData();
-          this.addMessage(data);
-        });
-        conversation.addListener("messageUpdated", e => {
-          const data = e.getData();
-          this.updateMessage(data);
+          this.__messageAdded(data);
         });
         conversation.addListener("messageDeleted", e => {
           const data = e.getData();
-          this.deleteMessage(data);
+          this.__messageDeleted(data);
         });
       }
     },
@@ -132,8 +124,6 @@ qx.Class.define("osparc.conversation.Conversation", {
       loadMoreMessages.setFetching(true);
       this.getConversation().getNextMessages()
         .then(resp => {
-          const messages = resp["data"];
-          messages.forEach(message => this.addMessage(message));
           if (resp["_links"]["next"] === null && loadMoreMessages) {
             loadMoreMessages.exclude();
           }
@@ -146,47 +136,42 @@ qx.Class.define("osparc.conversation.Conversation", {
     },
 
     getMessages: function() {
-      return this._messages;
+      return this.getConversation().getMessages();
     },
 
     clearAllMessages: function() {
-      this._messages = [];
       this.getChildControl("messages-container").removeAll();
-
       this.fireEvent("messagesChanged");
     },
 
-    addMessage: function(message) {
+    __getMessageUI: function(messageId) {
+      const messagesContainer = this.getChildControl("messages-container");
+      return messagesContainer.getChildren().find(
+        ctrl => ("getMessage" in ctrl && ctrl.getMessage().getMessageId() === messageId)
+      );
+    },
+
+    __messageAdded: function(message) {
       // ignore it if it was already there
-      const messageIndex = this._messages.findIndex(msg => msg["messageId"] === message["messageId"]);
-      if (messageIndex !== -1) {
+      const existingMessageUI = this.__getMessageUI(message.getMessageId());
+      if (existingMessageUI) {
         return;
       }
 
-      // determine insertion index for latest‐first order
-      const newTime = new Date(message["created"]);
-      let insertAt = this._messages.findIndex(m => new Date(m["created"]) > newTime);
-      if (insertAt === -1) {
-        insertAt = this._messages.length;
-      }
-
-      // Insert the message in the messages array
-      this._messages.splice(insertAt, 0, message);
-
       // Add the UI element to the messages list
       let control = null;
-      switch (message["type"]) {
+      switch (message.getType()) {
         case "MESSAGE":
           control = this._createMessageUI(message);
-          control.addListener("messageUpdated", e => this.updateMessage(e.getData()));
-          control.addListener("messageDeleted", e => this.deleteMessage(e.getData()));
+          control.addListener("messageDeleted", e => this.__messageDeleted(e.getData()));
           break;
         case "NOTIFICATION":
           control = new osparc.conversation.NotificationUI(message);
           break;
       }
       if (control) {
         // insert into the UI at the same position
+        const insertAt = this.getConversation().getMessageIndex(message.getMessageId());
         const messagesContainer = this.getChildControl("messages-container");
         messagesContainer.addAt(control, insertAt);
       }
@@ -201,44 +186,15 @@ qx.Class.define("osparc.conversation.Conversation", {
       this.fireEvent("messagesChanged");
     },
 
-    deleteMessage: function(message) {
-      // remove it from the messages array
-      const messageIndex = this._messages.findIndex(msg => msg["messageId"] === message["messageId"]);
-      if (messageIndex === -1) {
-        return;
-      }
-      this._messages.splice(messageIndex, 1);
-
+    __messageDeleted: function(message) {
       // Remove the UI element from the messages list
-      const messagesContainer = this.getChildControl("messages-container");
-      const children = messagesContainer.getChildren();
-      const controlIndex = children.findIndex(
-        ctrl => ("getMessage" in ctrl && ctrl.getMessage()["messageId"] === message["messageId"])
-      );
-      if (controlIndex > -1) {
-        messagesContainer.remove(children[controlIndex]);
+      const existingMessageUI = this.__getMessageUI(message.getMessageId());
+      if (existingMessageUI) {
+        const messagesContainer = this.getChildControl("messages-container");
+        messagesContainer.remove(existingMessageUI);
       }
 
       this.fireEvent("messagesChanged");
     },
-
-    updateMessage: function(message) {
-      // Replace the message in the messages array
-      const messageIndex = this._messages.findIndex(msg => msg["messageId"] === message["messageId"]);
-      if (messageIndex === -1) {
-        return;
-      }
-      this._messages[messageIndex] = message;
-
-      // Update the UI element from the messages list
-      const messagesContainer = this.getChildControl("messages-container");
-      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/conversation/MessageUI.js

@@ -20,7 +20,7 @@ qx.Class.define("osparc.conversation.MessageUI", {
   extend: qx.ui.core.Widget,
 
   /**
-    * @param message {Object} message data
+    * @param message {osparc.data.model.Message} message
     * @param studyData {Object?null} serialized Study Data
     */
   construct: function(message, studyData = null) {
@@ -38,10 +38,10 @@ qx.Class.define("osparc.conversation.MessageUI", {
 
   statics: {
     isMyMessage: function(message) {
-      if (message["userGroupId"] === "system") {
+      if (message.getUserGroupId() === "system") {
         return false;
       }
-      return message && osparc.auth.Data.getInstance().getGroupId() === message["userGroupId"];
+      return message && osparc.auth.Data.getInstance().getGroupId() === message.getUserGroupId();
     }
   },
 
@@ -52,7 +52,7 @@ qx.Class.define("osparc.conversation.MessageUI", {
 
   properties: {
     message: {
-      check: "Object",
+      check: "osparc.data.model.Message",
       init: null,
       nullable: false,
       apply: "__applyMessage",
@@ -135,26 +135,28 @@ qx.Class.define("osparc.conversation.MessageUI", {
     },
 
     __applyMessage: function(message) {
-      const createdDateData = new Date(message["created"]);
-      const createdDate = osparc.utils.Utils.formatDateAndTime(createdDateData);
+      const createdDate = osparc.utils.Utils.formatDateAndTime(message.getCreated());
       const lastUpdate = this.getChildControl("last-updated");
-      if (message["created"] === message["modified"]) {
-        lastUpdate.setValue(createdDate);
-      } else {
-        const updatedDateData = new Date(message["modified"]);
-        const updatedDate = osparc.utils.Utils.formatDateAndTime(updatedDateData);
-        lastUpdate.setValue(createdDate + " (" + this.tr("edited") + " "+ updatedDate + ")");
-      }
+      const updateLastUpdate = () => {
+        if (message.getCreated().getTime() === message.getModified().getTime()) {
+          lastUpdate.setValue(createdDate);
+        } else {
+          const updatedDate = osparc.utils.Utils.formatDateAndTime(message.getModified());
+          lastUpdate.setValue(createdDate + " (" + this.tr("edited") + " "+ updatedDate + ")");
+        }
+      };
+      updateLastUpdate();
+      message.addListener("changeModified", () => updateLastUpdate());
 
       const messageContent = this.getChildControl("message-content");
-      messageContent.setValue(message["content"]);
+      message.bind("content", messageContent, "value");
 
       const avatar = this.getChildControl("avatar");
       const userName = this.getChildControl("user-name");
-      if (message["userGroupId"] === "system") {
+      if (message.getUserGroupId() === "system") {
         userName.setValue("Support");
       } else {
-        osparc.store.Users.getInstance().getUser(message["userGroupId"])
+        osparc.store.Users.getInstance().getUser(message.getUserGroupId())
           .then(user => {
             avatar.setUser(user);
             userName.setValue(user ? user.getLabel() : "Unknown user");
@@ -188,19 +190,20 @@ qx.Class.define("osparc.conversation.MessageUI", {
 
       const addMessage = new osparc.conversation.AddMessage().set({
         studyData: this.__studyData,
-        conversationId: message["conversationId"],
+        conversationId: message.getConversationId(),
         message,
       });
+      addMessage.getChildControl("notify-user-button").exclude();
       const title = this.tr("Edit message");
-      const win = osparc.ui.window.Window.popUpInWindow(addMessage, title, 570, 135).set({
+      const win = osparc.ui.window.Window.popUpInWindow(addMessage, title, 570, 120).set({
         clickAwayClose: false,
         resizable: true,
         showClose: true,
       });
       addMessage.addListener("updateMessage", e => {
         const content = e.getData();
-        const conversationId = message["conversationId"];
-        const messageId = message["messageId"];
+        const conversationId = message.getConversationId();
+        const messageId = message.getMessageId();
         if (this.__studyData) {
           promise = osparc.store.ConversationsProject.getInstance().editMessage(this.__studyData["uuid"], conversationId, messageId, content);
         } else {

services/static-webserver/client/source/class/osparc/conversation/NotificationUI.js

@@ -20,7 +20,7 @@ qx.Class.define("osparc.conversation.NotificationUI", {
   extend: qx.ui.core.Widget,
 
   /**
-    * @param message {Object} message
+    * @param message {osparc.data.model.Message} message
     */
   construct: function(message) {
     this.base(arguments);
@@ -39,7 +39,7 @@ qx.Class.define("osparc.conversation.NotificationUI", {
 
   properties: {
     message: {
-      check: "Object",
+      check: "osparc.data.model.Message",
       init: null,
       nullable: false,
       apply: "__applyMessage",
@@ -101,14 +101,13 @@ qx.Class.define("osparc.conversation.NotificationUI", {
 
       const isMyMessage = osparc.conversation.MessageUI.isMyMessage(message);
 
-      const modifiedDate = new Date(message["modified"]);
-      const date = osparc.utils.Utils.formatDateAndTime(modifiedDate);
+      const date = osparc.utils.Utils.formatDateAndTime(message.getModified());
       const lastUpdate = this.getChildControl("last-updated");
       lastUpdate.setValue(isMyMessage ? date + " -" : " - " + date);
 
       const messageContent = this.getChildControl("message-content");
-      const notifierUserGroupId = parseInt(message["userGroupId"]);
-      const notifiedUserGroupId = parseInt(message["content"]);
+      const notifierUserGroupId = parseInt(message.getUserGroupId());
+      const notifiedUserGroupId = parseInt(message.getContent());
       let msgContent = "🔔 ";
       Promise.all([
         osparc.store.Users.getInstance().getUser(notifierUserGroupId),