cluedin-widget/core/components/WidgetManagment/subPage/AddWidgetChooseLayout.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 CluedInMiniLayout from '../../Layouts/CluedInMiniLayout.jsx';
import RaisedButton from 'material-ui/RaisedButton';

export default class AddWidget extends Component {

  constructor(props) {
    super(props);
    this.state = {
      disableAdd: true,
      selectedCell: void 0
    };
  }

  onSelectCellHandler(cell) {
    this.setState({
      disableAdd: false,
      selectedCell: cell,
    });
  }

  onAddWidgetClickHandler() {
    const { onAddWidgetClick } = this.props;

    onAddWidgetClick(this.state.selectedCell);
  }

  render() {
    const { widgetConfiguration, layout, onCancelWidgetClick } = this.props;
    const { selectedCell } = this.state;

    let selectedCellContent;

    if (selectedCell) {
      selectedCellContent = <div><strong>{selectedCell.name}</strong> location has been chosen.</div>
    }

    return (<div>
      <h4 style={{margin:0, padding:0}}>Choose Where You want to Place the widget</h4>
      <p>Click on the location where you want to add the widget</p>
      <CluedInMiniLayout onSelectCell={this.onSelectCellHandler.bind(this)}
                         selectable={true}
                         layout={layout}
                         selectedCell={this.state.selectedCell}
                         widgetConfiguration={widgetConfiguration}></CluedInMiniLayout>
      <div style={{marginTop:'15px', textAlign:'left'}}>
        <div style={{float: 'left',lineHeight: '36px',marginLeft: '15px'}}>
          {selectedCellContent}
        </div>
        <div style={{marginRight:'5px', float:'right'}}>
          <RaisedButton onClick={onCancelWidgetClick} label="Cancel"/>
        </div>
        <div style={{marginRight:'20px', float:'right'}}>
          <RaisedButton
            onClick={this.onAddWidgetClickHandler.bind(this)}
            disabled={this.state.disableAdd}
            secondary={true}
            label="Add Widget"
          />
        </div>
      </div>
    </div>);
  }
}