choerodon-ui/pro/lib/table/query-bar/quick-filter/QuickFilterMenu.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

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

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

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

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

var _mobx = require("mobx");

var _mobxReactLite = require("mobx-react-lite");

var _map = _interopRequireDefault(require("lodash/map"));

var _isObject = _interopRequireDefault(require("lodash/isObject"));

var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));

var _isArray = _interopRequireDefault(require("lodash/isArray"));

var _icon = _interopRequireDefault(require("../../../../../lib/icon"));

var _configure = require("../../../../../lib/configure");

var _isEmpty2 = _interopRequireDefault(require("../../../_util/isEmpty"));

var _localeContext = require("../../../locale-context");

var _button = _interopRequireDefault(require("../../../button"));

var _enum = require("../../../button/enum");

var _select = _interopRequireDefault(require("../../../select"));

var _modal = _interopRequireDefault(require("../../../modal"));

var _checkBox = _interopRequireDefault(require("../../../check-box"));

var _textField = _interopRequireDefault(require("../../../text-field"));

var _tooltip = _interopRequireDefault(require("../../../tooltip"));

var _Record = _interopRequireDefault(require("../../../data-set/Record"));

var _enum2 = require("../../../data-set/enum");

var _QuickFilterDataSet = _interopRequireDefault(require("./QuickFilterDataSet"));

var modalKey = _modal["default"].key();
/**
 * 判断查询值是否为空
 * @param value
 */


function isEmpty(value) {
  return (0, _isArray["default"])(value) ? !value.length : (0, _isEmpty2["default"])(value);
}
/**
 * 根据数据查找需要处理的字段对象
 * @param queryDataSet
 * @param data
 */


function findFieldObj(queryDataSet, data) {
  var keys = (0, _toConsumableArray2["default"])(queryDataSet.fields.keys());
  var name = data[0];
  var value = data[1];

  if (!keys.includes(data[0]) && (0, _isObject["default"])(data[1]) && !(0, _isEmpty["default"])(data[1]) && !(0, _isArray["default"])(data[1])) {
    name = "".concat(data[0], ".").concat(Object.keys(data[1])[0]);
    value = Object.values(data[1])[0];
  }

  if (queryDataSet.getField(name) && queryDataSet.getField(name).get('ignore') !== 'always') {
    return {
      name: name,
      value: value
    };
  }
}
/**
 * 当前数据是否有值并需要选中
 * @param data
 */


function isSelect(data) {
  if ((0, _isObject["default"])(data[1])) {
    return !(0, _isEmpty["default"])(data[1]);
  }

  return data[0] !== '__dirty' && !isEmpty(data[1]);
}
/**
 * 编辑/新建筛选弹窗
 * @param prefixCls
 * @param modal
 * @param menuDataSet
 * @param queryDataSet
 * @param onLocateData
 * @constructor
 */


var ModalContent = function ModalContent(_ref) {
  var prefixCls = _ref.prefixCls,
      modal = _ref.modal,
      menuDataSet = _ref.menuDataSet,
      queryDataSet = _ref.queryDataSet,
      onLoadData = _ref.onLoadData,
      type = _ref.type;
  modal.handleOk(
  /*#__PURE__*/
  (0, _asyncToGenerator2["default"])(
  /*#__PURE__*/
  _regenerator["default"].mark(function _callee() {
    var putData, statusKey, statusAdd, status, conditionData, otherRecord, res;
    return _regenerator["default"].wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            putData = [];
            statusKey = (0, _configure.getConfig)('statusKey');
            statusAdd = (0, _configure.getConfig)('status').add;
            status = {};
            status[statusKey] = statusAdd;

            if (type !== 'edit') {
              conditionData = Object.entries(queryDataSet.current.toData());
              (0, _map["default"])(conditionData, function (data) {
                if (isSelect(data)) {
                  var fieldObj = findFieldObj(queryDataSet, data);

                  if (fieldObj === null || fieldObj === void 0 ? void 0 : fieldObj.name) {
                    putData.push((0, _objectSpread2["default"])({
                      comparator: 'EQUAL',
                      fieldName: fieldObj.name,
                      value: fieldObj.value
                    }, status));
                  }
                }
              });
            } // 另存为


            if (type === 'save') {
              otherRecord = menuDataSet.current.clone();
              otherRecord.set('conditionList', putData);
              menuDataSet.current.reset();
              menuDataSet.create((0, _objectSpread2["default"])({}, otherRecord.toData(), {
                searchId: undefined
              })); // 新建
            } else if (type === 'create') {
              menuDataSet.current.set('conditionList', putData);
            }

            _context.next = 9;
            return menuDataSet.submit();

          case 9:
            res = _context.sent;

            if (!(res && res.success)) {
              _context.next = 13;
              break;
            }

            onLoadData(res.content ? res.content[0].searchId : undefined);
            return _context.abrupt("return", true);

          case 13:
            return _context.abrupt("return", !(res && res.failed || !res));

          case 14:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  })));
  modal.handleCancel(function () {
    menuDataSet.current.reset();
  });
  var proPrefixCls = (0, _configure.getConfig)('proPrefixCls');
  return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("div", {
    className: "".concat(prefixCls, "-filter-modal-item")
  }, _react["default"].createElement("div", {
    className: "".concat(proPrefixCls, "-form ").concat(proPrefixCls, "-field-label ").concat(proPrefixCls, "-field-required")
  }, (0, _localeContext.$l)('Table', 'filter_name')), _react["default"].createElement(_textField["default"], {
    style: {
      width: '100%'
    },
    name: "searchName",
    placeholder: (0, _localeContext.$l)('Table', 'please_enter'),
    dataSet: menuDataSet
  })), type !== 'edit' && _react["default"].createElement("div", {
    className: "".concat(prefixCls, "-filter-modal-item")
  }, _react["default"].createElement(_checkBox["default"], {
    name: "defaultFlag",
    dataSet: menuDataSet
  }), _react["default"].createElement("span", {
    className: "".concat(proPrefixCls, "-form ").concat(proPrefixCls, "-field-label")
  }, (0, _localeContext.$l)('Table', 'set_default'))));
};
/**
 * 快速筛选下拉
 */


var QuickFilterMenu = (0, _mobxReactLite.observer)(function () {
  var _filterMenuDS$current2;

  var _useContext = (0, _react.useContext)(_QuickFilterDataSet["default"]),
      dataSet = _useContext.dataSet,
      menuDataSet = _useContext.menuDataSet,
      prefixCls = _useContext.prefixCls,
      queryDataSet = _useContext.queryDataSet,
      filterMenuDS = _useContext.filterMenuDS,
      conditionDataSet = _useContext.conditionDataSet,
      onChange = _useContext.onChange,
      expand = _useContext.expand,
      conditionStatus = _useContext.conditionStatus,
      onStatusChange = _useContext.onStatusChange;

  var optionDs = filterMenuDS.getField('filterName').get('options');
  /**
   * queryDS 筛选赋值
   */

  var conditionAssign = function conditionAssign() {
    var _menuDataSet$current$ = menuDataSet.current.toData(),
        conditionList = _menuDataSet$current$.conditionList;

    var emptyRecord = new _Record["default"]({}, queryDataSet);
    (0, _mobx.runInAction)(function () {
      queryDataSet.records.push(emptyRecord);
      queryDataSet.current = emptyRecord;
    });

    if (conditionList && conditionList.length) {
      (0, _map["default"])(conditionList, function (condition) {
        if (condition.comparator === 'EQUAL') {
          var fieldName = condition.fieldName,
              value = condition.value;
          queryDataSet.current.set(fieldName, value);

          if ((0, _mobx.isArrayLike)(value) ? value.length : !isEmpty(value)) {
            onChange(fieldName);
          }
        }
      });
      onStatusChange(_enum2.RecordStatus.sync, queryDataSet.current.toData());
    } else {
      onStatusChange(_enum2.RecordStatus.sync);
      dataSet.query();
    }
  };
  /**
   * 定位数据源
   * @param searchId
   */


  var locateData = function locateData(searchId) {
    if (searchId) {
      menuDataSet.locate(menuDataSet.findIndex(function (menu) {
        return menu.get('searchId') === searchId;
      }));
      conditionDataSet.loadData(menuDataSet.current.get('conditionList'));
      if (filterMenuDS.current) filterMenuDS.current.set('filterName', searchId);
      conditionAssign();
    } else if (searchId === null) {
      queryDataSet.reset();
      queryDataSet.create({});
      onStatusChange(_enum2.RecordStatus.sync);
      dataSet.query();
    } else {
      var defaultMenu = menuDataSet.findIndex(function (menu) {
        return menu.get('defaultFlag');
      });

      if (defaultMenu !== -1) {
        menuDataSet.locate(defaultMenu);
        conditionDataSet.loadData(menuDataSet.current.get('conditionList'));
        if (filterMenuDS.current) filterMenuDS.current.set('filterName', menuDataSet.current.get('searchId'));
        conditionAssign();
      } else {
        if (filterMenuDS.current) filterMenuDS.current.set('filterName', undefined);
        queryDataSet.reset();
        queryDataSet.create({});
      }
    }
  };
  /**
   * 加载筛选数据并赋值查询
   * @param searchId
   */


  var loadData =
  /*#__PURE__*/
  function () {
    var _ref3 = (0, _asyncToGenerator2["default"])(
    /*#__PURE__*/
    _regenerator["default"].mark(function _callee2(searchId) {
      var result;
      return _regenerator["default"].wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              _context2.next = 2;
              return menuDataSet.query();

            case 2:
              result = _context2.sent;
              optionDs.loadData(result);
              conditionDataSet.loadData(menuDataSet.current.get('conditionList'));

              if (result && result.length) {
                locateData(searchId);
              } else {
                if (filterMenuDS.current) filterMenuDS.current.set('filterName', undefined);
                locateData();

                if (dataSet.props.autoQuery) {
                  dataSet.query();
                }
              }

            case 6:
            case "end":
              return _context2.stop();
          }
        }
      }, _callee2);
    }));

    return function loadData(_x) {
      return _ref3.apply(this, arguments);
    };
  }();

  function handleChange(value) {
    locateData(value);
  }
  /**
   * 删除该条筛选
   * @param record 下拉数据源
   */


  function handleDelete(_x2) {
    return _handleDelete.apply(this, arguments);
  }

  function _handleDelete() {
    _handleDelete = (0, _asyncToGenerator2["default"])(
    /*#__PURE__*/
    _regenerator["default"].mark(function _callee4(record) {
      var searchId, currentId, delRecord;
      return _regenerator["default"].wrap(function _callee4$(_context4) {
        while (1) {
          switch (_context4.prev = _context4.next) {
            case 0:
              searchId = record.get('searchId');

              if (menuDataSet.current) {
                currentId = menuDataSet.current.get('searchId');
                searchId = record.get('searchId') === currentId ? undefined : currentId;
              }

              delRecord = menuDataSet.find(function (menu) {
                return menu.get('searchId') === record.get('searchId');
              });
              _context4.next = 5;
              return menuDataSet["delete"](delRecord, "".concat((0, _localeContext.$l)('Table', 'whether_delete_filter'), "\uFF1A").concat(record.get('searchName'), "\uFF1F"));

            case 5:
              loadData(searchId);

            case 6:
            case "end":
              return _context4.stop();
          }
        }
      }, _callee4);
    }));
    return _handleDelete.apply(this, arguments);
  }

  function handleQueryReset() {
    var _filterMenuDS$current;

    var current = queryDataSet.current;

    if ((_filterMenuDS$current = filterMenuDS.current) === null || _filterMenuDS$current === void 0 ? void 0 : _filterMenuDS$current.get('filterName')) {
      conditionAssign();
    } else {
      current.reset();
      var conditionData = Object.entries(current.toData());
      (0, _map["default"])(conditionData, function (data) {
        var fieldObj = findFieldObj(queryDataSet, data);

        if ((fieldObj === null || fieldObj === void 0 ? void 0 : fieldObj.name) && isSelect(data)) {
          onChange(fieldObj.name);
        }
      });
      dataSet.query();
    }

    onStatusChange(_enum2.RecordStatus.sync);
  }

  function getTitle(type) {
    switch (type) {
      case 'create':
        return (0, _localeContext.$l)('Table', 'save_filter');

      case 'edit':
        return (0, _localeContext.$l)('Table', 'filter_rename');

      default:
        return (0, _localeContext.$l)('Table', 'save_filter_as');
    }
  }

  function openModal(type, searchId) {
    if (searchId) {
      menuDataSet.locate(menuDataSet.findIndex(function (menu) {
        return menu.get('searchId') === searchId;
      }));
      conditionDataSet.loadData(menuDataSet.current.get('conditionList'));
    }

    _modal["default"].open({
      key: modalKey,
      closable: true,
      title: getTitle(type),
      children: _react["default"].createElement(ModalContent, {
        prefixCls: prefixCls,
        type: type,
        menuDataSet: menuDataSet,
        conditionDataSet: conditionDataSet,
        onLoadData: loadData,
        queryDataSet: queryDataSet
      }),
      okFirst: false,
      destroyOnClose: true
    });
  }

  function handleSave() {
    return _handleSave.apply(this, arguments);
  }

  function _handleSave() {
    _handleSave = (0, _asyncToGenerator2["default"])(
    /*#__PURE__*/
    _regenerator["default"].mark(function _callee5() {
      var _filterMenuDS$current3;

      var conditionData, res;
      return _regenerator["default"].wrap(function _callee5$(_context5) {
        while (1) {
          switch (_context5.prev = _context5.next) {
            case 0:
              if ((_filterMenuDS$current3 = filterMenuDS.current) === null || _filterMenuDS$current3 === void 0 ? void 0 : _filterMenuDS$current3.get('filterName')) {
                _context5.next = 5;
                break;
              }

              menuDataSet.create({});
              openModal('create');
              _context5.next = 13;
              break;

            case 5:
              conditionData = Object.entries(queryDataSet.current.toData());
              conditionDataSet.reset();
              (0, _map["default"])(conditionData, function (data) {
                var fieldObj = findFieldObj(queryDataSet, data);

                if (fieldObj === null || fieldObj === void 0 ? void 0 : fieldObj.name) {
                  var currentRecord = conditionDataSet.find(function (record) {
                    return record.get('fieldName') === fieldObj.name;
                  });

                  if (currentRecord) {
                    if (isEmpty(fieldObj.value) || (0, _isObject["default"])(fieldObj.value) && (0, _isEmpty["default"])(fieldObj.value)) {
                      conditionDataSet.remove(currentRecord);
                    } else {
                      currentRecord.set('value', fieldObj.value);
                    }
                  } else if (isSelect(data)) {
                    conditionDataSet.create({
                      fieldName: fieldObj.name,
                      value: fieldObj.value
                    });
                  }
                }
              });
              menuDataSet.current.set('conditionList', conditionDataSet.toJSONData());
              _context5.next = 11;
              return menuDataSet.submit();

            case 11:
              res = _context5.sent;

              if (res && res.success) {
                loadData(res.content ? res.content[0].searchId : undefined);
              }

            case 13:
            case "end":
              return _context5.stop();
          }
        }
      }, _callee5);
    }));
    return _handleSave.apply(this, arguments);
  }

  function handleEdit(record) {
    openModal('edit', record.get('searchId'));
  }

  function handleSaveOther() {
    menuDataSet.current.set('searchName', '');
    menuDataSet.current.getField('searchName').validator.reset();
    openModal('save');
  }

  (0, _react.useEffect)(function () {
    loadData();
  }, []);
  /**
   * 默认设置
   * @param defaultFlag
   * @param record
   */

  var setDefaultFlag =
  /*#__PURE__*/
  function () {
    var _ref4 = (0, _asyncToGenerator2["default"])(
    /*#__PURE__*/
    _regenerator["default"].mark(function _callee3(defaultFlag, record) {
      var currentRecord, res, result;
      return _regenerator["default"].wrap(function _callee3$(_context3) {
        while (1) {
          switch (_context3.prev = _context3.next) {
            case 0:
              record.set('defaultFlag', defaultFlag);
              currentRecord = menuDataSet.find(function (menu) {
                return menu.get('searchId') === record.get('searchId');
              });
              currentRecord.set('defaultFlag', defaultFlag);
              _context3.next = 5;
              return menuDataSet.submit();

            case 5:
              res = _context3.sent;
              _context3.next = 8;
              return menuDataSet.query();

            case 8:
              result = _context3.sent;
              optionDs.loadData(result);

              if (res && res.failed || !res) {
                record.reset();
                currentRecord.reset();
              }

            case 11:
            case "end":
              return _context3.stop();
          }
        }
      }, _callee3);
    }));

    return function setDefaultFlag(_x3, _x4) {
      return _ref4.apply(this, arguments);
    };
  }();
  /**
   * 渲染下拉选项
   * @param record
   * @param text
   */


  var optionRenderer = function optionRenderer(_ref5) {
    var record = _ref5.record,
        text = _ref5.text;
    return _react["default"].createElement("div", {
      className: "".concat(prefixCls, "-filter-menu-option")
    }, text, _react["default"].createElement("div", {
      className: "".concat(prefixCls, "-filter-menu-option-icons")
    }, _react["default"].createElement(_tooltip["default"], {
      title: (record === null || record === void 0 ? void 0 : record.get('defaultFlag')) ? (0, _localeContext.$l)('Table', 'cancel_default') : (0, _localeContext.$l)('Table', 'set_default')
    }, (record === null || record === void 0 ? void 0 : record.get('defaultFlag')) ? _react["default"].createElement(_icon["default"], {
      type: "star",
      onClick: function onClick(e) {
        e.preventDefault();
        e.stopPropagation();
        setDefaultFlag(0, record);
      }
    }) : _react["default"].createElement(_icon["default"], {
      type: "grade-o",
      onClick: function onClick(e) {
        e.preventDefault();
        e.stopPropagation();
        setDefaultFlag(1, record);
      }
    })), _react["default"].createElement(_tooltip["default"], {
      title: (0, _localeContext.$l)('Table', 'rename')
    }, _react["default"].createElement(_icon["default"], {
      type: "edit-o",
      onClick: function onClick(e) {
        e.preventDefault();
        e.stopPropagation();
        handleEdit(record);
      }
    })), _react["default"].createElement(_tooltip["default"], {
      title: (0, _localeContext.$l)('Table', 'delete_button')
    }, _react["default"].createElement(_icon["default"], {
      type: "delete_forever-o",
      onClick: function onClick(e) {
        e.preventDefault();
        e.stopPropagation();
        handleDelete(record);
      }
    }))));
  };

  return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_icon["default"], {
    type: "sort",
    style: {
      transform: 'rotateY(180deg)'
    }
  }), _react["default"].createElement(_select["default"], {
    isFlat: true,
    placeholder: (0, _localeContext.$l)('Table', 'fast_filter'),
    style: {
      border: 'none',
      minWidth: '0.9rem'
    },
    dataSet: filterMenuDS,
    name: "filterName",
    dropdownMatchSelectWidth: false,
    dropdownMenuStyle: {
      minWidth: '2rem'
    },
    optionRenderer: optionRenderer,
    onChange: handleChange
  }), conditionStatus === _enum2.RecordStatus.update && _react["default"].createElement("div", {
    className: "".concat(prefixCls, "-filter-buttons"),
    style: expand ? {} : {
      display: 'none'
    }
  }, _react["default"].createElement(_button["default"], {
    color: _enum.ButtonColor.primary,
    onClick: handleSave
  }, (0, _localeContext.$l)('Table', 'save_filter')), ((_filterMenuDS$current2 = filterMenuDS.current) === null || _filterMenuDS$current2 === void 0 ? void 0 : _filterMenuDS$current2.get('filterName')) && _react["default"].createElement(_button["default"], {
    onClick: handleSaveOther
  }, (0, _localeContext.$l)('Table', 'save_as')), _react["default"].createElement(_button["default"], {
    onClick: handleQueryReset
  }, (0, _localeContext.$l)('Table', 'reset_button'))));
});
var _default = QuickFilterMenu;
exports["default"] = _default;
//# sourceMappingURL=QuickFilterMenu.js.map