instantjob-recruiter-client
Version:
a set of tools for creating an instantjob recruiter react client
518 lines (438 loc) • 19.7 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 _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 _templateObject = (0, _taggedTemplateLiteral3.default)(['\n flex: 1;\n ', '\n display: flex;\n align-items: center;\n padding-right: 5px;\n'], ['\n flex: 1;\n ', '\n display: flex;\n align-items: center;\n padding-right: 5px;\n']),
_templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n flex: 1;\n display: flex;\n align-items: stretch;\n justify-content: space-between;\n flex-direction: column;\n margin-left: 10px;\n height: 50px;\n'], ['\n flex: 1;\n display: flex;\n align-items: stretch;\n justify-content: space-between;\n flex-direction: column;\n margin-left: 10px;\n height: 50px;\n']),
_templateObject3 = (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']),
_templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n font-size: 18px;\n'], ['\n font-size: 18px;\n']),
_templateObject5 = (0, _taggedTemplateLiteral3.default)(['\n display: flex;\n align-items: center;\n'], ['\n display: flex;\n align-items: center;\n']),
_templateObject6 = (0, _taggedTemplateLiteral3.default)(['\n display: flex;\n align-items: center;\n margin-left: 10px;\n'], ['\n display: flex;\n align-items: center;\n margin-left: 10px;\n']),
_templateObject7 = (0, _taggedTemplateLiteral3.default)(['\n margin-left: 3px;\n font-size: 16px;\n'], ['\n margin-left: 3px;\n font-size: 16px;\n']),
_templateObject8 = (0, _taggedTemplateLiteral3.default)(['\n display: flex;\n margin-right: 10px;\n'], ['\n display: flex;\n margin-right: 10px;\n']),
_templateObject9 = (0, _taggedTemplateLiteral3.default)(['\n margin-right: 5px;\n'], ['\n margin-right: 5px;\n']),
_templateObject10 = (0, _taggedTemplateLiteral3.default)([''], ['']),
_templateObject11 = (0, _taggedTemplateLiteral3.default)(['\n padding: 5px;\n font-size: 16px;\n'], ['\n padding: 5px;\n font-size: 16px;\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 _reactRouter = require('react-router');
var _last_connection = require('components/icons/last_connection');
var _last_connection2 = _interopRequireDefault(_last_connection);
var _profile_image = require('components/profile_image');
var _profile_image2 = _interopRequireDefault(_profile_image);
var _time_ago = require('components/utils/time_ago');
var _time_ago2 = _interopRequireDefault(_time_ago);
var _percentage = require('components/utils/percentage');
var _percentage2 = _interopRequireDefault(_percentage);
var _tag = require('components/utils/tag');
var _tag2 = _interopRequireDefault(_tag);
var _filterable_list = require('components/filterable_list/filterable_list');
var _filterable_list2 = _interopRequireDefault(_filterable_list);
var _make_filter_maker_from_field = require('components/filterable_list/make_filter_maker_from_field');
var _shared = require('components/filterable_list/shared');
var _persistent_state = require('common/persistent_state');
var _persistent_state2 = _interopRequireDefault(_persistent_state);
var _users = require('common/users');
var _auto_bind = require('common/auto_bind');
var _auto_bind2 = _interopRequireDefault(_auto_bind);
var _styles = require('common/styles');
var _utilities = require('common/utilities');
var _moment = require('common/moment');
var _moment2 = _interopRequireDefault(_moment);
var _user_missions = require('selectors/user_missions');
var _workplaces = require('selectors/workplaces');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function make_sort_by_distance(setState) {
return function (place) {
return (0, _make_filter_maker_from_field.get_filter_on_click)('place_' + place.latitude + '_' + place.longitude, setState, function (item) {
var user_distance = (0, _utilities.distance)(item, place);
if (user_distance === null) {
return 1e9;
} else {
return user_distance;
}
});
};
}
var UsersList = function (_Component) {
(0, _inherits3.default)(UsersList, _Component);
function UsersList(props) {
(0, _classCallCheck3.default)(this, UsersList);
var _this = (0, _possibleConstructorReturn3.default)(this, (UsersList.__proto__ || (0, _getPrototypeOf2.default)(UsersList)).call(this, props));
_this.state = _persistent_state2.default.get(props.persistent_state_key, (0, _extends3.default)({}, _filterable_list2.default.initial_state, {
exclusive_filters: {
status: {
'mail': true,
'active': true
}
},
order_by: function order_by(_ref) {
var last_connection = _ref.last_connection;
return last_connection ? -(0, _moment2.default)(last_connection).valueOf() : 0;
},
workplace: props.workplace,
radius_filter: null
}));
(0, _auto_bind2.default)(_this);
return _this;
}
(0, _createClass3.default)(UsersList, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.props.innerRef(this);
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
_persistent_state2.default.store(this.props.persistent_state_key, this.state);
}
}, {
key: 'set_state',
value: function set_state(arg) {
this.setState(arg);
}
}, {
key: 'order_by_distance',
value: function order_by_distance() {
make_sort_by_distance(this.set_state)(this.state.workplace)();
}
}, {
key: 'get_selected_count',
value: function get_selected_count(selected_user_ids) {
return (0, _utilities.set_count)((0, _utilities.set_intersection)(selected_user_ids, (0, _utilities.set_from_array)(this.props.users.map((0, _utilities.property_getter)('id')))));
}
}, {
key: 'get_status_filter_maker',
value: function get_status_filter_maker() {
return _filterable_list2.default.make_filter_maker_from_field({
id: 'status',
name: 'Statut',
category: 'exclusive',
value_ids: ['active', 'mail', 'rejected', 'inactive', 'blacklisted', 'invited', 'new'],
get_value_props: function get_value_props(status) {
var selected = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var _make_user_statuses$s = (0, _users.make_user_statuses)(selected ? 'white' : (0, _styles.color)('black', 'light'))[status],
name = _make_user_statuses$s.name,
icon = _make_user_statuses$s.icon;
return {
id: status,
name: _react2.default.createElement(
_tag2.default,
{ icon: icon },
name
)
};
},
get_item_values: function get_item_values(_ref2) {
var status = _ref2.status.status;
return [status];
}
});
}
}, {
key: 'get_missions_count_sort_maker',
value: function get_missions_count_sort_maker() {
return _filterable_list2.default.make_sort_maker({
id: 'missions_count',
name: _react2.default.createElement(
_tag2.default,
{ icon: _react2.default.createElement(_md.MdFlag, null) },
'Missions r\xE9alis\xE9es'
),
compare_with: function compare_with(_ref3) {
var missions_count = _ref3.missions_count;
return -missions_count;
}
});
}
}, {
key: 'get_profile_rate_sort_maker',
value: function get_profile_rate_sort_maker() {
return _filterable_list2.default.make_sort_maker({
id: 'profile_rate',
name: _react2.default.createElement(
_tag2.default,
{ icon: _react2.default.createElement(_md.MdPerson, null) },
'Remplissage du profil'
),
compare_with: function compare_with(_ref4) {
var profile_rate = _ref4.profile_rate;
return -profile_rate;
}
});
}
}, {
key: 'get_place_filter_maker',
value: function get_place_filter_maker() {
return {
keep_item: function keep_item(item, _ref5) {
var workplace = _ref5.workplace,
radius_filter = _ref5.radius_filter;
return !workplace || !radius_filter || (0, _utilities.distance)(item, workplace) < radius_filter * 1000;
},
make_filter_props: function make_filter_props(_ref6) {
var setState = _ref6.setState,
_ref6$state = _ref6.state,
workplace = _ref6$state.workplace,
radius_filter = _ref6$state.radius_filter;
var sort_by_distance = make_sort_by_distance(setState);
return {
id: 'place',
name: 'Distance',
content: _react2.default.createElement(PlaceFilter, {
place: workplace,
radius_filter: radius_filter,
setState: setState,
sort_by_distance: sort_by_distance
}),
onClick: workplace && sort_by_distance(workplace)
};
}
};
}
}, {
key: 'get_workplace_filter_maker',
value: function get_workplace_filter_maker() {
var _props = this.props,
workplaces = _props.workplaces,
user_workplaces_count = _props.user_workplaces_count;
return _filterable_list2.default.make_filter_maker_from_field({
id: 'workplaces',
name: 'Lieux où le candidat a travaillé',
category: 'exclusive',
tolerant: true,
value_ids: (0, _keys2.default)(workplaces),
get_value_props: function get_value_props(workplace_id) {
return workplaces[workplace_id] || {};
},
get_item_values: function get_item_values(_ref7) {
var id = _ref7.id;
return (0, _utilities.array_from_set)(user_workplaces_count[id]);
}
});
}
}, {
key: 'get_filters_and_users',
value: function get_filters_and_users() {
var _props2 = this.props,
users = _props2.users,
fields = _props2.fields;
var name_filter_maker = _filterable_list2.default.make_name_filter_maker('full_name');
var filter_makers = [this.get_status_filter_maker(), name_filter_maker, this.get_missions_count_sort_maker(), this.get_profile_rate_sort_maker(), this.get_place_filter_maker(), this.get_workplace_filter_maker()].concat((0, _toConsumableArray3.default)(fields.map(_filterable_list2.default.make_filter_maker_from_field).filter(Boolean)));
return {
filters: _filterable_list2.default.get_filters(filter_makers, users, this.state, this.set_state),
users: _filterable_list2.default.get_filtered_items(filter_makers, users, this.state),
name_filter: name_filter_maker.make_filter(this.set_state, users, _users.new_users_fuse)
};
}
}, {
key: 'render_user',
value: function render_user(user) {
var _props3 = this.props,
clickable = _props3.clickable,
user_workplaces_count = _props3.user_workplaces_count;
var id = user.id,
first_name = user.first_name,
last_name = user.last_name,
phone_number = user.phone_number,
postal_code = user.postal_code,
missions_count = user.missions_count,
profile_rate = user.profile_rate,
last_connection = user.last_connection,
email = user.email;
var workplace = this.state.workplace;
var user_distance = workplace && (0, _utilities.distance)(user, workplace);
return _react2.default.createElement(
User,
{ onClick: clickable && !user.not_clickable ? function () {
return _reactRouter.browserHistory.push('/users/' + id);
} : null },
_react2.default.createElement(_profile_image2.default, (0, _extends3.default)({ large: true }, user)),
_react2.default.createElement(
Information,
null,
_react2.default.createElement(
Top,
null,
_react2.default.createElement(
Name,
null,
last_name,
' ',
first_name
),
_react2.default.createElement(
Statistics,
null,
[workplace ? { value: user_workplaces_count[id][workplace.id] || 0, icon: _react2.default.createElement(_md.MdBusiness, null) } : null, { value: missions_count, icon: _react2.default.createElement(_md.MdFlag, null) }, { value: _react2.default.createElement(
_percentage2.default,
null,
profile_rate
), icon: _react2.default.createElement(_md.MdPerson, null) }, last_connection ? { value: _react2.default.createElement(
_time_ago2.default,
null,
last_connection
), icon: _react2.default.createElement(_last_connection2.default, null) } : null].filter(Boolean).map(function (_ref8, index) {
var value = _ref8.value,
icon = _ref8.icon;
return _react2.default.createElement(
Statistic,
{ key: index },
value,
_react2.default.createElement(
StatisticIcon,
null,
icon
)
);
})
)
),
_react2.default.createElement(
Bottom,
null,
_react2.default.createElement(
Contacts,
null,
[{ icon: _react2.default.createElement(_md.MdPhone, null), value: phone_number }, { icon: _react2.default.createElement(_md.MdEmail, null), value: email }].map(function (_ref9, index) {
var icon = _ref9.icon,
value = _ref9.value;
return value ? _react2.default.createElement(
Contact,
{ key: index },
_react2.default.createElement(
ContactIcon,
null,
icon
),
value
) : null;
})
),
_react2.default.createElement(
Location,
null,
workplace && user_distance !== null ? (user_distance / 1000).toFixed(1) + ' km' : postal_code
)
)
)
);
}
}, {
key: 'render',
value: function render() {
var _props4 = this.props,
secondary_actions = _props4.secondary_actions,
main_action = _props4.main_action,
selectable = _props4.selectable;
var _get_filters_and_user = this.get_filters_and_users(),
filters = _get_filters_and_user.filters,
users = _get_filters_and_user.users,
name_filter = _get_filters_and_user.name_filter;
return _react2.default.createElement(
_filterable_list2.default,
{
icon: _md.MdPerson,
empty_text: "Aucun candidat",
filters: filters,
name_filter: name_filter,
secondary_actions: secondary_actions,
main_action: main_action,
render_item: this.render_user,
get_selected_count: this.get_selected_count,
selectable: selectable
},
users
);
}
}]);
return UsersList;
}(_react.Component);
UsersList.defaultProps = {
users: [],
fields: [],
clickable: true,
innerRef: function innerRef() {}
};
var PlaceFilter = function PlaceFilter(_ref10) {
var place = _ref10.place,
radius_filter = _ref10.radius_filter,
setState = _ref10.setState,
sort_by_distance = _ref10.sort_by_distance;
function on_place_select(_ref11) {
var address = _ref11.label,
_ref11$location = _ref11.location,
latitude = _ref11$location.lat,
longitude = _ref11$location.lng;
var place = { address: address, latitude: latitude, longitude: longitude };
setState({ place: place });
sort_by_distance(place)();
}
function on_clear_place_input() {
setState({ place: null });
}
function on_radius_change(radius_filter) {
setState({ radius_filter: radius_filter });
}
return _react2.default.createElement(
_shared.FilterContent,
null,
_react2.default.createElement(_shared.FilterInput, {
label: 'Trier en fonction de la distance \xE0',
type: 'place',
on_place_select: on_place_select,
on_clear_place_input: on_clear_place_input,
initial_query: place && place.address || ""
}),
_react2.default.createElement(_shared.FilterInput, {
label: 'Filtrer les candidats au del\xE0 de (km)',
value: radius_filter || "",
onChange: on_radius_change
})
);
};
exports.default = (0, _reactRedux.connect)(function (state) {
return {
workplaces: (0, _workplaces.get_workplaces)(state),
user_workplaces_count: (0, _user_missions.get_user_workplaces_count)(state)
};
})(UsersList);
var User = _styledComponents2.default.div(_templateObject, function (_ref12) {
var onClick = _ref12.onClick;
return onClick ? _styles.link : '';
});
var Information = _styledComponents2.default.div(_templateObject2);
var Top = _styledComponents2.default.div(_templateObject3);
var Name = _styledComponents2.default.div(_templateObject4);
var Statistics = _styledComponents2.default.div(_templateObject5);
var Statistic = _styledComponents2.default.div(_templateObject6);
var StatisticIcon = _styledComponents2.default.div(_templateObject7);
var Bottom = _styledComponents2.default.div(_templateObject3);
var Contacts = _styledComponents2.default.div(_templateObject5);
var Contact = _styledComponents2.default.div(_templateObject8);
var ContactIcon = _styledComponents2.default.div(_templateObject9);
var Location = _styledComponents2.default.div(_templateObject10);
var Status = _styledComponents2.default.div(_templateObject5);
var StatusIcon = _styledComponents2.default.div(_templateObject11);