ih-pagelet-financial-aid/src/components/FinancialAidAwards/FinancialAidAwards.jsx

PS Financial Aid Pagelet

import React, { Component, PropTypes } from 'react';
import AppBar from 'material-ui/lib/app-bar';
import Paper from 'material-ui/lib/paper';
import Styles from 'material-ui/lib/styles/';
import DropDownMenu from 'material-ui/lib/drop-down-menu';
import List from 'material-ui/lib/lists/list';
import CircularProgress from 'material-ui/lib/circular-progress';
import UCdefaultTheme from 'ih-portal-theme/src/components/UCdefaultTheme.js';
import AwardDetailItem from './AwardDetailItem.jsx';
import AwardSummaryHeader from './AwardSummaryHeader.jsx';
import ThemeManager from 'material-ui/lib/styles/theme-manager.js';
import NoAwards from 'material-ui/lib/svg-icons/editor/money-off';
import RaisedButton from 'material-ui/lib/raised-button';

const { bool, func, node, object } = PropTypes;

export default class FinancialAidAwards extends Component {
  constructor() {
    super(...arguments);

    this.state = {
      selectedIndex: 0,
    };

    this.handleIconMenuChange = this.handleIconMenuChange.bind(this);
    this.handleYearChange = this.handleYearChange.bind(this);
  }

  getChildContext() {
    const theme = ThemeManager.getMuiTheme(UCdefaultTheme);
    theme.appBar.textColor = 'white';
    theme.appBar.spacing = Styles.Spacing.desktopDropDownMenuItemHeight;

    return {
      muiTheme: theme,
    };
  }

  handleIconMenuChange(ev, menuItem) {
    if (menuItem.props.primaryText === 'Refresh') {
      this.setState({selectedIndex: 0});
      this.props.invalidate();
    }
  }

  handleYearChange(ev, selectedIndex, menuItem) {
    this.setState({selectedIndex: selectedIndex});
    this.props.fetch(menuItem.payload);
  }

  render() {
    let financialData = null;
    let awardDetailCard = [];
    let showAwards = false;

    if (this.props.isFetching) {
      financialData = this.props.children || <div style={{ textAlign: 'center' }}><CircularProgress mode="indeterminate" color="black" size={2} /></div>;
    }

    if (!this.props.isFetching && this.props.data && this.props.data.awardSummary) {
      const data = this.props.data;
      showAwards = true;

      if (data.awardSummary.sfaMsgLong === 'You have no financial aid awards available for viewing.') {
        awardDetailCard = <div style={{ textAlign: 'center' }}><br/>{data.awardSummary.sfaMsgLong}<br/><NoAwards style={{height: 205, width: 205}} color="#EEEEEE"/></div>;
        showAwards = false;
      } else {
        if (Array.isArray(data.awardSummary.studentAwardDetail)) {
          awardDetailCard = data.awardSummary.studentAwardDetail.map((award) => {
            return (
              <AwardDetailItem
                key={award.itemTypeLovdescr}
                awardName={award.itemTypeLovdescr}
                statusDescription={award.sfaAwardStatusLovdescr}
                awardStatus={award.sfaAwardStatus}
                offeredBalance={award.offerBalance}
                acceptedBalance={award.acceptBalance}
                disbursedBalance={award.disbursedBalance}
              />
            );
          });
        } else {
          const award = data.awardSummary.studentAwardDetail;
          awardDetailCard.push(
            <AwardDetailItem
              key={award.itemTypeLovdescr}
              awardName={award.itemTypeLovdescr}
              statusDescription={award.sfaAwardStatusLovdescr}
              awardStatus={award.sfaAwardStatus}
              offeredBalance={award.offerBalance}
              acceptedBalance={award.acceptBalance}
              disbursedBalance={award.disbursedBalance}
            />
          );
        }
      }

      let menuItems = [];
      let faYears = [];
      let awardSummaryHeader = null;
      let acceptDeclineButton = null;

      if (data.lov && data.lov.values) {
        if (Array.isArray(data.lov.values.value)) {
          menuItems = data.lov.values.value.map((lov) => {return { payload: lov.aidYear, text: lov.aidyeardescription };});
        } else {
          const lov = data.lov.values.value;
          menuItems.push({ payload: lov.aidYear, text: lov.aidyeardescription });
        }
      }

      if (data.awardSummary) {
        const summary = data.awardSummary;
        awardSummaryHeader = (
          <AwardSummaryHeader
            offeredBalance={summary.offerBalance}
            acceptedBalance={summary.acceptBalance}
            disbursedBalance={summary.disbursedBalance}
          />
        );
      }

      if (data.lov && data.lov.values) {
        let i = 0;
        faYears = data.lov.values.value;
        for (i = 0; i < faYears.length; i++) {
          if (faYears[i].aidYear === this.props.data.awardSummary.aidYear && faYears[i].acceptdeclineawards === 'Y') {
            acceptDeclineButton = <div style={{paddingBottom: 20, textAlign: 'center'}}><RaisedButton label="Accept / Decline Awards" primary={true} linkButton={true} href={__ACCEPTDENY_URL__}/></div>;
          }
        }
      }

      if (!showAwards) {
        financialData = <div><div>{awardDetailCard}</div></div>;
      } else {
        financialData = (
          <div>
            <DropDownMenu menuItems={menuItems} onChange={this.handleYearChange} selectedIndex={this.state.selectedIndex} />
            <div>
              {awardSummaryHeader}
              <List subheader="Financial Aid Awards">
                {awardDetailCard}
              </List>
              {acceptDeclineButton}
            </div>
          </div>
        );
      }
    }

    if (!this.props.isFetching && this.props.data && this.props.data.faultMessages) {
      awardDetailCard = <div style={{ textAlign: 'center' }}><br/>{this.props.data.faultMessages[0].descr}<br/><NoAwards style={{height: 205, width: 205}} color="#EEEEEE"/></div>;
      showAwards = false;
      financialData = <div><div>{awardDetailCard}</div></div>;
    }
    return (
      <Paper>
        <AppBar
          title="Financial Aid Awards"
          showMenuIconButton={false}
          className="ih-pagelet-title"
        />
        {financialData}
      </Paper>
    );
  }
}

FinancialAidAwards.propTypes = {
  children: node,
  data: object.isRequired,
  fetch: func.isRequired,
  invalidate: func.isRequired,
  isFetching: bool,
};

FinancialAidAwards.childContextTypes = {
  muiTheme: object,
};