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 { FormattedMessage } from "react-intl";
import RaisedButton from "material-ui/RaisedButton";

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 } = this.props;
        let managedPropertiesAvailable = entity.properties && entity.properties.length > 0;
        let notManagedPropertiesAvailable = entity.notManagerProperties && entity.notManagerProperties.length > 0;

var renderProperty = function (collection, tag) {
        var filtered = tag ? collection.filter( (p) => {return p && p.tag === tag;} ) : collection;
        return filtered.map(  (prop, index) => {
            if (prop.value) {
                return (<div key={index} className="cluedIn_propertyViewer_property">
                    <div className="cluedIn_propertyViewer_property_name">
                        {prop.displayName} 
                    </div>
                    <div className="cluedIn_propertyViewer_property_value">
                        {prop.value}
                    </div>
                </div>
                );
            }
        });
    }
        
        if (!entity || !(managedPropertiesAvailable && notManagedPropertiesAvailable)) {
            return (<div>
                <FormattedMessage id="EntityPropertyViewer.NoOtherInfoAvailable"/>
            </div>);
        }

        let { visible } = this.state;
        let showAllButton;
        let managedProperties;
        let foldedProperties;
        let notManagedProperties;

        if (managedPropertiesAvailable) {             
            managedProperties =  renderProperty(entity.properties,'all');

            let visibleText = <FormattedMessage
                id={visible ? "EntityPropertyViewer.Hide" : "EntityPropertyViewer.ShowAll"}/>
            showAllButton = notManagedPropertiesAvailable ?
                <RaisedButton style={{ 'marginTop': '15px', width: '100%' }} onClick={this.toggleVisibility}
                    label={visibleText}></RaisedButton> : "";
        }

        if (notManagedPropertiesAvailable) {
            if (visible || !managedPropertiesAvailable) {
                foldedProperties =  renderProperty(entity.properties, 'fold');
                notManagedProperties =  renderProperty(entity.notManagerProperties);
            }
        }
        return (
            <div className="cluedIn_propertyViewer">{managedProperties}{showAllButton}{foldedProperties}{notManagedProperties}</div>
        );
    }
}