instantjob-recruiter-client/dist/components/input_calendar/agency_edit_user_calendar.es6.js

a set of tools for creating an instantjob recruiter react client

'use strict';

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

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

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

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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

var _extends7 = _interopRequireDefault(_extends6);

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 _bind = require('classnames/bind');

var _bind2 = _interopRequireDefault(_bind);

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

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

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

var _generic_calendar2 = _interopRequireDefault(_generic_calendar);

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

var _button2 = _interopRequireDefault(_button);

var _time_pickers = require('./time_pickers');

var _time_pickers2 = _interopRequireDefault(_time_pickers);

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

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

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

var _request2 = _interopRequireDefault(_request);

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

var _store2 = _interopRequireDefault(_store);

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

var _auto_bind2 = _interopRequireDefault(_auto_bind);

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

var _moment2 = _interopRequireDefault(_moment);

var _calendar = require('../../common/calendar');

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

var _event_system2 = _interopRequireDefault(_event_system);

var _calendar2 = require('../../selectors/calendar');

var _missions = require('../../selectors/missions');

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

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

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

var chunks_count_in_hour = 4;
var chunk_length_in_minutes = 60 / chunks_count_in_hour;
var chunks_count_in_day = 24 * chunks_count_in_hour;

var day_id = function day_id(day) {
  return day.format("YYYY-MM-DD");
};
var get_periods = function get_periods(chunk_set) {
  var periods = [],
      period_started = void 0,
      start = null;
  var add_period = function add_period(end) {
    return periods.push({ start: start, end: end });
  };
  (0, _utilities.range)(chunks_count_in_day).forEach(function (chunk) {
    if (chunk_set[chunk]) {
      if (!period_started) {
        start = chunk;
        period_started = true;
      }
    } else {
      if (period_started) {
        add_period(chunk - 1);
        period_started = false;
      }
    }
  });
  if (period_started) {
    add_period(chunks_count_in_day - 1);
  }
  return periods;
};
var get_start_end = function get_start_end(day, start_id, end_id) {
  var start_of_day = (0, _moment2.default)(day);
  var start = start_id,
      end = end_id;
  if (start > end) {
    start = end;
    end = start_id;
  }
  return {
    start: (0, _moment2.default)(start_of_day).add(start * chunk_length_in_minutes, 'minutes'),
    end: (0, _moment2.default)(start_of_day).add((end + 1) * chunk_length_in_minutes, 'minutes')
  };
};

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

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

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

    (0, _auto_bind2.default)(_this);
    var active = {};
    props.agency_events.forEach(function (event) {
      var current = (0, _moment2.default)(event.start);
      while (current.isBefore(event.end)) {
        var id = day_id(current);
        if (!active[id]) {
          active[id] = {};
        }
        active[id][(60 * current.hour() + current.minutes()) / chunk_length_in_minutes] = true;
        current.add(chunk_length_in_minutes, 'minutes');
      }
    });
    _this.state = {
      active: active,
      mode: "month",
      week: 0
    };
    return _this;
  }

  (0, _createClass3.default)(AgencyEditUserCalendarStatic, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      _event_system2.default.register('dismiss_popover', this.update_user_events);
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      if (this.should_scroll_to_week) {
        this.calendar.scroll_to_week(this.should_scroll_to_week);
        this.should_scroll_to_week = false;
      }
    }
  }, {
    key: 'on_day_click',
    value: function on_day_click(date) {
      var id = day_id(date);
      if (this.is_full_day(id)) {
        this.setState({
          active: (0, _extends7.default)({}, this.state.active, (0, _defineProperty3.default)({}, id, this.empty_day()))
        });
      } else if (this.is_empty_day(id)) {
        this.setState({
          active: (0, _extends7.default)({}, this.state.active, (0, _defineProperty3.default)({}, id, this.full_day()))
        });
      } else {
        this.on_navigate_to_week(date.endOf('week').diff((0, _moment2.default)(), 'week'));
      }
    }
  }, {
    key: 'full_day',
    value: function full_day() {
      return (0, _utilities.set_from_array)((0, _utilities.range)(chunks_count_in_day));
    }
  }, {
    key: 'empty_day',
    value: function empty_day() {
      return false;
    }
  }, {
    key: 'is_empty_day',
    value: function is_empty_day(id) {
      var day = this.state.active[id];
      return !day || (0, _utilities.empty_set)(day);
    }
  }, {
    key: 'is_full_day',
    value: function is_full_day(id) {
      var _this2 = this;

      var day = this.state.active[id];
      return day && (0, _utilities.for_all)((0, _utilities.range)(chunks_count_in_day), function (chunk) {
        return _this2.state.active[id][chunk];
      });
    }
  }, {
    key: 'on_create_days_period',
    value: function on_create_days_period(start, end) {
      var paint = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;

      var day_ids = [],
          current = (0, _moment2.default)(start),
          condition = paint ? this.is_empty_day : this.is_full_day;
      while (current.isBefore(end)) {
        var id = day_id(current);
        if (condition(id)) {
          day_ids.push(id);
        }
        current.add(1, 'day');
      }
      this.setState({ active: (0, _extends7.default)({}, this.state.active, (0, _utilities.map_hash)((0, _utilities.set_from_array)(day_ids), paint ? this.full_day : this.empty_day)) });
    }
  }, {
    key: 'on_create_chunks_period',
    value: function on_create_chunks_period(date, chunks) {
      var paint = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;

      var id = day_id(date);
      this.setState(function (_ref) {
        var active = _ref.active;
        return { active: (0, _extends7.default)({}, active, (0, _defineProperty3.default)({}, id, (0, _extends7.default)({}, active[id] || {}, (0, _utilities.create_hash)(chunks, function () {
            return paint;
          })))) };
      });
    }
  }, {
    key: 'get_day_events',
    value: function get_day_events() {
      return (0, _utilities.array_from_set)(this.state.active).filter(this.is_full_day).map(function (day) {
        return {
          start: (0, _moment2.default)(day),
          end: (0, _moment2.default)(day).endOf('day'),
          full_days: true
        };
      });
    }
  }, {
    key: 'get_hour_events',
    value: function get_hour_events() {
      var _this3 = this;

      var partially_busy_days = (0, _utilities.array_from_set)(this.state.active).filter(function (id) {
        return !_this3.is_full_day(id) && !_this3.is_empty_day(id);
      });
      var events = [];
      var add_events = function add_events(day, active_chunks) {
        get_periods(active_chunks).forEach(function (_ref2) {
          var start = _ref2.start,
              end = _ref2.end;

          events.push((0, _extends7.default)({}, get_start_end(day, start, end), {
            full_days: false
          }));
        });
      };
      partially_busy_days.forEach(function (day) {
        return add_events(day, _this3.state.active[day]);
      });
      return events;
    }
  }, {
    key: 'update_user_events',
    value: function update_user_events() {
      this.props.update_user_events([].concat((0, _toConsumableArray3.default)(this.get_day_events()), (0, _toConsumableArray3.default)(this.get_hour_events())));
    }
  }, {
    key: 'on_navigate_to_week',
    value: function on_navigate_to_week(week) {
      this.setState({ week: week, mode: "week" });
    }
  }, {
    key: 'on_navigate_to_month',
    value: function on_navigate_to_month() {
      this.setState({ mode: "month" });
      this.should_scroll_to_week = this.state.week;
    }
  }, {
    key: 'on_next_week',
    value: function on_next_week() {
      this.setState({ week: this.state.week + 1 });
    }
  }, {
    key: 'on_previous_week',
    value: function on_previous_week() {
      this.setState({ week: this.state.week - 1 });
    }
  }, {
    key: 'get_start_of_week',
    value: function get_start_of_week() {
      return (0, _moment2.default)().startOf('week').add(this.state.week, 'weeks');
    }
  }, {
    key: 'render',
    value: function render() {
      var _events,
          _this4 = this,
          _extends5;

      var _props = this.props,
          user_events = _props.user_events,
          mission_events = _props.mission_events;

      var events = (_events = {}, (0, _defineProperty3.default)(_events, (0, _constants.color)('important', 'light'), user_events), (0, _defineProperty3.default)(_events, (0, _constants.color)('primary'), mission_events), _events);
      switch (this.state.mode) {
        case "week":
          var start_of_week = this.get_start_of_week();
          return _react2.default.createElement(
            'div',
            { className: cx('input-calendar', 'input-calendar_week') },
            _react2.default.createElement(
              'div',
              { className: cx('input-calendar__nav') },
              _react2.default.createElement(
                _button2.default,
                {
                  className: cx('input-calendar__nav-back'),
                  back: true,
                  onClick: this.on_navigate_to_month
                },
                'Retour vue ',
                start_of_week.format('MMMM' + ((0, _moment2.default)().isSame(start_of_week, 'year') ? '' : ' YYYY'))
              ),
              _react2.default.createElement(
                'div',
                { className: cx('input-calendar__nav-weeks') },
                _react2.default.createElement(
                  'div',
                  { onClick: this.on_previous_week, className: cx('input-calendar__nav-weeks-control') },
                  _react2.default.createElement(_md.MdKeyboardArrowLeft, null)
                ),
                _react2.default.createElement(
                  'div',
                  { className: cx('input-calendar__nav-weeks-current') },
                  'Semaine ',
                  start_of_week.week()
                ),
                _react2.default.createElement(
                  'div',
                  { onClick: this.on_next_week, className: cx('input-calendar__nav-weeks-control') },
                  _react2.default.createElement(_md.MdKeyboardArrowRight, null)
                )
              )
            ),
            _react2.default.createElement(_time_pickers2.default, {
              events: events,
              days: (0, _utilities.range)(7).map(function (day) {
                var date = (0, _moment2.default)(start_of_week).add(day, 'days');
                return {
                  date: date,
                  chunks: _this4.state.active[day_id(date)] || {}
                };
              }),
              drag_color: (0, _constants.color)('attention'),
              full_day_color: (0, _constants.color)('important'),
              flip: this.on_create_chunks_period
            })
          );
        case "month":
          return _react2.default.createElement(
            'div',
            { className: cx('input-calendar', 'input-calendar_month') },
            _react2.default.createElement(_generic_calendar2.default, {
              ref: function ref(calendar) {
                return _this4.calendar = calendar;
              },
              events: (0, _extends7.default)({}, events, (_extends5 = {}, (0, _defineProperty3.default)(_extends5, (0, _constants.color)('attention'), this.get_hour_events()), (0, _defineProperty3.default)(_extends5, (0, _constants.color)('important'), this.get_day_events()), _extends5)),
              on_click: this.on_day_click,
              drag_color: (0, _constants.color)('important'),
              on_drag_and_drop: this.on_create_days_period,
              on_navigate_to_week: this.on_navigate_to_week
            })
          );
      }
    }
  }]);
  return AgencyEditUserCalendarStatic;
}(_react.Component);

var AgencyEditUserCalendar = (0, _reactRedux.connect)(function (state, _ref3) {
  var user_id = _ref3.user_id;

  var _get_user_events = (0, _calendar2.get_user_events)(user_id)(state),
      user_events = _get_user_events.user,
      agency_events = _get_user_events.agency;

  var mission_events = (0, _missions.get_user_missions_events)(user_id)(state);
  return {
    user_events: user_events,
    agency_events: agency_events,
    mission_events: mission_events
  };
}, function (dispatch, _ref4) {
  var user_id = _ref4.user_id;

  return {
    update_user_events: function update_user_events(new_events) {
      var state = _store2.default.getState();

      var _get_user_events2 = (0, _calendar2.get_user_events)(user_id)(state),
          old_events = _get_user_events2.agency;

      var _events_difference = (0, _calendar.events_difference)(old_events, new_events),
          remove = _events_difference.remove,
          add = _events_difference.add;

      _request2.default.put('users/' + user_id + '/events', { remove_events: (remove || []).map(function (event) {
          return event.id;
        }), events: add });
    }
  };
})(AgencyEditUserCalendarStatic);

exports.default = AgencyEditUserCalendar;