Web: People: added change user type dialog

products/ASC.People/Client/src/components/dialogs/ChangeUserTypeDialog/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/ChangeUserTypeDialog/index.js

@@ -0,0 +1,107 @@
+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 { updateUserType } from "../../../store/people/actions";
+
+const { changeLanguage } = utils;
+
+const ChangeUserTypeDialogComponent = props => {
+  const { t, onClose, visible, users, userType } = props;
+  const usersId = [];
+  users.map(item => usersId.push(item.id));
+
+  const [isRequestRunning, setIsRequestRunning] = useState(false);
+
+  changeLanguage(i18n);
+
+  const onChangeUserType = useCallback(() => {
+    setIsRequestRunning(true);
+    updateUserType(userType, usersId)
+      .then(() => toastr.success(t("SuccessChangeUserType")))
+      .catch(error => toastr.error(error))
+      .finally(() => {
+        setIsRequestRunning(false);
+        onClose();
+      });
+  }, [t, onClose, usersId, userType]);
+
+  const firstType = userType === 1 ? t("GuestCaption") : t("UserCol");
+  const secondType = userType === 1 ? t("UserCol") : t("GuestCaption");
+
+  return (
+    <ModalDialogContainer>
+      <ModalDialog
+        visible={visible}
+        onClose={onClose}
+        headerContent={t("ChangeUserTypeHeader")}
+        bodyContent={
+          <>
+            <Text>
+              {t("ChangeUserTypeMessage", {
+                firstType: firstType,
+                secondType: secondType
+              })}
+            </Text>
+
+            <ToggleContent
+              className="toggle-content-dialog"
+              label={t("ShowUsersList")}
+            >
+              {users.map((item, index) => (
+                <Text key={index}>{item.displayName}</Text>
+              ))}
+            </ToggleContent>
+          </>
+        }
+        footerContent={
+          <>
+            <Button
+              label={t("ChangeUserTypeButton")}
+              size="medium"
+              primary
+              onClick={onChangeUserType}
+              isLoading={isRequestRunning}
+            />
+            <Button
+              className="button-dialog"
+              label={t("CancelButton")}
+              size="medium"
+              onClick={onClose}
+              isDisabled={isRequestRunning}
+            />
+          </>
+        }
+      />
+    </ModalDialogContainer>
+  );
+};
+
+const ChangeUserTypeDialogTranslated = withTranslation()(
+  ChangeUserTypeDialogComponent
+);
+
+const ChangeUserTypeDialog = props => (
+  <ChangeUserTypeDialogTranslated i18n={i18n} {...props} />
+);
+
+ChangeUserTypeDialog.propTypes = {
+  visible: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  users: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default connect(null, { updateUserType })(
+  withRouter(ChangeUserTypeDialog)
+);

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

@@ -0,0 +1,10 @@
+{
+  "GuestCaption": "Guest",
+  "UserCol": "User",
+  "CancelButton": "Cancel",
+  
+  "ChangeUserTypeHeader": "Change user type",
+  "ChangeUserTypeMessage": "Users with the '{{ firstType }}' type will be moved to '{{ secondType }}' type You cannot change the type for portal administrators and for yourself",
+  "ChangeUserTypeButton": "Change type",
+  "ShowUsersList": "View users list"
+}

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

@@ -0,0 +1,10 @@
+{
+  "CancelButton": "Отмена",
+  "GuestCaption": "Гость",
+  "UserCol": "Пользователь",
+
+  "ChangeUserTypeHeader": "Изменение типа пользователя",
+  "ChangeUserTypeButton": "Изменить тип",
+  "ChangeUserTypeMessage": "Пользователи с типом '{{ firstType }}' будут переведены в тип '{{ secondType }}' Вы не можете изменить тип для администраторов портала и для самого себя",
+  "ShowUsersList": "View users list"
+}

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

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

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

@@ -11,9 +11,7 @@ import { Headline } from "asc-web-common";
 import { connect } from "react-redux";
 import {
   getSelectedGroup,
-  getSelectionIds,
   getUserType,
-  getGuestType,
   getUsersStatus,
   getInactiveUsers,
   getDeleteUsers
@@ -21,7 +19,6 @@ import {
 import { withTranslation } from "react-i18next";
 import {
   updateUserStatus,
-  updateUserType,
   fetchPeople,
   removeUser
 } from "../../../../../store/people/actions";
@@ -31,7 +28,8 @@ import {
   InviteDialog,
   DeleteGroupUsersDialog,
   SendInviteDialog,
-  ChangeUserStatusDialog
+  ChangeUserStatusDialog,
+  ChangeUserTypeDialog
 } from "../../../../dialogs";
 
 const { isAdmin } = store.auth.selectors;
@@ -97,6 +95,8 @@ const SectionHeaderContent = props => {
   const [showSendInviteDialog, setSendInviteDialog] = useState(false);
   const [showDisableDialog, setShowDisableDialog] = useState(false);
   const [showActiveDialog, setShowActiveDialog] = useState(false);
+  const [showGuestDialog, setShowGuestDialog] = useState(false);
+  const [showEmployeeDialog, setShowEmployeeDialog] = useState(false);
 
   const {
     isHeaderVisible,
@@ -108,14 +108,12 @@ const SectionHeaderContent = props => {
     group,
     isAdmin,
     t,
-    selection,
-    updateUserType,
     filter,
     history,
     settings,
     deleteGroup,
-    userType,
-    guestType,
+    employeeTypeUsers,
+    guestTypeUsers,
     activeStatus,
     disabledUser,
     inviteLinkUsers,
@@ -123,18 +121,16 @@ const SectionHeaderContent = props => {
     removeUsers
   } = props;
 
-  const selectedUserIds = getSelectionIds(selection);
-  //console.log("SectionHeaderContent render", selection, selectedUserIds);
+  //console.log("SectionHeaderContent render");
 
-  const onSetEmployee = useCallback(() => {
-    updateUserType(EmployeeType.User, selectedUserIds);
-    toastr.success(t("SuccessChangeUserType"));
-  }, [selectedUserIds, updateUserType, t]);
+  const onSetEmployee = useCallback(
+    () => setShowEmployeeDialog(!showEmployeeDialog),
+    [showEmployeeDialog]
+  );
 
-  const onSetGuest = useCallback(() => {
-    updateUserType(EmployeeType.Guest, selectedUserIds);
-    toastr.success(t("SuccessChangeUserType"));
-  }, [selectedUserIds, updateUserType, t]);
+  const onSetGuest = useCallback(() => setShowGuestDialog(!showGuestDialog), [
+    showGuestDialog
+  ]);
 
   const onSetActive = useCallback(
     () => setShowActiveDialog(!showActiveDialog),
@@ -173,14 +169,14 @@ const SectionHeaderContent = props => {
       label: t("ChangeToUser", {
         userCaption: settings.customNames.userCaption
       }),
-      disabled: userType,
+      disabled: !employeeTypeUsers.length,
       onClick: onSetEmployee
     },
     {
       label: t("ChangeToGuest", {
         guestCaption: settings.customNames.guestCaption
       }),
-      disabled: guestType,
+      disabled: !guestTypeUsers.length,
       onClick: onSetGuest
     },
     {
@@ -299,6 +295,23 @@ const SectionHeaderContent = props => {
       isHeaderVisible={isHeaderVisible}
       isArticlePinned={isArticlePinned}
     >
+      {showEmployeeDialog && (
+        <ChangeUserTypeDialog
+          visible={showEmployeeDialog}
+          users={employeeTypeUsers}
+          onClose={onSetEmployee}
+          userType={EmployeeType.User}
+        />
+      )}
+
+      {showGuestDialog && (
+        <ChangeUserTypeDialog
+          visible={showGuestDialog}
+          users={guestTypeUsers}
+          onClose={onSetGuest}
+          userType={EmployeeType.Guest}
+        />
+      )}
       {showActiveDialog && (
         <ChangeUserStatusDialog
           visible={showActiveDialog}
@@ -414,6 +427,8 @@ const mapStateToProps = state => {
   const activeUsers = 1;
   const disabledUsers = 2;
   const currentUserId = state.auth.user.id;
+  const userStatus = true;
+  const guestStatus = false;
 
   return {
     group: getSelectedGroup(state.people.groups, state.people.selectedGroup),
@@ -422,8 +437,8 @@ const mapStateToProps = state => {
     filter: state.people.filter,
     settings: state.auth.settings,
 
-    userType: getUserType(selection),
-    guestType: getGuestType(selection),
+    employeeTypeUsers: getUserType(selection, userStatus, currentUserId),
+    guestTypeUsers: getUserType(selection, guestStatus, currentUserId),
     activeStatus: getUsersStatus(selection, activeUsers, currentUserId),
     disabledUser: getUsersStatus(selection, disabledUsers, currentUserId),
     inviteLinkUsers: getInactiveUsers(selection),
@@ -434,7 +449,6 @@ const mapStateToProps = state => {
 
 export default connect(mapStateToProps, {
   updateUserStatus,
-  updateUserType,
   fetchPeople,
   deleteGroup,
   removeUser