cluedin-widget
Version:
This is the project for creating and managing widgets in CluedIn.
99 lines (83 loc) • 4.14 kB
JSX
import React, { Component } from 'react';
import Widget from '../../../core/components/generics/widget.jsx';
import Overlay from '../../../core/components/generics/overlay.jsx';
import NoEntities from '../../../core/components/entityRelated/NoEntities.jsx';
import registry from '../../../core/registry';
import config from '../../../core/config';
import { connect } from 'react-redux';
import EntityLink from '../../../core/components/entityRelated/EntityLink.jsx'
import iso from '../../../iso';
import SocialMenu from '../../../core/components/entityRelated/SocialMenu.jsx';
import PropertyViewer from '../../../core/components/entityRelated/EntityPropertyViewer.jsx';
import { findFromKey, makeGoogleMapUrl } from '../../../core/helpers/properties.jsx'
import FollowWidget from '../../../core/components/entityRelated/FollowWidget.jsx';
import Loading from '../../../core/components/generics/loading.jsx';
const collectionHelper = iso.collection;
class PersonProfile extends Component {
render() {
let locationHtml;
const { isFetchingEntity, entity } = this.props;
if ( !entity ) {
var isLoading = true;
var style = {
height: '400px'
};
return (<Widget loading={isLoading}>
<div style={style}><Loading></Loading></div>
</Widget>);
}
if ( !entity.hasPreview ) {
entity.logoUrl = config.image.defaultProfile;
}
var jobtitleProp = findFromKey( entity.properties, 'jobtitle' );
var locationProp = findFromKey( entity.properties, 'location' );
var emailProp = findFromKey( entity.properties, 'email' );
var phoneNumberProp = findFromKey( entity.properties, 'phonenumber' );
var emailHtml = ( emailProp && emailProp.value ) ? (
<div className="cluedIn_personProfile_withIcon cluedIn_personProfile_email">
<a target="__blank" href={ "mailto:" + emailProp.value }><i
className="fa fa-envelope-o"></i><span>{emailProp.value}</span></a>
</div>) : '';
var jobTitleHtml = jobtitleProp ? (
<div className="cluedIn_personProfile_jobTitle">{jobtitleProp.value}</div>) : '';
var locationValue = locationProp ? locationProp.value : '';
if ( locationValue ) {
locationHtml = (<div className="cluedIn_personProfile_withIcon cluedIn_personProfile_address">
<a target="__blank" href={makeGoogleMapUrl(locationValue)}><i
className="fa fa-map-marker"></i><span>{locationValue || NA}</span></a>
</div>)
}
var phoneNumberPropHtml = (phoneNumberProp && phoneNumberProp.value) ? (
<div className="cluedIn_personProfile_withIcon cluedIn_personProfile_phone">
<a target="__blank" href={ "tel:" + phoneNumberProp.value }><i
className="fa fa-phone"></i><span>{phoneNumberProp.value}</span></a>
</div>) : '';
return (<Widget>
<div className="cluedIn_personProfile">
<div className="cluedIn_personProfile_image">
<img className="cluedIn_img_responsive"
src={entity.logoUrl}/>
</div>
<div className="cluedIn_personProfile_name">
<EntityLink entity={entity}></EntityLink>
</div>
{jobTitleHtml}
{emailHtml}
{phoneNumberPropHtml}
{locationHtml}
<div className="cluedIn_personProfile_social">
<SocialMenu social={entity.social}></SocialMenu>
</div>
<FollowWidget entity={entity}></FollowWidget>
<PropertyViewer entity={entity}></PropertyViewer>
</div>
</Widget>);
}
}
function select( state ) {
return {
entity: state.entity.selectedEntity,
isFetchingEntity: state.entity.isFetchingEntity
};
}
registry.register( 'PersonProfile', connect( select )( PersonProfile ) );