@integec/common-react-screens/lib/generic-view/Screen.js

'use strict';

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

var _isNil2 = require('ramda/src/isNil');

var _isNil3 = _interopRequireDefault(_isNil2);

var _filter2 = require('ramda/src/filter');

var _filter3 = _interopRequireDefault(_filter2);

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _templateObject = _taggedTemplateLiteral(['\n  text-align: center;\n'], ['\n  text-align: center;\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n  padding-left: 2em;\n  padding-right: 2em;\n  position: relative;\n'], ['\n  padding-left: 2em;\n  padding-right: 2em;\n  position: relative;\n']),
    _templateObject3 = _taggedTemplateLiteral(['\n  margin-top: 5px;\n  margin-bottom: 3px;\n'], ['\n  margin-top: 5px;\n  margin-bottom: 3px;\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Grid = require('@integec/grid-tools/lib/Grid');

var _Grid2 = _interopRequireDefault(_Grid);

var _flexRenderer = require('@integec/grid-tools/lib/flexRenderer');

var _flexRenderer2 = _interopRequireDefault(_flexRenderer);

var _editEngine = require('@integec/grid-tools/lib/editEngine');

var freeEditEngine = _interopRequireWildcard(_editEngine);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _semanticUiReact = require('semantic-ui-react');

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Overlay = require('./Overlay');

var _Overlay2 = _interopRequireDefault(_Overlay);

var _modal = require('../modal');

var _gridTools = require('../grid-tools');

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 }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
// import { Grid, flexGridRenderer, freeEditEngine } from '@integec/grid-tools'


// import { Prompt } from 'react-router'

var Title = _styledComponents2.default.h3(_templateObject);
var Container = _styledComponents2.default.div(_templateObject2);
var Toolbar = _styledComponents2.default.div(_templateObject3);

var createInitialEditInfo = function createInitialEditInfo(props) {
  return props && props.gridProps && props.gridProps.editMode === 'cell' ? freeEditEngine.generateInitialEditInfo() : undefined;
};

var Screen = function (_React$Component) {
  _inherits(Screen, _React$Component);

  function Screen() {
    var _ref2;

    var _temp, _this, _ret;

    _classCallCheck(this, Screen);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = Screen.__proto__ || Object.getPrototypeOf(Screen)).call.apply(_ref2, [this].concat(args))), _this), _this.state = {
      data: [],
      loading: false,
      saving: false,
      sorting: false,
      showAdd: false,
      fuzzyFilter: '',
      criteria: _this.props.initialCriteria || {},
      promptInfo: null,
      transLog: null,
      editInfo: createInitialEditInfo(_this.props)
    }, _this.onError = function (error) {
      return _this.setState({
        loading: false,
        saving: false,
        promptInfo: error,
        sorting: false
      });
    }, _this.onFuzzyFilterChange = function (fuzzyFilter) {
      return _this.setState({ fuzzyFilter: fuzzyFilter });
    }, _this.onSave = function (e) {
      var _this$props = _this.props,
          getModifyTask = _this$props.getModifyTask,
          apiTargetInfo = _this$props.apiTargetInfo,
          saveAllGridData = _this$props.saveAllGridData;
      var editInfo = _this.state.editInfo;

      console.log('saving ', _this.state.editInfo);
      var data = saveAllGridData ? { data: _this.state.data, editInfo: editInfo } : [].concat(_toConsumableArray(editInfo.updated), _toConsumableArray(editInfo.added));

      _this.setState(function (_) {
        return { saving: true };
      }, function (_) {
        return getModifyTask({
          apiTargetInfo: apiTargetInfo,
          criteria: _this.state.criteria,
          data: data
        }).fork(_this.onError,
        /* retrieve on Success */
        _this.onRetrieve);
      });
    }, _this.onEdit = function (_ref3) {
      var originalRow = _ref3.originalRow,
          editedRow = _ref3.editedRow;
      var _this$props2 = _this.props,
          getModifyTask = _this$props2.getModifyTask,
          getInsertTask = _this$props2.getInsertTask,
          apiTargetInfo = _this$props2.apiTargetInfo;


      if (originalRow) {
        console.log('adding row', editedRow);
      } else {
        console.log('updating row', originalRow, editedRow);
      }

      var getTask = originalRow === undefined ? getInsertTask || getModifyTask : getModifyTask;

      _this.setState(function (_) {
        return { saving: true };
      }, function (_) {
        return getTask({
          apiTargetInfo: apiTargetInfo,
          criteria: _this.state.criteria,
          data: [editedRow]
        }).fork(_this.onError,
        /* retrieve on Success */
        _this.onRetrieve);
      });
    }, _this.onAddRowClicked = function (_) {
      return _this.setState({ showAdd: true, addWithSelected: false });
    }, _this.onCopyRowClicked = function (_) {
      return _this.setState({ showAdd: true, addWithSelected: true });
    }, _this.confirmRemove = function (_) {
      return _this.setState({ confirm: 'Remove' });
    }, _this.cancelConfirm = function (_) {
      return _this.setState({ confirm: null });
    }, _this.doRemoveRows = function (_) {
      if (_this.selectedRows && _this.selectedRows.length > 0) {
        var _this$props3 = _this.props,
            getDeleteTask = _this$props3.getDeleteTask,
            apiTargetInfo = _this$props3.apiTargetInfo;

        _this.setState(function (_) {
          return { saving: true, confirm: null };
        }, function (_) {
          return getDeleteTask({
            apiTargetInfo: apiTargetInfo,
            criteria: _this.state.criteria,
            data: _this.selectedRows
          }).fork(_this.onError, _this.onRetrieve);
        });
      }
    }, _this.doConfirm = _this.doRemoveRows, _this.onEditCancel = function (_) {
      return _this.setState({ showAdd: false });
    }, _this.onHidePrompt = function (_) {
      return _this.setState({ promptInfo: undefined });
    }, _this.selectionChange = function (_ref4) {
      var selectedRows = _ref4.selectedRows,
          selectedHeaders = _ref4.selectedHeaders;

      _this.selectedRows = selectedRows;
    }, _this.onRetrieve = function (_) {
      var criteria = _this.state.criteria;
      var _this$props4 = _this.props,
          apiTargetInfo = _this$props4.apiTargetInfo,
          getRetrieveTask = _this$props4.getRetrieveTask;

      _this.setState(function (_) {
        return { saving: false, loading: true };
      }, function (_) {
        return getRetrieveTask(_extends({ apiTargetInfo: apiTargetInfo }, criteria)).fork(_this.onError, function (data) {
          _this.setState({
            data: data,
            loading: false,
            showAdd: false,
            editInfo: createInitialEditInfo(_this.props)
          });
        });
      });
    }, _this.onImport = function (_) {
      var criteria = _this.state.criteria;
      var _this$props5 = _this.props,
          apiTargetInfo = _this$props5.apiTargetInfo,
          getImportTask = _this$props5.getImportTask;

      _this.setState(function (_) {
        return { loading: true };
      }, function (_) {
        return getImportTask(_extends({ apiTargetInfo: apiTargetInfo }, criteria)).fork(_this.onError, function (data) {
          _this.setState({ loading: false });
          _this.onRetrieve(data);
        });
      });
    }, _this.onSubmit = function (_) {
      var criteria = _this.state.criteria;
      var _this$props6 = _this.props,
          apiTargetInfo = _this$props6.apiTargetInfo,
          getSubmitTask = _this$props6.getSubmitTask;

      _this.setState(function (_) {
        return { loading: true };
      }, function (_) {
        return getSubmitTask(_extends({ apiTargetInfo: apiTargetInfo }, criteria)).fork(_this.onError, function (data) {
          _this.setState({ data: data, loading: false });
          // this.onRetrieve(data)
        });
      });
    }, _this.onShowSubmitDetail = function () {
      var _this$props7 = _this.props,
          apiTargetInfo = _this$props7.apiTargetInfo,
          getShowSubmitDetailTask = _this$props7.getShowSubmitDetailTask;

      var extractSubmitId = function extractSubmitId(data) {
        var _ref;

        return (_ref = data) != null ? (_ref = _ref.submitInfo) != null ? _ref.submitTransId : _ref : _ref;
      };
      if (_this.selectedRows && _this.selectedRows.length > 0) {
        var ids = _this.selectedRows.map(extractSubmitId).filter(function (submitId) {
          return submitId != null;
        });

        if (ids.length > 0) {
          _this.setState(function (_) {
            return { loading: true };
          }, function (_) {
            return getShowSubmitDetailTask({
              apiTargetInfo: apiTargetInfo,
              ids: ids
            }).fork(_this.onError, _this.setTransLog);
          });
        }
      }
    }, _this.onCriteriaChange = function (data) {
      return _this.setState(function (_ref5) {
        var criteria = _ref5.criteria;
        return {
          criteria: _extends({}, criteria, data),
          data: []
        };
      });
    }, _this.getCriteriaProps = function (_) {
      return {
        data: _this.state.data,
        headers: _this.props.headers,
        loading: _this.state.loading,
        onCriteriaChange: _this.onCriteriaChange,
        onRetrieve: _this.onRetrieve,
        criteria: _this.state.criteria,
        onFuzzyFilterChange: _this.onFuzzyFilterChange,
        fuzzyFilter: _this.state.fuzzyFilter,
        onError: _this.onError,
        title: _this.props.title,
        onImport: _this.props.getImportTask ? _this.onImport : undefined,
        onSubmit: _this.props.getSubmitTask ? _this.onSubmit : undefined,
        onShowSubmitDetail: _this.props.getShowSubmitDetailTask ? _this.onShowSubmitDetail : undefined,
        hasSelectedRows: _this.selectedRows && _this.selectedRows.length > 0,
        onSave: _this.state.editInfo ? _this.onSave : undefined,
        saveEnabled: _this.state.editInfo && freeEditEngine.isDirty(_this.state.editInfo)
      };
    }, _this.setEditInfo = function (editInfo) {
      _this.setState(function (_) {
        return { editInfo: editInfo, showAdd: false };
      });
    }, _this.getGridProps = function (_) {
      var _this$state = _this.state,
          data = _this$state.data,
          showAdd = _this$state.showAdd,
          fuzzyFilter = _this$state.fuzzyFilter,
          addWithSelected = _this$state.addWithSelected,
          editInfo = _this$state.editInfo;
      var _this$props8 = _this.props,
          headers = _this$props8.headers,
          gridProps = _this$props8.gridProps,
          isEditable = _this$props8.isEditable,
          dataFilter = _this$props8.dataFilter;
      // const isFreeEdit = gridProps && this.props.gridProps.editMode === 'cell'

      var _gridProps$render = gridProps.render,
          render = _gridProps$render === undefined ? (0, _flexRenderer2.default)() : _gridProps$render,
          _gridProps$renderRowE = gridProps.renderRowEditor,
          renderRowEditor = _gridProps$renderRowE === undefined ? (0, _gridTools.rowEditorRender)() : _gridProps$renderRowE,
          restOfGridProps = _objectWithoutProperties(gridProps, ['render', 'renderRowEditor']);

      return _extends({
        fuzzyFilter: fuzzyFilter,
        data: dataFilter ? (0, _filter3.default)(dataFilter, data) : data,
        headers: headers,
        render: render,
        renderRowEditor: renderRowEditor,
        onEdit: editInfo == null ? _this.onEdit : undefined,
        onSelectionChange: _this.selectionChange,
        isEditable: isEditable,
        showAdd: showAdd,
        addWithSelected: addWithSelected,
        onEditCancel: _this.onEditCancel,
        editInfo: editInfo,
        onEditInfoChange: editInfo && _this.setEditInfo
      }, restOfGridProps);
    }, _this.setTransLog = function (transLog) {
      return _this.setState({ transLog: transLog, loading: false });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(Screen, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var disableAutoRetrieve = this.props.disableAutoRetrieve;

      if (!disableAutoRetrieve) this.onRetrieve();
    }

    // change this to {name/value}

  }, {
    key: 'render',
    value: function render() {
      var _state = this.state,
          data = _state.data,
          promptInfo = _state.promptInfo,
          criteria = _state.criteria,
          sorting = _state.sorting,
          saving = _state.saving,
          loading = _state.loading,
          confirm = _state.confirm,
          transLog = _state.transLog;
      var _props = this.props,
          title = _props.title,
          renderCriteria = _props.renderCriteria,
          renderPrompt = _props.renderPrompt,
          renderProcessing = _props.renderProcessing,
          renderSubmissionResponse = _props.renderSubmissionResponse,
          isEditable = _props.isEditable,
          isOnlyUpdatable = _props.isOnlyUpdatable,
          ErrorComponent = _props.ErrorComponent;

      var noYetRetrieved = data === undefined;
      // const noData = data && data.length === 0
      // const dataAvailable = !noYetRetrieved && !noData
      console.log('rendering with', this.state.editInfo);

      return _react2.default.createElement(
        Container,
        null,
        _react2.default.createElement(
          Title,
          { 'data-testid': 'screen-title' },
          title
        ),
        renderCriteria(this.getCriteriaProps()),
        isEditable && !isOnlyUpdatable && _react2.default.createElement(
          Toolbar,
          null,
          _react2.default.createElement(
            _semanticUiReact.Button.Group,
            { color: 'grey', size: 'tiny' },
            _react2.default.createElement(
              _semanticUiReact.Button,
              { onClick: this.onAddRowClicked, id: 'add-row' },
              _react2.default.createElement(_semanticUiReact.Icon, { name: 'add square' }),
              'New'
            ),
            _react2.default.createElement(
              _semanticUiReact.Button,
              { onClick: this.onCopyRowClicked, id: 'add-row' },
              _react2.default.createElement(_semanticUiReact.Icon, { name: 'add square' }),
              'Copy Selected Row'
            ),
            _react2.default.createElement(
              _semanticUiReact.Button,
              { onClick: this.confirmRemove, id: 'remove-row' },
              _react2.default.createElement(_semanticUiReact.Icon, { name: 'remove circle' }),
              'Remove'
            )
          )
        ),
        noYetRetrieved && 'Please Click on Retrieve',
        _react2.default.createElement(_Grid2.default, this.getGridProps()),
        promptInfo && renderPrompt && _react2.default.createElement(
          _Overlay2.default,
          {
            style: { paddingLeft: '10vw', paddingRight: '10vw' },
            onClose: this.onHidePrompt
          },
          renderPrompt(_extends({ promptInfo: promptInfo }, { criteria: criteria }))
        ),
        promptInfo && !renderPrompt && _react2.default.createElement(ErrorComponent, { modalInfo: promptInfo, setModalInfo: this.onHidePrompt }),
        _react2.default.createElement(_semanticUiReact.Confirm, {
          open: !(0, _isNil3.default)(confirm),
          header: 'Confirm ' + confirm + ' of selected rows',
          onCancel: this.cancelConfirm,
          confirmButton: 'Confirm ' + confirm,
          content: 'Are you sure you want to ' + confirm + ' the selected rows?',
          onConfirm: this.doConfirm
        }),
        (sorting || saving || loading) && _react2.default.createElement(
          _Overlay2.default,
          null,
          renderProcessing({ criteria: criteria })
        ),
        transLog && renderSubmissionResponse({
          transLog: transLog,
          setTransLog: this.setTransLog,
          selectedRows: this.selectedRows
        })
      );
    }
  }]);

  return Screen;
}(_react2.default.Component);

Screen.propTypes = {
  renderCriteria: _propTypes2.default.func.isRequired,
  title: _propTypes2.default.string.isRequired,
  headers: _propTypes2.default.array.isRequired,
  /* signature of isEditable  ({rowData,header}) => bool **/
  isEditable: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.bool]),
  getRetrieveTask: _propTypes2.default.func.isRequired,
  /** only required when it is a editable Grid **/
  getModifyTask: _propTypes2.default.func,
  getDeleteTask: _propTypes2.default.func,
  /** for error handling **/
  renderPrompt: _propTypes2.default.func,
  ErrorComponent: _propTypes2.default.element,
  renderProcessing: _propTypes2.default.func,
  heightOffSet: _propTypes2.default.number,
  /* additional grid props */
  gridProps: _propTypes2.default.object,
  isOnlyUpdatable: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.bool]),
  saveAllGridData: _propTypes2.default.bool,
  dataFilter: _propTypes2.default.func
};
Screen.defaultProps = {
  heightOffSet: 0,
  gridProps: {},
  renderProcessing: function renderProcessing() {
    return _react2.default.createElement(_semanticUiReact.Loader, { active: true });
  },
  ErrorComponent: _modal.ErrorModal
};
exports.default = Screen;
//# sourceMappingURL=Screen.js.map