@krowdy-ui/views/Filters/FilterConfig.js

React components that implement Google's Material Design.

"use strict";

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

var _typeof3 = require("@babel/runtime/helpers/typeof");

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

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

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

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

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _dayjs = _interopRequireDefault(require("@date-io/dayjs"));

var _dayjs2 = _interopRequireDefault(require("dayjs"));

var _es = _interopRequireDefault(require("dayjs/locale/es"));

var _pickers = require("@material-ui/pickers");

var _core = require("@krowdy-ui/core");

var _generateRandomId = _interopRequireDefault(require("../utils/generateRandomId"));

var _CategoryItems = _interopRequireDefault(require("./CategoryItems"));

var _InputChip = _interopRequireDefault(require("./InputChip"));

var _useFilterValidator = _interopRequireDefault(require("./useFilterValidator"));

var _TagCloudWords = _interopRequireDefault(require("./TagCloudWords"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var useStyles = (0, _core.makeStyles)(function (theme) {
  return {
    and: {
      fontSize: 14,
      margin: theme.spacing(0),
      paddingLeft: theme.spacing(1)
    },
    applyFilterButton: {
      marginTop: theme.spacing(2)
    },
    center: {
      display: 'flex',
      justifyContent: 'center'
    },
    configOptionContainer: {
      padding: theme.spacing(2.5, 0)
    },
    firstInputContainer: {
      alignItems: 'flex-end',
      display: 'flex'
    },
    input: {
      fontSize: 12
    },
    inputEndAdornment: {
      fontSize: 12
    },
    menuItem: {
      '&:hover': {
        background: '#F3FBFF',
        color: theme.palette.primary[500]
      },
      fontSize: 12,
      transition: '.3s'
    },
    menuItemSelected: {
      // '&&': {
      //   backgroundColor: '#F3FBFF'
      // },
      backgroundColor: '#F3FBFF',
      color: theme.palette.primary[500]
    },
    secondInputContainer: {
      paddingTop: theme.spacing(2)
    },
    select: {
      fontSize: 12,
      paddingBottom: theme.spacing(1),
      paddingTop: theme.spacing(1)
    },
    selectPaper: {
      borderRadius: 2
    },
    title: {
      borderBottom: '1px solid',
      borderBottomColor: theme.palette.grey[300],
      fontSize: 12,
      fontWeight: 'bold',
      lineHeight: '20px',
      marginTop: 0,
      padding: theme.spacing(0.5, 0)
    }
  };
}, {
  name: 'KrowdyFilterConfig'
});

var parseToValidDate = function parseToValidDate(date) {
  if (date) return (0, _dayjs2["default"])(date).toISOString();
  return null;
};

var FilterConfig = function FilterConfig(props) {
  var filter = props.filter,
      categoryItems = props.categoryItems,
      onClickApply = props.onClickApply,
      hasNextPage = props.hasNextPage,
      _props$filterTypes = props.filterTypes,
      filterTypes = _props$filterTypes === void 0 ? [] : _props$filterTypes,
      listWidth = props.listWidth,
      _props$edit = props.edit,
      edit = _props$edit === void 0 ? false : _props$edit,
      onSelectCategoryFilter = props.onSelectCategoryFilter,
      loadMoreCategoryItems = props.loadMoreCategoryItems;
  var classes = useStyles();

  var _useState = (0, _react.useState)(filter.optionIndex || 0),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      optionIndex = _useState2[0],
      setOptionIndex = _useState2[1];

  var type = filterTypes.find(function (f) {
    return f.type === filter.type;
  });
  var option = type.options[optionIndex];

  var _useState3 = (0, _react.useState)(function () {
    if (!type) return null;
    if (filter.value && option.numberOfInputs) switch (filter.type) {
      case 'number':
      case 'date':
        switch (option.operator) {
          case '$range':
            var _filter$value = (0, _slicedToArray2["default"])(filter.value, 2),
                first = _filter$value[0],
                second = _filter$value[1];

            return {
              first: first,
              second: second
            };

          default:
            return (0, _extends4["default"])({}, type.initialValue, {
              first: filter.value,
              second: ''
            });
        }

      case 'category':
      case 'keyword':
      case 'generic':
        return filter.value;

      default:
        return type.initialValue;
    }
    return type.initialValue;
  }),
      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
      filterConfig = _useState4[0],
      setFilterConfig = _useState4[1];

  var errors = (0, _useFilterValidator["default"])(filterConfig, filter.type, option);
  if (!type) return null;

  var getFilterConfigValue = function getFilterConfigValue(filterType) {
    switch (filterType) {
      case 'number':
        if (option.numberOfInputs === 1) return filterConfig.first;else if (option.numberOfInputs === 2) return [filterConfig.first, filterConfig.second];
        return null;

      case 'date':
        if (option.numberOfInputs === 1) return parseToValidDate(filterConfig.first);else if (option.numberOfInputs === 2) return [parseToValidDate(filterConfig.first), parseToValidDate(filterConfig.second)];
        return null;

      case 'generic':
      case 'category':
      case 'keyword':
        return filterConfig;

      default:
        return null;
    }
  };

  var _handleOptionChange = function _handleOptionChange(event) {
    setOptionIndex(event.target.value);
  };

  var _handleChange = function _handleChange(key) {
    return function (eventOrValue) {
      if (eventOrValue && (0, _typeof2["default"])(eventOrValue) === 'object' && eventOrValue.target) eventOrValue.persist();

      switch (filter.type) {
        case 'number':
          setFilterConfig(function (prev) {
            return (0, _extends4["default"])({}, prev, (0, _defineProperty2["default"])({}, key, eventOrValue.target.value));
          });
          break;

        case 'date':
          setFilterConfig(function (prev) {
            return (0, _extends4["default"])({}, prev, (0, _defineProperty2["default"])({}, key, eventOrValue));
          });
          break;

        case 'generic':
        case 'category':
        case 'keyword':
          setFilterConfig(eventOrValue);
          break;

        default:
          break;
      }
    };
  };

  var _handleClickApply = function _handleClickApply() {
    var configValue = getFilterConfigValue(filter.type);

    var _id = edit ? filter._id : (0, _generateRandomId["default"])();

    onClickApply({
      _id: _id,
      key: filter.key,
      label: filter.label,
      operator: option.operator,
      operatorLabel: option.label,
      optionIndex: optionIndex,
      queryBase: filter.queryBase,
      reference: filter.reference,
      type: filter.type,
      value: configValue
    });
  };

  var _handleLoadMoreItems = function _handleLoadMoreItems(categoryKey) {
    return function () {
      loadMoreCategoryItems(categoryKey);
    };
  };

  var renderConfigOption = function renderConfigOption(filterType, optionIndex) {
    var showInputs = type.options[optionIndex].numberOfInputs > 0;
    if (!showInputs) return null;
    var showSecondInput = type.options[optionIndex].numberOfInputs === 2;

    switch (filterType) {
      case 'number':
        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
          className: classes.firstInputContainer
        }, /*#__PURE__*/_react["default"].createElement(_core.TextField // error={Boolean(errors && errors.first)}
        , {
          fullWidth: true // helperText={errors && errors.first}
          ,
          InputProps: {
            classes: {
              input: classes.input
            }
          },
          onChange: _handleChange('first'),
          placeholder: "Valor",
          size: "small",
          type: "number",
          value: filterConfig.first
        }), showSecondInput && /*#__PURE__*/_react["default"].createElement("p", {
          className: classes.and
        }, "y")), showSecondInput && /*#__PURE__*/_react["default"].createElement("div", {
          className: classes.secondInputContainer
        }, /*#__PURE__*/_react["default"].createElement(_core.TextField // error={Boolean(errors && errors.second)}
        , {
          fullWidth: true // helperText={errors && errors.second}
          ,
          InputProps: {
            classes: {
              input: classes.input
            }
          },
          onChange: _handleChange('second'),
          placeholder: "Valor",
          size: "small",
          type: "number",
          value: filterConfig.second
        })));

      case 'keyword':
        return /*#__PURE__*/_react["default"].createElement(_TagCloudWords["default"], {
          categoryKey: filter.key,
          hasNextPage: hasNextPage,
          items: categoryItems,
          listWidth: listWidth,
          loadMore: _handleLoadMoreItems(filter.key),
          onChangeSelected: _handleChange(),
          onResetCategoryItems: onSelectCategoryFilter,
          selectedItems: filterConfig
        });

      case 'generic':
        return /*#__PURE__*/_react["default"].createElement(_InputChip["default"], {
          onChange: _handleChange(),
          values: filterConfig
        });

      case 'date':
        return /*#__PURE__*/_react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
          locale: _es["default"],
          utils: _dayjs["default"]
        }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
          className: classes.firstInputContainer
        }, /*#__PURE__*/_react["default"].createElement(_pickers.KeyboardDatePicker, {
          format: "DD/MM/YYYY",
          fullWidth: true // {...(
          //   errors && errors.first ?
          //     {
          //       error     : true,
          //       helperText: errors.first
          //     } :
          //     {}
          // )}
          ,
          initialFocusedDate: (0, _dayjs2["default"])(new Date()).minute(0).second(0).format(),
          InputAdornmentProps: {
            classes: {
              root: classes.inputEndAdornment
            }
          },
          InputProps: {
            classes: {
              input: classes.input
            }
          },
          maxDateMessage: "El rango es incorrecto",
          minDateMessage: "El rango es incorrecto",
          onChange: _handleChange('first'),
          placeholder: "DD/MM/AAAA",
          size: "small",
          value: filterConfig.first
        }), showSecondInput && /*#__PURE__*/_react["default"].createElement("p", {
          className: classes.and
        }, "y")), showSecondInput && /*#__PURE__*/_react["default"].createElement("div", {
          className: classes.secondInputContainer
        }, /*#__PURE__*/_react["default"].createElement(_pickers.KeyboardDatePicker, {
          format: "DD/MM/YYYY",
          fullWidth: true // {...(
          //   errors && errors.second ?
          //     {
          //       error     : true,
          //       helperText: errors.second
          //     } :
          //     {}
          // )}
          ,
          initialFocusedDate: (0, _dayjs2["default"])(new Date()).minute(0).second(0).format(),
          InputAdornmentProps: {
            classes: {
              root: classes.inputEndAdornment
            }
          },
          InputProps: {
            classes: {
              input: classes.input
            }
          },
          maxDateMessage: "El rango es incorrecto",
          minDate: filterConfig.first,
          minDateMessage: "El rango es incorrecto",
          onChange: _handleChange('second'),
          placeholder: "DD/MM/AAAA",
          size: "small",
          value: filterConfig.second
        }))));

      case 'category':
        return /*#__PURE__*/_react["default"].createElement(_CategoryItems["default"], {
          categoryKey: filter.key,
          hasNextPage: hasNextPage,
          items: categoryItems,
          listWidth: listWidth,
          loadMore: _handleLoadMoreItems(filter.key),
          onChangeSelected: _handleChange(),
          onResetCategoryItems: onSelectCategoryFilter,
          selectedItems: filterConfig
        });

      default:
        return null;
    }
  };

  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("p", {
    className: classes.title
  }, filter.label), /*#__PURE__*/_react["default"].createElement(_core.FormControl, {
    color: "primary",
    fullWidth: true,
    variant: "outlined"
  }, /*#__PURE__*/_react["default"].createElement(_core.Select, {
    classes: {
      root: classes.select
    },
    color: "primary",
    MenuProps: {
      anchorOrigin: {
        horizontal: 'left',
        vertical: 'bottom'
      },
      classes: {
        paper: classes.selectPaper
      },
      getContentAnchorEl: null
    },
    onChange: _handleOptionChange,
    value: optionIndex
  }, type.options.map(function (option, index) {
    return /*#__PURE__*/_react["default"].createElement(_core.MenuItem, {
      classes: {
        root: classes.menuItem,
        selected: classes.menuItemSelected
      },
      key: index,
      value: index
    }, option.label);
  }))), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.configOptionContainer
  }, renderConfigOption(filter.type, optionIndex)), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.center
  }, /*#__PURE__*/_react["default"].createElement(_core.Button, {
    className: classes.applyFilterButton,
    color: "primary",
    disabled: Boolean(errors),
    onClick: _handleClickApply
  }, "Aplicar filtros")));
};

process.env.NODE_ENV !== "production" ? FilterConfig.propTypes = {
  categoryItems: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    _id: _propTypes["default"].string.isRequired,
    label: _propTypes["default"].string.isRequired
  })).isRequired,
  edit: _propTypes["default"].bool,
  filter: _propTypes["default"].shape({
    _id: _propTypes["default"].string.isRequired,
    key: _propTypes["default"].string.isRequired,
    label: _propTypes["default"].string.isRequired,
    type: _propTypes["default"].string.isRequired
  }),
  filterToEdit: _propTypes["default"].shape({
    _id: _propTypes["default"].string.isRequired,
    key: _propTypes["default"].string.isRequired,
    label: _propTypes["default"].string.isRequired,
    operator: _propTypes["default"].string.isRequired,
    operatorLabel: _propTypes["default"].string.isRequired,
    optionIndex: _propTypes["default"].number.isRequired,
    type: _propTypes["default"].string.isRequired,
    value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number, _propTypes["default"].array])
  }),
  hasNextPage: _propTypes["default"].bool.isRequired,
  loadMoreCategoryItems: _propTypes["default"].func.isRequired,
  onClickApply: _propTypes["default"].func.isRequired,
  onSelectCategoryFilter: _propTypes["default"].func
} : void 0;
var _default = FilterConfig;
exports["default"] = _default;