instantjob-recruiter-client/dist/components/popovers/new_field_form.js

a set of tools for creating an instantjob recruiter react client

'use strict';

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

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _bind2 = _interopRequireDefault(_bind);

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

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

var _button2 = _interopRequireDefault(_button);

var _exclusive_field = require('components/exclusive_field');

var _exclusive_field2 = _interopRequireDefault(_exclusive_field);

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

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

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

var _store2 = _interopRequireDefault(_store);

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

var _auto_bind2 = _interopRequireDefault(_auto_bind);

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

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

var examples = {
  user: {
    comment: 'Ex: Num\xE9ro de dossier, Commentaire suite \xE0 l\'entretien, Date de naissance ...',
    non_exclusive: 'Ex: Langue, Comp\xE9tences, \xC9tablissement pr\xE9f\xE9r\xE9 ...',
    exclusive: 'Ex: \xC9quipe, Dossier valid\xE9, Qualification ...',
    file: 'Ex: Titre de s\xE9jour, Carte vitale, RIB ...'
  },
  mission: {
    comment: 'Ex: R\xE9f\xE9rence de la mission, Pr\xE9cisions sur l\'acc\xE8s au lieu, Donn\xE9es de contact ...',
    non_exclusive: 'Ex: Mat\xE9riel requis, Personnes \xE0 contacter ...',
    exclusive: 'Ex: Client, Tenue vestimentaire ...',
    computed: 'Ex: Montant HT, Montant TTC ...'
  },
  mission_proposal: {
    comment: 'Ex: Chiffre d\'affaire r\xE9alis\xE9, Appr\xE9ciation suite \xE0 la mission ...',
    non_exclusive: 'Ex: Comp\xE9tences valid\xE9es ...',
    exclusive: 'Ex: Note sur la mission, Tenue ...',
    template: 'Ex: Contrat de travail, Autorisation d\'acc\xE8s au lieu de la mission ...',
    computed: 'Ex: Nom du contact, Salaire, ...'
  },
  shift: {
    comment: 'Ex: Commentaire, Nombre de clients servis, Bonus ...',
    non_exclusive: 'Ex: Pause, Primes ...',
    exclusive: 'Ex: Panier repas ...',
    computed: 'Ex: Salaire, Prime de dimanche, ...'
  },
  value: {
    comment: 'Ex: Num\xE9ro de t\xE9l\xE9phone ...',
    non_exclusive: 'Ex: Mat\xE9riel demand\xE9 ...',
    exclusive: 'Ex: Type de client ...',
    computed: 'Ex: Adresse compl\xE8te ...'
  },
  workplace: {
    comment: 'Ex: Num\xE9ro de t\xE9l\xE9phone ...',
    non_exclusive: 'Ex: \xC9quipements pr\xE9sents ...',
    exclusive: 'Ex: Client ...'
  },
  deal: {
    computed: 'Ex: Total HT, Total TTC ...',
    template: 'Ex: Devis, Facture ...'
  }
};

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

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

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

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

    _this.state = {
      kind: _this.props.type == "mission" && (0, _utilities.array_from_hash)(_this.props.existing_fields).length > 0 ? "" : "new"
    };
    (0, _auto_bind2.default)(_this);
    return _this;
  }

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

      switch (this.state.kind) {
        case "new":
          return _react2.default.createElement(New, this.props);
        case "recycled":
          return _react2.default.createElement(Recycled, this.props);
        default:
          return _react2.default.createElement(
            'div',
            { className: cx('new-field-form') },
            _react2.default.createElement(
              'div',
              { className: cx('new-field-form__mission', 'new-field-form__mission_choice') },
              _react2.default.createElement(
                'span',
                null,
                'Quel genre de champ voulez-vous cr\xE9er ?'
              ),
              _react2.default.createElement(
                'div',
                { className: cx('new-field-form__mission__buttons') },
                _react2.default.createElement(
                  'div',
                  { className: cx('new-field-form__mission__buttons__button') },
                  _react2.default.createElement(
                    _button2.default,
                    { onClick: function onClick() {
                        return _this2.setState({ kind: "new" });
                      } },
                    'Cr\xE9er un champ mission sp\xE9cifique'
                  )
                ),
                _react2.default.createElement(
                  'div',
                  { className: cx('new-field-form__mission__buttons__description') },
                  'Vous pourrez ainsi renseigner des informations sur vos missions et choisir de les partager avec les candidats.'
                )
              ),
              _react2.default.createElement(
                'div',
                { className: cx('new-field-form__mission__buttons') },
                _react2.default.createElement(
                  'div',
                  { className: cx('new-field-form__mission__buttons__button') },
                  _react2.default.createElement(
                    _button2.default,
                    { onClick: function onClick() {
                        return _this2.setState({ kind: "recycled" });
                      } },
                    'R\xE9utiliser un champ candidat'
                  )
                ),
                _react2.default.createElement(
                  'div',
                  { className: cx('new-field-form__mission__buttons__description') },
                  'Cela permet de r\xE9utiliser dans la fiche descriptive de la mission un champ utilis\xE9 pour filtrer vos candidats'
                )
              )
            )
          );
      }
    }
  }]);
  return NewFieldForm;
}(_react.Component);

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

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

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

    _this3.state = {
      id: false,
      shared_with_user: false
    };
    (0, _auto_bind2.default)(_this3);
    return _this3;
  }

  (0, _createClass3.default)(Recycled, [{
    key: 'toggle_shared_with_user',
    value: function toggle_shared_with_user() {
      this.setState((0, _utilities.property_toggler)("shared_with_user"));
    }
  }, {
    key: 'create_field',
    value: function create_field() {
      this.props.recycle_field(this.state);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this4 = this;

      return _react2.default.createElement(
        'div',
        { className: cx('new-field-form__mission') },
        _react2.default.createElement(
          'div',
          null,
          _react2.default.createElement(_exclusive_field2.default, {
            values: (0, _utilities.array_from_hash)(this.props.existing_fields),
            selected: this.state.id,
            on_clear: function on_clear() {
              return _this4.setState({ id: false });
            },
            name: "Quel champ voulez-vous réutiliser ?",
            on_select_value: function on_select_value(id) {
              return _this4.setState({ id: id });
            },
            allow_creating_values: false
          })
        ),
        _react2.default.createElement(Setting, {
          label: 'Visible par le candidat',
          toggle: this.toggle_shared_with_user
        }),
        _react2.default.createElement(
          'div',
          { className: cx('new-field-form__create-button') },
          _react2.default.createElement(
            _button2.default,
            { disabled: !this.state.id, onClick: this.create_field, icon: _md.MdDone },
            'Cr\xE9er le nouveau champ'
          )
        )
      );
    }
  }]);
  return Recycled;
}(_react.Component);

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

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

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

    _this5.state = {
      name: "",
      category: "non_exclusive",
      shared_with_user: true,
      shared_by_user: true
    };
    (0, _auto_bind2.default)(_this5);
    return _this5;
  }

  (0, _createClass3.default)(New, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.name_input.focus();
    }
  }, {
    key: 'create_field',
    value: function create_field() {
      this.props.create_field(this.state);
    }
  }, {
    key: 'update_field',
    value: function update_field(state) {
      this.setState(state);
    }
  }, {
    key: 'get_settings',
    value: function get_settings() {
      var _this6 = this;

      switch (this.props.type) {
        case "user":
          return [{
            label: "Renseigné par le candidat",
            initial: this.state.shared_by_user,
            toggle: function toggle() {
              return _this6.setState((0, _utilities.property_toggler)("shared_by_user"));
            }
          }];
        case "mission":
          return [{
            label: "Visible par le candidat",
            initial: this.state.shared_with_user,
            toggle: function toggle() {
              return _this6.setState((0, _utilities.property_toggler)("shared_with_user"));
            }
          }];
        default:
          return [];
      }
    }
  }, {
    key: 'render_setting',
    value: function render_setting(setting, index) {
      return _react2.default.createElement(Setting, (0, _extends3.default)({ key: index }, setting));
    }
  }, {
    key: 'render',
    value: function render() {
      var _this7 = this;

      var type = this.props.type;
      var _state = this.state,
          name = _state.name,
          category = _state.category;

      return _react2.default.createElement(
        'div',
        { className: cx('new-field-form', 'new-field-form_new') },
        _react2.default.createElement(
          'div',
          { className: cx('new-field-form__parameters') },
          _react2.default.createElement(FieldNameInput, { ref: function ref(name_input) {
              return _this7.name_input = name_input;
            }, on_change: this.update_field }),
          _react2.default.createElement(FieldCategorySelection, {
            on_change: this.update_field,
            options: (0, _keys2.default)(examples[type]),
            examples: examples[type][category]
          })
        ),
        this.get_settings().map(this.render_setting),
        _react2.default.createElement(
          'div',
          { className: cx('new-field-form__create-button') },
          _react2.default.createElement(
            _button2.default,
            { disabled: name.trim().length == 0, onClick: this.create_field, icon: _md.MdDone },
            'Cr\xE9er le nouveau champ'
          )
        )
      );
    }
  }]);
  return New;
}(_react.Component);

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

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

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

    _this8.state = {
      name: ""
    };
    (0, _auto_bind2.default)(_this8);
    return _this8;
  }

  (0, _createClass3.default)(FieldNameInput, [{
    key: 'focus',
    value: function focus() {
      this.input.focus();
    }
  }, {
    key: 'onChange',
    value: function onChange(_ref) {
      var name = _ref.target.value;

      var state = { name: name };
      this.setState(state);
      this.props.on_change(state);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this9 = this;

      return _react2.default.createElement('input', {
        ref: function ref(input) {
          return _this9.input = input;
        },
        className: cx('new-field-form__name-input'),
        type: 'text',
        placeholder: "Nom",
        value: this.state.name,
        onChange: this.onChange
      });
    }
  }]);
  return FieldNameInput;
}(_react.Component);

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

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

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

    _this10.state = {
      category: 'non_exclusive'
    };
    (0, _auto_bind2.default)(_this10);
    return _this10;
  }

  (0, _createClass3.default)(FieldCategorySelection, [{
    key: 'on_change',
    value: function on_change(category) {
      var state = { category: category };
      this.setState(state);
      this.props.on_change(state);
    }
  }, {
    key: 'make_option',
    value: function make_option(id) {
      var names = {
        comment: 'Texte libre',
        non_exclusive: 'Multi-valeur à choix multiples',
        exclusive: 'Multi-valeur à choix unique',
        file: 'Document stocké',
        template: 'Document g\xE9n\xE9r\xE9 \xE0 partir d\'un mod\xE8le',
        computed: 'Valeur calculée'
      };
      return { id: id, name: names[id] };
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          options = _props.options,
          examples = _props.examples;

      return _react2.default.createElement(
        'div',
        { className: cx('new-field-form__category-selection') },
        _react2.default.createElement(_exclusive_field2.default, {
          values: options.map(this.make_option),
          selected: this.state.category,
          name: "Catégorie",
          on_select_value: this.on_change,
          allow_creating_values: false,
          searchable: false
        }),
        _react2.default.createElement(
          'div',
          { className: cx('new-field-form__category-selection-examples') },
          examples
        )
      );
    }
  }]);
  return FieldCategorySelection;
}(_react.Component);

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

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

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

    _this11.state = {
      checked: props.initial
    };
    (0, _auto_bind2.default)(_this11);
    return _this11;
  }

  (0, _createClass3.default)(Setting, [{
    key: 'toggle',
    value: function toggle() {
      this.setState((0, _utilities.property_toggler)('checked'));
      this.props.toggle();
    }
  }, {
    key: 'render',
    value: function render() {
      var label = this.props.label;

      return _react2.default.createElement(
        'div',
        { onClick: this.toggle, className: cx('new-field-form__setting', { 'new-field-form__setting_checked': this.state.checked }) },
        this.state.checked ? _react2.default.createElement(_md.MdCheckBox, null) : _react2.default.createElement(_md.MdCheckBoxOutlineBlank, null),
        _react2.default.createElement(
          'div',
          { className: cx('new-field-form__setting-label') },
          label
        )
      );
    }
  }]);
  return Setting;
}(_react.Component);

NewFieldForm.defaultProps = {
  create_field: function create_field() {},

  existing_fields: {},
  type: 'mission'
};

exports.default = NewFieldForm;