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';
import Form from '../../generics/form';

export default class AddWidget extends Component {

  constructor(props) {
    super(props);
    this.state = {
      disableAdd: true,
      selectedCell: void 0,
      type: void 0,
      values: void 0,
      isValidCell: false,
      isValidForm: false,
    };
  }

  onSelectCellHandler(cell, type) {
    const { widgetToAdd } = this.props;
    const isValidCell = cell ? true : false;
    let disableAdd = !(isValidCell && this.state.isValidForm);

    if (!widgetToAdd.fields || widgetToAdd.fields.length === 0) {
      disableAdd = !(isValidCell);
    }

    this.setState({
      disableAdd: disableAdd,
      selectedCell: cell,
      type: type,
      isValidCell,
    });
  }

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

    onAddWidgetClick(this.state.selectedCell, this.state.type, this.state.values);
  }

  onFormUpdateHandler(values, validations, touched) {
    const isValidForm = (touched && validations && validations.length === 0);

    this.setState({
      isValidForm,
      disableAdd: !(this.state.isValidCell && isValidForm),
      values,
    });
  }

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

    let selectedCellContent;

    if (selectedCell) {
      let selectedCellName = selectedCell.name;
      if (type) {
        selectedCellName = `${type}.${selectedCell.name}`;
      }

      selectedCellContent = (<div><strong>{selectedCellName}</strong> location has been chosen.</div>);
    }

    return (<div>
      <h3 style={{margin:'0px 0px 15px 0px', padding:0}}>Setup Widget</h3>
      <Form onFormUpdate={this.onFormUpdateHandler.bind(this)} fields={widgetToAdd.fields || []}/>
      <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)}
        layout={layout}
        selectedCell={this.state.selectedCell}
        selectedType={this.state.type}
        widgetConfiguration={widgetConfiguration}
      />
      <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>);
  }
}