Enable fullscreen table

src/Map/MapComponent.jsx

@@ -17,6 +17,8 @@ import { useMode } from "../stores/useMode";
 import { MODE_TO_STATUS_MAPPER } from "../config";
 import { FiltersButton } from "../modules/Sidebar/FiltersButton";
 import { LayersControl } from "./LayersControl/LayersControl";
+import { useTable } from "../stores/useTable";
+import { twMerge } from "tailwind-merge";
 
 export const MapComponent = () => {
   const mapRef = useRef(null);
@@ -25,6 +27,7 @@ export const MapComponent = () => {
   const { setClickedPointConfig } = useClickedPointConfig();
   const { setStatus } = useFilters();
   const { mode } = useMode();
+  const { tableState, openTable } = useTable();
 
   useEffect(() => {
     setStatus(MODE_TO_STATUS_MAPPER[mode]);
@@ -86,6 +89,12 @@ export const MapComponent = () => {
     };
   }, [mapContainerRef.current]);
 
+  useEffect(() => {
+    if (tableState.fullScreen && !tableState.isOpened) {
+      openTable();
+    }
+  }, [tableState.fullScreen]);
+
   const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
 
   const toggleCollapseSidebar = () =>
@@ -95,7 +104,10 @@ export const MapComponent = () => {
     <MapProvider>
       <Sidebar isCollapsed={isSidebarCollapsed} />
       <div className="flex-1 h-screen flex flex-col ">
-        <div ref={mapContainerRef} className="flex-1">
+        <div
+          ref={mapContainerRef}
+          className={twMerge(tableState.fullScreen ? "" : "flex-1")}
+        >
           <Map
             mapLib={maplibregl}
             // mapStyle={`https://api.maptiler.com/maps/voyager/style.json?key=${MAP_TILER_KEY}`}

src/Map/Popup.jsx

@@ -173,9 +173,9 @@ const MultipleFeaturesPopup = ({ features, onSelect }) => {
             className="flex items-center gap-x-1"
             block
             onClick={() => onSelect(feature)}
-            key={feature.properties.id}
+            key={feature.properties.location_id}
           >
-            <span>{feature.properties.id}</span>
+            <span>{feature.properties.location_id}</span>
             <span>{feature.properties.category}</span>
           </Button>
         );

src/modules/Table/HeaderWrapper.jsx

@@ -1,4 +1,25 @@
 import { ExportButton } from "./ExportButton";
+import { Button } from "antd";
+import { useTable } from "../../stores/useTable";
+import { FullscreenExitOutlined, FullscreenOutlined } from "@ant-design/icons";
+
+const ToggleFullScreenButton = () => {
+  const {
+    tableState: { fullScreen },
+    toggleFullScreen,
+  } = useTable();
+
+  const handleClick = (e) => {
+    e.stopPropagation();
+    toggleFullScreen();
+  };
+
+  return (
+    <Button onClick={handleClick}>
+      {fullScreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
+    </Button>
+  );
+};
 
 export const HeaderWrapper = ({
   leftColumn,
@@ -14,7 +35,10 @@ export const HeaderWrapper = ({
       </div>
       <div className={classes?.rightColumn}>
         {rightColumn}
-        {exportProvider && <ExportButton provider={exportProvider} />}
+        <div className="flex items-center gap-x-1">
+          {exportProvider && <ExportButton provider={exportProvider} />}
+          <ToggleFullScreenButton />
+        </div>
       </div>
     </div>
   );

src/modules/Table/Table.jsx

@@ -11,7 +11,6 @@ import { useTable } from "../../stores/useTable";
 
 export const Table = React.memo(
   ({
-    height = 200,
     rowSelection,
     data,
     pageSize,
@@ -25,10 +24,10 @@ export const Table = React.memo(
   }) => {
     const { clickedPointConfig } = useClickedPointConfig();
     const { map } = useMap();
-    const { isOpened, setIsOpened } = useTable();
+    const { tableState, toggleOpened } = useTable();
 
     const SCROLL = {
-      y: `${height}px`,
+      y: tableState.fullScreen ? "calc(100vh - 136px)" : "200px",
       x: "max-content",
     };
 
@@ -44,8 +43,8 @@ export const Table = React.memo(
     return (
       <Collapse
         bordered={false}
-        onChange={setIsOpened}
-        defaultActiveKey={isOpened ? "opened" : null}
+        onChange={toggleOpened}
+        defaultActiveKey={tableState.isOpened ? "opened" : null}
       >
         <Collapse.Panel
           key={"opened"}

src/stores/useTable.js

@@ -1,12 +1,29 @@
 import { create } from "zustand";
 import { immer } from "zustand/middleware/immer";
 
-const store = (set) => ({
+const INITIAL_STATE = {
   isOpened: false,
+  fullScreen: false,
+};
+
+const store = (set) => ({
+  tableState: INITIAL_STATE,
+
+  toggleOpened: (value) => {
+    set((state) => {
+      state.tableState.isOpened = value[0] === "opened";
+    });
+  },
+
+  toggleFullScreen: () => {
+    set((state) => {
+      state.tableState.fullScreen = !state.tableState.fullScreen;
+    });
+  },
 
-  setIsOpened: (value) => {
+  openTable: () => {
     set((state) => {
-      state.isOpened = value[0] === "opened";
+      state.tableState.isOpened = true;
     });
   },
 });