instantjob-recruiter-client/dist/components/display_calendar/calendar.js

a set of tools for creating an instantjob recruiter react client

'use strict';

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

var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

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

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

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

var _extends3 = _interopRequireDefault(_extends2);

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 _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  flex: 1;\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  flex-direction: column;\n  padding: 0 10px;\n'], ['\n  flex: 1;\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  flex-direction: column;\n  padding: 0 10px;\n']),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n'], ['\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n']),
    _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n  display: flex;\n  align-items: center;\n  font-weight: 500;\n  color: ', ';\n  font-size: 16px;\n'], ['\n  display: flex;\n  align-items: center;\n  font-weight: 500;\n  color: ', ';\n  font-size: 16px;\n']),
    _templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n  ', '\n  margin: 0 20px;\n  ', '\n'], ['\n  ', '\n  margin: 0 20px;\n  ', '\n']),
    _templateObject5 = (0, _taggedTemplateLiteral3.default)(['\n    color: ', ';\n  '], ['\n    color: ', ';\n  ']),
    _templateObject6 = (0, _taggedTemplateLiteral3.default)(['\n  ', '\n  margin: 0 10px;\n  font-size: 20px;\n'], ['\n  ', '\n  margin: 0 10px;\n  font-size: 20px;\n']),
    _templateObject7 = (0, _taggedTemplateLiteral3.default)(['\n  width: 120px;\n  display: flex;\n  justify-content: center;\n  font-size: ', ';\n'], ['\n  width: 120px;\n  display: flex;\n  justify-content: center;\n  font-size: ', ';\n']),
    _templateObject8 = (0, _taggedTemplateLiteral3.default)(['\n  ', '\n'], ['\n  ', '\n']),
    _templateObject9 = (0, _taggedTemplateLiteral3.default)(['\n  display: flex;\n  align-items: center;\n'], ['\n  display: flex;\n  align-items: center;\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

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

var _filterable_list = require('components/filterable_list/filterable_list');

var _filterable_list2 = _interopRequireDefault(_filterable_list);

var _deals_list = require('components/deals_list');

var _filters = require('components/filterable_list/filters');

var _filters2 = _interopRequireDefault(_filters);

var _filters_title = require('components/filterable_list/filters_title');

var _filters_title2 = _interopRequireDefault(_filters_title);

var _side_panel = require('components/utils/side_panel');

var _side_panel2 = _interopRequireDefault(_side_panel);

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

var _button2 = _interopRequireDefault(_button);

var _month = require('./month');

var _month2 = _interopRequireDefault(_month);

var _week = require('./week');

var _week2 = _interopRequireDefault(_week);

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

var _auto_bind2 = _interopRequireDefault(_auto_bind);

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

var _persistent_state2 = _interopRequireDefault(_persistent_state);

var _styles = require('common/styles');

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

var _event_system2 = _interopRequireDefault(_event_system);

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

var _moment2 = _interopRequireDefault(_moment);

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

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

var _recruiters = require('selectors/recruiters');

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

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

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

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

    _this.state = _persistent_state2.default.get(props.persistent_state_key, (0, _extends3.default)({}, _filterable_list2.default.initial_state, (0, _deals_list.get_initial_state)(props), {
      month_view: true
    }));
    (0, _auto_bind2.default)(_this);
    return _this;
  }

  (0, _createClass3.default)(Calendar, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.unregister_show_week = _event_system2.default.register('calendar-show-week', this.show_week);
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.unregister_show_week();
      _persistent_state2.default.store(this.props.persistent_state_key, this.state);
    }
  }, {
    key: 'set_state',
    value: function set_state(arg) {
      this.setState(arg);
    }
  }, {
    key: 'get_filters_and_missions',
    value: function get_filters_and_missions() {
      var _props = this.props,
          missions = _props.missions,
          fields = _props.fields,
          workplaces = _props.workplaces,
          recruiters = _props.recruiters,
          get_mission_elements = _props.get_mission_elements;

      var _get_filters_and_deal = (0, _deals_list.get_filters_and_deals)({
        deals: missions,
        fields: fields,
        workplaces: workplaces,
        recruiters: recruiters,
        state: this.state,
        setState: this.set_state
      }),
          filtered_missions = _get_filters_and_deal.deals,
          filters = _get_filters_and_deal.filters;

      return {
        missions: filtered_missions.map(function (mission) {
          return (0, _extends3.default)({}, mission, get_mission_elements(mission));
        }),
        filters: filters
      };
    }
  }, {
    key: 'open_filters',
    value: function open_filters() {
      this.filters.open();
    }
  }, {
    key: 'show_month',
    value: function show_month() {
      this.setState({ month_view: true });
    }
  }, {
    key: 'show_week',
    value: function show_week() {
      this.setState({ month_view: false });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props2 = this.props,
          action = _props2.action,
          other_eventables = _props2.other_eventables;

      var _get_filters_and_miss = this.get_filters_and_missions(),
          missions = _get_filters_and_miss.missions,
          filters = _get_filters_and_miss.filters;

      var month_view = this.state.month_view;

      var View = month_view ? _month2.default : _week2.default;
      return _react2.default.createElement(
        Container,
        null,
        _react2.default.createElement(
          _filters2.default,
          { component: _side_panel2.default, componentRef: function componentRef(filters) {
              return _this2.filters = filters;
            } },
          filters
        ),
        _react2.default.createElement(
          Header,
          null,
          _react2.default.createElement(
            ToggleFilters,
            { onClick: this.open_filters },
            _react2.default.createElement(_filters_title2.default, null)
          ),
          _react2.default.createElement(
            Side,
            null,
            _react2.default.createElement(
              Action,
              { onClick: this.show_month, selected: month_view },
              'Mois'
            ),
            _react2.default.createElement(
              Action,
              { onClick: this.show_week, selected: !month_view },
              'Semaine'
            ),
            _react2.default.createElement(Navigation, { month_view: month_view }),
            _react2.default.createElement(_button2.default, action)
          )
        ),
        _react2.default.createElement(
          View,
          null,
          [].concat((0, _toConsumableArray3.default)(missions), (0, _toConsumableArray3.default)(other_eventables))
        )
      );
    }
  }]);
  return Calendar;
}(_react.Component);

Calendar.defaultProps = {
  missions: [],
  other_eventables: [],
  get_mission_elements: function get_mission_elements() {
    return {
      icon: '!',
      color: 'pink'
    };
  }
};

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

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

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

    _this3.state = {
      week: (0, _moment2.default)()
    };
    (0, _auto_bind2.default)(_this3);
    return _this3;
  }

  (0, _createClass3.default)(Navigation, [{
    key: 'translate',
    value: function translate(by) {
      var unit = this.props.month_view ? 'month' : 'week';
      this.navigate_to((0, _moment2.default)(this.state.week).startOf(unit).add(by, unit));
    }
  }, {
    key: 'show_previous',
    value: function show_previous() {
      this.translate(-1);
    }
  }, {
    key: 'show_next',
    value: function show_next() {
      this.translate(1);
    }
  }, {
    key: 'show_today',
    value: function show_today() {
      this.navigate_to((0, _moment2.default)());
    }
  }, {
    key: 'get_time',
    value: function get_time() {
      var week = this.state.week;

      if (this.props.month_view) {
        return (0, _utilities.capitalize_first_letter)(week.format("MMMM"));
      } else {
        var start = (0, _moment2.default)(week).startOf('week'),
            end = (0, _moment2.default)(week).endOf('week');
        return start.format("D MMM") + ' - ' + end.format("D MMM");
      }
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this4 = this;

      this.stop_retrieving_calendar_week = _event_system2.default.retrieve('calendar-week', function (week) {
        return _this4.setState({ week: week });
      });
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.stop_retrieving_calendar_week();
    }
  }, {
    key: 'navigate_to',
    value: function navigate_to(day) {
      _event_system2.default.post('calendar-week', (0, _moment2.default)(day).startOf('week'));
    }
  }, {
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        NavigationContainer,
        null,
        _react2.default.createElement(
          Arrow,
          { onClick: this.show_previous },
          _react2.default.createElement(_md.MdKeyboardArrowLeft, null)
        ),
        _react2.default.createElement(
          Time,
          { month_view: this.props.month_view },
          this.get_time()
        ),
        _react2.default.createElement(
          Arrow,
          { onClick: this.show_next },
          _react2.default.createElement(_md.MdKeyboardArrowRight, null)
        ),
        _react2.default.createElement(
          Action,
          { onClick: this.show_today },
          'Aujourd\'hui'
        )
      );
    }
  }]);
  return Navigation;
}(_react.Component);

exports.default = (0, _reactRedux.connect)(function (state) {
  return {
    fields: (0, _fields.get_missions_fields)(state),
    workplaces: state.missions.workplaces,
    recruiters: (0, _recruiters.get_recruiters)(state)
  };
})(Calendar);


var Container = _styledComponents2.default.div(_templateObject);
var Header = _styledComponents2.default.div(_templateObject2);
var Side = _styledComponents2.default.div(_templateObject3, (0, _styles.color)('black', 'light'));
var Action = _styledComponents2.default.div(_templateObject4, _styles.link, function (_ref) {
  var selected = _ref.selected;
  return selected ? (0, _styledComponents.css)(_templateObject5, (0, _styles.color)('action')) : '';
});
var Arrow = _styledComponents2.default.div(_templateObject6, _styles.link);
var Time = _styledComponents2.default.div(_templateObject7, function (_ref2) {
  var month_view = _ref2.month_view;
  return month_view ? '18px' : '14px';
});
var ToggleFilters = _styledComponents2.default.div(_templateObject8, _styles.link);
var NavigationContainer = _styledComponents2.default.div(_templateObject9);