instantjob-recruiter-client/dist/components/popovers/mission_period_picker.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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

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

var _bind2 = _interopRequireDefault(_bind);

var _generic_calendar = require('components/generic_calendar');

var _generic_calendar2 = _interopRequireDefault(_generic_calendar);

var _tabbar = require('components/tabbar');

var _tabbar2 = _interopRequireDefault(_tabbar);

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

var _button2 = _interopRequireDefault(_button);

var _time_pickers = require('components/input_calendar/time_pickers');

var _time_pickers2 = _interopRequireDefault(_time_pickers);

var _moment = require('common/moment');

var _moment2 = _interopRequireDefault(_moment);

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

var _constants = require('common/constants');

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

var _auto_bind2 = _interopRequireDefault(_auto_bind);

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

var _store2 = _interopRequireDefault(_store);

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

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

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

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

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

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

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

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

    (0, _auto_bind2.default)(_this);
    _this.update_initial_days(props.initial_events);
    var mode = "all";
    var identical_days = function identical_days(day1, day2) {
      return (0, _base2.tolerant_equal)((0, _utilities.array_from_set)(day1).sort(), (0, _utilities.array_from_set)(day2).sort());
    };
    if ((0, _utilities.empty_set)(_this.initial_days) || (0, _utilities.group_consecutive)((0, _utilities.array_from_hash)(_this.initial_days), identical_days).length == 1) {
      mode = "day";
    }
    _this.state = {
      active_days: (0, _utilities.map_hash)(_this.initial_days, function () {
        return true;
      }),
      day_active: (0, _utilities.set_from_array)((0, _utilities.range)(_time_pickers.chunks_count_in_day).filter(function (chunk) {
        return (0, _utilities.exist)((0, _utilities.array_from_hash)(_this.initial_days), function (day) {
          return day[chunk];
        });
      })),
      chunks: _this.initial_days,
      mode: mode
    };
    _this.all_time_pickers = {};
    return _this;
  }

  (0, _createClass3.default)(MissionPeriodPicker, [{
    key: 'on_day_click',
    value: function on_day_click(date) {
      this.setState((0, _base.toggle_item_id)(this.state, "active_days", (0, _time_pickers.day_id)(date)));
    }
  }, {
    key: 'on_create_period',
    value: function on_create_period(start, end, paint) {
      var day_ids = [],
          current = (0, _moment2.default)(start);
      while (current.isBefore(end)) {
        day_ids.push((0, _time_pickers.day_id)(current));
        current.add(1, 'day');
      }
      this.setState({ active_days: (0, _extends4.default)({}, this.state.active_days, (0, _utilities.map_hash)((0, _utilities.set_from_array)(day_ids), function () {
          return paint;
        })) });
    }
  }, {
    key: 'flip',
    value: function flip(date, chunks, paint) {
      var chunks_range = (0, _utilities.create_hash)(chunks, function () {
        return paint;
      });
      switch (this.state.mode) {
        case "day":
          this.setState(function (_ref) {
            var day_active = _ref.day_active;
            return {
              day_active: (0, _extends4.default)({}, day_active, chunks_range)
            };
          });
          break;
        case "all":
          var id = (0, _time_pickers.day_id)(date);
          this.setState(function (_ref2) {
            var chunks = _ref2.chunks,
                day_active = _ref2.day_active;
            return {
              chunks: (0, _extends4.default)({}, chunks, (0, _defineProperty3.default)({}, id, (0, _extends4.default)({}, chunks[id] || day_active, chunks_range)))
            };
          });
          break;
      }
    }
  }, {
    key: 'update_initial_days',
    value: function update_initial_days(events) {
      this.initial_days = (0, _time_pickers.get_days_chunks)(events);
    }
  }, {
    key: 'get_day_events',
    value: function get_day_events() {
      return (0, _utilities.array_from_set)(this.state.active_days).map(function (day) {
        return {
          start: (0, _moment2.default)(day),
          end: (0, _moment2.default)(day).endOf('day'),
          full_days: true
        };
      });
    }
  }, {
    key: 'get_events',
    value: function get_events() {
      var _this2 = this;

      var days = (0, _utilities.array_from_set)(this.state.active_days);
      var events = [];
      var add_events = function add_events(day, active_chunks) {
        (0, _time_pickers.get_periods)(active_chunks).forEach(function (_ref3) {
          var start = _ref3.start,
              end = _ref3.end;

          events.push((0, _extends4.default)({}, (0, _time_pickers.get_start_end)(day, start, end), {
            full_days: false
          }));
        });
      };
      switch (this.state.mode) {
        case 'day':
          days.forEach(function (day) {
            return add_events(day, _this2.state.day_active);
          });
          break;
        case 'all':
          days.forEach(function (day) {
            return add_events(day, _this2.state.chunks[day] || _this2.state.day_active);
          });
          break;
      }
      if (events.length == 0) {
        events = days.map(function (day) {
          return {
            start: (0, _moment2.default)(day),
            end: (0, _moment2.default)(day).endOf('day'),
            full_days: true
          };
        });
      }
      return events;
    }
  }, {
    key: 'on_save',
    value: function on_save() {
      this.props.on_save(this.get_events());
    }
  }, {
    key: 'render_time_picker',
    value: function render_time_picker() {
      var _this3 = this;

      var common_props = {
        drag_color: (0, _constants.color)('primary', 'light'),
        flip: this.flip
      };
      switch (this.state.mode) {
        case "day":
          return _react2.default.createElement(_time_pickers2.default, (0, _extends4.default)({
            day_label: false,
            days: [{ date: (0, _moment2.default)(), chunks: this.state.day_active }]
          }, common_props));
        case "all":
          return _react2.default.createElement(_time_pickers2.default, (0, _extends4.default)({
            days: (0, _utilities.array_from_set)(this.state.active_days).map(function (day) {
              return (0, _moment2.default)(day);
            }).sort(function (a, b) {
              return a.isAfter(b) ? 1 : a.isSame(b) ? 0 : -1;
            }).map(function (day) {
              return {
                date: day,
                chunks: _this3.state.chunks[(0, _time_pickers.day_id)(day)] || _this3.state.day_active
              };
            })
          }, common_props));
      }
    }
  }, {
    key: 'set_mode',
    value: function set_mode(mode) {
      this.setState({ mode: mode });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this4 = this;

      return _react2.default.createElement(
        'div',
        { style: { display: 'flex', alignItems: 'stretch' } },
        _react2.default.createElement(
          'div',
          { className: cx('mission-period-picker') },
          _react2.default.createElement(
            'div',
            { className: cx('mission-period-picker__calendar') },
            _react2.default.createElement(_generic_calendar2.default, {
              hide_navigation: true,
              events: (0, _defineProperty3.default)({}, (0, _constants.color)('primary'), this.get_day_events()),
              on_click: this.on_day_click,
              drag_color: (0, _constants.color)('primary'),
              on_drag_and_drop: this.on_create_period
            })
          ),
          _react2.default.createElement(
            'div',
            { className: cx('mission-period-picker__time') },
            _react2.default.createElement(_tabbar2.default, {
              tabs: [{
                label: "Horaires uniques pour toute la mission",
                onClick: function onClick() {
                  return _this4.set_mode("day");
                },
                is_active: function is_active() {
                  return _this4.state.mode == "day";
                }
              }, {
                label: "Jour par jour",
                onClick: function onClick() {
                  return _this4.set_mode("all");
                },
                is_active: function is_active() {
                  return _this4.state.mode == "all";
                }
              }]
            }),
            _react2.default.createElement(
              'div',
              { className: cx('mission-period-picker__time-pickers') },
              this.render_time_picker()
            ),
            _react2.default.createElement(
              'div',
              { className: cx('mission-period-picker__time-button') },
              _react2.default.createElement(
                _button2.default,
                { onClick: this.on_save },
                'Enregistrer les dates de la mission'
              )
            )
          )
        )
      );
    }
  }]);
  return MissionPeriodPicker;
}(_react.Component);

MissionPeriodPicker.defaultProps = {
  initial_events: [],
  update_events: function update_events() {}
};

exports.default = (0, _reactRedux.connect)(function (state, _ref5) {
  var mission_id = _ref5.mission_id;
  return {
    initial_events: (0, _utilities.array_from_hash)(state.missions.events).filter(function (_ref6) {
      var calenderable_id = _ref6.calenderable_id,
          deleted_at = _ref6.deleted_at;
      return calenderable_id == mission_id && !deleted_at;
    })
  };
})(MissionPeriodPicker);