cluedin-widget/core/components/Layouts/CluedInLayout.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 wms from '../../../wms';
import ReactTabs from 'react-tabs';
import { getExcludedWidgets } from '../../userProfile';
import Grid from './Grid.jsx';
import Col from './Col.jsx';
import Row from './Row.jsx';

const defaultPlaceHolder = 'main';
const defaultGridSize = 4;

const Tab = ReactTabs.Tab;
const Tabs = ReactTabs.Tabs;
const TabList = ReactTabs.TabList;
const TabPanel = ReactTabs.TabPanel;

class CluedInLayout extends Component {

  constructor(props) {
    super(props);
    this.excludeWidgets = getExcludedWidgets(props.type) || [];
  }

  renderWidgets(placeHolderName, widgets) {
    const { entityId, type, isAdmin } = this.props;

    let filteredWidgets = this.filterWidgets(widgets, placeHolderName);

    return (<Grid type={type} isAdmin={isAdmin} entityId={entityId} widgets={filteredWidgets}></Grid>);
  }

  renderWidget(widget) {
    const { entityId, type, isAdmin } = this.props;

    return (<Grid type={type} isAdmin={isAdmin} entityId={entityId} widgets={[widget]}></Grid>);
  }

  buildTabMenu(tab, index) {
    return (<Tab key={index}>{tab.displayName}</Tab>);
  }

  getTabMenu(tabs) {
    const result = tabs.map(this.buildTabMenu, this);
    const { standAlone } = this.props;

    let backStyle = { fontSize: '20px' };

    if (standAlone) {
      backStyle.display = 'none';
    }

    /*result.unshift(
     <Tab key={-1}>
     <i style={backStyle} className="fa fa-arrow-left">
     </i>
     </Tab>);*/

    return result;
  }

  filterWidgets(widgets, placeHolderName) {
    const { isAdmin } = this.props;
    const excludeWidgets = this.excludeWidgets || [];

    let filterByAdminFunc = (w)=> {
      return (w.onlyAdmin) ? isAdmin : true;
    };

    let filterExcludedFunc = (w) => {
      return excludeWidgets.indexOf(w.name) <= -1;
    };

    let filterByPlaceHolderFunc = (w) => {
      if (w.place) {
        return w.place.split('.')[0] === placeHolderName;
      }

      return defaultPlaceHolder === placeHolderName;
    };

    return widgets.filter(filterByAdminFunc).filter(filterExcludedFunc).filter(filterByPlaceHolderFunc);
  }

  getTabConfig(tab) {
    const { widgetConfiguration } = this.props;

    let widgetsWithSuggestedSearches = widgetConfiguration.widgets.slice(0);

    let widgets = this.filterWidgets(widgetsWithSuggestedSearches, tab.name).map((w)=> {

      let placeNames = w.place.split('.');

      placeNames.shift();

      return {
        name: w.name,
        place: placeNames.join('.'),
        parameters: w.parameters,
      };
    });

    return {
      includeSuggestedSearches: tab.includeSuggestedSearches,
      suggestedSearchFilter: tab.suggestedSearchFilter,
      layout: {
        name: tab.layout ? tab.layout.name : ''
      },
      widgets: widgets
    };
  }

  buildTab(tab, tabIndex) {
    const { type, entityId, entity, isFetchingEntity, isAdmin } = this.props;

    let tabConfiguration = this.getTabConfig(tab);

    return (<TabPanel key={tabIndex}>
      <div className="cluedIn_container">
        <CluedInLayout widgetConfiguration={tabConfiguration}
                       type={type}
                       entityId={entityId}
                       entity={entity}
                       isAdmin={isAdmin}
                       isFetchingEntity={isFetchingEntity}></CluedInLayout>
      </div>
    </TabPanel>);
  }

  getTabContent(tabs) {
    let result = tabs.map(this.buildTab, this);

    //result.unshift(<TabPanel key={-1}></TabPanel>);

    return result;
  }

  render() {
    const { widgetConfiguration, entityId, entity, isFetchingEntity, isAdmin } = this.props;
    const layoutName = ( widgetConfiguration.layout && widgetConfiguration.layout.name) ? widgetConfiguration.layout.name : 'Default';
    const layoutConfiguration = wms.getLayout(layoutName);

    let letTabContent;
    let tabContentPlaceholder;

    let widgetsWithSuggestedSearches = widgetConfiguration.widgets.slice(0);

    if (entityId && entity && !isFetchingEntity && widgetConfiguration.includeSuggestedSearches) {

      entity.SuggestedSearches.filter((s)=> {
        if (!widgetConfiguration.suggestedSearchFilter || widgetConfiguration.suggestedSearchFilter.length === 0) {
          return true;
        }

        return (widgetConfiguration.suggestedSearchFilter.map((s)=> {
          return s.key;
        }).indexOf(s.DisplayName) > -1);
      }).forEach((search) => {
        var suggestedSearchWidget = {
          name: 'EntitySuggestedSearch',
          place: widgetConfiguration.placeSuggestedSearches || 'main',
          parameters: {
            search: search,
            isAdmin: isAdmin
          }
        };

        if (widgetConfiguration.includeSuggestedSearchesBefore) {
          widgetsWithSuggestedSearches.shift(suggestedSearchWidget);
        } else {
          widgetsWithSuggestedSearches.push(suggestedSearchWidget);
        }
      });
    }

    if (widgetConfiguration.tabs && widgetConfiguration.tabs[0] && widgetConfiguration.tabs[0].children) {
      tabContentPlaceholder = widgetConfiguration.tabs.place || 'main';

      let tabMenuContent = this.getTabMenu(widgetConfiguration.tabs[0].children);
      let tabListContent = this.getTabContent(widgetConfiguration.tabs[0].children);

      if (tabListContent) {
        letTabContent = (<Row>
          <Col size={12} mobileSize={12}>
            <Tabs selectedIndex={0}>
              <TabList>
                {tabMenuContent}
              </TabList>
              {tabListContent}
            </Tabs>
          </Col>
        </Row>);
      }
    }

    let layoutContent = layoutConfiguration.children.map((row, index) => {
      if (row.type === 'row') {
        return (<Row key={index}>
          {row.columns.map((col, i) => {
            return (<Col key={i} size={col.size} mobileSize={col.mobileSize}>

              {this.renderWidgets(col.name, widgetsWithSuggestedSearches)}
              {(letTabContent && col.name === tabContentPlaceholder) ? letTabContent : void 0 }

            </Col>);
          })}
        </Row>);
      } else {
        let gridSize = row.size || defaultGridSize;
        let gridPlaceHolderName = row.name || defaultPlaceHolder;

        return (<Row key={index}>
          { this.filterWidgets(widgetsWithSuggestedSearches, gridPlaceHolderName).map((col, i)=> {

            return (<Col key={i} size={(col.size || gridSize)} mobileSize={col.mobileSize}>
              {this.renderWidget(col)}
            </Col>);
          })}
        </Row>);
      }
    });

    return <div style={{marginTop:'5px'}}>{layoutContent}</div>;
  }
}

CluedInLayout.contextTypes = {
  router: React.PropTypes.object
};

export default CluedInLayout ;