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

This is the project for creating and managing widgets in CluedIn.

import React, { Component } from 'react'
import ProviderIcons from '../entityRelated/providerIcons.jsx'
import EntityIcon from '../entityRelated/EntityIcon.jsx'
import EntityLink from '../entityRelated/EntityLink.jsx'
import { makeNoValueRow, makePropHtml, makeTaskBadgeHtml, findFromKey, MergeProp } from '../../helpers/properties.jsx'

var noStatus          = makeNoValueRow( 'Status' );
var noPriority        = makeNoValueRow( 'Priority' );
var noIsCompleted     = makeNoValueRow( 'Is Completed?' );
var noCompletionDate  = makeNoValueRow( 'Completion Date' );
var noCompleterName   = makeNoValueRow( 'Completer Name' );
var noResponsibleName = makeNoValueRow( 'Responsible Name' );
export default class Task extends Component {
    render() {
        const { entity } = this.props;

        var statusProp               = findFromKey( entity.properties, 'status' );
        var priorityProp             = findFromKey( entity.properties, 'priority' );
        var isCompletedProp          = findFromKey( entity.properties, 'iscompleted' );
        var completionDataProp       = findFromKey( entity.properties, 'completionDate' );
        var completerFirstNameProp   = findFromKey( entity.properties, 'completerFirstName' );
        var completerLastNameProp    = findFromKey( entity.properties, 'completerLastName' );
        var responsibleFirstNameProp = findFromKey( entity.properties, 'responsibleFirstName' );
        var responsibleLastNameProp  = findFromKey( entity.properties, 'responsibleLastName' );

        let statusHtml              = statusProp ? makeTaskBadgeHtml( statusProp ) : noStatus;
        let priorityHtml            = priorityProp ? makePropHtml( priorityProp ) : noPriority;
        let isCompletedHtml         = isCompletedProp ? makePropHtml( isCompletedProp ) : noIsCompleted;
        let completionDataHtml      = completionDataProp ? makePropHtml( completionDataProp ) : noCompletionDate;
        let completerFullNameHtml   = (completerFirstNameProp || completerLastNameProp) ? MergeProp( 'Completer Name', completerFirstNameProp, completerLastNameProp ) : noCompleterName;
        let responsibleFullNameHtml = (responsibleFirstNameProp || responsibleLastNameProp) ? MergeProp( 'Responsible Name', responsibleFirstNameProp, responsibleLastNameProp ) : noResponsibleName;

        return (
            <div className="cluedIn_entity_row">
                <div className="cluedIn_entity_row_sub">
                    <ProviderIcons providers={entity.providers}></ProviderIcons>
                    <EntityIcon entityType={entity.data.entityType}></EntityIcon>
                    <EntityLink entity={entity}></EntityLink>
                </div>

                <div className="cluedIn_row cluedIn_row_notCentered cluedIn_entity_table">
                    <div className="cluedIn_col s6">
                        {statusHtml}
                    </div>
                    <div className="cluedIn_col s6">
                        {completerFullNameHtml}
                    </div>
                    <div className="cluedIn_col s6">
                        {completionDataHtml}
                    </div>
                    <div className="cluedIn_col s6">
                        {responsibleFullNameHtml}
                    </div>
                </div>
            </div>
        );
    }
}