instantjob-recruiter-client/dist/components/filterable_table/filterable_table.js

a set of tools for creating an instantjob recruiter react client

'use strict';

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

var _promise = require('babel-runtime/core-js/promise');

var _promise2 = _interopRequireDefault(_promise);

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

var _keys2 = _interopRequireDefault(_keys);

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

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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 _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

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

var _extends5 = _interopRequireDefault(_extends4);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactRedux = require('react-redux');

var _bind = require('classnames/bind');

var _bind2 = _interopRequireDefault(_bind);

var _md = require('react-icons/lib/md');

var _stylesReact = require('./styles.react.scss');

var _selected_items = require('components/filterable_list/selected_items');

var _selected_items2 = _interopRequireDefault(_selected_items);

var _non_exclusive_field = require('components/non_exclusive_field');

var _non_exclusive_field2 = _interopRequireDefault(_non_exclusive_field);

var _comment_field = require('components/comment_field');

var _comment_field2 = _interopRequireDefault(_comment_field);

var _file_field = require('components/file_field');

var _file_field2 = _interopRequireDefault(_file_field);

var _filter = require('components/filter');

var _filter2 = _interopRequireDefault(_filter);

var _button = require('components/utils/button');

var _button2 = _interopRequireDefault(_button);

var _list = require('components/list');

var _list2 = _interopRequireDefault(_list);

var _search_bar = require('components/search_bar');

var _search_bar2 = _interopRequireDefault(_search_bar);

var _horizontal_scrollable_view = require('components/utils/horizontal_scrollable_view');

var _horizontal_scrollable_view2 = _interopRequireDefault(_horizontal_scrollable_view);

var _non_exclusive_field_filter = require('components/non_exclusive_field_filter');

var _non_exclusive_field_filter2 = _interopRequireDefault(_non_exclusive_field_filter);

var _secondary_actions = require('components/utils/secondary_actions');

var _secondary_actions2 = _interopRequireDefault(_secondary_actions);

var _base = require('selectors/base');

var _fields = require('selectors/fields');

var _fields2 = require('common/fields');

var _store = require('common/store');

var _store2 = _interopRequireDefault(_store);

var _auto_bind = require('common/auto_bind');

var _auto_bind2 = _interopRequireDefault(_auto_bind);

var _request = require('common/request');

var _request2 = _interopRequireDefault(_request);

var _persistent_state = require('common/persistent_state');

var _persistent_state2 = _interopRequireDefault(_persistent_state);

var _event_system = require('common/event_system');

var _event_system2 = _interopRequireDefault(_event_system);

var _utilities = require('common/utilities');

var _display = require('actions/display');

var _fields3 = require('actions/fields');

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

var cx = _bind2.default.bind(require('styles/filterable_table.scss'));

var get_values_with_selection = (0, _utilities.make_persistent)(function (values, selected, locked, existing_values) {
  var existing_value_ids = {};
  existing_values.forEach(function (values) {
    return values.forEach(function (_ref) {
      var id = _ref.id;
      return existing_value_ids[id] = true;
    });
  });
  return values.filter(function (_ref2) {
    var id = _ref2.id;
    return existing_value_ids[id] || selected[id] || locked[id];
  }).map(function (value) {
    return (0, _extends5.default)({}, value, {
      selected: selected[value.id],
      locked: locked[value.id]
    });
  });
});

var compare = function compare(a, b) {
  var null_values = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
  var ascending = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;

  var is_null = function is_null(c) {
    return (0, _utilities.array_contains)([null, undefined].concat((0, _toConsumableArray3.default)(null_values)), c, true);
  };
  var a_is_null = is_null(a),
      b_is_null = is_null(b);
  if (b_is_null) {
    if (a_is_null) {
      return 0;
    } else {
      return -1;
    }
  } else {
    if (a_is_null) {
      return 1;
    } else {
      if (a > b) {
        return ascending ? 1 : -1;
      } else if (a < b) {
        return ascending ? -1 : 1;
      } else {
        return 0;
      }
    }
  }
};

var counter = 0;

var FilterableTable = function (_Component) {
  (0, _inherits3.default)(FilterableTable, _Component);

  function FilterableTable(props) {
    (0, _classCallCheck3.default)(this, FilterableTable);

    var _this = (0, _possibleConstructorReturn3.default)(this, (FilterableTable.__proto__ || (0, _getPrototypeOf2.default)(FilterableTable)).call(this, props));

    _this.state = (0, _extends5.default)({
      comment_filtered_item_ids: {},
      value_filters: {},
      order_by: null,
      order_by_field: null,
      ascending: true,
      edit_field_mode: false
    }, _persistent_state2.default.get(props.persistent_state_key));
    (0, _auto_bind2.default)(_this);
    return _this;
  }

  (0, _createClass3.default)(FilterableTable, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.mounted = true;
      this.props.get_table_ref(this);
      this.selected_items_box = 'filterable_table_selected_items_' + counter++;
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.mounted = false;
      _persistent_state2.default.store(this.props.persistent_state_key, this.state);
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(_ref3) {
      var items = _ref3.items,
          selected = _ref3.selected;

      if (items !== this.props.items || selected !== this.props.selected) {
        _event_system2.default.post(this.selected_items_box, (0, _utilities.array_from_set)(selected).map(function (id) {
          return items[id];
        }));
      }
    }
  }, {
    key: 'start_edit_field',
    value: function start_edit_field(field_id) {
      this.setState({ edit_field_mode: field_id });
    }
  }, {
    key: 'on_comment_query_change',
    value: function on_comment_query_change(field_id, query, results) {
      if (this.mounted && !(0, _base.tolerant_equal)(results, this.state.comment_filtered_item_ids[field_id])) {
        this.setState({
          comment_filtered_item_ids: (0, _extends5.default)({}, this.state.comment_filtered_item_ids, (0, _defineProperty3.default)({}, field_id, results))
        });
      }
    }
  }, {
    key: 'toggle_filtered_value',
    value: function toggle_filtered_value(value) {
      if (this.mounted) {
        this.setState({ value_filters: (0, _extends5.default)({}, this.state.value_filters, (0, _defineProperty3.default)({}, value.id, !this.state.value_filters[value.id])) });
      }
    }
  }, {
    key: 'order_by',
    value: function order_by(_order_by) {
      var ascending = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;

      if (this.mounted) {
        if (this.state.order_by == _order_by) {
          this.setState({ ascending: ascending === null ? !this.state.ascending : ascending });
        } else {
          this.setState({ order_by: _order_by, ascending: ascending === null ? true : ascending });
        }
      }
    }
  }, {
    key: 'order_by_comment',
    value: function order_by_comment(field_id) {
      if (this.mounted) {
        if (this.state.order_by == 'comment' && this.state.order_by_field == field_id) {
          this.setState({ ascending: !this.state.ascending });
        } else {
          this.setState({ order_by: 'comment', order_by_field: field_id, ascending: true });
        }
      }
    }
  }, {
    key: 'get_filtered_item_ids',
    value: function get_filtered_item_ids() {
      var _this2 = this;

      var order = (0, _utilities.map_hash)(this.props.items, function (item) {
        if (_this2.state.order_by == 'comment') {
          var comments = _this2.props.fields[_this2.state.order_by_field].comments;

          return comments[item.id];
        } else {
          return item[_this2.state.order_by];
        }
      });
      return (0, _keys2.default)(this.state.comment_filtered_item_ids).reduce(function (filtered_item_ids, field_id) {
        var results = _this2.state.comment_filtered_item_ids[field_id];
        if (results) {
          var results_set = (0, _utilities.set_from_array)(results);
          return filtered_item_ids.filter(function (id) {
            return results_set[id];
          });
        } else {
          return filtered_item_ids;
        }
      }, [].concat((0, _toConsumableArray3.default)((0, _utilities.array_from_set)(this.state.value_filters)), (0, _toConsumableArray3.default)((0, _utilities.array_from_set)(this.props.locked_values))).reduce(function (filtered_item_ids, value_id) {
        return filtered_item_ids.filter(_this2.props.filter_value(value_id));
      }, this.props.filtered_item_ids)).filter(function (id) {
        return _this2.props.items[id];
      }).sort(function (id1, id2) {
        return compare(order[id1], order[id2], ["", " "], _this2.state.ascending);
      });
    }
  }, {
    key: 'view_selected',
    value: function view_selected() {
      var _props = this.props,
          on_card_click = _props.on_card_click,
          render_card = _props.render_card;

      _store2.default.dispatch((0, _display.show_popover)(_selected_items2.default, {
        on_card_click: on_card_click,
        render_card: render_card,
        box: this.selected_items_box
      }, ""));
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var _props2 = this.props,
          actions = _props2.actions,
          selectable = _props2.selectable,
          selected = _props2.selected,
          create_field = _props2.create_field;

      var fake_state = { fields: this.props };
      var fields = (0, _fields.get_fields)(fake_state);
      var filtered_item_ids = this.get_filtered_item_ids();
      var all_selected = (0, _utilities.for_all)(filtered_item_ids, function (id) {
        return _this3.props.selected[id];
      });
      var secondary_actions_active = (0, _utilities.array_sum)(actions.map(function (_ref4) {
        var badge = _ref4.badge;
        return badge || 0;
      }));
      return _react2.default.createElement(
        'div',
        { className: cx('filterable-table', { 'filterable-table_selectable': this.props.selectable }) },
        this.props.title ? _react2.default.createElement(
          'div',
          { className: cx('filterable-table__top') },
          _react2.default.createElement(
            'div',
            { className: cx('filterable-table__top-title') },
            this.props.title
          ),
          _react2.default.createElement(
            'div',
            { className: cx('filterable-table__top-actions') },
            (0, _utilities.empty_set)(selected) ? null : _react2.default.createElement(
              _stylesReact.ItemsCounter,
              { onClick: this.view_selected },
              _react2.default.createElement(
                _stylesReact.Count,
                null,
                (0, _utilities.set_count)(selected)
              ),
              _react2.default.createElement(_md.MdPerson, null)
            ),
            actions.length > 0 ? _react2.default.createElement(
              _secondary_actions2.default,
              { active: secondary_actions_active },
              actions
            ) : null,
            this.props.main_action ? _react2.default.createElement(_button2.default, this.props.main_action) : null
          )
        ) : null,
        _react2.default.createElement(
          _horizontal_scrollable_view2.default,
          null,
          _react2.default.createElement(
            'div',
            { className: cx('filterable-table__main') },
            _react2.default.createElement(
              'div',
              { className: cx('filterable-table__header') },
              this.props.selectable ? _react2.default.createElement(
                'div',
                { className: cx('filterable-table__all-items') },
                _react2.default.createElement(
                  'div',
                  { className: cx('filterable-table__items-count') },
                  filtered_item_ids.length
                ),
                _react2.default.createElement(
                  'div',
                  { className: cx('filterable-table__select-all-checkbox', { 'filterable-table__select-all-checkbox_selected': all_selected }), onClick: function onClick() {
                      return _this3.props.on_select_all(filtered_item_ids);
                    } },
                  all_selected ? _react2.default.createElement(_md.MdCheckBox, null) : _react2.default.createElement(_md.MdCheckBoxOutlineBlank, null)
                )
              ) : null,
              _react2.default.createElement(
                'div',
                { className: cx('filterable-table__card-header') },
                this.props.children
              ),
              _react2.default.createElement(
                'div',
                { className: cx('filterable-table__fields-header') },
                fields.map(function (field) {
                  var props = {
                    key: field.id,
                    id: field.id,
                    name: field.name
                  };
                  switch (field.category) {
                    case 'non_exclusive':
                      return _react2.default.createElement(_non_exclusive_field_filter2.default, (0, _extends5.default)({}, props, {
                        values: get_values_with_selection(field.values, _this3.state.value_filters, _this3.props.locked_values, filtered_item_ids.map(function (item_id) {
                          return _this3.props.get_item_field_values(item_id, field.id);
                        })),
                        toggle_filtered_value: _this3.toggle_filtered_value,
                        className: cx('filterable-table__filter_field'),
                        stop_recycling: function stop_recycling() {
                          return _this3.props.stop_recycling(field.id);
                        }
                      }));
                    case 'comment':
                      return _react2.default.createElement(CommentFieldFilter, (0, _extends5.default)({}, props, {
                        comments: (0, _keys2.default)(field.comments).map(function (id) {
                          return { id: id, comment: field.comments[id] };
                        }),
                        default_results: (0, _keys2.default)(_this3.props.items),
                        on_query_change: function on_query_change(query, results) {
                          return _this3.on_comment_query_change(field.id, query, results);
                        },
                        sort_items: function sort_items() {
                          return _this3.order_by_comment(field.id);
                        }
                      }));
                    case 'file':
                      return _react2.default.createElement(FileFieldFilter, props);
                    default:
                      return null;
                  }
                }),
                this.props.editable && create_field ? _react2.default.createElement(
                  _button2.default,
                  { icon: _md.MdAddCircle, onClick: create_field, discreet: true, className: cx('filterable-table__add-field-button') },
                  'Nouveau Champ'
                ) : null
              )
            ),
            _react2.default.createElement(
              'div',
              { className: cx('filterable-table__rows') },
              _react2.default.createElement(
                _list2.default,
                { item_height: 60 },
                filtered_item_ids.map(function (id) {
                  return _react2.default.createElement(Item, {
                    key: id,
                    item: _this3.props.items[id],
                    fields: fields,
                    get_item_field_values: _this3.props.get_item_field_values,
                    add_value: function add_value(value_id) {
                      return _this3.props.add_value(id, value_id);
                    },
                    remove_value: function remove_value(value_id) {
                      return _this3.props.remove_value(id, value_id);
                    },
                    update_comment: function update_comment(field_id, comment) {
                      return _this3.props.update_comment(id, field_id, comment);
                    },
                    editable: _this3.props.editable,
                    selectable: _this3.props.selectable,
                    selected: _this3.props.selected[id],
                    render_card: _this3.props.render_card,
                    on_card_click: function on_card_click() {
                      return _this3.props.on_card_click(id);
                    },
                    item_type: _this3.props.item_type
                  });
                })
              )
            )
          )
        )
      );
    }
  }]);
  return FilterableTable;
}(_react.Component);

var Item = function (_Component2) {
  (0, _inherits3.default)(Item, _Component2);

  function Item() {
    (0, _classCallCheck3.default)(this, Item);
    return (0, _possibleConstructorReturn3.default)(this, (Item.__proto__ || (0, _getPrototypeOf2.default)(Item)).apply(this, arguments));
  }

  (0, _createClass3.default)(Item, [{
    key: 'shouldComponentUpdate',
    value: function shouldComponentUpdate(props) {
      return props.item !== this.props.item || props.fields !== this.props.fields || props.selected !== this.props.selected;
    }
  }, {
    key: 'render',
    value: function render() {
      var _this5 = this;

      return _react2.default.createElement(
        'div',
        { className: cx('filterable-table__item') },
        _react2.default.createElement(
          'div',
          { className: cx('filterable-table__card', { 'filterable-table__card_selected': this.props.selected }), onClick: this.props.on_card_click },
          this.props.render_card(this.props.item)
        ),
        this.props.fields.map(function (field) {
          var props = (0, _extends5.default)({
            key: field.id
          }, field, {
            editable: _this5.props.editable,
            edit_mode: 'click',
            show_label: false
          });
          switch (field.category) {
            case "non_exclusive":
              return _react2.default.createElement(ItemNonExclusiveField, (0, _extends5.default)({}, props, {
                selected_values: _this5.props.get_item_field_values(_this5.props.item.id, field.id),
                add_value: _this5.props.add_value,
                remove_value: _this5.props.remove_value,
                allow_creating_values: (0, _fields2.allow_creating_value)(_this5.props.item_type, field)
              }));
            case "comment":
              return _react2.default.createElement(ItemCommentField, (0, _extends5.default)({}, props, {
                comment: field.comments[_this5.props.item.id],
                update_comment: function update_comment(comment) {
                  return _this5.props.update_comment(field.id, comment);
                }
              }));
            case "file":
              return _react2.default.createElement(ItemFileField, (0, _extends5.default)({}, props, {
                file: field.files[_this5.props.item.id],
                user_id: _this5.props.item.id
              }));
            default:
              return null;
          }
        }),
        _react2.default.createElement('div', { key: 'dummy1', className: cx('filterable-table__field') }),
        _react2.default.createElement('div', { key: 'dummy2', className: cx('filterable-table__field') })
      );
    }
  }]);
  return Item;
}(_react.Component);

var ItemNonExclusiveField = function ItemNonExclusiveField(props) {
  return _react2.default.createElement(
    'div',
    { className: cx('filterable-table__field') },
    _react2.default.createElement(_non_exclusive_field2.default, (0, _extends5.default)({}, props, {
      ellipsis: 3,
      value_ellipsis: 65,
      field_ellipsis: 150,
      on_select_value: props.add_value,
      on_deselect_value: props.remove_value,
      create_value: function create_value(value_name) {
        return new _promise2.default(function (resolve, reject) {
          var characters = value_name.split("");
          if ((0, _utilities.array_contains)(characters, ',') || (0, _utilities.array_contains)(characters, ';')) {
            _store2.default.dispatch((0, _display.alert_failure)('Les caract\xE8res \',\' et \';\' sont interdits dans le nom d\'une valeur.'));
            reject();
          } else {
            (0, _fields2.action_create_value)(props.id, value_name).then(resolve);
          }
        });
      }
    }))
  );
};

var ItemCommentField = function ItemCommentField(props) {
  return _react2.default.createElement(
    'div',
    { className: cx('filterable-table__field') },
    _react2.default.createElement(_comment_field2.default, (0, _extends5.default)({}, props, {
      comment_ellipsis: 300,
      on_submit_comment: props.update_comment
    }))
  );
};

var ItemFileField = function ItemFileField(props) {
  return _react2.default.createElement(
    'div',
    { className: cx('filterable-table__field') },
    _react2.default.createElement(_file_field2.default, props)
  );
};

var CommentFieldFilter = function (_Component3) {
  (0, _inherits3.default)(CommentFieldFilter, _Component3);

  function CommentFieldFilter(props) {
    (0, _classCallCheck3.default)(this, CommentFieldFilter);

    var _this6 = (0, _possibleConstructorReturn3.default)(this, (CommentFieldFilter.__proto__ || (0, _getPrototypeOf2.default)(CommentFieldFilter)).call(this, props));

    _this6.state = {
      active: false
    };
    _this6.on_query_change = _this6.on_query_change.bind(_this6);
    return _this6;
  }

  (0, _createClass3.default)(CommentFieldFilter, [{
    key: 'on_query_change',
    value: function on_query_change(query, results) {
      if (this.state.active == (query == "")) {
        this.setState({ active: !this.state.active });
      }
      this.props.on_query_change(query, results);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this7 = this;

      return _react2.default.createElement(
        _filter2.default,
        {
          className: cx('filterable-table__filter', 'filterable-table__filter_field'),
          active: this.state.active,
          label: this.props.name,
          onClick: this.props.sort_items
        },
        _react2.default.createElement(_search_bar2.default, {
          ref: function ref(search_bar) {
            return _this7.search_bar = search_bar;
          },
          className: cx('filterable-table__filter-search-bar'),
          extend: false,
          make_fuse: _fields2.new_comments_fuse,
          items: this.props.comments,
          default_results: this.props.default_results,
          on_query_change: this.on_query_change
        })
      );
    }
  }]);
  return CommentFieldFilter;
}(_react.Component);

var FileFieldFilter = function FileFieldFilter(_ref5) {
  var name = _ref5.name;
  return _react2.default.createElement(_filter2.default, {
    className: cx('filterable-table__filter', 'filterable-table__filter_field'),
    active: false,
    label: name
  });
};

FilterableTable.defaultProps = {
  items: {},
  fields: {},
  values: {},
  on_card_click: function on_card_click(item_id) {},
  editable: true,
  selectable: false,
  shareable_with_users: false,
  selected: {},
  locked_values: {},
  on_select_all: function on_select_all(filtered_item_ids) {},
  get_item_field_values: function get_item_field_values(item_id, field_id) {
    return null;
  },
  filter_value: function filter_value(value_id) {
    return function (id) {
      return true;
    };
  },
  actions: [],
  get_table_ref: function get_table_ref(table) {},
  item_type: null,
  persistent_state_key: ""
};

exports.default = FilterableTable;