add spliter resizer to controlpanel and mapcontainer

react-client/package.json

@@ -30,6 +30,7 @@
  "react-leaflet": "^4.2.1",
  "react-redux": "^9.1.2",
  "react-router-dom": "^6.23.0",
+ "split.js": "^1.6.5",
  "typeface-roboto": "^1.1.13"
  },
  "devDependencies": {

react-client/src/store/slices/uiMapSlice.ts

@@ -3,9 +3,11 @@ import { ReverseGeocodingRes } from "@/services/GeocodingService";
 import { mapObjectPropertiesUndefined } from "@/utilities/commonHelpers";
 import { RootState } from "@/store/store";
 
-type UiSelectedMapLocation = Partial<ReverseGeocodingRes>;
+type UiSelectedMapLocation = Partial<ReverseGeocodingRes> & {
+ shouldInvalidateSize: boolean;
+};
 
-const initialState: UiSelectedMapLocation = {};
+const initialState: UiSelectedMapLocation = { shouldInvalidateSize: true };
 
 export const uiMapSlice = createSlice({
  name: "ui-map",
@@ -34,10 +36,14 @@ export const uiMapSlice = createSlice({
  const undefinedState = mapObjectPropertiesUndefined(state);
  Object.assign(state, undefinedState);
  },
+ invalidateMapSize: (state) => {
+ state.shouldInvalidateSize = !state.shouldInvalidateSize;
+ },
  },
 });
 
-export const { setLocation, clearLocation } = uiMapSlice.actions;
+export const { setLocation, clearLocation, invalidateMapSize } =
+ uiMapSlice.actions;
 
 // Define the typed selector function
 export const selectValidMapLocation = (state: RootState) => {

react-client/src/views/mapView/ControlPanelItems/ControlPanel.tsx

@@ -26,7 +26,7 @@ const ControlPanel = () => {
  );
 
  return (
- <PaddedStack spacing={1}>
+ <PaddedStack spacing={2}>
  <SelectControlPanelDropdown />
  {ComponentMap[selectedControlViewComponent]}
  </PaddedStack>

react-client/src/views/mapView/ControlPanelItems/components/AddCompanyComponent.tsx

@@ -41,6 +41,7 @@ const AddCompany = () => {
 
  const mapLocation = useAppSelector(selectValidMapLocation);
  const controllerComponent = useAppSelector(selectedControllerComponent);
+ const isLoggedIn = useAppSelector((s) => s.auth.isLoggedIn);
 
  // Clear location selection when component is changed
  useEffect(() => {
@@ -52,6 +53,10 @@ const AddCompany = () => {
  };
  }, [dispatch, controllerComponent]);
 
+ if (!isLoggedIn) {
+ return <Typography>Log in to select place for adding company</Typography>;
+ }
+
  if (mapLocation === null) {
  return <Typography>Select position from map</Typography>;
  }

react-client/src/views/mapView/MapPage.tsx

@@ -1,28 +1,51 @@
+import { useEffect, useRef } from "react";
+import Split from "split.js";
 import { styled } from "@mui/material";
+import { useAppDispatch } from "@/hooks/useStoreHooks";
 import ControlPanel from "@/views/mapView/ControlPanelItems/ControlPanel";
 import LeafletMap from "@/views/mapView/mapComponents/LeafletMap";
+import "@/views/mapView/gutter.css";
+import { invalidateMapSize } from "@/store/slices/uiMapSlice";
 
 const PageSection = styled("section")({
- flex: 1,
  display: "flex",
  flexDirection: "column",
+ height: "100%",
+ overflow: "hidden",
 });
 
 const ViewContainer = styled("div")({
  display: "flex",
  flexDirection: "row",
  width: "100%",
- height: "100%",
- flex: 1,
+ flexGrow: 1,
+ height: "calc(100vh - 130px)", // Adjust this based on your footer height
 });
 
 const MapPage = () => {
+ const dispatch = useAppDispatch();
+ const leftRef = useRef<HTMLDivElement>(null);
+ const rightRef = useRef<HTMLDivElement>(null);
+
+ useEffect(() => {
+ if (leftRef.current && rightRef.current) {
+ Split([leftRef.current, rightRef.current], {
+ sizes: [50, 50],
+ minSize: [200, 400],
+ gutterSize: 5,
+ cursor: "col-resize",
+ onDrag: () => dispatch(invalidateMapSize()),
+ onDragEnd: () => dispatch(invalidateMapSize()),
+ });
+ }
+ }, [dispatch]);
+
  return (
  <ViewContainer>
- <PageSection>
+ <PageSection id="split-col-left" ref={leftRef}>
  <ControlPanel />
  </PageSection>
- <PageSection>
+ <PageSection id="split-col-right" ref={rightRef}>
  <LeafletMap />
  </PageSection>
  </ViewContainer>

react-client/src/views/mapView/gutter.css

@@ -0,0 +1,14 @@
+.gutter {
+ background-color: #505050;
+ background-repeat: no-repeat;
+ background-position: 70%;
+}
+
+.gutter.gutter-vertical {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=");
+ cursor: row-resize;
+}
+.gutter.gutter-horizontal {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==");
+ cursor: col-resize;
+}

react-client/src/views/mapView/mapComponents/LeafletMap.tsx

@@ -1,8 +1,10 @@
+import { useEffect } from "react";
 import {
  MapContainer,
  Marker,
  Popup,
  TileLayer,
+ useMap,
  useMapEvents,
 } from "react-leaflet";
 import L from "leaflet";
@@ -28,6 +30,9 @@ L.Icon.Default.mergeOptions({
 const LeafletMap = () => {
  const dispatch = useAppDispatch();
  const controllerComponent = useAppSelector(selectedControllerComponent);
+ const shouldInvalidateMapSize = useAppSelector(
+ (s) => s.uiMap.shouldInvalidateSize
+ );
 
  const handleMapClick = async (lat: number, lng: number) => {
  if (controllerComponent === "AddCompany") {
@@ -51,15 +56,26 @@ const LeafletMap = () => {
  return null;
  };
 
+ const ResizeHandler = () => {
+ const map = useMap();
+
+ useEffect(() => {
+ shouldInvalidateMapSize && map.invalidateSize();
+ }, [map]);
+
+ return null;
+ };
+
  return (
  <MapContainer
- center={[51.505, -0.09]}
- zoom={13}
+ center={[61.4898, 23.7734]}
+ zoom={14}
  style={{ height: "100%", width: "100%" }}
  >
  <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
  <MapEventHandlers />
- <Marker position={[51.505, -0.09]}>
+ <ResizeHandler />
+ <Marker position={[61.4898, 23.7734]}>
  <Popup>
  A pretty CSS3 popup. <br /> Easily customizable.
  </Popup>