web: People: Change IconButton to ContextMenuButton with more actions

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

@@ -1,12 +1,11 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import styled from "styled-components";
 import { withRouter } from "react-router";
 import {
   GroupButtonsMenu,
   DropDownItem,
   toastr,
-  ContextMenuButton,
-  IconButton
+  ContextMenuButton
 } from "asc-web-components";
 import { Headline } from 'asc-web-common';
 import { connect } from "react-redux";
@@ -22,10 +21,13 @@ import {
 } from "../../../../../store/people/actions";
 import {
   typeUser,
-  typeGuest
+  typeGuest,
+  department
 } from "../../../../../helpers/../helpers/customNames";
 import { deleteGroup } from "../../../../../store/group/actions";
 import { store, api, constants } from 'asc-web-common';
+import { InviteDialog } from '../../../../dialogs';
+
 const { isAdmin } = store.auth.selectors;
 const { resendUserInvites, deleteUsers } = api.people;
 const { EmployeeStatus, EmployeeType } = constants;
@@ -53,6 +55,8 @@ const StyledContainer = styled.div`
 `;
 
 const SectionHeaderContent = props => {
+  const [dialogVisible, setDialogVisible] = useState(false);
+
   const {
     isHeaderVisible,
     isHeaderIndeterminate,
@@ -175,7 +179,7 @@ const SectionHeaderContent = props => {
     );
   }, [deleteGroup, group]);
 
-  const getContextOptions = useCallback(() => {
+  const getContextOptionsGroup = useCallback(() => {
     return [
       {
         key: "edit-group",
@@ -190,10 +194,53 @@ const SectionHeaderContent = props => {
     ];
   }, [t, onEditGroup, onDeleteGroup]);
 
-  const onAddDepartmentsClick = useCallback(() => {
+  const goToEmployeeCreate = useCallback(() => {
+    history.push(`${settings.homepage}/create/user`);
+  }, [history, settings]);
+
+  const goToGuestCreate = useCallback(() => {
+    history.push(`${settings.homepage}/create/guest`);
+  }, [history, settings]);
+
+  const goToGroupCreate = useCallback(() => {
     history.push(`${settings.homepage}/group/create`);
   }, [history, settings]);
 
+  const onInvitationDialogClick = useCallback(() => 
+    setDialogVisible(!dialogVisible), [dialogVisible]
+  );
+
+  const getContextOptionsPlus = useCallback(() => {
+    return [
+      {
+        key: "new-employee",
+        label: t("CustomNewEmployee", { typeUser }),
+        onClick: goToEmployeeCreate
+      },
+      {
+        key: "new-guest",
+        label: t("CustomNewGuest", { typeGuest }),
+        onClick: goToGuestCreate
+      },
+      {
+        key: "new-group",
+        label: t("CustomNewDepartment", { department }),
+        onClick: goToGroupCreate
+      },
+      { key: 'separator', isSeparator: true },
+      {
+        key: "make-invitation-link",
+        label: t("MakeInvitationLink"),
+        onClick: onInvitationDialogClick
+      }/* ,
+      {
+        key: "send-invitation",
+        label: t("SendInvitationAgain"),
+        onClick: onSentInviteAgain
+      } */
+    ];
+  }, [t, goToEmployeeCreate, goToGuestCreate, goToGroupCreate, onInvitationDialogClick/* , onSentInviteAgain */]);
+
   return (
     <StyledContainer>
       {isHeaderVisible ? (
@@ -223,7 +270,7 @@ const SectionHeaderContent = props => {
                   iconName="VerticalDotsIcon"
                   size={16}
                   color="#A3A9AE"
-                  getData={getContextOptions.bind(this, t)}
+                  getData={getContextOptionsGroup}
                   isDisabled={false}
                 />
               )}
@@ -232,15 +279,25 @@ const SectionHeaderContent = props => {
             <>
               <Headline type="content">Departments</Headline>
               {isAdmin && (
-                <IconButton
+                <>
+                <ContextMenuButton
                   className="action-button"
-                  size={16}
+                  directionX="left"
+                  title={t("Actions")}
                   iconName="PlusIcon"
-                  color="#A3A9AE"
-                  hoverColor="#657077"
-                  isFill={true}
-                  onClick={onAddDepartmentsClick}
+                  size={16}
+                  color="#657077"
+                  getData={getContextOptionsPlus}
+                  isDisabled={false}
                 />
+                {dialogVisible &&
+                  <InviteDialog
+                    visible={dialogVisible}
+                    onClose={onInvitationDialogClick}
+                    onCloseButton={onInvitationDialogClick}
+                  />
+                }
+                </>
               )}
             </>
           )}

products/ASC.People/Client/src/components/pages/Home/locales/en/translation.json

@@ -55,5 +55,11 @@
 
   "DefaultSelectLabel": "Select",
 
-  "FilterPlaceholder": "Search"
+  "FilterPlaceholder": "Search",
+
+  "CustomNewEmployee": "New {{typeUser, lowercase}}",
+  "CustomNewGuest": "New {{typeGuest, lowercase}}",
+  "CustomNewDepartment": "New {{department, lowercase}}",
+  "MakeInvitationLink": "Make invitation link",
+  "SendInvitationAgain": "Send invitation once"
 }

products/ASC.People/Client/src/components/pages/Home/locales/ru/translation.json

@@ -55,5 +55,11 @@
 
   "DefaultSelectLabel": "Выберите",
 
-  "FilterPlaceholder": "Поиск"
+  "FilterPlaceholder": "Поиск",
+
+  "CustomNewEmployee": "Новый {{typeUser, lowercase}}",
+  "CustomNewGuest": "Новый {{typeGuest, lowercase}}",
+  "CustomNewDepartment": "Новый {{department, lowercase}}",
+  "MakeInvitationLink": "Создать пригласительную ссылку",
+  "SendInvitationAgain": "Отправить приглашение ещё раз"
 }