diff --git a/src/components/elements/Map-mapbox/Map.tsx b/src/components/elements/Map-mapbox/Map.tsx index e2c411533..253897d82 100644 --- a/src/components/elements/Map-mapbox/Map.tsx +++ b/src/components/elements/Map-mapbox/Map.tsx @@ -21,6 +21,7 @@ import { BBox } from "./GeoJSON"; import type { TooltipType } from "./Map.d"; import CheckPolygonControl from "./MapControls/CheckPolygonControl"; import EditControl from "./MapControls/EditControl"; +import EmptyStateDisplay from "./MapControls/EmptyStateDisplay"; import { FilterControl } from "./MapControls/FilterControl"; import ImageControl from "./MapControls/ImageControl"; import PolygonCheck from "./MapControls/PolygonCheck"; @@ -78,6 +79,7 @@ interface MapProps extends Omit mapFunctions?: any; tooltipType?: TooltipType; sitePolygonData?: SitePolygonsDataResponse; + polygonsExists?: boolean; } export const MapContainer = ({ @@ -102,6 +104,7 @@ export const MapContainer = ({ showLegend = false, mapFunctions, tooltipType = "view", + polygonsExists = true, ...props }: MapProps) => { const [viewImages, setViewImages] = useState(false); @@ -291,6 +294,9 @@ export const MapContainer = ({ + + + ); }; diff --git a/src/components/elements/Map-mapbox/MapControls/EmptyStateDisplay.tsx b/src/components/elements/Map-mapbox/MapControls/EmptyStateDisplay.tsx new file mode 100644 index 000000000..a60f68a88 --- /dev/null +++ b/src/components/elements/Map-mapbox/MapControls/EmptyStateDisplay.tsx @@ -0,0 +1,20 @@ +import { useT } from "@transifex/react"; + +import Text from "../../Text/Text"; + +const EmptyStateDisplay = () => { + const t = useT(); + return ( +
+
+ + {t("Polygons have not been")} +
+ {t("created for this site")} +
+
+
+ ); +}; + +export default EmptyStateDisplay; diff --git a/src/pages/project/[uuid]/components/OverviewMapArea.tsx b/src/pages/project/[uuid]/components/OverviewMapArea.tsx index 6b93b3f21..dcfea510c 100644 --- a/src/pages/project/[uuid]/components/OverviewMapArea.tsx +++ b/src/pages/project/[uuid]/components/OverviewMapArea.tsx @@ -7,6 +7,7 @@ import { MapContainer } from "@/components/elements/Map-mapbox/Map"; import { getPolygonsData } from "@/components/elements/Map-mapbox/utils"; import MapSidePanel from "@/components/elements/MapSidePanel/MapSidePanel"; import { APPROVED, DRAFT, NEEDS_MORE_INFORMATION, SUBMITTED } from "@/constants/statuses"; +import { fetchGetV2DashboardCountryCountry } from "@/generated/apiComponents"; import { SitePolygonsDataResponse } from "@/generated/apiSchemas"; import { useDate } from "@/hooks/useDate"; @@ -30,7 +31,19 @@ const OverviewMapArea = ({ entityModel, type }: EntityAreaProps) => { setEntityBbox(result.bbox as BBox); } }; - + const callCountryBBox = async () => { + let currentCountry = entityModel?.country; + if (type === "sites") { + currentCountry = entityModel?.project?.country; + } + const countryBbox = await fetchGetV2DashboardCountryCountry({ + pathParams: { country: currentCountry } + }); + if (Array.isArray(countryBbox.bbox) && countryBbox.bbox.length > 1) { + const bboxFormat = countryBbox.bbox[1] as unknown as BBox; + setEntityBbox(bboxFormat); + } + }; useEffect(() => { if (entityModel?.uuid) { const statusFilter = checkedValues.join(","); @@ -55,6 +68,7 @@ const OverviewMapArea = ({ entityModel, type }: EntityAreaProps) => { [NEEDS_MORE_INFORMATION]: [], [DRAFT]: [] }); + callCountryBBox(); } }, [polygonsData]); @@ -94,6 +108,7 @@ const OverviewMapArea = ({ entityModel, type }: EntityAreaProps) => { showLegend siteData={true} className="flex-1 rounded-r-lg" + polygonsExists={polygonsData.length > 0} /> );