Web: People: added change user status dialog

products/ASC.People/Client/src/components/dialogs/ChangeUserStatusDialog/i18n.js

@@ -0,0 +1,54 @@
+import i18n from "i18next";
+import Backend from "i18next-xhr-backend";
+import config from "../../../../package.json";
+import { constants } from 'asc-web-common';
+const { LANGUAGE } = constants;
+
+const newInstance = i18n.createInstance();
+
+if (process.env.NODE_ENV === "production") {
+  newInstance
+    .use(Backend)
+    .init({
+      lng: localStorage.getItem(LANGUAGE) || 'en',
+      fallbackLng: "en",
+
+      interpolation: {
+        escapeValue: false, // not needed for react as it escapes by default
+      },
+
+      react: {
+        useSuspense: true
+      },
+      backend: {
+        loadPath: `${config.homepage}/locales/DeleteProfileEverDialog/{{lng}}/{{ns}}.json`
+      }
+    });
+} else if (process.env.NODE_ENV === "development") {
+
+  const resources = {
+    en: {
+      translation: require("./locales/en/translation.json")
+    },
+    ru: {
+      translation: require("./locales/ru/translation.json")
+    },
+  };
+
+  newInstance.init({
+    resources: resources,
+    lng: localStorage.getItem(LANGUAGE) || 'en',
+    fallbackLng: "en",
+    debug: true,
+
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+
+    react: {
+      useSuspense: true
+    }
+  });
+}
+
+export default newInstance;

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

@@ -0,0 +1,113 @@
+import React, { useCallback, useState } from "react";
+import { connect } from "react-redux";
+import { withRouter } from "react-router";
+import PropTypes from "prop-types";
+import {
+  toastr,
+  ModalDialog,
+  Button,
+  Text,
+  ToggleContent
+} from "asc-web-components";
+import { withTranslation } from "react-i18next";
+import i18n from "./i18n";
+import { utils } from "asc-web-common";
+import ModalDialogContainer from "../ModalDialogContainer";
+import { updateUserStatus } from "../../../store/people/actions";
+
+const { changeLanguage } = utils;
+
+const ChangeUserStatusDialogComponent = props => {
+  const { t, onClose, visible, users, userStatus, updateUserStatus } = props;
+  const usersId = [];
+  users.map(item => usersId.push(item.id));
+
+  const [isRequestRunning, setIsRequestRunning] = useState(false);
+
+  changeLanguage(i18n);
+
+  const onChangeUserStatus = useCallback(() => {
+    setIsRequestRunning(true);
+    updateUserStatus(userStatus, usersId, true)
+      .then(() => toastr.success(t("SuccessChangeUserStatus")))
+      .catch(error => toastr.error(error))
+      .finally(() => {
+        setIsRequestRunning(false);
+        onClose();
+      });
+  }, [t, usersId, userStatus, updateUserStatus, onClose]);
+
+  const statusTranslation =
+    userStatus === 1
+      ? t("ChangeUsersActiveStatus")
+      : t("ChangeUsersDisableStatus");
+  const userStatusTranslation =
+    userStatus === 1
+      ? t("ChangeUsersDisableUserStatus")
+      : t("ChangeUsersActiveUserStatus");
+
+  return (
+    <ModalDialogContainer>
+      <ModalDialog
+        visible={visible}
+        onClose={onClose}
+        headerContent={t("ChangeUserStatusDialogHeader")}
+        bodyContent={
+          <>
+            <Text>
+              {t("ChangeUserStatusDialog", {
+                status: statusTranslation,
+                userStatus: userStatusTranslation
+              })}
+            </Text>
+            <Text>{t("ChangeUserStatusDialogMessage")}</Text>
+            <ToggleContent
+              className="toggle-content-dialog"
+              label={t("DeleteGroupUsersShowUsers")}
+            >
+              {users.map((item, index) => (
+                <Text key={index}>{item.displayName}</Text>
+              ))}
+            </ToggleContent>
+          </>
+        }
+        footerContent={
+          <>
+            <Button
+              label={t("ChangeUsersStatusButton")}
+              size="medium"
+              primary
+              onClick={onChangeUserStatus}
+              isLoading={isRequestRunning}
+            />
+            <Button
+              className="button-dialog"
+              label={t("CancelButton")}
+              size="medium"
+              onClick={onClose}
+              isDisabled={isRequestRunning}
+            />
+          </>
+        }
+      />
+    </ModalDialogContainer>
+  );
+};
+
+const ChangeUserStatusDialogTranslated = withTranslation()(
+  ChangeUserStatusDialogComponent
+);
+
+const ChangeUserStatusDialog = props => (
+  <ChangeUserStatusDialogTranslated i18n={i18n} {...props} />
+);
+
+ChangeUserStatusDialog.propTypes = {
+  visible: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  users: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default connect(null, { updateUserStatus })(
+  withRouter(ChangeUserStatusDialog)
+);

products/ASC.People/Client/src/components/dialogs/ChangeUserStatusDialog/locales/en/translation.json

@@ -0,0 +1,13 @@
+{
+  "CancelButton": "Cancel",
+  
+  "DeleteGroupUsersShowUsers": "View users list",
+  "ChangeUserStatusDialogHeader": "Change user status",
+  "ChangeUserStatusDialog": "The users with the '{{ status }}' status will be disabled.",
+  "ChangeUserStatusDialogMessage": "You cannot change the status for portal owner and for yourself",
+  "ChangeUsersStatusButton": "Change user status",
+  "ChangeUsersActiveUserStatus": "Active",
+  "ChangeUsersDisableUserStatus": "Disabled",
+  "ChangeUsersActiveStatus": "disabled",
+  "ChangeUsersDisableStatus": "enabled"
+}

products/ASC.People/Client/src/components/dialogs/ChangeUserStatusDialog/locales/ru/translation.json

@@ -0,0 +1,13 @@
+{
+  "CancelButton": "Отмена",
+  
+  "DeleteGroupUsersShowUsers": "Показать список пользователей",  
+  "ChangeUserStatusDialogHeader": "Изменение статуса пользователя",
+  "ChangeUserStatusDialog": "Пользователи со статусом '{{ userStatus }}' будут  {{ status }}.",
+  "ChangeUserStatusDialogMessage": "Вы не можете изменить статус владельца портала и свой собственный статус",
+  "ChangeUsersStatusButton": "Изменить статус",
+  "ChangeUsersActiveUserStatus": "Активный",
+  "ChangeUsersDisableUserStatus": "Заблокирован",
+  "ChangeUsersDisableStatus": "заблокированы",
+  "ChangeUsersActiveStatus": "разблокированы"
+}

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

@@ -6,7 +6,7 @@ import DeleteSelfProfileDialog from "./DeleteSelfProfileDialog";
 import DeleteGroupUsersDialog from "./DeleteGroupUsersDialog";
 import InviteDialog from "./InviteDialog";
 import SendInviteDialog from "./SendInviteDialog";
-import SetDisabledDialog from "./SetDisabledDialog";
+import ChangeUserStatusDialog from "./ChangeUserStatusDialog";
 
 export {
   ChangeEmailDialog,
@@ -17,5 +17,5 @@ export {
   DeleteGroupUsersDialog,
   InviteDialog,
   SendInviteDialog,
-  SetDisabledDialog
+  ChangeUserStatusDialog
 };

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

@@ -31,13 +31,11 @@ import {
   InviteDialog,
   DeleteGroupUsersDialog,
   SendInviteDialog,
-  SetDisabledDialog
+  ChangeUserStatusDialog
 } from "../../../../dialogs";
 
 const { isAdmin } = store.auth.selectors;
-const { EmployeeStatus, EmployeeType } = constants;
-
-const isRefetchPeople = true;
+const { EmployeeType, EmployeeStatus } = constants;
 
 const StyledContainer = styled.div`
   @media (min-width: 1024px) {
@@ -98,6 +96,7 @@ const SectionHeaderContent = props => {
   const [showDeleteDialog, setDeleteDialog] = useState(false);
   const [showSendInviteDialog, setSendInviteDialog] = useState(false);
   const [showDisableDialog, setShowDisableDialog] = useState(false);
+  const [showActiveDialog, setShowActiveDialog] = useState(false);
 
   const {
     isHeaderVisible,
@@ -110,9 +109,7 @@ const SectionHeaderContent = props => {
     isAdmin,
     t,
     selection,
-    updateUserStatus,
     updateUserType,
-    onLoading,
     filter,
     history,
     settings,
@@ -129,14 +126,6 @@ const SectionHeaderContent = props => {
   const selectedUserIds = getSelectionIds(selection);
   //console.log("SectionHeaderContent render", selection, selectedUserIds);
 
-  const onSetActive = useCallback(() => {
-    onLoading(true);
-    updateUserStatus(EmployeeStatus.Active, selectedUserIds, isRefetchPeople)
-      .then(() => toastr.success(t("SuccessChangeUserStatus")))
-      .catch(error => toastr.error(error))
-      .finally(() => onLoading(false));
-  }, [selectedUserIds, updateUserStatus, t, onLoading]);
-
   const onSetEmployee = useCallback(() => {
     updateUserType(EmployeeType.User, selectedUserIds);
     toastr.success(t("SuccessChangeUserType"));
@@ -147,6 +136,11 @@ const SectionHeaderContent = props => {
     toastr.success(t("SuccessChangeUserType"));
   }, [selectedUserIds, updateUserType, t]);
 
+  const onSetActive = useCallback(
+    () => setShowActiveDialog(!showActiveDialog),
+    [showActiveDialog]
+  );
+
   const onSetDisabled = useCallback(
     () => setShowDisableDialog(!showDisableDialog),
     [showDisableDialog]
@@ -191,7 +185,7 @@ const SectionHeaderContent = props => {
     },
     {
       label: t("LblSetActive"),
-      //disabled: activeStatus,
+      disabled: !activeStatus.length,
       onClick: onSetActive
     },
     {
@@ -305,11 +299,20 @@ const SectionHeaderContent = props => {
       isHeaderVisible={isHeaderVisible}
       isArticlePinned={isArticlePinned}
     >
+      {showActiveDialog && (
+        <ChangeUserStatusDialog
+          visible={showActiveDialog}
+          users={activeStatus}
+          onClose={onSetActive}
+          userStatus={EmployeeStatus.Active}
+        />
+      )}
       {showDisableDialog && (
-        <SetDisabledDialog
+        <ChangeUserStatusDialog
           visible={showDisableDialog}
           users={disabledUser}
           onClose={onSetDisabled}
+          userStatus={EmployeeStatus.Disabled}
         />
       )}