[Brief] Ajout de la vue globale des zones sélectionnées

frontend/src/features/Dashboard/components/DashboardForm/slice.ts

@@ -1,6 +1,6 @@
 import { createSelector, createSlice, type PayloadAction } from '@reduxjs/toolkit'
 import { DateRangeEnum } from 'domain/entities/dateRange'
-import { ReportingTypeLabels, StatusFilterEnum } from 'domain/entities/reporting'
+import { ReportingTypeEnum, StatusFilterEnum } from 'domain/entities/reporting'
 import { set } from 'lodash'
 import { persistReducer } from 'redux-persist'
 import storage from 'redux-persist/lib/storage'
@@ -80,7 +80,7 @@ export const dashboardFiltersSlice = createSlice({
         reportingFilters: {
           dateRange: DateRangeEnum.MONTH,
           status: [StatusFilterEnum.IN_PROGRESS],
-          type: ReportingTypeLabels.INFRACTION_SUSPICION
+          type: ReportingTypeEnum.INFRACTION_SUSPICION
         }
       }
     },

frontend/src/features/Dashboard/components/Pdf/v1/Brief.tsx

@@ -1,7 +1,3 @@
-/* eslint-disable import/no-absolute-path */
-
-// TODO (04/11/2024) : use monitor-ui fonts instead of imported/duplicated ones
-
 import { Document, Page, View } from '@react-pdf/renderer'
 
 import { Amps } from './Amps'
@@ -40,22 +36,42 @@ export function Brief({ author, brief, description, title }: BriefProps) {
           <Reportings reportings={brief.reportings} subThemes={brief.subThemes} themes={brief.themes} />
         </View>
         <View style={layoutStyle.section}>
-          <AreaTable amps={brief.amps} regulatoryAreas={brief.regulatoryAreas} vigilanceAreas={brief.vigilanceAreas} />
-        </View>
-        <View style={layoutStyle.section}>
-          <RegulatoryAreas regulatoryAreas={brief.regulatoryAreas} />
-        </View>
-        <View style={layoutStyle.section}>
-          <Amps amps={brief.amps} />
-        </View>
-        <View style={layoutStyle.section}>
-          <VigilanceAreas
-            linkedAMPs={brief.allLinkedAMPs}
-            linkedRegulatoryAreas={brief.allLinkedRegulatoryAreas}
+          <AreaTable
+            amps={brief.amps}
+            image={brief.images?.find(image => image.featureId === 'WHOLE_DASHBOARD')}
+            regulatoryAreas={brief.regulatoryAreas}
             vigilanceAreas={brief.vigilanceAreas}
           />
         </View>
       </Page>
+      {brief.regulatoryAreas.length > 0 && (
+        <Page style={layoutStyle.page}>
+          <Headings name={brief.name} />
+          <View style={layoutStyle.section}>
+            <RegulatoryAreas regulatoryAreas={brief.regulatoryAreas} />
+          </View>
+        </Page>
+      )}
+      {brief.amps.length > 0 && (
+        <Page style={layoutStyle.page}>
+          <Headings name={brief.name} />
+          <View style={layoutStyle.section}>
+            <Amps amps={brief.amps} />
+          </View>
+        </Page>
+      )}
+      {brief.vigilanceAreas.length > 0 && (
+        <Page style={layoutStyle.page}>
+          <Headings name={brief.name} />
+          <View style={layoutStyle.section}>
+            <VigilanceAreas
+              linkedAMPs={brief.allLinkedAMPs}
+              linkedRegulatoryAreas={brief.allLinkedRegulatoryAreas}
+              vigilanceAreas={brief.vigilanceAreas}
+            />
+          </View>
+        </Page>
+      )}
     </Document>
   )
 }

frontend/src/features/Dashboard/components/Pdf/v1/GeneratePdfButton.tsx

@@ -3,6 +3,7 @@ import { getControlUnitsByIds } from '@api/controlUnitsAPI'
 import { getRegulatoryAreasByIds } from '@api/regulatoryLayersAPI'
 import { useGetReportingsByIdsQuery } from '@api/reportingsAPI'
 import { getVigilanceAreasByIds } from '@api/vigilanceAreasAPI'
+import { useExportImages } from '@features/Dashboard/hooks/useExportImages'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { useGetControlPlans } from '@hooks/useGetControlPlans'
 import { Button, Icon } from '@mtes-mct/monitor-ui'
@@ -45,14 +46,16 @@ export function GeneratePdfButton({ dashboard }: GeneratePdfButtonProps) {
 
   const allLinkedAMPs = useAppSelector(state => getAmpsByIds(state, allLinkedAMPIds))
 
+  const { images, loading } = useExportImages({ triggerExport: shouldTriggerExport })
+
   const brief: Dashboard.Brief = useMemo(
     () => ({
       allLinkedAMPs,
       allLinkedRegulatoryAreas,
       amps,
       comments: dashboard.comments,
       controlUnits,
-      images: [],
+      images,
       name: dashboard.name,
       regulatoryAreas,
       reportings: Object.values(reportings?.entities ?? []),
@@ -69,6 +72,7 @@ export function GeneratePdfButton({ dashboard }: GeneratePdfButtonProps) {
       dashboard.name,
       dashboard.updatedAt,
       controlUnits,
+      images,
       regulatoryAreas,
       reportings?.entities,
       subThemes,
@@ -83,7 +87,7 @@ export function GeneratePdfButton({ dashboard }: GeneratePdfButtonProps) {
 
   useEffect(() => {
     const renderPdf = async () => {
-      if (shouldTriggerExport) {
+      if (brief.images && !loading && shouldTriggerExport) {
         setIsOpening(true)
 
         const blob = await renderPDFV1({ brief })
@@ -102,7 +106,7 @@ export function GeneratePdfButton({ dashboard }: GeneratePdfButtonProps) {
       }
     }
     renderPdf()
-  }, [brief, dashboard.name, shouldTriggerExport])
+  }, [brief, dashboard.name, loading, shouldTriggerExport])
 
   const getLoadingText = () => {
     if (isOpening) {

frontend/src/features/Dashboard/components/Pdf/v1/Table/index.tsx

@@ -1,8 +1,9 @@
 import { THEME } from '@mtes-mct/monitor-ui'
-import { StyleSheet, Text, View } from '@react-pdf/renderer'
+import { StyleSheet, Text, View, Image } from '@react-pdf/renderer'
 
 import { layoutStyle } from '../style'
 
+import type { ExportImageType } from '@features/Dashboard/hooks/useExportImages'
 import type { VigilanceArea } from '@features/VigilanceArea/types'
 import type { AMPFromAPI } from 'domain/entities/AMPs'
 import type { RegulatoryLayerWithMetadata } from 'domain/entities/regulatory'
@@ -35,7 +36,8 @@ const styles = StyleSheet.create({
   },
   table: {
     display: 'flex',
-    flexDirection: 'column'
+    flexDirection: 'column',
+    paddingBottom: 36
   },
   vigilanceArea: {
     backgroundColor: '#D6DF64',
@@ -45,10 +47,12 @@ const styles = StyleSheet.create({
 
 export function AreaTable({
   amps,
+  image,
   regulatoryAreas,
   vigilanceAreas
 }: {
   amps: AMPFromAPI[]
+  image: ExportImageType | undefined
   regulatoryAreas: RegulatoryLayerWithMetadata[]
   vigilanceAreas: VigilanceArea.VigilanceArea[]
 }) {
@@ -60,6 +64,7 @@ export function AreaTable({
           {amps.length + regulatoryAreas.length + vigilanceAreas.length} sélectionnée(s)
         </Text>
       </View>
+
       <View style={styles.table}>
         <View style={styles.headers}>
           <View style={[styles.regulatoryArea, styles.header]}>
@@ -100,6 +105,7 @@ export function AreaTable({
           </View>
         </View>
       </View>
+      {image && <Image src={image.image} />}
     </>
   )
 }

frontend/src/features/Dashboard/components/Pdf/v1/style.ts

@@ -102,7 +102,7 @@ export const areaStyle = StyleSheet.create({
     borderRadius: 1,
     borderStyle: 'solid',
     borderWidth: 1,
-    fontSize: 5.5,
+    fontSize: 6.8,
     width: '30%'
   },
   content: {

frontend/src/features/Dashboard/components/Pdf/v2/Table/index.tsx

@@ -36,7 +36,8 @@ const styles = StyleSheet.create({
   },
   table: {
     display: 'flex',
-    flexDirection: 'column'
+    flexDirection: 'column',
+    paddingBottom: 36
   },
   vigilanceArea: {
     backgroundColor: '#D6DF64',
@@ -103,7 +104,7 @@ export function AreaTable({
           </View>
         </View>
       </View>
-      {image && <Image src={image.image} style={{ marginTop: 4.3 }} />}
+      {image && <Image src={image.image} />}
     </>
   )
 }

frontend/src/features/Dashboard/components/Pdf/v2/style.ts

@@ -101,7 +101,7 @@ export const areaStyle = StyleSheet.create({
     borderRadius: 1,
     borderStyle: 'solid',
     borderWidth: 1,
-    fontSize: 5.5,
+    fontSize: 6.8,
     left: 10,
     position: 'absolute',
     top: 10,

frontend/src/features/Dashboard/hooks/useExportImages.tsx

@@ -80,6 +80,8 @@ type ExportLayerProps = {
 }
 
 export function useExportImages({ triggerExport }: ExportLayerProps) {
+  const isBriefWithImagesEnabled = import.meta.env.FRONTEND_DASHBOARD_BRIEF_IMAGES_ENABLED === 'true'
+
   const [images, setImages] = useState<ExportImageType[]>()
   const [loading, setLoading] = useState(false)
   const mapRef = useRef(null) as MutableRefObject<OpenLayerMap | null>
@@ -169,29 +171,35 @@ export function useExportImages({ triggerExport }: ExportLayerProps) {
         return allImages
       }
 
-      // eslint-disable-next-line no-restricted-syntax
-      for (const feature of features) {
-        mapContext.clearRect(0, 0, mapCanvas.width, mapCanvas.height)
-        layersVectorSourceRef.current.clear()
-        layersVectorSourceRef.current.addFeature(feature)
-
+      if (isBriefWithImagesEnabled) {
+        // eslint-disable-next-line no-restricted-syntax
+        for (const feature of features) {
+          mapContext.clearRect(0, 0, mapCanvas.width, mapCanvas.height)
+          layersVectorSourceRef.current.clear()
+          layersVectorSourceRef.current.addFeature(feature)
+
+          dashboardFeature.setStyle([measurementStyle, measurementStyleWithCenter])
+          layersVectorSourceRef.current.addFeature(dashboardFeature)
+
+          // eslint-disable-next-line no-await-in-loop
+          await zoomToFeatures([dashboardFeature, feature])
+
+          mapRef.current
+            .getViewport()
+            .querySelectorAll('canvas')
+            .forEach(canvas => {
+              mapContext.drawImage(canvas, 0, 0)
+              allImages.push({
+                featureId: feature.getId(),
+                image: mapCanvas.toDataURL('image/png')
+              })
+            })
+        }
+      } else {
         dashboardFeature.setStyle([measurementStyle, measurementStyleWithCenter])
         layersVectorSourceRef.current.addFeature(dashboardFeature)
-
-        // eslint-disable-next-line no-await-in-loop
-        await zoomToFeatures([dashboardFeature, feature])
-
-        mapRef.current
-          .getViewport()
-          .querySelectorAll('canvas')
-          .forEach(canvas => {
-            mapContext.drawImage(canvas, 0, 0)
-            allImages.push({
-              featureId: feature.getId(),
-              image: mapCanvas.toDataURL('image/png')
-            })
-          })
       }
+
       extractReportingFeatures(features)
 
       layersVectorSourceRef.current.clear(true)
@@ -213,7 +221,7 @@ export function useExportImages({ triggerExport }: ExportLayerProps) {
 
       return allImages
     },
-    [extractReportingFeatures]
+    [extractReportingFeatures, isBriefWithImagesEnabled]
   )
 
   useEffect(() => {
@@ -242,6 +250,7 @@ export function useExportImages({ triggerExport }: ExportLayerProps) {
     const generateImages = async () => {
       setLoading(true)
       const allImages = await exportImages(features, dashboardFeature)
+
       setImages(allImages)
       setLoading(false)
     }