Skip to content

Commit b5e07b2

Browse files
odeimaizodeimaiz
committed
refactor and group avatar on card
1 parent 633f3c1 commit b5e07b2

File tree

2 files changed

+116
-87
lines changed

2 files changed

+116
-87
lines changed

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

Lines changed: 72 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -788,34 +788,26 @@ qx.Class.define("osparc.dashboard.CardBase", {
788788
},
789789

790790
__applyState: function(state) {
791-
let projectInUse = false;
792-
if ("shareState" in state && "locked" in state["shareState"]) {
793-
projectInUse = state["shareState"]["locked"];
794-
}
791+
const projectLocked = osparc.study.Utils.state.getProjectLocked(state);
792+
const currentUserGroupids = osparc.study.Utils.state.getCurrentGroupIds(state);
793+
const pipelineState = osparc.study.Utils.state.getPipelineState(state);
795794

796-
if (osparc.utils.DisabledPlugins.isSimultaneousAccessEnabled()) {
797-
if (projectInUse && state["shareState"]["status"] === "OPENED") {
798-
this.__showWhoIsIn(state["shareState"]["currentUserGroupids"]);
799-
} else {
800-
this.__showWhoIsIn(null);
801-
}
802-
} else {
803-
this.setBlocked(projectInUse ? "IN_USE" : false);
804-
if (projectInUse) {
805-
this.__showBlockedCardFromStatus("IN_USE", state["shareState"]);
806-
}
795+
this.__showCurrentUserGroupids(currentUserGroupids);
796+
797+
this.setBlocked(projectLocked ? "IN_USE" : false);
798+
if (projectLocked) {
799+
this.__showBlockedCardFromStatus("IN_USE", state["shareState"]);
807800
}
808801

809-
const pipelineState = ("state" in state) ? state["state"]["value"] : undefined;
810802
if (pipelineState) {
811-
this.__applyPipelineState(state["state"]["value"]);
803+
this.__applyPipelineState(pipelineState);
812804
}
813805
},
814806

815807
__applyDebt: function(debt) {
816808
this.setBlocked(debt ? "IN_DEBT" : false);
817809
if (debt) {
818-
this.__showBlockedCardFromStatus("IN_DEBT", debt);
810+
this.__showBlockedCardFromStatus("IN_DEBT");
819811
}
820812
},
821813

@@ -883,73 +875,79 @@ qx.Class.define("osparc.dashboard.CardBase", {
883875
});
884876
},
885877

886-
__showWhoIsIn: function(whoIsIn) {
887-
let users = [];
888-
if (whoIsIn) {
889-
// replace this once the backend returns a list of group__ids
890-
const allUsers = [
891-
{ name: "Alice", avatar: "https://i.pravatar.cc/150?img=1" },
892-
{ name: "Bob", avatar: "https://i.pravatar.cc/150?img=2" },
893-
{ name: "Charlie", avatar: "https://i.pravatar.cc/150?img=3" },
894-
{ name: "Dana", avatar: "https://i.pravatar.cc/150?img=4" },
895-
{ name: "Eve", avatar: "https://i.pravatar.cc/150?img=5" },
896-
{ name: "Frank", avatar: "https://i.pravatar.cc/150?img=6" },
897-
];
898-
// Random number of users between 1 and 6
899-
const randomCount = Math.floor(Math.random() * 6) + 1;
900-
// Shuffle the array and take the first randomCount users
901-
const shuffled = allUsers.sort(() => 0.5 - Math.random());
902-
users = shuffled.slice(0, randomCount);
903-
}
904-
if (osparc.utils.DisabledPlugins.isSimultaneousAccessEnabled() && this.getResourceType() === "study") {
905-
const avatarGroup = this.getChildControl("avatar-group");
906-
avatarGroup.setUsers(users);
907-
}
878+
__showCurrentUserGroupids: function(currentUserGroupids) {
879+
const avatarGroup = this.getChildControl("avatar-group");
880+
const usersStore = osparc.store.Users.getInstance();
881+
const userPromises = currentUserGroupids.map(userGroupId => usersStore.getUser(userGroupId));
882+
const users = [];
883+
Promise.all(userPromises)
884+
.then(usersResult => {
885+
usersResult.forEach(user => {
886+
users.push({
887+
name: user.getUsername(),
888+
avatar: user.getThumbnail(),
889+
});
890+
});
891+
avatarGroup.setUsers(users);
892+
});
908893
},
909894

910-
__showBlockedCardFromStatus: function(reason, moreInfo) {
895+
__showBlockedCardFromStatus: function(reason, shareState) {
911896
switch (reason) {
912897
case "IN_USE":
913-
this.__blockedInUse(moreInfo);
898+
this.__blockedInUse(shareState);
914899
break;
915900
case "IN_DEBT":
916-
this.__blockedInDebt(moreInfo);
901+
this.__blockedInDebt();
917902
break;
918903
}
919904
},
920905

921-
__blockedInUse: function(lockedStatus) {
922-
const status = lockedStatus["status"];
923-
const userGroupIDs = lockedStatus["currentUserGroupids"];
924-
let toolTip = userGroupIDs[0]
925-
// osparc.utils.Utils.firstsUp(userGroupIDs[0]["first_name"] || this.tr("A user"), userGroupIDs[0]["last_name"] || ""); // it will be replaced by "userName"
906+
__blockedInUse: function(shareState) {
907+
const status = shareState["status"];
908+
const currentUserGroupids = shareState["currentUserGroupids"];
909+
const usersStore = osparc.store.Users.getInstance();
910+
const userPromises = currentUserGroupids.map(userGroupId => usersStore.getUser(userGroupId));
911+
const usernames = [];
912+
let toolTip = "";
926913
let image = null;
927-
switch (status) {
928-
case "CLOSING":
929-
image = "@FontAwesome5Solid/key/";
930-
toolTip += this.tr(" is closing it...");
931-
break;
932-
case "CLONING":
933-
image = "@FontAwesome5Solid/clone/";
934-
toolTip += this.tr(" is cloning it...");
935-
break;
936-
case "EXPORTING":
937-
image = osparc.task.Export.ICON+"/";
938-
toolTip += this.tr(" is exporting it...");
939-
break;
940-
case "OPENING":
941-
image = "@FontAwesome5Solid/key/";
942-
toolTip += this.tr(" is opening it...");
943-
break;
944-
case "OPENED":
945-
image = "@FontAwesome5Solid/lock/";
946-
toolTip += this.tr(" is using it.");
947-
break;
948-
default:
949-
image = "@FontAwesome5Solid/lock/";
950-
break;
951-
}
952-
this.__showBlockedCard(image, toolTip);
914+
Promise.all(userPromises)
915+
.then(usersResult => {
916+
usersResult.forEach(user => {
917+
usernames.push(user.getUsername());
918+
});
919+
})
920+
.finally(() => {
921+
switch (status) {
922+
case "CLOSING":
923+
image = "@FontAwesome5Solid/key/";
924+
toolTip += this.tr("Closing...");
925+
break;
926+
case "CLONING":
927+
image = "@FontAwesome5Solid/clone/";
928+
toolTip += this.tr("Cloning...");
929+
break;
930+
case "EXPORTING":
931+
image = osparc.task.Export.ICON+"/";
932+
toolTip += this.tr("Exporting...");
933+
break;
934+
case "OPENING":
935+
image = "@FontAwesome5Solid/key/";
936+
toolTip += this.tr("Opening...");
937+
break;
938+
case "OPENED":
939+
image = "@FontAwesome5Solid/lock/";
940+
toolTip += this.tr("In use...");
941+
break;
942+
default:
943+
image = "@FontAwesome5Solid/lock/";
944+
break;
945+
}
946+
usernames.forEach(username => {
947+
toolTip += "<br>" + username;
948+
});
949+
this.__showBlockedCard(image, toolTip);
950+
});
953951
},
954952

955953
__blockedInDebt: function() {

‎services/static-webserver/client/source/class/osparc/study/Utils.js‎

Lines changed: 44 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -374,24 +374,55 @@ qx.Class.define("osparc.study.Utils", {
374374
return null;
375375
},
376376

377+
state: {
378+
getProjectLocked: function(state) {
379+
if (
380+
state &&
381+
"shareState" in state &&
382+
"locked" in state["shareState"]
383+
) {
384+
return state["shareState"]["locked"];
385+
}
386+
return false;
387+
},
388+
389+
getCurrentGroupIds: function(state) {
390+
if (
391+
state &&
392+
"shareState" in state &&
393+
"currentUserGroupids" in state["shareState"]
394+
) {
395+
return state["shareState"]["currentUserGroupids"];
396+
}
397+
398+
return [];
399+
},
400+
401+
getPipelineState: function(state) {
402+
if (
403+
state &&
404+
"state" in state &&
405+
"value" in state["state"]
406+
) {
407+
return state["state"]["value"];
408+
}
409+
return undefined;
410+
},
411+
},
412+
377413
// used in the "projectStateUpdated" socket event
378414
amIRunningTheStudy: function(content) {
379-
if (
380-
content &&
381-
"data" in content &&
382-
"shareState" in content["data"] &&
383-
"currentUserGroupids" in content["data"]["shareState"] &&
384-
content["data"]["shareState"]["currentUserGroupids"].includes(osparc.auth.Data.getInstance().getGroupId())
385-
) {
386-
return (
387-
content["data"]["state"] &&
388-
content["data"]["state"]["value"] &&
389-
[
415+
if (content && "data" in content) {
416+
const state = content["data"];
417+
const currentGroupIds = this.state.getCurrentGroupIds(state);
418+
if (currentGroupIds.includes(osparc.auth.Data.getInstance().getGroupId())) {
419+
const pipelineState = this.state.getPipelineState(state);
420+
return [
390421
"PUBLISHED",
391422
"STARTED",
392423
"STOPPING",
393-
].includes(content["data"]["state"]["value"])
394-
);
424+
].includes(pipelineState);
425+
}
395426
}
396427
return false;
397428
},

0 commit comments

Comments
 (0)