Web:Client:Accounts: add info-panel logic for table view
This commit is contained in:
parent
906b660d44
commit
4818d2aa86
@ -14,11 +14,17 @@ const PeopleRowContainer = ({
|
|||||||
viewAs,
|
viewAs,
|
||||||
setViewAs,
|
setViewAs,
|
||||||
theme,
|
theme,
|
||||||
|
infoPanelVisible,
|
||||||
}) => {
|
}) => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (viewAs !== "table" && viewAs !== "row") return;
|
if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return;
|
||||||
|
// 400 - it is desktop info panel width
|
||||||
if (sectionWidth < 1025 || isMobile) {
|
if (
|
||||||
|
(sectionWidth < 1025 && !infoPanelVisible) ||
|
||||||
|
((sectionWidth < 625 || (viewAs === "row" && sectionWidth < 1025)) &&
|
||||||
|
infoPanelVisible) ||
|
||||||
|
isMobile
|
||||||
|
) {
|
||||||
viewAs !== "row" && setViewAs("row");
|
viewAs !== "row" && setViewAs("row");
|
||||||
} else {
|
} else {
|
||||||
viewAs !== "table" && setViewAs("table");
|
viewAs !== "table" && setViewAs("table");
|
||||||
@ -46,10 +52,13 @@ export default inject(({ peopleStore, auth }) => {
|
|||||||
const { theme } = auth.settingsStore;
|
const { theme } = auth.settingsStore;
|
||||||
const { peopleList } = usersStore;
|
const { peopleList } = usersStore;
|
||||||
|
|
||||||
|
const { isVisible: infoPanelVisible } = auth.infoPanelStore;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
peopleList,
|
peopleList,
|
||||||
viewAs,
|
viewAs,
|
||||||
setViewAs,
|
setViewAs,
|
||||||
theme,
|
theme,
|
||||||
|
infoPanelVisible,
|
||||||
};
|
};
|
||||||
})(observer(PeopleRowContainer));
|
})(observer(PeopleRowContainer));
|
||||||
|
@ -20,12 +20,19 @@ const Table = ({
|
|||||||
isOwner,
|
isOwner,
|
||||||
changeType,
|
changeType,
|
||||||
userId,
|
userId,
|
||||||
|
infoPanelVisible,
|
||||||
}) => {
|
}) => {
|
||||||
const ref = useRef(null);
|
const ref = useRef(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!sectionWidth) return;
|
if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return;
|
||||||
if (sectionWidth < 1025 || isMobile) {
|
// 400 - it is desktop info panel width
|
||||||
|
if (
|
||||||
|
(sectionWidth < 1025 && !infoPanelVisible) ||
|
||||||
|
((sectionWidth < 625 || (viewAs === "row" && sectionWidth < 1025)) &&
|
||||||
|
infoPanelVisible) ||
|
||||||
|
isMobile
|
||||||
|
) {
|
||||||
viewAs !== "row" && setViewAs("row");
|
viewAs !== "row" && setViewAs("row");
|
||||||
} else {
|
} else {
|
||||||
viewAs !== "table" && setViewAs("table");
|
viewAs !== "table" && setViewAs("table");
|
||||||
@ -59,6 +66,8 @@ export default inject(({ peopleStore, auth }) => {
|
|||||||
const { theme } = auth.settingsStore;
|
const { theme } = auth.settingsStore;
|
||||||
const { peopleList } = usersStore;
|
const { peopleList } = usersStore;
|
||||||
|
|
||||||
|
const { isVisible: infoPanelVisible } = auth.infoPanelStore;
|
||||||
|
|
||||||
const { isAdmin, isOwner, id: userId } = auth.userStore.user;
|
const { isAdmin, isOwner, id: userId } = auth.userStore.user;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@ -70,5 +79,6 @@ export default inject(({ peopleStore, auth }) => {
|
|||||||
isOwner,
|
isOwner,
|
||||||
changeType,
|
changeType,
|
||||||
userId,
|
userId,
|
||||||
|
infoPanelVisible,
|
||||||
};
|
};
|
||||||
})(observer(Table));
|
})(observer(Table));
|
||||||
|
@ -121,7 +121,13 @@ class PeopleTableHeader extends React.Component {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { columns } = this.state;
|
const { columns } = this.state;
|
||||||
const { containerRef, filter, sectionWidth, userId } = this.props;
|
const {
|
||||||
|
containerRef,
|
||||||
|
filter,
|
||||||
|
sectionWidth,
|
||||||
|
userId,
|
||||||
|
infoPanelVisible,
|
||||||
|
} = this.props;
|
||||||
const { sortOrder } = filter;
|
const { sortOrder } = filter;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -131,8 +137,10 @@ class PeopleTableHeader extends React.Component {
|
|||||||
containerRef={containerRef}
|
containerRef={containerRef}
|
||||||
columns={columns}
|
columns={columns}
|
||||||
columnStorageName={`${COLUMNS_SIZE}=${userId}`}
|
columnStorageName={`${COLUMNS_SIZE}=${userId}`}
|
||||||
|
columnInfoPanelStorageName={`${INFO_PANEL_COLUMNS_SIZE}=${userId}`}
|
||||||
sectionWidth={sectionWidth}
|
sectionWidth={sectionWidth}
|
||||||
checkboxMargin="12px"
|
checkboxMargin="12px"
|
||||||
|
infoPanelVisible={infoPanelVisible}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -145,11 +153,13 @@ export default inject(({ auth, peopleStore }) => {
|
|||||||
const { getUsersList } = usersStore;
|
const { getUsersList } = usersStore;
|
||||||
const { setIsLoading } = loadingStore;
|
const { setIsLoading } = loadingStore;
|
||||||
|
|
||||||
|
const { isVisible: infoPanelVisible } = auth.infoPanelStore;
|
||||||
return {
|
return {
|
||||||
filter,
|
filter,
|
||||||
fetchPeople: getUsersList,
|
fetchPeople: getUsersList,
|
||||||
setIsLoading,
|
setIsLoading,
|
||||||
userId: auth.userStore.user.id,
|
userId: auth.userStore.user.id,
|
||||||
|
infoPanelVisible,
|
||||||
};
|
};
|
||||||
})(
|
})(
|
||||||
withTranslation(["People", "Common", "PeopleTranslations"])(
|
withTranslation(["People", "Common", "PeopleTranslations"])(
|
||||||
|
Loading…
Reference in New Issue
Block a user