web: people: add Avatar Editor Store

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

@@ -15,6 +15,7 @@ import { toEmployeeWrapper } from "../../../../../store/people/selectors";
 import { toggleAvatarEditor } from "../../../../../store/people/actions";
 import { setDocumentTitle } from "../../../../../helpers/utils";
 import { isMobile } from "react-device-detect";
+import { inject, observer } from "mobx-react";
 
 const { createThumbnailsAvatar, loadAvatar, deleteAvatar } = api.people;
 const { isTablet } = utils.device;
@@ -322,9 +323,20 @@ function mapStateToProps(state) {
   };
 }
 
+// export default connect(mapStateToProps, {
+//   fetchProfile,
+//   updateProfile,
+//   toggleAvatarEditor,
+//   setAvatarMax,
+// })(withTranslation()(withRouter(AvatarEditorPage)));
+
 export default connect(mapStateToProps, {
   fetchProfile,
   updateProfile,
-  toggleAvatarEditor,
+  //toggleAvatarEditor,
   setAvatarMax,
-})(withTranslation()(withRouter(AvatarEditorPage)));
+})(
+  inject(({ peopleStore }) => ({
+    toggleAvatarEditor: peopleStore.avatarEditorStore.toggleAvatarEditor,
+  }))(observer(withRouter(withTranslation()(AvatarEditorPage))))
+);

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

@@ -304,7 +304,7 @@ function mapStateToProps(state) {
 export default connect(mapStateToProps, {
   fetchProfile,
   updateProfile,
-  toggleAvatarEditor,
+  //toggleAvatarEditor,
   setAvatarMax,
   updateCreatedAvatar,
   updateProfileInUsers,
@@ -316,6 +316,7 @@ export default connect(mapStateToProps, {
   inject(({ peopleStore }) => ({
     editingForm: peopleStore.editingFormStore,
     setIsEditingForm: peopleStore.editingFormStore.setIsEditingForm,
+    toggleAvatarEditor: peopleStore.avatarEditorStore.toggleAvatarEditor,
   }))(observer(withRouter(withTranslation()(CreateAvatarEditorPage))))
 );
 

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

@@ -679,7 +679,7 @@ export default connect(mapStateToProps, {
   updateProfileInUsers,
   // setIsVisibleDataLossDialog,
   // setIsEditingForm,
-  toggleAvatarEditor,
+  // toggleAvatarEditor,
   setCreatedAvatar,
   setCroppedAvatar,
   resetProfile,
@@ -693,6 +693,7 @@ export default connect(mapStateToProps, {
     setIsEditingForm: peopleStore.editingFormStore.setIsEditingForm,
     filter: peopleStore.filterStore.filter,
     setFilter: peopleStore.filterStore.setFilterParams,
+    toggleAvatarEditor: peopleStore.avatarEditorStore.toggleAvatarEditor,
   }))(observer(withRouter(withTranslation()(CreateUserForm))))
 );
 

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

@@ -937,7 +937,7 @@ export default connect(mapStateToProps, {
   // setIsVisibleDataLossDialog,
   // setIsEditingForm,
   // setFilter,
-  toggleAvatarEditor,
+  // toggleAvatarEditor,
   setAvatarMax,
 })(
   inject(({ store, peopleStore }) => ({
@@ -950,6 +950,7 @@ export default connect(mapStateToProps, {
     setIsEditingForm: peopleStore.editingFormStore.setIsEditingForm,
     filter: peopleStore.filterStore.filter,
     setFilter: peopleStore.filterStore.setFilterParams,
+    toggleAvatarEditor: peopleStore.avatarEditorStore.toggleAvatarEditor,
   }))(observer(withRouter(withTranslation()(UpdateUserForm))))
 );
 

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

@@ -126,7 +126,7 @@ function mapStateToProps(state) {
 export default connect(mapStateToProps, {
   //setFilter,
   //setIsVisibleDataLossDialog,
-  toggleAvatarEditor,
+  // toggleAvatarEditor,
   resetProfile,
 })(
   inject(({ store, peopleStore }) => ({
@@ -136,6 +136,7 @@ export default connect(mapStateToProps, {
       peopleStore.editingFormStore.setIsVisibleDataLossDialog,
     filter: peopleStore.filterStore.filter,
     setFilter: peopleStore.filterStore.setFilterParams,
+    toggleAvatarEditor: peopleStore.avatarEditorStore.toggleAvatarEditor,
   }))(observer(withRouter(SectionHeaderContent)))
 );
 

products/ASC.People/Client/src/store/AvatarEditorStore.js

@@ -0,0 +1,18 @@
+import { action, makeObservable, observable } from "mobx";
+
+class AvatarEditorStore {
+  visible = false;
+
+  constructor() {
+    makeObservable(this, {
+      visible: observable,
+      toggleAvatarEditor: action,
+    });
+  }
+
+  toggleAvatarEditor = (isVisible) => {
+    return (this.visible = isVisible);
+  };
+}
+
+export default AvatarEditorStore;