Skip to content

Commit

Permalink
Merge pull request #253 from wri/feat/TM-874-Site-Profile-Non-Monitor…
Browse files Browse the repository at this point in the history
…ing-Partner

[TM-874] site profile non monitoring partner
  • Loading branch information
cesarLima1 authored Jun 17, 2024
2 parents affbc87 + 1a6e37f commit 56c12c0
Show file tree
Hide file tree
Showing 22 changed files with 1,510 additions and 240 deletions.
20 changes: 5 additions & 15 deletions src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@ import { VARIANT_FILE_INPUT_MODAL_ADD_IMAGES } from "@/components/elements/Input
import { BBox } from "@/components/elements/Map-mapbox/GeoJSON";
import { useMap } from "@/components/elements/Map-mapbox/hooks/useMap";
import { MapContainer } from "@/components/elements/Map-mapbox/Map";
import { addSourcesToLayers, mapPolygonData } from "@/components/elements/Map-mapbox/utils";
import {
addSourcesToLayers,
downloadSiteGeoJsonPolygons,
mapPolygonData
} from "@/components/elements/Map-mapbox/utils";
import Menu from "@/components/elements/Menu/Menu";
import { MENU_PLACEMENT_RIGHT_BOTTOM, MENU_PLACEMENT_RIGHT_TOP } from "@/components/elements/Menu/MenuVariant";
import Table from "@/components/elements/Table/Table";
Expand All @@ -23,7 +27,6 @@ import { useModalContext } from "@/context/modal.provider";
import { SitePolygonDataProvider } from "@/context/sitePolygon.provider";
import {
fetchDeleteV2TerrafundPolygonUuid,
fetchGetV2TerrafundGeojsonSite,
fetchGetV2TerrafundPolygonBboxUuid,
fetchPostV2TerrafundPolygon,
fetchPostV2TerrafundSitePolygonUuidSiteUuid,
Expand Down Expand Up @@ -203,19 +206,6 @@ const PolygonReviewTab: FC<IProps> = props => {
);
};

const downloadSiteGeoJsonPolygons = async (siteUuid: string) => {
const polygonGeojson = await fetchGetV2TerrafundGeojsonSite({
queryParams: { uuid: siteUuid }
});
const blob = new Blob([JSON.stringify(polygonGeojson)], { type: "application/json" });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = `SitePolygons.geojson`;
link.click();
URL.revokeObjectURL(url);
};

useEffect(() => {
if (files && files.length > 0 && saveFlags) {
uploadFiles();
Expand Down
2 changes: 1 addition & 1 deletion src/components/elements/Map-mapbox/Map.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,7 @@ export const MapContainer = ({
};

return (
<div ref={mapContainer} className={twMerge("h-[500px] wide:h-[700px]", className)} id="mapContainer">
<div ref={mapContainer} className={twMerge("h-[500px] wide:h-[700px]", className)} id="map-container">
<When condition={hasControls}>
<When condition={polygonFromMap?.isOpen}>
<ControlGroup position="top-center">
Expand Down
1 change: 1 addition & 0 deletions src/components/elements/Map-mapbox/hooks/useMap.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export const useMap = (onSave?: (geojson: any, record: any) => void) => {

const initMap = () => {
if (map.current) return;

map.current = new mapboxgl.Map({
container: mapContainer.current as HTMLDivElement,
style: MAP_STYLE,
Expand Down
27 changes: 27 additions & 0 deletions src/components/elements/Map-mapbox/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { createElement } from "react";
import { createRoot } from "react-dom/client";

import { layersList } from "@/constants/layers";
import { fetchGetV2TerrafundGeojsonSite, fetchGetV2TypeEntity } from "@/generated/apiComponents";
import { SitePolygon, SitePolygonsDataResponse } from "@/generated/apiSchemas";

import { BBox, FeatureCollection } from "./GeoJSON";
Expand Down Expand Up @@ -275,3 +276,29 @@ export function mapPolygonData(sitePolygonData: SitePolygonsDataResponse | undef
return acc;
}, {});
}

export function getPolygonsData(uuid: string, statusFilter: string, sortOrder: string, type: string, cb: Function) {
fetchGetV2TypeEntity({
queryParams: {
uuid: uuid,
type: type,
status: statusFilter,
[`sort[${sortOrder}]`]: sortOrder === "created_at" ? "desc" : "asc"
}
}).then(result => {
cb(result);
});
}

export async function downloadSiteGeoJsonPolygons(siteUuid: string): Promise<void> {
const polygonGeojson = await fetchGetV2TerrafundGeojsonSite({
queryParams: { uuid: siteUuid }
});
const blob = new Blob([JSON.stringify(polygonGeojson)], { type: "application/json" });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = `SitePolygons.geojson`;
link.click();
URL.revokeObjectURL(url);
}
156 changes: 156 additions & 0 deletions src/components/elements/MapPolygonPanel/AttributeInformation.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
import { useT } from "@transifex/react";

import Dropdown from "@/components/elements/Inputs/Dropdown/Dropdown";
import Input from "@/components/elements/Inputs/Input/Input";

import Text from "../Text/Text";

const dropdownOptionsRestoration = [
{
title: "Tree Planting",
value: 1
},
{
title: "Direct Seeding",
value: 2
},
{
title: "Assisted Natural Regeneration",
value: 3
}
];
const dropdownOptionsTarget = [
{
title: "Agroforest",
value: 1
},
{
title: "Natural Forest",
value: 2
},
{
title: "Mangrove",
value: 3
},
{
title: "Peatland",
value: 4
},
{
title: "Riparian Area or Wetland",
value: 5
},
{
title: "Silvopasture",
value: 6
},
{
title: "Woodlot or Plantation",
value: 7
},
{
title: "Urban Forest",
value: 8
}
];

const dropdownOptionsTree = [
{
title: "Single Line",
value: 1
},
{
title: "Partial",
value: 2
},
{
title: "Full",
value: 3
}
];
const AttributeInformation = () => {
const t = useT();

return (
<div className="flex flex-col gap-4">
<Input
label={t("Polygon Name")}
labelClassName="capitalize text-white"
labelVariant="text-14-light"
placeholder={t("Input Polygon Name")}
type="text"
name=""
/>
<label className="flex flex-col gap-2">
<Text variant="text-14-light" className="text-white">
{t("Plant Start Date")}
</Text>
<input
type="date"
className="rounded-lg border-neutral-200 focus:border-primary focus:shadow-none focus:ring-transparent"
placeholder={t("Input Plant Start Date")}
/>
</label>
<label className="flex flex-col gap-2">
<Text variant="text-14-light" className="text-white">
{t("Plant End Date")}
</Text>
<input
type="date"
className="rounded-lg border-neutral-200 focus:border-primary focus:shadow-none focus:ring-transparent"
placeholder={t("Input Plant Start Date")}
/>
</label>
<Dropdown
multiSelect
label={t("Restoration Practice")}
labelClassName="capitalize text-white"
labelVariant="text-14-light"
placeholder={t("Select Restoration Practice")}
options={dropdownOptionsRestoration}
value={[t("Planting Complete")]}
onChange={() => {}}
className="bg-white"
/>
<Dropdown
label={t("Target Land Use System")}
labelClassName="capitalize text-white"
labelVariant="text-14-light"
placeholder={t("Select Target Land Use System")}
options={dropdownOptionsTarget}
value={[t("Planting Complete")]}
onChange={() => {}}
className="bg-white"
/>
<Dropdown
multiSelect
label={t("Tree Distribution")}
labelClassName="capitalize text-white"
labelVariant="text-14-light"
placeholder={t("Select Tree Distribution")}
options={dropdownOptionsTree}
value={[t("Planting Complete")]}
onChange={() => {}}
className="bg-white"
/>
<Input
label={t("Trees Planted")}
labelClassName="capitalize text-white"
labelVariant="text-14-light"
placeholder={t("Input Trees Planted")}
type="text"
name=""
/>
<Input
label={t("Estimated Area")}
labelClassName="capitalize text-white"
labelVariant="text-14-light"
placeholder={t("Input Estimated Area")}
type="text"
name=""
/>
</div>
);
};

export default AttributeInformation;
86 changes: 86 additions & 0 deletions src/components/elements/MapPolygonPanel/ChecklistInformation.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import { useT } from "@transifex/react";

import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
import ModalWithMap from "@/components/extensive/Modal/ModalWithMap";
import { useModalContext } from "@/context/modal.provider";

import Button from "../Button/Button";
import Text from "../Text/Text";

const ChecklistInformation = () => {
const { openModal, closeModal } = useModalContext();
const t = useT();

const openFormModalHandlerRequestPolygonSupport = () => {
openModal(
<ModalWithMap
title={t("Request Support")}
onClose={closeModal}
primaryButtonText={t("Submit")}
content="-&nbsp;&nbsp;•&nbsp;&nbsp;-"
primaryButtonProps={{ className: "px-8 py-3", variant: "primary", onClick: closeModal }}
></ModalWithMap>
);
};
return (
<div className="text-white">
<Text variant="text-14-bold">3 {t("out")} 14</Text>
<Text variant="text-14-light">{t("Validation criteria are not met")}</Text>
<Button variant="primary" className="mt-4" onClick={openFormModalHandlerRequestPolygonSupport}>
{t("request support")}
</Button>
<div className="mt-3 grid gap-3">
<Text variant="text-14-light" className="flex items-center gap-2">
<Icon name={IconNames.CHECK_PROGRESSBAR} className="h-4 w-4 text-green-400 lg:h-5 lg:w-5" />
{t("GeoJSON Format")}
</Text>
<Text variant="text-14-light" className="flex items-center gap-2">
<Icon name={IconNames.CHECK_PROGRESSBAR} className="h-4 w-4 text-green-400 lg:h-5 lg:w-5" />
{t("WGS84 Projection")}
</Text>
<Text variant="text-14-light" className="flex items-center gap-2">
<Icon name={IconNames.IC_ERROR} className="h-5 w-5 lg:h-6 lg:w-6" />
{t("Earth Location")}
</Text>
<Text variant="text-14-light" className="flex items-center gap-2">
<Icon name={IconNames.IC_ERROR} className="h-5 w-5 lg:h-6 lg:w-6" />
{t("Country")}
</Text>
<Text variant="text-14-light" className="flex items-center gap-2">
<Icon name={IconNames.CHECK_PROGRESSBAR} className="h-4 w-4 text-green-400 lg:h-5 lg:w-5" />
{t("Reasonable Size Self-Intersecting Topology")}
</Text>
<Text variant="text-14-light" className="flex items-center gap-2">
<Icon name={IconNames.IC_ERROR} className="h-5 w-5 lg:h-6 lg:w-6" />
{t("Overlapping Polygons")}
</Text>
<Text variant="text-14-light" className="flex items-center gap-2">
<Icon name={IconNames.CHECK_PROGRESSBAR} className="h-4 w-4 text-green-400 lg:h-5 lg:w-5" />
{t("Spike")}
</Text>
<Text variant="text-14-light" className="flex items-center gap-2">
<Icon name={IconNames.CHECK_PROGRESSBAR} className="h-4 w-4 text-green-400 lg:h-5 lg:w-5" />
{t("Polygon Integrity")}
</Text>
<Text variant="text-14-light" className="flex items-center gap-2">
<Icon name={IconNames.CHECK_PROGRESSBAR} className="h-4 w-4 text-green-400 lg:h-5 lg:w-5" />
{t("GeoJSON Format")}
</Text>
<Text variant="text-14-light" className="flex items-center gap-2">
<Icon name={IconNames.CHECK_PROGRESSBAR} className="h-4 w-4 text-green-400 lg:h-5 lg:w-5" />
{t("WGS84 Projection")}
</Text>
<Text variant="text-14-light" className="flex items-center gap-2">
<Icon name={IconNames.IC_ERROR} className="h-5 w-5 lg:h-6 lg:w-6" />
{t("Earth Location")}
</Text>
<Text variant="text-14-light" className="flex items-center gap-2">
<Icon name={IconNames.IC_ERROR} className="h-5 w-5 lg:h-6 lg:w-6" />
{t("Country")}
</Text>
</div>
</div>
);
};

export default ChecklistInformation;
Loading

0 comments on commit 56c12c0

Please sign in to comment.