From 414695b80c5d4a24ac5d3207213c9b7b2951632f Mon Sep 17 00:00:00 2001 From: Dotty Date: Wed, 12 Jun 2024 11:28:00 -0400 Subject: [PATCH 01/19] [TM-874] add component map and panel in Site overview --- .../MapPolygonPanel/AttributeInformation.tsx | 152 +++++++++++++ .../MapPolygonPanel/ChecklistInformation.tsx | 82 +++++++ .../MapPolygonPanel/MapEditPolygonPanel.tsx | 95 ++++++++ .../MapPolygonCheckPanelItem.tsx | 209 ++++++++++++++++++ .../MapPolygonPanel/MapPolygonCkeckPanel.tsx | 69 ++++++ .../MapPolygonPanel.stories.tsx | 98 ++++++++ .../MapPolygonPanel/MapPolygonPanel.tsx | 101 +++++++++ .../MapPolygonPanel/MapPolygonPanelItem.tsx | 168 ++++++++++++++ .../MapPolygonPanel/MapPolygonSitePanel.tsx | 187 ++++++++++++++++ .../MapPolygonPanel/VersionInformation.tsx | 116 ++++++++++ .../site/[uuid]/components/MockedData.ts | 60 +++++ src/pages/site/[uuid]/components/SiteArea.tsx | 184 +++++++++++++++ src/pages/site/[uuid]/tabs/Overview.tsx | 155 ++++++++++++- 13 files changed, 1674 insertions(+), 2 deletions(-) create mode 100644 src/components/elements/MapPolygonPanel/AttributeInformation.tsx create mode 100644 src/components/elements/MapPolygonPanel/ChecklistInformation.tsx create mode 100644 src/components/elements/MapPolygonPanel/MapEditPolygonPanel.tsx create mode 100644 src/components/elements/MapPolygonPanel/MapPolygonCheckPanelItem.tsx create mode 100644 src/components/elements/MapPolygonPanel/MapPolygonCkeckPanel.tsx create mode 100644 src/components/elements/MapPolygonPanel/MapPolygonPanel.stories.tsx create mode 100644 src/components/elements/MapPolygonPanel/MapPolygonPanel.tsx create mode 100644 src/components/elements/MapPolygonPanel/MapPolygonPanelItem.tsx create mode 100644 src/components/elements/MapPolygonPanel/MapPolygonSitePanel.tsx create mode 100644 src/components/elements/MapPolygonPanel/VersionInformation.tsx create mode 100644 src/pages/site/[uuid]/components/SiteArea.tsx diff --git a/src/components/elements/MapPolygonPanel/AttributeInformation.tsx b/src/components/elements/MapPolygonPanel/AttributeInformation.tsx new file mode 100644 index 000000000..066b764b7 --- /dev/null +++ b/src/components/elements/MapPolygonPanel/AttributeInformation.tsx @@ -0,0 +1,152 @@ +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 = () => { + return ( +
+ + + + {}} + className="bg-white" + /> + {}} + className="bg-white" + /> + {}} + className="bg-white" + /> + + +
+ ); +}; + +export default AttributeInformation; diff --git a/src/components/elements/MapPolygonPanel/ChecklistInformation.tsx b/src/components/elements/MapPolygonPanel/ChecklistInformation.tsx new file mode 100644 index 000000000..3412f1c5e --- /dev/null +++ b/src/components/elements/MapPolygonPanel/ChecklistInformation.tsx @@ -0,0 +1,82 @@ +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 openFormModalHandlerRequestPolygonSupport = () => { + openModal( + + ); + }; + return ( +
+ 3 out 14 + Validation criteria are not met + +
+ + + GeoJSON Format + + + + WGS84 Projection + + + + Earth Location + + + + Country + + + + Reasonable Size Self-Intersecting Topology + + + + Overlapping Polygons + + + + Spike + + + + Polygon Integrity + + + + GeoJSON Format + + + + WGS84 Projection + + + + Earth Location + + + + Country + +
+
+ ); +}; + +export default ChecklistInformation; diff --git a/src/components/elements/MapPolygonPanel/MapEditPolygonPanel.tsx b/src/components/elements/MapPolygonPanel/MapEditPolygonPanel.tsx new file mode 100644 index 000000000..67373bd81 --- /dev/null +++ b/src/components/elements/MapPolygonPanel/MapEditPolygonPanel.tsx @@ -0,0 +1,95 @@ +import { t } from "@transifex/native"; +import classNames from "classnames"; +import { Dispatch, SetStateAction } from "react"; +import { When } from "react-if"; + +import Icon, { IconNames } from "@/components/extensive/Icon/Icon"; + +import Button from "../Button/Button"; +import Text from "../Text/Text"; +import AttributeInformation from "./AttributeInformation"; +import ChecklistInformation from "./ChecklistInformation"; +import VersionInformation from "./VersionInformation"; + +export interface MapEditPolygonPanelProps { + setEditPolygon: Dispatch>; + tabEditPolygon: string; + setTabEditPolygon: Dispatch>; + setPreviewVersion: Dispatch>; +} + +const MapEditPolygonPanel = ({ + setEditPolygon, + tabEditPolygon, + setTabEditPolygon, + setPreviewVersion +}: MapEditPolygonPanelProps) => { + return ( + <> +
+
+ + Faja Lobi Project + + + Iseme Site + +
+ + +
+
+ + + +
+
+ {AttributeInformation} + {ChecklistInformation} + + + +
+ + ); +}; + +export default MapEditPolygonPanel; diff --git a/src/components/elements/MapPolygonPanel/MapPolygonCheckPanelItem.tsx b/src/components/elements/MapPolygonPanel/MapPolygonCheckPanelItem.tsx new file mode 100644 index 000000000..19a33168e --- /dev/null +++ b/src/components/elements/MapPolygonPanel/MapPolygonCheckPanelItem.tsx @@ -0,0 +1,209 @@ +import classNames from "classnames"; +import { DetailedHTMLProps, Dispatch, HTMLAttributes, SetStateAction, useState } from "react"; +import { When } from "react-if"; + +import Text from "@/components/elements/Text/Text"; +import Icon, { IconNames } from "@/components/extensive/Icon/Icon"; +import ModalConfirm from "@/components/extensive/Modal/ModalConfirm"; +import ModalWithLogo from "@/components/extensive/Modal/ModalWithLogo"; +import ModalWithMap from "@/components/extensive/Modal/ModalWithMap"; +import { useModalContext } from "@/context/modal.provider"; + +import Button from "../Button/Button"; +import Menu from "../Menu/Menu"; +import { MENU_PLACEMENT_RIGHT_BOTTOM } from "../Menu/MenuVariant"; + +export interface MapPolygonCheckPanelItemProps + extends DetailedHTMLProps, HTMLDivElement> { + uuid: string; + title: string; + isSelected?: boolean; + refContainer?: React.RefObject | null; + setEditPolygon?: Dispatch>; + status: string; + polygon?: string[]; +} + +const MapPolygonCheckPanelItem = ({ + title, + isSelected, + className, + refContainer, + setEditPolygon, + polygon, + status, + ...props +}: MapPolygonCheckPanelItemProps) => { + const { openModal, closeModal } = useModalContext(); + const [openCollapse, setOpenCollapse] = useState(true); + const openFormModalHandlerRequestPolygonSupport = () => { + openModal( + + ); + }; + const openFormModalHandlerAddCommentary = () => { + openModal( + + ); + }; + const openFormModalHandlerConfirm = () => { + openModal( + {}} + /> + ); + }; + + const itemsPrimaryMenu = [ + { + id: "1", + render: () => ( + + +   Edit Polygon + + ), + onClick: () => { + if (setEditPolygon) { + setEditPolygon(true); + } + } + }, + { + id: "2", + render: () => ( + + +   Zoom to + + ) + }, + { + id: "3", + render: () => ( + + +   Download + + ) + }, + { + id: "4", + render: () => ( + + ) + }, + { + id: "5", + render: () => ( + + ) + }, + { + id: "6", + render: () => ( + + ) + } + ]; + + const dynamicClasses = (status: string) => { + switch (status) { + case "Submitted": + return "bg-blue"; + case "Approved": + return "bg-green"; + case "Needs More Info": + return "bg-tertiary-600"; + case "Draft": + return "bg-pinkCustom"; + default: + return "bg-blue "; + } + }; + + return ( +
+
+
+
{" "} +
+ + {title} + +
+
+ + + + + + + +
+
+ +
+ {polygon?.map((item, index) => ( +
+ + + {item} + +
+ ))} +
+ +
+
+ ); +}; + +export default MapPolygonCheckPanelItem; diff --git a/src/components/elements/MapPolygonPanel/MapPolygonCkeckPanel.tsx b/src/components/elements/MapPolygonPanel/MapPolygonCkeckPanel.tsx new file mode 100644 index 000000000..e1305674f --- /dev/null +++ b/src/components/elements/MapPolygonPanel/MapPolygonCkeckPanel.tsx @@ -0,0 +1,69 @@ +import { useT } from "@transifex/react"; +import { Dispatch, Fragment, SetStateAction, useRef } from "react"; + +import Icon, { IconNames } from "@/components/extensive/Icon/Icon"; +import List from "@/components/extensive/List/List"; +import { PolygonAvailableData } from "@/pages/site/[uuid]/components/MockedData"; + +import Text from "../Text/Text"; +import MapPolygonCheckPanelItem from "./MapPolygonCheckPanelItem"; +import { MapPolygonPanelItemProps } from "./MapPolygonPanelItem"; + +export interface MapPolygonCheckPanelProps { + emptyText?: string; + onLoadMore: () => void; + setEditPolygon: Dispatch>; + selected: MapPolygonPanelItemProps | undefined; +} + +const MapPlygonCheckPanel = ({ emptyText, onLoadMore, setEditPolygon, selected }: MapPolygonCheckPanelProps) => { + const t = useT(); + + const refContainer = useRef(null); + return ( + <> + + Available polygons + +
+ {PolygonAvailableData.length === 0 && ( + + {emptyText || t("No result")} + + )} +
{ + //@ts-ignore + const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight; + if (bottom) onLoadMore(); + }} + > + ( + + )} + /> +
+
+ + +   Add Polygon + + + ); +}; + +export default MapPlygonCheckPanel; diff --git a/src/components/elements/MapPolygonPanel/MapPolygonPanel.stories.tsx b/src/components/elements/MapPolygonPanel/MapPolygonPanel.stories.tsx new file mode 100644 index 000000000..f25a2ebaa --- /dev/null +++ b/src/components/elements/MapPolygonPanel/MapPolygonPanel.stories.tsx @@ -0,0 +1,98 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { useState } from "react"; + +import Component from "./MapPolygonPanel"; + +const meta: Meta = { + title: "Components/Elements/MapPolygonPanel", + component: Component +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: args => { + const [query, setQuery] = useState(); + + return ( +
+
+ (query ? item.title.includes(query) : item))} + onSearch={setQuery} + /> +
+
+ ); + }, + args: { + title: "Project Sites", + onSelectItem: console.log, + stateViewPanel: false + } +}; + +export const OpenPolygonCheck: Story = { + render: args => { + const [query, setQuery] = useState(); + + return ( +
+
+ (query ? item.title.includes(query) : item))} + onSearch={setQuery} + /> +
+
+ ); + }, + args: { + title: "Project Sites", + onSelectItem: console.log, + stateViewPanel: true + } +}; + +const items = [ + { + uuid: "1", + title: "Puerto Princesa Subterranean River National Park Forest Corridor", + subtitle: "Created 03/12/21", + refContainer: null + }, + { + uuid: "2", + title: "A medium sized project site to see how it looks with 2 lines", + subtitle: "Created 03/12/21", + refContainer: null + }, + { + uuid: "3", + title: "A shorter project site", + subtitle: "Created 03/12/21", + refContainer: null + }, + { + uuid: "4", + title: + "Very long name A medium sized project site to see how it looks with 2 lines A medium sized project site to see how it looks with 2 lines A medium sized project site to see how it looks with 2 lines", + subtitle: "Created 03/12/21", + refContainer: null + }, + { + uuid: "5", + title: "A shorter project site", + subtitle: "Created 03/12/21", + refContainer: null + }, + { + uuid: "6", + title: "A shorter project site", + subtitle: "Created 03/12/21", + refContainer: null + } +]; diff --git a/src/components/elements/MapPolygonPanel/MapPolygonPanel.tsx b/src/components/elements/MapPolygonPanel/MapPolygonPanel.tsx new file mode 100644 index 000000000..f148ebe53 --- /dev/null +++ b/src/components/elements/MapPolygonPanel/MapPolygonPanel.tsx @@ -0,0 +1,101 @@ +import { useT } from "@transifex/react"; +import classNames from "classnames"; +import { DetailedHTMLProps, Dispatch, HTMLAttributes, SetStateAction, useState } from "react"; +import { Else, If, Then, When } from "react-if"; + +import { MapPolygonPanelItemProps } from "@/components/elements/MapPolygonPanel/MapPolygonPanelItem"; + +import Button from "../Button/Button"; +import MapEditPolygonPanel from "./MapEditPolygonPanel"; +import MapPlygonCheckPanel from "./MapPolygonCkeckPanel"; +import MapPlygonSitePanel from "./MapPolygonSitePanel"; + +export interface MapPolygonPanelProps extends DetailedHTMLProps, HTMLDivElement> { + title: string; + items: MapPolygonPanelItemProps[]; + onSelectItem: (item: MapPolygonPanelItemProps) => void; + onSearch: (query: string) => void; + onLoadMore: () => void; + emptyText?: string; + setStateViewPanel: Dispatch>; + stateViewPanel: boolean; + setEditPolygon: Dispatch>; + editPolygon: boolean; + tabEditPolygon: string; + setTabEditPolygon: Dispatch>; + setPreviewVersion: Dispatch>; +} + +const MapPolygonPanel = ({ + title, + items, + className, + onSelectItem, + onSearch, + onLoadMore, + emptyText, + setStateViewPanel, + stateViewPanel, + setEditPolygon, + editPolygon, + tabEditPolygon, + setTabEditPolygon, + setPreviewVersion, + ...props +}: MapPolygonPanelProps) => { + const t = useT(); + const [selected, setSelected] = useState(); + + return ( +
+ + + + + +
+ + +
+ + + + + + + + +
+ ); +}; + +export default MapPolygonPanel; diff --git a/src/components/elements/MapPolygonPanel/MapPolygonPanelItem.tsx b/src/components/elements/MapPolygonPanel/MapPolygonPanelItem.tsx new file mode 100644 index 000000000..0c1b24b91 --- /dev/null +++ b/src/components/elements/MapPolygonPanel/MapPolygonPanelItem.tsx @@ -0,0 +1,168 @@ +import classNames from "classnames"; +import { DetailedHTMLProps, Dispatch, HTMLAttributes, SetStateAction } from "react"; + +import Text from "@/components/elements/Text/Text"; +import Icon, { IconNames } from "@/components/extensive/Icon/Icon"; +import ModalConfirm from "@/components/extensive/Modal/ModalConfirm"; +import ModalWithLogo from "@/components/extensive/Modal/ModalWithLogo"; +import ModalWithMap from "@/components/extensive/Modal/ModalWithMap"; +import { useModalContext } from "@/context/modal.provider"; + +import Button from "../Button/Button"; +import Menu from "../Menu/Menu"; +import { MENU_PLACEMENT_RIGHT_BOTTOM } from "../Menu/MenuVariant"; + +export interface MapPolygonPanelItemProps extends DetailedHTMLProps, HTMLDivElement> { + uuid: string; + title: string; + subtitle: string; + isSelected?: boolean; + refContainer?: React.RefObject | null; + setEditPolygon?: Dispatch>; +} + +const MapPolygonPanelItem = ({ + title, + subtitle, + isSelected, + className, + refContainer, + setEditPolygon, + ...props +}: MapPolygonPanelItemProps) => { + const { openModal, closeModal } = useModalContext(); + const openFormModalHandlerRequestPolygonSupport = () => { + openModal( + + ); + }; + const openFormModalHandlerAddCommentary = () => { + openModal( + + ); + }; + const openFormModalHandlerConfirm = () => { + openModal( + {}} + /> + ); + }; + + const itemsPrimaryMenu = [ + { + id: "1", + render: () => ( + + +   Edit Polygon + + ), + onClick: () => { + if (setEditPolygon) { + setEditPolygon(true); + } + } + }, + { + id: "2", + render: () => ( + + +   Zoom to + + ) + }, + { + id: "3", + render: () => ( + + +   Download + + ) + }, + { + id: "4", + render: () => ( + + ) + }, + { + id: "5", + render: () => ( + + ) + }, + { + id: "6", + render: () => ( + + ) + } + ]; + + return ( +
+
+
+ +
+ + {title} + + {subtitle} +
+
+ + + +
+
+
+
+ ); +}; + +export default MapPolygonPanelItem; diff --git a/src/components/elements/MapPolygonPanel/MapPolygonSitePanel.tsx b/src/components/elements/MapPolygonPanel/MapPolygonSitePanel.tsx new file mode 100644 index 000000000..b2c021193 --- /dev/null +++ b/src/components/elements/MapPolygonPanel/MapPolygonSitePanel.tsx @@ -0,0 +1,187 @@ +import { useT } from "@transifex/react"; +import { Dispatch, Fragment, SetStateAction, useEffect, useRef, useState } from "react"; +import { When } from "react-if"; + +import Icon, { IconNames } from "@/components/extensive/Icon/Icon"; +import List from "@/components/extensive/List/List"; +import { PolygonData } from "@/pages/site/[uuid]/components/MockedData"; + +import Checkbox from "../Inputs/Checkbox/Checkbox"; +import { MenuItem } from "../MenuItem/MenuItem"; +import FilterSearchBox from "../TableFilters/Inputs/FilterSearchBox"; +import Text from "../Text/Text"; +import MapPolygonPanelItem, { MapPolygonPanelItemProps } from "./MapPolygonPanelItem"; + +export interface MapPolygonSitePanelProps { + emptyText?: string; + onLoadMore: () => void; + onSelectItem: (item: MapPolygonPanelItemProps) => void; + setEditPolygon: Dispatch>; + selected: MapPolygonPanelItemProps | undefined; + setSelected: Dispatch>; +} + +const MapPlygonSitePanel = ({ + emptyText, + onLoadMore, + onSelectItem, + setEditPolygon, + selected, + setSelected +}: MapPolygonSitePanelProps) => { + const t = useT(); + const menuRef = useRef(null); + const [openMenu, setOpenMenu] = useState(false); + const refContainer = useRef(null); + const [openSubMenu, setOpenSubMenu] = useState(false); + const checkboxRefs = useRef([]); + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (menuRef.current && !menuRef.current?.contains(event.target as Node)) { + setOpenMenu(false); + } + }; + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }); + + useEffect(() => { + const handleChange = () => { + const checked = checkboxRefs.current.some(ref => ref.checked); + setOpenSubMenu(checked); + }; + + const checkbox = checkboxRefs.current; + + checkbox.forEach(ref => { + if (ref) { + ref.addEventListener("change", handleChange); + } + }); + + handleChange(); + + return () => { + checkbox.forEach(ref => { + if (ref) { + ref.removeEventListener("change", handleChange); + } + }); + }; + }, [openMenu]); + + return ( + <> + {}} /> +
+ + +   new Polygon + +
+
+
setOpenMenu(!openMenu)}> + +
+ +
+ ref && checkboxRefs.current.push(ref as HTMLInputElement)} + name="" + label={t("Draft")} + className="flex w-full flex-row-reverse items-center justify-end gap-3" + textClassName="text-10-semibold" + /> + + ref && checkboxRefs.current.push(ref as HTMLInputElement)} + name="" + label={t("Submitted")} + className="flex w-full flex-row-reverse items-center justify-end gap-3" + textClassName="text-10-semibold" + /> + ref && checkboxRefs.current.push(ref as HTMLInputElement)} + name="" + label={t("Approved")} + className="flex w-full flex-row-reverse items-center justify-end gap-3" + textClassName="text-10-semibold" + /> + ref && checkboxRefs.current.push(ref as HTMLInputElement)} + name="" + label={t("Needs More Info")} + className="flex w-full flex-row-reverse items-center justify-end gap-3" + textClassName="text-10-semibold" + /> + +
+ { + setOpenSubMenu(false); + }} + > + { + setOpenSubMenu(false); + }} + > +
+ +
+ +
+
+ +
+
+
+ +
+ {PolygonData.length === 0 && ( + + {emptyText || t("No result")} + + )} +
{ + //@ts-ignore + const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight; + if (bottom) onLoadMore(); + }} + > + ( + { + setSelected(item); + onSelectItem(item); + }} + isSelected={selected?.uuid === item.uuid} + refContainer={refContainer} + setEditPolygon={setEditPolygon} + /> + )} + /> +
+
+ + ); +}; + +export default MapPlygonSitePanel; diff --git a/src/components/elements/MapPolygonPanel/VersionInformation.tsx b/src/components/elements/MapPolygonPanel/VersionInformation.tsx new file mode 100644 index 000000000..5a1f2476d --- /dev/null +++ b/src/components/elements/MapPolygonPanel/VersionInformation.tsx @@ -0,0 +1,116 @@ +import classNames from "classnames"; +import { Dispatch, SetStateAction } from "react"; + +import Icon, { IconNames } from "@/components/extensive/Icon/Icon"; +import ModalConfirm from "@/components/extensive/Modal/ModalConfirm"; +import { useModalContext } from "@/context/modal.provider"; + +import Menu from "../Menu/Menu"; +import { MENU_PLACEMENT_RIGHT_BOTTOM } from "../Menu/MenuVariant"; +import Text from "../Text/Text"; + +const VersionInformation = ({ setPreviewVersion }: { setPreviewVersion: Dispatch> }) => { + const { openModal, closeModal } = useModalContext(); + const openFormModalHandlerConfirm = () => { + openModal( + {}} + /> + ); + }; + const itemsPrimaryMenu = [ + { + id: "1", + render: () => ( + + +   Preview Version + + ), + onClick: () => setPreviewVersion(true) + }, + { + id: "2", + render: () => ( + + +   Delete Version + + ), + onClick: () => openFormModalHandlerConfirm() + } + ]; + const data = [ + { + title: "ID Wenguru v4", + date: "Feb 12, 24", + current: "No" + }, + { + title: "ID Wenguru v3", + date: "Feb 11, 24", + current: "Yes" + }, + { + title: "ID Wenguru v2", + date: "Feb 10, 24", + current: "No" + }, + { + title: "ID Wenguru v1", + date: "Feb 8, 24", + current: "No" + }, + { + title: "ID Wenguru v1", + date: "Feb 6, 24", + current: "No" + } + ]; + return ( +
+
+ + Version + + + Date + + + Current + +
+ {data.map((item, index) => ( +
+ + {item.title} + + + {item.date} + +
+ + + + +
+
+ ))} +
+ ); +}; + +export default VersionInformation; diff --git a/src/pages/site/[uuid]/components/MockedData.ts b/src/pages/site/[uuid]/components/MockedData.ts index 056628fbc..82f67b376 100644 --- a/src/pages/site/[uuid]/components/MockedData.ts +++ b/src/pages/site/[uuid]/components/MockedData.ts @@ -1,3 +1,6 @@ +import { MapPolygonCheckPanelItemProps } from "@/components/elements/MapPolygonPanel/MapPolygonCheckPanelItem"; +import { MapPolygonPanelItemProps } from "@/components/elements/MapPolygonPanel/MapPolygonPanelItem"; + export const uploadImageData = [ { id: "1", name: "Images5.png", status: "We are processing your image", isVerified: true }, { id: "2", name: "Images4.png", status: "We are processing your image", isVerified: true }, @@ -40,3 +43,60 @@ export const commentariesItems = [ status: "Draft" } ]; + +export const PolygonData: MapPolygonPanelItemProps[] = [ + { + uuid: "1", + title: "Polygon 1", + subtitle: "Created 15/12/2023" + }, + { + uuid: "2", + title: "Polygon 2", + subtitle: "Created 15/12/2023" + }, + { + uuid: "3", + title: "Polygon 3", + subtitle: "Created 15/12/2023" + }, + { + uuid: "4", + title: "Polygon 4", + subtitle: "Created 15/12/2023" + }, + { + uuid: "5", + title: "Polygon 5", + subtitle: "Created 15/12/2023" + } +]; + +export const PolygonAvailableData: MapPolygonCheckPanelItemProps[] = [ + { + uuid: "1", + title: "Durrell", + status: "Submitted" + }, + { + uuid: "2", + title: "Ecofix", + status: "Approved" + }, + { + uuid: "3", + title: "Env Coffee Forest Forum", + status: "Needs More Info", + polygon: ["Not WGS 84 projection", "Not WGS 84 projection", "Overlapping polygons identified"] + }, + { + uuid: "4", + title: "Env Found Afr Sl", + status: "Submitted" + }, + { + uuid: "5", + title: "Justdiggit", + status: "Draft" + } +]; diff --git a/src/pages/site/[uuid]/components/SiteArea.tsx b/src/pages/site/[uuid]/components/SiteArea.tsx new file mode 100644 index 000000000..a656c161d --- /dev/null +++ b/src/pages/site/[uuid]/components/SiteArea.tsx @@ -0,0 +1,184 @@ +import { useInfiniteQuery } from "@tanstack/react-query"; +import { useT } from "@transifex/react"; +import { Dispatch, SetStateAction, useState } from "react"; +import { When } from "react-if"; + +import Button from "@/components/elements/Button/Button"; +import { MapContainer } from "@/components/elements/Map-mapbox/Map"; +import MapPolygonPanel from "@/components/elements/MapPolygonPanel/MapPolygonPanel"; +import Text from "@/components/elements/Text/Text"; +import Icon, { IconNames } from "@/components/extensive/Icon/Icon"; +import ModalWithMap from "@/components/extensive/Modal/ModalWithMap"; +import { useModalContext } from "@/context/modal.provider"; +import { fetchGetV2ProjectsUUIDSitePolygons } from "@/generated/apiComponents"; +import { useDate } from "@/hooks/useDate"; +import { useGetImagesGeoJSON } from "@/hooks/useImageGeoJSON"; +import { useJSONParser } from "@/hooks/useJSONParser"; +import { usePaginatedResult } from "@/hooks/usePaginatedResult"; + +interface SiteAreaProps { + sites: any; + editPolygon: boolean; + setEditPolygon: Dispatch>; +} + +const SiteArea = ({ sites, editPolygon, setEditPolygon }: SiteAreaProps) => { + const t = useT(); + const { format } = useDate(); + const [query, setQuery] = useState(""); + const [tabEditPolygon, setTabEditPolygon] = useState("Attributes"); + const [selected, setSelected] = useState(); + const [stateViewPanel, setStateViewPanel] = useState(false); + const [previewVersion, setPreviewVersion] = useState(false); + + console.warn(selected); + + const { data, fetchNextPage } = useInfiniteQuery({ + queryKey: ["sites", query], + queryFn: ({ pageParam }) => { + const queryParams: any = { + sort: "created_at", + page: pageParam || 1, + per_page: 5 + }; + if (query) queryParams.search = query; + + return fetchGetV2ProjectsUUIDSitePolygons({ + pathParams: { uuid: sites.uuid }, + queryParams + }); + }, + getNextPageParam: (lastPage: number) => { + //@ts-ignore + const meta: any = lastPage.meta; + if (!meta) return 1; + return meta?.last_page > meta?.current_page ? meta?.current_page + 1 : undefined; + }, + keepPreviousData: true + }); + const { openModal, closeModal } = useModalContext(); + const imagesGeoJson = useGetImagesGeoJSON("projects", sites.uuid); + const geoJSON = useJSONParser(selected?.geojson || sites.boundary_geojson); + const Polygon = usePaginatedResult(data); + + const openFormModalHandlerRequestPolygonSupport = () => { + openModal( + + ); + }; + + return ( +
+ ({ + ...item, + title: item.name, + subtitle: t("Created {date}", { date: format(item.created_at) }) + })) || []) as any[] + } + onSelectItem={setSelected} + onSearch={setQuery} + className="absolute z-20 h-[500px] w-[23vw] p-8 wide:h-[700px] " + onLoadMore={fetchNextPage} + emptyText={t("No polygons are available.")} + setStateViewPanel={setStateViewPanel} + stateViewPanel={stateViewPanel} + setEditPolygon={setEditPolygon} + editPolygon={editPolygon} + tabEditPolygon={tabEditPolygon} + setTabEditPolygon={setTabEditPolygon} + setPreviewVersion={setPreviewVersion} + /> +
+ Your polygons have been updated + + +
+ +
+ +
+ +
+ + +
+ + + Preview Attributes + +
+ + Polygon ID + + 1213023412 +
+
+ + Restoration Practice + + 1213023412 +
+
+ + Target Land Use System + + Riparian Area or Wetl... +
+
+ + Tree Distribution + + Single Line +
+
+ + Source + + Flority +
+
+ + +
+ ); +}; + +export default SiteArea; diff --git a/src/pages/site/[uuid]/tabs/Overview.tsx b/src/pages/site/[uuid]/tabs/Overview.tsx index 5c76f3339..a0612a12d 100644 --- a/src/pages/site/[uuid]/tabs/Overview.tsx +++ b/src/pages/site/[uuid]/tabs/Overview.tsx @@ -1,9 +1,11 @@ import { useT } from "@transifex/react"; +import classNames from "classnames"; import Link from "next/link"; import { useRouter } from "next/router"; import { useState } from "react"; import { When } from "react-if"; +import { polygonData } from "@/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons"; import Button from "@/components/elements/Button/Button"; import GoalProgressCard from "@/components/elements/Cards/GoalProgressCard/GoalProgressCard"; import ItemMonitoringCards from "@/components/elements/Cards/ItemMonitoringCard/ItemMonitoringCards"; @@ -16,6 +18,7 @@ import Text from "@/components/elements/Text/Text"; import Icon, { IconNames } from "@/components/extensive/Icon/Icon"; import ModalAdd from "@/components/extensive/Modal/ModalAdd"; import ModalConfirm from "@/components/extensive/Modal/ModalConfirm"; +import { uploadImageData } from "@/components/extensive/Modal/ModalContent/MockedData"; import ModalSubmit from "@/components/extensive/Modal/ModalSubmit"; import ModalWithMap from "@/components/extensive/Modal/ModalWithMap"; import PageBody from "@/components/extensive/PageElements/Body/PageBody"; @@ -23,9 +26,12 @@ import PageCard from "@/components/extensive/PageElements/Card/PageCard"; import PageColumn from "@/components/extensive/PageElements/Column/PageColumn"; import PageRow from "@/components/extensive/PageElements/Row/PageRow"; import { useModalContext } from "@/context/modal.provider"; +import { useGetV2MODELUUIDImageLocations } from "@/generated/apiComponents"; import { getEntityDetailPageLink } from "@/helpers/entity"; import { useFramework } from "@/hooks/useFramework"; +import SiteArea from "../components/SiteArea"; + interface SiteOverviewTabProps { site: any; } @@ -51,7 +57,33 @@ const SiteOverviewTab = ({ site }: SiteOverviewTabProps) => { content="Start by adding polygons to your site." primaryButtonText="Close" primaryButtonProps={{ className: "px-8 py-3", variant: "primary", onClick: closeModal }} - > + > + {/* Next div is only Mocked data delete this children later*/} +
+ {polygonData.map(polygon => ( +
+
+
+ +
+
+ {polygon.name} + + {polygon.status} + +
+
+ +
+ ))} +
+ ); }; const openFormModalHandlerUploadImages = () => { @@ -69,7 +101,45 @@ const SiteOverviewTab = ({ site }: SiteOverviewTabProps) => { content="Start by adding images for processing." primaryButtonText="Save" primaryButtonProps={{ className: "px-8 py-3", variant: "primary", onClick: closeModal }} - > + > + {/* Next div is only Mocked data delete this children later*/} +
+ {uploadImageData.map(image => ( +
+
+
+ +
+
+ {image.name} + + {image.status} + +
+
+
+ + {image.isVerified ? "GeoTagged Verified" : "Not Verified"} + +
+
+ ))} +
+ ); }; @@ -186,6 +256,39 @@ const SiteOverviewTab = ({ site }: SiteOverviewTabProps) => { } ]; + const { data: allImages } = useGetV2MODELUUIDImageLocations({ + pathParams: { model: "sites", uuid: site.uuid } + }); + console.debug(allImages); + // const imagesGeoJson = + // allImages?.data?.length! > 0 + // ? { + // type: "FeatureCollection", + // features: allImages?.data?.map(image => ({ + // type: "Feature", + // properties: { + // id: image.uuid, + // image_url: image.thumb_url + // }, + // geometry: { + // type: "Point", + // coordinates: [image.location?.lng, image.location?.lat] + // } + // })) + // } + // : undefined; + + // const geoJSON = useMemo(() => { + // try { + // if (site.boundary_geojson) { + // return JSON.parse(site.boundary_geojson); + // } + // } catch (e) { + // return undefined; + // } + // return undefined; + // }, [site]); + return ( @@ -228,6 +331,10 @@ const SiteOverviewTab = ({ site }: SiteOverviewTabProps) => {
+ + {/* + + */} @@ -267,9 +374,53 @@ const SiteOverviewTab = ({ site }: SiteOverviewTabProps) => { + + {/* Old Site Information */} + {/* + + + + + + + + + + + + + + + + + + + + + + */} Date: Wed, 12 Jun 2024 14:44:39 -0400 Subject: [PATCH 02/19] [TM-874] estid style in Site Area --- src/pages/site/[uuid]/components/SiteArea.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/site/[uuid]/components/SiteArea.tsx b/src/pages/site/[uuid]/components/SiteArea.tsx index a656c161d..d20577e4d 100644 --- a/src/pages/site/[uuid]/components/SiteArea.tsx +++ b/src/pages/site/[uuid]/components/SiteArea.tsx @@ -74,7 +74,7 @@ const SiteArea = ({ sites, editPolygon, setEditPolygon }: SiteAreaProps) => { }; return ( -
+
{ } onSelectItem={setSelected} onSearch={setQuery} - className="absolute z-20 h-[500px] w-[23vw] p-8 wide:h-[700px] " + className="absolute z-20 h-[500px] w-[23vw] p-8" onLoadMore={fetchNextPage} emptyText={t("No polygons are available.")} setStateViewPanel={setStateViewPanel} From e34dca47fbca9df7be7eafdf0ad40ed738ed8a23 Mon Sep 17 00:00:00 2001 From: Dotty Date: Wed, 12 Jun 2024 14:59:47 -0400 Subject: [PATCH 03/19] [TM-874] edit style in Site Area --- src/pages/site/[uuid]/components/SiteArea.tsx | 133 +++++++++--------- 1 file changed, 68 insertions(+), 65 deletions(-) diff --git a/src/pages/site/[uuid]/components/SiteArea.tsx b/src/pages/site/[uuid]/components/SiteArea.tsx index d20577e4d..28e9b34b0 100644 --- a/src/pages/site/[uuid]/components/SiteArea.tsx +++ b/src/pages/site/[uuid]/components/SiteArea.tsx @@ -86,7 +86,7 @@ const SiteArea = ({ sites, editPolygon, setEditPolygon }: SiteAreaProps) => { } onSelectItem={setSelected} onSearch={setQuery} - className="absolute z-20 h-[500px] w-[23vw] p-8" + className="absolute z-20 h-[500px] w-[23vw] bg-[#ffffff12] p-8" onLoadMore={fetchNextPage} emptyText={t("No polygons are available.")} setStateViewPanel={setStateViewPanel} @@ -97,79 +97,82 @@ const SiteArea = ({ sites, editPolygon, setEditPolygon }: SiteAreaProps) => { setTabEditPolygon={setTabEditPolygon} setPreviewVersion={setPreviewVersion} /> -
- Your polygons have been updated - - -
- -
- -
- - -
- - - Preview Attributes - -
- - Polygon ID - - 1213023412 -
-
- - Restoration Practice - - 1213023412 + +
+ +
+
-
- - Target Land Use System + + +
+ + + Preview Attributes - Riparian Area or Wetl... +
+ + Polygon ID + + 1213023412 +
+
+ + Restoration Practice + + 1213023412 +
+
+ + Target Land Use System + + Riparian Area or Wetl... +
+
+ + Tree Distribution + + Single Line +
+
+ + Source + + Flority +
-
- - Tree Distribution - - Single Line -
-
- - Source - - Flority -
-
- + +
+ Date: Wed, 12 Jun 2024 15:47:16 -0400 Subject: [PATCH 04/19] start merging map to reuse --- src/components/elements/Map-mapbox/Map.tsx | 6 +- .../elements/Map-mapbox/hooks/useMap.ts | 2 + src/components/elements/Map-mapbox/utils.ts | 14 ++++ .../{ProjectArea.tsx => OverviewMapArea.tsx} | 42 ++++------ src/pages/project/[uuid]/tabs/Overview.tsx | 4 +- src/pages/site/[uuid]/components/SiteArea.tsx | 78 ++----------------- 6 files changed, 45 insertions(+), 101 deletions(-) rename src/pages/project/[uuid]/components/{ProjectArea.tsx => OverviewMapArea.tsx} (75%) diff --git a/src/components/elements/Map-mapbox/Map.tsx b/src/components/elements/Map-mapbox/Map.tsx index cb7c8049c..055844cd4 100644 --- a/src/components/elements/Map-mapbox/Map.tsx +++ b/src/components/elements/Map-mapbox/Map.tsx @@ -232,7 +232,11 @@ export const MapContainer = ({ }; return ( -
+
diff --git a/src/components/elements/Map-mapbox/hooks/useMap.ts b/src/components/elements/Map-mapbox/hooks/useMap.ts index e5b478618..085840882 100644 --- a/src/components/elements/Map-mapbox/hooks/useMap.ts +++ b/src/components/elements/Map-mapbox/hooks/useMap.ts @@ -46,6 +46,8 @@ export const useMap = (onSave?: (geojson: any, record: any) => void) => { const initMap = () => { if (map.current) return; + + console.log("map.current", map.current); map.current = new mapboxgl.Map({ container: mapContainer.current as HTMLDivElement, style: MAP_STYLE, diff --git a/src/components/elements/Map-mapbox/utils.ts b/src/components/elements/Map-mapbox/utils.ts index d58b0f9c7..f2c5cfd13 100644 --- a/src/components/elements/Map-mapbox/utils.ts +++ b/src/components/elements/Map-mapbox/utils.ts @@ -4,6 +4,7 @@ import { createElement } from "react"; import { createRoot } from "react-dom/client"; import { layersList } from "@/constants/layers"; +import { fetchGetV2TypeEntity } from "@/generated/apiComponents"; import { SitePolygon, SitePolygonsDataResponse } from "@/generated/apiSchemas"; import { BBox, FeatureCollection } from "./GeoJSON"; @@ -275,3 +276,16 @@ 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); + }); +} diff --git a/src/pages/project/[uuid]/components/ProjectArea.tsx b/src/pages/project/[uuid]/components/OverviewMapArea.tsx similarity index 75% rename from src/pages/project/[uuid]/components/ProjectArea.tsx rename to src/pages/project/[uuid]/components/OverviewMapArea.tsx index 2df4ef9e7..f0201645e 100644 --- a/src/pages/project/[uuid]/components/ProjectArea.tsx +++ b/src/pages/project/[uuid]/components/OverviewMapArea.tsx @@ -4,48 +4,40 @@ import { useEffect, useState } from "react"; 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 { 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 { fetchGetV2TypeEntity } from "@/generated/apiComponents"; import { SitePolygonsDataResponse } from "@/generated/apiSchemas"; import { useDate } from "@/hooks/useDate"; -interface ProjectAreaProps { - project: any; +interface EntityAreaProps { + entityModel: any; + type: string; } -const ProjectArea = ({ project }: ProjectAreaProps) => { +const OverviewMapArea = ({ entityModel, type }: EntityAreaProps) => { const t = useT(); const { format } = useDate(); const [polygonsData, setPolygonsData] = useState([]); const [polygonDataMap, setPolygonDataMap] = useState({}); - const [projectBbox, setProjectBbox] = useState(); + const [entityBbox, setEntityBbox] = useState(); const mapFunctions = useMap(); const [checkedValues, setCheckedValues] = useState([]); const [sortOrder, setSortOrder] = useState("created_at"); - - const getPolygonsData = (uuid: string, statusFilter: string, sortOrder: string) => { - fetchGetV2TypeEntity({ - queryParams: { - uuid: uuid, - type: "projects", - status: statusFilter, - [`sort[${sortOrder}]`]: sortOrder === "created_at" ? "desc" : "asc" - } - }).then(result => { - if (result.polygonsData) { - setPolygonsData(result.polygonsData); - setProjectBbox(result.bbox as BBox); - } - }); + const setResultValues = (result: any) => { + if (result.polygonsData) { + setPolygonsData(result.polygonsData); + setEntityBbox(result.bbox as BBox); + } }; useEffect(() => { - if (project?.uuid) { + console.log("entityModel", entityModel); + if (entityModel?.uuid) { const statusFilter = checkedValues.join(","); - getPolygonsData(project.uuid, statusFilter, sortOrder); + getPolygonsData(entityModel.uuid, statusFilter, sortOrder, type, setResultValues); } - }, [project, checkedValues, sortOrder]); + }, [entityModel, checkedValues, sortOrder]); useEffect(() => { if (polygonsData?.length > 0) { @@ -96,7 +88,7 @@ const ProjectArea = ({ project }: ProjectAreaProps) => { { ); }; -export default ProjectArea; +export default OverviewMapArea; diff --git a/src/pages/project/[uuid]/tabs/Overview.tsx b/src/pages/project/[uuid]/tabs/Overview.tsx index eb938625a..7dcf7155e 100644 --- a/src/pages/project/[uuid]/tabs/Overview.tsx +++ b/src/pages/project/[uuid]/tabs/Overview.tsx @@ -14,7 +14,7 @@ import PageCard from "@/components/extensive/PageElements/Card/PageCard"; import PageColumn from "@/components/extensive/PageElements/Column/PageColumn"; import PageRow from "@/components/extensive/PageElements/Row/PageRow"; import { useFramework } from "@/hooks/useFramework"; -import ProjectArea from "@/pages/project/[uuid]/components/ProjectArea"; +import OverviewMapArea from "@/pages/project/[uuid]/components/OverviewMapArea"; interface ProjectOverviewTabProps { project: any; @@ -97,7 +97,7 @@ const ProjectOverviewTab = ({ project }: ProjectOverviewTabProps) => { } > - + diff --git a/src/pages/site/[uuid]/components/SiteArea.tsx b/src/pages/site/[uuid]/components/SiteArea.tsx index 28e9b34b0..7df084011 100644 --- a/src/pages/site/[uuid]/components/SiteArea.tsx +++ b/src/pages/site/[uuid]/components/SiteArea.tsx @@ -1,20 +1,13 @@ -import { useInfiniteQuery } from "@tanstack/react-query"; import { useT } from "@transifex/react"; import { Dispatch, SetStateAction, useState } from "react"; import { When } from "react-if"; import Button from "@/components/elements/Button/Button"; -import { MapContainer } from "@/components/elements/Map-mapbox/Map"; -import MapPolygonPanel from "@/components/elements/MapPolygonPanel/MapPolygonPanel"; import Text from "@/components/elements/Text/Text"; import Icon, { IconNames } from "@/components/extensive/Icon/Icon"; import ModalWithMap from "@/components/extensive/Modal/ModalWithMap"; import { useModalContext } from "@/context/modal.provider"; -import { fetchGetV2ProjectsUUIDSitePolygons } from "@/generated/apiComponents"; -import { useDate } from "@/hooks/useDate"; -import { useGetImagesGeoJSON } from "@/hooks/useImageGeoJSON"; -import { useJSONParser } from "@/hooks/useJSONParser"; -import { usePaginatedResult } from "@/hooks/usePaginatedResult"; +import OverviewMapArea from "@/pages/project/[uuid]/components/OverviewMapArea"; interface SiteAreaProps { sites: any; @@ -24,43 +17,11 @@ interface SiteAreaProps { const SiteArea = ({ sites, editPolygon, setEditPolygon }: SiteAreaProps) => { const t = useT(); - const { format } = useDate(); - const [query, setQuery] = useState(""); - const [tabEditPolygon, setTabEditPolygon] = useState("Attributes"); - const [selected, setSelected] = useState(); - const [stateViewPanel, setStateViewPanel] = useState(false); + const [tabEditPolygon] = useState("Attributes"); + const [_, setStateViewPanel] = useState(false); const [previewVersion, setPreviewVersion] = useState(false); - - console.warn(selected); - - const { data, fetchNextPage } = useInfiniteQuery({ - queryKey: ["sites", query], - queryFn: ({ pageParam }) => { - const queryParams: any = { - sort: "created_at", - page: pageParam || 1, - per_page: 5 - }; - if (query) queryParams.search = query; - - return fetchGetV2ProjectsUUIDSitePolygons({ - pathParams: { uuid: sites.uuid }, - queryParams - }); - }, - getNextPageParam: (lastPage: number) => { - //@ts-ignore - const meta: any = lastPage.meta; - if (!meta) return 1; - return meta?.last_page > meta?.current_page ? meta?.current_page + 1 : undefined; - }, - keepPreviousData: true - }); const { openModal, closeModal } = useModalContext(); - const imagesGeoJson = useGetImagesGeoJSON("projects", sites.uuid); - const geoJSON = useJSONParser(selected?.geojson || sites.boundary_geojson); - const Polygon = usePaginatedResult(data); - + console.log("_", _); const openFormModalHandlerRequestPolygonSupport = () => { openModal( { return (
- ({ - ...item, - title: item.name, - subtitle: t("Created {date}", { date: format(item.created_at) }) - })) || []) as any[] - } - onSelectItem={setSelected} - onSearch={setQuery} - className="absolute z-20 h-[500px] w-[23vw] bg-[#ffffff12] p-8" - onLoadMore={fetchNextPage} - emptyText={t("No polygons are available.")} - setStateViewPanel={setStateViewPanel} - stateViewPanel={stateViewPanel} - setEditPolygon={setEditPolygon} - editPolygon={editPolygon} - tabEditPolygon={tabEditPolygon} - setTabEditPolygon={setTabEditPolygon} - setPreviewVersion={setPreviewVersion} - />
Your polygons have been updated @@ -172,14 +111,7 @@ const SiteArea = ({ sites, editPolygon, setEditPolygon }: SiteAreaProps) => {
- - +
); }; From 68a8123fa54efddc7981007accaa895dc41b9e09 Mon Sep 17 00:00:00 2001 From: Dotty Date: Wed, 12 Jun 2024 16:01:52 -0400 Subject: [PATCH 05/19] [TM-874] edit style in map overview site --- src/pages/project/[uuid]/components/OverviewMapArea.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/project/[uuid]/components/OverviewMapArea.tsx b/src/pages/project/[uuid]/components/OverviewMapArea.tsx index f0201645e..0be7f2729 100644 --- a/src/pages/project/[uuid]/components/OverviewMapArea.tsx +++ b/src/pages/project/[uuid]/components/OverviewMapArea.tsx @@ -68,7 +68,7 @@ const OverviewMapArea = ({ entityModel, type }: EntityAreaProps) => { }; return ( -
+ <> { siteData={true} className="flex-1 rounded-r-lg" /> -
+ ); }; From a5c3272f2d6395f70ca5ff2256ea5766c9803e3f Mon Sep 17 00:00:00 2001 From: JORGE Date: Wed, 12 Jun 2024 16:26:43 -0400 Subject: [PATCH 06/19] [TM-874] add site map --- .../elements/MapSidePanel/MapSidePanel.tsx | 3 ++ .../MapSidePanel/MapSidePanelItem.tsx | 24 ++++++++----- .../[uuid]/components/OverviewMapArea.tsx | 5 +-- src/pages/site/[uuid]/components/SiteArea.tsx | 34 ------------------- 4 files changed, 21 insertions(+), 45 deletions(-) diff --git a/src/components/elements/MapSidePanel/MapSidePanel.tsx b/src/components/elements/MapSidePanel/MapSidePanel.tsx index 163713de5..24e53b88c 100644 --- a/src/components/elements/MapSidePanel/MapSidePanel.tsx +++ b/src/components/elements/MapSidePanel/MapSidePanel.tsx @@ -25,6 +25,7 @@ export interface MapSidePanelProps extends DetailedHTMLProps void; setSortOrder: React.Dispatch>; + type: string; } const MapSidePanel = ({ @@ -38,6 +39,7 @@ const MapSidePanel = ({ checkedValues, onCheckboxChange, setSortOrder, + type, ...props }: MapSidePanelProps) => { const t = useT(); @@ -194,6 +196,7 @@ const MapSidePanel = ({ setClickedButton={setClickedButton} isSelected={selected?.uuid === item.uuid} refContainer={refContainer} + type={type} /> )} /> diff --git a/src/components/elements/MapSidePanel/MapSidePanelItem.tsx b/src/components/elements/MapSidePanel/MapSidePanelItem.tsx index 01096384d..e1b2d3b8a 100644 --- a/src/components/elements/MapSidePanel/MapSidePanelItem.tsx +++ b/src/components/elements/MapSidePanel/MapSidePanelItem.tsx @@ -18,6 +18,7 @@ export interface MapSidePanelItemProps extends DetailedHTMLProps>; refContainer: React.RefObject | null; + type: string; } const MapSidePanelItem = ({ @@ -29,21 +30,26 @@ const MapSidePanelItem = ({ setClickedButton, className, refContainer, + type, ...props }: MapSidePanelItemProps) => { let imageStatus = `IC_${status.toUpperCase().replace(/-/g, "_")}`; const t = useT(); const itemsPrimaryMenu = [ - { - id: "1", - render: () => ( - setClickedButton("site")}> - -   {t("View Site")} - - ) - }, + ...(type !== "sites" + ? [ + { + id: "1", + render: () => ( + setClickedButton("site")}> + +   {t("View Site")} + + ) + } + ] + : []), { id: "2", render: () => ( diff --git a/src/pages/project/[uuid]/components/OverviewMapArea.tsx b/src/pages/project/[uuid]/components/OverviewMapArea.tsx index 0be7f2729..0097bffd1 100644 --- a/src/pages/project/[uuid]/components/OverviewMapArea.tsx +++ b/src/pages/project/[uuid]/components/OverviewMapArea.tsx @@ -70,7 +70,7 @@ const OverviewMapArea = ({ entityModel, type }: EntityAreaProps) => { return ( <> ({ ...item, @@ -84,12 +84,13 @@ const OverviewMapArea = ({ entityModel, type }: EntityAreaProps) => { checkedValues={checkedValues} onCheckboxChange={handleCheckboxChange} setSortOrder={setSortOrder} + type={type} /> { const t = useT(); const [tabEditPolygon] = useState("Attributes"); - const [_, setStateViewPanel] = useState(false); const [previewVersion, setPreviewVersion] = useState(false); - const { openModal, closeModal } = useModalContext(); - console.log("_", _); - const openFormModalHandlerRequestPolygonSupport = () => { - openModal( - - ); - }; - return (
-
- Your polygons have been updated - - -
- } - onClose={closeModal} - content="Start by adding polygons to your site." - primaryButtonText="Close" - primaryButtonProps={{ className: "px-8 py-3", variant: "primary", onClick: closeModal }} - > - {/* Next div is only Mocked data delete this children later*/} -
- {polygonData.map(polygon => ( -
-
-
- -
-
- {polygon.name} - - {polygon.status} - -
-
- -
- ))} -
- - ); - }; - const openFormModalHandlerUploadImages = () => { - openModal( - - Uploaded Files - - } - onClose={closeModal} - content="Start by adding images for processing." - primaryButtonText="Save" - primaryButtonProps={{ className: "px-8 py-3", variant: "primary", onClick: closeModal }} - > - {/* Next div is only Mocked data delete this children later*/} -
- {uploadImageData.map(image => ( -
-
-
- -
-
- {image.name} - - {image.status} - -
-
-
- - {image.isVerified ? "GeoTagged Verified" : "Not Verified"} - -
-
- ))} -
- - ); - }; - - const openFormModalHandlerSubmitReviewConfirm = () => { - openModal( - - Are your sure you want to submit your polygons for the site Iseme.? - - } - onClose={closeModal} - onConfirm={() => { - closeModal; - }} - /> - ); - }; - - const openFormModalHandlerRequestPolygonSupport = () => { - openModal( - - ); - }; - - const openFormModalHandlerSubmitPolygon = () => { - openModal( - { - closeModal(); - openFormModalHandlerSubmitReviewConfirm(); - } - }} - secondaryButtonText="Cancel" - secondaryButtonProps={{ className: "px-8 py-3", variant: "white-page-admin", onClick: closeModal }} - site={site} - > - ); - }; - - const polygonStatusLabels = [ - { id: "1", label: "Site Approved" }, - { id: "2", label: "Polygons Submitted" }, - { id: "3", label: "Polygons Approved" }, - { id: "4", label: "Monitoring Begins" } - ]; - - const itemsPrimaryMenu = [ - { - id: "1", - render: () => ( - - Create Polygons - - ), - onClick: () => { - console.log("Create Polygons", editPolygon); - setEditPolygon(true); - } - }, - { - id: "2", - render: () => ( - - Upload Data - - ), - onClick: () => openFormModalHandlerAddPolygon() - }, - { - id: "3", - render: () => ( - - Upload Images - - ), - onClick: () => openFormModalHandlerUploadImages() - } - ]; - const itemsSubmitPolygon = [ - { - id: "1", - render: () => ( - - Request Support - - ), - onClick: () => openFormModalHandlerRequestPolygonSupport() - }, - { - id: "2", - render: () => ( - - Submit for Review - - ), - onClick: () => openFormModalHandlerSubmitPolygon() - } - ]; - - const { data: allImages } = useGetV2MODELUUIDImageLocations({ - pathParams: { model: "sites", uuid: site.uuid } - }); - console.debug(allImages); - // const imagesGeoJson = - // allImages?.data?.length! > 0 - // ? { - // type: "FeatureCollection", - // features: allImages?.data?.map(image => ({ - // type: "Feature", - // properties: { - // id: image.uuid, - // image_url: image.thumb_url - // }, - // geometry: { - // type: "Point", - // coordinates: [image.location?.lng, image.location?.lat] - // } - // })) - // } - // : undefined; - - // const geoJSON = useMemo(() => { - // try { - // if (site.boundary_geojson) { - // return JSON.parse(site.boundary_geojson); - // } - // } catch (e) { - // return undefined; - // } - // return undefined; - // }, [site]); return ( @@ -331,10 +71,6 @@ const SiteOverviewTab = ({ site }: SiteOverviewTabProps) => {
- - {/* - - */} @@ -349,78 +85,17 @@ const SiteOverviewTab = ({ site }: SiteOverviewTabProps) => { modified in QGIS or ArcGIS and imported again; or fed through the mobile application.
- - - - - -
- -
- - Polygon Status - - -
- {/* Old Site Information */} - {/* - - - - - - - - - - - - - - - - - - - - - - */} Date: Wed, 12 Jun 2024 17:00:52 -0400 Subject: [PATCH 08/19] [TM-874] add constant with statusEnum --- .../elements/MapPolygonPanel/MapPolygonCheckPanelItem.tsx | 3 ++- .../elements/MapPolygonPanel/MapPolygonPanelItem.tsx | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/elements/MapPolygonPanel/MapPolygonCheckPanelItem.tsx b/src/components/elements/MapPolygonPanel/MapPolygonCheckPanelItem.tsx index 19a33168e..aa6709cd6 100644 --- a/src/components/elements/MapPolygonPanel/MapPolygonCheckPanelItem.tsx +++ b/src/components/elements/MapPolygonPanel/MapPolygonCheckPanelItem.tsx @@ -12,6 +12,7 @@ import { useModalContext } from "@/context/modal.provider"; import Button from "../Button/Button"; import Menu from "../Menu/Menu"; import { MENU_PLACEMENT_RIGHT_BOTTOM } from "../Menu/MenuVariant"; +import { StatusEnum } from "../Status/constants/statusMap"; export interface MapPolygonCheckPanelItemProps extends DetailedHTMLProps, HTMLDivElement> { @@ -52,7 +53,7 @@ const MapPolygonCheckPanelItem = ({ , HTMLDivElement> { uuid: string; @@ -47,7 +48,7 @@ const MapPolygonPanelItem = ({ Date: Wed, 12 Jun 2024 17:04:24 -0400 Subject: [PATCH 09/19] [TM-874] edit value items in mapSidePanel stories --- .../MapSidePanel/MapSidePanel.stories.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/elements/MapSidePanel/MapSidePanel.stories.tsx b/src/components/elements/MapSidePanel/MapSidePanel.stories.tsx index 3ca39db2e..6e17a26ad 100644 --- a/src/components/elements/MapSidePanel/MapSidePanel.stories.tsx +++ b/src/components/elements/MapSidePanel/MapSidePanel.stories.tsx @@ -36,7 +36,8 @@ const items = [ subtitle: "Created 03/12/21", status: "submitted", setClickedButton: console.log, - refContainer: null + refContainer: null, + type: "sites" }, { uuid: "2", @@ -44,7 +45,8 @@ const items = [ subtitle: "Created 03/12/21", status: "submitted", setClickedButton: console.log, - refContainer: null + refContainer: null, + type: "sites" }, { uuid: "3", @@ -52,7 +54,8 @@ const items = [ subtitle: "Created 03/12/21", status: "submitted", setClickedButton: console.log, - refContainer: null + refContainer: null, + type: "sites" }, { uuid: "4", @@ -61,7 +64,8 @@ const items = [ subtitle: "Created 03/12/21", status: "submitted", setClickedButton: console.log, - refContainer: null + refContainer: null, + type: "sites" }, { uuid: "5", @@ -69,7 +73,8 @@ const items = [ subtitle: "Created 03/12/21", status: "submitted", setClickedButton: console.log, - refContainer: null + refContainer: null, + type: "sites" }, { uuid: "6", @@ -77,6 +82,7 @@ const items = [ subtitle: "Created 03/12/21", status: "submitted", setClickedButton: console.log, - refContainer: null + refContainer: null, + type: "sites" } ]; From 88460a4b87edcb547ee1421c5104e478f3d894ec Mon Sep 17 00:00:00 2001 From: cesarLima1 Date: Wed, 12 Jun 2024 17:34:38 -0400 Subject: [PATCH 10/19] [TM-874] remove console.log --- src/components/elements/Map-mapbox/Map.tsx | 6 +----- src/components/elements/Map-mapbox/hooks/useMap.ts | 1 - 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/elements/Map-mapbox/Map.tsx b/src/components/elements/Map-mapbox/Map.tsx index 055844cd4..e2c411533 100644 --- a/src/components/elements/Map-mapbox/Map.tsx +++ b/src/components/elements/Map-mapbox/Map.tsx @@ -232,11 +232,7 @@ export const MapContainer = ({ }; return ( -
+
diff --git a/src/components/elements/Map-mapbox/hooks/useMap.ts b/src/components/elements/Map-mapbox/hooks/useMap.ts index 085840882..45810cf70 100644 --- a/src/components/elements/Map-mapbox/hooks/useMap.ts +++ b/src/components/elements/Map-mapbox/hooks/useMap.ts @@ -47,7 +47,6 @@ export const useMap = (onSave?: (geojson: any, record: any) => void) => { const initMap = () => { if (map.current) return; - console.log("map.current", map.current); map.current = new mapboxgl.Map({ container: mapContainer.current as HTMLDivElement, style: MAP_STYLE, From 84687e624ee5de4a82f11b38b9d92b89b9b0faae Mon Sep 17 00:00:00 2001 From: cesarLima1 Date: Wed, 12 Jun 2024 17:37:40 -0400 Subject: [PATCH 11/19] [TM-874] remove logs --- src/pages/project/[uuid]/components/OverviewMapArea.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/project/[uuid]/components/OverviewMapArea.tsx b/src/pages/project/[uuid]/components/OverviewMapArea.tsx index 0097bffd1..6b93b3f21 100644 --- a/src/pages/project/[uuid]/components/OverviewMapArea.tsx +++ b/src/pages/project/[uuid]/components/OverviewMapArea.tsx @@ -32,7 +32,6 @@ const OverviewMapArea = ({ entityModel, type }: EntityAreaProps) => { }; useEffect(() => { - console.log("entityModel", entityModel); if (entityModel?.uuid) { const statusFilter = checkedValues.join(","); getPolygonsData(entityModel.uuid, statusFilter, sortOrder, type, setResultValues); From 8a0e59043e7bfe4fb478e59e0a621e7a0b2d2a9a Mon Sep 17 00:00:00 2001 From: Dotty Date: Wed, 12 Jun 2024 18:12:17 -0400 Subject: [PATCH 12/19] [TM-874] solved PR - add transifex --- .../MapPolygonPanel/AttributeInformation.tsx | 42 ++++++++++--------- 1 file changed, 23 insertions(+), 19 deletions(-) diff --git a/src/components/elements/MapPolygonPanel/AttributeInformation.tsx b/src/components/elements/MapPolygonPanel/AttributeInformation.tsx index 066b764b7..bae22cb23 100644 --- a/src/components/elements/MapPolygonPanel/AttributeInformation.tsx +++ b/src/components/elements/MapPolygonPanel/AttributeInformation.tsx @@ -1,3 +1,5 @@ +import { useT } from "@transifex/react"; + import Dropdown from "@/components/elements/Inputs/Dropdown/Dropdown"; import Input from "@/components/elements/Inputs/Input/Input"; @@ -67,81 +69,83 @@ const dropdownOptionsTree = [ } ]; const AttributeInformation = () => { + const t = useT(); + return (
{}} className="bg-white" /> {}} className="bg-white" /> {}} className="bg-white" /> From a6d794143b073ea33d6e9b8497012b091f893387 Mon Sep 17 00:00:00 2001 From: Dotty Date: Wed, 12 Jun 2024 18:29:59 -0400 Subject: [PATCH 13/19] [TM-874] solved PR - add transifex --- .../MapPolygonPanel/ChecklistInformation.tsx | 37 ++++++++++--------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/src/components/elements/MapPolygonPanel/ChecklistInformation.tsx b/src/components/elements/MapPolygonPanel/ChecklistInformation.tsx index 3412f1c5e..bbe6b4ae9 100644 --- a/src/components/elements/MapPolygonPanel/ChecklistInformation.tsx +++ b/src/components/elements/MapPolygonPanel/ChecklistInformation.tsx @@ -1,3 +1,5 @@ +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"; @@ -7,12 +9,13 @@ import Text from "../Text/Text"; const ChecklistInformation = () => { const { openModal, closeModal } = useModalContext(); + const t = useT(); + const openFormModalHandlerRequestPolygonSupport = () => { openModal( @@ -20,59 +23,59 @@ const ChecklistInformation = () => { }; return (
- 3 out 14 - Validation criteria are not met + 3 {t("out")} 14 + {t("Validation criteria are not met")}
- GeoJSON Format + {t("GeoJSON Format")} - WGS84 Projection + {t("WGS84 Projection")} - Earth Location + {t("Earth Location")} - Country + {t("Country")} - Reasonable Size Self-Intersecting Topology + {t("Reasonable Size Self-Intersecting Topology")} - Overlapping Polygons + {t("Overlapping Polygons")} - Spike + {t("Spike")} - Polygon Integrity + {t("Polygon Integrity")} - GeoJSON Format + {t("GeoJSON Format")} - WGS84 Projection + {t("WGS84 Projection")} - Earth Location + {t("Earth Location")} - Country + {t("Country")}
From eacd9de0963398b0ce6daa8ee17744fe03e534ba Mon Sep 17 00:00:00 2001 From: Dotty Date: Wed, 12 Jun 2024 18:49:18 -0400 Subject: [PATCH 14/19] [TM-874] solved PR - add transifex and remove mocked data --- src/pages/site/[uuid]/components/SiteArea.tsx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/pages/site/[uuid]/components/SiteArea.tsx b/src/pages/site/[uuid]/components/SiteArea.tsx index 5a3475b38..1c464a242 100644 --- a/src/pages/site/[uuid]/components/SiteArea.tsx +++ b/src/pages/site/[uuid]/components/SiteArea.tsx @@ -42,37 +42,37 @@ const SiteArea = ({ sites, editPolygon, setEditPolygon }: SiteAreaProps) => { - Preview Attributes + {t("Preview Attributes")}
- Polygon ID + {t("Polygon ID")} - 1213023412 + -
- Restoration Practice + {t("Restoration Practice")} - 1213023412 + -
- Target Land Use System + {t("Target Land Use System")} - Riparian Area or Wetl... + -
- Tree Distribution + {t("Tree Distribution")} - Single Line + -
- Source + {t("Source")} - Flority + -
From 5f38294f92a67acc577979c882f36b5998fe00c1 Mon Sep 17 00:00:00 2001 From: Dotty Date: Wed, 12 Jun 2024 18:57:59 -0400 Subject: [PATCH 15/19] [TM-874] solved PR - add transifex and remove mocked data --- .../MapPolygonPanel/VersionInformation.tsx | 90 +++++++------------ 1 file changed, 33 insertions(+), 57 deletions(-) diff --git a/src/components/elements/MapPolygonPanel/VersionInformation.tsx b/src/components/elements/MapPolygonPanel/VersionInformation.tsx index 5a1f2476d..f628a90af 100644 --- a/src/components/elements/MapPolygonPanel/VersionInformation.tsx +++ b/src/components/elements/MapPolygonPanel/VersionInformation.tsx @@ -1,3 +1,4 @@ +import { useT } from "@transifex/react"; import classNames from "classnames"; import { Dispatch, SetStateAction } from "react"; @@ -11,6 +12,8 @@ import Text from "../Text/Text"; const VersionInformation = ({ setPreviewVersion }: { setPreviewVersion: Dispatch> }) => { const { openModal, closeModal } = useModalContext(); + const t = useT(); + const openFormModalHandlerConfirm = () => { openModal( ( -   Preview Version +   {t("Preview Version")} ), onClick: () => setPreviewVersion(true) @@ -37,78 +40,51 @@ const VersionInformation = ({ setPreviewVersion }: { setPreviewVersion: Dispatch render: () => ( -   Delete Version +   {t("Delete Version")} ), onClick: () => openFormModalHandlerConfirm() } ]; - const data = [ - { - title: "ID Wenguru v4", - date: "Feb 12, 24", - current: "No" - }, - { - title: "ID Wenguru v3", - date: "Feb 11, 24", - current: "Yes" - }, - { - title: "ID Wenguru v2", - date: "Feb 10, 24", - current: "No" - }, - { - title: "ID Wenguru v1", - date: "Feb 8, 24", - current: "No" - }, - { - title: "ID Wenguru v1", - date: "Feb 6, 24", - current: "No" - } - ]; + return (
- Version + {t("Version")} - Date + {t("Date")} - Current + {t("Current")}
- {data.map((item, index) => ( -
- - {item.title} - - - {item.date} - -
- - - - -
+ +
+ + - + + + - + +
+ + + +
- ))} +
); }; From 02249ca0903956ce563b6624c312eddd7d37874a Mon Sep 17 00:00:00 2001 From: Dotty Date: Wed, 12 Jun 2024 19:02:27 -0400 Subject: [PATCH 16/19] [TM-874] solved PR - add transifex and change ?? --- .../elements/MapPolygonPanel/MapPolygonSitePanel.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/elements/MapPolygonPanel/MapPolygonSitePanel.tsx b/src/components/elements/MapPolygonPanel/MapPolygonSitePanel.tsx index b2c021193..175a496c3 100644 --- a/src/components/elements/MapPolygonPanel/MapPolygonSitePanel.tsx +++ b/src/components/elements/MapPolygonPanel/MapPolygonSitePanel.tsx @@ -75,11 +75,11 @@ const MapPlygonSitePanel = ({ return ( <> - {}} /> + {}} />
-   new Polygon +   {t("new Polygon")}
@@ -147,7 +147,7 @@ const MapPlygonSitePanel = ({
{PolygonData.length === 0 && ( - {emptyText || t("No result")} + {emptyText ?? t("No result")} )}
Date: Wed, 12 Jun 2024 19:13:32 -0400 Subject: [PATCH 17/19] [TM-874] solved PR - add transifex and remove mocked data --- .../MapPolygonPanel/ChecklistInformation.tsx | 3 +- .../MapPolygonPanel/MapPolygonPanelItem.tsx | 35 ++++++++++--------- 2 files changed, 21 insertions(+), 17 deletions(-) diff --git a/src/components/elements/MapPolygonPanel/ChecklistInformation.tsx b/src/components/elements/MapPolygonPanel/ChecklistInformation.tsx index bbe6b4ae9..1948979c2 100644 --- a/src/components/elements/MapPolygonPanel/ChecklistInformation.tsx +++ b/src/components/elements/MapPolygonPanel/ChecklistInformation.tsx @@ -16,7 +16,8 @@ const ChecklistInformation = () => { ); diff --git a/src/components/elements/MapPolygonPanel/MapPolygonPanelItem.tsx b/src/components/elements/MapPolygonPanel/MapPolygonPanelItem.tsx index 9bd9d43c7..bd0392b85 100644 --- a/src/components/elements/MapPolygonPanel/MapPolygonPanelItem.tsx +++ b/src/components/elements/MapPolygonPanel/MapPolygonPanelItem.tsx @@ -1,3 +1,4 @@ +import { useT } from "@transifex/react"; import classNames from "classnames"; import { DetailedHTMLProps, Dispatch, HTMLAttributes, SetStateAction } from "react"; @@ -32,13 +33,15 @@ const MapPolygonPanelItem = ({ ...props }: MapPolygonPanelItemProps) => { const { openModal, closeModal } = useModalContext(); + const t = useT(); + const openFormModalHandlerRequestPolygonSupport = () => { openModal( ); @@ -46,12 +49,12 @@ const MapPolygonPanelItem = ({ const openFormModalHandlerAddCommentary = () => { openModal( ); @@ -59,8 +62,8 @@ const MapPolygonPanelItem = ({ const openFormModalHandlerConfirm = () => { openModal( {}} /> @@ -73,7 +76,7 @@ const MapPolygonPanelItem = ({ render: () => ( -   Edit Polygon +   {t("Edit Polygon")} ), onClick: () => { @@ -87,7 +90,7 @@ const MapPolygonPanelItem = ({ render: () => ( -   Zoom to +   {t("Zoom to")} ) }, @@ -96,7 +99,7 @@ const MapPolygonPanelItem = ({ render: () => ( -   Download +   {t("Download")} ) }, @@ -106,7 +109,7 @@ const MapPolygonPanelItem = ({ ) @@ -117,7 +120,7 @@ const MapPolygonPanelItem = ({ ) @@ -128,7 +131,7 @@ const MapPolygonPanelItem = ({ ) @@ -148,9 +151,9 @@ const MapPolygonPanelItem = ({
- {title} + {t(title)} - {subtitle} + {t(subtitle)}
From 796836732cdf60cf5054d6700902958870eaf8f9 Mon Sep 17 00:00:00 2001 From: Dotty Date: Thu, 13 Jun 2024 09:40:46 -0400 Subject: [PATCH 18/19] [TM-874] solved PR - add transifex and remove mocked data --- .../MapPolygonPanel/MapEditPolygonPanel.tsx | 132 +++++++++--------- .../MapPolygonCheckPanelItem.tsx | 35 ++--- .../MapPolygonPanel/MapPolygonCkeckPanel.tsx | 6 +- .../MapPolygonPanel/VersionInformation.tsx | 8 +- 4 files changed, 91 insertions(+), 90 deletions(-) diff --git a/src/components/elements/MapPolygonPanel/MapEditPolygonPanel.tsx b/src/components/elements/MapPolygonPanel/MapEditPolygonPanel.tsx index 67373bd81..0729096ea 100644 --- a/src/components/elements/MapPolygonPanel/MapEditPolygonPanel.tsx +++ b/src/components/elements/MapPolygonPanel/MapEditPolygonPanel.tsx @@ -23,73 +23,71 @@ const MapEditPolygonPanel = ({ tabEditPolygon, setTabEditPolygon, setPreviewVersion -}: MapEditPolygonPanelProps) => { - return ( - <> -
-
- - Faja Lobi Project - - - Iseme Site - -
- - -
-
- - - +}: MapEditPolygonPanelProps) => ( + <> +
+
+ + - + + + - +
-
- {AttributeInformation} - {ChecklistInformation} - - - -
- - ); -}; + + +
+
+ + + +
+
+ {AttributeInformation} + {ChecklistInformation} + + + +
+ +); export default MapEditPolygonPanel; diff --git a/src/components/elements/MapPolygonPanel/MapPolygonCheckPanelItem.tsx b/src/components/elements/MapPolygonPanel/MapPolygonCheckPanelItem.tsx index aa6709cd6..fefbb5c4e 100644 --- a/src/components/elements/MapPolygonPanel/MapPolygonCheckPanelItem.tsx +++ b/src/components/elements/MapPolygonPanel/MapPolygonCheckPanelItem.tsx @@ -1,3 +1,4 @@ +import { useT } from "@transifex/react"; import classNames from "classnames"; import { DetailedHTMLProps, Dispatch, HTMLAttributes, SetStateAction, useState } from "react"; import { When } from "react-if"; @@ -37,13 +38,15 @@ const MapPolygonCheckPanelItem = ({ }: MapPolygonCheckPanelItemProps) => { const { openModal, closeModal } = useModalContext(); const [openCollapse, setOpenCollapse] = useState(true); + const t = useT(); + const openFormModalHandlerRequestPolygonSupport = () => { openModal( ); @@ -51,12 +54,12 @@ const MapPolygonCheckPanelItem = ({ const openFormModalHandlerAddCommentary = () => { openModal( ); @@ -64,8 +67,8 @@ const MapPolygonCheckPanelItem = ({ const openFormModalHandlerConfirm = () => { openModal( {}} /> @@ -78,7 +81,7 @@ const MapPolygonCheckPanelItem = ({ render: () => ( -   Edit Polygon +   {t("Edit Polygon")} ), onClick: () => { @@ -92,7 +95,7 @@ const MapPolygonCheckPanelItem = ({ render: () => ( -   Zoom to +   {t("Zoom to")} ) }, @@ -101,7 +104,7 @@ const MapPolygonCheckPanelItem = ({ render: () => ( -   Download +   {t("Download")} ) }, @@ -111,7 +114,7 @@ const MapPolygonCheckPanelItem = ({ ) @@ -122,7 +125,7 @@ const MapPolygonCheckPanelItem = ({ ) @@ -133,7 +136,7 @@ const MapPolygonCheckPanelItem = ({ ) @@ -162,7 +165,7 @@ const MapPolygonCheckPanelItem = ({
{" "}
- {title} + {t(title)}
@@ -196,7 +199,7 @@ const MapPolygonCheckPanelItem = ({
- {item} + {t(item)}
))} diff --git a/src/components/elements/MapPolygonPanel/MapPolygonCkeckPanel.tsx b/src/components/elements/MapPolygonPanel/MapPolygonCkeckPanel.tsx index e1305674f..745ae8fe6 100644 --- a/src/components/elements/MapPolygonPanel/MapPolygonCkeckPanel.tsx +++ b/src/components/elements/MapPolygonPanel/MapPolygonCkeckPanel.tsx @@ -23,12 +23,12 @@ const MapPlygonCheckPanel = ({ emptyText, onLoadMore, setEditPolygon, selected } return ( <> - Available polygons + {t("Available polygons")}
{PolygonAvailableData.length === 0 && ( - {emptyText || t("No result")} + {t(emptyText) ?? t("No result")} )}
-   Add Polygon +   {t("Add Polygon")} ); diff --git a/src/components/elements/MapPolygonPanel/VersionInformation.tsx b/src/components/elements/MapPolygonPanel/VersionInformation.tsx index f628a90af..5909948c6 100644 --- a/src/components/elements/MapPolygonPanel/VersionInformation.tsx +++ b/src/components/elements/MapPolygonPanel/VersionInformation.tsx @@ -17,8 +17,8 @@ const VersionInformation = ({ setPreviewVersion }: { setPreviewVersion: Dispatch const openFormModalHandlerConfirm = () => { openModal( {}} /> @@ -71,8 +71,8 @@ const VersionInformation = ({ setPreviewVersion }: { setPreviewVersion: Dispatch