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

products/ASC.People/Client/src/components/dialogs/DeleteGroupUsersDialog/index.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React from "react";
 import { connect } from "react-redux";
 import { withRouter } from "react-router";
 import PropTypes from "prop-types";
@@ -7,49 +7,76 @@ import {
   ModalDialog,
   Button,
   Text,
-  ToggleContent
+  ToggleContent,
+  Checkbox
 } from "asc-web-components";
 import { withTranslation } from "react-i18next";
 import i18n from "./i18n";
 import { api, utils } from "asc-web-common";
-import { fetchPeople, removeUser } from "../../../store/people/actions";
+import { removeUser } from "../../../store/people/actions";
 import ModalDialogContainer from "../ModalDialogContainer";
 
 const { Filter } = api;
 const { changeLanguage } = utils;
 
-const DeleteGroupUsersDialogComponent = props => {
-  const {
-    t,
-    filter,
-    fetchPeople,
-    onClose,
-    removeUser,
-    visible,
-    users,
-    setSelected
-  } = props;
-  const usersId = [];
-  users.map(item => usersId.push(item.id));
-
-  const [isRequestRunning, setIsRequestRunning] = useState(false);
+class DeleteGroupUsersDialogComponent extends React.Component {
+  constructor(props) {
+    super(props);
 
     changeLanguage(i18n);
 
-  const onDeleteGroupUsers = useCallback(() => {
-    setIsRequestRunning(true);
-    removeUser(usersId, filter)
+    const { selectedUsers, userIds } = props;
+
+    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 };
+  }
+
+  onDeleteGroupUsers = () => {
+    const { removeUser, t, setSelected, onClose, filter } = this.props;
+    const { userIds } = this.state;
+
+    this.setState({ isRequestRunning: true }, () => {
+      removeUser(userIds, filter)
         .then(() => {
           toastr.success(t("DeleteGroupUsersSuccessMessage"));
-        return fetchPeople(filter);
         })
         .catch(error => toastr.error(error))
         .finally(() => {
-        setIsRequestRunning(false);
+          this.setState({ isRequestRunning: false }, () => {
             setSelected("close");
             onClose();
           });
-  }, [removeUser, fetchPeople, filter, setSelected, onClose, t, usersId]);
+        });
+    });
+  };
+
+  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, selectedUsers } = this.props;
+    const { isRequestRunning } = this.state;
 
     //console.log("DeleteGroupUsersDialog render");
     return (
@@ -72,9 +99,18 @@ const DeleteGroupUsersDialogComponent = props => {
                 className="toggle-content-dialog"
                 label={t("ShowUsersList")}
               >
-              {users.map((item, index) => (
-                <Text key={index}>{item.displayName}</Text>
+                <div className="modal-dialog-content">
+                  {selectedUsers.map((item, index) => (
+                    <Checkbox
+                      className="modal-dialog-checkbox"
+                      onChange={this.onChange.bind(this, item.id)}
+                      key={`checkbox_${index}`}
+                      isChecked={item.checked}
+                      label={item.displayName}
+                      isDisabled={item.disabled}
+                    />
                   ))}
+                </div>
               </ToggleContent>
             </>
           }
@@ -84,7 +120,7 @@ const DeleteGroupUsersDialogComponent = props => {
                 label={t("OKButton")}
                 size="medium"
                 primary
-              onClick={onDeleteGroupUsers}
+                onClick={this.onDeleteGroupUsers}
                 isLoading={isRequestRunning}
               />
               <Button
@@ -99,7 +135,8 @@ const DeleteGroupUsersDialogComponent = props => {
         />
       </ModalDialogContainer>
     );
-};
+  }
+}
 
 const DeleteGroupUsersDialogTranslated = withTranslation()(
   DeleteGroupUsersDialogComponent
@@ -113,12 +150,12 @@ DeleteGroupUsersDialog.propTypes = {
   visible: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
   setSelected: PropTypes.func.isRequired,
-  users: PropTypes.arrayOf(PropTypes.object).isRequired,
+  selectedUsers: PropTypes.arrayOf(PropTypes.object).isRequired,
+  userIds: PropTypes.arrayOf(PropTypes.string).isRequired,
   filter: PropTypes.instanceOf(Filter).isRequired,
-  fetchPeople: PropTypes.func.isRequired,
   removeUser: PropTypes.func.isRequired
 };
 
-export default connect(null, { fetchPeople, removeUser })(
+export default connect(null, { removeUser })(
   withRouter(DeleteGroupUsersDialog)
 );

products/ASC.People/Client/src/components/dialogs/ModalDialogContainer.js

@@ -48,11 +48,11 @@ const ModalDialogContainer = styled.div`
 
   .modal-dialog-content {
     max-height: 290px;
-    overflow-y: scroll;
+    overflow-y: auto;
     border: 1px solid lightgray;
-    padding: 8px 0px 0px 8px;
+    padding: 8px 16px;
 
-    .modal-dialog-checkbox {
+    .modal-dialog-checkbox:not(:last-child) {
       padding-bottom: 4px;
     }
   }