ih-pagelet-checklists/src/components/Checklist.jsx

Interaction Hub Peoplesoft Checklists

import React, { Component, PropTypes } from 'react';

/* eslint-disable id-length */
import _ from 'lodash';
/* eslint-enable */

// Material UI components
// NOTE: importing separately until webpack can use ES6 imports to remove unused code
import AppBar from 'material-ui/lib/app-bar';
import Paper from 'material-ui/lib/paper';
import MenuItem from 'material-ui/lib/menus/menu-item';
import IconMenu from 'material-ui/lib/menus/icon-menu';
import IconButton from 'material-ui/lib/icon-button';
import Styles from 'material-ui/lib/styles/';
import List from 'material-ui/lib/lists/list';
import CircularProgress from 'material-ui/lib/circular-progress';
import MoreVertIcon from 'material-ui/lib/svg-icons/navigation/more-vert';
import NoChecklist from 'material-ui/lib/svg-icons/action/assignment-turned-in';
import FilterIcon from 'material-ui/lib/svg-icons/content/filter-list';
import ThemeManager from 'material-ui/lib/styles/theme-manager.js';

import ChecklistItem from './ChecklistItem.jsx';
import UCdefaultTheme from 'ih-portal-theme/src/components/UCdefaultTheme.js';

import '../../IhPageletChecklists.css';

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

export default class Checklist extends Component {

  constructor(props, context) {
    // NOTE: if context breaks, try removing it from the parameters above
    super(props, context);
    this.state = { filterBy: 'All' };
    this._handleFilterClick = this._handleFilterClick.bind(this);
    this._handleInvalidate = this._handleInvalidate.bind(this);
  }

  getChildContext() {
    const theme = ThemeManager.getMuiTheme(UCdefaultTheme);
    theme.appBar.textColor = 'white';
    theme.appBar.spacing = Styles.Spacing.desktopSubheaderHeight;
    return {
      muiTheme: theme,
    };
  }

  _handleFilterClick(evt, item) {
    this.setState({
      filterBy: item,
    });
  }

  _handleInvalidate() {
    this.props.invalidate();
  }

  render() {
    const { checklist, isFetching, style } = this.props;

    const filterMenuItems = [];
    let groupedData = undefined;

    // initialize component display with progress indicator
    let checklistData = this.props.children || <div style={{ textAlign: 'center' }}><CircularProgress mode="indeterminate" color="black" size={2} /></div>;

    let numFilterMenuItems = 0;

    // handle empty state
    if (!isFetching && checklist) {
      checklistData = <div style={{ textAlign: 'center' }}><br/>You have no checklist items.<br/><NoChecklist style={{height: 205, width: 205}} color="#CCECD1"/></div>;
    }

    if (!isFetching && checklist && checklist.data && checklist.data.items && checklist.data.items.length > 0) {
      const { items } = checklist.data;

      // grab the grouped data by administrative function
      groupedData = _.chain(items).groupBy('adminFunctionDescr').value();

      filterMenuItems.push(<MenuItem key={`filterMenuItem-${numFilterMenuItems++}`} value="All" disabled={this.state.filterBy === 'All'} primaryText="Show All" />);

      let checklistItemKey = 0;

      checklistData = Object.keys(groupedData).map((adminFunc) => {
        filterMenuItems.push(<MenuItem key={`filterMenuItem-${numFilterMenuItems++}`} disabled={this.state.filterBy === adminFunc} value={adminFunc} primaryText={adminFunc}/>);

        let itemKey = 0;
        const checklistItems = groupedData[adminFunc].map((_checklist) => {
          return (
            <ChecklistItem
              key={`contentItem-${checklistItemKey}_checklistItem-${itemKey++}`}
              title = {_checklist.checklistCdDescr}
              itemStatusDescription = {_checklist.itemStatusLovdescr}
              itemStatus = {_checklist.itemStatus}
              dueDt = {_checklist.dueDt}
              responsibleName = {_checklist.responsibleName}
              information = {_checklist.information}
              adminFunction = {_checklist.adminFunctionDescr}
              url = {_checklist.url ? _checklist.url : undefined}
            />
          );
        });

        if (this.state.filterBy === 'All') {
          return <List key={`contentItem-${checklistItemKey++}`} subheader={adminFunc}>{checklistItems}</List>;
        } else if (adminFunc === this.state.filterBy) {
          return <List key={`contentItem-${checklistItemKey++}`} subheader={adminFunc}>{checklistItems}</List>;
        }
      });
    }

    const filterMenu = (
      <div>
        <IconMenu className="ih-pagelet-iconColor" onChange={this._handleFilterClick} iconButtonElement={<IconButton><FilterIcon /></IconButton>}>
          {filterMenuItems}
        </IconMenu>
      </div>
    );

    return (
      <Paper style={style}>
        <AppBar
          title="To Do List"
          showMenuIconButton={false}
          key="ih-pagelet-checklists-appbar"
          className="ih-pagelet-title"
          iconElementRight={filterMenuItems.length > 0 ? filterMenu : null} />
        {checklistData}
      </Paper>
    );
  }
}

Checklist.propTypes = {
  checklist: object,
  children: node,
  fetch: func.isRequired,
  invalidate: func.isRequired,
  isFetching: bool,
  style: object,
};

Checklist.childContextTypes = {
  muiTheme: object,
};