Web:People: added catalog
This commit is contained in:
parent
bd56abaa0a
commit
076fbcdab7
@ -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");
|
||||
|
||||
@ -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) =>
|
||||
|
||||
145
products/ASC.People/Client/src/components/Catalog/Body/index.js
Normal file
145
products/ASC.People/Client/src/components/Catalog/Body/index.js
Normal file
@ -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));
|
||||
@ -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));
|
||||
@ -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 />),
|
||||
),
|
||||
),
|
||||
);
|
||||
@ -0,0 +1,3 @@
|
||||
export { default as CatalogHeaderContent } from './Header';
|
||||
export { default as CatalogBodyContent } from './Body';
|
||||
export { default as CatalogMainButtonContent } from './MainButton';
|
||||
@ -1,22 +1,27 @@
|
||||
import React from "react";
|
||||
import Loader from "@appserver/components/loader";
|
||||
import PageLayout from "@appserver/common/components/PageLayout";
|
||||
import React from 'react';
|
||||
import Loader from '@appserver/components/loader';
|
||||
import PageLayout from '@appserver/common/components/PageLayout';
|
||||
import {
|
||||
ArticleHeaderContent,
|
||||
ArticleMainButtonContent,
|
||||
ArticleBodyContent,
|
||||
} from "../../components/Article";
|
||||
import { SectionHeaderContent, SectionBodyContent } from "./Section";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import { withRouter } from "react-router";
|
||||
import { inject, observer } from "mobx-react";
|
||||
} from '../../components/Article';
|
||||
import {
|
||||
CatalogHeaderContent,
|
||||
CatalogMainButtonContent,
|
||||
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}>
|
||||
<PageLayout.ArticleHeader>
|
||||
<ArticleHeaderContent />
|
||||
</PageLayout.ArticleHeader>
|
||||
{showCatalog && (
|
||||
<PageLayout.CatalogHeader>
|
||||
<CatalogHeaderContent />
|
||||
</PageLayout.CatalogHeader>
|
||||
)}
|
||||
|
||||
<PageLayout.ArticleMainButton>
|
||||
<ArticleMainButtonContent />
|
||||
</PageLayout.ArticleMainButton>
|
||||
{showCatalog && isAdmin && (
|
||||
<PageLayout.CatalogMainButton>
|
||||
<CatalogMainButtonContent />
|
||||
</PageLayout.CatalogMainButton>
|
||||
)}
|
||||
{showCatalog && (
|
||||
<PageLayout.CatalogBody>
|
||||
<CatalogBodyContent />
|
||||
</PageLayout.CatalogBody>
|
||||
)}
|
||||
|
||||
<PageLayout.ArticleBody>
|
||||
<ArticleBodyContent />
|
||||
</PageLayout.ArticleBody>
|
||||
{!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"])(
|
||||
GroupAction
|
||||
);
|
||||
const GroupActionContainer = withTranslation(['GroupAction', 'Common'])(GroupAction);
|
||||
export default withRouter(
|
||||
inject(({ auth, peopleStore }) => {
|
||||
const { setDocumentTitle } = auth;
|
||||
const { selectedGroupStore, loadingStore } = peopleStore;
|
||||
const {
|
||||
setTargetedGroup: fetchGroup,
|
||||
targetedGroup: group,
|
||||
resetGroup,
|
||||
} = selectedGroupStore;
|
||||
const { 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)),
|
||||
);
|
||||
|
||||
@ -1,42 +1,49 @@
|
||||
import React, { useEffect } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { withRouter } from "react-router";
|
||||
import Filter from "@appserver/common/api/people/filter";
|
||||
import PageLayout from "@appserver/common/components/PageLayout";
|
||||
import { showLoader, hideLoader } from "@appserver/common/utils";
|
||||
import React, { useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { withRouter } from 'react-router';
|
||||
import Filter from '@appserver/common/api/people/filter';
|
||||
import PageLayout from '@appserver/common/components/PageLayout';
|
||||
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";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import Dialogs from "./Section/Body/Dialogs"; //TODO: Move dialogs to another folder
|
||||
} from './Section';
|
||||
import { inject, observer } from 'mobx-react';
|
||||
import { isMobile } from 'react-device-detect';
|
||||
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(
|
||||
"#customScrollBar > .scroll-body"
|
||||
);
|
||||
const customScrollElm = document.querySelector('#customScrollBar > .scroll-body');
|
||||
customScrollElm && customScrollElm.scrollTo(0, 0);
|
||||
}
|
||||
}, [selectedGroup]);
|
||||
@ -58,22 +63,41 @@ const Home = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageLayout
|
||||
withBodyScroll
|
||||
withBodyAutoFocus={!isMobile}
|
||||
isLoading={isLoading}
|
||||
>
|
||||
<PageLayout.ArticleHeader>
|
||||
<ArticleHeaderContent />
|
||||
</PageLayout.ArticleHeader>
|
||||
<PageLayout withBodyScroll withBodyAutoFocus={!isMobile} isLoading={isLoading}>
|
||||
{showCatalog && (
|
||||
<PageLayout.CatalogHeader>
|
||||
<CatalogHeaderContent />
|
||||
</PageLayout.CatalogHeader>
|
||||
)}
|
||||
|
||||
<PageLayout.ArticleMainButton>
|
||||
<ArticleMainButtonContent />
|
||||
</PageLayout.ArticleMainButton>
|
||||
{showCatalog && isAdmin && (
|
||||
<PageLayout.CatalogMainButton>
|
||||
<CatalogMainButtonContent />
|
||||
</PageLayout.CatalogMainButton>
|
||||
)}
|
||||
{showCatalog && (
|
||||
<PageLayout.CatalogBody>
|
||||
<CatalogBodyContent />
|
||||
</PageLayout.CatalogBody>
|
||||
)}
|
||||
|
||||
<PageLayout.ArticleBody>
|
||||
<ArticleBodyContent />
|
||||
</PageLayout.ArticleBody>
|
||||
{!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)));
|
||||
|
||||
@ -1,17 +1,22 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import PageLayout from "@appserver/common/components/PageLayout";
|
||||
import toastr from "studio/toastr";
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import PageLayout from '@appserver/common/components/PageLayout';
|
||||
import toastr from 'studio/toastr';
|
||||
import {
|
||||
ArticleHeaderContent,
|
||||
ArticleMainButtonContent,
|
||||
ArticleBodyContent,
|
||||
} from "../../components/Article";
|
||||
import { SectionHeaderContent, SectionBodyContent } from "./Section";
|
||||
import { withRouter } from "react-router";
|
||||
} from '../../components/Article';
|
||||
import {
|
||||
CatalogHeaderContent,
|
||||
CatalogMainButtonContent,
|
||||
CatalogBodyContent,
|
||||
} from '../../components/Catalog';
|
||||
import { SectionHeaderContent, SectionBodyContent } from './Section';
|
||||
import { withRouter } from 'react-router';
|
||||
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import { inject, observer } from 'mobx-react';
|
||||
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"));
|
||||
this.documentElement = document.getElementsByClassName("hidingHeader");
|
||||
const queryString = ((location && location.search) || "").slice(1);
|
||||
const queryParams = queryString.split("&");
|
||||
const arrayOfQueryParams = queryParams.map((queryParam) =>
|
||||
queryParam.split("=")
|
||||
);
|
||||
setDocumentTitle(t('Common:Profile'));
|
||||
this.documentElement = document.getElementsByClassName('hidingHeader');
|
||||
const queryString = ((location && location.search) || '').slice(1);
|
||||
const queryParams = queryString.split('&');
|
||||
const arrayOfQueryParams = queryParams.map((queryParam) => queryParam.split('='));
|
||||
const linkParams = Object.fromEntries(arrayOfQueryParams);
|
||||
|
||||
if (linkParams.email_change && linkParams.email_change === "success") {
|
||||
toastr.success(t("ChangeEmailSuccess"));
|
||||
if (linkParams.email_change && linkParams.email_change === 'success') {
|
||||
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>
|
||||
<PageLayout.ArticleHeader>
|
||||
<ArticleHeaderContent />
|
||||
</PageLayout.ArticleHeader>
|
||||
{showCatalog && (
|
||||
<PageLayout.CatalogHeader>
|
||||
<CatalogHeaderContent />
|
||||
</PageLayout.CatalogHeader>
|
||||
)}
|
||||
|
||||
<PageLayout.ArticleMainButton>
|
||||
<ArticleMainButtonContent />
|
||||
</PageLayout.ArticleMainButton>
|
||||
{showCatalog && isAdmin && (
|
||||
<PageLayout.CatalogMainButton>
|
||||
<CatalogMainButtonContent />
|
||||
</PageLayout.CatalogMainButton>
|
||||
)}
|
||||
{showCatalog && (
|
||||
<PageLayout.CatalogBody>
|
||||
<CatalogBodyContent />
|
||||
</PageLayout.CatalogBody>
|
||||
)}
|
||||
|
||||
<PageLayout.ArticleBody>
|
||||
<ArticleBodyContent />
|
||||
</PageLayout.ArticleBody>
|
||||
{!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))),
|
||||
);
|
||||
|
||||
@ -1,27 +1,32 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import PageLayout from "@appserver/common/components/PageLayout";
|
||||
import Loaders from "@appserver/common/components/Loaders";
|
||||
import toastr from "studio/toastr";
|
||||
import { linkOAuth } from "@appserver/common/api/people";
|
||||
import { getAuthProviders } from "@appserver/common/api/settings";
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import PageLayout from '@appserver/common/components/PageLayout';
|
||||
import Loaders from '@appserver/common/components/Loaders';
|
||||
import toastr from 'studio/toastr';
|
||||
import { linkOAuth } from '@appserver/common/api/people';
|
||||
import { getAuthProviders } from '@appserver/common/api/settings';
|
||||
import {
|
||||
ArticleHeaderContent,
|
||||
ArticleMainButtonContent,
|
||||
ArticleBodyContent,
|
||||
} from "../../components/Article";
|
||||
import SectionUserBody from "./Section/Body/index";
|
||||
} from '../../components/Article';
|
||||
import {
|
||||
CatalogHeaderContent,
|
||||
CatalogMainButtonContent,
|
||||
CatalogBodyContent,
|
||||
} from '../../components/Catalog';
|
||||
import SectionUserBody from './Section/Body/index';
|
||||
import {
|
||||
SectionHeaderContent,
|
||||
// CreateUserForm,
|
||||
// UpdateUserForm,
|
||||
// AvatarEditorPage,
|
||||
// CreateAvatarEditorPage,
|
||||
} from "./Section";
|
||||
import { withTranslation } from "react-i18next";
|
||||
} from './Section';
|
||||
import { withTranslation } from 'react-i18next';
|
||||
|
||||
import { withRouter } from "react-router";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { withRouter } from 'react-router';
|
||||
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");
|
||||
setDocumentTitle(t("ProfileAction"));
|
||||
this.documentElement = document.getElementsByClassName('hidingHeader');
|
||||
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>
|
||||
<PageLayout.ArticleHeader>
|
||||
<ArticleHeaderContent />
|
||||
</PageLayout.ArticleHeader>
|
||||
{showCatalog && (
|
||||
<PageLayout.CatalogHeader>
|
||||
<CatalogHeaderContent />
|
||||
</PageLayout.CatalogHeader>
|
||||
)}
|
||||
|
||||
<PageLayout.ArticleMainButton>
|
||||
<ArticleMainButtonContent />
|
||||
</PageLayout.ArticleMainButton>
|
||||
{showCatalog && isAdmin && (
|
||||
<PageLayout.CatalogMainButton>
|
||||
<CatalogMainButtonContent />
|
||||
</PageLayout.CatalogMainButton>
|
||||
)}
|
||||
{showCatalog && (
|
||||
<PageLayout.CatalogBody>
|
||||
<CatalogBodyContent />
|
||||
</PageLayout.CatalogBody>
|
||||
)}
|
||||
|
||||
<PageLayout.ArticleBody>
|
||||
<ArticleBodyContent />
|
||||
</PageLayout.ArticleBody>
|
||||
{!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 {
|
||||
usersStore,
|
||||
editingFormStore,
|
||||
targetUserStore,
|
||||
loadingStore,
|
||||
} = peopleStore;
|
||||
const { 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))),
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user