cluedin-widget/core/components/entities/document.jsx

This project contains all the pages needed for browsing entities and searching them. The aim is to replace the CluedIn.Webapp project with this one when all the pages ( including the Admin page ) will be ported to REACT.

import React, { Component } from 'react';
import EntityDefaultHeader from '../entityRelated/EntityDefaultHeader.jsx';
import EntityValueRow from '../entityRelated/EntityValueRow.jsx';
import EntityAuthors from '../entityRelated/EntityAuthors.jsx';
import EntityLastChangeBy from '../entityRelated/EntityLastChangeBy.jsx';

export default class Document extends Component {
  render() {
    const { entity, openInNewTab } = this.props;

    let preview;
    let entitiesProp;
    let propHtml;

    propHtml = (<div className="cluedIn_row_properties">
      <div className="cluedIn_row">
        <div className="cluedIn_col s6">
          <EntityValueRow name="Last Author">
            <EntityLastChangeBy entity={entity}></EntityLastChangeBy>
          </EntityValueRow>
        </div>
        <div className="cluedIn_col s6">
          <EntityValueRow name="Last Modification">
            {entity.data.modifiedDateFormatted}
          </EntityValueRow>
        </div>
      </div>
      <div className="cluedIn_row">
        <div className="cluedIn_col s6">
          <EntityValueRow name="Author(s)">
            <EntityAuthors entity={entity}></EntityAuthors>
          </EntityValueRow>
        </div>
        <div className="cluedIn_col s6">
          <EntityValueRow name="Creation Date">
            {entity.data.createdDateFormatted}
          </EntityValueRow>
        </div>
      </div>
    </div>);

    if (entity.hasPreview) {
      var previewStyle = { backgroundImage: 'url(' + entity.previewUrl + ')' };

      preview = (
        <div className="cluedIn_entityPreview">
          <div className="cluedIn_entityPreview_image" style={previewStyle}/>
        </div>
      );

      entitiesProp = (<div
        className="cluedIn_row cluedIn_row_properties_with_preview cluedIn_row_notCentered cluedIn_entity_table">

        <div className="cluedIn_col s9">
          {propHtml}
        </div>
        <div className="cluedIn_col s3">
          {preview}
        </div>
      </div>);
    } else {
      var spacerStyle = { width: '60px' };

      preview = <div style={spacerStyle}></div>;

      entitiesProp = (<div className="cluedIn_entity_row_sub">
        {preview}
        {propHtml}
      </div>);
    }

    return (
      <div className="cluedIn_entity_row">
        <EntityDefaultHeader openInNewTab={openInNewTab} entity={entity}></EntityDefaultHeader>
        {entitiesProp}
      </div>

    );
  }
}