Web:People: added catalog

packages/asc-web-components/catalog-item/index.js

@@ -14,7 +14,7 @@ import {
   StyledCatalogItemInitialText,
 } from "./styled-catalog-item";
 
-const getInitial = (text) => text.substring(0, 1);
+const getInitial = (text) => text.substring(0, 1).toUpperCase();
 
 const CatalogItem = (props) => {
   // console.log("render");

packages/asc-web-components/catalog-item/styled-catalog-item.js

@@ -73,7 +73,7 @@ StyledCatalogItemBadgeWrapper.defaultProps = { theme: Base };
 
 const StyledCatalogItemInitialText = styled(Text)`
   position: absolute;
-  top: 3px;
+  top: 2px;
   left: 0;
   text-align: center;
   width: ${(props) => props.theme.catalogItem.initialText.width};
@@ -171,6 +171,8 @@ const StyledCatalogItemSibling = styled.div`
   left: 0;
   width: 100%;
   height: 100%;
+  min-height: ${(props) => props.theme.catalogItem.container.height};
+  max-height: ${(props) => props.theme.catalogItem.container.height};
 
   background-color: ${(props) =>
     props.isActive && props.theme.catalogItem.sibling.active.background};
@@ -179,6 +181,17 @@ const StyledCatalogItemSibling = styled.div`
     background-color: ${(props) =>
       props.theme.catalogItem.sibling.hover.background};
   }
+
+  @media ${tablet} {
+    min-height: ${(props) => props.theme.catalogItem.container.tablet.height};
+    max-height: ${(props) => props.theme.catalogItem.container.tablet.height};
+  }
+
+  ${isMobile &&
+  css`
+    min-height: ${(props) => props.theme.catalogItem.container.tablet.height};
+    max-height: ${(props) => props.theme.catalogItem.container.tablet.height};
+  `}
 `;
 
 StyledCatalogItemSibling.defaultProps = { theme: Base };
@@ -189,6 +202,7 @@ const StyledCatalogItemContainer = styled.div`
   align-items: center;
   min-width: ${(props) => props.theme.catalogItem.container.width};
   min-height: ${(props) => props.theme.catalogItem.container.height};
+  max-height: ${(props) => props.theme.catalogItem.container.height};
   position: relative;
   box-sizing: border-box;
   padding: ${(props) =>
@@ -199,6 +213,7 @@ const StyledCatalogItemContainer = styled.div`
 
   @media ${tablet} {
     min-height: ${(props) => props.theme.catalogItem.container.tablet.height};
+    max-height: ${(props) => props.theme.catalogItem.container.tablet.height};
     padding: ${(props) =>
       props.showText && props.theme.catalogItem.container.tablet.padding};
     margin-bottom: ${(props) =>
@@ -209,6 +224,7 @@ const StyledCatalogItemContainer = styled.div`
   ${isMobile &&
   css`
     min-height: ${(props) => props.theme.catalogItem.container.tablet.height};
+    max-height: ${(props) => props.theme.catalogItem.container.tablet.height};
     padding: ${(props) =>
       props.showText && props.theme.catalogItem.container.tablet.padding};
     margin-bottom: ${(props) =>

products/ASC.People/Client/src/components/Catalog/Body/index.js

@@ -0,0 +1,145 @@
+import React from 'react';
+import { withTranslation } from 'react-i18next';
+import Filter from '@appserver/common/api/people/filter';
+import Loaders from '@appserver/common/components/Loaders';
+import { inject, observer } from 'mobx-react';
+import { getSelectedGroup } from '../../../helpers/people-helpers';
+import { withRouter } from 'react-router';
+import { isMobile } from '@appserver/components/utils/device';
+import { isMobileOnly } from 'react-device-detect';
+import config from '../../../../package.json';
+import { combineUrl } from '@appserver/common/utils';
+import { AppServerConfig } from '@appserver/common/constants';
+import CatalogItem from '@appserver/components/catalog-item';
+
+const departmentsIcon = 'images/departments.group.react.svg';
+const groupIcon = '/static/images/catalog.folder.react.svg';
+
+const CatalogBodyContent = ({
+  selectedKeys,
+  groups,
+  setFirstLoad,
+  toggleShowText,
+  showText,
+  groupsCaption,
+  history,
+  filter,
+  selectGroup,
+  isVisitor,
+  isLoaded,
+  setDocumentTitle,
+}) => {
+  React.useEffect(() => {
+    changeTitleDocument();
+    setFirstLoad(false);
+  }, []);
+
+  React.useEffect(() => {
+    changeTitleDocument();
+  }, [selectedKeys[0]]);
+
+  const changeTitleDocument = (id) => {
+    const currentGroup = getSelectedGroup(groups, id === 'root' ? selectedKeys[0] : id);
+    currentGroup ? setDocumentTitle(currentGroup.name) : setDocumentTitle();
+  };
+
+  const isActive = (group) => {
+    if (group === selectedKeys[0]) return true;
+    return false;
+  };
+  const onClick = (data) => {
+    const isRoot = data === 'departments';
+    const groupId = isRoot ? 'root' : data;
+    changeTitleDocument(groupId);
+
+    if (window.location.pathname.indexOf('/people/filter') > 0) {
+      selectGroup(groupId);
+      if (isMobileOnly || isMobile()) toggleShowText();
+    } else {
+      const newFilter = isRoot ? Filter.getDefault() : filter.clone();
+
+      if (!isRoot) newFilter.group = groupId;
+
+      const urlFilter = newFilter.toUrlParams();
+      const url = combineUrl(AppServerConfig.proxyURL, config.homepage, `/filter?${urlFilter}`);
+      history.push(url);
+      if (isMobileOnly || isMobile()) toggleShowText();
+    }
+  };
+
+  const getItems = (data) => {
+    const items = data.map((group) => {
+      return (
+        <CatalogItem
+          key={group.id}
+          id={group.id}
+          icon={groupIcon}
+          text={group.name}
+          showText={showText}
+          showInitial={true}
+          onClick={onClick}
+          isActive={isActive(group.id)}
+        />
+      );
+    });
+    return items;
+  };
+  return (
+    !isVisitor &&
+    (!isLoaded ? (
+      <Loaders.TreeFolders />
+    ) : (
+      <>
+        <CatalogItem
+          key={'root'}
+          id={'departments'}
+          icon={departmentsIcon}
+          onClick={onClick}
+          text={groupsCaption}
+          showText={showText}
+          isActive={isActive('root')}
+        />
+        {getItems(groups)}
+      </>
+    ))
+  );
+};
+
+const BodyContent = withTranslation('Article')(withRouter(CatalogBodyContent));
+
+export default inject(({ auth, peopleStore }) => {
+  const { settingsStore, isLoaded, setDocumentTitle, isAdmin } = auth;
+  const { customNames, showText, toggleShowText } = settingsStore;
+  const {
+    groupsStore,
+    selectedGroupStore,
+    editingFormStore,
+    filterStore,
+    loadingStore,
+  } = peopleStore;
+  const { filter } = filterStore;
+  const { groups } = groupsStore;
+  const { groupsCaption } = customNames;
+  const { isEdit, setIsVisibleDataLossDialog } = editingFormStore;
+  const { selectedGroup, selectGroup } = selectedGroupStore;
+  const selectedKeys = selectedGroup ? [selectedGroup] : ['root'];
+  const { setFirstLoad, isLoading } = loadingStore;
+  return {
+    setDocumentTitle,
+    isLoaded,
+    isVisitor: auth.userStore.user.isVisitor,
+    isAdmin,
+    groups,
+    groups,
+    groupsCaption,
+    selectedKeys,
+    selectGroup,
+    isEdit,
+    setIsVisibleDataLossDialog,
+    isLoading,
+    filter,
+    setFirstLoad,
+    showText,
+    toggleShowText,
+  };
+})(observer(BodyContent));

products/ASC.People/Client/src/components/Catalog/Header/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Loaders from '@appserver/common/components/Loaders';
+import { inject, observer } from 'mobx-react';
+
+const CatalogHeaderContent = ({ isVisitor, isLoaded, currentModuleName }) => {
+  return !isVisitor && (isLoaded ? <>{currentModuleName}</> : <Loaders.ArticleHeader />);
+};
+
+export default inject(({ auth }) => {
+  return {
+    isVisitor: auth.userStore.user.isVisitor,
+    isLoaded: auth.isLoaded,
+    currentModuleName: auth.product.title,
+  };
+})(observer(CatalogHeaderContent));

products/ASC.People/Client/src/components/Catalog/MainButton/index.js

@@ -0,0 +1,134 @@
+import React from 'react';
+//import PropTypes from "prop-types";
+import { withRouter } from 'react-router';
+import MainButton from '@appserver/components/main-button';
+import DropDownItem from '@appserver/components/drop-down-item';
+import InviteDialog from './../../dialogs/InviteDialog/index';
+import { withTranslation } from 'react-i18next';
+import toastr from 'studio/toastr';
+import Loaders from '@appserver/common/components/Loaders';
+import { inject, observer } from 'mobx-react';
+import config from '../../../../package.json';
+import { combineUrl } from '@appserver/common/utils';
+import { AppServerConfig } from '@appserver/common/constants';
+import withLoader from '../../../HOCs/withLoader';
+import { isMobile } from 'react-device-detect';
+import { isMobile as isMobileUtils } from '@appserver/components/utils/device';
+
+class CatalogMainButtonContent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dialogVisible: false,
+    };
+  }
+
+  onImportClick = () => {
+    const { history, homepage } = this.props;
+    history.push(combineUrl(AppServerConfig.proxyURL, homepage, '${homepage}/import'));
+    if (isMobile || isMobileUtils()) this.props.toggleShowText();
+  };
+
+  goToEmployeeCreate = () => {
+    const { history, homepage } = this.props;
+    history.push(combineUrl(AppServerConfig.proxyURL, homepage, '/create/user'));
+    if (isMobile || isMobileUtils()) this.props.toggleShowText();
+  };
+
+  goToGuestCreate = () => {
+    const { history, homepage } = this.props;
+    history.push(combineUrl(AppServerConfig.proxyURL, homepage, '/create/guest'));
+    if (isMobile || isMobileUtils()) this.props.toggleShowText();
+  };
+
+  goToGroupCreate = () => {
+    const { history, homepage } = this.props;
+    history.push(combineUrl(AppServerConfig.proxyURL, homepage, '/group/create'));
+    if (isMobile || isMobileUtils()) this.props.toggleShowText();
+  };
+
+  onNotImplementedClick = (text) => {
+    toastr.success(text);
+  };
+
+  onInvitationDialogClick = () => this.setState({ dialogVisible: !this.state.dialogVisible });
+
+  render() {
+    //console.log("People ArticleMainButtonContent render");
+    const { t, isAdmin, homepage, userCaption, guestCaption, groupCaption } = this.props;
+
+    const { dialogVisible } = this.state;
+
+    return isAdmin ? (
+      <>
+        <MainButton isDisabled={false} isDropdown={true} text={t('Common:Actions')}>
+          <DropDownItem
+            icon={combineUrl(AppServerConfig.proxyURL, homepage, '/images/add.employee.react.svg')}
+            label={userCaption}
+            onClick={this.goToEmployeeCreate}
+          />
+
+          <DropDownItem
+            icon={combineUrl(AppServerConfig.proxyURL, homepage, '/images/add.guest.react.svg')}
+            label={guestCaption}
+            onClick={this.goToGuestCreate}
+          />
+          <DropDownItem
+            icon={combineUrl(
+              AppServerConfig.proxyURL,
+              homepage,
+              '/images/add.department.react.svg',
+            )}
+            label={groupCaption}
+            onClick={this.goToGroupCreate}
+          />
+          <DropDownItem isSeparator />
+          <DropDownItem
+            icon={combineUrl(AppServerConfig.proxyURL, '/static/images/invitation.link.react.svg')}
+            label={t('Translations:InviteLinkTitle')}
+            onClick={this.onInvitationDialogClick}
+          />
+          {/* <DropDownItem
+              icon="images/plane.react.svg"
+              label={t("SendInvitesAgain")}
+              onClick={this.onNotImplementedClick.bind(this, t("SendInvitesAgain"))}
+            /> */}
+          {false && (
+            <DropDownItem
+              icon={combineUrl(AppServerConfig.proxyURL, homepage, '/images/import.react.svg')}
+              label={t('ImportPeople')}
+              onClick={this.onImportClick}
+            />
+          )}
+        </MainButton>
+        {dialogVisible && (
+          <InviteDialog
+            visible={dialogVisible}
+            onClose={this.onInvitationDialogClick}
+            onCloseButton={this.onInvitationDialogClick}
+          />
+        )}
+      </>
+    ) : (
+      <></>
+    );
+  }
+}
+
+export default withRouter(
+  inject(({ auth }) => {
+    const { userCaption, guestCaption, groupCaption } = auth.settingsStore.customNames;
+    return {
+      isAdmin: auth.isAdmin,
+      homepage: config.homepage,
+      userCaption,
+      guestCaption,
+      groupCaption,
+      toggleShowText: auth.settingsStore.toggleShowText,
+    };
+  })(
+    withTranslation(['Article', 'Common', 'Translations'])(
+      withLoader(observer(CatalogMainButtonContent))(<Loaders.MainButton />),
+    ),
+  ),
+);

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

@@ -0,0 +1,3 @@
+export { default as CatalogHeaderContent } from './Header';
+export { default as CatalogBodyContent } from './Body';
+export { default as CatalogMainButtonContent } from './MainButton';

products/ASC.People/Client/src/pages/GroupAction/index.js

@@ -1,22 +1,27 @@
-import React from "react";
+import React from 'react';
-import Loader from "@appserver/components/loader";
+import Loader from '@appserver/components/loader';
-import PageLayout from "@appserver/common/components/PageLayout";
+import PageLayout from '@appserver/common/components/PageLayout';
 import {
   ArticleHeaderContent,
   ArticleMainButtonContent,
   ArticleBodyContent,
-} from "../../components/Article";
+} from '../../components/Article';
-import { SectionHeaderContent, SectionBodyContent } from "./Section";
+import {
-import { withTranslation } from "react-i18next";
+  CatalogHeaderContent,
-import { withRouter } from "react-router";
+  CatalogMainButtonContent,
-import { inject, observer } from "mobx-react";
+  CatalogBodyContent,
+} from '../../components/Catalog';
+import { SectionHeaderContent, SectionBodyContent } from './Section';
+import { withTranslation } from 'react-i18next';
+import { withRouter } from 'react-router';
+import { inject, observer } from 'mobx-react';
 
 class GroupAction extends React.Component {
   componentDidMount() {
     const { match, fetchGroup, t, setDocumentTitle, setFirstLoad } = this.props;
     const { groupId } = match.params;
     setFirstLoad(false);
-    setDocumentTitle(t("GroupAction"));
+    setDocumentTitle(t('GroupAction'));
 
     if (groupId) {
       fetchGroup(groupId);
@@ -38,25 +43,48 @@ class GroupAction extends React.Component {
   }
 
   render() {
-    console.log("GroupAction render");
+    console.log('GroupAction render');
 
-    const { group, match, tReady } = this.props;
+    const { group, match, tReady, isAdmin, showCatalog } = this.props;
 
     return (
       <>
         {group || !match.params.groupId ? (
           <PageLayout withBodyScroll={true}>
+            {showCatalog && (
+              <PageLayout.CatalogHeader>
+                <CatalogHeaderContent />
+              </PageLayout.CatalogHeader>
+            )}
+
+            {showCatalog && isAdmin && (
+              <PageLayout.CatalogMainButton>
+                <CatalogMainButtonContent />
+              </PageLayout.CatalogMainButton>
+            )}
+            {showCatalog && (
+              <PageLayout.CatalogBody>
+                <CatalogBodyContent />
+              </PageLayout.CatalogBody>
+            )}
+
+            {!showCatalog && (
               <PageLayout.ArticleHeader>
                 <ArticleHeaderContent />
               </PageLayout.ArticleHeader>
+            )}
 
+            {!showCatalog && (
               <PageLayout.ArticleMainButton>
                 <ArticleMainButtonContent />
               </PageLayout.ArticleMainButton>
+            )}
 
+            {!showCatalog && (
               <PageLayout.ArticleBody>
                 <ArticleBodyContent />
               </PageLayout.ArticleBody>
+            )}
 
             <PageLayout.SectionHeader>
               <SectionHeaderContent />
@@ -90,18 +118,12 @@ class GroupAction extends React.Component {
   }
 }
 
-const GroupActionContainer = withTranslation(["GroupAction", "Common"])(
+const GroupActionContainer = withTranslation(['GroupAction', 'Common'])(GroupAction);
-  GroupAction
-);
 export default withRouter(
   inject(({ auth, peopleStore }) => {
     const { setDocumentTitle } = auth;
     const { selectedGroupStore, loadingStore } = peopleStore;
-    const {
+    const { setTargetedGroup: fetchGroup, targetedGroup: group, resetGroup } = selectedGroupStore;
-      setTargetedGroup: fetchGroup,
-      targetedGroup: group,
-      resetGroup,
-    } = selectedGroupStore;
     const { setFirstLoad } = loadingStore;
     return {
       setDocumentTitle,
@@ -109,6 +131,8 @@ export default withRouter(
       group,
       resetGroup,
       setFirstLoad,
+      isAdmin: auth.isAdmin,
+      showCatalog: auth.settingsStore.showCatalog,
     };
-  })(observer(GroupActionContainer))
+  })(observer(GroupActionContainer)),
 );

products/ASC.People/Client/src/pages/Home/index.js

@@ -1,42 +1,49 @@
-import React, { useEffect } from "react";
+import React, { useEffect } from 'react';
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import { withRouter } from "react-router";
+import { withRouter } from 'react-router';
-import Filter from "@appserver/common/api/people/filter";
+import Filter from '@appserver/common/api/people/filter';
-import PageLayout from "@appserver/common/components/PageLayout";
+import PageLayout from '@appserver/common/components/PageLayout';
-import { showLoader, hideLoader } from "@appserver/common/utils";
+import { showLoader, hideLoader, isAdmin } from '@appserver/common/utils';
 import {
   ArticleHeaderContent,
   ArticleBodyContent,
   ArticleMainButtonContent,
-} from "../../components/Article";
+} from '../../components/Article';
+import {
+  CatalogHeaderContent,
+  CatalogMainButtonContent,
+  CatalogBodyContent,
+} from '../../components/Catalog';
 import {
   SectionHeaderContent,
   SectionBodyContent,
   SectionFilterContent,
   SectionPagingContent,
-} from "./Section";
+} from './Section';
-import { inject, observer } from "mobx-react";
+import { inject, observer } from 'mobx-react';
-import { isMobile } from "react-device-detect";
+import { isMobile } from 'react-device-detect';
-import Dialogs from "./Section/Body/Dialogs"; //TODO: Move dialogs to another folder
+import Dialogs from './Section/Body/Dialogs'; //TODO: Move dialogs to another folder
 
 const Home = ({
+  isAdmin,
   isLoading,
   history,
   getUsersList,
   setIsLoading,
   setIsRefresh,
   selectedGroup,
+  showCatalog,
 }) => {
   const { location } = history;
   const { pathname } = location;
-  console.log("People Home render");
+  console.log('People Home render');
 
   useEffect(() => {
-    if (pathname.indexOf("/people/filter") > -1) {
+    if (pathname.indexOf('/people/filter') > -1) {
       setIsLoading(true);
       setIsRefresh(true);
       const newFilter = Filter.getFilter(location);
-      console.log("PEOPLE URL changed", pathname, newFilter);
+      console.log('PEOPLE URL changed', pathname, newFilter);
       getUsersList(newFilter).finally(() => {
         setIsLoading(false);
         setIsRefresh(false);
@@ -45,9 +52,7 @@ const Home = ({
   }, [pathname, location]);
   useEffect(() => {
     if (isMobile) {
-      const customScrollElm = document.querySelector(
+      const customScrollElm = document.querySelector('#customScrollBar > .scroll-body');
-        "#customScrollBar > .scroll-body"
-      );
       customScrollElm && customScrollElm.scrollTo(0, 0);
     }
   }, [selectedGroup]);
@@ -58,22 +63,41 @@ const Home = ({
 
   return (
     <>
-      <PageLayout
+      <PageLayout withBodyScroll withBodyAutoFocus={!isMobile} isLoading={isLoading}>
-        withBodyScroll
+        {showCatalog && (
-        withBodyAutoFocus={!isMobile}
+          <PageLayout.CatalogHeader>
-        isLoading={isLoading}
+            <CatalogHeaderContent />
-      >
+          </PageLayout.CatalogHeader>
+        )}
+
+        {showCatalog && isAdmin && (
+          <PageLayout.CatalogMainButton>
+            <CatalogMainButtonContent />
+          </PageLayout.CatalogMainButton>
+        )}
+        {showCatalog && (
+          <PageLayout.CatalogBody>
+            <CatalogBodyContent />
+          </PageLayout.CatalogBody>
+        )}
+
+        {!showCatalog && (
           <PageLayout.ArticleHeader>
             <ArticleHeaderContent />
           </PageLayout.ArticleHeader>
+        )}
 
+        {!showCatalog && (
           <PageLayout.ArticleMainButton>
             <ArticleMainButtonContent />
           </PageLayout.ArticleMainButton>
+        )}
 
+        {!showCatalog && (
           <PageLayout.ArticleBody>
             <ArticleBodyContent />
           </PageLayout.ArticleBody>
+        )}
 
         <PageLayout.SectionHeader>
           <SectionHeaderContent />
@@ -101,17 +125,21 @@ Home.propTypes = {
   isLoading: PropTypes.bool,
 };
 
-export default inject(({ peopleStore }) => {
+export default inject(({ auth, peopleStore }) => {
+  const { settingsStore } = auth;
+  const { showCatalog, showText, toggleShowText, userShowText } = settingsStore;
   const { usersStore, selectedGroupStore, loadingStore } = peopleStore;
   const { getUsersList } = usersStore;
   const { selectedGroup } = selectedGroupStore;
   const { isLoading, setIsLoading, setIsRefresh } = loadingStore;
 
   return {
+    isAdmin: auth.isAdmin,
     isLoading,
     getUsersList,
     setIsLoading,
     setIsRefresh,
     selectedGroup,
+    showCatalog,
   };
 })(observer(withRouter(Home)));

products/ASC.People/Client/src/pages/Profile/index.js

@@ -1,17 +1,22 @@
-import React from "react";
+import React from 'react';
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import PageLayout from "@appserver/common/components/PageLayout";
+import PageLayout from '@appserver/common/components/PageLayout';
-import toastr from "studio/toastr";
+import toastr from 'studio/toastr';
 import {
   ArticleHeaderContent,
   ArticleMainButtonContent,
   ArticleBodyContent,
-} from "../../components/Article";
+} from '../../components/Article';
-import { SectionHeaderContent, SectionBodyContent } from "./Section";
+import {
-import { withRouter } from "react-router";
+  CatalogHeaderContent,
+  CatalogMainButtonContent,
+  CatalogBodyContent,
+} from '../../components/Catalog';
+import { SectionHeaderContent, SectionBodyContent } from './Section';
+import { withRouter } from 'react-router';
 
-import { inject, observer } from "mobx-react";
+import { inject, observer } from 'mobx-react';
-import { withTranslation } from "react-i18next";
+import { withTranslation } from 'react-i18next';
 
 class Profile extends React.Component {
   componentDidMount() {
@@ -32,19 +37,17 @@ class Profile extends React.Component {
     setFirstLoad(false);
     setIsEditTargetUser(false);
 
-    if (!userId) userId = "@self";
+    if (!userId) userId = '@self';
 
-    setDocumentTitle(t("Common:Profile"));
+    setDocumentTitle(t('Common:Profile'));
-    this.documentElement = document.getElementsByClassName("hidingHeader");
+    this.documentElement = document.getElementsByClassName('hidingHeader');
-    const queryString = ((location && location.search) || "").slice(1);
+    const queryString = ((location && location.search) || '').slice(1);
-    const queryParams = queryString.split("&");
+    const queryParams = queryString.split('&');
-    const arrayOfQueryParams = queryParams.map((queryParam) =>
+    const arrayOfQueryParams = queryParams.map((queryParam) => queryParam.split('='));
-      queryParam.split("=")
-    );
     const linkParams = Object.fromEntries(arrayOfQueryParams);
 
-    if (linkParams.email_change && linkParams.email_change === "success") {
+    if (linkParams.email_change && linkParams.email_change === 'success') {
-      toastr.success(t("ChangeEmailSuccess"));
+      toastr.success(t('ChangeEmailSuccess'));
     }
     if (!profile || profile.userName !== userId) {
       setIsLoading(true);
@@ -57,7 +60,7 @@ class Profile extends React.Component {
 
     if (!profile && this.documentElement) {
       for (var i = 0; i < this.documentElement.length; i++) {
-        this.documentElement[i].style.transition = "none";
+        this.documentElement[i].style.transition = 'none';
       }
     }
   }
@@ -74,7 +77,7 @@ class Profile extends React.Component {
 
     if (profile && this.documentElement) {
       for (var i = 0; i < this.documentElement.length; i++) {
-        this.documentElement[i].style.transition = "";
+        this.documentElement[i].style.transition = '';
       }
     }
   }
@@ -89,21 +92,44 @@ class Profile extends React.Component {
   render() {
     //console.log("Profile render");
 
-    const { profile } = this.props;
+    const { profile, showCatalog, isAdmin } = this.props;
 
     return (
       <PageLayout withBodyAutoFocus>
+        {showCatalog && (
+          <PageLayout.CatalogHeader>
+            <CatalogHeaderContent />
+          </PageLayout.CatalogHeader>
+        )}
+
+        {showCatalog && isAdmin && (
+          <PageLayout.CatalogMainButton>
+            <CatalogMainButtonContent />
+          </PageLayout.CatalogMainButton>
+        )}
+        {showCatalog && (
+          <PageLayout.CatalogBody>
+            <CatalogBodyContent />
+          </PageLayout.CatalogBody>
+        )}
+
+        {!showCatalog && (
           <PageLayout.ArticleHeader>
             <ArticleHeaderContent />
           </PageLayout.ArticleHeader>
+        )}
 
+        {!showCatalog && (
           <PageLayout.ArticleMainButton>
             <ArticleMainButtonContent />
           </PageLayout.ArticleMainButton>
+        )}
 
+        {!showCatalog && (
           <PageLayout.ArticleBody>
             <ArticleBodyContent />
           </PageLayout.ArticleBody>
+        )}
 
         <PageLayout.SectionHeader>
           <SectionHeaderContent profile={profile} />
@@ -150,6 +176,7 @@ export default withRouter(
       isEditTargetUser,
       setIsEditTargetUser,
       setLoadedProfile,
+      showCatalog: auth.settingsStore.showCatalog,
     };
-  })(observer(withTranslation(["Profile", "Common"])(Profile)))
+  })(observer(withTranslation(['Profile', 'Common'])(Profile))),
 );

products/ASC.People/Client/src/pages/ProfileAction/index.js

@@ -1,27 +1,32 @@
-import React from "react";
+import React from 'react';
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import PageLayout from "@appserver/common/components/PageLayout";
+import PageLayout from '@appserver/common/components/PageLayout';
-import Loaders from "@appserver/common/components/Loaders";
+import Loaders from '@appserver/common/components/Loaders';
-import toastr from "studio/toastr";
+import toastr from 'studio/toastr';
-import { linkOAuth } from "@appserver/common/api/people";
+import { linkOAuth } from '@appserver/common/api/people';
-import { getAuthProviders } from "@appserver/common/api/settings";
+import { getAuthProviders } from '@appserver/common/api/settings';
 import {
   ArticleHeaderContent,
   ArticleMainButtonContent,
   ArticleBodyContent,
-} from "../../components/Article";
+} from '../../components/Article';
-import SectionUserBody from "./Section/Body/index";
+import {
+  CatalogHeaderContent,
+  CatalogMainButtonContent,
+  CatalogBodyContent,
+} from '../../components/Catalog';
+import SectionUserBody from './Section/Body/index';
 import {
   SectionHeaderContent,
   // CreateUserForm,
   // UpdateUserForm,
   // AvatarEditorPage,
   // CreateAvatarEditorPage,
-} from "./Section";
+} from './Section';
-import { withTranslation } from "react-i18next";
+import { withTranslation } from 'react-i18next';
 
-import { withRouter } from "react-router";
+import { withRouter } from 'react-router';
-import { inject, observer } from "mobx-react";
+import { inject, observer } from 'mobx-react';
 
 class ProfileAction extends React.Component {
   componentDidMount() {
@@ -38,8 +43,8 @@ class ProfileAction extends React.Component {
     } = this.props;
     const { userId } = match.params;
     setFirstLoad(false);
-    this.documentElement = document.getElementsByClassName("hidingHeader");
+    this.documentElement = document.getElementsByClassName('hidingHeader');
-    setDocumentTitle(t("ProfileAction"));
+    setDocumentTitle(t('ProfileAction'));
     if (isEdit) {
       setIsEditingForm(false);
     }
@@ -50,7 +55,7 @@ class ProfileAction extends React.Component {
 
     if (!this.loaded && this.documentElement) {
       for (var i = 0; i < this.documentElement.length; i++) {
-        this.documentElement[i].style.transition = "none";
+        this.documentElement[i].style.transition = 'none';
       }
     }
   }
@@ -66,7 +71,7 @@ class ProfileAction extends React.Component {
 
     if (this.loaded && this.documentElement) {
       for (var i = 0; i < this.documentElement.length; i++) {
-        this.documentElement[i].style.transition = "";
+        this.documentElement[i].style.transition = '';
       }
     }
   }
@@ -76,10 +81,10 @@ class ProfileAction extends React.Component {
   }
 
   render() {
-    console.log("ProfileAction render");
+    console.log('ProfileAction render');
 
     this.loaded = false;
-    const { profile, match, isMy, tReady } = this.props;
+    const { profile, match, isMy, tReady, showCatalog, isAdmin } = this.props;
     const { userId, type } = match.params;
 
     if (type) {
@@ -90,17 +95,40 @@ class ProfileAction extends React.Component {
 
     return (
       <PageLayout>
+        {showCatalog && (
+          <PageLayout.CatalogHeader>
+            <CatalogHeaderContent />
+          </PageLayout.CatalogHeader>
+        )}
+
+        {showCatalog && isAdmin && (
+          <PageLayout.CatalogMainButton>
+            <CatalogMainButtonContent />
+          </PageLayout.CatalogMainButton>
+        )}
+        {showCatalog && (
+          <PageLayout.CatalogBody>
+            <CatalogBodyContent />
+          </PageLayout.CatalogBody>
+        )}
+
+        {!showCatalog && (
           <PageLayout.ArticleHeader>
             <ArticleHeaderContent />
           </PageLayout.ArticleHeader>
+        )}
 
+        {!showCatalog && (
           <PageLayout.ArticleMainButton>
             <ArticleMainButtonContent />
           </PageLayout.ArticleMainButton>
+        )}
 
+        {!showCatalog && (
           <PageLayout.ArticleBody>
             <ArticleBodyContent />
           </PageLayout.ArticleBody>
+        )}
 
         <PageLayout.SectionHeader>
           <SectionHeaderContent tReady={tReady} loaded={this.loaded} />
@@ -126,12 +154,7 @@ ProfileAction.propTypes = {
 export default withRouter(
   inject(({ auth, peopleStore }) => {
     const { setDocumentTitle } = auth;
-    const {
+    const { usersStore, editingFormStore, targetUserStore, loadingStore } = peopleStore;
-      usersStore,
-      editingFormStore,
-      targetUserStore,
-      loadingStore,
-    } = peopleStore;
     const { setProviders } = usersStore;
     const { isEdit, setIsEditingForm } = editingFormStore;
     const {
@@ -151,6 +174,8 @@ export default withRouter(
       setFirstLoad,
       setLoadedProfile,
       setIsEditTargetUser,
+      isAdmin: auth.isAdmin,
+      showCatalog: auth.settingsStore.showCatalog,
     };
-  })(withTranslation(["ProfileAction", "Common"])(observer(ProfileAction)))
+  })(withTranslation(['ProfileAction', 'Common'])(observer(ProfileAction))),
 );