Web: People: added LeaveFormDialog to article, createUser

products/ASC.People/Client/src/components/Article/Body/index.js

@@ -106,18 +106,20 @@ class ArticleBodyContent extends React.Component {
     const { editingForm, setIsVisibleModalLeave } = this.props;
 
     if (editingForm.isEdit) {
-      setIsVisibleModalLeave(true);
+      setIsVisibleModalLeave(true, this.onSelect(data));
     } else {
-      this.onSelect(data);
+      this.onSelect(data)();
     }
   };
   onSelect = (data) => {
-    const { selectGroup } = this.props;
+    return () => {
+      const { selectGroup } = this.props;
 
-    this.changeTitleDocument(data);
-    selectGroup(
-      data && data.length === 1 && data[0] !== "root" ? data[0] : null
-    );
+      this.changeTitleDocument(data);
+      selectGroup(
+        data && data.length === 1 && data[0] !== "root" ? data[0] : null
+      );
+    };
   };
 
   switcherIcon = (obj) => {

products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/createUserForm.js

@@ -25,6 +25,8 @@ import {
 import {
   setFilter,
   updateProfileInUsers,
+  setIsVisibleModalLeave,
+  setIsEditingForm,
 } from "../../../../../store/people/actions";
 import {
   MainContainer,
@@ -39,6 +41,7 @@ import RadioField from "./FormFields/RadioField";
 import DepartmentField from "./FormFields/DepartmentField";
 import ContactsField from "./FormFields/ContactsField";
 import InfoFieldContainer from "./FormFields/InfoFieldContainer";
+import { LeaveFormDialog } from "../../../../dialogs";
 import { api, toastr } from "asc-web-common";
 const { createThumbnailsAvatar, loadAvatar } = api.people;
 
@@ -54,6 +57,7 @@ class CreateUserForm extends React.Component {
     this.onBirthdayDateChange = this.onBirthdayDateChange.bind(this);
     this.onWorkFromDateChange = this.onWorkFromDateChange.bind(this);
     this.onCancel = this.onCancel.bind(this);
+    this.onCancelHandler = this.onCancelHandler.bind(this);
 
     this.onContactsItemAdd = this.onContactsItemAdd.bind(this);
     this.onContactsItemTypeChange = this.onContactsItemTypeChange.bind(this);
@@ -159,6 +163,7 @@ class CreateUserForm extends React.Component {
       stateCopy.avatar.height = result.height;
     }
     this.setState(stateCopy);
+    this.setIsEdit();
   }
 
   onCloseAvatarEditor() {
@@ -213,23 +218,30 @@ class CreateUserForm extends React.Component {
       },
     };
   };
+  setIsEdit() {
+    const { editingForm, setIsEditingForm } = this.props;
+    if (!editingForm.isEdit) setIsEditingForm(true);
+  }
 
   onInputChange(event) {
     var stateCopy = Object.assign({}, this.state);
     stateCopy.profile[event.target.name] = event.target.value;
     this.setState(stateCopy);
+    this.setIsEdit();
   }
 
   onBirthdayDateChange(value) {
     var stateCopy = Object.assign({}, this.state);
     stateCopy.profile.birthday = value ? value.toJSON() : null;
     this.setState(stateCopy);
+    this.setIsEdit();
   }
 
   onWorkFromDateChange(value) {
     var stateCopy = Object.assign({}, this.state);
     stateCopy.profile.workFrom = value ? value.toJSON() : null;
     this.setState(stateCopy);
+    this.setIsEdit();
   }
 
   validate() {
@@ -276,6 +288,16 @@ class CreateUserForm extends React.Component {
       });
   }
 
+  onCancelHandler() {
+    const { editingForm, setIsVisibleModalLeave } = this.props;
+
+    if (editingForm.isEdit) {
+      setIsVisibleModalLeave(true);
+    } else {
+      this.onCancel();
+    }
+  }
+
   onCancel() {
     const { filter, setFilter } = this.props;
     setFilter(filter);
@@ -289,6 +311,7 @@ class CreateUserForm extends React.Component {
       value: "",
     });
     this.setState(stateCopy);
+    this.setIsEdit();
   }
 
   onContactsItemTypeChange(item) {
@@ -298,6 +321,7 @@ class CreateUserForm extends React.Component {
       if (element.id === id) element.type = item.value;
     });
     this.setState(stateCopy);
+    this.setIsEdit();
   }
 
   onContactsItemTextChange(event) {
@@ -307,6 +331,7 @@ class CreateUserForm extends React.Component {
       if (element.id === id) element.value = event.target.value;
     });
     this.setState(stateCopy);
+    this.setIsEdit();
   }
 
   onContactsItemRemove(event) {
@@ -317,6 +342,7 @@ class CreateUserForm extends React.Component {
     });
     stateCopy.profile.contacts = filteredArray;
     this.setState(stateCopy);
+    this.setIsEdit();
   }
 
   onShowGroupSelector() {
@@ -346,6 +372,7 @@ class CreateUserForm extends React.Component {
     stateCopy.selector.selected = selected;
     stateCopy.selector.visible = false;
     this.setState(stateCopy);
+    this.setIsEdit();
   }
 
   onRemoveGroup(id) {
@@ -377,6 +404,7 @@ class CreateUserForm extends React.Component {
     return (
       <>
         <MainContainer>
+          <LeaveFormDialog onContinue={this.onCancel} />
           <AvatarContainer>
             <Avatar
               size="max"
@@ -582,7 +610,7 @@ class CreateUserForm extends React.Component {
           />
           <Button
             label={t("CancelButton")}
-            onClick={this.onCancel}
+            onClick={this.onCancelHandler}
             isDisabled={isLoading}
             size="big"
             style={{ marginLeft: "8px" }}
@@ -595,10 +623,13 @@ class CreateUserForm extends React.Component {
 }
 
 const mapStateToProps = (state) => {
+  const { settings } = state.auth;
+  const { groups, filter, editingForm } = state.people;
   return {
-    settings: state.auth.settings,
-    groups: state.people.groups,
-    filter: state.people.filter,
+    settings,
+    groups,
+    filter,
+    editingForm,
   };
 };
 
@@ -607,4 +638,6 @@ export default connect(mapStateToProps, {
   updateCreatedAvatar,
   setFilter,
   updateProfileInUsers,
+  setIsVisibleModalLeave,
+  setIsEditingForm,
 })(withRouter(withTranslation()(CreateUserForm)));

products/ASC.People/Client/src/components/pages/ProfileAction/Section/Header/index.js

@@ -5,7 +5,10 @@ import { withRouter } from "react-router";
 import { IconButton } from "asc-web-components";
 import { Headline } from "asc-web-common";
 import { useTranslation } from "react-i18next";
-import { setFilter } from "../../../../../store/people/actions";
+import {
+  setFilter,
+  setIsVisibleModalLeave,
+} from "../../../../../store/people/actions";
 
 const Wrapper = styled.div`
   display: flex;
@@ -24,7 +27,16 @@ const Wrapper = styled.div`
 `;
 
 const SectionHeaderContent = (props) => {
-  const { profile, history, match, settings, filter, setFilter } = props;
+  const {
+    profile,
+    history,
+    match,
+    settings,
+    filter,
+    editingForm,
+    setFilter,
+    setIsVisibleModalLeave,
+  } = props;
   const { userCaption, guestCaption } = settings.customNames;
   const { type } = match.params;
   const { t } = useTranslation();
@@ -37,7 +49,15 @@ const SectionHeaderContent = (props) => {
     ? `${t("EditUserDialogTitle")} (${profile.displayName})`
     : "";
 
+  const onClickBackHandler = () => {
+    if (editingForm.isEdit) {
+      setIsVisibleModalLeave(true, onClickBack);
+    } else {
+      onClickBack();
+    }
+  };
   const onClickBack = useCallback(() => {
+    console.log("callback");
     !profile
       ? setFilter(filter)
       : history.push(`/products/people/view/${profile.userName}`);
@@ -51,7 +71,7 @@ const SectionHeaderContent = (props) => {
         size="17"
         hoverColor="#657077"
         isFill={true}
-        onClick={onClickBack}
+        onClick={onClickBackHandler}
         className="arrow-button"
       />
       <Headline className="header-headline" type="content" truncate={true}>
@@ -66,9 +86,10 @@ function mapStateToProps(state) {
     profile: state.profile.targetUser,
     settings: state.auth.settings,
     filter: state.people.filter,
+    editingForm: state.people.editingForm,
   };
 }
 
-export default connect(mapStateToProps, { setFilter })(
+export default connect(mapStateToProps, { setFilter, setIsVisibleModalLeave })(
   withRouter(SectionHeaderContent)
 );