cluedin-widget/core/components/WidgetManagment/WidgetManager.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 Drawer from 'material-ui/Drawer';
import { connect } from 'react-redux';
import LayoutMain from './subPage/LayoutMain.jsx';
import AddWidget from './subPage/AddWidget.jsx';
import AddWidgetChooseLayout from './subPage/AddWidgetChooseLayout.jsx';
import WidgetManagerContent from './components/WidgetManangerContent.jsx';
import { closeWMSManager } from '../../action/wms';
import { addWidgetConfigurationToUserProfile } from '../../action/user';

const rightNavStyle = {
  top: '48px',
};

class WidgetManager extends Component {
  constructor(props) {
    super(props);
    this.state = {
      view: 'layoutMain',
      widgetToAdd: void 0,
      cellToAdd: void 0,
    };
  }

  addWidget() {
    this.setState({
      view: 'addWidget',
    });
  }

  onBackClick() {
    this.setState({
      view: 'layoutMain',
    });
  }

  closePanel() {

  }

  onCancelWidgetClickHandler() {
    this.setState({
      view: 'addWidget',
    });
  }

  onAddWidgetClickHandler(descriptor) {
    const { widgetConfiguration } = this.props;

    this.setState({
      view: 'addWidgetChooseLayout',
      widgetToAdd: descriptor,
    });
  }

  onAddWidgetWithDescriptorClickHandler(cell) {
    const { widgetConfiguration } = this.props;

    this.setState({
      cellToAdd: cell,
      view: 'layoutMain',
    });

    this.props.dispatch(addWidgetConfigurationToUserProfile({
      cell: cell,
      entityType: widgetConfiguration.entityType,
      widget: this.state.widgetToAdd,
    }));
  }

  onCloseHandler() {
    this.props.dispatch(closeWMSManager());
  }

  render() {
    const { isOpen, widgetConfiguration, layout } = this.props;

    if (!widgetConfiguration) {
      return <div></div>;
    }

    let title = 'Configure ' + widgetConfiguration.entityType + ' Layout';
    let content;

    if (this.state.view === 'layoutMain') {
      content = <LayoutMain onAddWidgetClick={this.addWidget.bind(this)} widgetConfiguration={widgetConfiguration}
                            layout={layout}></LayoutMain>;
    }

    if (this.state.view === 'addWidget') {
      content = <AddWidget onBackClick={this.onBackClick.bind(this)}
                           onAddWidgetClick={this.onAddWidgetClickHandler.bind(this)}
                           widgetConfiguration={widgetConfiguration}
                           layout={layout}></AddWidget>
    }

    if (this.state.view === 'addWidgetChooseLayout') {
      content = <AddWidgetChooseLayout widgetConfiguration={widgetConfiguration}
                                       onCancelWidgetClick={this.onCancelWidgetClickHandler.bind(this)}
                                       onAddWidgetClick={this.onAddWidgetWithDescriptorClickHandler.bind(this)}
                                       layout={layout}></AddWidgetChooseLayout>
    }

    return (<Drawer open={isOpen} style={rightNavStyle} width={600} openSecondary={true}>
      <WidgetManagerContent onClose={this.onCloseHandler.bind(this)} title={title}>
        {content}
      </WidgetManagerContent>
    </Drawer>);
  }
}

function select(state) {
  return {
    isOpen: state.wms.isWMSOpen,
    widgetConfiguration: state.core.widgetConfiguration,
    layout: state.core.layout,
  };
}

export default connect(select)(WidgetManager);