vendor

vendor.jsx

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { Card, CardActions, CardHeader, CardText } from 'material-ui/Card'
import Subheader from 'material-ui/Subheader'
import {List, ListItem} from 'material-ui/List'
import Business from 'material-ui/svg-icons/communication/business'
import RaisedButton from 'material-ui/RaisedButton'
import SelectField from 'material-ui/SelectField'
import MenuItem from 'material-ui/MenuItem'
import CircularProgress from 'material-ui/CircularProgress'
import withStyles from 'isomorphic-style-loader/lib/withStyles'
import s from './style.css'

@withStyles(s)
export default class Vendor extends Component {
  static propTypes = {
    onResyncClick: PropTypes.func.isRequired,
    companies: PropTypes.array.isRequired,
    notCreated: PropTypes.array.isRequired,
  }

  static defaultProps = {
    companies: [],
    notCreated: [],
  }

  constructor(props) {
    super(props)
    this.state = {
      company: 'all',
    }
  }

  componentWillUnmount() {
    if(this.cancelRequestCb) {
      this.cancelRequestCb()
    }
  }

  handleChangeCompany = (e, i, value) => {
    this.setState({
      company: value,
    })
  }

  async onResyncButtonClick() {
    const { company } = this.state
    await this.props.onResyncClick(company)
  }

  render() {
    return (
      <Card
        style={{ minHeight: '32vw' }}
      >
        <CardHeader
          title={this.props.title}
          subtitle={this.props.subtitle}
          avatar={this.props.avatar}
        />
        <CardText>
          { this.props.loading ?
            <div className={s.progress}>
              <CircularProgress/>
            </div>
            :
            <div>
              <List>
                <Subheader>Not created</Subheader>
                {
                  this.props.notCreated.map(i => (
                    <div key={i.company.id}>
                      <ListItem
                        primaryText={i.company.name}
                        leftIcon={<Business />}
                        initiallyOpen
                        primaryTogglesNestedList
                        nestedItems={
                          i.objects.map(o => (
                            <ListItem
                              key={o.id}
                              primaryText={`${o.name} (${o.type})`}
                            />
                          ))
                        }
                      />
                    </div>
                  ))
                }
              </List>
              {
                !this.props.companies.length &&
                <div className={s.synchronized}>
                  All items are synchronized.
                </div>
              }
            </div>
          }
        </CardText>
        {
          !this.props.loading && this.props.companies.length &&
          <CardActions>
            <div className={s.vendorDiv}>
              <div className={s.select}>
                <SelectField
                  value={this.state.company}
                  onChange={this.handleChangeCompany}
                  style={{
                    fontSize: '13px',
                    width: 256,
                  }}
                >
                  <MenuItem value="all" primaryText="All companies" />
                  {
                    this.props.companies.map(c =>
                      <MenuItem key={c.id} value={c.id} primaryText={c.name} />
                    )
                  }
                </SelectField>
              </div>
              <div>
                <RaisedButton
                  label="Re-sync"
                  labelPosition="before"
                  primary={true}
                  labelStyle={{ fontSize: 10 }}
                  onClick={async () => {
                    await this.onResyncButtonClick()
                  }}
                  style={{ width: 16, height: 22 }}
                />
              </div>
            </div>
          </CardActions>
        }
      </Card>
    )
  }
}