instantjob-recruiter-client/dist/components/user_table.es6.js

a set of tools for creating an instantjob recruiter react client

'use strict';

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

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

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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

var _extends4 = _interopRequireDefault(_extends3);

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 _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

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

var _bind2 = _interopRequireDefault(_bind);

var _filterable_table = require('components/filterable_table/filterable_table');

var _filterable_table2 = _interopRequireDefault(_filterable_table);

var _user_card = require('components/user_card');

var _user_card2 = _interopRequireDefault(_user_card);

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

var _filter2 = _interopRequireDefault(_filter);

var _address_picker = require('components/address_picker');

var _address_picker2 = _interopRequireDefault(_address_picker);

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

var _search_bar2 = _interopRequireDefault(_search_bar);

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

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

var _users = require('common/users');

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

var _auto_bind2 = _interopRequireDefault(_auto_bind);

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

var _store2 = _interopRequireDefault(_store);

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

var _persistent_state2 = _interopRequireDefault(_persistent_state);

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

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

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

var _non_exclusive_field_filter2 = _interopRequireDefault(_non_exclusive_field_filter);

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

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

var get_users = function get_users(_, props) {
  return props.users;
};
var get_fuse_users = (0, _base.tolerant_selector)([get_users], function (users) {
  return (0, _keys2.default)(users).map(function (id) {
    return users[id];
  }).filter(function (user) {
    return user.full_name != "";
  });
});

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

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

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

    _this.state = (0, _extends4.default)({
      name_filtered_user_ids: [],
      name_query: "",
      place: props.place,
      radius_filter: null,
      users: props.users,
      selected_statuses: (0, _extends4.default)({}, props.initial_selected_statuses)
    }, _persistent_state2.default.get(props.persistent_state_key));
    (0, _auto_bind2.default)(_this);
    return _this;
  }

  (0, _createClass3.default)(UserTable, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.mounted = true;
      this.update_distances();
      this.name_search_bar.set_query(this.state.name_query);
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(props) {
      var place_has_changed = false;
      if (props.place != this.props.place) {
        this.setState({ place: props.place });
        place_has_changed = true;
        this.order_by_distance();
      }
      if (place_has_changed || props.users !== this.props.users) {
        this.update_distances(props.users);
      }
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.mounted = false;
      _persistent_state2.default.store(this.props.persistent_state_key, this.state);
    }
  }, {
    key: 'on_name_query_change',
    value: function on_name_query_change(query, results) {
      if (this.mounted) {
        this.setState({ name_filtered_user_ids: results, name_query: query });
      }
    }
  }, {
    key: 'update_distances',
    value: function update_distances(users) {
      var _this2 = this;

      if (!users) {
        users = this.props.users;
      }
      this.setState({ users: (0, _utilities.map_hash)(users, function (user) {
          user = (0, _extends4.default)({}, user, { status: _this2.get_table_user_status(user) });
          if (_this2.state.place) {
            user.distance = (0, _utilities.distance)(user, {
              latitude: _this2.state.place.location.lat,
              longitude: _this2.state.place.location.lng
            });
          } else if (user.distance) {
            user.distance = null;
          }
          return user;
        }) });
    }
  }, {
    key: 'order_by',
    value: function order_by(_order_by, ascending) {
      if (this.mounted) {
        this.table.order_by(_order_by, ascending);
      }
    }
  }, {
    key: 'order_by_distance',
    value: function order_by_distance() {
      if (this.mounted) {
        this.table.order_by('distance', true);
      }
    }
  }, {
    key: 'get_table_user_status',
    value: function get_table_user_status(user) {
      if (user && user.status) {
        return user.status;
      } else {
        return (0, _users.get_user_status)(user);
      }
    }
  }, {
    key: 'get_forbidden_statuses',
    value: function get_forbidden_statuses() {
      return (0, _extends4.default)({}, this.props.forbidden_statuses || {}, {
        applied: true
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var fields = (0, _utilities.filter_hash)(this.props.fields, function (field) {
        return field.for_entity == 'User';
      });
      var fake_state = { fields: { values: this.props.values, fields: fields }, users: this.props };
      var filtered_user_ids = this.state.name_filtered_user_ids;
      filtered_user_ids = filtered_user_ids.filter(function (id) {
        return _this3.state.users[id];
      });
      if (this.state.radius_filter && this.state.place) {
        filtered_user_ids = filtered_user_ids.filter(function (id) {
          var user = _this3.state.users[id];
          return user.distance && user.distance < _this3.state.radius_filter * 1000;
        });
      }
      filtered_user_ids = filtered_user_ids.filter(function (id) {
        var user = _this3.state.users[id];
        return !_this3.get_forbidden_statuses()[_this3.get_table_user_status(user).status];
      });
      var existing_user_statuses = {};
      filtered_user_ids.forEach(function (user_id) {
        return existing_user_statuses[_this3.state.users[user_id].status.status] = true;
      });
      if (!(0, _utilities.empty_array)((0, _utilities.array_from_set)(this.state.selected_statuses).filter(function (status) {
        return existing_user_statuses[status];
      }))) {
        filtered_user_ids = filtered_user_ids.filter(function (id) {
          var user = _this3.state.users[id];
          return _this3.state.selected_statuses[_this3.get_table_user_status(user).status];
        });
      }
      return _react2.default.createElement(
        _filterable_table2.default,
        (0, _extends4.default)({
          get_table_ref: function get_table_ref(table) {
            return _this3.table = table;
          }
        }, this.props, {
          persistent_state_key: this.props.persistent_state_key ? this.props.persistent_state_key + '-inner' : '',
          fields: fields,
          items: this.state.users,
          render_card: function render_card(user) {
            return _react2.default.createElement(_user_card2.default, (0, _extends4.default)({ selectable: _this3.props.selectable, selected: _this3.props.selected[user.id] }, user));
          },
          filtered_item_ids: filtered_user_ids,
          on_card_click: this.props.on_user_card_click,
          add_value: _fields.action_add_user_value,
          remove_value: _fields.action_remove_user_value,
          update_comment: _fields.action_update_user_comment,
          get_item_field_values: function get_item_field_values(item_id, field_id) {
            return (0, _fields2.get_user_fields)(item_id)(fake_state)[field_id].selected_values;
          },
          item_type: 'user',
          filter_value: function filter_value(value_id) {
            var value = _this3.props.values[value_id];
            if (value) {
              return function (id) {
                return value.entity_ids[id];
              };
            } else {
              return function (id) {
                return true;
              };
            }
          }
        }),
        _react2.default.createElement(
          'div',
          { className: cx('filterable-table__card-name-arrange') },
          _react2.default.createElement(
            'div',
            { className: cx('filterable-table__sort-name'), onClick: function onClick() {
                return _this3.table.order_by('full_name');
              } },
            _react2.default.createElement(_md.MdSortByAlpha, null)
          ),
          _react2.default.createElement(
            'div',
            { className: cx('filterable-table__search-bar-container') },
            _react2.default.createElement(_search_bar2.default, {
              ref: function ref(name_search_bar) {
                return _this3.name_search_bar = name_search_bar;
              },
              className: cx('filterable-table__search-bar'),
              make_fuse: _users.new_users_fuse,
              items: get_fuse_users({}, this.props),
              default_results: (0, _keys2.default)(this.props.users),
              on_query_change: this.on_name_query_change
            })
          )
        ),
        _react2.default.createElement(
          'div',
          { className: cx('filterable-table__card-filters') },
          this.props.status_filterable ? _react2.default.createElement(_non_exclusive_field_filter2.default, {
            values: (0, _utilities.array_from_set)(existing_user_statuses).map(function (id) {
              return (0, _extends4.default)({ id: id }, (0, _users.make_user_statuses)(_this3.state.selected_statuses[id] ? 'white' : null)[id], { selected: _this3.state.selected_statuses[id] });
            }).filter(function (status) {
              return !_this3.get_forbidden_statuses()[status.id];
            }),
            name: "Statut",
            toggle_filtered_value: function toggle_filtered_value(status) {
              return _this3.setState({ selected_statuses: (0, _extends4.default)({}, _this3.state.selected_statuses, (0, _defineProperty3.default)({}, status.id, !_this3.state.selected_statuses[status.id])) });
            },
            search_enabled: false
          }) : null,
          _react2.default.createElement(_filter2.default, {
            label: "Dernière connexion",
            onClick: function onClick() {
              return _this3.table.order_by('last_connection');
            }
          }),
          this.props.place_filterable ? _react2.default.createElement(PlaceFilter, {
            active: this.state.place !== null,
            place_selectable: this.props.place_selectable,
            onClick: this.props.place_selectable ? null : function () {
              return _this3.order_by_distance();
            },
            on_place_select: function on_place_select(place) {
              _this3.setState({ place: place });
              _this3.update_distances();
              _this3.order_by_distance();
            },
            on_clear_place_input: function on_clear_place_input() {
              _this3.setState({ place: null });
              _this3.update_distances();
            },
            on_radius_change: function on_radius_change(radius_filter) {
              return _this3.setState({ radius_filter: radius_filter });
            },
            initial_query: this.state.place ? this.state.place.label : ""
          }) : null
        )
      );
    }
  }]);
  return UserTable;
}(_react.Component);

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

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

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

    _this4.state = {
      radius: ""
    };
    return _this4;
  }

  (0, _createClass3.default)(PlaceFilter, [{
    key: 'render',
    value: function render() {
      var _this5 = this;

      return _react2.default.createElement(
        _filter2.default,
        { className: cx('filterable-table__filter'), active: this.props.active, label: _react2.default.createElement(_md.MdPlace, null), onClick: this.props.onClick },
        _react2.default.createElement(
          'div',
          { className: cx('filterable-table__filter-place') },
          this.props.place_selectable ? _react2.default.createElement(
            'div',
            { className: cx('filterable-table__filter-place-group') },
            _react2.default.createElement(
              'div',
              { className: cx('filterable-table__filter-place-label') },
              'Trier en fonction de la distance \xE0'
            ),
            _react2.default.createElement(
              'div',
              { className: cx('filterable-table__filter-place-input') },
              _react2.default.createElement(_address_picker2.default, this.props)
            )
          ) : null,
          _react2.default.createElement(
            'div',
            { className: cx('filterable-table__filter-place-group') },
            _react2.default.createElement(
              'div',
              { className: cx('filterable-table__filter-place-label') },
              'Filtrer les candidats au del\xE0 de'
            ),
            _react2.default.createElement(
              'div',
              { className: cx('filterable-table__filter-place-input') },
              _react2.default.createElement('input', {
                ref: function ref(radius_input) {
                  return _this5.radius_input = radius_input;
                },
                type: 'text',
                placeholder: '',
                className: cx('filterable-table__filter-place-radius-input'),
                value: this.state.radius,
                onChange: function onChange(event) {
                  var radius = event.target.value;
                  _this5.setState({ radius: radius });
                  _this5.props.on_radius_change(radius);
                }
              }),
              _react2.default.createElement(
                'div',
                { className: cx('filterable-table__filter-place-radius-unit') },
                'km'
              )
            )
          )
        )
      );
    }
  }]);
  return PlaceFilter;
}(_react.Component);

UserTable.defaultProps = {
  items: {},
  fields: {},
  values: {},
  on_user_card_click: function on_user_card_click(user_id) {},
  editable: true,
  selectable: false,
  place_filterable: true,
  place_selectable: true,
  status_filterable: true,
  place: null,
  selected: {},
  on_select_all: function on_select_all(filtered_item_ids) {},
  store_field_name: function store_field_name(field_id, name) {},
  delete_field: function delete_field(field_id) {},
  initial_selected_statuses: {},
  forbidden_statuses: {}
};

exports.default = UserTable;