From 707e0bbf82ef6e29d375f897204de83e40b407d9 Mon Sep 17 00:00:00 2001
From: gopienkonikita <nikita.gopienko@onlyoffice.com>
Date: Tue, 25 Feb 2020 10:51:27 +0300
Subject: [PATCH] Web: People: added display of all users in the list in
 SendInviteDialog, fixed display of the list of users

---
 .../dialogs/ModalDialogContainer.js           |   7 +
 .../dialogs/SendInviteDialog/index.js         | 177 ++++++++++++------
 2 files changed, 122 insertions(+), 62 deletions(-)

diff --git a/products/ASC.People/Client/src/components/dialogs/ModalDialogContainer.js b/products/ASC.People/Client/src/components/dialogs/ModalDialogContainer.js
index da24704b6e..f43d6014b2 100644
--- a/products/ASC.People/Client/src/components/dialogs/ModalDialogContainer.js
+++ b/products/ASC.People/Client/src/components/dialogs/ModalDialogContainer.js
@@ -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;
\ No newline at end of file
diff --git a/products/ASC.People/Client/src/components/dialogs/SendInviteDialog/index.js b/products/ASC.People/Client/src/components/dialogs/SendInviteDialog/index.js
index 2b40e59d0c..59c1b2470c 100644
--- a/products/ASC.People/Client/src/components/dialogs/SendInviteDialog/index.js
+++ b/products/ASC.People/Client/src/components/dialogs/SendInviteDialog/index.js
@@ -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
 };