Skip to content

Commit a93fcbc

Browse files
odeimaizodeimaiz
authored
🎨 [Frontend] Support center: Enhance conversation list item (#8464)
1 parent f811fc3 commit a93fcbc

File tree

9 files changed

+127
-95
lines changed

9 files changed

+127
-95
lines changed

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

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ qx.Class.define("osparc.data.model.Conversation", {
4545
this.__listenToConversationMessageWS();
4646

4747
if (conversationData.type === "SUPPORT") {
48-
this.__fetchLastMessage();
48+
this.__fetchFirstAndLastMessages();
4949
}
5050
},
5151

@@ -132,6 +132,13 @@ qx.Class.define("osparc.data.model.Conversation", {
132132
event: "changeNameAlias",
133133
},
134134

135+
firstMessage: {
136+
check: "Object",
137+
nullable: true,
138+
init: null,
139+
event: "changeFirstMessage",
140+
},
141+
135142
lastMessage: {
136143
check: "Object",
137144
nullable: true,
@@ -154,7 +161,7 @@ qx.Class.define("osparc.data.model.Conversation", {
154161
},
155162

156163
members: {
157-
__fetchLastMessagePromise: null,
164+
__fetchingFirstAndLastMessage: null,
158165
__nextRequestParams: null,
159166
__messages: null,
160167

@@ -200,24 +207,34 @@ qx.Class.define("osparc.data.model.Conversation", {
200207
});
201208
},
202209

203-
__fetchLastMessage: function() {
204-
if (this.__fetchLastMessagePromise) {
205-
return this.__fetchLastMessagePromise;
210+
__fetchFirstAndLastMessages: function() {
211+
if (this.__fetchingFirstAndLastMessage) {
212+
return this.__fetchingFirstAndLastMessage;
206213
}
207214

208-
let promise = osparc.store.ConversationsSupport.getInstance().fetchLastMessage(this.getConversationId());
209-
promise
210-
.then(lastMessage => {
211-
this.addMessage(lastMessage);
212-
promise = null;
213-
return lastMessage;
215+
this.__fetchingFirstAndLastMessage = true;
216+
osparc.store.ConversationsSupport.getInstance().fetchLastMessage(this.getConversationId())
217+
.then(resp => {
218+
const messages = resp["data"];
219+
if (messages.length) {
220+
this.addMessage(messages[0]);
221+
this.setLastMessage(messages[0]);
222+
}
223+
// fetch first message only if there is more than one message
224+
if (resp["_meta"]["total"] === 1) {
225+
this.setFirstMessage(messages[0]);
226+
} else if (resp["_meta"]["total"] > 1) {
227+
osparc.store.ConversationsSupport.getInstance().fetchFirstMessage(this.getConversationId(), resp["_meta"])
228+
.then(firstMessages => {
229+
if (firstMessages.length) {
230+
this.setFirstMessage(firstMessages[0]);
231+
}
232+
});
233+
}
234+
return null;
214235
})
215-
.finally(() => {
216-
this.__fetchLastMessagePromise = null;
217-
});
218-
219-
this.__fetchLastMessagePromise = promise;
220-
return promise;
236+
.catch(err => osparc.FlashMessenger.logError(err))
237+
.finally(() => this.__fetchingFirstAndLastMessage = null);
221238
},
222239

223240
amIOwner: function() {

‎services/static-webserver/client/source/class/osparc/desktop/StudyEditor.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -288,7 +288,7 @@ qx.Class.define("osparc.desktop.StudyEditor", {
288288
}, this);
289289

290290
study.listenToChanges(); // this includes the listener on the workbench and ui
291-
study.addListener("projectDocumentChanged", e => this.projectDocumentChanged(e.getData()), this);
291+
study.addListener("projectDocumentChanged", e => this.__projectDocumentChanged(e.getData()), this);
292292

293293
if (osparc.utils.DisabledPlugins.isRTCEnabled()) {
294294
this.__listenToProjectDocument();
@@ -998,7 +998,7 @@ qx.Class.define("osparc.desktop.StudyEditor", {
998998
/**
999999
* @param {JSON Patch} data It will soon be used to patch the project document https://datatracker.ietf.org/doc/html/rfc6902
10001000
*/
1001-
projectDocumentChanged: function(patchData) {
1001+
__projectDocumentChanged: function(patchData) {
10021002
patchData["userGroupId"] = osparc.auth.Data.getInstance().getGroupId();
10031003
// avoid echo loop
10041004
if (this.__blockUpdates) {

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

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -140,29 +140,28 @@ qx.Class.define("osparc.store.ConversationsSupport", {
140140
},
141141

142142
fetchLastMessage: function(conversationId) {
143-
if (
144-
conversationId in this.__conversationsCached &&
145-
this.__conversationsCached[conversationId].getLastMessage()
146-
) {
147-
return Promise.resolve(this.__conversationsCached[conversationId].getLastMessage());
148-
}
149-
150143
const params = {
151144
url: {
152145
conversationId,
153146
offset: 0,
154147
limit: 1,
155148
}
156149
};
157-
return osparc.data.Resources.fetch("conversationsSupport", "getMessagesPage", params)
158-
.then(messagesData => {
159-
if (messagesData && messagesData.length) {
160-
const lastMessage = messagesData[0];
161-
this.__addMessageToConversation(conversationId, lastMessage);
162-
return lastMessage;
163-
}
164-
return null;
165-
});
150+
const options = {
151+
resolveWResponse: true
152+
};
153+
return osparc.data.Resources.fetch("conversationsSupport", "getMessagesPage", params, options);
154+
},
155+
156+
fetchFirstMessage: function(conversationId, conversationPaginationMetadata) {
157+
const params = {
158+
url: {
159+
conversationId,
160+
offset: Math.max(0, conversationPaginationMetadata["total"] - 1),
161+
limit: 1,
162+
}
163+
};
164+
return osparc.data.Resources.fetch("conversationsSupport", "getMessagesPage", params);
166165
},
167166

168167
postMessage: function(conversationId, message) {

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,9 @@ qx.Class.define("osparc.support.Conversation", {
155155
if (showLayout) {
156156
this.__populateShareProjectCB();
157157
const currentStudy = osparc.store.Store.getInstance().getCurrentStudy();
158-
currentStudy.addListener("changeAccessRights", () => this.__populateShareProjectCB(), this);
158+
if (currentStudy) {
159+
currentStudy.addListener("changeAccessRights", () => this.__populateShareProjectCB(), this);
160+
}
159161
}
160162
},
161163

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

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,13 @@ qx.Class.define("osparc.support.ConversationListItem", {
2727

2828
// decorate
2929
this.getChildControl("thumbnail").setDecorator("circled");
30+
this.getChildControl("title").set({
31+
rich: false, // let ellipsis work
32+
});
3033
this.getChildControl("subtitle").set({
34+
rich: false, // let ellipsis work
35+
});
36+
this.getChildControl("sub-subtitle").set({
3137
textColor: "text-disabled",
3238
});
3339
},
@@ -48,26 +54,53 @@ qx.Class.define("osparc.support.ConversationListItem", {
4854

4955
this.__populateWithLastMessage();
5056
conversation.addListener("changeLastMessage", this.__populateWithLastMessage, this);
57+
58+
this.__populateWithFirstMessage();
59+
conversation.addListener("changeFirstMessage", this.__populateWithFirstMessage, this);
5160
},
5261

5362
__populateWithLastMessage: function() {
54-
const lastMessage = this.getConversation().getLastMessage();
63+
const conversation = this.getConversation();
64+
const lastMessage = conversation.getLastMessage();
5565
if (lastMessage) {
5666
const date = osparc.utils.Utils.formatDateAndTime(new Date(lastMessage.created));
5767
this.set({
58-
subtitle: date,
68+
role: date,
5969
});
6070
const userGroupId = lastMessage.userGroupId;
6171
osparc.store.Users.getInstance().getUser(userGroupId)
6272
.then(user => {
6373
if (user) {
6474
this.set({
6575
thumbnail: user.getThumbnail(),
66-
subtitle: user.getLabel() + " - " + date,
76+
subtitle: user.getLabel() + ": " + lastMessage["content"],
77+
});
78+
}
79+
});
80+
}
81+
},
82+
83+
__populateWithFirstMessage: function() {
84+
const conversation = this.getConversation();
85+
const firstMessage = conversation.getFirstMessage();
86+
if (firstMessage) {
87+
const userGroupId = firstMessage.userGroupId;
88+
osparc.store.Users.getInstance().getUser(userGroupId)
89+
.then(user => {
90+
if (user) {
91+
const amISupporter = osparc.store.Groups.getInstance().amIASupportUser();
92+
let subSubtitle = "Started";
93+
if (amISupporter) {
94+
subSubtitle += " by " + user.getLabel();
95+
}
96+
const date = osparc.utils.Utils.formatDateAndTime(new Date(firstMessage.created));
97+
subSubtitle += " on " + date;
98+
this.set({
99+
subSubtitle,
67100
});
68101
}
69102
});
70103
}
71104
},
72-
}
105+
},
73106
});

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -249,6 +249,11 @@ qx.Class.define("osparc.support.ConversationPage", {
249249
if (extraContext && Object.keys(extraContext).length) {
250250
const ticketIdLabel = createExtraContextLabel(`Ticket ID: ${osparc.utils.Utils.uuidToShort(conversation.getConversationId())}`);
251251
extraContextLayout.add(ticketIdLabel);
252+
const contextProjectId = conversation.getContextProjectId();
253+
if (contextProjectId) {
254+
const projectIdLabel = createExtraContextLabel(`Project ID: ${osparc.utils.Utils.uuidToShort(contextProjectId)}`);
255+
extraContextLayout.add(projectIdLabel);
256+
}
252257
if (amISupporter) {
253258
const fogbugzLink = conversation.getFogbugzLink();
254259
if (fogbugzLink) {
@@ -260,12 +265,6 @@ qx.Class.define("osparc.support.ConversationPage", {
260265
});
261266
extraContextLayout.add(fogbugzLabel);
262267
}
263-
const contextProjectId = conversation.getContextProjectId();
264-
if (contextProjectId) {
265-
const projectIdLabel = createExtraContextLabel(`Project ID: ${osparc.utils.Utils.uuidToShort(contextProjectId)}`);
266-
extraContextLayout.add(projectIdLabel);
267-
}
268-
269268
}
270269
}
271270
};

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ qx.Class.define("osparc.support.SupportCenter", {
5151
},
5252

5353
statics: {
54-
WINDOW_WIDTH: 430,
54+
WINDOW_WIDTH: 450,
5555
WINDOW_HEIGHT: 700,
5656
REQUEST_CALL_MESSAGE: "Dear Support,\nI would like to make an appointment for a support call.",
5757

‎services/static-webserver/client/source/class/osparc/ui/list/CollaboratorListItem.js‎

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

1818
qx.Class.define("osparc.ui.list.CollaboratorListItem", {
19-
extend: osparc.ui.list.ListItem,
19+
extend: osparc.ui.list.ListItemWithMenu,
2020

2121
properties: {
2222
collabType: {
@@ -30,20 +30,6 @@ qx.Class.define("osparc.ui.list.CollaboratorListItem", {
3030
nullable: true
3131
},
3232

33-
accessRights: {
34-
check: "Object",
35-
apply: "__applyAccessRights",
36-
event: "changeAccessRights",
37-
nullable: true
38-
},
39-
40-
showOptions: {
41-
check: "Boolean",
42-
apply: "__applyShowOptions",
43-
event: "changeShowOptions",
44-
nullable: true
45-
},
46-
4733
resourceType : {
4834
check: "String",
4935
event: "changeResourceType",
@@ -103,31 +89,6 @@ qx.Class.define("osparc.ui.list.CollaboratorListItem", {
10389
return roleInfo;
10490
},
10591

106-
_createChildControlImpl: function(id) {
107-
let control;
108-
switch (id) {
109-
case "options": {
110-
const iconSize = 25;
111-
control = new qx.ui.form.MenuButton().set({
112-
maxWidth: iconSize,
113-
maxHeight: iconSize,
114-
alignX: "center",
115-
alignY: "middle",
116-
icon: "@FontAwesome5Solid/ellipsis-v/"+(iconSize-11),
117-
focusable: false
118-
});
119-
this._add(control, {
120-
row: 0,
121-
column: 3,
122-
rowSpan: 2
123-
});
124-
break;
125-
}
126-
}
127-
128-
return control || this.base(arguments, id);
129-
},
130-
13192
// overridden
13293
_applyTitle: function(value) {
13394
if (value === null) {
@@ -175,7 +136,8 @@ qx.Class.define("osparc.ui.list.CollaboratorListItem", {
175136
}
176137
},
177138

178-
__applyAccessRights: function(value) {
139+
// overridden
140+
_applyAccessRights: function(value) {
179141
if (value === null) {
180142
return;
181143
}
@@ -278,10 +240,5 @@ qx.Class.define("osparc.ui.list.CollaboratorListItem", {
278240

279241
return menu;
280242
},
281-
282-
__applyShowOptions: function(value) {
283-
const optionsMenu = this.getChildControl("options");
284-
optionsMenu.setVisibility(value ? "visible" : "excluded");
285-
}
286243
}
287244
});

0 commit comments

Comments
 (0)