[Tableau de bord] Ajout du formulaire de dessin de la zone et de la récupération des informations issue de la geometrie du dessin

backend/src/main/kotlin/fr/gouv/cacem/monitorenv/infrastructure/api/adapters/bff/outputs/ExtractAreaDataOutput.kt → backend/src/main/kotlin/fr/gouv/cacem/monitorenv/infrastructure/api/adapters/bff/outputs/ExtractedAreaDataOutput.kt

@@ -6,16 +6,16 @@ import fr.gouv.cacem.monitorenv.infrastructure.api.adapters.bff.outputs.Regulato
 import fr.gouv.cacem.monitorenv.infrastructure.api.adapters.bff.outputs.reportings.ReportingDataOutput
 import fr.gouv.cacem.monitorenv.infrastructure.api.adapters.bff.outputs.vigilanceArea.VigilanceAreaDataOutput
 
-class ExtractAreaDataOutput(
+class ExtractedAreaDataOutput(
     val inseeCode: String?,
     val reportings: List<ReportingDataOutput>,
     val regulatoryAreas: List<RegulatoryAreaDataOutput>,
     val amps: List<AMPDataOutput>,
     val vigilanceAreas: List<VigilanceAreaDataOutput>,
 ) {
     companion object {
-        fun fromExtractAreaEntity(extractedAreaEntity: ExtractedAreaEntity): ExtractAreaDataOutput {
-            return ExtractAreaDataOutput(
+        fun fromExtractAreaEntity(extractedAreaEntity: ExtractedAreaEntity): ExtractedAreaDataOutput {
+            return ExtractedAreaDataOutput(
                 inseeCode = extractedAreaEntity.inseeCode,
                 reportings = extractedAreaEntity.reportings.map { ReportingDataOutput.fromReportingDTO(it) },
                 regulatoryAreas = extractedAreaEntity.regulatoryAreas.map { fromRegulatoryAreaEntity(it) },

backend/src/main/kotlin/fr/gouv/cacem/monitorenv/infrastructure/api/endpoints/bff/v1/Dashboard.kt

@@ -1,8 +1,8 @@
 package fr.gouv.cacem.monitorenv.infrastructure.api.endpoints.bff.v1
 
 import fr.gouv.cacem.monitorenv.domain.use_cases.dashboard.ExtractArea
-import fr.gouv.cacem.monitorenv.infrastructure.api.adapters.bff.outputs.ExtractAreaDataOutput
-import fr.gouv.cacem.monitorenv.infrastructure.api.adapters.bff.outputs.ExtractAreaDataOutput.Companion.fromExtractAreaEntity
+import fr.gouv.cacem.monitorenv.infrastructure.api.adapters.bff.outputs.ExtractedAreaDataOutput
+import fr.gouv.cacem.monitorenv.infrastructure.api.adapters.bff.outputs.ExtractedAreaDataOutput.Companion.fromExtractAreaEntity
 import io.swagger.v3.oas.annotations.Operation
 import io.swagger.v3.oas.annotations.tags.Tag
 import org.locationtech.jts.io.WKTReader
@@ -18,7 +18,7 @@ class Dashboard(private val extractArea: ExtractArea) {
 
     @GetMapping("/extract")
     @Operation(summary = "Extract all data that intercept the given geometry")
-    fun get(@RequestParam(name = "geometry") pGeometry: String): ExtractAreaDataOutput {
+    fun get(@RequestParam(name = "geometry") pGeometry: String): ExtractedAreaDataOutput {
         val wktReader = WKTReader()
         val geometry = wktReader.read(pGeometry)
         return fromExtractAreaEntity(extractArea.execute(geometry = geometry))

frontend/cypress/e2e/main_window/dashboard/dashboard.spec.ts

@@ -0,0 +1,38 @@
+import { FAKE_MAPBOX_RESPONSE } from '../../constants'
+
+context('Dashboard', () => {
+  beforeEach(() => {
+    cy.intercept('GET', 'https://api.mapbox.com/**', FAKE_MAPBOX_RESPONSE)
+    cy.visit('/#@-394744.20,6104201.66,8.72')
+    Cypress.env('CYPRESS_FRONTEND_DASHBOARD_ENABLED', 'true')
+  })
+
+  describe('dashboard', () => {
+    it('should extract insee code, amps, regulatory and vigilance areas from the given geometry', () => {
+      cy.intercept('GET', `/bff/v1/dashboard/extract?geometry=*`).as('extractAreas')
+
+      // When
+      cy.clickButton('Voir les briefs pour les unités')
+
+      cy.clickButton('Créer un tableau de bord')
+      cy.get('#root').click(490, 550)
+      cy.get('#root').click(900, 550)
+
+      cy.clickButton('Créer le tableau')
+
+      // Then
+      cy.wait('@extractAreas').then(({ response }) => {
+        if (!response) {
+          assert.fail('response is undefined.')
+        }
+        const body = response.body
+
+        expect(body.inseeCode).equal('29')
+        expect(body.regulatoryAreas.length).equal(13)
+        expect(body.amps.length).equal(4)
+        expect(body.reportings.length).equal(6)
+        expect(body.vigilanceAreas.length).equal(2)
+      })
+    })
+  })
+})

frontend/cypress/e2e/main_window/dashboard/dashboard_feature_flag.spec.ts

@@ -0,0 +1,15 @@
+import { FAKE_MAPBOX_RESPONSE } from '../../constants'
+
+context('Dashboard', () => {
+  beforeEach(() => {
+    cy.intercept('GET', 'https://api.mapbox.com/**', FAKE_MAPBOX_RESPONSE)
+    cy.visit('/#@-394744.20,6104201.66,8.72')
+    Cypress.env('CYPRESS_FRONTEND_DASHBOARD_ENABLED', 'false')
+  })
+
+  describe('dashboard menu button', () => {
+    it('should not appear when feature is disable', () => {
+      cy.getDataCy('dashboard').should('not.exist')
+    })
+  })
+})

frontend/src/api/api.ts

@@ -38,7 +38,7 @@ export const monitorenvPrivateApi = createApi({
   },
   endpoints: () => ({}),
   reducerPath: 'monitorenvPrivateApi',
-  tagTypes: ['Missions', 'Reportings', 'VigilanceAreas']
+  tagTypes: ['Missions', 'Reportings', 'VigilanceAreas', 'Dashboards']
 })
 
 // =============================================================================

frontend/src/api/dashboardsAPI.ts

@@ -0,0 +1,19 @@
+import { GET_EXTRACTED_AREAS_ERROR_MESSAGE } from '@features/Dashboard/useCases/createDashboard'
+import { FrontendApiError } from '@libs/FrontendApiError'
+import { geoJsonToWKT } from '@utils/geojsonToWKT'
+
+import { monitorenvPrivateApi } from './api'
+
+import type { Dashboard } from '@features/Dashboard/types'
+import type { GeoJSON } from 'domain/types/GeoJSON'
+
+export const dashboardsAPI = monitorenvPrivateApi.injectEndpoints({
+  endpoints: build => ({
+    getExtratedArea: build.query<Dashboard.ExtractedArea, GeoJSON.Geometry>({
+      query: geometry => `/v1/dashboard/extract?geometry=${geoJsonToWKT(geometry)}`,
+      transformErrorResponse: response => new FrontendApiError(GET_EXTRACTED_AREAS_ERROR_MESSAGE, response)
+    })
+  })
+})
+
+export const { useGetExtratedAreaQuery } = dashboardsAPI

frontend/src/api/regulatoryLayersAPI.ts

@@ -5,14 +5,14 @@ import { boundingExtent, createEmpty } from 'ol/extent'
 import { createCachedSelector } from 're-reselect'
 
 import { monitorenvPrivateApi } from './api'
-import { getSelectedRegulatoryLayerIds } from '../domain/shared_slices/Regulatory'
 
 import type {
-  RegulatoryLayerWithMetadata,
-  RegulatoryLayerWithMetadataFromAPI,
   RegulatoryLayerCompact,
-  RegulatoryLayerCompactFromAPI
+  RegulatoryLayerCompactFromAPI,
+  RegulatoryLayerWithMetadata,
+  RegulatoryLayerWithMetadataFromAPI
 } from '../domain/entities/regulatory'
+import type { HomeRootState } from '@store/index'
 import type { Coordinate } from 'ol/coordinate'
 
 const GET_REGULATORY_LAYER_ERROR_MESSAGE = "Nous n'avons pas pu récupérer la zones réglementaire"
@@ -58,7 +58,10 @@ export const regulatoryLayersAPI = monitorenvPrivateApi.injectEndpoints({
 export const { useGetRegulatoryLayerByIdQuery, useGetRegulatoryLayersQuery } = regulatoryLayersAPI
 
 export const getSelectedRegulatoryLayers = createSelector(
-  [regulatoryLayersAPI.endpoints.getRegulatoryLayers.select(), getSelectedRegulatoryLayerIds],
+  [
+    regulatoryLayersAPI.endpoints.getRegulatoryLayers.select(),
+    (state: HomeRootState) => state.regulatory.selectedRegulatoryLayerIds
+  ],
   (regulatoryLayers, selectedRegulatoryLayerIds) => {
     const emptyArray = []
 

frontend/src/components/Menu.tsx

@@ -1,6 +1,6 @@
 import { Account } from '@features/Account/components/Account'
 import { ControlUnitListButton } from '@features/ControlUnit/components/ControlUnitListButton'
-import { DashboardMapButton } from '@features/Dashboard/components/DashboardMapButton'
+import { DashboardMenuButton } from '@features/Dashboard/components/MenuButton'
 import { InterestPointMapButton } from '@features/InterestPoint/components/InterestPointMapButton'
 import { MeasurementMapButton } from '@features/map/tools/measurements/MeasurementMapButton'
 import { MissionsMenu } from '@features/missions/MissionsButton'
@@ -52,7 +52,7 @@ export function Menu({ isSuperUser }: MenuProps) {
       )}
       {displayDashboard && isSuperUser && (
         <li>
-          <DashboardMapButton />
+          <DashboardMenuButton />
         </li>
       )}
 

frontend/src/domain/entities/layers/constants.ts

@@ -26,6 +26,7 @@ export enum MonitorEnvLayers {
   AMP_PREVIEW = 'AMP_PREVIEW',
   BASE_LAYER = 'BASE_LAYER',
   COMPETENCE_CROSS_AREA = 'COMPETENCE_CROSS_AREA',
+  DASHBOARD = 'DASHBOARD',
   DEPARTMENTS = 'DEPARTMENTS',
   DRAW = 'DRAW',
   DRAW_VIGILANCE_AREA = 'DRAW_VIGILANCE_AREA',
@@ -274,6 +275,10 @@ export const Layers: Record<MonitorEnvLayers, Layer> = {
     code: MonitorEnvLayers.AMP_LINKED_TO_VIGILANCE_AREA,
     zIndex: 1400
   },
+  [MonitorEnvLayers.DASHBOARD]: {
+    code: MonitorEnvLayers.DASHBOARD,
+    zIndex: 1300
+  },
   [MonitorEnvLayers.AERA_ICON]: {
     code: MonitorEnvLayers.AERA_ICON
   }
@@ -313,7 +318,8 @@ export const SelectableLayers0To7 = [
     MonitorEnvLayers.VIGILANCE_AREA_PREVIEW,
     MonitorEnvLayers.REGULATORY_AREAS_LINKED_TO_VIGILANCE_AREA,
     MonitorEnvLayers.AMP_LINKED_TO_VIGILANCE_AREA
-  ]
+  ],
+  [MonitorEnvLayers.DASHBOARD]
 ]
 
 export const SelectableLayers7To26 = [
@@ -332,7 +338,8 @@ export const SelectableLayers7To26 = [
     MonitorEnvLayers.VIGILANCE_AREA_PREVIEW,
     MonitorEnvLayers.REGULATORY_AREAS_LINKED_TO_VIGILANCE_AREA,
     MonitorEnvLayers.AMP_LINKED_TO_VIGILANCE_AREA
-  ]
+  ],
+  [MonitorEnvLayers.DASHBOARD]
 ]
 
 // Priority of hoverable items is determined by the order of the layers in this array
@@ -350,7 +357,8 @@ export const HoverableLayers0To7 = [
   [MonitorEnvLayers.STATIONS],
   [MonitorEnvLayers.VIGILANCE_AREA],
   [MonitorEnvLayers.REGULATORY_AREAS_LINKED_TO_VIGILANCE_AREA],
-  [MonitorEnvLayers.AMP_LINKED_TO_VIGILANCE_AREA]
+  [MonitorEnvLayers.AMP_LINKED_TO_VIGILANCE_AREA],
+  [MonitorEnvLayers.DASHBOARD]
 ]
 
 export const HoverableLayers7To26 = [
@@ -370,7 +378,8 @@ export const HoverableLayers7To26 = [
     MonitorEnvLayers.VIGILANCE_AREA_PREVIEW,
     MonitorEnvLayers.REGULATORY_AREAS_LINKED_TO_VIGILANCE_AREA,
     MonitorEnvLayers.AMP_LINKED_TO_VIGILANCE_AREA
-  ]
+  ],
+  [MonitorEnvLayers.DASHBOARD]
 ]
 
 export type RegulatoryOrAMPOrViglanceAreaLayerType =

frontend/src/domain/shared_slices/Regulatory.ts

@@ -1,10 +1,8 @@
-import { createSelector, createSlice, type PayloadAction } from '@reduxjs/toolkit'
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
 import _ from 'lodash'
 import { persistReducer } from 'redux-persist'
 import storage from 'redux-persist/lib/storage'
 
-import type { HomeRootState } from '../../store'
-
 const persistConfig = {
   key: 'regulatory',
   storage,
@@ -81,8 +79,3 @@ export const {
 } = regulatorySlice.actions
 
 export const regulatorySlicePersistedReducer = persistReducer(persistConfig, regulatorySlice.reducer)
-
-export const getSelectedRegulatoryLayerIds = createSelector(
-  [(state: HomeRootState) => state.regulatory.selectedRegulatoryLayerIds],
-  selectedRegulatoryLayerIds => selectedRegulatoryLayerIds
-)

frontend/src/domain/use_cases/map/updateMapInteractionListeners.ts

@@ -49,6 +49,7 @@ export const updateMapInteractionListeners = (listener: MapInteractionListenerEn
 const openDrawLayerModal = (dispatch, displayLayersSidebar = true) => {
   dispatch(
     setDisplayedItems({
+      displayDashboard: false,
       displayDrawModal: true,
       displayInterestPoint: false,
       displayLayersSidebar,

frontend/src/features/Dashboard/components/DashboardForm/index.tsx

@@ -1,7 +1,12 @@
+import { useAppSelector } from '@hooks/useAppSelector'
+
 export function DashboardForm() {
+  const extractedArea = useAppSelector(state => state.dashboard.extractedArea)
+
   return (
     <div>
       <h1>Dashboard Form</h1>
+      {JSON.stringify(extractedArea)}
     </div>
   )
 }