azure-devops-ui
Version:
React components for building web UI in Azure DevOps
87 lines (86 loc) • 6.78 kB
JavaScript
import "../../CommonImports";
import "../../Core/core.css";
import "./IdentityCard.css";
import * as React from "react";
import * as Resources from '../../Resources.Persona';
import { format } from '../../Core/Util/String';
import { Button } from '../../Button';
import { Persona } from "../Persona/Persona";
import { PersonaSize } from "../Persona/Persona.Props";
export class OrganizationCard extends React.Component {
constructor() {
super(...arguments);
// Helper methods to create Presona elements
this.createManagerChainIdentityElements = () => {
const managerChainElementList = this.props.managerList
? this.props.managerList.map(manager => {
const managerData = {
imageUrl: manager.image,
primaryText: manager.displayName ? manager.displayName : "",
secondaryText: manager.jobTitle ? manager.jobTitle : "",
tertiaryText: manager.department ? manager.department : ""
};
return (React.createElement("div", { className: "bolt-identity-card-persona-list-row flex-row flex-grow scroll-hidden", key: manager.entityId + manager.signInAddress },
React.createElement(Button, { "aria-label": manager.displayName, className: "bolt-identity-card-persona-list-element profile-card-tab-element flex-row text-ellipsis", onClick: () => {
this.props.onClickEntity && this.props.onClickEntity(manager);
}, subtle: true },
React.createElement(Persona, { size: PersonaSize.size40, identity: manager }),
React.createElement("div", { className: "flex-column flex-grow bolt-identity-card-name text-ellipsis" },
React.createElement("div", { className: "text-left text-ellipsis" }, managerData.primaryText),
managerData.secondaryText === "" ? (undefined) : (React.createElement("div", { className: "text-left text-ellipsis" }, managerData.secondaryText))))));
})
: [];
// Append current identity to list
const mainIdentityData = {
imageUrl: this.props.identity.image,
primaryText: this.props.identity.displayName,
secondaryText: this.props.identity.jobTitle,
tertiaryText: this.props.identity.department
};
managerChainElementList.push(React.createElement("div", { className: "bolt-identity-card-persona-list-row flex-row flex-grow", key: this.props.identity.entityId + this.props.identity.signInAddress },
React.createElement(Button, { className: "bolt-identity-card-persona-list-element profile-card-tab-element flex-row flex-shrink text-ellipsis", "aria-label": this.props.identity.displayName, onClick: () => {
this.props.onClickEntity && this.props.onClickEntity(this.props.identity);
}, subtle: true },
React.createElement(Persona, { size: PersonaSize.size40, identity: this.props.identity }),
React.createElement("div", { className: "flex-column flex-grow bolt-identity-card-name text-ellipsis" },
React.createElement("div", { className: "text-left text-ellipsis" }, mainIdentityData.primaryText),
mainIdentityData.secondaryText ? (React.createElement("div", { className: "text-left text-ellipsis" }, mainIdentityData.secondaryText)) : (undefined)))));
return managerChainElementList;
};
this.createDirectReportsIdentityElements = () => {
const directReportElementList = this.props.directReportList
? this.props.directReportList.map(directReport => {
const directReportData = {
imageUrl: directReport.image,
primaryText: directReport.displayName ? directReport.displayName : "",
secondaryText: directReport.jobTitle ? directReport.jobTitle : "",
tertiaryText: directReport.department ? directReport.department : ""
};
return (React.createElement("div", { className: "bolt-identity-card-persona-list-row flex-row flex-grow", key: directReport.entityId + directReport.signInAddress },
React.createElement(Button, { className: "bolt-identity-card-persona-list-element profile-card-tab-element flex-row text-ellipsis", "aria-label": directReport.displayName, onClick: () => {
this.props.onClickEntity && this.props.onClickEntity(directReport);
}, subtle: true },
React.createElement(Persona, { size: PersonaSize.size40, identity: directReport }),
React.createElement("div", { className: "flex-column flex-grow bolt-identity-card-name text-ellipsis" },
React.createElement("div", { className: "text-left text-ellipsis" }, directReportData.primaryText),
directReportData.secondaryText === "" ? (undefined) : (React.createElement("div", { className: "text-left text-ellipsis" }, directReportData.secondaryText))))));
})
: [];
return directReportElementList;
};
}
// Render
render() {
const managerIdentityList = this.createManagerChainIdentityElements();
const directReportIdentityList = this.createDirectReportsIdentityElements();
return (React.createElement("div", { className: "bolt-identity-contact-card-organization-card-wrapper bolt-identity-card-content" },
React.createElement("div", { className: "bolt-identity-organization-card-content v-scroll-auto h-scroll-hidden" },
React.createElement("div", { className: "bolt-identity-organization-card-header-wrapper" },
Resources.IdentityCardOrganization,
" "),
React.createElement("div", { className: "bolt-identity-organization-card-manager-chain-wrapper" }, managerIdentityList),
directReportIdentityList.length > 0 && (React.createElement("div", { className: "bolt-identity-organization-card-direct-reports-wrapper" },
format(Resources.IdentityCardReportingTo, this.props.identity.displayName, this.props.directReportList ? this.props.directReportList.length : 0),
directReportIdentityList)))));
}
}