Skip to content

Commit e95c9b9

Browse files
odeimaizodeimaiz
committed
NotificationUI
1 parent 6d03649 commit e95c9b9

File tree

3 files changed

+179
-32
lines changed

3 files changed

+179
-32
lines changed

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -231,8 +231,16 @@ qx.Class.define("osparc.conversation.Conversation", {
231231
}
232232

233233
messages.forEach(message => {
234-
const messageUi = new osparc.conversation.MessageUI(message);
235-
this.__messagesList.add(messageUi);
234+
let control = null;
235+
switch (message["type"]) {
236+
case "MESSAGE":
237+
control = new osparc.conversation.MessageUI(message);
238+
break;
239+
case "NOTIFICATION":
240+
control = new osparc.conversation.NotificationUI(message);
241+
break;
242+
}
243+
this.__messagesList.add(control);
236244
});
237245
},
238246
}

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

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

2222
/**
23-
* @param comment {Object} comment
23+
* @param message {Object} message
2424
*/
25-
construct: function(comment) {
25+
construct: function(message) {
2626
this.base(arguments);
2727

28-
this.__comment = comment;
28+
this.__message = message;
2929

30-
const isMyComment = this.__isMyComment();
30+
const isMyMessage = this.self().isMyMessage(this.__message);
3131
const layout = new qx.ui.layout.Grid(12, 4);
32-
layout.setColumnFlex(1, 1); // comment
33-
layout.setColumnFlex(isMyComment ? 0 : 2, 3); // spacer
32+
layout.setColumnFlex(1, 1); // content
33+
layout.setColumnFlex(isMyMessage ? 0 : 2, 3); // spacer
3434
this._setLayout(layout);
3535
this.setPadding(5);
3636

3737
this.__buildLayout();
3838
},
3939

40-
members: {
41-
__comment: null,
40+
statics: {
41+
isMyMessage: function(message) {
42+
return message && osparc.auth.Data.getInstance().getGroupId() === message["userGroupId"];
43+
}
44+
},
4245

43-
__isMyComment: function() {
44-
return this.__comment && osparc.auth.Data.getInstance().getGroupId() === this.__comment["userGroupId"];
45-
},
46+
members: {
47+
__message: null,
4648

4749
_createChildControlImpl: function(id) {
50+
const isMyMessage = this.self().isMyMessage(this.__message);
4851
let control;
4952
switch (id) {
5053
case "thumbnail":
@@ -53,17 +56,17 @@ qx.Class.define("osparc.conversation.MessageUI", {
5356
maxWidth: 32,
5457
maxHeight: 32,
5558
decorator: "rounded",
56-
marginTop: 2,
59+
marginTop: 4,
5760
});
5861
this._add(control, {
5962
row: 0,
60-
column: this.__isMyComment() ? 2 : 0,
63+
column: isMyMessage ? 2 : 0,
6164
rowSpan: 2,
6265
});
6366
break;
6467
case "header-layout":
6568
control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({
66-
alignX: this.__isMyComment() ? "right" : "left"
69+
alignX: isMyMessage ? "right" : "left"
6770
}));
6871
control.addAt(new qx.ui.basic.Label("-"), 1);
6972
this._add(control, {
@@ -75,15 +78,15 @@ qx.Class.define("osparc.conversation.MessageUI", {
7578
control = new qx.ui.basic.Label().set({
7679
font: "text-12"
7780
});
78-
this.getChildControl("header-layout").addAt(control, this.__isMyComment() ? 2 : 0);
81+
this.getChildControl("header-layout").addAt(control, isMyMessage ? 2 : 0);
7982
break;
8083
case "last-updated":
8184
control = new qx.ui.basic.Label().set({
8285
font: "text-12"
8386
});
84-
this.getChildControl("header-layout").addAt(control, this.__isMyComment() ? 0 : 2);
87+
this.getChildControl("header-layout").addAt(control, isMyMessage ? 0 : 2);
8588
break;
86-
case "comment-content":
89+
case "message-content":
8790
control = new osparc.ui.markdown.Markdown().set({
8891
decorator: "rounded",
8992
noMargin: true,
@@ -92,7 +95,7 @@ qx.Class.define("osparc.conversation.MessageUI", {
9295
allowGrowX: true,
9396
});
9497
control.getContentElement().setStyles({
95-
"text-align": this.__isMyComment() ? "right" : "left",
98+
"text-align": isMyMessage ? "right" : "left",
9699
});
97100
this._add(control, {
98101
row: 1,
@@ -103,7 +106,7 @@ qx.Class.define("osparc.conversation.MessageUI", {
103106
control = new qx.ui.core.Spacer();
104107
this._add(control, {
105108
row: 1,
106-
column: this.__isMyComment() ? 0 : 2,
109+
column: isMyMessage ? 0 : 2,
107110
});
108111
break;
109112
}
@@ -116,31 +119,31 @@ qx.Class.define("osparc.conversation.MessageUI", {
116119

117120
const userName = this.getChildControl("user-name");
118121

119-
const date = new Date(this.__comment["modified"]);
122+
const date = new Date(this.__message["modified"]);
120123
const date2 = osparc.utils.Utils.formatDateAndTime(date);
121124
const lastUpdate = this.getChildControl("last-updated");
122125
lastUpdate.setValue(date2);
123126

124-
const commentContent = this.getChildControl("comment-content");
125-
if (this.__comment["type"] === "NOTIFICATION") {
126-
const userGroupId = parseInt(this.__comment["content"]);
127-
commentContent.setValue("🔔 " + this.tr("Notified") + ": ");
127+
const messageContent = this.getChildControl("message-content");
128+
if (this.__message["type"] === "NOTIFICATION") {
129+
const userGroupId = parseInt(this.__message["content"]);
130+
messageContent.setValue("🔔 " + this.tr("Notified") + ": ");
128131
osparc.store.Users.getInstance().getUser(userGroupId)
129132
.then(user => {
130133
if (user) {
131-
commentContent.setValue(commentContent.getValue() + user.getLabel());
134+
messageContent.setValue(messageContent.getValue() + user.getLabel());
132135
} else {
133-
commentContent.setValue(commentContent.getValue() + userGroupId);
136+
messageContent.setValue(messageContent.getValue() + userGroupId);
134137
}
135138
})
136139
.catch(() => {
137-
commentContent.setValue(commentContent.getValue() + userGroupId);
140+
messageContent.setValue(messageContent.getValue() + userGroupId);
138141
});
139-
} else if (this.__comment["type"] === "MESSAGE") {
140-
commentContent.setValue(this.__comment["content"]);
142+
} else if (this.__message["type"] === "MESSAGE") {
143+
messageContent.setValue(this.__message["content"]);
141144
}
142145

143-
osparc.store.Users.getInstance().getUser(this.__comment["userGroupId"])
146+
osparc.store.Users.getInstance().getUser(this.__message["userGroupId"])
144147
.then(user => {
145148
if (user) {
146149
thumbnail.setSource(user.getThumbnail());

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

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
/* ************************************************************************
2+
3+
osparc - the simcore frontend
4+
5+
https://osparc.io
6+
7+
Copyright:
8+
2023 IT'IS Foundation, https://itis.swiss
9+
10+
License:
11+
MIT: https://opensource.org/licenses/MIT
12+
13+
Authors:
14+
* Odei Maiz (odeimaiz)
15+
16+
************************************************************************ */
17+
18+
19+
qx.Class.define("osparc.conversation.NotificationUI", {
20+
extend: qx.ui.core.Widget,
21+
22+
/**
23+
* @param message {Object} message
24+
*/
25+
construct: function(message) {
26+
this.base(arguments);
27+
28+
this.__message = message;
29+
30+
const isMyMessage = osparc.conversation.MessageUI.isMyMessage(this.__message);
31+
const layout = new qx.ui.layout.Grid(12, 4);
32+
layout.setColumnFlex(1, 1); // content
33+
layout.setColumnFlex(isMyMessage ? 0 : 3, 3); // spacer
34+
this._setLayout(layout);
35+
this.setPadding(5);
36+
37+
this.__buildLayout();
38+
},
39+
40+
members: {
41+
__message: null,
42+
43+
// spacer - content - date - (thumbnail-spacer)
44+
// (thumbnail-spacer) - content - date - spacer
45+
_createChildControlImpl: function(id) {
46+
const isMyMessage = osparc.conversation.MessageUI.isMyMessage(this.__message);
47+
let control;
48+
switch (id) {
49+
case "thumbnail-spacer":
50+
control = new qx.ui.core.Spacer().set({
51+
width: 32,
52+
});
53+
this._add(control, {
54+
row: 0,
55+
column: isMyMessage ? 3 : 0,
56+
});
57+
break;
58+
case "message-content":
59+
control = new osparc.ui.markdown.Markdown().set({
60+
decorator: "rounded",
61+
noMargin: true,
62+
paddingLeft: 8,
63+
paddingRight: 8,
64+
minWidth: 200,
65+
width: 200,
66+
});
67+
control.getContentElement().setStyles({
68+
"text-align": isMyMessage ? "right" : "left",
69+
});
70+
this._add(control, {
71+
row: 0,
72+
column: 1,
73+
});
74+
break;
75+
case "last-updated":
76+
control = new qx.ui.basic.Label().set({
77+
font: "text-12"
78+
});
79+
this._add(control, {
80+
row: 0,
81+
column: 2,
82+
});
83+
break;
84+
case "spacer":
85+
control = new qx.ui.core.Spacer();
86+
this._add(control, {
87+
row: 0,
88+
column: isMyMessage ? 0 : 3,
89+
});
90+
break;
91+
}
92+
93+
return control || this.base(arguments, id);
94+
},
95+
96+
__buildLayout: function() {
97+
this.getChildControl("thumbnail-spacer");
98+
99+
const date = new Date(this.__message["modified"]);
100+
const date2 = osparc.utils.Utils.formatDateAndTime(date);
101+
const lastUpdate = this.getChildControl("last-updated");
102+
lastUpdate.setValue(date2);
103+
104+
const messageContent = this.getChildControl("message-content");
105+
const notifiedUserGroupId = parseInt(this.__message["content"]);
106+
let msgContent = "🔔 ";
107+
Promise.all([
108+
osparc.store.Users.getInstance().getUser(this.__message["userGroupId"]),
109+
osparc.store.Users.getInstance().getUser(notifiedUserGroupId),
110+
])
111+
.then(values => {
112+
const notifierUser = values[0];
113+
const notifiedUser = values[1];
114+
if (notifierUser) {
115+
msgContent += notifierUser.getLabel();
116+
} else {
117+
msgContent += "unknown user";
118+
}
119+
msgContent += " notified ";
120+
if (notifiedUser) {
121+
msgContent += notifiedUser.getLabel();
122+
} else {
123+
msgContent += "unknown user";
124+
}
125+
})
126+
.catch(() => {
127+
msgContent += "unknown user notified";
128+
})
129+
.finally(() => {
130+
messageContent.setValue(msgContent);
131+
});
132+
133+
this.getChildControl("spacer");
134+
}
135+
}
136+
});

0 commit comments

Comments
 (0)