cluedin-widget/core/components/entityRelated/EntityPropertyViewer.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 moment from 'moment';
import iso from '../../../iso';
import SourceTitle from '../providerRelated/SourceTitle.jsx';

class PropertyView extends Component {
  render() {
    const { name, content } = this.props;

    return (
      <div className="cluedIn_propertyViewer_property">
        <div className="cluedIn_propertyViewer_property_name">
          {name}
        </div>
        <div className="cluedIn_propertyViewer_property_value">
          {content}
        </div>
      </div>
    );
  }
}

const validatePropertyKey = (key) => {
  return (
    key.toLowerCase().indexOf('kpi') === -1 && key.toLowerCase().indexOf('social') === -1
  );
};

const validateSchema = (schemaProperty) => {
  return (
    schemaProperty && schemaProperty.Visibility.toLowerCase() === 'Visible'.toLowerCase()
  );
};

const getAppropriateComponent = (propertyValueWithSchema) => {
  let index = propertyValueWithSchema.schema.Key;

  if (propertyValueWithSchema.schema.DataType === 'Guid') {
    return;
  }

  if (propertyValueWithSchema.schema.DataType === 'Email') {
    let emailLink = `mailto:${propertyValueWithSchema.value}`;
    let linkContent = (<a href={emailLink} target="_blank">{propertyValueWithSchema.value}</a>);
    return (
      <PropertyView key={index} name={propertyValueWithSchema.schema.DisplayName} content={linkContent}/>
    );
  }

  if (propertyValueWithSchema.schema.DataType === 'Duration') {
    let durationContent = `${propertyValueWithSchema.value} minutes`;
    return (
      <PropertyView key={index} name={propertyValueWithSchema.schema.DisplayName} content={durationContent}/>
    );
  }

  if (propertyValueWithSchema.schema.DataType === 'DateTime') {
    let dateValue = moment(propertyValueWithSchema.value).format('LL');

    return (
      <PropertyView key={index} name={propertyValueWithSchema.schema.DisplayName} content={dateValue}/>
    );
  }

  if (propertyValueWithSchema.schema.DataType === 'Boolean') {
    let boolValue = (propertyValueWithSchema.value.toLowerCase() === 'true') ? 'True' : 'False';

    return (
      <PropertyView key={index} name={propertyValueWithSchema.schema.DisplayName} content={boolValue}/>
    )
  }

  if (propertyValueWithSchema.schema.DataType === 'PhoneNumber') {
    let phoneLink = `tel:${propertyValueWithSchema.value}`;
    let phoneLinkContent = (<a href={phoneLink} target="_blank">{propertyValueWithSchema.value}</a>);

    return (
      <PropertyView key={index} name={propertyValueWithSchema.schema.DisplayName} content={phoneLinkContent}/>
    );
  }

  if (propertyValueWithSchema.schema.DataType === 'Uri') {
    let uriContent = (<a href={propertyValueWithSchema.value} target="_blank">{propertyValueWithSchema.value}</a>);

    return (
      <PropertyView key={index} name={propertyValueWithSchema.schema.DisplayName} content={uriContent}/>
    );

  }

  return (
    <PropertyView key={index} name={propertyValueWithSchema.schema.DisplayName}
                  content={propertyValueWithSchema.value}/>
  );
};

export default class PropertyViewer extends Component {

  constructor(props) {
    super(props);
    this.state = {
      visible: false
    };
    this.toggleVisibility = this.toggleVisibility.bind(this);
  }

  toggleVisibility() {
    this.setState({
      visible: !this.state.visible
    })
  }

  render() {

    const { entity, schema } = this.props;
    let propertiesContent;
    let descriptionContent;

    const entityProperties = entity.data.properties;
    const properties = [];
    const groupedByContent = [];
    const groups = entity.data.propertyGroups;
    const propertiesKeys = Object.keys(entityProperties);

    const groupedBySource = iso.collection.groupBy(groups, (g) => {
      return g.source;
    });

    const findSchema = (key) => {
      return schema.find((s) => {
        return s.Key.toLowerCase() === key.toLowerCase();
      });
    };

    for (var sourceKey in groupedBySource) {
      if ('undefined' !== sourceKey) {
        const propertiesForSource = groupedBySource[sourceKey];

        groupedByContent.push(<SourceTitle key={sourceKey} title={sourceKey}/>);

        if (propertiesForSource && propertiesForSource.length > 0) {
          propertiesForSource.forEach((p) => {
            p.keys.forEach((k) => {
              if (validatePropertyKey(k)) {
                let foundSchema = findSchema(k);

                if (validateSchema(foundSchema)) {
                  let value = entityProperties['property-' + k];
                  groupedByContent.push(getAppropriateComponent({
                    value: value,
                    schema: foundSchema,
                  }));
                }
              }
            });
          });
        }
      }
    }

    for (var key in entityProperties) {
      var foundSchema = findSchema(key);

      if (validateSchema(foundSchema) && validatePropertyKey(key)) {
        properties.push({
          value: entityProperties[key],
          schema: foundSchema,
        });
      }
    }

    if (entity.data.description && entity.data.entityType === '/Organization') {
      descriptionContent = (
        <PropertyView key="descriptionKey" name="Description" content={entity.data.description}/>
      );
    }

    propertiesContent = properties.map(getAppropriateComponent);

    return (
      <div className="cluedIn_propertyViewer">
        {descriptionContent}
        {groupedByContent}
      </div>
    );
  }
}