2019-12-14 14:06:16 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
2019-12-16 14:01:01 +00:00
|
|
|
import { connect } from "react-redux";
|
|
|
|
import { withTranslation } from "react-i18next";
|
|
|
|
import i18n from "./i18n";
|
2019-12-14 14:26:43 +00:00
|
|
|
import AdvancedSelector from "../AdvancedSelector";
|
2019-12-14 14:06:16 +00:00
|
|
|
import { getGroupList } from "../../api/groups";
|
|
|
|
|
|
|
|
class GroupSelector extends React.Component {
|
2019-12-18 11:39:16 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
const { isOpen } = props;
|
|
|
|
this.state = this.getDefaultState(isOpen, []);
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
const { language } = this.props;
|
|
|
|
i18n.changeLanguage(language);
|
|
|
|
|
|
|
|
getGroupList(this.props.useFake)
|
|
|
|
.then(groups => this.setState({ groups: this.convertGroups(groups) }))
|
|
|
|
.catch(error => console.log(error));
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidUpdate(prevProps) {
|
|
|
|
if (this.props.isOpen !== prevProps.isOpen)
|
|
|
|
this.setState({ isOpen: this.props.isOpen });
|
|
|
|
}
|
|
|
|
|
|
|
|
convertGroups = groups => {
|
|
|
|
return groups
|
|
|
|
? groups.map(g => {
|
|
|
|
return {
|
|
|
|
key: g.id,
|
|
|
|
label: g.name,
|
|
|
|
total: 0
|
|
|
|
};
|
|
|
|
})
|
|
|
|
: [];
|
|
|
|
};
|
|
|
|
|
|
|
|
loadNextPage = ({ startIndex, searchValue }) => {
|
|
|
|
console.log(
|
|
|
|
`loadNextPage(startIndex=${startIndex}, searchValue="${searchValue}")`
|
|
|
|
);
|
|
|
|
|
|
|
|
this.setState({ isNextPageLoading: true }, () => {
|
|
|
|
getGroupList(this.props.useFake)
|
|
|
|
.then(groups => {
|
|
|
|
const newOptions = this.convertGroups(groups);
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
hasNextPage: false,
|
|
|
|
isNextPageLoading: false,
|
|
|
|
options: newOptions
|
|
|
|
});
|
|
|
|
})
|
|
|
|
.catch(error => console.log(error));
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
getDefaultState = (isOpen, groups) => {
|
|
|
|
return {
|
|
|
|
isOpen: isOpen,
|
|
|
|
groups,
|
|
|
|
hasNextPage: true,
|
|
|
|
isNextPageLoading: false
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
onSearchChanged = value => {
|
|
|
|
//action("onSearchChanged")(value);
|
|
|
|
console.log("Search group", value);
|
|
|
|
this.setState({ options: [], hasNextPage: true });
|
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const {
|
|
|
|
isOpen,
|
|
|
|
groups,
|
|
|
|
selectedOptions,
|
|
|
|
hasNextPage,
|
|
|
|
isNextPageLoading
|
|
|
|
} = this.state;
|
|
|
|
|
|
|
|
const {
|
|
|
|
id,
|
|
|
|
className,
|
|
|
|
style,
|
|
|
|
isMultiSelect,
|
|
|
|
isDisabled,
|
|
|
|
onSelect,
|
|
|
|
onCancel,
|
2020-01-13 09:48:07 +00:00
|
|
|
t,
|
|
|
|
searchPlaceHolderLabel
|
2019-12-18 11:39:16 +00:00
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<AdvancedSelector
|
|
|
|
id={id}
|
|
|
|
className={className}
|
|
|
|
style={style}
|
|
|
|
options={groups}
|
|
|
|
hasNextPage={hasNextPage}
|
|
|
|
isNextPageLoading={isNextPageLoading}
|
|
|
|
loadNextPage={this.loadNextPage}
|
|
|
|
size={"compact"}
|
|
|
|
displayType={"auto"}
|
|
|
|
selectedOptions={selectedOptions}
|
|
|
|
isOpen={isOpen}
|
|
|
|
isMultiSelect={isMultiSelect}
|
|
|
|
isDisabled={isDisabled}
|
2020-01-13 09:48:07 +00:00
|
|
|
searchPlaceHolderLabel={searchPlaceHolderLabel || t("SearchPlaceholder")}
|
2019-12-18 11:39:16 +00:00
|
|
|
selectButtonLabel={t("AddDepartmentsButtonLabel")}
|
|
|
|
selectAllLabel={t("SelectAllLabel")}
|
|
|
|
emptySearchOptionsLabel={t("EmptySearchOptionsLabel")}
|
|
|
|
emptyOptionsLabel={t("EmptyOptionsLabel")}
|
|
|
|
loadingLabel={t("LoadingLabel")}
|
|
|
|
onSelect={onSelect}
|
|
|
|
onSearchChanged={this.onSearchChanged}
|
|
|
|
onCancel={onCancel}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
2019-12-14 14:06:16 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
GroupSelector.propTypes = {
|
2019-12-16 14:01:01 +00:00
|
|
|
className: PropTypes.oneOf([PropTypes.string, PropTypes.array]),
|
2020-01-13 09:48:07 +00:00
|
|
|
id: PropTypes.string,
|
|
|
|
isDisabled: PropTypes.bool,
|
|
|
|
isMultiSelect: PropTypes.bool,
|
2019-12-16 14:01:01 +00:00
|
|
|
isOpen: PropTypes.bool,
|
2020-01-13 09:48:07 +00:00
|
|
|
language: PropTypes.string,
|
2019-12-18 11:39:16 +00:00
|
|
|
onCancel: PropTypes.func,
|
2020-01-13 09:48:07 +00:00
|
|
|
onSelect: PropTypes.func,
|
|
|
|
searchPlaceHolderLabel: PropTypes.string,
|
|
|
|
style: PropTypes.object,
|
|
|
|
t: PropTypes.func,
|
2019-12-14 14:06:16 +00:00
|
|
|
useFake: PropTypes.bool,
|
2019-12-18 11:39:16 +00:00
|
|
|
};
|
2019-12-14 14:06:16 +00:00
|
|
|
|
|
|
|
GroupSelector.defaultProps = {
|
|
|
|
useFake: false
|
2019-12-18 11:39:16 +00:00
|
|
|
};
|
2019-12-14 14:06:16 +00:00
|
|
|
|
2019-12-16 14:01:01 +00:00
|
|
|
const ExtendedGroupSelector = withTranslation()(GroupSelector);
|
|
|
|
|
|
|
|
const GroupSelectorWithI18n = props => {
|
|
|
|
const { language } = props;
|
|
|
|
i18n.changeLanguage(language);
|
|
|
|
|
2019-12-18 11:39:16 +00:00
|
|
|
return <ExtendedGroupSelector i18n={i18n} {...props} />;
|
2019-12-16 14:01:01 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
GroupSelectorWithI18n.propTypes = {
|
|
|
|
language: PropTypes.string
|
|
|
|
};
|
|
|
|
|
|
|
|
function mapStateToProps(state) {
|
|
|
|
return {
|
|
|
|
language:
|
|
|
|
state.auth &&
|
|
|
|
((state.auth.user && state.auth.user.cultureName) ||
|
|
|
|
(state.auth.settings && state.auth.settings.culture))
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2019-12-18 11:39:16 +00:00
|
|
|
export default connect(mapStateToProps)(GroupSelectorWithI18n);
|