From 23261b432a64239685c9c6be1992e694be11ef9a Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Tue, 10 Dec 2024 11:07:35 +0530 Subject: [PATCH 01/39] Intervention Constant added --- src/utils/constants/intervention.ts | 75 +++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 src/utils/constants/intervention.ts diff --git a/src/utils/constants/intervention.ts b/src/utils/constants/intervention.ts new file mode 100644 index 000000000..652d6403d --- /dev/null +++ b/src/utils/constants/intervention.ts @@ -0,0 +1,75 @@ +export const SINGLE_TREE = '#007A49'; +export const MULTI_TREE = '#68B030'; +export const INVASIVE_SPECIES = '#EB5757'; +export const FIRE_SUPPRESSION = '#F2C94C'; +export const FIRE_PATROL = '#F2994A'; +export const FENCING = '#48AADD'; +export const MARKING_REGENERANT = '#27AE60'; +export const LIBERATING_REGENERANT = '#56CCF2'; +export const GRASS_SUPPRESSION = '#219653'; +export const FIREBREAKS = '#E86F56'; +export const SEED_RAIN = '#2F80ED'; +export const SOIL_IMPROVEMENT = '#6D4230'; +export const STOP_HARVESTING = '#4F4F4F'; +export const DIRECT_SEEDING = '#6FCF97'; +export const ENRICHMENT_PLANTING = '#EB67CE'; +export const MAINTENANCE = '#6C63FF'; +export const OTHER_INTERVENTION = '#9B51E0'; + +export const FillColor: any = [ + 'match', + ['get', 'key'], + 'remeasurement', 'tomato', + 'single-tree-registration', SINGLE_TREE, + 'multi-tree-registration', MULTI_TREE, + 'removal-invasive-species', INVASIVE_SPECIES, + 'fire-suppression', FIRE_SUPPRESSION, + 'fire-patrol', FIRE_PATROL, + 'fencing', FENCING, + 'marking-regenerant', MARKING_REGENERANT, + 'liberating-regenerant', LIBERATING_REGENERANT, + 'grass-suppression', GRASS_SUPPRESSION, + 'firebreaks', FIREBREAKS, + 'assisting-seed-rain', SEED_RAIN, + 'soil-improvement', SOIL_IMPROVEMENT, + 'stop-tree-harvesting', STOP_HARVESTING, + 'direct-seeding', DIRECT_SEEDING, + 'enrichment-planting', ENRICHMENT_PLANTING, + 'other-intervention', OTHER_INTERVENTION, + 'maintenance', MAINTENANCE, + SINGLE_TREE +] +export type INTERVENTION_TYPE = 'single-tree-registration' | 'multi-tree-registration' | 'removal-invasive-species' | 'fire-suppression' | 'fire-patrol' | 'fencing' | 'marking-regenerant' | 'liberating-regenerant' | 'grass-suppression' | 'firebreaks' | 'assisting-seed-rain' | 'soil-improvement' | 'stop-tree-harvesting' | 'direct-seeding' | 'enrichment-planting' | 'other-intervention' | 'maintenance' | 'unknown' + + +export const AllIntervention: Array<{ + label: string + value: INTERVENTION_TYPE + index: number +}> = [ + { + label: 'Single Tree Plantation', + value: 'single-tree-registration', + index: 0, + }, + { label: 'Multi Tree Plantation', value: 'multi-tree-registration', index: 0 }, + { label: 'Fire Patrol', value: 'fire-patrol', index: 0 }, + { label: 'Fire Suppression Team', value: 'fire-suppression', index: 0 }, + { label: 'Establish Fire Breaks', value: 'firebreaks', index: 0 }, + { label: 'Fencing', value: 'fencing', index: 0 }, + { + label: 'Removal of Invasive Species', + value: 'removal-invasive-species', + index: 0, + }, + { label: 'Direct Seeding', value: 'direct-seeding', index: 0 }, + { label: 'Grass Suppression', value: 'grass-suppression', index: 0 }, + { label: 'Marking Regenerant', value: 'marking-regenerant', index: 0 }, + { label: 'Enrichment Planting', value: 'enrichment-planting', index: 0 }, + { label: 'Liberating Regenerant', value: 'liberating-regenerant', index: 0 }, + { label: 'Soil Improvement', value: 'soil-improvement', index: 0 }, + { label: 'Assisting Seed Rain', value: 'assisting-seed-rain', index: 0 }, + { label: 'Stop Tree Harvesting', value: 'stop-tree-harvesting', index: 0 }, + { label: 'Maintenance', value: 'maintenance', index: 0 }, + { label: 'Other Intervention', value: 'other-intervention', index: 0 }, + ] \ No newline at end of file From 140cb0d157ad88b0c1cc4cd70e3920da4c89f9d1 Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Tue, 10 Dec 2024 11:36:41 +0530 Subject: [PATCH 02/39] Basic intervention filter added --- .../InterventionList.module.scss | 159 ++++++++++++++++++ .../InterventionDropDown/InterventionList.tsx | 61 +++++++ .../InterventionDropDown/index.tsx | 124 ++++++++++++++ .../projectsV2/ProjectsMap/MapControls.tsx | 14 ++ 4 files changed, 358 insertions(+) create mode 100644 src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.module.scss create mode 100644 src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx create mode 100644 src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.module.scss b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.module.scss new file mode 100644 index 000000000..8f151151d --- /dev/null +++ b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.module.scss @@ -0,0 +1,159 @@ +@import '../../../../theme/theme'; + +$layoutPaddingTop: 24px; +$layoutPaddingSide: 20px; + +.dropdownButton { + display: flex; + border-radius: 12px; + background: $backgroundColor; + align-items: center; + padding: 12px 0px 9px 12px; + min-width: 350px; + justify-content: space-between; + cursor: pointer; + gap: 18px; + position: absolute; + z-index: 2; + top: calc($layoutPaddingTop + 100px); + right: calc($layoutPaddingSide + 10px); +} +.siteIconAndTextContainer { + display: flex; + gap: 6px; +} +.labelTextContainer { + display: flex; + flex-direction: column; +} +.sitesLabel { + font-size: $fontXXXSmallNew; + color: $nonDonatableProjectBackgroundColor; + font-weight: 600; + span { + display: inline; + } +} + +.siteId { + text-transform: uppercase; +} +.siteName { + text-transform: capitalize; + font-size: $fontXSmall; + font-weight: 700; + color: #333; //to be replaced +} +.menuArrow { + display: flex; + align-items: center; + margin-right: 13px; + svg { + width: 100%; + overflow: visible; + } +} +.siteListOptions { + background-color: $backgroundColor; + padding: 6px 17px; + border-radius: 12px; + margin-top: 12px; + width: 350px; + font-size: $fontXSmall; + position: absolute; + z-index: 4; + top: 170px; + right: 30px; + max-height: 58vh; + overflow-y: auto; + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* Internet Explorer 10+ */ + &::-webkit-scrollbar { + display: none; /* Safari and Chrome */ + } + > button { + width: 100%; + } +} +.listItem { + display: flex; + justify-content: space-between; + gap: 30px; + padding: 9px 0px; + color: rgba(51, 51, 51, 1); + cursor: pointer; + border-bottom: 1px solid $dividerColorNew; + font-weight: 400; + &:last-of-type { + border-bottom: none; + } +} +.hideDivider { + display: none; +} +.showDivider { + height: 0px; + border: 0px; + border-top: 1px solid $dividerColorNew; + margin: 0px; +} +.selectedItem { + color: #333; //to be replaced + text-shadow: 0 0 0.01px; + font-weight: 700; +} + +@include xsPhoneView { + .siteIconAndTextContainer { + > svg { + width: 16px; + } + } + .menuArrow { + margin-right: 5.13px; + svg { + width: 6.37px; + height: 4.183px; + } + } + .dropdownButton { + border-radius: 10px; + min-width: 93px; + padding: 7px; + position: unset; + } + .labelTextContainer { + justify-content: center; + .sitesLabel { + display: flex; + flex-direction: column; + .siteId { + text-transform: none; + } + .separator { + display: none; + } + } + .siteName { + display: none; + } + } + .siteListOptions { + max-width: 140px; + padding: 8px 12px; + top: 36px; + right: 0px; + min-width: 160px; + .listItem { + display: flex; + flex-direction: column; + gap: 0; + font-size: $fontXXXSmallNew; + padding: 4px 0; + color: #333; //to be replaced + .siteArea { + font-size: $fontXXSmall; + } + } + } +} diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx new file mode 100644 index 000000000..d9fdf065f --- /dev/null +++ b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx @@ -0,0 +1,61 @@ +import { useLocale } from 'next-intl'; +import { getFormattedRoundedNumber } from '../../../../utils/getFormattedNumber'; +import type { SetState } from '../../../common/types/common'; +import type { + PlantLocation, + SamplePlantLocation, +} from '../../../common/types/plantLocation'; + +import styles from '../../ProjectsMap/InterventionDropDown/InterventionList.module.scss'; + +type SiteData = { + label: string; + id: number; +}; +interface InterventionListProps { + siteList: SiteData[]; + setSelectedSite: SetState; + setIsMenuOpen: SetState; + selectedSiteData: SiteData | undefined; + setSelectedPlantLocation: SetState; + setSelectedSamplePlantLocation: SetState; +} +const InterventionList = ({ + siteList, + setSelectedSite, + setIsMenuOpen, + selectedSiteData, + setSelectedPlantLocation, + setSelectedSamplePlantLocation, +}: InterventionListProps) => { + const locale = useLocale(); + const handleSiteSelection = (index: number) => { + setSelectedPlantLocation(null); + setSelectedSamplePlantLocation(null); + setIsMenuOpen(false); + setSelectedSite(index); + }; + + return ( +
    + {siteList.map((site, index) => { + return ( +
  • handleSiteSelection(index)} + key={index} + > +

    {site.label}

    + {/*

    + {getFormattedRoundedNumber(locale, site.siteArea, 0)} ha +

    */} +
    • + ); + })} +
+ ); +}; + +export default InterventionList; diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx new file mode 100644 index 000000000..48bb7f285 --- /dev/null +++ b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx @@ -0,0 +1,124 @@ +import type { SetState } from '../../../common/types/common'; +import type { Feature, MultiPolygon, Polygon } from 'geojson'; +import type { + PlantLocation, + SamplePlantLocation, +} from '../../../common/types/plantLocation'; + +import { useState, useMemo, useCallback } from 'react'; +import { useLocale, useTranslations } from 'next-intl'; +import { useRouter } from 'next/router'; +import styles from './InterventionList.module.scss'; +import DropdownUpArrow from '../../../../temp/icons/DropdownUpArrow'; +import DropdownDownArrow from '../../../../temp/icons/DropdownDownArrow'; +import InterventionList from './InterventionList'; +import { truncateString } from '../../../../utils/getTruncatedString'; +import { INTERVENTION_TYPE } from '../../../../utils/constants/intervention'; + +interface InterventionType { + label: string + value: INTERVENTION_TYPE + index: number +} + + +interface Props { + allIntervention: InterventionType[]; + selectedSite: number | null; + setSelectedSite: SetState; + selectedPlantLocation: PlantLocation | null; + setSelectedPlantLocation: SetState; + setSelectedSamplePlantLocation: SetState; +} + +const ProjectSiteDropdown = ({ + allIntervention, + selectedSite, + setSelectedSite, + selectedPlantLocation, + setSelectedPlantLocation, + setSelectedSamplePlantLocation, +}: Props) => { + const [isMenuOpen, setIsMenuOpen] = useState(false); + const tProjectDetails = useTranslations('ProjectDetails'); + const locale = useLocale(); + const router = useRouter(); + const { query } = router; + const siteList = useMemo(() => { + if (!allIntervention) return []; + return allIntervention.map((el, index: number) => ({ + label: el.label, + id: index, + })); + }, [allIntervention]); + + const getId = useCallback( + (selectedSiteId: number) => { + const index = siteList.findIndex((site) => site.id === selectedSiteId); + return index !== -1 ? index + 1 : null; + }, + [siteList] + ); + const selectedSiteData = + selectedSite !== null ? siteList[selectedSite] : undefined; + + const toggleMenu = () => setIsMenuOpen((prev) => !prev); + return ( + <> +
+
+ {/* */} + {selectedPlantLocation && query.ploc ? ( + '-' + ) : ( + <> + {selectedSiteData && ( +
+ +

+ {truncateString(selectedSiteData?.label, 40)} +

+
+ )} + + )} +
+
+ {isMenuOpen ? ( + + ) : ( + + )} +
+
+ {isMenuOpen && ( + + )} + + ); +}; + +export default ProjectSiteDropdown; diff --git a/src/features/projectsV2/ProjectsMap/MapControls.tsx b/src/features/projectsV2/ProjectsMap/MapControls.tsx index 63ade5027..11725c422 100644 --- a/src/features/projectsV2/ProjectsMap/MapControls.tsx +++ b/src/features/projectsV2/ProjectsMap/MapControls.tsx @@ -3,6 +3,7 @@ import type { SetState } from '../../common/types/common'; import type { MobileOs } from '../../../utils/projectV2'; import ProjectSiteDropdown from './ProjectSiteDropDown'; +import InterventionDropDown from './InterventionDropDown'; import ProjectListControlForMobile from '../ProjectListControls/ProjectListControlForMobile'; import { useProjectsMap } from '../ProjectsMapContext'; import { useProjects } from '../ProjectsContext'; @@ -10,6 +11,7 @@ import LayerIcon from '../../../../public/assets/images/icons/LayerIcon'; import LayerDisabled from '../../../../public/assets/images/icons/LayerDisabled'; import CrossIcon from '../../../../public/assets/images/icons/projectV2/CrossIcon'; import styles from '../ProjectsMap/ProjectsMap.module.scss'; +import { AllIntervention } from '../../../utils/constants/intervention'; interface MapControlsProps { isMobile: boolean; @@ -64,6 +66,15 @@ const MapControls = ({ setSelectedPlantLocation, setSelectedSamplePlantLocation, }; + + const InterventionDropdownProps = { + selectedSite, + setSelectedSite, + allIntervention: AllIntervention, + selectedPlantLocation, + setSelectedPlantLocation, + setSelectedSamplePlantLocation, + }; const projectListControlProps = { ...siteDropdownProps, projectCount: projects?.length, @@ -120,7 +131,10 @@ const MapControls = ({ ) : ( <> {hasProjectSites && ( + <> + + )} )} From a3e6a307d8c3d567897ac804d8bca187cbc75d6b Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Tue, 10 Dec 2024 13:46:21 +0530 Subject: [PATCH 03/39] Project Context updated --- src/features/projectsV2/ProjectsContext.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/features/projectsV2/ProjectsContext.tsx b/src/features/projectsV2/ProjectsContext.tsx index 1a1bfa33f..33edc585b 100644 --- a/src/features/projectsV2/ProjectsContext.tsx +++ b/src/features/projectsV2/ProjectsContext.tsx @@ -58,6 +58,8 @@ interface ProjectsState { topProjects: MapProject[] | undefined; selectedMode?: ViewMode; setSelectedMode?: SetState; + selectedIntervention: string; + setSelectedIntervention: SetState; } const ProjectsContext = createContext(null); @@ -92,6 +94,7 @@ export const ProjectsProvider: FC = ({ const [hoveredPlantLocation, setHoveredPlantLocation] = useState(null); const [selectedSite, setSelectedSite] = useState(null); + const [selectedIntervention, setSelectedIntervention] = useState('default'); const [preventShallowPush, setPreventShallowPush] = useState(false); const [isLoading, setIsLoading] = useState(false); const [isError, setIsError] = useState(false); @@ -238,6 +241,7 @@ export const ProjectsProvider: FC = ({ setSingleProject(null); setHoveredPlantLocation(null); setSelectedSite(null); + setSelectedIntervention('default') setPreventShallowPush(false); setPlantLocations(null); } @@ -442,6 +446,8 @@ export const ProjectsProvider: FC = ({ setSelectedSamplePlantLocation, selectedSite, setSelectedSite, + selectedIntervention, + setSelectedIntervention, setPreventShallowPush, }), [ @@ -461,6 +467,7 @@ export const ProjectsProvider: FC = ({ hoveredPlantLocation, selectedSite, preventShallowPush, + selectedIntervention ] ); From 067d46d3d5c0d8cca65bbc0c17b04357b72fdd3b Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Tue, 10 Dec 2024 13:49:07 +0530 Subject: [PATCH 04/39] Intervention polygon color logic added --- .../microComponents/PlantLocations.tsx | 56 ++++++++++--------- 1 file changed, 29 insertions(+), 27 deletions(-) diff --git a/src/features/projectsV2/ProjectsMap/microComponents/PlantLocations.tsx b/src/features/projectsV2/ProjectsMap/microComponents/PlantLocations.tsx index baea40264..11e3fa796 100644 --- a/src/features/projectsV2/ProjectsMap/microComponents/PlantLocations.tsx +++ b/src/features/projectsV2/ProjectsMap/microComponents/PlantLocations.tsx @@ -14,6 +14,7 @@ import styles from '../ProjectsMap.module.scss'; import { localizedAbbreviatedNumber } from '../../../../utils/getFormattedNumber'; import { useProjects } from '../../ProjectsContext'; import { useProjectsMap } from '../../ProjectsMapContext'; +import { FillColor } from '../../../../utils/constants/intervention'; export default function PlantLocations(): React.ReactElement { const { @@ -23,6 +24,7 @@ export default function PlantLocations(): React.ReactElement { setSelectedPlantLocation, setSelectedSamplePlantLocation, selectedSamplePlantLocation, + selectedIntervention } = useProjects(); const { isSatelliteView, viewState } = useProjectsMap(); @@ -132,7 +134,7 @@ export default function PlantLocations(): React.ReactElement { if (!plantLocations || plantLocations.length === 0) { return <>; } - const features = plantLocations.map((el) => { + const features = plantLocations.filter(d => d.type === selectedIntervention).map((el) => { const isSelected = selectedPlantLocation && selectedPlantLocation.id === el.id; const isHovered = hoveredPlantLocation && hoveredPlantLocation.id === el.id; @@ -141,6 +143,7 @@ export default function PlantLocations(): React.ReactElement { opacity: el.type === 'multi-tree-registration' ? getPolygonColor(el) : 0.5, dateDiff: getDateDiff(el), + type: el.type }); return GeoJSON; }); @@ -159,7 +162,7 @@ export default function PlantLocations(): React.ReactElement { id={`plant-polygon-layer`} type="fill" paint={{ - 'fill-color': isSatelliteView ? '#ffffff' : '#007A49', + 'fill-color': isSatelliteView ? FillColor : FillColor, 'fill-opacity': ['get', 'opacity'], }} filter={['==', ['geometry-type'], 'Polygon']} @@ -168,7 +171,7 @@ export default function PlantLocations(): React.ReactElement { id={`point-layer`} type="circle" paint={{ - 'circle-color': isSatelliteView ? '#ffffff' : '#007A49', + 'circle-color': isSatelliteView ? FillColor : FillColor, 'circle-opacity': [ 'case', [ @@ -186,7 +189,7 @@ export default function PlantLocations(): React.ReactElement { id={`line-selected`} type="line" paint={{ - 'line-color': isSatelliteView ? '#ffffff' : '#007A49', + 'line-color': isSatelliteView ? '#ffffff' : FillColor, 'line-width': 4, }} filter={['==', ['get', 'highlightLine'], true]} @@ -205,31 +208,30 @@ export default function PlantLocations(): React.ReactElement { filter={['!=', ['get', 'dateDiff'], '']} /> {selectedPlantLocation && - selectedPlantLocation.type === 'multi-tree-registration' && - viewState.zoom > 14 && - selectedPlantLocation.sampleInterventions + selectedPlantLocation.type === 'multi-tree-registration' && + viewState.zoom > 14 && + selectedPlantLocation.sampleInterventions ? selectedPlantLocation.sampleInterventions.map((spl) => { - return ( - -
+
openPl(e, spl)} - /> - - ); - }) + role="button" + tabIndex={0} + onClick={(e) => openPl(e, spl)} + /> + + ); + }) : null} From 3afbe9e2d291f42f74589d9be98a870556dac946 Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Tue, 10 Dec 2024 13:49:37 +0530 Subject: [PATCH 05/39] Intervetion filter updated --- .../InterventionDropDown/InterventionList.tsx | 31 ++++------ .../InterventionDropDown/index.tsx | 58 +++++------------- .../projectsV2/ProjectsMap/MapControls.tsx | 11 ++-- src/utils/constants/intervention.ts | 60 ++++++++++--------- 4 files changed, 67 insertions(+), 93 deletions(-) diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx index d9fdf065f..c66155485 100644 --- a/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx +++ b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx @@ -7,33 +7,29 @@ import type { } from '../../../common/types/plantLocation'; import styles from '../../ProjectsMap/InterventionDropDown/InterventionList.module.scss'; +import { INTERVENTION_TYPE } from '../../../../utils/constants/intervention'; -type SiteData = { - label: string; - id: number; +type InterventionData = { + label: string + value: INTERVENTION_TYPE + index: number }; interface InterventionListProps { - siteList: SiteData[]; - setSelectedSite: SetState; + siteList: InterventionData[]; + setSelectedSite: SetState; setIsMenuOpen: SetState; - selectedSiteData: SiteData | undefined; - setSelectedPlantLocation: SetState; - setSelectedSamplePlantLocation: SetState; + selectedSiteData: InterventionData | undefined; } const InterventionList = ({ siteList, setSelectedSite, setIsMenuOpen, selectedSiteData, - setSelectedPlantLocation, - setSelectedSamplePlantLocation, }: InterventionListProps) => { const locale = useLocale(); - const handleSiteSelection = (index: number) => { - setSelectedPlantLocation(null); - setSelectedSamplePlantLocation(null); + const handleSiteSelection = (index: number, key: string) => { setIsMenuOpen(false); - setSelectedSite(index); + setSelectedSite(key); }; return ( @@ -41,10 +37,9 @@ const InterventionList = ({ {siteList.map((site, index) => { return (
  • handleSiteSelection(index)} + className={`${styles.listItem} ${site.index === selectedSiteData?.index ? styles.selectedItem : '' + }`} + onClick={() => handleSiteSelection(index, site.value)} key={index} >

    {site.label}

    diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx index 48bb7f285..92427571b 100644 --- a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx +++ b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx @@ -1,19 +1,12 @@ import type { SetState } from '../../../common/types/common'; -import type { Feature, MultiPolygon, Polygon } from 'geojson'; -import type { - PlantLocation, - SamplePlantLocation, -} from '../../../common/types/plantLocation'; - import { useState, useMemo, useCallback } from 'react'; -import { useLocale, useTranslations } from 'next-intl'; import { useRouter } from 'next/router'; import styles from './InterventionList.module.scss'; import DropdownUpArrow from '../../../../temp/icons/DropdownUpArrow'; import DropdownDownArrow from '../../../../temp/icons/DropdownDownArrow'; import InterventionList from './InterventionList'; import { truncateString } from '../../../../utils/getTruncatedString'; -import { INTERVENTION_TYPE } from '../../../../utils/constants/intervention'; +import { AllIntervention, INTERVENTION_TYPE } from '../../../../utils/constants/intervention'; interface InterventionType { label: string @@ -24,43 +17,30 @@ interface InterventionType { interface Props { allIntervention: InterventionType[]; - selectedSite: number | null; - setSelectedSite: SetState; - selectedPlantLocation: PlantLocation | null; - setSelectedPlantLocation: SetState; - setSelectedSamplePlantLocation: SetState; + selectedIntervention: string; + setSelectedIntervention: SetState; } -const ProjectSiteDropdown = ({ +const InterventionDropdown = ({ allIntervention, - selectedSite, - setSelectedSite, - selectedPlantLocation, - setSelectedPlantLocation, - setSelectedSamplePlantLocation, + selectedIntervention, + setSelectedIntervention, }: Props) => { const [isMenuOpen, setIsMenuOpen] = useState(false); - const tProjectDetails = useTranslations('ProjectDetails'); - const locale = useLocale(); - const router = useRouter(); - const { query } = router; const siteList = useMemo(() => { if (!allIntervention) return []; - return allIntervention.map((el, index: number) => ({ + return allIntervention.map((el) => ({ label: el.label, - id: index, + index: el.index, + value: el.value })); }, [allIntervention]); - const getId = useCallback( - (selectedSiteId: number) => { - const index = siteList.findIndex((site) => site.id === selectedSiteId); - return index !== -1 ? index + 1 : null; - }, - [siteList] - ); - const selectedSiteData = - selectedSite !== null ? siteList[selectedSite] : undefined; + const findMatchingIntervention = (value: string) => { + return AllIntervention.find(item => item.value === value); + }; + + const selectedSiteData = findMatchingIntervention(selectedIntervention) const toggleMenu = () => setIsMenuOpen((prev) => !prev); return ( @@ -68,9 +48,6 @@ const ProjectSiteDropdown = ({
    {/* */} - {selectedPlantLocation && query.ploc ? ( - '-' - ) : ( <> {selectedSiteData && (
    @@ -97,7 +74,6 @@ const ProjectSiteDropdown = ({
    )} - )}
    {isMenuOpen ? ( @@ -110,15 +86,13 @@ const ProjectSiteDropdown = ({ {isMenuOpen && ( )} ); }; -export default ProjectSiteDropdown; +export default InterventionDropdown; diff --git a/src/features/projectsV2/ProjectsMap/MapControls.tsx b/src/features/projectsV2/ProjectsMap/MapControls.tsx index 11725c422..70d9c3b04 100644 --- a/src/features/projectsV2/ProjectsMap/MapControls.tsx +++ b/src/features/projectsV2/ProjectsMap/MapControls.tsx @@ -47,8 +47,9 @@ const MapControls = ({ selectedSamplePlantLocation, setSelectedPlantLocation, setSelectedSamplePlantLocation, + selectedIntervention, + setSelectedIntervention } = useProjects(); - const hasProjectSites = singleProject?.sites?.length !== undefined && singleProject?.sites?.length > 1; @@ -68,8 +69,8 @@ const MapControls = ({ }; const InterventionDropdownProps = { - selectedSite, - setSelectedSite, + selectedIntervention, + setSelectedIntervention, allIntervention: AllIntervention, selectedPlantLocation, setSelectedPlantLocation, @@ -132,8 +133,8 @@ const MapControls = ({ <> {hasProjectSites && ( <> - - + + )} diff --git a/src/utils/constants/intervention.ts b/src/utils/constants/intervention.ts index 652d6403d..6e06a0654 100644 --- a/src/utils/constants/intervention.ts +++ b/src/utils/constants/intervention.ts @@ -18,7 +18,7 @@ export const OTHER_INTERVENTION = '#9B51E0'; export const FillColor: any = [ 'match', - ['get', 'key'], + ['get', 'type'], 'remeasurement', 'tomato', 'single-tree-registration', SINGLE_TREE, 'multi-tree-registration', MULTI_TREE, @@ -39,37 +39,41 @@ export const FillColor: any = [ 'maintenance', MAINTENANCE, SINGLE_TREE ] -export type INTERVENTION_TYPE = 'single-tree-registration' | 'multi-tree-registration' | 'removal-invasive-species' | 'fire-suppression' | 'fire-patrol' | 'fencing' | 'marking-regenerant' | 'liberating-regenerant' | 'grass-suppression' | 'firebreaks' | 'assisting-seed-rain' | 'soil-improvement' | 'stop-tree-harvesting' | 'direct-seeding' | 'enrichment-planting' | 'other-intervention' | 'maintenance' | 'unknown' +export type INTERVENTION_TYPE = 'single-tree-registration' | 'multi-tree-registration' | 'removal-invasive-species' | 'fire-suppression' | 'fire-patrol' | 'fencing' | 'marking-regenerant' | 'liberating-regenerant' | 'grass-suppression' | 'firebreaks' | 'assisting-seed-rain' | 'soil-improvement' | 'stop-tree-harvesting' | 'direct-seeding' | 'enrichment-planting' | 'other-intervention' | 'maintenance' | 'unknown' | 'default' export const AllIntervention: Array<{ label: string value: INTERVENTION_TYPE index: number -}> = [ - { - label: 'Single Tree Plantation', - value: 'single-tree-registration', - index: 0, - }, - { label: 'Multi Tree Plantation', value: 'multi-tree-registration', index: 0 }, - { label: 'Fire Patrol', value: 'fire-patrol', index: 0 }, - { label: 'Fire Suppression Team', value: 'fire-suppression', index: 0 }, - { label: 'Establish Fire Breaks', value: 'firebreaks', index: 0 }, - { label: 'Fencing', value: 'fencing', index: 0 }, - { - label: 'Removal of Invasive Species', - value: 'removal-invasive-species', - index: 0, - }, - { label: 'Direct Seeding', value: 'direct-seeding', index: 0 }, - { label: 'Grass Suppression', value: 'grass-suppression', index: 0 }, - { label: 'Marking Regenerant', value: 'marking-regenerant', index: 0 }, - { label: 'Enrichment Planting', value: 'enrichment-planting', index: 0 }, - { label: 'Liberating Regenerant', value: 'liberating-regenerant', index: 0 }, - { label: 'Soil Improvement', value: 'soil-improvement', index: 0 }, - { label: 'Assisting Seed Rain', value: 'assisting-seed-rain', index: 0 }, - { label: 'Stop Tree Harvesting', value: 'stop-tree-harvesting', index: 0 }, - { label: 'Maintenance', value: 'maintenance', index: 0 }, - { label: 'Other Intervention', value: 'other-intervention', index: 0 }, +}> = [{ + label: 'Single/Multi Tree Plantation', + value: 'default', + index: 0, +}, +{ + label: 'Single Tree Plantation', + value: 'single-tree-registration', + index: 0, +}, +{ label: 'Multi Tree Plantation', value: 'multi-tree-registration', index: 0 }, +{ label: 'Fire Patrol', value: 'fire-patrol', index: 0 }, +{ label: 'Fire Suppression Team', value: 'fire-suppression', index: 0 }, +{ label: 'Establish Fire Breaks', value: 'firebreaks', index: 0 }, +{ label: 'Fencing', value: 'fencing', index: 0 }, +{ + label: 'Removal of Invasive Species', + value: 'removal-invasive-species', + index: 0, +}, +{ label: 'Direct Seeding', value: 'direct-seeding', index: 0 }, +{ label: 'Grass Suppression', value: 'grass-suppression', index: 0 }, +{ label: 'Marking Regenerant', value: 'marking-regenerant', index: 0 }, +{ label: 'Enrichment Planting', value: 'enrichment-planting', index: 0 }, +{ label: 'Liberating Regenerant', value: 'liberating-regenerant', index: 0 }, +{ label: 'Soil Improvement', value: 'soil-improvement', index: 0 }, +{ label: 'Assisting Seed Rain', value: 'assisting-seed-rain', index: 0 }, +{ label: 'Stop Tree Harvesting', value: 'stop-tree-harvesting', index: 0 }, +{ label: 'Maintenance', value: 'maintenance', index: 0 }, +{ label: 'Other Intervention', value: 'other-intervention', index: 0 }, ] \ No newline at end of file From 3e17a096ae234f1462befef0a0786981a4ef73ba Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Tue, 10 Dec 2024 13:56:42 +0530 Subject: [PATCH 06/39] default filter added --- .../ProjectsMap/microComponents/PlantLocations.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/features/projectsV2/ProjectsMap/microComponents/PlantLocations.tsx b/src/features/projectsV2/ProjectsMap/microComponents/PlantLocations.tsx index 11e3fa796..ec2ee441b 100644 --- a/src/features/projectsV2/ProjectsMap/microComponents/PlantLocations.tsx +++ b/src/features/projectsV2/ProjectsMap/microComponents/PlantLocations.tsx @@ -134,7 +134,11 @@ export default function PlantLocations(): React.ReactElement { if (!plantLocations || plantLocations.length === 0) { return <>; } - const features = plantLocations.filter(d => d.type === selectedIntervention).map((el) => { + const features = plantLocations.filter(d => + (selectedIntervention !== 'default' && d.type === selectedIntervention) || + (selectedIntervention === 'default' && + (d.type === 'multi-tree-registration' || d.type === 'single-tree-registration')) + ).map((el) => { const isSelected = selectedPlantLocation && selectedPlantLocation.id === el.id; const isHovered = hoveredPlantLocation && hoveredPlantLocation.id === el.id; From d861be7fc44b2070ceafdc100a920d09f2f56ad8 Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Tue, 10 Dec 2024 14:24:38 +0530 Subject: [PATCH 07/39] 'All' added in intervention filter --- .../ProjectsMap/microComponents/PlantLocations.tsx | 3 ++- src/utils/constants/intervention.ts | 7 ++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/features/projectsV2/ProjectsMap/microComponents/PlantLocations.tsx b/src/features/projectsV2/ProjectsMap/microComponents/PlantLocations.tsx index ec2ee441b..f9b534780 100644 --- a/src/features/projectsV2/ProjectsMap/microComponents/PlantLocations.tsx +++ b/src/features/projectsV2/ProjectsMap/microComponents/PlantLocations.tsx @@ -135,10 +135,11 @@ export default function PlantLocations(): React.ReactElement { return <>; } const features = plantLocations.filter(d => + selectedIntervention === 'all' || (selectedIntervention !== 'default' && d.type === selectedIntervention) || (selectedIntervention === 'default' && (d.type === 'multi-tree-registration' || d.type === 'single-tree-registration')) - ).map((el) => { +).map((el) => { const isSelected = selectedPlantLocation && selectedPlantLocation.id === el.id; const isHovered = hoveredPlantLocation && hoveredPlantLocation.id === el.id; diff --git a/src/utils/constants/intervention.ts b/src/utils/constants/intervention.ts index 6e06a0654..3144450e1 100644 --- a/src/utils/constants/intervention.ts +++ b/src/utils/constants/intervention.ts @@ -39,7 +39,7 @@ export const FillColor: any = [ 'maintenance', MAINTENANCE, SINGLE_TREE ] -export type INTERVENTION_TYPE = 'single-tree-registration' | 'multi-tree-registration' | 'removal-invasive-species' | 'fire-suppression' | 'fire-patrol' | 'fencing' | 'marking-regenerant' | 'liberating-regenerant' | 'grass-suppression' | 'firebreaks' | 'assisting-seed-rain' | 'soil-improvement' | 'stop-tree-harvesting' | 'direct-seeding' | 'enrichment-planting' | 'other-intervention' | 'maintenance' | 'unknown' | 'default' +export type INTERVENTION_TYPE = 'single-tree-registration' | 'multi-tree-registration' | 'removal-invasive-species' | 'fire-suppression' | 'fire-patrol' | 'fencing' | 'marking-regenerant' | 'liberating-regenerant' | 'grass-suppression' | 'firebreaks' | 'assisting-seed-rain' | 'soil-improvement' | 'stop-tree-harvesting' | 'direct-seeding' | 'enrichment-planting' | 'other-intervention' | 'maintenance' | 'unknown' | 'default' | 'all' export const AllIntervention: Array<{ @@ -76,4 +76,9 @@ export const AllIntervention: Array<{ { label: 'Stop Tree Harvesting', value: 'stop-tree-harvesting', index: 0 }, { label: 'Maintenance', value: 'maintenance', index: 0 }, { label: 'Other Intervention', value: 'other-intervention', index: 0 }, +{ + label: 'All Intervention', + value: 'all', + index: 0, +} ] \ No newline at end of file From b4f31fc7c02977fd68a5cf72ee6718dec0b857af Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Wed, 11 Dec 2024 12:37:17 +0530 Subject: [PATCH 08/39] minor:Content Updated --- .../projectsV2/ProjectsMap/MapControls.tsx | 2 + src/utils/constants/intervention.ts | 71 ++++++++++--------- 2 files changed, 38 insertions(+), 35 deletions(-) diff --git a/src/features/projectsV2/ProjectsMap/MapControls.tsx b/src/features/projectsV2/ProjectsMap/MapControls.tsx index 70d9c3b04..302cd98f0 100644 --- a/src/features/projectsV2/ProjectsMap/MapControls.tsx +++ b/src/features/projectsV2/ProjectsMap/MapControls.tsx @@ -120,7 +120,9 @@ const MapControls = ({ {isMobile ? (
    {hasProjectSites && ( + <> + )}
    • ); })} diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx index 92427571b..371468c0f 100644 --- a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx +++ b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx @@ -7,7 +7,7 @@ import DropdownDownArrow from '../../../../temp/icons/DropdownDownArrow'; import InterventionList from './InterventionList'; import { truncateString } from '../../../../utils/getTruncatedString'; import { AllIntervention, INTERVENTION_TYPE } from '../../../../utils/constants/intervention'; - +import InterventionIcon from '../../../../../public/assets/images/icons/InterventionIcon'; interface InterventionType { label: string value: INTERVENTION_TYPE @@ -19,12 +19,14 @@ interface Props { allIntervention: InterventionType[]; selectedIntervention: string; setSelectedIntervention: SetState; + isMobile?: boolean } const InterventionDropdown = ({ allIntervention, selectedIntervention, setSelectedIntervention, + isMobile }: Props) => { const [isMenuOpen, setIsMenuOpen] = useState(false); const siteList = useMemo(() => { @@ -46,34 +48,19 @@ const InterventionDropdown = ({ return ( <>
    -
    - {/* */} - <> - {selectedSiteData && ( -
    - -

    - {truncateString(selectedSiteData?.label, 40)} -

    -
    - )} - +
    + + <> + {selectedSiteData && ( +
    + {isMobile?: +

    + {truncateString(selectedSiteData?.label, 40)} +

    } +
    + )} +
    {isMenuOpen ? ( diff --git a/src/features/projectsV2/ProjectsMap/MapControls.tsx b/src/features/projectsV2/ProjectsMap/MapControls.tsx index 302cd98f0..a4cba674d 100644 --- a/src/features/projectsV2/ProjectsMap/MapControls.tsx +++ b/src/features/projectsV2/ProjectsMap/MapControls.tsx @@ -122,7 +122,7 @@ const MapControls = ({ {hasProjectSites && ( <> - + )}
    - {shouldShowMultiPlantLocationInfo && ( + {/* {shouldShowMultiPlantLocationInfo && ( - )} + )} */} + ); } From 2d6de25d2d097d24df83b6d3035ef5f6b6cb8a06 Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Thu, 26 Dec 2024 19:38:10 +0530 Subject: [PATCH 10/39] plantinfo mobileview reverted --- src/features/projectsV2/ProjectsMap/index.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/features/projectsV2/ProjectsMap/index.tsx b/src/features/projectsV2/ProjectsMap/index.tsx index 9957e8389..c0d890bec 100644 --- a/src/features/projectsV2/ProjectsMap/index.tsx +++ b/src/features/projectsV2/ProjectsMap/index.tsx @@ -207,7 +207,7 @@ function ProjectsMap(props: ProjectsMapProps) { )}
    - {/* {shouldShowMultiPlantLocationInfo && ( + {shouldShowMultiPlantLocationInfo && ( - )} */} - + )} ); } From 8b9ccf912e413a22b260e3739adea2f22262813e Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Thu, 26 Dec 2024 23:04:52 +0530 Subject: [PATCH 11/39] Mobile view slider fix --- .../components/OtherInterventionInfo.tsx | 39 ++++++++++--------- src/features/projectsV2/ProjectsMap/index.tsx | 5 +++ 2 files changed, 26 insertions(+), 18 deletions(-) diff --git a/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx b/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx index a4a34f318..5576c82c3 100644 --- a/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx +++ b/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx @@ -86,26 +86,27 @@ const OtherInterventionInfo = ({ sampleInterventionSpeciesImages !== undefined && sampleInterventionSpeciesImages?.length > 0; + const checkForPublicData = plantLocationInfo?.metadata.public.length !== 0 + const content = [ - <> - {shouldDisplayImageCarousel && ( - - )} - , + shouldDisplayImageCarousel && ( + + ) + , , - ), ].filter(Boolean); - console.log("OJK,plantLocationInfo", plantLocationInfo) + return isMobile ? ( - + <> + + ) : (
    {content} diff --git a/src/features/projectsV2/ProjectsMap/index.tsx b/src/features/projectsV2/ProjectsMap/index.tsx index c0d890bec..6e4757e93 100644 --- a/src/features/projectsV2/ProjectsMap/index.tsx +++ b/src/features/projectsV2/ProjectsMap/index.tsx @@ -177,6 +177,8 @@ function ProjectsMap(props: ProjectsMapProps) { }; const mapContainerClass = `${styles.mapContainer} ${styles[mobileOS !== undefined ? mobileOS : ''] }`; + const PLANTATION_TYPES = ['multi-tree-registration', 'single-tree-registration'] + const shouldShowOtherIntervention = (selectedPlantLocation !== null && !PLANTATION_TYPES.includes(selectedPlantLocation.type)) return ( <> @@ -224,6 +226,9 @@ function ProjectsMap(props: ProjectsMapProps) { setSelectedSamplePlantLocation={setSelectedSamplePlantLocation} /> )} + + {shouldShowOtherIntervention && } ); } From 1659928ef64e2074b34e3e749a765874e37a32e0 Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Thu, 26 Dec 2024 23:12:34 +0530 Subject: [PATCH 12/39] minor --- .../projectsV2/ProjectsMap/InterventionDropDown/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx index 371468c0f..15c581ef8 100644 --- a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx +++ b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx @@ -52,10 +52,10 @@ const InterventionDropdown = ({ <> {selectedSiteData && ( -
    +
    {isMobile?: -

    +

    {truncateString(selectedSiteData?.label, 40)}

    }
    From 282b8e4c965a493fc23d7ea3cc52edaa486eb230 Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Fri, 27 Dec 2024 08:32:00 +0530 Subject: [PATCH 13/39] minor UI fixes --- src/features/projectsV2/ProjectDetails/index.tsx | 3 ++- src/features/projectsV2/ProjectsMap/ProjectsMap.module.scss | 2 +- src/features/projectsV2/ProjectsMap/index.tsx | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/features/projectsV2/ProjectDetails/index.tsx b/src/features/projectsV2/ProjectDetails/index.tsx index 609fa682d..c8426b785 100644 --- a/src/features/projectsV2/ProjectDetails/index.tsx +++ b/src/features/projectsV2/ProjectDetails/index.tsx @@ -127,7 +127,8 @@ const ProjectDetails = ({ selectedPlantLocation?.type === 'multi-tree-registration') && !isMobile; const PLANTATION_TYPES = ['multi-tree-registration', 'single-tree-registration'] - const shouldShowOtherIntervention = (hoveredPlantLocation !== null && !PLANTATION_TYPES.includes(hoveredPlantLocation.type)) || (selectedPlantLocation !== null && !PLANTATION_TYPES.includes(selectedPlantLocation.type)) + const shouldShowOtherIntervention = (hoveredPlantLocation !== null && !PLANTATION_TYPES.includes(hoveredPlantLocation.type)) || (selectedPlantLocation !== null && !PLANTATION_TYPES.includes(selectedPlantLocation.type)) && + !isMobile; const shouldShowSinglePlantInfo = (hoveredPlantLocation?.type === 'single-tree-registration' || selectedPlantLocation?.type === 'single-tree-registration' || diff --git a/src/features/projectsV2/ProjectsMap/ProjectsMap.module.scss b/src/features/projectsV2/ProjectsMap/ProjectsMap.module.scss index ad8526d1d..c712a5096 100644 --- a/src/features/projectsV2/ProjectsMap/ProjectsMap.module.scss +++ b/src/features/projectsV2/ProjectsMap/ProjectsMap.module.scss @@ -15,7 +15,7 @@ top: 101px; right: 10px; z-index: 2px; - width: 94%; + width: 85%; > .exitMapModeButton { z-index: 2; diff --git a/src/features/projectsV2/ProjectsMap/index.tsx b/src/features/projectsV2/ProjectsMap/index.tsx index 6e4757e93..e2330887b 100644 --- a/src/features/projectsV2/ProjectsMap/index.tsx +++ b/src/features/projectsV2/ProjectsMap/index.tsx @@ -178,7 +178,7 @@ function ProjectsMap(props: ProjectsMapProps) { const mapContainerClass = `${styles.mapContainer} ${styles[mobileOS !== undefined ? mobileOS : ''] }`; const PLANTATION_TYPES = ['multi-tree-registration', 'single-tree-registration'] - const shouldShowOtherIntervention = (selectedPlantLocation !== null && !PLANTATION_TYPES.includes(selectedPlantLocation.type)) + const shouldShowOtherIntervention = props.isMobile && (selectedPlantLocation !== null && !PLANTATION_TYPES.includes(selectedPlantLocation.type)) return ( <> From 96a027b9da9d021ff026e63ea75d2e9547af4a32 Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Fri, 27 Dec 2024 08:39:12 +0530 Subject: [PATCH 14/39] mutlitree polygon color updated --- src/utils/constants/intervention.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/constants/intervention.ts b/src/utils/constants/intervention.ts index 27c60de23..29715011e 100644 --- a/src/utils/constants/intervention.ts +++ b/src/utils/constants/intervention.ts @@ -1,5 +1,5 @@ export const SINGLE_TREE = '#007A49'; -export const MULTI_TREE = '#68B030'; +export const MULTI_TREE = '#007A49'; export const INVASIVE_SPECIES = '#EB5757'; export const FIRE_SUPPRESSION = '#F2C94C'; export const FIRE_PATROL = '#F2994A'; From 43d3856d9d01a37f96a82db1e931a7f43adfe493 Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Fri, 27 Dec 2024 10:03:03 +0530 Subject: [PATCH 15/39] code refactor --- .../assets/images/icons/InterventionIcon.tsx | 2 +- .../components/OtherInterventionInfo.tsx | 27 +++++++------------ .../OtherInterventionHeader.tsx | 8 ++---- .../OtherInterventionMetaData.tsx | 3 --- .../InterventionDropDown/InterventionList.tsx | 2 -- .../InterventionDropDown/index.tsx | 3 +-- src/utils/constants/intervention.ts | 2 +- 7 files changed, 15 insertions(+), 32 deletions(-) diff --git a/public/assets/images/icons/InterventionIcon.tsx b/public/assets/images/icons/InterventionIcon.tsx index f4318dfc1..14440fb66 100644 --- a/public/assets/images/icons/InterventionIcon.tsx +++ b/public/assets/images/icons/InterventionIcon.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { IconProps } from '../../../../src/features/common/types/common'; -function InterventionIcon({ color = 'black' }: IconProps) { +function InterventionIcon() { return ( diff --git a/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx b/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx index 5576c82c3..8fe6fda09 100644 --- a/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx +++ b/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx @@ -2,9 +2,10 @@ import type { Measurements, PlantedSpecies, PlantLocationBase, + PlantLocationMulti, SamplePlantLocation, } from '../../../common/types/plantLocation'; -import type { DateString, SetState } from '../../../common/types/common'; +import type { SetState } from '../../../common/types/common'; import { useMemo } from 'react'; import { useTranslations } from 'next-intl'; @@ -17,7 +18,6 @@ import ImageSlider from './microComponents/ImageSlider'; import MobileInfoSwiper from '../../MobileInfoSwiper'; import OtherInterventionInfoHeader from './microComponents/OtherInterventionHeader'; import OtherInterventionMetaData from './microComponents/OtherInterventionMetaData'; -import { INTERVENTION_TYPE } from '../../../../utils/constants/intervention'; export interface OtherInterventions extends PlantLocationBase { sampleTreeCount: number; @@ -33,7 +33,7 @@ export interface OtherInterventions extends PlantLocationBase { } interface Props { - plantLocationInfo: any | null; + plantLocationInfo: PlantLocationMulti | null; isMobile: boolean; setSelectedSamplePlantLocation: SetState; } @@ -44,9 +44,9 @@ const OtherInterventionInfo = ({ setSelectedSamplePlantLocation, }: Props) => { const tProjectDetails = useTranslations('ProjectDetails'); - const isMultiTreeRegistration = - plantLocationInfo?.type === 'enrichment-planting'; - const { totalTreesCount, plantedLocationArea } = useMemo(() => { + + + const { totalTreesCount } = useMemo(() => { const totalTreesCount = plantLocationInfo && plantLocationInfo.plantedSpecies && @@ -63,15 +63,9 @@ const OtherInterventionInfo = ({ return { totalTreesCount, plantedLocationArea }; }, [plantLocationInfo?.geometry, plantLocationInfo?.type]); - const plantingDensity = totalTreesCount / plantedLocationArea; - const sampleInterventionSpeciesImages = useMemo(() => { - if (isMultiTreeRegistration) { - const result = plantLocationInfo.sampleInterventions && plantLocationInfo.sampleInterventions.map((item: { - coordinates: { - id: any; image: any; - }[]; tag: any; - }) => { + if (plantLocationInfo && plantLocationInfo.sampleInterventions.length>0) { + const result = plantLocationInfo.sampleInterventions && plantLocationInfo.sampleInterventions.map((item) => { return { id: item.coordinates[0].id, image: item.coordinates[0].image ?? '', @@ -80,7 +74,7 @@ const OtherInterventionInfo = ({ }); return result; } - }, [isMultiTreeRegistration ? plantLocationInfo.sampleInterventions : null]); + }, [plantLocationInfo]); const shouldDisplayImageCarousel = sampleInterventionSpeciesImages !== undefined && @@ -102,7 +96,6 @@ const OtherInterventionInfo = ({ , , @@ -119,7 +112,7 @@ const OtherInterventionInfo = ({ plantedSpecies={plantLocationInfo.plantedSpecies} /> ), - isMultiTreeRegistration && + plantLocationInfo && plantLocationInfo.sampleInterventions && plantLocationInfo.sampleInterventions.length > 0 && ( { - const tProjectDetails = useTranslations('ProjectDetails'); - const locale = useLocale(); +const OtherInterventionInfoHeader = ({ plantDate, type }: Props) => { const findInterventionHeader = (valueKey: string | undefined) => { const found = AllIntervention.find(item => item.value === valueKey); @@ -21,7 +17,7 @@ const OtherInterventionInfoHeader = ({ plantingDensity, plantDate, type }: Props { label: "Intervention", data: findInterventionHeader(type), - shouldRender: plantingDensity !== null, + shouldRender: true }, { label: "Intervention Date", diff --git a/src/features/projectsV2/ProjectDetails/components/microComponents/OtherInterventionMetaData.tsx b/src/features/projectsV2/ProjectDetails/components/microComponents/OtherInterventionMetaData.tsx index c89b2645a..2d839f37c 100644 --- a/src/features/projectsV2/ProjectDetails/components/microComponents/OtherInterventionMetaData.tsx +++ b/src/features/projectsV2/ProjectDetails/components/microComponents/OtherInterventionMetaData.tsx @@ -1,5 +1,4 @@ import styles from '../../styles/PlantLocationInfo.module.scss'; -import { useLocale, useTranslations } from 'next-intl'; import { Metadata } from '../../../../common/types/plantLocation'; interface Props { @@ -9,8 +8,6 @@ interface Props { } const OtherInterventionMetaData = ({ metaData }: Props) => { - const tProjectDetails = useTranslations('ProjectDetails'); - const locale = useLocale(); function isJsonString(str: string) { try { diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx index a1e2abd7f..baa8f0a46 100644 --- a/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx +++ b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx @@ -1,4 +1,3 @@ -import { useLocale } from 'next-intl'; import type { SetState } from '../../../common/types/common'; import styles from '../../ProjectsMap/InterventionDropDown/InterventionList.module.scss'; import { INTERVENTION_TYPE } from '../../../../utils/constants/intervention'; @@ -20,7 +19,6 @@ const InterventionList = ({ setIsMenuOpen, selectedSiteData, }: InterventionListProps) => { - const locale = useLocale(); const handleSiteSelection = (index: number, key: string) => { setIsMenuOpen(false); setSelectedSite(key); diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx index 15c581ef8..5db9cff84 100644 --- a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx +++ b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx @@ -1,6 +1,5 @@ import type { SetState } from '../../../common/types/common'; -import { useState, useMemo, useCallback } from 'react'; -import { useRouter } from 'next/router'; +import { useState, useMemo } from 'react'; import styles from './InterventionList.module.scss'; import DropdownUpArrow from '../../../../temp/icons/DropdownUpArrow'; import DropdownDownArrow from '../../../../temp/icons/DropdownDownArrow'; diff --git a/src/utils/constants/intervention.ts b/src/utils/constants/intervention.ts index 29715011e..2a10f7dd7 100644 --- a/src/utils/constants/intervention.ts +++ b/src/utils/constants/intervention.ts @@ -16,7 +16,7 @@ export const ENRICHMENT_PLANTING = '#EB67CE'; export const MAINTENANCE = '#6C63FF'; export const OTHER_INTERVENTION = '#9B51E0'; -export const FillColor: any = [ +export const FillColor = [ 'match', ['get', 'type'], 'remeasurement', 'tomato', From 9f9021c4522808fe449acade13f6a3b8a1833b3e Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Fri, 27 Dec 2024 10:16:36 +0530 Subject: [PATCH 16/39] unused code refactored --- .../assets/images/icons/InterventionIcon.tsx | 1 - .../components/OtherInterventionInfo.tsx | 4 ++-- .../projectsV2/ProjectDetails/index.tsx | 18 +++++++++++++++--- 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/public/assets/images/icons/InterventionIcon.tsx b/public/assets/images/icons/InterventionIcon.tsx index 14440fb66..603b79d66 100644 --- a/public/assets/images/icons/InterventionIcon.tsx +++ b/public/assets/images/icons/InterventionIcon.tsx @@ -2,7 +2,6 @@ import React from 'react'; -import { IconProps } from '../../../../src/features/common/types/common'; function InterventionIcon() { return ( diff --git a/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx b/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx index 8fe6fda09..f419714f1 100644 --- a/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx +++ b/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx @@ -52,7 +52,7 @@ const OtherInterventionInfo = ({ plantLocationInfo.plantedSpecies && plantLocationInfo.plantedSpecies.length > 0 ? plantLocationInfo.plantedSpecies.reduce( - (sum: any, species: { treeCount: any; }) => sum + species.treeCount, + (sum, species: { treeCount: number }) => sum + species.treeCount, 0 ) : 0; @@ -64,7 +64,7 @@ const OtherInterventionInfo = ({ }, [plantLocationInfo?.geometry, plantLocationInfo?.type]); const sampleInterventionSpeciesImages = useMemo(() => { - if (plantLocationInfo && plantLocationInfo.sampleInterventions.length>0) { + if (plantLocationInfo && plantLocationInfo.sampleInterventions.length > 0) { const result = plantLocationInfo.sampleInterventions && plantLocationInfo.sampleInterventions.map((item) => { return { id: item.coordinates[0].id, diff --git a/src/features/projectsV2/ProjectDetails/index.tsx b/src/features/projectsV2/ProjectDetails/index.tsx index c8426b785..e3deeaf30 100644 --- a/src/features/projectsV2/ProjectDetails/index.tsx +++ b/src/features/projectsV2/ProjectDetails/index.tsx @@ -126,9 +126,21 @@ const ProjectDetails = ({ (hoveredPlantLocation?.type === 'multi-tree-registration' || selectedPlantLocation?.type === 'multi-tree-registration') && !isMobile; - const PLANTATION_TYPES = ['multi-tree-registration', 'single-tree-registration'] - const shouldShowOtherIntervention = (hoveredPlantLocation !== null && !PLANTATION_TYPES.includes(hoveredPlantLocation.type)) || (selectedPlantLocation !== null && !PLANTATION_TYPES.includes(selectedPlantLocation.type)) && - !isMobile; + + const PLANTATION_TYPES = ['multi-tree-registration', 'single-tree-registration'] as const; + + // Helper function with proper type checking + const isNonPlantationType = (location: PlantLocation | null): boolean => { + return location !== null && !PLANTATION_TYPES.includes(location.type); + }; + + + const shouldShowOtherIntervention = ( + isNonPlantationType(hoveredPlantLocation) || + (isNonPlantationType(selectedPlantLocation) && !isMobile) + ); + + const shouldShowSinglePlantInfo = (hoveredPlantLocation?.type === 'single-tree-registration' || selectedPlantLocation?.type === 'single-tree-registration' || From 8bfe4670b998507d46d28a800dd60a102aa206f1 Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Mon, 30 Dec 2024 09:17:32 +0530 Subject: [PATCH 17/39] zoom out when intervention selecte --- .../ProjectsMap/SingleProjectView.tsx | 12 +++++- src/utils/mapsV2/zoomOut.tsx | 43 +++++++++++++++++++ 2 files changed, 54 insertions(+), 1 deletion(-) create mode 100644 src/utils/mapsV2/zoomOut.tsx diff --git a/src/features/projectsV2/ProjectsMap/SingleProjectView.tsx b/src/features/projectsV2/ProjectsMap/SingleProjectView.tsx index 98d07e376..dfdf55726 100644 --- a/src/features/projectsV2/ProjectsMap/SingleProjectView.tsx +++ b/src/features/projectsV2/ProjectsMap/SingleProjectView.tsx @@ -11,13 +11,14 @@ import PlantLocations from './microComponents/PlantLocations'; import { zoomToPolygonPlantLocation } from '../../../utils/mapsV2/zoomToPolygonPlantLocation'; import zoomToLocation from '../../../utils/mapsV2/zoomToLocation'; import ProjectLocation from './microComponents/ProjectLocation'; +import zoomOut from '../../../utils/mapsV2/zoomOut'; interface Props { mapRef: MapRef; } const SingleProjectView = ({ mapRef }: Props) => { - const { singleProject, selectedSite, selectedPlantLocation, plantLocations } = + const { singleProject, selectedSite, selectedPlantLocation, plantLocations, selectedIntervention } = useProjects(); if (singleProject === null) return null; @@ -59,6 +60,15 @@ const SingleProjectView = ({ mapRef }: Props) => { } }, [selectedPlantLocation, router.isReady]); + useEffect(() => { + zoomOut( + handleViewStateChange, + mapRef, + 4000 + ); + }, [selectedIntervention]) + + // Zoom to project site useEffect(() => { if (!router.isReady || selectedPlantLocation !== null) return; diff --git a/src/utils/mapsV2/zoomOut.tsx b/src/utils/mapsV2/zoomOut.tsx new file mode 100644 index 000000000..02cb8df4e --- /dev/null +++ b/src/utils/mapsV2/zoomOut.tsx @@ -0,0 +1,43 @@ +import type { ViewState } from 'react-map-gl-v7/maplibre'; +import type { MapRef } from '../../features/common/types/projectv2'; +import * as d3 from 'd3-ease'; + +export default function zoomOut( + handleViewStateChange: (viewState: Partial) => void, + mapRef: MapRef, + duration = 1000 +) { + if (!mapRef.current) { + return; + } + const map = mapRef.current.getMap ? mapRef.current.getMap() : mapRef.current; + + // Get current center coordinates + const center = map.getCenter(); + const newZoom = 12; + + map.flyTo({ + center: [center.lng, center.lat], + zoom: newZoom, + duration: duration, + easing: d3.easeCubic + }); + + // Update view state after animation completes + map.once('moveend', () => { + const newViewState: ViewState = { + longitude: center.lng, + latitude: center.lat, + zoom: newZoom, + bearing: 0, + pitch: 0, + padding: { + top: 0, + bottom: 0, + left: 0, + right: 0, + }, + }; + handleViewStateChange(newViewState); + }); +} \ No newline at end of file From 7829842a2ecc696bdfa33bd0438e28c3c68dd725 Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Mon, 30 Dec 2024 09:17:54 +0530 Subject: [PATCH 18/39] Filter container height fixed --- .../InterventionDropDown/InterventionList.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.module.scss b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.module.scss index b85395ef9..c50b8d0a6 100644 --- a/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.module.scss +++ b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.module.scss @@ -64,7 +64,7 @@ $layoutPaddingSide: 20px; z-index: 4; top: 140px; right: 30px; - max-height: 58vh; + max-height: 42vh; overflow-y: auto; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Internet Explorer 10+ */ From b3cfe1bdb05f47f4f691f4dc1310ca857e68c493 Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Mon, 30 Dec 2024 10:50:43 +0530 Subject: [PATCH 19/39] UI fixes --- .../InterventionDropDown/InterventionList.module.scss | 2 +- src/features/projectsV2/ProjectsMap/ProjectsMap.module.scss | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.module.scss b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.module.scss index c50b8d0a6..490fdadff 100644 --- a/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.module.scss +++ b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.module.scss @@ -119,7 +119,7 @@ $layoutPaddingSide: 20px; .dropdownButton { border-radius: 10px; min-width: 93px; - padding: 7px; + padding: 5px; position: unset; } .labelTextContainer { diff --git a/src/features/projectsV2/ProjectsMap/ProjectsMap.module.scss b/src/features/projectsV2/ProjectsMap/ProjectsMap.module.scss index c712a5096..f4d72338d 100644 --- a/src/features/projectsV2/ProjectsMap/ProjectsMap.module.scss +++ b/src/features/projectsV2/ProjectsMap/ProjectsMap.module.scss @@ -11,8 +11,9 @@ display: flex; position: absolute; align-items: center; - justify-content:space-between; + justify-content: flex-end; top: 101px; + gap: 2vw; right: 10px; z-index: 2px; width: 85%; From 9c4e9b5ee4d4246b34a0dd6dc3d30ca69c1fe9d3 Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Mon, 30 Dec 2024 10:51:04 +0530 Subject: [PATCH 20/39] highlight selected intervention --- .../InterventionDropDown/InterventionList.tsx | 19 ++++++++++--------- .../InterventionDropDown/index.tsx | 19 ++++++++++--------- 2 files changed, 20 insertions(+), 18 deletions(-) diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx index baa8f0a46..54b319812 100644 --- a/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx +++ b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx @@ -8,33 +8,34 @@ type InterventionData = { index: number }; interface InterventionListProps { - siteList: InterventionData[]; - setSelectedSite: SetState; + interventionList: InterventionData[]; + setSelectedIntervention: SetState; setIsMenuOpen: SetState; selectedSiteData: InterventionData | undefined; + selectedIntervention: string } const InterventionList = ({ - siteList, - setSelectedSite, + interventionList, + setSelectedIntervention, setIsMenuOpen, selectedSiteData, }: InterventionListProps) => { const handleSiteSelection = (index: number, key: string) => { setIsMenuOpen(false); - setSelectedSite(key); + setSelectedIntervention(key); }; return (
      - {siteList.map((site, index) => { + {interventionList.map((intervention, index) => { return (
    • handleSiteSelection(index, site.value)} + onClick={() => handleSiteSelection(index, intervention.value)} key={index} > -

      {site.label}

      +

      {intervention.label}

      • ); })} diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx index 5db9cff84..8645c4719 100644 --- a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx +++ b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx @@ -28,7 +28,7 @@ const InterventionDropdown = ({ isMobile }: Props) => { const [isMenuOpen, setIsMenuOpen] = useState(false); - const siteList = useMemo(() => { + const interventionList = useMemo(() => { if (!allIntervention) return []; return allIntervention.map((el) => ({ label: el.label, @@ -48,15 +48,15 @@ const InterventionDropdown = ({ <>
      - + <> {selectedSiteData && (
      - {isMobile?: -

      - {truncateString(selectedSiteData?.label, 40)} -

      } + {isMobile ? : +

      + {truncateString(selectedSiteData?.label, 40)} +

      }
      )} @@ -71,10 +71,11 @@ const InterventionDropdown = ({
      {isMenuOpen && ( )} From bcabeb493ec1a35b053ad396294488b0c0582cc7 Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Mon, 30 Dec 2024 10:57:52 +0530 Subject: [PATCH 21/39] toggle menu feature added --- src/features/projectsV2/ProjectsContext.tsx | 11 +++++++++-- .../InterventionDropDown/index.tsx | 17 +++++++++++++++-- .../projectsV2/ProjectsMap/MapControls.tsx | 15 ++++++++++++++- .../ProjectsMap/ProjectSiteDropDown/index.tsx | 19 +++++++++++++++++-- 4 files changed, 55 insertions(+), 7 deletions(-) diff --git a/src/features/projectsV2/ProjectsContext.tsx b/src/features/projectsV2/ProjectsContext.tsx index c054eadec..0eca84f7d 100644 --- a/src/features/projectsV2/ProjectsContext.tsx +++ b/src/features/projectsV2/ProjectsContext.tsx @@ -35,7 +35,7 @@ interface ProjectsState { setSingleProject: SetState; plantLocations: PlantLocation[] | null; setPlantLocations: SetState; - selectedPlantLocation: PlantLocation | null ; + selectedPlantLocation: PlantLocation | null; setSelectedPlantLocation: SetState; selectedSamplePlantLocation: SamplePlantLocation | null; setSelectedSamplePlantLocation: SetState; @@ -60,6 +60,8 @@ interface ProjectsState { setSelectedMode?: SetState; selectedIntervention: string; setSelectedIntervention: SetState; + disableInterventionMenu: boolean; + setDisableInterventionMenu: SetState; } const ProjectsContext = createContext(null); @@ -95,6 +97,7 @@ export const ProjectsProvider: FC = ({ useState(null); const [selectedSite, setSelectedSite] = useState(null); const [selectedIntervention, setSelectedIntervention] = useState('default'); + const [disableInterventionMenu, setDisableInterventionMenu] = useState(false); const [preventShallowPush, setPreventShallowPush] = useState(false); const [isLoading, setIsLoading] = useState(false); const [isError, setIsError] = useState(false); @@ -242,6 +245,7 @@ export const ProjectsProvider: FC = ({ setHoveredPlantLocation(null); setSelectedSite(null); setSelectedIntervention('default') + setDisableInterventionMenu(false) setPreventShallowPush(false); setPlantLocations(null); } @@ -447,7 +451,9 @@ export const ProjectsProvider: FC = ({ selectedSite, setSelectedSite, selectedIntervention, + disableInterventionMenu, setSelectedIntervention, + setDisableInterventionMenu, setPreventShallowPush, }), [ @@ -467,7 +473,8 @@ export const ProjectsProvider: FC = ({ hoveredPlantLocation, selectedSite, preventShallowPush, - selectedIntervention + selectedIntervention, + disableInterventionMenu ] ); diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx index 8645c4719..8162d2594 100644 --- a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx +++ b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx @@ -1,5 +1,5 @@ import type { SetState } from '../../../common/types/common'; -import { useState, useMemo } from 'react'; +import { useState, useMemo, useEffect } from 'react'; import styles from './InterventionList.module.scss'; import DropdownUpArrow from '../../../../temp/icons/DropdownUpArrow'; import DropdownDownArrow from '../../../../temp/icons/DropdownDownArrow'; @@ -19,12 +19,16 @@ interface Props { selectedIntervention: string; setSelectedIntervention: SetState; isMobile?: boolean + enableInterventionFilter: () => void + disableInterventionMenu: boolean } const InterventionDropdown = ({ allIntervention, selectedIntervention, setSelectedIntervention, + enableInterventionFilter, + disableInterventionMenu, isMobile }: Props) => { const [isMenuOpen, setIsMenuOpen] = useState(false); @@ -41,9 +45,18 @@ const InterventionDropdown = ({ return AllIntervention.find(item => item.value === value); }; + useEffect(() => { + if(!disableInterventionMenu){ + setIsMenuOpen(false) + } + }, [disableInterventionMenu]) + const selectedSiteData = findMatchingIntervention(selectedIntervention) - const toggleMenu = () => setIsMenuOpen((prev) => !prev); + const toggleMenu = () => { + enableInterventionFilter() + setIsMenuOpen((prev) => !prev) + }; return ( <>
      diff --git a/src/features/projectsV2/ProjectsMap/MapControls.tsx b/src/features/projectsV2/ProjectsMap/MapControls.tsx index a4cba674d..bc92ad823 100644 --- a/src/features/projectsV2/ProjectsMap/MapControls.tsx +++ b/src/features/projectsV2/ProjectsMap/MapControls.tsx @@ -48,7 +48,9 @@ const MapControls = ({ setSelectedPlantLocation, setSelectedSamplePlantLocation, selectedIntervention, - setSelectedIntervention + setSelectedIntervention, + disableInterventionMenu, + setDisableInterventionMenu, } = useProjects(); const hasProjectSites = singleProject?.sites?.length !== undefined && @@ -59,6 +61,13 @@ const MapControls = ({ ); const isProjectDetailsPage = page === 'project-details'; + const enableInterventionFilter=()=>{ + setDisableInterventionMenu(true) + } + const disableInterventionFilter=()=>{ + setDisableInterventionMenu(false) + } + const siteDropdownProps = { selectedSite, setSelectedSite, @@ -66,6 +75,8 @@ const MapControls = ({ selectedPlantLocation, setSelectedPlantLocation, setSelectedSamplePlantLocation, + disableInterventionFilter, + disableInterventionMenu }; const InterventionDropdownProps = { @@ -75,6 +86,8 @@ const MapControls = ({ selectedPlantLocation, setSelectedPlantLocation, setSelectedSamplePlantLocation, + enableInterventionFilter, + disableInterventionMenu }; const projectListControlProps = { ...siteDropdownProps, diff --git a/src/features/projectsV2/ProjectsMap/ProjectSiteDropDown/index.tsx b/src/features/projectsV2/ProjectsMap/ProjectSiteDropDown/index.tsx index 3f45f911e..ab44ee1bc 100644 --- a/src/features/projectsV2/ProjectsMap/ProjectSiteDropDown/index.tsx +++ b/src/features/projectsV2/ProjectsMap/ProjectSiteDropDown/index.tsx @@ -5,7 +5,7 @@ import type { SamplePlantLocation, } from '../../../common/types/plantLocation'; -import { useState, useMemo, useCallback } from 'react'; +import { useState, useMemo, useCallback, useEffect } from 'react'; import { useLocale, useTranslations } from 'next-intl'; import { useRouter } from 'next/router'; import { area } from '@turf/turf'; @@ -41,6 +41,8 @@ interface Props { selectedPlantLocation: PlantLocation | null; setSelectedPlantLocation: SetState; setSelectedSamplePlantLocation: SetState; + disableInterventionFilter: () => void; + disableInterventionMenu: boolean } const ProjectSiteDropdown = ({ @@ -50,6 +52,8 @@ const ProjectSiteDropdown = ({ selectedPlantLocation, setSelectedPlantLocation, setSelectedSamplePlantLocation, + disableInterventionFilter, + disableInterventionMenu }: Props) => { const [isMenuOpen, setIsMenuOpen] = useState(false); const tProjectDetails = useTranslations('ProjectDetails'); @@ -72,10 +76,21 @@ const ProjectSiteDropdown = ({ }, [siteList] ); + + useEffect(() => { + if(disableInterventionMenu){ + setIsMenuOpen(false) + } + }, [disableInterventionMenu]) + + const selectedSiteData = selectedSite !== null ? siteList[selectedSite] : undefined; - const toggleMenu = () => setIsMenuOpen((prev) => !prev); + const toggleMenu = () => { + setIsMenuOpen((prev) => !prev) + disableInterventionFilter() + }; return ( <>
      From 578a4c23ec50db51644f6f9ede7abcf30a431ade Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Mon, 30 Dec 2024 11:00:18 +0530 Subject: [PATCH 22/39] All Intervention set to default --- src/features/projectsV2/ProjectsContext.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/features/projectsV2/ProjectsContext.tsx b/src/features/projectsV2/ProjectsContext.tsx index 0eca84f7d..41b05cf37 100644 --- a/src/features/projectsV2/ProjectsContext.tsx +++ b/src/features/projectsV2/ProjectsContext.tsx @@ -96,7 +96,7 @@ export const ProjectsProvider: FC = ({ const [hoveredPlantLocation, setHoveredPlantLocation] = useState(null); const [selectedSite, setSelectedSite] = useState(null); - const [selectedIntervention, setSelectedIntervention] = useState('default'); + const [selectedIntervention, setSelectedIntervention] = useState('all'); const [disableInterventionMenu, setDisableInterventionMenu] = useState(false); const [preventShallowPush, setPreventShallowPush] = useState(false); const [isLoading, setIsLoading] = useState(false); @@ -244,7 +244,7 @@ export const ProjectsProvider: FC = ({ setSingleProject(null); setHoveredPlantLocation(null); setSelectedSite(null); - setSelectedIntervention('default') + setSelectedIntervention('all') setDisableInterventionMenu(false) setPreventShallowPush(false); setPlantLocations(null); From 9a88fe834c7eceded6b39c1a19689d936962a07e Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Mon, 30 Dec 2024 11:05:25 +0530 Subject: [PATCH 23/39] minor fix --- .../ProjectsMap/ProjectSiteDropDown/SiteDropdown.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/projectsV2/ProjectsMap/ProjectSiteDropDown/SiteDropdown.module.scss b/src/features/projectsV2/ProjectsMap/ProjectSiteDropDown/SiteDropdown.module.scss index 05e9dd760..1eed5c8a7 100644 --- a/src/features/projectsV2/ProjectsMap/ProjectSiteDropDown/SiteDropdown.module.scss +++ b/src/features/projectsV2/ProjectsMap/ProjectSiteDropDown/SiteDropdown.module.scss @@ -142,7 +142,7 @@ $layoutPaddingSide: 20px; max-width: 140px; padding: 8px 12px; top: 36px; - right: 0px; + right: 40%; min-width: 160px; .listItem { display: flex; From 2d8288609ed7474114ebf8b3b7e39b42ef2d0723 Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Mon, 30 Dec 2024 11:12:54 +0530 Subject: [PATCH 24/39] padding added inbetween overlapping intervention header --- .../components/microComponents/OtherInterventionHeader.tsx | 4 ++-- .../ProjectDetails/styles/PlantLocationInfo.module.scss | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/features/projectsV2/ProjectDetails/components/microComponents/OtherInterventionHeader.tsx b/src/features/projectsV2/ProjectDetails/components/microComponents/OtherInterventionHeader.tsx index d50b5d1fd..b8b9c0665 100644 --- a/src/features/projectsV2/ProjectDetails/components/microComponents/OtherInterventionHeader.tsx +++ b/src/features/projectsV2/ProjectDetails/components/microComponents/OtherInterventionHeader.tsx @@ -26,13 +26,13 @@ const OtherInterventionInfoHeader = ({ plantDate, type }: Props) => { }, ]; return ( -
      +
      {plantingDetails.map((item, key) => { if (!item.shouldRender) return; return (

      {item.label}

      {item.data}

      diff --git a/src/features/projectsV2/ProjectDetails/styles/PlantLocationInfo.module.scss b/src/features/projectsV2/ProjectDetails/styles/PlantLocationInfo.module.scss index 7d39c9375..ebc469a18 100644 --- a/src/features/projectsV2/ProjectDetails/styles/PlantLocationInfo.module.scss +++ b/src/features/projectsV2/ProjectDetails/styles/PlantLocationInfo.module.scss @@ -34,9 +34,10 @@ display: flex; justify-content: space-between; font-size: 12px; + gap: 10px; } .plantingDetailsItem { - min-width: 162px; + min-width: 160px; padding: 20px; background: rgba(0, 122, 73, 0.05); border-radius: 12px; From 57d452787840d278bbd4e898b27a7f21595bfdf1 Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Mon, 30 Dec 2024 11:16:49 +0530 Subject: [PATCH 25/39] minor clipath refactor --- public/assets/images/icons/InterventionIcon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/assets/images/icons/InterventionIcon.tsx b/public/assets/images/icons/InterventionIcon.tsx index 603b79d66..5c4fd0775 100644 --- a/public/assets/images/icons/InterventionIcon.tsx +++ b/public/assets/images/icons/InterventionIcon.tsx @@ -7,7 +7,7 @@ function InterventionIcon() { return ( - + From 0b86b1f26f058724b9f3e88f369a5033cf82d80a Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Fri, 3 Jan 2025 12:20:54 +0530 Subject: [PATCH 26/39] code changes --- .../projectsV2/ProjectDetails/index.tsx | 11 +++----- src/features/projectsV2/ProjectsContext.tsx | 4 +-- .../InterventionDropDown/InterventionList.tsx | 4 +-- .../InterventionDropDown/index.tsx | 6 ++--- .../projectsV2/ProjectsMap/MapControls.tsx | 2 +- .../ProjectsMap/SingleProjectView.tsx | 9 ------- src/features/projectsV2/ProjectsMap/index.tsx | 2 +- .../microComponents/PlantLocations.tsx | 4 +-- src/utils/constants/intervention.ts | 26 +++++++++++++++++-- 9 files changed, 37 insertions(+), 31 deletions(-) diff --git a/src/features/projectsV2/ProjectDetails/index.tsx b/src/features/projectsV2/ProjectDetails/index.tsx index e3deeaf30..a75120bf5 100644 --- a/src/features/projectsV2/ProjectDetails/index.tsx +++ b/src/features/projectsV2/ProjectDetails/index.tsx @@ -24,6 +24,7 @@ import SinglePlantLocationInfo from './components/SinglePlantLocationInfo'; import { getPlantData } from '../../../utils/projectV2'; import ProjectDetailsMeta from '../../../utils/getMetaTags/ProjectDetailsMeta'; import OtherInterventionInfo from './components/OtherInterventionInfo'; +import { isNonPlantationType, PLANTATION_TYPES } from '../../../utils/constants/intervention'; const ProjectDetails = ({ currencyCode, @@ -127,14 +128,8 @@ const ProjectDetails = ({ selectedPlantLocation?.type === 'multi-tree-registration') && !isMobile; - const PLANTATION_TYPES = ['multi-tree-registration', 'single-tree-registration'] as const; - - // Helper function with proper type checking - const isNonPlantationType = (location: PlantLocation | null): boolean => { - return location !== null && !PLANTATION_TYPES.includes(location.type); - }; - - + + const shouldShowOtherIntervention = ( isNonPlantationType(hoveredPlantLocation) || (isNonPlantationType(selectedPlantLocation) && !isMobile) diff --git a/src/features/projectsV2/ProjectsContext.tsx b/src/features/projectsV2/ProjectsContext.tsx index 3c0c6179a..7865d89c0 100644 --- a/src/features/projectsV2/ProjectsContext.tsx +++ b/src/features/projectsV2/ProjectsContext.tsx @@ -96,8 +96,8 @@ export const ProjectsProvider: FC = ({ const [hoveredPlantLocation, setHoveredPlantLocation] = useState(null); const [selectedSite, setSelectedSite] = useState(null); - const [selectedIntervention, setSelectedIntervention] = useState('all'); - const [disableInterventionMenu, setDisableInterventionMenu] = useState(false); + const [selectedIntervention, setSelectedIntervention] = useState('all'); + const [disableInterventionMenu, setDisableInterventionMenu] = useState(false); const [preventShallowPush, setPreventShallowPush] = useState(false); const [isLoading, setIsLoading] = useState(false); const [isError, setIsError] = useState(false); diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx index 54b319812..24842da98 100644 --- a/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx +++ b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx @@ -20,7 +20,7 @@ const InterventionList = ({ setIsMenuOpen, selectedSiteData, }: InterventionListProps) => { - const handleSiteSelection = (index: number, key: string) => { + const handleFilterSelection = (key: string) => { setIsMenuOpen(false); setSelectedIntervention(key); }; @@ -32,7 +32,7 @@ const InterventionList = ({
    • handleSiteSelection(index, intervention.value)} + onClick={() => handleFilterSelection(intervention.value)} key={index} >

      {intervention.label}

      diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx index 8162d2594..c9828e617 100644 --- a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx +++ b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx @@ -5,7 +5,7 @@ import DropdownUpArrow from '../../../../temp/icons/DropdownUpArrow'; import DropdownDownArrow from '../../../../temp/icons/DropdownDownArrow'; import InterventionList from './InterventionList'; import { truncateString } from '../../../../utils/getTruncatedString'; -import { AllIntervention, INTERVENTION_TYPE } from '../../../../utils/constants/intervention'; +import { AllIntervention, findMatchingIntervention, INTERVENTION_TYPE } from '../../../../utils/constants/intervention'; import InterventionIcon from '../../../../../public/assets/images/icons/InterventionIcon'; interface InterventionType { label: string @@ -41,9 +41,7 @@ const InterventionDropdown = ({ })); }, [allIntervention]); - const findMatchingIntervention = (value: string) => { - return AllIntervention.find(item => item.value === value); - }; + useEffect(() => { if(!disableInterventionMenu){ diff --git a/src/features/projectsV2/ProjectsMap/MapControls.tsx b/src/features/projectsV2/ProjectsMap/MapControls.tsx index bc92ad823..3a2b2a83f 100644 --- a/src/features/projectsV2/ProjectsMap/MapControls.tsx +++ b/src/features/projectsV2/ProjectsMap/MapControls.tsx @@ -58,7 +58,7 @@ const MapControls = ({ const canShowSatelliteToggle = !( isMobile && (selectedPlantLocation !== null || selectedSamplePlantLocation !== null) - ); + ); const isProjectDetailsPage = page === 'project-details'; const enableInterventionFilter=()=>{ diff --git a/src/features/projectsV2/ProjectsMap/SingleProjectView.tsx b/src/features/projectsV2/ProjectsMap/SingleProjectView.tsx index dfdf55726..ea56f64d2 100644 --- a/src/features/projectsV2/ProjectsMap/SingleProjectView.tsx +++ b/src/features/projectsV2/ProjectsMap/SingleProjectView.tsx @@ -60,15 +60,6 @@ const SingleProjectView = ({ mapRef }: Props) => { } }, [selectedPlantLocation, router.isReady]); - useEffect(() => { - zoomOut( - handleViewStateChange, - mapRef, - 4000 - ); - }, [selectedIntervention]) - - // Zoom to project site useEffect(() => { if (!router.isReady || selectedPlantLocation !== null) return; diff --git a/src/features/projectsV2/ProjectsMap/index.tsx b/src/features/projectsV2/ProjectsMap/index.tsx index e2330887b..5c6fe9318 100644 --- a/src/features/projectsV2/ProjectsMap/index.tsx +++ b/src/features/projectsV2/ProjectsMap/index.tsx @@ -25,6 +25,7 @@ import SinglePlantLocationInfo from '../ProjectDetails/components/SinglePlantLoc import styles from './ProjectsMap.module.scss'; import { useDebouncedEffect } from '../../../utils/useDebouncedEffect'; import OtherInterventionInfo from '../ProjectDetails/components/OtherInterventionInfo'; +import { PLANTATION_TYPES } from '../../../utils/constants/intervention'; export type ProjectsMapDesktopProps = { isMobile: false; @@ -177,7 +178,6 @@ function ProjectsMap(props: ProjectsMapProps) { }; const mapContainerClass = `${styles.mapContainer} ${styles[mobileOS !== undefined ? mobileOS : ''] }`; - const PLANTATION_TYPES = ['multi-tree-registration', 'single-tree-registration'] const shouldShowOtherIntervention = props.isMobile && (selectedPlantLocation !== null && !PLANTATION_TYPES.includes(selectedPlantLocation.type)) return ( <> diff --git a/src/features/projectsV2/ProjectsMap/microComponents/PlantLocations.tsx b/src/features/projectsV2/ProjectsMap/microComponents/PlantLocations.tsx index f9b534780..0a6bf2d6d 100644 --- a/src/features/projectsV2/ProjectsMap/microComponents/PlantLocations.tsx +++ b/src/features/projectsV2/ProjectsMap/microComponents/PlantLocations.tsx @@ -167,7 +167,7 @@ export default function PlantLocations(): React.ReactElement { id={`plant-polygon-layer`} type="fill" paint={{ - 'fill-color': isSatelliteView ? FillColor : FillColor, + 'fill-color': FillColor, 'fill-opacity': ['get', 'opacity'], }} filter={['==', ['geometry-type'], 'Polygon']} @@ -176,7 +176,7 @@ export default function PlantLocations(): React.ReactElement { id={`point-layer`} type="circle" paint={{ - 'circle-color': isSatelliteView ? FillColor : FillColor, + 'circle-color': FillColor, 'circle-opacity': [ 'case', [ diff --git a/src/utils/constants/intervention.ts b/src/utils/constants/intervention.ts index 2a10f7dd7..c252fb2b6 100644 --- a/src/utils/constants/intervention.ts +++ b/src/utils/constants/intervention.ts @@ -1,3 +1,6 @@ +import { DataDrivenPropertyValueSpecification } from "maplibre-gl"; +import { PlantLocation, PlantLocationMulti } from "../../features/common/types/plantLocation"; + export const SINGLE_TREE = '#007A49'; export const MULTI_TREE = '#007A49'; export const INVASIVE_SPECIES = '#EB5757'; @@ -16,7 +19,7 @@ export const ENRICHMENT_PLANTING = '#EB67CE'; export const MAINTENANCE = '#6C63FF'; export const OTHER_INTERVENTION = '#9B51E0'; -export const FillColor = [ +export const FillColor: DataDrivenPropertyValueSpecification = [ 'match', ['get', 'type'], 'remeasurement', 'tomato', @@ -82,4 +85,23 @@ export const AllIntervention: Array<{ { label: 'Stop Tree Harvesting', value: 'stop-tree-harvesting', index: 0 }, { label: 'Maintenance', value: 'maintenance', index: 0 }, { label: 'Other Intervention', value: 'other-intervention', index: 0 } - ] \ No newline at end of file + ] + +export const PLANTATION_TYPES = ['multi-tree-registration', 'single-tree-registration'] + +// Helper function with proper type checking +export const isNonPlantationType = (location: PlantLocation | null): boolean => { + return location !== null && !PLANTATION_TYPES.includes(location.type); +}; + + +export const findMatchingIntervention = (value: string) => { + return AllIntervention.find(item => item.value === value); +}; + +export const isPlantLocationMulti = (location: PlantLocation | null): location is PlantLocationMulti => { + return location !== null && + 'sampleTreeCount' in location && + 'sampleInterventions' in location && + 'plantedSpecies' in location; + }; \ No newline at end of file From 588bfc2663db8c50239dbbd36e863a6c6d492a79 Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Fri, 3 Jan 2025 12:36:24 +0530 Subject: [PATCH 27/39] minor --- src/features/projectsV2/ProjectDetails/index.tsx | 3 ++- .../projectsV2/ProjectsMap/InterventionDropDown/index.tsx | 2 +- src/features/projectsV2/ProjectsMap/SingleProjectView.tsx | 3 +-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/features/projectsV2/ProjectDetails/index.tsx b/src/features/projectsV2/ProjectDetails/index.tsx index a75120bf5..f70d9aa98 100644 --- a/src/features/projectsV2/ProjectDetails/index.tsx +++ b/src/features/projectsV2/ProjectDetails/index.tsx @@ -24,7 +24,7 @@ import SinglePlantLocationInfo from './components/SinglePlantLocationInfo'; import { getPlantData } from '../../../utils/projectV2'; import ProjectDetailsMeta from '../../../utils/getMetaTags/ProjectDetailsMeta'; import OtherInterventionInfo from './components/OtherInterventionInfo'; -import { isNonPlantationType, PLANTATION_TYPES } from '../../../utils/constants/intervention'; +import { isNonPlantationType } from '../../../utils/constants/intervention'; const ProjectDetails = ({ currencyCode, @@ -141,6 +141,7 @@ const ProjectDetails = ({ selectedPlantLocation?.type === 'single-tree-registration' || selectedSamplePlantLocation !== null) && !isMobile; + const shouldShowProjectInfo = hoveredPlantLocation === null && selectedPlantLocation === null && diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx index c9828e617..ecb887cec 100644 --- a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx +++ b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx @@ -5,7 +5,7 @@ import DropdownUpArrow from '../../../../temp/icons/DropdownUpArrow'; import DropdownDownArrow from '../../../../temp/icons/DropdownDownArrow'; import InterventionList from './InterventionList'; import { truncateString } from '../../../../utils/getTruncatedString'; -import { AllIntervention, findMatchingIntervention, INTERVENTION_TYPE } from '../../../../utils/constants/intervention'; +import {findMatchingIntervention, INTERVENTION_TYPE } from '../../../../utils/constants/intervention'; import InterventionIcon from '../../../../../public/assets/images/icons/InterventionIcon'; interface InterventionType { label: string diff --git a/src/features/projectsV2/ProjectsMap/SingleProjectView.tsx b/src/features/projectsV2/ProjectsMap/SingleProjectView.tsx index ea56f64d2..98d07e376 100644 --- a/src/features/projectsV2/ProjectsMap/SingleProjectView.tsx +++ b/src/features/projectsV2/ProjectsMap/SingleProjectView.tsx @@ -11,14 +11,13 @@ import PlantLocations from './microComponents/PlantLocations'; import { zoomToPolygonPlantLocation } from '../../../utils/mapsV2/zoomToPolygonPlantLocation'; import zoomToLocation from '../../../utils/mapsV2/zoomToLocation'; import ProjectLocation from './microComponents/ProjectLocation'; -import zoomOut from '../../../utils/mapsV2/zoomOut'; interface Props { mapRef: MapRef; } const SingleProjectView = ({ mapRef }: Props) => { - const { singleProject, selectedSite, selectedPlantLocation, plantLocations, selectedIntervention } = + const { singleProject, selectedSite, selectedPlantLocation, plantLocations } = useProjects(); if (singleProject === null) return null; From 171adf89c6921d6ad06b94ca8025bf925aee8f34 Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Mon, 6 Jan 2025 04:16:25 +0530 Subject: [PATCH 28/39] HID added --- .../components/OtherInterventionInfo.tsx | 5 ++-- .../microComponents/InterventionHeader.tsx | 30 +++++++++++++++++++ .../OtherInterventionHeader.tsx | 14 ++------- .../styles/PlantLocationInfo.module.scss | 26 ++++++++++++++++ 4 files changed, 61 insertions(+), 14 deletions(-) create mode 100644 src/features/projectsV2/ProjectDetails/components/microComponents/InterventionHeader.tsx diff --git a/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx b/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx index f419714f1..7300ba1e2 100644 --- a/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx +++ b/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx @@ -18,6 +18,7 @@ import ImageSlider from './microComponents/ImageSlider'; import MobileInfoSwiper from '../../MobileInfoSwiper'; import OtherInterventionInfoHeader from './microComponents/OtherInterventionHeader'; import OtherInterventionMetaData from './microComponents/OtherInterventionMetaData'; +import InterventionHeader from './microComponents/InterventionHeader'; export interface OtherInterventions extends PlantLocationBase { sampleTreeCount: number; @@ -83,6 +84,7 @@ const OtherInterventionInfo = ({ const checkForPublicData = plantLocationInfo?.metadata.public.length !== 0 const content = [ + , shouldDisplayImageCarousel && ( - ) - , + ), { + const findInterventionHeader = (valueKey: string | undefined) => { + const found = AllIntervention.find(item => item.value === valueKey); + return found ? found.label : ''; + }; + return ( +
      +
      + {findInterventionHeader(type)} +
      +
      {formatHid(plHid)}
      +
      + ); +}; + +export default InterventionHeader; diff --git a/src/features/projectsV2/ProjectDetails/components/microComponents/OtherInterventionHeader.tsx b/src/features/projectsV2/ProjectDetails/components/microComponents/OtherInterventionHeader.tsx index b8b9c0665..e783f169b 100644 --- a/src/features/projectsV2/ProjectDetails/components/microComponents/OtherInterventionHeader.tsx +++ b/src/features/projectsV2/ProjectDetails/components/microComponents/OtherInterventionHeader.tsx @@ -1,6 +1,5 @@ import formatDate from '../../../../../utils/countryCurrency/getFormattedDate'; import styles from '../../styles/PlantLocationInfo.module.scss'; -import { AllIntervention } from '../../../../../utils/constants/intervention'; interface Props { type: string | undefined, @@ -9,16 +8,7 @@ interface Props { const OtherInterventionInfoHeader = ({ plantDate, type }: Props) => { - const findInterventionHeader = (valueKey: string | undefined) => { - const found = AllIntervention.find(item => item.value === valueKey); - return found ? found.label : ''; - }; const plantingDetails = [ - { - label: "Intervention", - data: findInterventionHeader(type), - shouldRender: true - }, { label: "Intervention Date", data: plantDate ? formatDate(plantDate) : null, @@ -26,13 +16,13 @@ const OtherInterventionInfoHeader = ({ plantDate, type }: Props) => { }, ]; return ( -
      +
      {plantingDetails.map((item, key) => { if (!item.shouldRender) return; return (

      {item.label}

      {item.data}

      diff --git a/src/features/projectsV2/ProjectDetails/styles/PlantLocationInfo.module.scss b/src/features/projectsV2/ProjectDetails/styles/PlantLocationInfo.module.scss index ebc469a18..4b2dc6a27 100644 --- a/src/features/projectsV2/ProjectDetails/styles/PlantLocationInfo.module.scss +++ b/src/features/projectsV2/ProjectDetails/styles/PlantLocationInfo.module.scss @@ -12,6 +12,18 @@ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } +.otherInterventionInfoSection { + background: #fff; + border-radius: 12px; + margin-top: 23px; + padding: 12px 12px 24px; + display: flex; + flex-direction: column; + gap: 15px; + box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); +} + + .plantLocationHeaderContainer { display: flex; justify-content: space-between; @@ -36,6 +48,20 @@ font-size: 12px; gap: 10px; } + + +.otherInterventionGroup { + display: flex; + font-size: 12px; +} + +.otherInterventionDetailsItem { + padding: 20px; + background: rgba(0, 122, 73, 0.05); + border-radius: 12px; + flex:1; +} + .plantingDetailsItem { min-width: 160px; padding: 20px; From b22fc3a5cc5ccbdfc3917c52dfef865f39b49987 Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Mon, 6 Jan 2025 04:43:52 +0530 Subject: [PATCH 29/39] enrichement planting changes --- .../projectsV2/ProjectsMap/microComponents/PlantLocations.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/projectsV2/ProjectsMap/microComponents/PlantLocations.tsx b/src/features/projectsV2/ProjectsMap/microComponents/PlantLocations.tsx index 0a6bf2d6d..67fa0e5cf 100644 --- a/src/features/projectsV2/ProjectsMap/microComponents/PlantLocations.tsx +++ b/src/features/projectsV2/ProjectsMap/microComponents/PlantLocations.tsx @@ -213,7 +213,7 @@ export default function PlantLocations(): React.ReactElement { filter={['!=', ['get', 'dateDiff'], '']} /> {selectedPlantLocation && - selectedPlantLocation.type === 'multi-tree-registration' && + selectedPlantLocation.type !== 'single-tree-registration' && viewState.zoom > 14 && selectedPlantLocation.sampleInterventions ? selectedPlantLocation.sampleInterventions.map((spl) => { From a7555c39f036941a44004d9b6ef220227ad24cc1 Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Mon, 6 Jan 2025 05:17:33 +0530 Subject: [PATCH 30/39] minor --- .../OtherInterventionHeader.tsx | 28 +++++-------------- 1 file changed, 7 insertions(+), 21 deletions(-) diff --git a/src/features/projectsV2/ProjectDetails/components/microComponents/OtherInterventionHeader.tsx b/src/features/projectsV2/ProjectDetails/components/microComponents/OtherInterventionHeader.tsx index e783f169b..2cadf61de 100644 --- a/src/features/projectsV2/ProjectDetails/components/microComponents/OtherInterventionHeader.tsx +++ b/src/features/projectsV2/ProjectDetails/components/microComponents/OtherInterventionHeader.tsx @@ -6,29 +6,15 @@ interface Props { plantDate: string | null | undefined; } -const OtherInterventionInfoHeader = ({ plantDate, type }: Props) => { - - const plantingDetails = [ - { - label: "Intervention Date", - data: plantDate ? formatDate(plantDate) : null, - shouldRender: plantDate !== null, - }, - ]; +const OtherInterventionInfoHeader = ({ plantDate, type }: Props) => { return (
      - {plantingDetails.map((item, key) => { - if (!item.shouldRender) return; - return ( -
      -

      {item.label}

      -

      {item.data}

      -
      - ); - })} +
      +

      Intervention Date

      +

      {plantDate ? formatDate(plantDate) : null}

      +
      ); }; From 4c6de8d61bf4430f7f5d571870c0fc949f0c92ec Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Mon, 6 Jan 2025 09:08:27 +0530 Subject: [PATCH 31/39] minor --- .../ProjectDetails/components/OtherInterventionInfo.tsx | 2 +- .../components/microComponents/InterventionHeader.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx b/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx index 7300ba1e2..3f50d11f7 100644 --- a/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx +++ b/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx @@ -84,7 +84,7 @@ const OtherInterventionInfo = ({ const checkForPublicData = plantLocationInfo?.metadata.public.length !== 0 const content = [ - , + , shouldDisplayImageCarousel && ( { const findInterventionHeader = (valueKey: string | undefined) => { const found = AllIntervention.find(item => item.value === valueKey); @@ -20,7 +20,7 @@ const InterventionHeader = ({ className={`plant-location-header-container ${styles.plantLocationHeaderContainer}`} >
      - {findInterventionHeader(type)} + {findInterventionHeader(interventionType)}
      {formatHid(plHid)}
      From 1ac22f65b0cb83957d65800573bb8ec1095760c6 Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Wed, 8 Jan 2025 11:54:50 +0530 Subject: [PATCH 32/39] type added in imports --- src/features/common/types/plantLocation.d.ts | 4 +++- .../ProjectsMap/InterventionDropDown/InterventionList.tsx | 4 +++- .../projectsV2/ProjectsMap/InterventionDropDown/index.tsx | 4 +++- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/features/common/types/plantLocation.d.ts b/src/features/common/types/plantLocation.d.ts index 1002da4ba..a07554dd3 100644 --- a/src/features/common/types/plantLocation.d.ts +++ b/src/features/common/types/plantLocation.d.ts @@ -1,8 +1,10 @@ +import type { INTERVENTION_TYPE } from '../../../utils/constants/intervention'; + + import { InterventionTypes } from '@planet-sdk/common'; import { DateString } from './common'; import { Links } from './payments'; import { Polygon, Point } from 'geojson'; -import { INTERVENTION_TYPE } from '../../../utils/constants/intervention'; export interface PlantLocationBase { type: InterventionTypes diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx index 24842da98..1507083c9 100644 --- a/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx +++ b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx @@ -1,6 +1,8 @@ import type { SetState } from '../../../common/types/common'; +import type { INTERVENTION_TYPE } from '../../../../utils/constants/intervention'; + + import styles from '../../ProjectsMap/InterventionDropDown/InterventionList.module.scss'; -import { INTERVENTION_TYPE } from '../../../../utils/constants/intervention'; type InterventionData = { label: string diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx index ecb887cec..bd8128e24 100644 --- a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx +++ b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx @@ -1,11 +1,13 @@ import type { SetState } from '../../../common/types/common'; +import type {INTERVENTION_TYPE } from '../../../../utils/constants/intervention'; + import { useState, useMemo, useEffect } from 'react'; import styles from './InterventionList.module.scss'; import DropdownUpArrow from '../../../../temp/icons/DropdownUpArrow'; import DropdownDownArrow from '../../../../temp/icons/DropdownDownArrow'; import InterventionList from './InterventionList'; import { truncateString } from '../../../../utils/getTruncatedString'; -import {findMatchingIntervention, INTERVENTION_TYPE } from '../../../../utils/constants/intervention'; +import {findMatchingIntervention } from '../../../../utils/constants/intervention'; import InterventionIcon from '../../../../../public/assets/images/icons/InterventionIcon'; interface InterventionType { label: string From 6ea36995d14948e68fe334cc7e82592e279ca90c Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Wed, 8 Jan 2025 11:55:01 +0530 Subject: [PATCH 33/39] minor css issue fix --- .../ProjectDetails/styles/PlantLocationInfo.module.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/features/projectsV2/ProjectDetails/styles/PlantLocationInfo.module.scss b/src/features/projectsV2/ProjectDetails/styles/PlantLocationInfo.module.scss index 4b2dc6a27..c2bb92c44 100644 --- a/src/features/projectsV2/ProjectDetails/styles/PlantLocationInfo.module.scss +++ b/src/features/projectsV2/ProjectDetails/styles/PlantLocationInfo.module.scss @@ -213,8 +213,7 @@ .interventionMetaDataGroup { display: flex; - flex-direction: column, - + flex-direction: column; } .interventionMetaItem { From 7c1e9e9f7c7f671c01d3e64cb6578e24b3077976 Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Wed, 8 Jan 2025 11:55:17 +0530 Subject: [PATCH 34/39] empty slide due tio metadata fix --- .../components/OtherInterventionInfo.tsx | 64 +++++++++++++++++-- .../OtherInterventionMetaData.tsx | 60 +---------------- 2 files changed, 62 insertions(+), 62 deletions(-) diff --git a/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx b/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx index 3f50d11f7..0a082741a 100644 --- a/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx +++ b/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx @@ -20,6 +20,17 @@ import OtherInterventionInfoHeader from './microComponents/OtherInterventionHead import OtherInterventionMetaData from './microComponents/OtherInterventionMetaData'; import InterventionHeader from './microComponents/InterventionHeader'; +interface MetaDataValue { + value: string; + label: string; +} + + +interface PublicMetaData { + [key: string]: string | MetaDataValue; +} + + export interface OtherInterventions extends PlantLocationBase { sampleTreeCount: number; sampleInterventions: SamplePlantLocation[]; @@ -81,10 +92,54 @@ const OtherInterventionInfo = ({ sampleInterventionSpeciesImages !== undefined && sampleInterventionSpeciesImages?.length > 0; - const checkForPublicData = plantLocationInfo?.metadata.public.length !== 0 + + + function isJsonString(str: string) { + try { + const parsed = JSON.parse(str); + return typeof parsed === 'object' && parsed !== null; + } catch (e) { + return false; + } + } + + + const renderMetaData = () => { + const checkForPublic: { value: string; key: string }[] = []; + const parsedData = plantLocationInfo?.metadata; + + if (parsedData?.public && typeof parsedData.public === 'object' && !Array.isArray(parsedData.public)) { + Object.entries(parsedData.public as PublicMetaData).forEach(([key, value]) => { + if (key !== 'isEntireSite') { + if (typeof value === 'string') { + checkForPublic.push({ value, key }); + } else if (typeof value === 'object' && value !== null && 'value' in value && 'label' in value) { + if (isJsonString(value.value)) { + try { + const parsedValue = JSON.parse(value.value); + if (parsedValue && typeof parsedValue === 'object' && 'value' in parsedValue) { + checkForPublic.push({ value: parsedValue.value, key: value.label }); + } + } catch (error) { + console.error('Error parsing JSON:', error); + } + } else { + checkForPublic.push({ value: value.value, key: value.label }); + } + } + } + }); + } + + return checkForPublic; + }; + + const checkForPublicData = renderMetaData() + + const content = [ - , + , shouldDisplayImageCarousel && ( , - checkForPublicData && 0 && , @@ -122,7 +177,6 @@ const OtherInterventionInfo = ({ /> ), ].filter(Boolean); - return isMobile ? ( <> { - - function isJsonString(str: string) { - try { - const parsed = JSON.parse(str); - return typeof parsed === 'object' && parsed !== null; - } catch (e) { - return false; - } - } - - - - interface MetaDataValue { - value: string; - label: string; - } - - interface PublicMetaData { - [key: string]: string | MetaDataValue; - } - - const renderMetaData = () => { - const checkForPublic: { value: string; key: string }[] = []; - const parsedData = metaData; - - if (parsedData?.public && typeof parsedData.public === 'object' && !Array.isArray(parsedData.public)) { - Object.entries(parsedData.public as PublicMetaData).forEach(([key, value]) => { - if (key !== 'isEntireSite') { - if (typeof value === 'string') { - checkForPublic.push({ value, key }); - } else if (typeof value === 'object' && value !== null && 'value' in value && 'label' in value) { - if (isJsonString(value.value)) { - try { - const parsedValue = JSON.parse(value.value); - if (parsedValue && typeof parsedValue === 'object' && 'value' in parsedValue) { - checkForPublic.push({ value: parsedValue.value, key: value.label }); - } - } catch (error) { - console.error('Error parsing JSON:', error); - } - } else { - checkForPublic.push({ value: value.value, key: value.label }); - } - } - } - }); - } - - return checkForPublic; - }; - - - const cardData=renderMetaData() - if(cardData.length===0){ + if(metaData.length===0){ return null } return (
      - {cardData.map((item, key) => { + {metaData.map((item, key) => { return (
      Date: Wed, 8 Jan 2025 14:43:45 +0530 Subject: [PATCH 35/39] removed unwanted code and renamed variables --- .../assets/images/icons/InterventionIcon.tsx | 5 -- .../microComponents/InterventionHeader.tsx | 4 +- .../InterventionDropDown/index.tsx | 12 +-- .../projectsV2/ProjectsMap/MapControls.tsx | 4 +- src/utils/constants/intervention.ts | 78 +++++++++---------- src/utils/mapsV2/zoomOut.tsx | 43 ---------- 6 files changed, 49 insertions(+), 97 deletions(-) delete mode 100644 src/utils/mapsV2/zoomOut.tsx diff --git a/public/assets/images/icons/InterventionIcon.tsx b/public/assets/images/icons/InterventionIcon.tsx index 5c4fd0775..b530ecdd8 100644 --- a/public/assets/images/icons/InterventionIcon.tsx +++ b/public/assets/images/icons/InterventionIcon.tsx @@ -1,8 +1,3 @@ - - - -import React from 'react'; - function InterventionIcon() { return ( diff --git a/src/features/projectsV2/ProjectDetails/components/microComponents/InterventionHeader.tsx b/src/features/projectsV2/ProjectDetails/components/microComponents/InterventionHeader.tsx index 41a04d47c..fe7fbf929 100644 --- a/src/features/projectsV2/ProjectDetails/components/microComponents/InterventionHeader.tsx +++ b/src/features/projectsV2/ProjectDetails/components/microComponents/InterventionHeader.tsx @@ -1,6 +1,6 @@ import styles from '../../styles/PlantLocationInfo.module.scss'; import { formatHid } from '../../../../../utils/projectV2'; -import { AllIntervention } from '../../../../../utils/constants/intervention'; +import { AllInterventions } from '../../../../../utils/constants/intervention'; interface Props { plHid: string | undefined; @@ -12,7 +12,7 @@ const InterventionHeader = ({ interventionType }: Props) => { const findInterventionHeader = (valueKey: string | undefined) => { - const found = AllIntervention.find(item => item.value === valueKey); + const found = AllInterventions.find(item => item.value === valueKey); return found ? found.label : ''; }; return ( diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx index bd8128e24..6120d0dd2 100644 --- a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx +++ b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx @@ -9,7 +9,7 @@ import InterventionList from './InterventionList'; import { truncateString } from '../../../../utils/getTruncatedString'; import {findMatchingIntervention } from '../../../../utils/constants/intervention'; import InterventionIcon from '../../../../../public/assets/images/icons/InterventionIcon'; -interface InterventionType { +interface InterventionOptionType { label: string value: INTERVENTION_TYPE index: number @@ -17,7 +17,7 @@ interface InterventionType { interface Props { - allIntervention: InterventionType[]; + allInterventions: InterventionOptionType[]; selectedIntervention: string; setSelectedIntervention: SetState; isMobile?: boolean @@ -26,7 +26,7 @@ interface Props { } const InterventionDropdown = ({ - allIntervention, + allInterventions, selectedIntervention, setSelectedIntervention, enableInterventionFilter, @@ -35,13 +35,13 @@ const InterventionDropdown = ({ }: Props) => { const [isMenuOpen, setIsMenuOpen] = useState(false); const interventionList = useMemo(() => { - if (!allIntervention) return []; - return allIntervention.map((el) => ({ + if (!allInterventions) return []; + return allInterventions.map((el) => ({ label: el.label, index: el.index, value: el.value })); - }, [allIntervention]); + }, [allInterventions]); diff --git a/src/features/projectsV2/ProjectsMap/MapControls.tsx b/src/features/projectsV2/ProjectsMap/MapControls.tsx index 3a2b2a83f..cff064d58 100644 --- a/src/features/projectsV2/ProjectsMap/MapControls.tsx +++ b/src/features/projectsV2/ProjectsMap/MapControls.tsx @@ -11,7 +11,7 @@ import LayerIcon from '../../../../public/assets/images/icons/LayerIcon'; import LayerDisabled from '../../../../public/assets/images/icons/LayerDisabled'; import CrossIcon from '../../../../public/assets/images/icons/projectV2/CrossIcon'; import styles from '../ProjectsMap/ProjectsMap.module.scss'; -import { AllIntervention } from '../../../utils/constants/intervention'; +import { AllInterventions } from '../../../utils/constants/intervention'; interface MapControlsProps { isMobile: boolean; @@ -82,7 +82,7 @@ const MapControls = ({ const InterventionDropdownProps = { selectedIntervention, setSelectedIntervention, - allIntervention: AllIntervention, + allInterventions: AllInterventions, selectedPlantLocation, setSelectedPlantLocation, setSelectedSamplePlantLocation, diff --git a/src/utils/constants/intervention.ts b/src/utils/constants/intervention.ts index c252fb2b6..79b22e2f9 100644 --- a/src/utils/constants/intervention.ts +++ b/src/utils/constants/intervention.ts @@ -1,23 +1,23 @@ import { DataDrivenPropertyValueSpecification } from "maplibre-gl"; import { PlantLocation, PlantLocationMulti } from "../../features/common/types/plantLocation"; -export const SINGLE_TREE = '#007A49'; -export const MULTI_TREE = '#007A49'; -export const INVASIVE_SPECIES = '#EB5757'; -export const FIRE_SUPPRESSION = '#F2C94C'; -export const FIRE_PATROL = '#F2994A'; -export const FENCING = '#48AADD'; -export const MARKING_REGENERANT = '#27AE60'; -export const LIBERATING_REGENERANT = '#56CCF2'; -export const GRASS_SUPPRESSION = '#219653'; -export const FIREBREAKS = '#E86F56'; -export const SEED_RAIN = '#2F80ED'; -export const SOIL_IMPROVEMENT = '#6D4230'; -export const STOP_HARVESTING = '#4F4F4F'; -export const DIRECT_SEEDING = '#6FCF97'; -export const ENRICHMENT_PLANTING = '#EB67CE'; -export const MAINTENANCE = '#6C63FF'; -export const OTHER_INTERVENTION = '#9B51E0'; +const SINGLE_TREE = '#007A49'; +const MULTI_TREE = '#007A49'; +const INVASIVE_SPECIES = '#EB5757'; +const FIRE_SUPPRESSION = '#F2C94C'; +const FIRE_PATROL = '#F2994A'; +const FENCING = '#48AADD'; +const MARKING_REGENERANT = '#27AE60'; +const LIBERATING_REGENERANT = '#56CCF2'; +const GRASS_SUPPRESSION = '#219653'; +const FIREBREAKS = '#E86F56'; +const SEED_RAIN = '#2F80ED'; +const SOIL_IMPROVEMENT = '#6D4230'; +const STOP_HARVESTING = '#4F4F4F'; +const DIRECT_SEEDING = '#6FCF97'; +const ENRICHMENT_PLANTING = '#EB67CE'; +const MAINTENANCE = '#6C63FF'; +const OTHER_INTERVENTION = '#9B51E0'; export const FillColor: DataDrivenPropertyValueSpecification = [ 'match', @@ -45,7 +45,7 @@ export const FillColor: DataDrivenPropertyValueSpecification = [ export type INTERVENTION_TYPE = 'single-tree-registration' | 'multi-tree-registration' | 'removal-invasive-species' | 'fire-suppression' | 'fire-patrol' | 'fencing' | 'marking-regenerant' | 'liberating-regenerant' | 'grass-suppression' | 'firebreaks' | 'assisting-seed-rain' | 'soil-improvement' | 'stop-tree-harvesting' | 'direct-seeding' | 'enrichment-planting' | 'other-intervention' | 'maintenance' | 'unknown' | 'default' | 'all' -export const AllIntervention: Array<{ +export const AllInterventions: Array<{ label: string value: INTERVENTION_TYPE index: number @@ -58,45 +58,45 @@ export const AllIntervention: Array<{ { label: 'Single/Multi Tree Plantation', value: 'default', - index: 0, + index: 1, }, { label: 'Single Tree Plantation', value: 'single-tree-registration', - index: 0, + index: 2, }, - { label: 'Multi Tree Plantation', value: 'multi-tree-registration', index: 0 }, - { label: 'Fire Patrol', value: 'fire-patrol', index: 0 }, - { label: 'Fire Suppression Team', value: 'fire-suppression', index: 0 }, - { label: 'Establish Fire Breaks', value: 'firebreaks', index: 0 }, - { label: 'Fencing', value: 'fencing', index: 0 }, + { label: 'Multi Tree Plantation', value: 'multi-tree-registration', index: 3 }, + { label: 'Fire Patrol', value: 'fire-patrol', index: 4 }, + { label: 'Fire Suppression Team', value: 'fire-suppression', index: 5 }, + { label: 'Establish Fire Breaks', value: 'firebreaks', index: 6 }, + { label: 'Fencing', value: 'fencing', index: 7 }, { label: 'Removal of Invasive Species', value: 'removal-invasive-species', - index: 0, + index: 8, }, - { label: 'Direct Seeding', value: 'direct-seeding', index: 0 }, - { label: 'Grass Suppression', value: 'grass-suppression', index: 0 }, - { label: 'Marking Regenerant', value: 'marking-regenerant', index: 0 }, - { label: 'Enrichment Planting', value: 'enrichment-planting', index: 0 }, - { label: 'Liberating Regenerant', value: 'liberating-regenerant', index: 0 }, - { label: 'Soil Improvement', value: 'soil-improvement', index: 0 }, - { label: 'Assisting Seed Rain', value: 'assisting-seed-rain', index: 0 }, - { label: 'Stop Tree Harvesting', value: 'stop-tree-harvesting', index: 0 }, - { label: 'Maintenance', value: 'maintenance', index: 0 }, - { label: 'Other Intervention', value: 'other-intervention', index: 0 } + { label: 'Direct Seeding', value: 'direct-seeding', index: 9 }, + { label: 'Grass Suppression', value: 'grass-suppression', index: 10 }, + { label: 'Marking Regenerant', value: 'marking-regenerant', index: 11 }, + { label: 'Enrichment Planting', value: 'enrichment-planting', index: 12 }, + { label: 'Liberating Regenerant', value: 'liberating-regenerant', index: 13 }, + { label: 'Soil Improvement', value: 'soil-improvement', index: 14 }, + { label: 'Assisting Seed Rain', value: 'assisting-seed-rain', index: 15 }, + { label: 'Stop Tree Harvesting', value: 'stop-tree-harvesting', index: 16 }, + { label: 'Maintenance', value: 'maintenance', index: 17 }, + { label: 'Other Intervention', value: 'other-intervention', index: 18 } ] export const PLANTATION_TYPES = ['multi-tree-registration', 'single-tree-registration'] // Helper function with proper type checking -export const isNonPlantationType = (location: PlantLocation | null): boolean => { - return location !== null && !PLANTATION_TYPES.includes(location.type); +export const isNonPlantationType = (plantLocation: PlantLocation | null): boolean => { + return plantLocation !== null && !PLANTATION_TYPES.includes(plantLocation.type); }; export const findMatchingIntervention = (value: string) => { - return AllIntervention.find(item => item.value === value); + return AllInterventions.find(item => item.value === value); }; export const isPlantLocationMulti = (location: PlantLocation | null): location is PlantLocationMulti => { diff --git a/src/utils/mapsV2/zoomOut.tsx b/src/utils/mapsV2/zoomOut.tsx deleted file mode 100644 index 02cb8df4e..000000000 --- a/src/utils/mapsV2/zoomOut.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import type { ViewState } from 'react-map-gl-v7/maplibre'; -import type { MapRef } from '../../features/common/types/projectv2'; -import * as d3 from 'd3-ease'; - -export default function zoomOut( - handleViewStateChange: (viewState: Partial) => void, - mapRef: MapRef, - duration = 1000 -) { - if (!mapRef.current) { - return; - } - const map = mapRef.current.getMap ? mapRef.current.getMap() : mapRef.current; - - // Get current center coordinates - const center = map.getCenter(); - const newZoom = 12; - - map.flyTo({ - center: [center.lng, center.lat], - zoom: newZoom, - duration: duration, - easing: d3.easeCubic - }); - - // Update view state after animation completes - map.once('moveend', () => { - const newViewState: ViewState = { - longitude: center.lng, - latitude: center.lat, - zoom: newZoom, - bearing: 0, - pitch: 0, - padding: { - top: 0, - bottom: 0, - left: 0, - right: 0, - }, - }; - handleViewStateChange(newViewState); - }); -} \ No newline at end of file From 548994b1685bc824bfbe6bc582f8efe028afbc69 Mon Sep 17 00:00:00 2001 From: shyambhongle Date: Wed, 8 Jan 2025 15:26:38 +0530 Subject: [PATCH 36/39] code refactor --- .../components/OtherInterventionInfo.tsx | 11 ++++++----- .../microComponents/InterventionHeader.tsx | 2 +- .../microComponents/OtherInterventionHeader.tsx | 3 +-- .../styles/PlantLocationInfo.module.scss | 10 ++++++++++ src/features/projectsV2/ProjectsContext.tsx | 14 +++++++------- .../InterventionList.module.scss | 2 +- .../InterventionDropDown/InterventionList.tsx | 15 +++++++-------- .../ProjectsMap/InterventionDropDown/index.tsx | 15 +++++++-------- .../projectsV2/ProjectsMap/MapControls.tsx | 14 +++++++------- .../microComponents/PlantLocations.tsx | 8 ++++---- src/utils/constants/intervention.ts | 6 ------ 11 files changed, 51 insertions(+), 49 deletions(-) diff --git a/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx b/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx index 0a082741a..abb8ccbff 100644 --- a/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx +++ b/src/features/projectsV2/ProjectDetails/components/OtherInterventionInfo.tsx @@ -139,8 +139,9 @@ const OtherInterventionInfo = ({ const content = [ - , - shouldDisplayImageCarousel && ( + <> + + {shouldDisplayImageCarousel && ( - ), + )} + , , checkForPublicData.length > 0 && -
      +
      {findInterventionHeader(interventionType)}
      {formatHid(plHid)}
      diff --git a/src/features/projectsV2/ProjectDetails/components/microComponents/OtherInterventionHeader.tsx b/src/features/projectsV2/ProjectDetails/components/microComponents/OtherInterventionHeader.tsx index 2cadf61de..b283b9c4c 100644 --- a/src/features/projectsV2/ProjectDetails/components/microComponents/OtherInterventionHeader.tsx +++ b/src/features/projectsV2/ProjectDetails/components/microComponents/OtherInterventionHeader.tsx @@ -2,11 +2,10 @@ import formatDate from '../../../../../utils/countryCurrency/getFormattedDate'; import styles from '../../styles/PlantLocationInfo.module.scss'; interface Props { - type: string | undefined, plantDate: string | null | undefined; } -const OtherInterventionInfoHeader = ({ plantDate, type }: Props) => { +const OtherInterventionInfoHeader = ({ plantDate }: Props) => { return (
      ; - selectedIntervention: string; - setSelectedIntervention: SetState; + selectedInterventionType: string; + setSelectedInterventionType: SetState; disableInterventionMenu: boolean; setDisableInterventionMenu: SetState; } @@ -96,7 +96,7 @@ export const ProjectsProvider: FC = ({ const [hoveredPlantLocation, setHoveredPlantLocation] = useState(null); const [selectedSite, setSelectedSite] = useState(null); - const [selectedIntervention, setSelectedIntervention] = useState('all'); + const [selectedInterventionType, setSelectedInterventionType] = useState('all'); const [disableInterventionMenu, setDisableInterventionMenu] = useState(false); const [preventShallowPush, setPreventShallowPush] = useState(false); const [isLoading, setIsLoading] = useState(false); @@ -242,7 +242,7 @@ export const ProjectsProvider: FC = ({ setSingleProject(null); setHoveredPlantLocation(null); setSelectedSite(null); - setSelectedIntervention('all') + setSelectedInterventionType('all') setDisableInterventionMenu(false) setPreventShallowPush(false); setPlantLocations(null); @@ -448,9 +448,9 @@ export const ProjectsProvider: FC = ({ setSelectedSamplePlantLocation, selectedSite, setSelectedSite, - selectedIntervention, + selectedInterventionType, disableInterventionMenu, - setSelectedIntervention, + setSelectedInterventionType, setDisableInterventionMenu, setPreventShallowPush, }), @@ -471,7 +471,7 @@ export const ProjectsProvider: FC = ({ hoveredPlantLocation, selectedSite, preventShallowPush, - selectedIntervention, + selectedInterventionType, disableInterventionMenu ] ); diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.module.scss b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.module.scss index 490fdadff..bc2107d60 100644 --- a/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.module.scss +++ b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.module.scss @@ -53,7 +53,7 @@ $layoutPaddingSide: 20px; overflow: visible; } } -.siteListOptions { +.interventionListOptions { background-color: $backgroundColor; padding: 6px 17px; border-radius: 12px; diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx index 1507083c9..8ff452d88 100644 --- a/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx +++ b/src/features/projectsV2/ProjectsMap/InterventionDropDown/InterventionList.tsx @@ -11,28 +11,27 @@ type InterventionData = { }; interface InterventionListProps { interventionList: InterventionData[]; - setSelectedIntervention: SetState; + setSelectedInterventionType: SetState; setIsMenuOpen: SetState; - selectedSiteData: InterventionData | undefined; - selectedIntervention: string + selectedInterventionData: InterventionData | undefined; } const InterventionList = ({ interventionList, - setSelectedIntervention, + setSelectedInterventionType, setIsMenuOpen, - selectedSiteData, + selectedInterventionData, }: InterventionListProps) => { const handleFilterSelection = (key: string) => { setIsMenuOpen(false); - setSelectedIntervention(key); + setSelectedInterventionType(key); }; return ( -
        +
          {interventionList.map((intervention, index) => { return (
        • handleFilterSelection(intervention.value)} key={index} diff --git a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx index 6120d0dd2..a58adb923 100644 --- a/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx +++ b/src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx @@ -18,8 +18,8 @@ interface InterventionOptionType { interface Props { allInterventions: InterventionOptionType[]; - selectedIntervention: string; - setSelectedIntervention: SetState; + selectedInterventionType: string; + setSelectedInterventionType: SetState; isMobile?: boolean enableInterventionFilter: () => void disableInterventionMenu: boolean @@ -27,8 +27,8 @@ interface Props { const InterventionDropdown = ({ allInterventions, - selectedIntervention, - setSelectedIntervention, + selectedInterventionType, + setSelectedInterventionType, enableInterventionFilter, disableInterventionMenu, isMobile @@ -51,7 +51,7 @@ const InterventionDropdown = ({ } }, [disableInterventionMenu]) - const selectedSiteData = findMatchingIntervention(selectedIntervention) + const selectedSiteData = findMatchingIntervention(selectedInterventionType) const toggleMenu = () => { enableInterventionFilter() @@ -85,10 +85,9 @@ const InterventionDropdown = ({ {isMenuOpen && ( )} diff --git a/src/features/projectsV2/ProjectsMap/MapControls.tsx b/src/features/projectsV2/ProjectsMap/MapControls.tsx index cff064d58..d392d03f9 100644 --- a/src/features/projectsV2/ProjectsMap/MapControls.tsx +++ b/src/features/projectsV2/ProjectsMap/MapControls.tsx @@ -47,8 +47,8 @@ const MapControls = ({ selectedSamplePlantLocation, setSelectedPlantLocation, setSelectedSamplePlantLocation, - selectedIntervention, - setSelectedIntervention, + selectedInterventionType, + setSelectedInterventionType, disableInterventionMenu, setDisableInterventionMenu, } = useProjects(); @@ -79,9 +79,9 @@ const MapControls = ({ disableInterventionMenu }; - const InterventionDropdownProps = { - selectedIntervention, - setSelectedIntervention, + const interventionDropDownProps = { + selectedInterventionType, + setSelectedInterventionType, allInterventions: AllInterventions, selectedPlantLocation, setSelectedPlantLocation, @@ -135,7 +135,7 @@ const MapControls = ({ {hasProjectSites && ( <> - + )}