Skip to content

Commit 83bfca1

Browse files
odeimaizodeimaiz
authored
♻️ [Frontend] Refactor: Message model (#8471)
1 parent 4358454 commit 83bfca1

31 files changed

+304
-242
lines changed

‎services/static-webserver/client/source/class/osparc/auth/ui/RequestAccount.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ qx.Class.define("osparc.auth.ui.RequestAccount", {
113113
const country = new qx.ui.form.SelectBox().set({
114114
required: true
115115
});
116+
country.getChildControl("arrow").syncAppearance(); // force sync to show the arrow
116117
doubleSpaced.push(country);
117118
const countries = osparc.store.StaticInfo.getCountries();
118119
countries.forEach(c => {
@@ -144,6 +145,7 @@ qx.Class.define("osparc.auth.ui.RequestAccount", {
144145
case "s4lacad":
145146
case "s4ldesktopacad": {
146147
const application = new qx.ui.form.SelectBox();
148+
application.getChildControl("arrow").syncAppearance(); // force sync to show the arrow
147149
osparc.product.Utils.S4L_TOPICS.forEach(topic => {
148150
const lItem = new qx.ui.form.ListItem(topic.label, null, topic.id).set({
149151
rich: true
@@ -160,6 +162,7 @@ qx.Class.define("osparc.auth.ui.RequestAccount", {
160162
}
161163
case "osparc": {
162164
const application = new qx.ui.form.SelectBox();
165+
application.getChildControl("arrow").syncAppearance(); // force sync to show the arrow
163166
[{
164167
id: "other",
165168
label: "Other"
@@ -207,6 +210,7 @@ qx.Class.define("osparc.auth.ui.RequestAccount", {
207210

208211

209212
const hear = new qx.ui.form.SelectBox();
213+
hear.getChildControl("arrow").syncAppearance(); // force sync to show the arrow
210214
let hearOptions = [];
211215
switch (osparc.product.Utils.getProductName()) {
212216
case "osparc":

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

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ qx.Class.define("osparc.conversation.AddMessage", {
4444
},
4545

4646
message: {
47-
check: "Object",
47+
check: "osparc.data.model.Message",
4848
init: null,
4949
nullable: true,
5050
event: "changeMessage",
@@ -81,22 +81,28 @@ qx.Class.define("osparc.conversation.AddMessage", {
8181
this.getChildControl("add-comment-layout").add(control);
8282
break;
8383
}
84-
case "comment-field":
84+
case "comment-field": {
8585
control = new osparc.editor.MarkdownEditor();
8686
control.addListener("textChanged", () => this.__addCommentPressed(), this);
8787
control.setCompact(true);
88-
control.getChildControl("text-area").set({
88+
const textArea = control.getChildControl("text-area");
89+
textArea.set({
8990
maxLength: osparc.data.model.Conversation.MAX_CONTENT_LENGTH,
9091
});
92+
textArea.addListener("appear", () => {
93+
textArea.focus();
94+
textArea.activate();
95+
});
9196
// make it visually connected to the button
92-
control.getChildControl("text-area").getContentElement().setStyles({
97+
textArea.getContentElement().setStyles({
9398
"border-top-right-radius": "0px", // no roundness there to match the arrow button
9499
});
95100
// make it more compact
96101
this.getChildControl("add-comment-layout").add(control, {
97102
flex: 1
98103
});
99104
break;
105+
}
100106
case "add-comment-button":
101107
control = new qx.ui.form.Button(null, "@FontAwesome5Solid/arrow-up/16").set({
102108
toolTipText: this.tr("Ctrl+Enter"),
@@ -129,7 +135,7 @@ qx.Class.define("osparc.conversation.AddMessage", {
129135
control = new qx.ui.form.Button("🔔 " + this.tr("Notify user")).set({
130136
appearance: "form-button",
131137
allowGrowX: false,
132-
alignX: "right"
138+
alignX: "right",
133139
});
134140
control.addListener("execute", () => this.__notifyUserTapped());
135141
this._add(control);
@@ -161,7 +167,7 @@ qx.Class.define("osparc.conversation.AddMessage", {
161167
if (message) {
162168
// edit mode
163169
const commentField = this.getChildControl("comment-field");
164-
commentField.setText(message["content"]);
170+
commentField.setText(message.getContent());
165171
}
166172
},
167173

‎services/static-webserver/client/source/class/osparc/conversation/Conversation.js‎ renamed to ‎services/static-webserver/client/source/class/osparc/conversation/MessageList.js‎

Lines changed: 24 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
************************************************************************ */
1717

1818

19-
qx.Class.define("osparc.conversation.Conversation", {
19+
qx.Class.define("osparc.conversation.MessageList", {
2020
extend: qx.ui.core.Widget,
2121

2222
/**
@@ -25,8 +25,6 @@ qx.Class.define("osparc.conversation.Conversation", {
2525
construct: function(conversation) {
2626
this.base(arguments);
2727

28-
this._messages = [];
29-
3028
this._setLayout(new qx.ui.layout.VBox(5));
3129

3230
this._buildLayout();
@@ -51,8 +49,6 @@ qx.Class.define("osparc.conversation.Conversation", {
5149
},
5250

5351
members: {
54-
_messages: null,
55-
5652
_createChildControlImpl: function(id) {
5753
let control;
5854
switch (id) {
@@ -104,15 +100,11 @@ qx.Class.define("osparc.conversation.Conversation", {
104100
if (conversation) {
105101
conversation.addListener("messageAdded", e => {
106102
const data = e.getData();
107-
this.addMessage(data);
108-
});
109-
conversation.addListener("messageUpdated", e => {
110-
const data = e.getData();
111-
this.updateMessage(data);
103+
this.__messageAdded(data);
112104
});
113105
conversation.addListener("messageDeleted", e => {
114106
const data = e.getData();
115-
this.deleteMessage(data);
107+
this.__messageDeleted(data);
116108
});
117109
}
118110
},
@@ -128,12 +120,12 @@ qx.Class.define("osparc.conversation.Conversation", {
128120
return;
129121
}
130122

123+
this.getConversation().getMessages().forEach(message => this.__messageAdded(message));
124+
131125
loadMoreMessages.show();
132126
loadMoreMessages.setFetching(true);
133127
this.getConversation().getNextMessages()
134128
.then(resp => {
135-
const messages = resp["data"];
136-
messages.forEach(message => this.addMessage(message));
137129
if (resp["_links"]["next"] === null && loadMoreMessages) {
138130
loadMoreMessages.exclude();
139131
}
@@ -146,47 +138,42 @@ qx.Class.define("osparc.conversation.Conversation", {
146138
},
147139

148140
getMessages: function() {
149-
return this._messages;
141+
return this.getConversation().getMessages();
150142
},
151143

152144
clearAllMessages: function() {
153-
this._messages = [];
154145
this.getChildControl("messages-container").removeAll();
155-
156146
this.fireEvent("messagesChanged");
157147
},
158148

159-
addMessage: function(message) {
149+
__getMessageUI: function(messageId) {
150+
const messagesContainer = this.getChildControl("messages-container");
151+
return messagesContainer.getChildren().find(
152+
ctrl => ("getMessage" in ctrl && ctrl.getMessage().getMessageId() === messageId)
153+
);
154+
},
155+
156+
__messageAdded: function(message) {
160157
// ignore it if it was already there
161-
const messageIndex = this._messages.findIndex(msg => msg["messageId"] === message["messageId"]);
162-
if (messageIndex !== -1) {
158+
const existingMessageUI = this.__getMessageUI(message.getMessageId());
159+
if (existingMessageUI) {
163160
return;
164161
}
165162

166-
// determine insertion index for latest‐first order
167-
const newTime = new Date(message["created"]);
168-
let insertAt = this._messages.findIndex(m => new Date(m["created"]) > newTime);
169-
if (insertAt === -1) {
170-
insertAt = this._messages.length;
171-
}
172-
173-
// Insert the message in the messages array
174-
this._messages.splice(insertAt, 0, message);
175-
176163
// Add the UI element to the messages list
177164
let control = null;
178-
switch (message["type"]) {
165+
switch (message.getType()) {
179166
case "MESSAGE":
180167
control = this._createMessageUI(message);
181-
control.addListener("messageUpdated", e => this.updateMessage(e.getData()));
182-
control.addListener("messageDeleted", e => this.deleteMessage(e.getData()));
168+
control.addListener("messageDeleted", e => this.__messageDeleted(e.getData()));
183169
break;
184170
case "NOTIFICATION":
185171
control = new osparc.conversation.NotificationUI(message);
186172
break;
187173
}
188174
if (control) {
189175
// insert into the UI at the same position
176+
const insertAt = this.getConversation().getMessageIndex(message.getMessageId());
190177
const messagesContainer = this.getChildControl("messages-container");
191178
messagesContainer.addAt(control, insertAt);
192179
}
@@ -201,44 +188,15 @@ qx.Class.define("osparc.conversation.Conversation", {
201188
this.fireEvent("messagesChanged");
202189
},
203190

204-
deleteMessage: function(message) {
205-
// remove it from the messages array
206-
const messageIndex = this._messages.findIndex(msg => msg["messageId"] === message["messageId"]);
207-
if (messageIndex === -1) {
208-
return;
209-
}
210-
this._messages.splice(messageIndex, 1);
211-
191+
__messageDeleted: function(message) {
212192
// Remove the UI element from the messages list
213-
const messagesContainer = this.getChildControl("messages-container");
214-
const children = messagesContainer.getChildren();
215-
const controlIndex = children.findIndex(
216-
ctrl => ("getMessage" in ctrl && ctrl.getMessage()["messageId"] === message["messageId"])
217-
);
218-
if (controlIndex > -1) {
219-
messagesContainer.remove(children[controlIndex]);
193+
const existingMessageUI = this.__getMessageUI(message.getMessageId());
194+
if (existingMessageUI) {
195+
const messagesContainer = this.getChildControl("messages-container");
196+
messagesContainer.remove(existingMessageUI);
220197
}
221198

222199
this.fireEvent("messagesChanged");
223200
},
224-
225-
updateMessage: function(message) {
226-
// Replace the message in the messages array
227-
const messageIndex = this._messages.findIndex(msg => msg["messageId"] === message["messageId"]);
228-
if (messageIndex === -1) {
229-
return;
230-
}
231-
this._messages[messageIndex] = message;
232-
233-
// Update the UI element from the messages list
234-
const messagesContainer = this.getChildControl("messages-container");
235-
const messageUI = messagesContainer.getChildren().find(control => {
236-
return "getMessage" in control && control.getMessage()["messageId"] === message["messageId"];
237-
});
238-
if (messageUI) {
239-
// Force a new reference
240-
messageUI.setMessage(Object.assign({}, message));
241-
}
242-
},
243201
}
244202
});

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

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ qx.Class.define("osparc.conversation.MessageUI", {
2020
extend: qx.ui.core.Widget,
2121

2222
/**
23-
* @param message {Object} message data
23+
* @param message {osparc.data.model.Message} message
2424
* @param studyData {Object?null} serialized Study Data
2525
*/
2626
construct: function(message, studyData = null) {
@@ -38,10 +38,10 @@ qx.Class.define("osparc.conversation.MessageUI", {
3838

3939
statics: {
4040
isMyMessage: function(message) {
41-
if (message["userGroupId"] === "system") {
41+
if (message.getUserGroupId() === osparc.data.model.Message.SYSTEM_MESSAGE_ID) {
4242
return false;
4343
}
44-
return message && osparc.auth.Data.getInstance().getGroupId() === message["userGroupId"];
44+
return message && osparc.auth.Data.getInstance().getGroupId() === message.getUserGroupId();
4545
}
4646
},
4747

@@ -52,10 +52,10 @@ qx.Class.define("osparc.conversation.MessageUI", {
5252

5353
properties: {
5454
message: {
55-
check: "Object",
55+
check: "osparc.data.model.Message",
5656
init: null,
5757
nullable: false,
58-
apply: "__applyMessage",
58+
apply: "_applyMessage",
5959
},
6060
},
6161

@@ -134,27 +134,30 @@ qx.Class.define("osparc.conversation.MessageUI", {
134134
return control || this.base(arguments, id);
135135
},
136136

137-
__applyMessage: function(message) {
138-
const createdDateData = new Date(message["created"]);
139-
const createdDate = osparc.utils.Utils.formatDateAndTime(createdDateData);
140-
const lastUpdate = this.getChildControl("last-updated");
141-
if (message["created"] === message["modified"]) {
142-
lastUpdate.setValue(createdDate);
143-
} else {
144-
const updatedDateData = new Date(message["modified"]);
145-
const updatedDate = osparc.utils.Utils.formatDateAndTime(updatedDateData);
146-
lastUpdate.setValue(createdDate + " (" + this.tr("edited") + " "+ updatedDate + ")");
147-
}
137+
_applyMessage: function(message) {
138+
const updateLastUpdate = () => {
139+
const createdDate = osparc.utils.Utils.formatDateAndTime(message.getCreated());
140+
let value = "";
141+
if (message.getCreated().getTime() === message.getModified().getTime()) {
142+
value = createdDate;
143+
} else {
144+
const updatedDate = osparc.utils.Utils.formatDateAndTime(message.getModified());
145+
value = createdDate + " (" + this.tr("edited") + " "+ updatedDate + ")";
146+
}
147+
this.getChildControl("last-updated").setValue(value);
148+
};
149+
updateLastUpdate();
150+
message.addListener("changeModified", () => updateLastUpdate());
148151

149152
const messageContent = this.getChildControl("message-content");
150-
messageContent.setValue(message["content"]);
153+
message.bind("content", messageContent, "value");
151154

152155
const avatar = this.getChildControl("avatar");
153156
const userName = this.getChildControl("user-name");
154-
if (message["userGroupId"] === "system") {
157+
if (message.getUserGroupId() === osparc.data.model.Message.SYSTEM_MESSAGE_ID) {
155158
userName.setValue("Support");
156159
} else {
157-
osparc.store.Users.getInstance().getUser(message["userGroupId"])
160+
osparc.store.Users.getInstance().getUser(message.getUserGroupId())
158161
.then(user => {
159162
avatar.setUser(user);
160163
userName.setValue(user ? user.getLabel() : "Unknown user");
@@ -188,23 +191,22 @@ qx.Class.define("osparc.conversation.MessageUI", {
188191

189192
const addMessage = new osparc.conversation.AddMessage().set({
190193
studyData: this.__studyData,
191-
conversationId: message["conversationId"],
194+
conversationId: message.getConversationId(),
192195
message,
193196
});
197+
addMessage.getChildControl("notify-user-button").exclude();
194198
const title = this.tr("Edit message");
195-
const win = osparc.ui.window.Window.popUpInWindow(addMessage, title, 570, 135).set({
199+
const win = osparc.ui.window.Window.popUpInWindow(addMessage, title, 570, 120).set({
196200
clickAwayClose: false,
197201
resizable: true,
198202
showClose: true,
199203
});
200204
addMessage.addListener("updateMessage", e => {
201205
const content = e.getData();
202-
const conversationId = message["conversationId"];
203-
const messageId = message["messageId"];
204206
if (this.__studyData) {
205-
promise = osparc.store.ConversationsProject.getInstance().editMessage(this.__studyData["uuid"], conversationId, messageId, content);
207+
promise = osparc.store.ConversationsProject.getInstance().editMessage(message, content, this.__studyData["uuid"]);
206208
} else {
207-
promise = osparc.store.ConversationsSupport.getInstance().editMessage(conversationId, messageId, content);
209+
promise = osparc.store.ConversationsSupport.getInstance().editMessage(message, content);
208210
}
209211
promise.then(data => {
210212
win.close();
@@ -226,7 +228,7 @@ qx.Class.define("osparc.conversation.MessageUI", {
226228
if (win.getConfirmed()) {
227229
let promise = null;
228230
if (this.__studyData) {
229-
promise = osparc.store.ConversationsProject.getInstance().deleteMessage(message);
231+
promise = osparc.store.ConversationsProject.getInstance().deleteMessage(message, this.__studyData["uuid"]);
230232
} else {
231233
promise = osparc.store.ConversationsSupport.getInstance().deleteMessage(message);
232234
}

0 commit comments

Comments
 (0)