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,
|
||||
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));
|
||||
|
@ -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));
|
||||
|
@ -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"])(
|
||||
|
Loading…
Reference in New Issue
Block a user