Skip to content

Commit

Permalink
🎨 [Frontend] UX: Organization member's management (#6676)
Browse files Browse the repository at this point in the history
  • Loading branch information
@odeimaiz
odeimaiz authored Nov 6, 2024
1 parent a515c12 commit 2972184
Show file tree
Hide file tree
Showing 14 changed files with 110 additions and 54 deletions.
8 changes: 4 additions & 4 deletions services/static-webserver/client/source/class/osparc/data/Roles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,18 +24,18 @@ qx.Class.define("osparc.data.Roles", {
0: {
id: "noRead",
label: qx.locale.Manager.tr("Restricted Member"),
longLabel: qx.locale.Manager.tr("Restricted user: no Read access"),
longLabel: qx.locale.Manager.tr("Restricted member: no Read access"),
canDo: [
qx.locale.Manager.tr("- can access content shared within the Organization")
]
},
1: {
id: "read",
label: qx.locale.Manager.tr("Member"),
longLabel: qx.locale.Manager.tr("User: Read access"),
longLabel: qx.locale.Manager.tr("Member: Read access"),
canDo: [
qx.locale.Manager.tr("- can see other users"),
qx.locale.Manager.tr("- can share with other users")
qx.locale.Manager.tr("- can see other members"),
qx.locale.Manager.tr("- can share with other members")
]
},
2: {
Expand Down
14 changes: 9 additions & 5 deletions services/static-webserver/client/source/class/osparc/desktop/organizations/MembersList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ qx.Class.define("osparc.desktop.organizations.MembersList", {

members: {
__currentOrg: null,
__introLabel: null,
__memberInvitation: null,
__membersModel: null,

Expand All @@ -91,9 +92,7 @@ qx.Class.define("osparc.desktop.organizations.MembersList", {
},

__createIntroText: function() {
const msg = this.tr("If you are a manager or administrator, you can add new members and promote or demote existing ones.");
const intro = new qx.ui.basic.Label().set({
value: msg,
const intro = this.__introLabel = new qx.ui.basic.Label().set({
alignX: "left",
rich: true,
font: "text-13"
Expand All @@ -105,7 +104,6 @@ qx.Class.define("osparc.desktop.organizations.MembersList", {
const hBox = this.__memberInvitation = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({
alignY: "middle"
}));
hBox.exclude();

const userEmail = new qx.ui.form.TextField().set({
required: true,
Expand Down Expand Up @@ -217,8 +215,14 @@ qx.Class.define("osparc.desktop.organizations.MembersList", {

const canIWrite = orgModel.getAccessRights().getWrite();
const canIDelete = orgModel.getAccessRights().getDelete();

const introText = canIWrite ?
this.tr("You can add new members and promote or demote existing ones.") :
this.tr("You can't add new members to this Organization. Please contact an Administrator or Manager.");
this.__introLabel.setValue(introText);

this.__memberInvitation.set({
visibility: canIWrite ? "visible" : "excluded"
enabled: canIWrite
});

const params = {
Expand Down
2 changes: 1 addition & 1 deletion .../static-webserver/client/source/class/osparc/desktop/organizations/OrganizationDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ qx.Class.define("osparc.desktop.organizations.OrganizationDetails", {
orgModel.bind("thumbnail", organizationListItem, "thumbnail");
orgModel.bind("label", organizationListItem, "title");
orgModel.bind("description", organizationListItem, "subtitle");
orgModel.bind("nMembers", organizationListItem, "contact");
orgModel.bind("nMembers", organizationListItem, "role");
orgModel.bind("accessRights", organizationListItem, "accessRights");

// set orgModel to the tab views
Expand Down
2 changes: 1 addition & 1 deletion ...es/static-webserver/client/source/class/osparc/desktop/organizations/OrganizationsList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ qx.Class.define("osparc.desktop.organizations.OrganizationsList", {
ctrl.bindProperty("thumbnail", "thumbnail", null, item, id);
ctrl.bindProperty("label", "title", null, item, id);
ctrl.bindProperty("description", "subtitle", null, item, id);
ctrl.bindProperty("nMembers", "contact", null, item, id);
ctrl.bindProperty("nMembers", "role", null, item, id);
ctrl.bindProperty("accessRights", "accessRights", null, item, id);
},
configureItem: item => {
Expand Down
2 changes: 1 addition & 1 deletion services/static-webserver/client/source/class/osparc/desktop/organizations/ServicesList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ qx.Class.define("osparc.desktop.organizations.ServicesList", {
const servicesModel = this.__servicesModel = new qx.data.Array();
const servicesCtrl = new qx.data.controller.List(servicesModel, servicesUIList, "name");
servicesCtrl.setDelegate({
createItem: () => new osparc.desktop.organizations.SharedResourceListItem(),
createItem: () => new osparc.desktop.organizations.SharedResourceListItem("service"),
bindItem: (ctrl, item, id) => {
ctrl.bindProperty("key", "model", null, item, id);
ctrl.bindProperty("key", "key", null, item, id);
Expand Down
47 changes: 47 additions & 0 deletions ...atic-webserver/client/source/class/osparc/desktop/organizations/SharedResourceListItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,12 @@
qx.Class.define("osparc.desktop.organizations.SharedResourceListItem", {
extend: osparc.ui.list.ListItemWithMenu,

construct: function(resourceType) {
this.__resourceType = resourceType;

this.base(arguments);
},

properties: {
orgId: {
check: "Integer",
Expand All @@ -38,7 +44,28 @@ qx.Class.define("osparc.desktop.organizations.SharedResourceListItem", {
"openMoreInfo": "qx.event.type.Data"
},

statics: {
canDelete: function(accessRights) {
const canDelete = accessRights.getDelete ? accessRights.getDelete() : false;
return canDelete;
},

canWrite: function(accessRights) {
let canWrite = accessRights.getWrite ? accessRights.getWrite() : false;
canWrite = canWrite || (accessRights.getWriteAccess ? accessRights.getWriteAccess() : false);
return canWrite;
},

canRead: function(accessRights) {
let canRead = accessRights.getRead ? accessRights.getRead() : false;
canRead = canRead || (accessRights.getExecuteAccess ? accessRights.getExecuteAccess() : false);
return canRead;
}
},

members: {
__resourceType: null,

_createChildControlImpl: function(id) {
let control;
switch (id) {
Expand All @@ -63,6 +90,26 @@ qx.Class.define("osparc.desktop.organizations.SharedResourceListItem", {
return control || this.base(arguments, id);
},

__getRoleInfo: function(i) {
if (this.__resourceType === "service") {
return osparc.data.Roles.SERVICES[i];
}
return osparc.data.Roles.STUDY[i];
},

// overridden
_setRole: function() {
const accessRights = this.getAccessRights();
const role = this.getChildControl("role");
if (this.self().canDelete(accessRights)) {
role.setValue(this.__getRoleInfo(3).label);
} else if (this.self().canWrite(accessRights)) {
role.setValue(this.__getRoleInfo(2).label);
} else {
role.setValue(this.__getRoleInfo(1).label);
}
},

// overridden
_getInfoButton: function() {
const accessRights = this.getAccessRights();
Expand Down
2 changes: 1 addition & 1 deletion services/static-webserver/client/source/class/osparc/desktop/organizations/TemplatesList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ qx.Class.define("osparc.desktop.organizations.TemplatesList", {
const templatesModel = this.__templatesModel = new qx.data.Array();
const templatesCtrl = new qx.data.controller.List(templatesModel, templatesUIList, "name");
templatesCtrl.setDelegate({
createItem: () => new osparc.desktop.organizations.SharedResourceListItem(),
createItem: () => new osparc.desktop.organizations.SharedResourceListItem("template"),
bindItem: (ctrl, item, id) => {
ctrl.bindProperty("uuid", "model", null, item, id);
ctrl.bindProperty("uuid", "key", null, item, id);
Expand Down
8 changes: 4 additions & 4 deletions services/static-webserver/client/source/class/osparc/desktop/wallets/MemberListItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,13 +46,13 @@ qx.Class.define("osparc.desktop.wallets.MemberListItem", {
},

// overridden
_setSubtitle: function() {
_setRole: function() {
const accessRights = this.getAccessRights();
const subtitle = this.getChildControl("contact");
const role = this.getChildControl("role");
if ("getWrite" in accessRights && accessRights.getWrite()) {
subtitle.setValue(osparc.data.Roles.WALLET[2].label);
role.setValue(osparc.data.Roles.WALLET[2].label);
} else if ("getRead" in accessRights && accessRights.getRead()) {
subtitle.setValue(osparc.data.Roles.WALLET[1].label);
role.setValue(osparc.data.Roles.WALLET[1].label);
}
},

Expand Down
8 changes: 4 additions & 4 deletions services/static-webserver/client/source/class/osparc/desktop/wallets/WalletListItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,16 +272,16 @@ qx.Class.define("osparc.desktop.wallets.WalletListItem", {
},

// overridden
_setSubtitle: function() {
_setRole: function() {
const accessRightss = this.getAccessRights();
const myGid = osparc.auth.Data.getInstance().getGroupId();
const found = accessRightss && accessRightss.find(ar => ar["gid"] === myGid);
if (found) {
const subtitle = this.getChildControl("contact");
const role = this.getChildControl("role");
if (found["write"]) {
subtitle.setValue(osparc.data.Roles.WALLET[2].label);
role.setValue(osparc.data.Roles.WALLET[2].label);
} else if (found["read"]) {
subtitle.setValue(osparc.data.Roles.WALLET[1].label);
role.setValue(osparc.data.Roles.WALLET[1].label);
}
}
},
Expand Down
33 changes: 15 additions & 18 deletions services/static-webserver/client/source/class/osparc/ui/list/CollaboratorListItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,6 @@
qx.Class.define("osparc.ui.list.CollaboratorListItem", {
extend: osparc.ui.list.ListItem,

construct: function() {
this.base(arguments);
},

properties: {
collabType: {
check: [0, 1, 2], // 0:all, 1:org, 2:user
Expand All @@ -42,6 +38,7 @@ qx.Class.define("osparc.ui.list.CollaboratorListItem", {
event: "changeShowOptions",
nullable: true
},

resourceType : {
check: "String",
event: "changeResourceType",
Expand Down Expand Up @@ -77,7 +74,7 @@ qx.Class.define("osparc.ui.list.CollaboratorListItem", {
},

members: {
_getResource: function(i) {
__getRoleInfo: function(i) {
const resource = this.getResourceType();
if (resource === "study" || resource === "template") {
return osparc.data.Roles.STUDY[i];
Expand Down Expand Up @@ -149,22 +146,22 @@ qx.Class.define("osparc.ui.list.CollaboratorListItem", {
return;
}

this.__setSubtitle();
this.__setRole();

const menu = this.__getOptionsMenu();
const optionsMenu = this.getChildControl("options");
optionsMenu.setMenu(menu);
},

__setSubtitle: function() {
__setRole: function() {
const accessRights = this.getAccessRights();
const subtitle = this.getChildControl("contact");
const role = this.getChildControl("role");
if (this.self().canDelete(accessRights)) {
subtitle.setValue(this._getResource(3).label);
role.setValue(this.__getRoleInfo(3).label);
} else if (this.self().canWrite(accessRights)) {
subtitle.setValue(this._getResource(2).label);
role.setValue(this.__getRoleInfo(2).label);
} else {
subtitle.setValue(this._getResource(1).label);
role.setValue(this.__getRoleInfo(1).label);
}
},

Expand All @@ -174,17 +171,17 @@ qx.Class.define("osparc.ui.list.CollaboratorListItem", {
});

const accessRights = this.getAccessRights();
let currentRole = this._getResource(1);
let currentRole = this.__getRoleInfo(1);
if (this.self().canDelete(accessRights)) {
currentRole = this._getResource(3);
currentRole = this.__getRoleInfo(3);
} else if (this.self().canWrite(accessRights)) {
currentRole = this._getResource(2);
currentRole = this.__getRoleInfo(2);
}

// promote/demote actions
switch (currentRole.id) {
case "read": {
const promoteButton = new qx.ui.menu.Button(this.tr(`Promote to ${this._getResource(2).label}`));
const promoteButton = new qx.ui.menu.Button(this.tr(`Promote to ${this.__getRoleInfo(2).label}`));
promoteButton.addListener("execute", () => {
this.fireDataEvent("promoteToEditor", {
gid: this.getKey(),
Expand All @@ -196,7 +193,7 @@ qx.Class.define("osparc.ui.list.CollaboratorListItem", {
}
case "write": {
const resource = this.getResourceType();
const promoteButton = new qx.ui.menu.Button(this.tr(`Promote to ${this._getResource(3).label}`));
const promoteButton = new qx.ui.menu.Button(this.tr(`Promote to ${this.__getRoleInfo(3).label}`));
promoteButton.setVisibility(resource === "service" ? "excluded" : "visible");
promoteButton.addListener("execute", () => {
this.fireDataEvent("promoteToOwner", {
Expand All @@ -205,7 +202,7 @@ qx.Class.define("osparc.ui.list.CollaboratorListItem", {
});
});
menu.add(promoteButton);
const demoteButton = new qx.ui.menu.Button(this.tr(`Demote to ${this._getResource(1).label}`));
const demoteButton = new qx.ui.menu.Button(this.tr(`Demote to ${this.__getRoleInfo(1).label}`));
demoteButton.addListener("execute", () => {
this.fireDataEvent("demoteToUser", {
gid: this.getKey(),
Expand All @@ -216,7 +213,7 @@ qx.Class.define("osparc.ui.list.CollaboratorListItem", {
break;
}
case "delete": {
const demoteButton = new qx.ui.menu.Button(this.tr(`Demote to ${this._getResource(2).label}`));
const demoteButton = new qx.ui.menu.Button(this.tr(`Demote to ${this.__getRoleInfo(2).label}`));
demoteButton.addListener("execute", () => {
this.fireDataEvent("demoteToEditor", {
gid: this.getKey(),
Expand Down
12 changes: 6 additions & 6 deletions services/static-webserver/client/source/class/osparc/ui/list/ListItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
* c.bindProperty("thumbnail", "thumbnail", null, item, id);
* c.bindProperty("name", "title", null, item, id);
* c.bindProperty("description", "subtitle", null, item, id);
* c.bindProperty("contact", "contact", null, item, id);
* c.bindProperty("role", "role", null, item, id);
* }
* });
* </pre>
Expand Down Expand Up @@ -98,9 +98,9 @@ qx.Class.define("osparc.ui.list.ListItem", {
nullable : true
},

contact: {
role: {
check : "String",
apply : "__applyContact",
apply : "__applyRole",
nullable : true
}
},
Expand Down Expand Up @@ -180,7 +180,7 @@ qx.Class.define("osparc.ui.list.ListItem", {
column: 1
});
break;
case "contact":
case "role":
control = new qx.ui.basic.Label().set({
font: "text-13",
alignY: "middle"
Expand Down Expand Up @@ -244,11 +244,11 @@ qx.Class.define("osparc.ui.list.ListItem", {
label.setValue(value);
},

__applyContact: function(value) {
__applyRole: function(value) {
if (value === null) {
return;
}
const label = this.getChildControl("contact");
const label = this.getChildControl("role");
label.setValue(value);
},

Expand Down
14 changes: 8 additions & 6 deletions services/static-webserver/client/source/class/osparc/ui/list/ListItemWithMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,27 +80,29 @@ qx.Class.define("osparc.ui.list.ListItemWithMenu", {
return;
}

this._setRole();

this._getInfoButton();

this.__applyOptions();
},

_setSubtitle: function() {
_setRole: function() {
const accessRights = this.getAccessRights();
const subtitle = this.getChildControl("contact");
const role = this.getChildControl("role");
if (
"getDelete" in accessRights && accessRights.getDelete()
) {
subtitle.setValue(osparc.data.Roles.ORG[3].label);
role.setValue(osparc.data.Roles.ORG[3].label);
} else if ("getWrite" in accessRights && accessRights.getWrite()) {
subtitle.setValue(osparc.data.Roles.ORG[2].label);
role.setValue(osparc.data.Roles.ORG[2].label);
} else if (
("getRead" in accessRights && accessRights.getRead()) ||
("getExecute" in accessRights && accessRights.getExecute())
) {
subtitle.setValue(osparc.data.Roles.ORG[1].label);
role.setValue(osparc.data.Roles.ORG[1].label);
} else {
subtitle.setValue(osparc.data.Roles.ORG[0].label);
role.setValue(osparc.data.Roles.ORG[0].label);
}
},

Expand Down
Loading

0 comments on commit 2972184

Please sign in to comment.