instantjob-recruiter-client
Version:
a set of tools for creating an instantjob recruiter react client
595 lines (507 loc) • 18.9 kB
JavaScript
'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 _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
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 padding: 5px 0;\n display: flex;\n'], ['\n padding: 5px 0;\n display: flex;\n']),
_templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n ', '\n color: ', ';\n text-decoration: underline;\n padding: 0 5px;\n'], ['\n ', '\n color: ', ';\n text-decoration: underline;\n padding: 0 5px;\n']);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _styledComponents = require('styled-components');
var _styledComponents2 = _interopRequireDefault(_styledComponents);
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 _time_ago = require('components/utils/time_ago');
var _time_ago2 = _interopRequireDefault(_time_ago);
var _more_button = require('./more_button');
var _more_button2 = _interopRequireDefault(_more_button);
var _file_dropzone = require('components/file_dropzone');
var _file_dropzone2 = _interopRequireDefault(_file_dropzone);
var _code_editor = require('components/code_editor');
var _code_editor2 = _interopRequireDefault(_code_editor);
var _store = require('common/store');
var _store2 = _interopRequireDefault(_store);
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 _styles = require('common/styles');
var _utilities = require('common/utilities');
var _fields = require('common/fields');
var _display = require('actions/display');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var cx = _bind2.default.bind(require('../styles/fields_table.scss'));
var value_width = 300;
var icon_width = 40;
var FieldsTable = function (_Component) {
(0, _inherits3.default)(FieldsTable, _Component);
function FieldsTable(props) {
(0, _classCallCheck3.default)(this, FieldsTable);
var _this = (0, _possibleConstructorReturn3.default)(this, (FieldsTable.__proto__ || (0, _getPrototypeOf2.default)(FieldsTable)).call(this, props));
_this.state = {
width: 300
};
_this.update_width = _this.update_width.bind(_this);
_this.render_option = _this.render_option.bind(_this);
_this.render_field = _this.render_field.bind(_this);
return _this;
}
(0, _createClass3.default)(FieldsTable, [{
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.fields_table).width();
if (width != this.state.width) {
this.setState({ width: width });
}
}
}, {
key: 'render_option',
value: function render_option(_ref, index) {
var name = _ref.name;
return _react2.default.createElement(
'div',
{ key: index, className: cx('fields-table__header-options-option') },
name
);
}
}, {
key: 'render_field',
value: function render_field(field) {
return _react2.default.createElement(Field, (0, _extends3.default)({}, field, { field: field, width: this.state.width, key: field.id, options: this.props.options }));
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
return _react2.default.createElement(
'div',
{ ref: function ref(fields_table) {
return _this2.fields_table = fields_table;
}, className: cx('fields-table') },
_react2.default.createElement(
'div',
{ className: cx('fields-table__header') },
_react2.default.createElement(
'div',
{ className: cx('fields-table__header-name') },
'Nom du champ'
),
_react2.default.createElement(
'div',
{ className: cx('fields-table__header-options') },
this.props.options.map(this.render_option)
)
),
this.props.fields.length ? _react2.default.createElement(
'div',
{ className: cx('fields-table__fields') },
this.props.fields.map(this.render_field)
) : _react2.default.createElement(
'div',
{ className: cx('fields-table__fields-placeholder') },
'Il n\'y a aucun champ.'
)
);
}
}]);
return FieldsTable;
}(_react.Component);
var Field = function (_Component2) {
(0, _inherits3.default)(Field, _Component2);
function Field(props) {
(0, _classCallCheck3.default)(this, Field);
var _this3 = (0, _possibleConstructorReturn3.default)(this, (Field.__proto__ || (0, _getPrototypeOf2.default)(Field)).call(this, props));
_this3.state = {
open: false,
editing: false
};
(0, _auto_bind2.default)(_this3);
return _this3;
}
(0, _createClass3.default)(Field, [{
key: 'toggle_editing',
value: function toggle_editing() {
this.setState(function (_ref2) {
var editing = _ref2.editing;
return { editing: !editing };
});
}
}, {
key: 'toggle_open',
value: function toggle_open() {
if (!this.props.locked && this.props.editable) {
this.setState(function (_ref3) {
var open = _ref3.open;
return { open: !open };
});
}
}
}, {
key: 'toggle_option',
value: function toggle_option(toggle) {
var _this4 = this;
if (this.props.locked) {
return null;
} else {
return function (event) {
event.stopPropagation();
if (_this4.props.editable) {
(0, _fields.action_update_field)(toggle(_this4.props.field));
} else {
_this4.props.update(toggle(_this4.props.field));
}
};
}
}
}, {
key: 'on_change_name',
value: function on_change_name(name) {
this.props.update({ name: name });
this.toggle_editing();
}
}, {
key: 'update_code',
value: function update_code(code) {
this.props.update({ code: code });
}
}, {
key: 'stop_recycling',
value: function stop_recycling() {
this.props.update({ recycled: false });
}
}, {
key: 'create_value',
value: function create_value() {
this.props.create_value();
}
}, {
key: 'update_template',
value: function update_template(_ref4) {
var _ref5 = (0, _slicedToArray3.default)(_ref4, 1),
template = _ref5[0];
var id = this.props.id;
(0, _fields.action_update_field_template)(id, template);
}
}, {
key: 'download_template',
value: function download_template() {
var _props$template = this.props.template,
url = _props$template.url,
name = _props$template.name;
(0, _utilities.download_file)(url, name);
}
}, {
key: 'render_option',
value: function render_option(_ref6, index) {
var get = _ref6.get,
toggle = _ref6.toggle;
return _react2.default.createElement(
'div',
{ key: index, onClick: this.toggle_option(toggle), className: cx('fields-table__field-header-options-option') },
get(this.props.field) ? _react2.default.createElement(_md.MdCheckBox, null) : _react2.default.createElement(_md.MdCheckBoxOutlineBlank, null)
);
}
}, {
key: 'render_value',
value: function render_value(value) {
var available_width = this.props.width - 2 * icon_width - 2;
var columns_number = Math.floor(available_width / value_width) || 1;
var width = available_width / columns_number;
var id = value.id;
return _react2.default.createElement(Value, (0, _extends3.default)({}, value, { width: width, key: id, field_name: this.props.name }));
}
}, {
key: 'render_details',
value: function render_details() {
var _props = this.props,
category = _props.category,
template = _props.template,
values = _props.values,
code = _props.code;
switch (category) {
case "exclusive":
case "non_exclusive":
return [].concat((0, _toConsumableArray3.default)(values.map(this.render_value)), [_react2.default.createElement(
_button2.default,
{
key: 'new-value',
discreet: true,
icon: _md.MdAddCircle,
className: cx('fields-table__field-details-new-value'),
onClick: this.create_value
},
'Nouvelle Valeur'
)]);
case "comment":
return _react2.default.createElement(
'div',
{ className: cx('fields-table__field-details-simple') },
'Champ de commentaire'
);
case "file":
return _react2.default.createElement(
'div',
{ className: cx('fields-table__field-details-simple') },
'Document'
);
case "template":
return _react2.default.createElement(
'div',
{ className: cx('fields-table__field-details-simple', 'fields-table__field-details-simple_template') },
template.url ? _react2.default.createElement(
DocumentInformation,
null,
'Mis \xE0 jour\xA0',
_react2.default.createElement(
_time_ago2.default,
null,
template.updated_at
),
_react2.default.createElement(
Download,
{ onClick: this.download_template },
'Voir'
)
) : null,
_react2.default.createElement(
_file_dropzone2.default,
{ on_files_drop: this.update_template },
'Modifier le mod\xE8le de document'
)
);
case "computed":
return _react2.default.createElement(
'div',
{ className: cx('fields-table__field-details-simple') },
_react2.default.createElement(_code_editor2.default, {
value: code,
on_change: this.update_code
})
);
default:
return _react2.default.createElement(
'span',
{ style: { color: 'pink', padding: '8px 0' } },
category
);
}
}
}, {
key: 'render',
value: function render() {
var _state = this.state,
open = _state.open,
editing = _state.editing;
var _props2 = this.props,
editable = _props2.editable,
locked = _props2.locked,
for_entity = _props2.for_entity,
recycled = _props2.recycled,
options = _props2.options,
name = _props2.name,
category = _props2.category,
values = _props2.values,
template = _props2.template,
remove = _props2.remove,
show_associated_values = _props2.show_associated_values;
var error_message = "";
switch (category) {
case 'exclusive':
case 'non_exclusive':
if ((0, _utilities.empty_array)(values)) {
error_message = "Ce champ n'a pas de valeur.";
}
break;
case 'template':
if (!template.url) {
error_message = "Le fichier modèle n'a pas été téléchargé.";
}
break;
}
return _react2.default.createElement(
'div',
{
className: cx('fields-table__field', {
'fields-table__field_open': open,
'fields-table__field_locked': locked,
'fields-table__field_unlocked': !locked,
'fields-table__field_editable': editable
})
},
_react2.default.createElement(
'div',
{ onClick: this.toggle_open, className: cx('fields-table__field-header') },
editing ? _react2.default.createElement(Input, { value: name, on_change: this.on_change_name, auto_focus: true }) : _react2.default.createElement(
'div',
{ className: cx('fields-table__field-header-name') },
_react2.default.createElement(
'div',
{ className: cx('fields-table__field-header-name-label') },
name
),
editable && !locked ? _react2.default.createElement(_more_button2.default, {
start_edit: this.toggle_editing,
on_delete: recycled ? null : remove,
stop_recycling: recycled ? this.stop_recycling : null,
show_associated_values: show_associated_values
}) : null,
error_message ? _react2.default.createElement(
'div',
{ className: cx('fields-table__field-header-name-warning') },
_react2.default.createElement(_md.MdWarning, null),
_react2.default.createElement(
'span',
{ className: cx('fields-table__field-header-name-warning-label') },
error_message
)
) : null
),
_react2.default.createElement(
'div',
{ className: cx('fields-table__field-header-options') },
options.map(this.render_option)
),
_react2.default.createElement(
'div',
{ className: cx('fields-table__field-header-toggle-open') },
locked ? _react2.default.createElement(_md.MdLock, null) : editable ? open ? _react2.default.createElement(_md.MdKeyboardArrowUp, null) : _react2.default.createElement(_md.MdKeyboardArrowDown, null) : null
)
),
open ? _react2.default.createElement(
'div',
{ className: cx('fields-table__field-details') },
this.render_details()
) : null
);
}
}]);
return Field;
}(_react.Component);
Field.defaultProps = { editable: true, locked: false };
var Value = function (_Component3) {
(0, _inherits3.default)(Value, _Component3);
function Value(props) {
(0, _classCallCheck3.default)(this, Value);
var _this5 = (0, _possibleConstructorReturn3.default)(this, (Value.__proto__ || (0, _getPrototypeOf2.default)(Value)).call(this, props));
(0, _auto_bind2.default)(_this5);
return _this5;
}
(0, _createClass3.default)(Value, [{
key: 'render',
value: function render() {
var _props3 = this.props,
options = _props3.options,
name = _props3.name,
width = _props3.width,
show_associated_values = _props3.show_associated_values;
return _react2.default.createElement(
'div',
{ className: cx('fields-table__value'), style: { width: width } },
_react2.default.createElement(
'div',
{ onClick: show_associated_values, className: cx('fields-table__value-label', { 'fields-table__value-label_empty': !name }) },
name || "Valeur sans nom"
)
);
}
}]);
return Value;
}(_react.Component);
var Input = function (_Component4) {
(0, _inherits3.default)(Input, _Component4);
function Input(props) {
(0, _classCallCheck3.default)(this, Input);
var _this6 = (0, _possibleConstructorReturn3.default)(this, (Input.__proto__ || (0, _getPrototypeOf2.default)(Input)).call(this, props));
_this6.state = {
value: props.value
};
(0, _auto_bind2.default)(_this6);
return _this6;
}
(0, _createClass3.default)(Input, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(_ref7) {
var value = _ref7.value;
if (value != this.props.value) {
this.setState({ value: value });
}
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
if (this.props.auto_focus) {
this.input.focus();
}
}
}, {
key: 'onChange',
value: function onChange(_ref8) {
var value = _ref8.target.value;
if ((0, _utilities.array_contains)([',', ';'], value.slice(-1))) {
_store2.default.dispatch((0, _display.alert_warning)('Le caract\xE8re \'' + value.slice(-1) + '\' n\'est pas autoris\xE9 dans le nom d\'un champ.'));
value = value.slice(0, -1);
}
this.setState({ value: value });
}
}, {
key: 'onBlur',
value: function onBlur() {
this.props.on_change(this.state.value.trim());
}
}, {
key: 'render',
value: function render() {
var _this7 = this;
return _react2.default.createElement('input', {
ref: function ref(input) {
return _this7.input = input;
},
type: 'text',
placeholder: 'Nom',
className: cx('fields-table__input'),
value: this.state.value || "",
onChange: this.onChange,
onBlur: this.onBlur
});
}
}]);
return Input;
}(_react.Component);
FieldsTable.defaultProps = {
fields: [],
options: []
};
exports.default = FieldsTable;
var DocumentInformation = _styledComponents2.default.div(_templateObject);
var Download = _styledComponents2.default.div(_templateObject2, _styles.link, (0, _styles.color)('black', 'bright'));