Web:Client:Accounts: add info-panel logic for table view

This commit is contained in:
TimofeyBoyko 2022-08-23 11:10:09 +03:00
parent 906b660d44
commit 4818d2aa86
3 changed files with 35 additions and 6 deletions

View File

@ -14,11 +14,17 @@ const PeopleRowContainer = ({
viewAs,
setViewAs,
theme,
infoPanelVisible,
}) => {
useEffect(() => {
if (viewAs !== "table" && viewAs !== "row") return;
if (sectionWidth < 1025 || isMobile) {
if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return;
// 400 - it is desktop info panel width
if (
(sectionWidth < 1025 && !infoPanelVisible) ||
((sectionWidth < 625 || (viewAs === "row" && sectionWidth < 1025)) &&
infoPanelVisible) ||
isMobile
) {
viewAs !== "row" && setViewAs("row");
} else {
viewAs !== "table" && setViewAs("table");
@ -46,10 +52,13 @@ export default inject(({ peopleStore, auth }) => {
const { theme } = auth.settingsStore;
const { peopleList } = usersStore;
const { isVisible: infoPanelVisible } = auth.infoPanelStore;
return {
peopleList,
viewAs,
setViewAs,
theme,
infoPanelVisible,
};
})(observer(PeopleRowContainer));

View File

@ -20,12 +20,19 @@ const Table = ({
isOwner,
changeType,
userId,
infoPanelVisible,
}) => {
const ref = useRef(null);
useEffect(() => {
if (!sectionWidth) return;
if (sectionWidth < 1025 || isMobile) {
if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return;
// 400 - it is desktop info panel width
if (
(sectionWidth < 1025 && !infoPanelVisible) ||
((sectionWidth < 625 || (viewAs === "row" && sectionWidth < 1025)) &&
infoPanelVisible) ||
isMobile
) {
viewAs !== "row" && setViewAs("row");
} else {
viewAs !== "table" && setViewAs("table");
@ -59,6 +66,8 @@ export default inject(({ peopleStore, auth }) => {
const { theme } = auth.settingsStore;
const { peopleList } = usersStore;
const { isVisible: infoPanelVisible } = auth.infoPanelStore;
const { isAdmin, isOwner, id: userId } = auth.userStore.user;
return {
@ -70,5 +79,6 @@ export default inject(({ peopleStore, auth }) => {
isOwner,
changeType,
userId,
infoPanelVisible,
};
})(observer(Table));

View File

@ -121,7 +121,13 @@ class PeopleTableHeader extends React.Component {
render() {
const { columns } = this.state;
const { containerRef, filter, sectionWidth, userId } = this.props;
const {
containerRef,
filter,
sectionWidth,
userId,
infoPanelVisible,
} = this.props;
const { sortOrder } = filter;
return (
@ -131,8 +137,10 @@ class PeopleTableHeader extends React.Component {
containerRef={containerRef}
columns={columns}
columnStorageName={`${COLUMNS_SIZE}=${userId}`}
columnInfoPanelStorageName={`${INFO_PANEL_COLUMNS_SIZE}=${userId}`}
sectionWidth={sectionWidth}
checkboxMargin="12px"
infoPanelVisible={infoPanelVisible}
/>
);
}
@ -145,11 +153,13 @@ export default inject(({ auth, peopleStore }) => {
const { getUsersList } = usersStore;
const { setIsLoading } = loadingStore;
const { isVisible: infoPanelVisible } = auth.infoPanelStore;
return {
filter,
fetchPeople: getUsersList,
setIsLoading,
userId: auth.userStore.user.id,
infoPanelVisible,
};
})(
withTranslation(["People", "Common", "PeopleTranslations"])(