Skip to content

Commit 8768457

Browse files
odeimaizodeimaiz
authored
✨ [Frontend] User profile details (#8282)
1 parent 8d908b2 commit 8768457

File tree

6 files changed

+239
-11
lines changed

6 files changed

+239
-11
lines changed

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

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ qx.Class.define("osparc.conversation.MessageUI", {
6464
let control;
6565
switch (id) {
6666
case "thumbnail":
67-
control = osparc.utils.Utils.createThumbnail(32).set({
67+
control = new osparc.ui.basic.UserThumbnail(32).set({
6868
marginTop: 4,
6969
});
7070
this._add(control, {
@@ -165,13 +165,8 @@ qx.Class.define("osparc.conversation.MessageUI", {
165165

166166
osparc.store.Users.getInstance().getUser(message["userGroupId"])
167167
.then(user => {
168-
if (user) {
169-
thumbnail.setSource(user.getThumbnail());
170-
userName.setValue(user.getLabel());
171-
} else {
172-
thumbnail.setSource(osparc.utils.Avatar.emailToThumbnail());
173-
userName.setValue("Unknown user");
174-
}
168+
thumbnail.setUser(user);
169+
userName.setValue(user ? user.getLabel() : "Unknown user");
175170
})
176171
.catch(() => {
177172
thumbnail.setSource(osparc.utils.Avatar.emailToThumbnail());

‎services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -737,6 +737,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
737737
win.close();
738738
}
739739
win.addListener("cancel", () => cancelStudyOptions());
740+
win.getChildControl("close-button").addListener("tap", () => cancelStudyOptions());
740741
studyOptions.addListener("cancel", () => cancelStudyOptions());
741742
studyOptions.addListener("startStudy", () => {
742743
const newName = studyOptions.getChildControl("title-field").getValue();

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ qx.Class.define("osparc.data.model.User", {
5151
}
5252
description += email;
5353
}
54-
const thumbnail = osparc.utils.Avatar.emailToThumbnail(email, username);
54+
5555
this.set({
5656
userId,
5757
groupId,
@@ -60,10 +60,14 @@ qx.Class.define("osparc.data.model.User", {
6060
lastName,
6161
email,
6262
phoneNumber: userData["phone"] || null,
63-
thumbnail,
6463
label: userData["userName"] || description,
6564
description,
6665
});
66+
67+
// create the thumbnail after setting email and username
68+
this.set({
69+
thumbnail: this.createThumbnail(),
70+
});
6771
},
6872

6973
properties: {
@@ -137,4 +141,10 @@ qx.Class.define("osparc.data.model.User", {
137141
event: "changeThumbnail",
138142
},
139143
},
144+
145+
members: {
146+
createThumbnail: function(size) {
147+
return osparc.utils.Avatar.emailToThumbnail(this.getEmail(), this.getUsername(), size);
148+
},
149+
},
140150
});

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ qx.Class.define("osparc.store.Support", {
163163
addReleaseNotesToMenu: function(menu) {
164164
const releaseTag = osparc.utils.Utils.getReleaseTag();
165165
const releaseLink = osparc.utils.Utils.getReleaseLink();
166-
const releaseBtn = new qx.ui.menu.Button(qx.locale.Manager.tr("Release Notes") + " " + releaseTag, "@FontAwesome5Solid/book/14");
166+
const releaseBtn = new qx.ui.menu.Button(qx.locale.Manager.tr("What's new in") + " " + releaseTag, "@FontAwesome5Solid/bullhorn/14");
167167
releaseBtn.addListener("execute", () => window.open(releaseLink), this);
168168
menu.add(releaseBtn);
169169
},

‎services/static-webserver/client/source/class/osparc/ui/basic/UserThumbnail.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/* ************************************************************************
2+
3+
osparc - the simcore frontend
4+
5+
https://osparc.io
6+
7+
Copyright:
8+
2025 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+
qx.Class.define("osparc.ui.basic.UserThumbnail", {
19+
extend: qx.ui.basic.Image,
20+
21+
construct: function(size) {
22+
this.base(arguments);
23+
24+
this.set(osparc.utils.Utils.getThumbnailProps(size));
25+
26+
if (osparc.data.Permissions.getInstance().isProductOwner()) {
27+
this.setCursor("pointer");
28+
this.addListener("tap", this.__openUserDetails, this);
29+
}
30+
},
31+
32+
properties: {
33+
user: {
34+
check: "osparc.data.model.User",
35+
init: null,
36+
nullable: true,
37+
apply: "__applyUser",
38+
}
39+
},
40+
41+
members: {
42+
__applyUser: function(user) {
43+
if (user) {
44+
this.setSource(user.getThumbnail());
45+
} else {
46+
this.setSource(osparc.utils.Avatar.emailToThumbnail());
47+
}
48+
},
49+
50+
__openUserDetails: function() {
51+
if (this.getUser()) {
52+
const userDetails = new osparc.user.UserDetails(this.getUser());
53+
userDetails.center();
54+
userDetails.open();
55+
}
56+
},
57+
}
58+
});

‎services/static-webserver/client/source/class/osparc/user/UserDetails.js

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
/* ************************************************************************
2+
3+
osparc - the simcore frontend
4+
5+
https://osparc.io
6+
7+
Copyright:
8+
2025 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+
qx.Class.define("osparc.user.UserDetails", {
19+
extend: osparc.ui.window.Window,
20+
21+
construct: function(user) {
22+
this.base(arguments);
23+
24+
this.set({
25+
layout: new qx.ui.layout.VBox(10),
26+
autoDestroy: true,
27+
showMaximize: false,
28+
showMinimize: false,
29+
clickAwayClose: true,
30+
});
31+
32+
this.setUser(user);
33+
},
34+
35+
statics: {
36+
WIDTH: 300,
37+
HEIGHT: 200,
38+
39+
GRID_POS: {
40+
USERNAME: 0,
41+
FULLNAME: 1,
42+
EMAIL: 2,
43+
USER_ID: 3,
44+
GROUP_ID: 4,
45+
}
46+
},
47+
48+
properties: {
49+
user: {
50+
check: "osparc.data.model.User",
51+
init: null,
52+
nullable: false,
53+
event: "changeUser",
54+
apply: "__applyUser",
55+
}
56+
},
57+
58+
members: {
59+
_createChildControlImpl: function(id) {
60+
let control;
61+
switch (id) {
62+
case "top-layout":
63+
control = new qx.ui.container.Composite(new qx.ui.layout.HBox(20));
64+
this.add(control);
65+
break;
66+
case "thumbnail":
67+
control = new osparc.ui.basic.Thumbnail(null, 100, 100);
68+
control.getChildControl("image").set({
69+
anonymous: true,
70+
decorator: "rounded",
71+
});
72+
this.getChildControl("top-layout").add(control);
73+
break;
74+
case "main-info": {
75+
const grid = new qx.ui.layout.Grid(10, 6);
76+
grid.setColumnFlex(1, 1);
77+
grid.setColumnAlign(0, "right", "middle");
78+
control = new qx.ui.container.Composite(grid);
79+
this.getChildControl("top-layout").add(control, {
80+
flex: 1
81+
});
82+
break;
83+
}
84+
case "username": {
85+
const title = new qx.ui.basic.Label("Username");
86+
this.getChildControl("main-info").add(title, {
87+
row: this.self().GRID_POS.USERNAME,
88+
column: 0
89+
});
90+
control = new qx.ui.basic.Label();
91+
this.getChildControl("main-info").add(control, {
92+
row: this.self().GRID_POS.USERNAME,
93+
column: 1
94+
});
95+
break;
96+
}
97+
case "fullname": {
98+
const title = new qx.ui.basic.Label("Full Name");
99+
this.getChildControl("main-info").add(title, {
100+
row: this.self().GRID_POS.FULLNAME,
101+
column: 0
102+
});
103+
control = new qx.ui.basic.Label();
104+
this.getChildControl("main-info").add(control, {
105+
row: this.self().GRID_POS.FULLNAME,
106+
column: 1
107+
});
108+
break;
109+
}
110+
case "email": {
111+
const title = new qx.ui.basic.Label("Email");
112+
this.getChildControl("main-info").add(title, {
113+
row: this.self().GRID_POS.EMAIL,
114+
column: 0
115+
});
116+
control = new qx.ui.basic.Label();
117+
this.getChildControl("main-info").add(control, {
118+
row: this.self().GRID_POS.EMAIL,
119+
column: 1
120+
});
121+
break;
122+
}
123+
case "user-id": {
124+
const title = new qx.ui.basic.Label("User ID");
125+
this.getChildControl("main-info").add(title, {
126+
row: this.self().GRID_POS.USER_ID,
127+
column: 0
128+
});
129+
control = new qx.ui.basic.Label();
130+
this.getChildControl("main-info").add(control, {
131+
row: this.self().GRID_POS.USER_ID,
132+
column: 1
133+
});
134+
break;
135+
}
136+
case "group-id": {
137+
const title = new qx.ui.basic.Label("Group ID");
138+
this.getChildControl("main-info").add(title, {
139+
row: this.self().GRID_POS.GROUP_ID,
140+
column: 0
141+
});
142+
control = new qx.ui.basic.Label();
143+
this.getChildControl("main-info").add(control, {
144+
row: this.self().GRID_POS.GROUP_ID,
145+
column: 1
146+
});
147+
break;
148+
}
149+
}
150+
return control || this.base(arguments, id);
151+
},
152+
153+
__applyUser: function(user) {
154+
this.setCaption(user.getUsername());
155+
156+
this.getChildControl("thumbnail").setSource(user.createThumbnail(96));
157+
this.getChildControl("username").setValue(user.getUsername());
158+
this.getChildControl("fullname").setValue([user.getFirstName(), user.getLastName()].filter(Boolean).join(" "));
159+
this.getChildControl("email").setValue(user.getEmail());
160+
this.getChildControl("user-id").setValue(String(user.getUserId()));
161+
this.getChildControl("group-id").setValue(String(user.getGroupId()));
162+
},
163+
}
164+
});

0 commit comments

Comments
 (0)