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, shouldRemoveWidgetToUserProfile } from '../../action/user';
import { getName } from '../../helpers/entity';

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, type, values) {
    const { widgetConfiguration, currentUser } = this.props;
    let placeName = cell.name;

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

    if (type) {
      placeName = `${type}.${cell.name}`;
    }
    

    this.props.dispatch(addWidgetConfigurationToUserProfile(currentUser.entity.id, {
      place: placeName,
      entityType: widgetConfiguration.entityType,
      name: this.state.widgetToAdd.name,
      values,
    }));
  }

  onDeleteWidgetHandler(w) {
    const { widgetConfiguration, currentUser } = this.props;

    this.props.dispatch(shouldRemoveWidgetToUserProfile(currentUser.entity.id, {
      place: w.place,
      entityType: widgetConfiguration.entityType,
      name: w.name,
    }));
  }

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

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

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

    let entityName = getName(widgetConfiguration.entityType);

    if (widgetConfiguration.entityType.toLowerCase() === 'HomeScreen'.toLowerCase()) {
      entityName = 'HomeScreen';
    }
    
    let title = `Configure ${entityName} Layout`;
    let content;

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

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

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

    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,
    currentUser: state.user.currentUser,
  };
}

export default connect(select)(WidgetManager);