canner/lib/components/toolbar/actions/exportModal.js

Build CMS in few lines of code for different data sources

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

require("antd/lib/modal/style");

var _modal = _interopRequireDefault(require("antd/lib/modal"));

require("antd/lib/button/style");

var _button = _interopRequireDefault(require("antd/lib/button"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

require("antd/lib/select/style");

var _select = _interopRequireDefault(require("antd/lib/select"));

require("antd/lib/radio/style");

var _radio = _interopRequireDefault(require("antd/lib/radio"));

require("antd/lib/form/style");

var _form = _interopRequireDefault(require("antd/lib/form"));

var _react = _interopRequireDefault(require("react"));

var _antd = require("antd");

var _get = _interopRequireDefault(require("lodash/get"));

var _reactApollo = require("react-apollo");

var _reactIntl = require("react-intl");

var _graphqlTag = _interopRequireDefault(require("graphql-tag"));

var _dec, _class;

function _templateObject() {
  var data = (0, _taggedTemplateLiteral2.default)(["", ""]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

var FormItem = _form.default.Item;
var RadioGroup = _radio.default.Group;
var Option = _select.default.Option;
var ALL = 'ALL';
var THIS_PAGE = 'THIS_PAGE';
var SELECTED = 'SElECTED';
var DOWNLOAD = 'DOWNLOAD'; // $FlowFixMe

var ExportModal = (_dec = _form.default.create(), (0, _reactIntl.injectIntl)(_class = (0, _reactApollo.withApollo)(_class = _dec(_class =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(ExportModal, _React$Component);

  function ExportModal() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, ExportModal);

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

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(ExportModal)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
      downloading: false
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleSubmit", function (e) {
      e.preventDefault();
      var _this$props = _this.props,
          form = _this$props.form,
          value = _this$props.value,
          selectedValue = _this$props.selectedValue,
          fileName = _this$props.fileName,
          triggerModal = _this$props.triggerModal,
          fields = _this$props.fields,
          client = _this$props.client,
          query = _this$props.query,
          keyName = _this$props.keyName;
      form.validateFields(function (err, values) {
        if (!err) {
          var exportData = values.exportData,
              exportFieldKeys = values.exportFieldKeys,
              exportWay = values.exportWay;
          var getData = Promise.resolve([]);

          if (exportData === ALL) {
            // have to fetch data without pagination data
            var queries = query.getQueries([keyName]).args;
            var variables = query.getVairables();
            delete variables[queries.first.substr(1)];
            delete variables[queries.after.substr(1)];
            delete variables[queries.last.substr(1)];
            delete variables[queries.before.substr(1)];
            getData = client.query({
              query: (0, _graphqlTag.default)(_templateObject(), query.toGQL(keyName)),
              // remove pagination field
              variables: variables
            }).then(function (result) {
              return result.data[keyName].edges.map(function (edge) {
                return edge.node;
              });
            });
          } else if (exportData === THIS_PAGE) {
            getData = Promise.resolve(value);
          } else if (exportData === SELECTED) {
            getData = Promise.resolve(selectedValue);
          }

          var fieldsData = fields.filter(function (field) {
            return exportFieldKeys.find(function (key) {
              return key === field.keyName;
            });
          });

          if (exportWay === DOWNLOAD) {
            _this.setState({
              downloading: true
            });

            getData.then(function (data) {
              var csv = genCSV(data, fieldsData);
              download(fileName, csv);
            }).then(function () {
              _this.setState({
                downloading: false
              }, triggerModal);
            });
          } else {// not support other exportWay for now
          }
        }
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleCancel", function () {
      _this.props.triggerModal();
    });
    return _this;
  }

  (0, _createClass2.default)(ExportModal, [{
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          selectedValue = _this$props2.selectedValue,
          visible = _this$props2.visible,
          fields = _this$props2.fields,
          getFieldDecorator = _this$props2.form.getFieldDecorator,
          title = _this$props2.title,
          intl = _this$props2.intl;
      var downloading = this.state.downloading;
      var formItemLayout = {
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 12
          }
        }
      };
      return _react.default.createElement(_modal.default, {
        title: _react.default.createElement(_reactIntl.FormattedMessage, {
          id: "actions.export.modal.title"
        }),
        visible: visible,
        footer: null,
        closable: true,
        maskClosable: true,
        onCancel: this.handleCancel
      }, _react.default.createElement(_form.default, {
        onSubmit: this.handleSubmit
      }, _react.default.createElement(FormItem, (0, _extends2.default)({}, formItemLayout, {
        label: _react.default.createElement(_reactIntl.FormattedMessage, {
          id: "actions.export.data.label"
        })
      }), getFieldDecorator('exportData', {
        initialValue: selectedValue.length ? 'SELECTED' : 'ALL'
      })(_react.default.createElement(RadioGroup, null, _react.default.createElement(_radio.default, {
        value: ALL,
        "data-testid": "actions-export-data-all"
      }, _react.default.createElement(_reactIntl.FormattedMessage, {
        id: "actions.export.data.all"
      }), title), _react.default.createElement(_radio.default, {
        value: THIS_PAGE,
        "data-testid": "actions-export-data-this-page"
      }, _react.default.createElement(_reactIntl.FormattedMessage, {
        id: "actions.export.data.thisPage"
      })), _react.default.createElement(_radio.default, {
        value: "SELECTED",
        disabled: !selectedValue.length,
        "data-testid": "actions-export-data-selected"
      }, _react.default.createElement(_reactIntl.FormattedMessage, {
        id: "actions.export.data.selected",
        values: {
          length: selectedValue.length,
          title: title
        }
      }))))), _react.default.createElement(FormItem, (0, _extends2.default)({}, formItemLayout, {
        label: _react.default.createElement(_reactIntl.FormattedMessage, {
          id: "actions.export.way.label"
        })
      }), getFieldDecorator('exportWay', {
        initialValue: DOWNLOAD
      })(_react.default.createElement(RadioGroup, {
        disabled: true
      }, _react.default.createElement(_radio.default, {
        value: DOWNLOAD,
        "data-testid": "actions-export-way-csv"
      }, _react.default.createElement(_reactIntl.FormattedMessage, {
        id: "actions.export.way.csv"
      }))))), _react.default.createElement(FormItem, (0, _extends2.default)({}, formItemLayout, {
        label: _react.default.createElement(_reactIntl.FormattedMessage, {
          id: "actions.export.fields.label"
        })
      }), getFieldDecorator('exportFieldKeys', {
        initialValue: fields.map(function (field) {
          return field.keyName;
        })
      })(_react.default.createElement(_select.default, {
        mode: "multiple",
        placeholder: intl.formatMessage({
          id: "actions.export.fields.placeholder"
        }),
        "data-testid": "actions-export-fields-select"
      }, fields.map(function (field, index) {
        return _react.default.createElement(Option, {
          "data-testid": "actions-export-fields-option-".concat(index),
          value: field.keyName,
          key: field.keyName
        }, field.title || field.keyName);
      })))), _react.default.createElement(FormItem, {
        wrapperCol: {
          span: 12,
          offset: 5
        }
      }, _react.default.createElement(_button.default, {
        "data-testid": "actions-export-cancel-button",
        htmlType: "button",
        onClick: this.handleCancel
      }, _react.default.createElement(_reactIntl.FormattedMessage, {
        id: "actions.export.modal.cancelButton"
      })), _react.default.createElement(_button.default, {
        "data-testid": "actions-export-confirm-button",
        loading: downloading,
        type: "primary",
        htmlType: "submit",
        style: {
          marginLeft: 24
        }
      }, _react.default.createElement(_reactIntl.FormattedMessage, {
        id: "actions.export.modal.confirmButton"
      })))));
    }
  }]);
  return ExportModal;
}(_react.default.Component)) || _class) || _class) || _class);
exports.default = ExportModal;

function genCSV(data, fields) {
  var fieldNames = fields.map(function (field) {
    return field.title || field.keyName;
  });
  var rows = [fieldNames];
  data.forEach(function (datum) {
    var values = [];
    fields.forEach(function (field) {
      var value = (0, _get.default)(datum, field.keyName);

      if (field.render) {
        value = field.render(value);
      }

      if (Array.isArray(value)) {
        value = value.join(';');
      }

      values.push(value);
    });
    rows.push(values);
  });
  var csvContent = 'data:text/csv;charset=utf-8,';
  rows.forEach(function (rowArray) {
    var row = rowArray.join(',');
    csvContent += "".concat(row, "\r\n");
  });
  return csvContent;
}

function download(fileName, csvContent) {
  var encodedUri = encodeURI(csvContent);
  var link = document.createElement('a');
  link.setAttribute('href', encodedUri);
  link.setAttribute('download', "".concat(fileName, ".csv"));
  link.innerHTML = '';
  document.body && document.body.appendChild(link); // Required for FF

  link.click();
}