Web: Client: GlobalEvents: Added global operation loader for ChangeUserTypeEvent

packages/client/src/components/GlobalEvents/ChangeUserTypeEvent.js

@@ -12,11 +12,11 @@ const ChangeUserTypeEvent = ({
   peopleFilter,
   updateUserType,
   getUsersList,
+  setOperationRunning,
+  operationRunning,
 }) => {
   const { t } = useTranslation(["ChangeUserTypeDialog", "Common"]);
 
-  const [isRequestRunning, setIsRequestRunning] = useState(false);
-
   useEffect(() => {
     setVisible(true);
 
@@ -26,12 +26,12 @@ const ChangeUserTypeEvent = ({
   }, [peopleDialogData]);
 
   const onChangeUserType = async () => {
-    setIsRequestRunning(true);
+    setOperationRunning(true);
     updateUserType(toType, userIDs, peopleFilter, fromType)
       .then(() => toastr.success(t("SuccessChangeUserType")))
       .catch((err) => toastr.error(err))
       .finally(() => {
-        setIsRequestRunning(false);
+        setOperationRunning(false);
         onClose();
       });
   };
@@ -72,7 +72,7 @@ const ChangeUserTypeEvent = ({
       secondType={secondType}
       onCloseAction={onCloseAction}
       onChangeUserType={onChangeUserType}
-      isRequestRunning={isRequestRunning}
+      isRequestRunning={operationRunning}
     />
   );
 };
@@ -87,7 +87,12 @@ export default inject(({ dialogsStore, peopleStore }) => {
 
   const { data: peopleDialogData } = dialogStore;
   const { filter: peopleFilter } = filterStore;
-  const { updateUserType, getUsersList } = usersStore;
+  const {
+    updateUserType,
+    getUsersList,
+    operationRunning,
+    setOperationRunning,
+  } = usersStore;
 
   return {
     visible,
@@ -96,5 +101,7 @@ export default inject(({ dialogsStore, peopleStore }) => {
     peopleFilter,
     updateUserType,
     getUsersList,
+    operationRunning,
+    setOperationRunning,
   };
 })(observer(ChangeUserTypeEvent));

packages/client/src/pages/Home/InfoPanel/Body/views/Accounts/index.js

@@ -18,6 +18,7 @@ const Accounts = ({
   isAdmin,
   changeUserType,
   canChangeUserType,
+  loading,
 }) => {
   const [statusLabel, setStatusLabel] = React.useState("");
 
@@ -114,6 +115,7 @@ const Accounts = ({
         displaySelectedOption
         modernView
         manualWidth={"fit-content"}
+        isLoading={loading}
       />
     );
 
@@ -192,7 +194,7 @@ const Accounts = ({
 
 export default inject(({ auth, peopleStore, accessRightsStore }) => {
   const { isOwner, isAdmin, id: selfId } = auth.userStore.user;
-  const { changeType: changeUserType } = peopleStore;
+  const { changeType: changeUserType, usersStore } = peopleStore;
   const { canChangeUserType } = accessRightsStore;
 
   return {
@@ -201,6 +203,7 @@ export default inject(({ auth, peopleStore, accessRightsStore }) => {
     changeUserType,
     selfId,
     canChangeUserType,
+    loading: usersStore.operationRunning,
   };
 })(
   withTranslation([

packages/client/src/store/UsersStore.js

@@ -16,6 +16,7 @@ class UsersStore {
   users = [];
   providers = [];
   accountsIsIsLoading = false;
+  operationRunning = false;
 
   constructor(peopleStore, authStore) {
     this.peopleStore = peopleStore;
@@ -63,6 +64,10 @@ class UsersStore {
     this.providers = providers;
   };
 
+  setOperationRunning = (operationRunning) => {
+    this.operationRunning = operationRunning;
+  };
+
   employeeWrapperToMemberModel = (profile) => {
     const comment = profile.notes;
     const department = profile.groups