diff --git a/products/ASC.People/Client/src/components/dialogs/ChangeUserStatusDialog/i18n.js b/products/ASC.People/Client/src/components/dialogs/ChangeUserStatusDialog/i18n.js new file mode 100644 index 0000000000..4faea20972 --- /dev/null +++ b/products/ASC.People/Client/src/components/dialogs/ChangeUserStatusDialog/i18n.js @@ -0,0 +1,54 @@ +import i18n from "i18next"; +import Backend from "i18next-xhr-backend"; +import config from "../../../../package.json"; +import { constants } from 'asc-web-common'; +const { LANGUAGE } = constants; + +const newInstance = i18n.createInstance(); + +if (process.env.NODE_ENV === "production") { + newInstance + .use(Backend) + .init({ + lng: localStorage.getItem(LANGUAGE) || 'en', + fallbackLng: "en", + + interpolation: { + escapeValue: false, // not needed for react as it escapes by default + }, + + react: { + useSuspense: true + }, + backend: { + loadPath: `${config.homepage}/locales/DeleteProfileEverDialog/{{lng}}/{{ns}}.json` + } + }); +} else if (process.env.NODE_ENV === "development") { + + const resources = { + en: { + translation: require("./locales/en/translation.json") + }, + ru: { + translation: require("./locales/ru/translation.json") + }, + }; + + newInstance.init({ + resources: resources, + lng: localStorage.getItem(LANGUAGE) || 'en', + fallbackLng: "en", + debug: true, + + interpolation: { + escapeValue: false, // not needed for react as it escapes by default + }, + + react: { + useSuspense: true + } + }); +} + +export default newInstance; \ No newline at end of file diff --git a/products/ASC.People/Client/src/components/dialogs/ChangeUserStatusDialog/index.js b/products/ASC.People/Client/src/components/dialogs/ChangeUserStatusDialog/index.js new file mode 100644 index 0000000000..04b8a386bb --- /dev/null +++ b/products/ASC.People/Client/src/components/dialogs/ChangeUserStatusDialog/index.js @@ -0,0 +1,194 @@ +import React, { memo } from "react"; +import { connect } from "react-redux"; +import { withRouter } from "react-router"; +import PropTypes from "prop-types"; +import { + toastr, + ModalDialog, + Button, + Text, + ToggleContent, + Checkbox, + CustomScrollbarsVirtualList +} from "asc-web-components"; +import { FixedSizeList as List, areEqual } from "react-window"; +import AutoSizer from "react-virtualized-auto-sizer"; +import { withTranslation } from "react-i18next"; +import i18n from "./i18n"; +import { utils } from "asc-web-common"; +import ModalDialogContainer from "../ModalDialogContainer"; +import { updateUserStatus } from "../../../store/people/actions"; + +const { changeLanguage } = utils; + +class ChangeUserStatusDialogComponent extends React.Component { + constructor(props) { + super(props); + + const { userIds, selectedUsers } = props; + + changeLanguage(i18n); + + const listUsers = selectedUsers.map((item, index) => { + const disabled = userIds.find(x => x === item.id); + return (selectedUsers[index] = { + ...selectedUsers[index], + checked: disabled ? true : false, + disabled: disabled ? false : true + }); + }); + + this.state = { isRequestRunning: false, listUsers, userIds }; + } + + onChangeUserStatus = () => { + const { + updateUserStatus, + userStatus, + t, + setSelected, + onClose + } = this.props; + const { userIds } = this.state; + this.setState({ isRequestRunning: true }, () => { + updateUserStatus(userStatus, userIds, true) + .then(() => toastr.success(t("SuccessChangeUserStatus"))) + .catch(error => toastr.error(error)) + .finally(() => { + this.setState({ isRequestRunning: false }, () => { + setSelected("close"); + onClose(); + }); + }); + }); + }; + + onChange = e => { + const { listUsers } = this.state; + const userIndex = listUsers.findIndex(x => x.id === e.target.value); + const newUsersList = listUsers; + newUsersList[userIndex].checked = !newUsersList[userIndex].checked; + + const newUserIds = []; + + for (let item of newUsersList) { + if (item.checked === true) { + newUserIds.push(item.id); + } + } + + this.setState({ listUsers: newUsersList, userIds: newUserIds }); + }; + + render() { + const { t, onClose, visible, userStatus } = this.props; + const { listUsers, isRequestRunning, userIds } = this.state; + const containerStyles = { height: listUsers.length * 25, maxHeight: 220 }; + const itemSize = 25; + + const renderItems = memo(({ data, index, style }) => { + return ( + + ); + }, areEqual); + + const renderList = ({ height, width }) => ( + + {renderItems} + + ); + + const statusTranslation = + userStatus === 1 + ? t("ChangeUsersActiveStatus") + : t("ChangeUsersDisableStatus"); + const userStatusTranslation = + userStatus === 1 ? t("DisabledEmployeeTitle") : t("ActiveEmployeeTitle"); + + return ( + + + + {t("ChangeUserStatusDialog", { + status: statusTranslation, + userStatus: userStatusTranslation + })} + + {t("ChangeUserStatusDialogMessage")} + +
+ {renderList} +
+
+ + } + footerContent={ + <> +