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

packages/client/src/pages/Accounts/Home/Section/Body/RowView/PeopleRowContainer.js

@@ -14,11 +14,17 @@ const PeopleRowContainer = ({
   viewAs,
   setViewAs,
   theme,
+  infoPanelVisible,
 }) => {
   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");
     } 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));

packages/client/src/pages/Accounts/Home/Section/Body/TableView/TableContainer.js

@@ -20,12 +20,19 @@ const Table = ({
   isOwner,
   changeType,
   userId,
+  infoPanelVisible,
 }) => {
   const ref = useRef(null);
 
   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");
     } 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));

packages/client/src/pages/Accounts/Home/Section/Body/TableView/TableHeader.js

@@ -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"])(