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

a set of tools for creating an instantjob recruiter react client

'use strict';

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

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

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

var _promise2 = _interopRequireDefault(_promise);

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

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

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

var _extends3 = _interopRequireDefault(_extends2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _bind2 = _interopRequireDefault(_bind);

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

var _reactDropzone = require('react-dropzone');

var _reactDropzone2 = _interopRequireDefault(_reactDropzone);

var _file_dropzone = require('./file_dropzone');

var _file_dropzone2 = _interopRequireDefault(_file_dropzone);

var _time_ago = require('components/utils/time_ago');

var _time_ago2 = _interopRequireDefault(_time_ago);

var _progress_indicator = require('./progress_indicator');

var _progress_indicator2 = _interopRequireDefault(_progress_indicator);

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

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

var _event_system2 = _interopRequireDefault(_event_system);

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

var _auto_bind2 = _interopRequireDefault(_auto_bind);

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

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

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

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

var value_width = 200;

function field_is_empty(_ref) {
  var category = _ref.category,
      values = _ref.values,
      comment = _ref.comment,
      file = _ref.file,
      value = _ref.value;

  switch (category) {
    case 'comment':
      return !comment;
    case 'non_exclusive':
      return (0, _utilities.empty_array)(values.filter((0, _utilities.property_getter)('selected')));
    case 'file':
      return !file;
    case 'exclusive':
      return !value;
  }
}

var add_empty_property_to_field = function add_empty_property_to_field(field) {
  return (0, _extends3.default)({}, field, {
    empty: field_is_empty(field)
  });
};

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

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

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

    _this.state = (0, _extends3.default)({}, props.user, {
      progress: 0
    });
    _this.render_agency = _this.render_agency.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(UserProfile, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this2 = this;

      setTimeout(function () {
        return _this2.setState({ progress: 6 });
      }, 500);
    }
  }, {
    key: 'render_agency',
    value: function render_agency(agency) {
      var _this3 = this;

      var fields = agency.fields.map(function (_ref2) {
        var id = _ref2.id;
        return _this3.agency_fields[id];
      }).filter(Boolean);
      if (!(0, _utilities.empty_array)(fields)) {
        return _react2.default.createElement(Agency, (0, _extends3.default)({}, agency, {
          fields: fields,
          key: agency.id
        }));
      } else {
        return _react2.default.createElement('div', { key: agency.id });
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this4 = this;

      var agencies = this.props.agencies;

      var instant_job_fields = _constants.instant_job_users_fields.map(function (field) {
        return (0, _extends3.default)({}, field, {
          comment: _this4.state[field.id] || "",
          update: function update(comment) {
            _this4.setState((0, _defineProperty3.default)({}, field.id, comment));
            return _this4.props.update_instant_job_field(field.id, comment);
          }
        });
      }).map(add_empty_property_to_field);
      this.agency_fields = (0, _utilities.hash_with_key)((0, _utilities.flatten_array)(this.props.agencies.map((0, _utilities.property_getter)('fields'))).map(add_empty_property_to_field).filter(function (_ref3) {
        var category = _ref3.category,
            values = _ref3.values;
        return category != 'non_exclusive' || !(0, _utilities.empty_array)(values);
      }));
      var progress_fields = [].concat((0, _toConsumableArray3.default)(instant_job_fields), (0, _toConsumableArray3.default)((0, _utilities.array_from_hash)(this.agency_fields))).filter(function (_ref4) {
        var locked = _ref4.locked;
        return !locked;
      });
      return _react2.default.createElement(
        'div',
        { className: cx('user-profile') },
        _react2.default.createElement(
          'div',
          { className: cx('user-profile__header') },
          _react2.default.createElement(
            'div',
            { className: cx('user-profile__header-title') },
            'Votre profil'
          ),
          _react2.default.createElement(_progress_indicator2.default, { completed: progress_fields.filter(function (_ref5) {
              var empty = _ref5.empty;
              return !empty;
            }).length, total: progress_fields.length, text: 'Compl\xE9t\xE9 \xE0 ##%' })
        ),
        _react2.default.createElement(Agency, {
          key: 'instantjob',
          title: "Informations InstantJob",
          subtitle: "Ces informations seront partagées avec l'ensemble des employeurs avec qui vous avez choisi de travailler.",
          fields: instant_job_fields
        }),
        agencies.map(this.render_agency)
      );
    }
  }]);
  return UserProfile;
}(_react.Component);

UserProfile.defaultProps = {
  agencies: [],
  user: {},
  update_field: function update_field() {
    return new _promise2.default(function (resolve, reject) {
      return resolve();
    });
  },
  update_instant_job_field: function update_instant_job_field() {
    return new _promise2.default(function (resolve, reject) {
      return resolve();
    });
  }
};

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

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

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

    _this5.render_field = _this5.render_field.bind(_this5);
    return _this5;
  }

  (0, _createClass3.default)(Agency, [{
    key: 'render_field',
    value: function render_field(field) {
      return _react2.default.createElement(Field, (0, _extends3.default)({}, field, { key: field.id }));
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          fields = _props.fields,
          title = _props.title,
          name = _props.name,
          subtitle = _props.subtitle;

      return _react2.default.createElement(
        'div',
        { className: cx('user-profile__agency') },
        _react2.default.createElement(
          'div',
          { className: cx('user-profile__agency-header') },
          _react2.default.createElement(
            'div',
            { className: cx('user-profile__agency-header-title') },
            name ? 'Informations pour ' + name : title
          ),
          _react2.default.createElement(
            'div',
            { className: cx('user-profile__agency-header-subtitle') },
            subtitle || "Ces informations sont demandées spécifiquement par cet employeur et ne sont pas partagées avec vos autrs employeurs."
          )
        ),
        fields.map(this.render_field)
      );
    }
  }]);
  return Agency;
}(_react.Component);

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

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

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

    _this6.state = {
      synchronisations: {},
      synchronized: true
    };
    _this6.idGenerator = 1, _this6.render_indicator = _this6.render_indicator.bind(_this6);
    _this6.render_content = _this6.render_content.bind(_this6);
    return _this6;
  }

  (0, _createClass3.default)(Field, [{
    key: 'render_indicator',
    value: function render_indicator() {
      var state = void 0,
          icon = void 0;
      var _props2 = this.props,
          locked = _props2.locked,
          empty = _props2.empty;

      var synchronized = (0, _utilities.empty_set)(this.state.synchronisations);
      if (locked) {
        state = 'locked';
        icon = _react2.default.createElement(_md.MdLock, null);
      } else if (!synchronized) {
        state = 'synchronizing';
        icon = _react2.default.createElement(_md.MdCached, null);
      } else if (empty) {
        state = 'empty';
      } else {
        state = 'synchronized';
        icon = _react2.default.createElement(_md.MdDone, null);
      }
      return _react2.default.createElement(
        'div',
        { className: cx('user-profile__field-header-indicator', 'user-profile__field-header-indicator_' + state) },
        icon
      );
    }
  }, {
    key: 'render_content',
    value: function render_content() {
      var _this7 = this;

      var field = this.props;
      var props = (0, _extends3.default)({}, field, {
        update: function update() {
          var synchronisation_id = _this7.idGenerator++;
          var toggle_synchronisation = function toggle_synchronisation() {
            return _this7.setState((0, _base.toggle_item_id)(_this7.state, "synchronisations", synchronisation_id));
          };
          toggle_synchronisation();
          field.update.apply(field, arguments).then(toggle_synchronisation);
        }
      });
      switch (field.category) {
        case 'comment':
          return _react2.default.createElement(CommentField, props);
        case 'non_exclusive':
          return _react2.default.createElement(NonExclusiveField, props);
        case 'file':
          return _react2.default.createElement(FileField, props);
        case 'exclusive':
          return _react2.default.createElement(ExclusiveField, props);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var name = this.props.name;

      return _react2.default.createElement(
        'div',
        { className: cx('user-profile__field') },
        _react2.default.createElement(
          'div',
          { className: cx('user-profile__field-header') },
          name,
          this.render_indicator()
        ),
        this.render_content()
      );
    }
  }]);
  return Field;
}(_react.Component);

var CommentField = function (_Component4) {
  (0, _inherits3.default)(CommentField, _Component4);

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

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

    _this8.state = {
      comment: props.comment,
      focused: false
    };
    _this8.onFocus = _this8.onFocus.bind(_this8);
    _this8.onChange = _this8.onChange.bind(_this8);
    _this8.onBlur = _this8.onBlur.bind(_this8);
    return _this8;
  }

  (0, _createClass3.default)(CommentField, [{
    key: 'onFocus',
    value: function onFocus() {
      this.setState({ focused: true });
      this.initial_comment = this.state.comment;
    }
  }, {
    key: 'onChange',
    value: function onChange(_ref6) {
      var comment = _ref6.target.value;

      if (!this.state.focused && comment != this.state.comment) {
        this.props.update(comment);
      }
      this.setState({ comment: comment });
    }
  }, {
    key: 'onBlur',
    value: function onBlur() {
      this.setState({ focused: false });
      if (this.state.comment != this.initial_comment) {
        this.props.update(this.state.comment);
      }
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(_ref7) {
      var comment = _ref7.comment;

      if (comment != this.state.comment && !this.state.focused) {
        this.setState({ comment: comment });
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _state = this.state,
          comment = _state.comment,
          focused = _state.focused;

      var className = cx('user-profile__field-input', { 'user-profile__field-input_empty': !comment, 'user-profile__field-input_focused': focused });
      if (this.props.locked) {
        return _react2.default.createElement(
          'div',
          { className: className },
          comment
        );
      } else {
        return _react2.default.createElement('input', {
          className: className,
          type: 'text',
          value: comment || "",
          onFocus: this.onFocus,
          onChange: this.onChange,
          onBlur: this.onBlur
        });
      }
    }
  }]);
  return CommentField;
}(_react.Component);

CommentField.defaultProps = {
  comment: ""
};

var NonExclusiveField = function (_Component5) {
  (0, _inherits3.default)(NonExclusiveField, _Component5);

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

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

    _this9.state = {
      width: 500
    };
    _this9.update_width = _this9.update_width.bind(_this9);
    _this9.render_value = _this9.render_value.bind(_this9);
    _this9.toggle_value = _this9.toggle_value.bind(_this9);
    return _this9;
  }

  (0, _createClass3.default)(NonExclusiveField, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.update_width();
      this.cancel_update_width = _event_system2.default.register("window_resize", this.update_width);
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.cancel_update_width();
    }
  }, {
    key: 'update_width',
    value: function update_width() {
      var width = $(this.values_container).width();
      if (width != this.state.width) {
        this.setState({ width: width });
      }
    }
  }, {
    key: 'toggle_value',
    value: function toggle_value(index) {
      var _this10 = this;

      return function () {
        var _props3 = _this10.props,
            values = _props3.values,
            update = _props3.update;

        update([].concat((0, _toConsumableArray3.default)(values.slice(0, index)), [(0, _utilities.property_toggler)('selected')(values[index])], (0, _toConsumableArray3.default)(values.slice(index + 1))));
      };
    }
  }, {
    key: 'render_value',
    value: function render_value(width) {
      var _this11 = this;

      return function (_ref8, index) {
        var id = _ref8.id,
            name = _ref8.name,
            selected = _ref8.selected;
        return _react2.default.createElement(
          'div',
          {
            onClick: _this11.toggle_value(index),
            key: id,
            className: cx('user-profile__field-values-value', { 'user-profile__field-values-value_selected': selected }),
            style: { width: width }
          },
          _react2.default.createElement(
            'div',
            { className: cx('user-profile__field-values-value-outline') },
            _react2.default.createElement(
              'div',
              { className: cx('user-profile__field-values-value-name') },
              name
            ),
            _react2.default.createElement(
              'div',
              { className: cx('user-profile__field-values-value-icon') },
              selected ? _react2.default.createElement(_md.MdDone, null) : null
            )
          )
        );
      };
    }
  }, {
    key: 'render',
    value: function render() {
      var _this12 = this;

      var available_width = this.state.width;
      var columns_number = Math.floor(available_width / value_width) || 1;
      var width = 100 / columns_number + '%';
      var values = this.props.values;

      return _react2.default.createElement(
        'div',
        {
          ref: function ref(values_container) {
            return _this12.values_container = values_container;
          },
          className: cx('user-profile__field-values')
        },
        values.map(this.render_value(width))
      );
    }
  }]);
  return NonExclusiveField;
}(_react.Component);

var FileField = function (_Component6) {
  (0, _inherits3.default)(FileField, _Component6);

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

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

    (0, _auto_bind2.default)(_this13);
    return _this13;
  }

  (0, _createClass3.default)(FileField, [{
    key: 'on_files_drop',
    value: function on_files_drop(_ref9) {
      var _ref10 = (0, _slicedToArray3.default)(_ref9, 1),
          file = _ref10[0];

      this.props.update(file);
    }
  }, {
    key: 'view',
    value: function view() {
      var _props$file = this.props.file,
          url = _props$file.url,
          name = _props$file.name;

      (0, _utilities.download_file)(url, name);
    }
  }, {
    key: 'render',
    value: function render() {
      var file = this.props.file;

      if (file) {
        if (file.uploading) {
          return _react2.default.createElement(_progress_indicator2.default, { small: true, className: cx('user-profile__field-dropzone'), completed: file.uploading, total: 100, text: '##%' });
        } else {
          var updated_at = file.updated_at,
              url = file.url;

          return _react2.default.createElement(
            'div',
            { className: cx('user-profile__field-file') },
            _react2.default.createElement(
              'div',
              { onClick: this.view, className: cx('user-profile__field-file-preview') },
              _react2.default.createElement(_md.MdInsertDriveFile, null)
            ),
            _react2.default.createElement(
              'div',
              { className: cx('user-profile__field-file-updated-at') },
              'Mis \xE0 jour ',
              _react2.default.createElement(
                _time_ago2.default,
                null,
                updated_at
              )
            ),
            _react2.default.createElement(
              _reactDropzone2.default,
              { style: {}, onDrop: this.on_files_drop },
              _react2.default.createElement(
                'div',
                { className: cx('user-profile__field-file-update') },
                'Choisir un autre fichier'
              )
            )
          );
        }
      } else {
        return _react2.default.createElement(
          'div',
          { className: cx('user-profile__field-dropzone') },
          _react2.default.createElement(
            _file_dropzone2.default,
            { on_files_drop: this.on_files_drop },
            'D\xE9poser un fichier'
          )
        );
      }
    }
  }]);
  return FileField;
}(_react.Component);

var ExclusiveField = function (_Component7) {
  (0, _inherits3.default)(ExclusiveField, _Component7);

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

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

    (0, _auto_bind2.default)(_this14);
    return _this14;
  }

  (0, _createClass3.default)(ExclusiveField, [{
    key: 'update',
    value: function update(values) {
      var _this15 = this;

      var selected_value_id = this.get_selected_value_id();
      values.forEach(function (value) {
        if (value.id == selected_value_id && !value.selected) {
          return _this15.props.update(null);
        }
        if (value.selected && value.id != selected_value_id) {
          return _this15.props.update(value);
        }
      });
      return new _promise2.default(function (resolve, reject) {
        return resolve();
      });
    }
  }, {
    key: 'get_selected_value_id',
    value: function get_selected_value_id() {
      var value = this.props.value;

      var _ref11 = value || {},
          id = _ref11.id;

      return id;
    }
  }, {
    key: 'render',
    value: function render() {
      var values = this.props.values;

      var selected_value_id = this.get_selected_value_id();
      return _react2.default.createElement(NonExclusiveField, {
        values: values.map(function (value) {
          return (0, _extends3.default)({}, value, { selected: value.id == selected_value_id });
        }),
        update: this.update
      });
    }
  }]);
  return ExclusiveField;
}(_react.Component);

exports.default = UserProfile;