IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: People: added display of all users in the list in SendInviteDialog, fixed display of the list of users

Browse Source
This commit is contained in:
Nikita Gopienko 2020-02-25 10:51:27 +03:00
parent af7ac989a6
commit 707e0bbf82
2 changed files with 122 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
products/ASC.People/Client/src/components/dialogs/ModalDialogContainer.js
View File

@ -45,6 +45,13 @@ const ModalDialogContainer = styled.div`
font-size: 16px;
}
}
.send_invite_dialog-content {
max-height: 290px;
overflow-y: scroll;
border: 1px solid lightgray;
padding: 8px 0px 0px 8px;
}
`;
export default ModalDialogContainer;

177
products/ASC.People/Client/src/components/dialogs/SendInviteDialog/index.js
View File

@ -1,4 +1,4 @@
import React, { useCallback, useState } from "react";
import React from "react";
import { withRouter } from "react-router";
import PropTypes from "prop-types";
import {
@ -6,7 +6,8 @@ import {
ModalDialog,
Button,
Text,
ToggleContent
ToggleContent,
Checkbox
} from "asc-web-components";
import { withTranslation } from "react-i18next";
import i18n from "./i18n";
@ -16,70 +17,122 @@ import ModalDialogContainer from "../ModalDialogContainer";
const { resendUserInvites } = api.people;
const { changeLanguage } = utils;
const SendInviteDialogComponent = props => {
const { t, onClose, visible, users, setSelected } = props;
const usersId = [];
users.map(item => usersId.push(item.id));
class SendInviteDialogComponent extends React.Component {
constructor(props) {
super(props);
const [isRequestRunning, setIsRequestRunning] = useState(false);
changeLanguage(i18n);
changeLanguage(i18n);
const { userIds, selectedUsers } = props;
const onSendInvite = useCallback(() => {
setIsRequestRunning(true);
resendUserInvites(usersId)
.then(() => toastr.success(t("SuccessSendInvitation")))
.catch(error => toastr.error(error))
.finally(() => {
setIsRequestRunning(false);
setSelected("close");
onClose();
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
});
}, [t, setSelected, onClose, usersId]);
});
//console.log("SendInviteDialog render");
return (
<ModalDialogContainer>
<ModalDialog
visible={visible}
onClose={onClose}
headerContent={t("SendInviteAgain")}
bodyContent={
<>
<Text>{t("SendInviteAgainDialog")}</Text>
<Text>{t("SendInviteAgainDialogMessage")}</Text>
<ToggleContent
className="toggle-content-dialog"
label={t("ShowUsersList")}
>
{users.map((item, index) => (
<Text key={index}>{item.displayName}</Text>
))}
</ToggleContent>
</>
}
footerContent={
<>
<Button
label={t("OKButton")}
size="medium"
primary
onClick={onSendInvite}
isLoading={isRequestRunning}
/>
<Button
className="button-dialog"
label={t("CancelButton")}
size="medium"
onClick={onClose}
isDisabled={isRequestRunning}
/>
</>
}
/>
</ModalDialogContainer>
);
};
this.state = {
listUsers,
isRequestRunning: false,
userIds
};
}
onSendInvite = () => {
const { t, setSelected, onClose } = this.props;
const { userIds } = this.state;
this.setState({ isRequestRunning: true }, () => {
resendUserInvites(userIds)
.then(() => toastr.success(t("SuccessSendInvitation")))
.catch(error => toastr.error(error))
.finally(() => {
this.setState({ isRequestRunning: false }, () => {
setSelected("close");
onClose();
});
});
});
};
onChange = id => {
const userIndex = this.state.listUsers.findIndex(x => x.id === id);
const newUsersList = this.state.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 } = this.props;
const { listUsers, isRequestRunning } = this.state;
//console.log("SendInviteDialog render");
return (
<ModalDialogContainer>
<ModalDialog
visible={visible}
onClose={onClose}
headerContent={t("SendInviteAgain")}
bodyContent={
<>
<Text>{t("SendInviteAgainDialog")}</Text>
<Text>{t("SendInviteAgainDialogMessage")}</Text>
<ToggleContent
className="toggle-content-dialog"
label={t("ShowUsersList")}
>
<div className="send_invite_dialog-content">
{listUsers.map((item, index) => (
<div style={{ display: "flex" }} key={`1${index}`}>
<Checkbox
style={{ paddingBottom: 4 }}
onChange={this.onChange.bind(this, item.id)}
key={`checkbox_${index}`}
isChecked={item.checked}
label={item.displayName}
isDisabled={item.disabled}
/>
</div>
))}
</div>
</ToggleContent>
</>
}
footerContent={
<>
<Button
label={t("OKButton")}
size="medium"
primary
onClick={this.onSendInvite}
isLoading={isRequestRunning}
/>
<Button
className="button-dialog"
label={t("CancelButton")}
size="medium"
onClick={onClose}
isDisabled={isRequestRunning}
/>
</>
}
/>
</ModalDialogContainer>
);
}
}
const SendInviteDialogTranslated = withTranslation()(SendInviteDialogComponent);
@ -90,7 +143,7 @@ const SendInviteDialog = props => (
SendInviteDialog.propTypes = {
visible: PropTypes.bool.isRequired,
onClose: PropTypes.func.isRequired,
users: PropTypes.arrayOf(PropTypes.object).isRequired,
userIds: PropTypes.arrayOf(PropTypes.string).isRequired,
setSelected: PropTypes.func.isRequired
};