Skip to content

Commit

Permalink
Fixes #1098
Browse files Browse the repository at this point in the history
  • Loading branch information
@oharsta
oharsta committed Dec 4, 2023
1 parent 568ebf6 commit f994adb
Show file tree
Hide file tree
Showing 7 changed files with 100 additions and 95 deletions.
85 changes: 61 additions & 24 deletions client/src/components/redesign/AboutCollaboration.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,13 @@ import "./AboutCollaboration.scss";
import {isEmpty, removeDuplicates, stopEvent} from "../../utils/Utils";
import {CO_SHORT_NAME, SRAM_USERNAME} from "../../validations/regExps";
import ServiceCard from "../ServiceCard";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";

import {ReactComponent as WebsiteIcon} from "../../icons/network-information.svg";
import {ReactComponent as EmailActionIcon} from "../../icons/streamline/email-action-unread.svg";
import {ReactComponent as ShortNameIcon} from "../../icons/short-name.svg";
import {ReactComponent as TagsIcon} from "../../icons/tags.svg";
import Button from "../Button";
import {Chip, ChipType} from "@surfnet/sds";


class AboutCollaboration extends React.Component {
Expand Down Expand Up @@ -57,6 +62,7 @@ class AboutCollaboration extends React.Component {
.map(service =>
<ServiceCard service={service}
user={user}
key={service.id}
collaboration={collaboration}
ActionButton={!isEmpty(service.uri) &&
<Button txt={I18n.t("service.launch")}
Expand All @@ -70,34 +76,65 @@ class AboutCollaboration extends React.Component {
<div className="services">
{(services.length === 0 && !isJoinRequest) &&
<h4 className={"margin"}>{I18n.t("models.collaboration.noServices")}</h4>}
{isJoinRequest && <h4 className={"margin"}>{I18n.t("models.collaboration.noServicesJoinRequest")}</h4>}
{isJoinRequest &&
<h4 className={"margin"}>{I18n.t("models.collaboration.noServicesJoinRequest")}</h4>}
</div>}
</div>
{!isJoinRequest &&
<div className="members">
<div className="members-header">
<p>{I18n.t("models.collaboration.memberInformation")}</p>

{!isEmpty(collaboration.tags) &&
<div className="meta-section">
<div className="header">
<TagsIcon/>
<p>{I18n.t("models.collaboration.labels")}</p>
</div>
<div className="values">
{collaboration.tags
.sort()
.map((label, index) => <span key={index} className="chip-container">
<Chip type={ChipType.Support_100} label={label.tag_value}/>
</span>)}
</div>
</div>}
<div className="meta-section">
<div className="header">
<ShortNameIcon/>
<p>{I18n.t("collaboration.shortName")}</p>
</div>
<div className="values">
<span><strong>{collaboration.short_name}</strong></span>
</div>
</div>
{collaboration.website_url &&
<div className="meta-section">
<div className="header">
<WebsiteIcon/>
<p>{I18n.t("collaborations.moreInformation")}</p>
</div>
<div className="values">
<a href={collaboration.website_url}
rel="noopener noreferrer"
target="_blank">{I18n.t("coPageHeaders.visit")}</a>
</div>
</div>}
<div className="meta-section">
<div className="header">
<EmailActionIcon/>
<p>{I18n.t("models.collaboration.memberInformation")}</p>
</div>
<div className="values">
{memberships
.sort((m1, m2) => m1.user.name.localeCompare(m2.user.name))
.map(m => <p key={m.id}><a href={`mailto:${m.user.email}`}>{m.user.name}</a></p>)}
</div>
</div>
<table className={"admins"}>
<thead/>
<tbody>
{memberships
.sort((m1, m2) => m1.user.name.localeCompare(m2.user.name))
.map(m =>
<tr key={m.id}>
<td className={"name"}>
{m.user.name}</td>
<td className={"email"}><a href={`mailto:${m.user.email}`}>
<FontAwesomeIcon
icon="envelope"/></a>
</td>
</tr>)}
{!showMembers &&
<tr className={"member-disclaimer"}>
<td colSpan={2}>{I18n.t("models.collaboration.discloseNoMemberInformation")}</td>
</tr>}
</tbody>
</table>


{!showMembers &&
<div className={"member-disclaimer"}>
<p>{I18n.t("models.collaboration.discloseNoMemberInformation")}</p>
</div>}
</div>}

{isJoinRequest && <div className="members">
Expand Down
65 changes: 30 additions & 35 deletions client/src/components/redesign/AboutCollaboration.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,60 +29,55 @@ div.collaboration-about-mod {
}

div.about {
width: 60%;
width: 50%;
@media (max-width: $tablet-max) {
width: 100%;
}
}

div.members {
width: 30%;
.sds--content-card {
margin-bottom: 25px;
}

table.admins {
margin-top: 25px;
width: 100%;
tr {
border-bottom: 1px solid $light-grey;
.members {
width: 40%;

&:first-child {
margin-top: 20px;
border-top: 1px solid $medium-grey;
}
td {
padding: 10px 0;
&.name {
width: 80%;
}
&.email {
width: 20%;
text-align: center;
}
}
margin: 0 20px 0 40px;

.meta-section {
&:not(:first-child) {
margin-top: 25px;
}

}
}
.header {
display: flex;
align-items: center;


.sds--content-card {
margin-bottom: 25px;
}
svg {
margin-right: 10px;
width: 24px;
height: auto;
}

.members {
margin: 0 20px 0 40px;
&.join-request {
flex-direction: column;
}

.members-header {
display: flex;

&.join-request {
flex-direction: column;
}

a {
margin-left: 25px;
div.values {
padding-left: 35px;

span.chip-container {
display: inline-block;
margin: 10px 10px 0 0;
}
}

}


}
}
1 change: 1 addition & 0 deletions client/src/components/redesign/UnitHeader.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@


.icon-list-items {
margin-top: 15px;
.icon-list-item {
display: flex;
align-items: center;
Expand Down
1 change: 1 addition & 0 deletions client/src/components/redesign/UsedServices.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -386,6 +386,7 @@ class UsedServices extends React.Component {
}
{usedServices.map(service =>
<ServiceCard service={service}
key={service.id}
nameLinkAction={e => this.openService(service, e)}
status={this.getServiceStatus(service)}
message={this.getServiceMessage(service)}
Expand Down
5 changes: 3 additions & 2 deletions client/src/locale/en.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -445,7 +445,7 @@ const en = {
},
collaboration: {
memberHeader: "{{nbrMember}} members – {{nbrGroups}} groups",
memberInformation: "If you have any questions about this collaboration, please contact one of the admins:",
memberInformation: "Contact an administrator",
noAdminsHeader: "No admins (yet)",
adminsHeader: "Organised by <a style=\"display:inline;\" href=\"mailto:{{bcc}}{{mails}}\"><strong>{{name}}</strong></a>",
twoAdminsHeader: "Organised by <a style=\"display:inline;\" href=\"mailto:{{bcc}}{{mails}}\"><strong>{{name}}</strong> and <strong>{{nbr}} other</strong></a>",
Expand All @@ -469,7 +469,8 @@ const en = {
discloseNoMemberInformation: "This collaboration discloses no member information",
discloseNoMemberInformationJoinRequest: "Only visible for members",
newCollaborationRequest: "Request collaboration",
leave: "Leave collaboration"
leave: "Leave collaboration",
labels: "Label(s)",
},
apiKeys: {
title: "Organisation API tokens",
Expand Down
5 changes: 3 additions & 2 deletions client/src/locale/nl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -445,7 +445,7 @@ const nl = {
},
collaboration: {
memberHeader: "{{nbrMember}} leden – {{nbrGroups}} groepen",
memberInformation: "Neem bij vragen over deze samenwerking contact op met een van de beheerders:",
memberInformation: "Neem contact op met een beheerder",
noAdminsHeader: "(Nog) geen beheerders",
adminsHeader: "Georganiseerd door <a style=\"display:inline;\" href=\"mailto:{{bcc}}{{mails}}\"><strong>{{name}}</strong></a>",
twoAdminsHeader: "Georganiseerd door <a style=\"display:inline;\" href=\"mailto:{{bcc}}{{mails}}\"><strong>{{name}}</strong> en <strong>{{nbr}} ander</strong></a>",
Expand All @@ -469,7 +469,8 @@ const nl = {
discloseNoMemberInformation: "Deze samenwerking deelt geen ledeninformatie",
discloseNoMemberInformationJoinRequest: "Alleen zichtbaar voor leden",
newCollaborationRequest: "Aanvragen samenwerking",
leave: "Lidmaatschap opzeggen"
leave: "Lidmaatschap opzeggen",
labels: "Label(s)",
},
apiKeys: {
title: "Organisatie-API-tokens",
Expand Down
33 changes: 1 addition & 32 deletions client/src/pages/CollaborationDetail.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,12 @@ import UnitHeader from "../components/redesign/UnitHeader";
import Tabs from "../components/Tabs";
import {ReactComponent as CoAdminIcon} from "../icons/users.svg";
import {ReactComponent as ServicesIcon} from "../icons/services.svg";
import {ReactComponent as ShortNameIcon} from "../icons/short-name.svg";
import {ReactComponent as MemberIcon} from "../icons/groups.svg";
import {ReactComponent as TimerIcon} from "../icons/streamline/timer2.svg";
import {ReactComponent as GroupsIcon} from "../icons/ticket-group.svg";
import {ReactComponent as WebsiteIcon} from "../icons/network-information.svg";
import {ReactComponent as CopyIcon} from "../icons/duplicate.svg";
import {ReactComponent as UserTokensIcon} from "../icons/connections.svg";
import {ReactComponent as MemberStatusIcon} from "@surfnet/sds/icons/functional-icons/id-2.svg";
import {ReactComponent as MemberStatusIcon} from "@surfnet/sds/icons/functional-icons/id-1.svg";
import {ReactComponent as JoinRequestsIcon} from "../icons/single-neutral-question.svg";
import {ReactComponent as AboutIcon} from "../icons/common-file-text-home.svg";
import CollaborationAdmins from "../components/redesign/CollaborationAdmins";
Expand Down Expand Up @@ -559,15 +557,6 @@ class CollaborationDetail extends React.Component {
</div>);
}

getShortNameIconListItem = collaboration => {
return (
{
Icon: <ShortNameIcon/>,
value: <span>{collaboration.short_name}</span>
}
);
}

getMemberIconListItem = collaboration => {
const memberCount = collaboration.collaboration_memberships.length;
const groupCount = collaboration.groups.length;
Expand All @@ -587,17 +576,8 @@ class CollaborationDetail extends React.Component {
getUnitHeaderForMemberNew = (user, config, collaboration, allowedToEdit, showMemberView, collaborationJoinRequest, alreadyMember, adminOfCollaboration) => {
const customAction = collaborationJoinRequest ? this.collaborationJoinRequestAction(collaboration, alreadyMember) : null;
const iconListItems = [
this.getShortNameIconListItem(collaboration),
this.getMemberIconListItem(collaboration)
];
if (collaboration.website_url) {
iconListItems.push({
Icon: <WebsiteIcon/>,
value: <a href={collaboration.website_url} target="_blank" rel="noopener noreferrer">
{I18n.t("coPageHeaders.visit")}
</a>
})
}
const membershipStatus = this.getMembershipStatus(collaboration, user);
if (!collaborationJoinRequest && membershipStatus) {
iconListItems.push({
Expand Down Expand Up @@ -789,18 +769,8 @@ class CollaborationDetail extends React.Component {
getUnitHeader = (user, config, collaboration, allowedToEdit, showMemberView, adminOfCollaboration) => {
const joinRequestUrl = `${this.props.config.base_url}/registration?collaboration=${collaboration.identifier}`;
const iconListItems = [
this.getShortNameIconListItem(collaboration),
this.getMemberIconListItem(collaboration)
];
if (collaboration.website_url) {
iconListItems.push({
Icon: <WebsiteIcon/>,
value: <a href={collaboration.website_url} target="_blank" rel="noopener noreferrer">
{I18n.t("coPageHeaders.visit")}
</a>
})
}

if (!collaboration.disable_join_requests) {
iconListItems.push({
Icon: <CopyIcon/>,
Expand All @@ -821,7 +791,6 @@ class CollaborationDetail extends React.Component {
auditLogPath={`collaborations/${collaboration.id}`}
breadcrumbName={I18n.t("breadcrumb.collaboration", {name: collaboration.name})}
name={collaboration.name}
labels={collaboration.tags.map(tag => tag.tag_value)}
displayDescription={false}
actions={this.getActions(user, config, collaboration, allowedToEdit, showMemberView, adminOfCollaboration)}>
{this.getIconListItems(iconListItems)}
Expand Down

0 comments on commit f994adb

Please sign in to comment.