react-mapfilter/es5/components/ReportView/ReportView.js

A React Component for viewing and filtering GeoJSON

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Paper = require('@material-ui/core/Paper');

var _Paper2 = _interopRequireDefault(_Paper);

var _Typography = require('@material-ui/core/Typography');

var _Typography2 = _interopRequireDefault(_Typography);

var _styles = require('@material-ui/core/styles');

var _omit = require('lodash/omit');

var _omit2 = _interopRequireDefault(_omit);

var _objectAssign = require('object-assign');

var _objectAssign2 = _interopRequireDefault(_objectAssign);

var _ReportToolbar = require('./ReportToolbar');

var _ReportToolbar2 = _interopRequireDefault(_ReportToolbar);

var _ReportFeature = require('./ReportFeature');

var _ReportFeature2 = _interopRequireDefault(_ReportFeature);

var _prop_types = require('../../util/prop_types');

var MFPropTypes = _interopRequireWildcard(_prop_types);

var _MapView = require('../MapView');

var _MapView2 = _interopRequireDefault(_MapView);

var _Alert = require('./Alert');

var _Alert2 = _interopRequireDefault(_Alert);

var _config = require('../../../config.json');

var _config2 = _interopRequireDefault(_config);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// import {FIELD_TYPE_DATE} from '../../constants'

var styles = {
  reportHeader: {
    position: 'relative',
    minWidth: 'calc(8.5in + 40px)',
    zIndex: 1,
    '@media only print': {
      display: 'none'
    }
  },
  reportWrapper: {
    overflow: 'scroll',
    position: 'absolute',
    backgroundColor: 'rgba(236, 236, 236, 1)',
    width: '100%',
    height: '100%',
    '@media only print': {
      position: 'relative',
      width: 'auto',
      height: 'auto',
      backgroundColor: 'initial'
    }
  },
  letter: {
    '& $reportContainer': {
      minWidth: '8.5in'
    },
    '& $reportPaper': {
      width: '8.5in',
      '@media only print': {
        /* for some reason we need to substract 2px for a perfect fit */
        width: 'calc(7.5in - 2px)'
      }
    },
    '& $reportPaperMap': {
      height: 'calc(11in - 2px)',
      '@media only print': {
        height: 'calc(10in - 2px)'
      }
    },
    '& $pageBreak': {
      top: '10.5in'
    },
    '& $reportPage': {
      minHeight: '10in',
      '@media only print': {
        minHeight: 'auto'
      }
    }
  },
  a4: {
    '& $reportContainer': {
      minWidth: '210mm'
    },
    '& $reportPaper': {
      width: '210mm',
      '@media only print': {
        /* for some reason we need to substract 2px for a perfect fit */
        width: 'calc(210mm - 1in - 2px)'
      }
    },
    '& $reportPaperMap': {
      height: 'calc(297mm - 3px)',
      '@media only print': {
        height: 'calc(297mm - 1in - 3px)'
      }
    },
    '& $pageBreak': {
      top: 'calc(297mm - 0.5in)'
    },
    '& $reportPage': {
      minHeight: 'calc(297mm - 1in)',
      '@media only print': {
        minHeight: 'auto'
      }
    }
  },
  reportContainer: {
    padding: '0 20px',
    '@media only print': {
      display: 'block',
      padding: 0,
      overflow: 'visible'
    }
  },
  reportPaper: {
    cursor: 'pointer',
    margin: '20px auto',
    overflow: 'hidden',
    pageBreakAfter: 'always',
    position: 'relative',
    '@media only print': {
      minHeight: 'auto',
      boxShadow: 'none !important',
      borderRadius: '0 !important',
      margin: 0
    },
    '&:last-child': {
      pageBreakAfter: 'avoid !important'
    }
  },
  reportPaperMap: {
    cursor: 'auto',
    display: 'flex'
  },
  mapContainer: {
    flex: 1,
    position: 'relative'
  },
  pageBreak: {
    position: 'absolute',
    left: 0,
    width: '100%',
    border: 'none',
    margin: 0,
    borderBottom: '3px dashed rgba(200,200,200, 0.75)',
    '@media only print': {
      display: 'none'
    }
  },
  reportPage: {
    margin: '0.5in',
    outline: '1px dashed #eeeeee',
    '@media only print': {
      margin: 0,
      outline: 'none'
    }
  },
  reportPageMap: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column'
  },
  '@global': {
    '@media only print': {
      tr: {
        pageBreakInside: 'avoid'
      }
    }
  }
};

var VIEW_ID = 'report';
var MAX_REPORT_LEN = 26;

var ReportView = function (_React$Component) {
  (0, _inherits3.default)(ReportView, _React$Component);

  function ReportView() {
    var _ref;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, ReportView);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = ReportView.__proto__ || (0, _getPrototypeOf2.default)(ReportView)).call.apply(_ref, [this].concat(args))), _this), _this.handleOnShowAll = function () {
      _this.props.updateViewState({ hiddenFields: {} });
    }, _this.handleOnHideAll = function () {
      var _this$props = _this.props,
          fieldAnalysis = _this$props.fieldAnalysis,
          updateViewState = _this$props.updateViewState;

      var hiddenFields = {};
      (0, _keys2.default)(fieldAnalysis.properties).forEach(function (key) {
        hiddenFields[key] = true;
      });
      updateViewState({ hiddenFields: hiddenFields });
    }, _this.handleFieldVisibilityToggle = function (fieldname) {
      var _this$props2 = _this.props,
          updateViewState = _this$props2.updateViewState,
          _this$props2$viewStat = _this$props2.viewState.hiddenFields,
          hiddenFields = _this$props2$viewStat === undefined ? {} : _this$props2$viewStat;

      updateViewState({
        hiddenFields: (0, _objectAssign2.default)({}, hiddenFields, (0, _defineProperty3.default)({}, fieldname, !hiddenFields[fieldname]))
      });
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(ReportView, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          filteredFeatures = _props.filteredFeatures,
          featuresById = _props.featuresById,
          showFeatureDetail = _props.showFeatureDetail,
          fieldAnalysis = _props.fieldAnalysis,
          classes = _props.classes,
          requestPrint = _props.requestPrint,
          paperSize = _props.paperSize,
          viewState = _props.viewState;

      var featuresSlice = filteredFeatures.length > MAX_REPORT_LEN ? filteredFeatures.slice(0, MAX_REPORT_LEN) : filteredFeatures;
      return _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(_ReportToolbar2.default, {
          hiddenFields: viewState.hiddenFields,
          onToggleFieldVisibility: this.handleFieldVisibilityToggle,
          onShowAll: this.handleOnShowAll,
          onHideAll: this.handleOnHideAll,
          fieldAnalysis: fieldAnalysis,
          requestPrint: requestPrint
        }),
        _react2.default.createElement(
          'div',
          { className: classes.reportWrapper + ' ' + classes[paperSize] },
          _react2.default.createElement(
            'div',
            { className: classes.reportHeader },
            filteredFeatures.length > MAX_REPORT_LEN && _react2.default.createElement(_Alert2.default, { label: 'Current filters show ' + filteredFeatures.length + ' records, a report will only show the first ' + MAX_REPORT_LEN + ' records' })
          ),
          _react2.default.createElement(
            'div',
            { className: classes.reportContainer },
            _react2.default.createElement(
              _Paper2.default,
              { className: classes.reportPaper + ' ' + classes.reportPaperMap, elevation: 1 },
              _react2.default.createElement(
                'div',
                { className: classes.reportPage + ' ' + classes.reportPageMap },
                _react2.default.createElement(
                  'header',
                  { className: classes.mapHeader },
                  _react2.default.createElement(
                    _Typography2.default,
                    { variant: 'title' },
                    'Monitoring Report'
                  ),
                  _react2.default.createElement(
                    _Typography2.default,
                    { variant: 'subheading', style: { marginBottom: '0.5em' } },
                    featuresSlice.length,
                    ' locations'
                  )
                ),
                _react2.default.createElement(
                  'div',
                  { className: classes.mapContainer },
                  _react2.default.createElement(_MapView2.default, (0, _extends3.default)({}, (0, _omit2.default)(this.props, 'classes'), {
                    features: featuresSlice,
                    interactive: false,
                    labelPoints: true
                  }))
                )
              )
            ),
            featuresSlice.map(function (feature, i) {
              return _react2.default.createElement(
                _Paper2.default,
                { className: classes.reportPaper, key: i, onClick: function onClick() {
                    return showFeatureDetail(feature.id);
                  }, elevation: 1 },
                _react2.default.createElement(
                  'div',
                  { className: classes.reportPage },
                  _react2.default.createElement(_ReportFeature2.default, (0, _extends3.default)({}, (0, _omit2.default)(_this2.props, 'classes'), {
                    hiddenFields: viewState.hiddenFields,
                    feature: featuresById[feature.id],
                    label: _config2.default.labelChars.charAt(i)
                  }))
                ),
                _react2.default.createElement('hr', { className: classes.pageBreak })
              );
            }),
            featuresSlice.length > MAX_REPORT_LEN && _react2.default.createElement(
              _Paper2.default,
              { className: classes.reportPaper },
              _react2.default.createElement(
                'div',
                { className: classes.reportPage },
                _react2.default.createElement(
                  'h2',
                  null,
                  'Cannot print more than 26 observations in a single report'
                )
              )
            )
          )
        )
      );
    }
  }]);
  return ReportView;
}(_react2.default.Component);

ReportView.propTypes = {
  filteredFeatures: _propTypes2.default.arrayOf(MFPropTypes.mapViewFeature).isRequired,
  featuresById: _propTypes2.default.objectOf(MFPropTypes.mapViewFeature).isRequired,
  fieldAnalysis: MFPropTypes.fieldAnalysis.isRequired,
  paperSize: MFPropTypes.paperSize,
  willPrint: _propTypes2.default.bool,
  viewState: _propTypes2.default.shape({
    hiddenFields: _propTypes2.default.object
  }),
  filter: MFPropTypes.mapboxFilter,
  showFeatureDetail: _propTypes2.default.func.isRequired,
  requestPrint: _propTypes2.default.func.isRequired,
  classes: _propTypes2.default.object.isRequired
};

ReportView.defaultProps = {
  paperSize: 'a4',
  viewState: {
    hiddenFields: {}
  }
};

ReportView.MfViewId = VIEW_ID;

exports.default = (0, _styles.withStyles)(styles)(ReportView);
//# sourceMappingURL=ReportView.js.map