diff --git a/frontend/src/features/Dashboard/components/DashboardForm/slice.ts b/frontend/src/features/Dashboard/components/DashboardForm/slice.ts
index b3c98d53e..04e0f5551 100644
--- a/frontend/src/features/Dashboard/components/DashboardForm/slice.ts
+++ b/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
}
}
},
diff --git a/frontend/src/features/Dashboard/components/Pdf/v1/Brief.tsx b/frontend/src/features/Dashboard/components/Pdf/v1/Brief.tsx
index 69cd9a6c2..ecd057080 100644
--- a/frontend/src/features/Dashboard/components/Pdf/v1/Brief.tsx
+++ b/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) {
-
-
-
-
-
-
-
-
-
- image.featureId === 'WHOLE_DASHBOARD')}
+ regulatoryAreas={brief.regulatoryAreas}
vigilanceAreas={brief.vigilanceAreas}
/>
+ {brief.regulatoryAreas.length > 0 && (
+
+
+
+
+
+
+ )}
+ {brief.amps.length > 0 && (
+
+
+
+
+
+
+ )}
+ {brief.vigilanceAreas.length > 0 && (
+
+
+
+
+
+
+ )}
)
}
diff --git a/frontend/src/features/Dashboard/components/Pdf/v1/GeneratePdfButton.tsx b/frontend/src/features/Dashboard/components/Pdf/v1/GeneratePdfButton.tsx
index 03fa61d7d..eda9015fd 100644
--- a/frontend/src/features/Dashboard/components/Pdf/v1/GeneratePdfButton.tsx
+++ b/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,6 +46,8 @@ export function GeneratePdfButton({ dashboard }: GeneratePdfButtonProps) {
const allLinkedAMPs = useAppSelector(state => getAmpsByIds(state, allLinkedAMPIds))
+ const { images, loading } = useExportImages({ triggerExport: shouldTriggerExport })
+
const brief: Dashboard.Brief = useMemo(
() => ({
allLinkedAMPs,
@@ -52,7 +55,7 @@ export function GeneratePdfButton({ dashboard }: GeneratePdfButtonProps) {
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) {
diff --git a/frontend/src/features/Dashboard/components/Pdf/v1/Table/index.tsx b/frontend/src/features/Dashboard/components/Pdf/v1/Table/index.tsx
index 2d72d9a8e..7b854026a 100644
--- a/frontend/src/features/Dashboard/components/Pdf/v1/Table/index.tsx
+++ b/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)
+
@@ -100,6 +105,7 @@ export function AreaTable({
+ {image && }
>
)
}
diff --git a/frontend/src/features/Dashboard/components/Pdf/v1/style.ts b/frontend/src/features/Dashboard/components/Pdf/v1/style.ts
index 2b01aae47..d2128be0f 100644
--- a/frontend/src/features/Dashboard/components/Pdf/v1/style.ts
+++ b/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: {
diff --git a/frontend/src/features/Dashboard/components/Pdf/v2/Table/index.tsx b/frontend/src/features/Dashboard/components/Pdf/v2/Table/index.tsx
index 2ac864eba..eea9ac15a 100644
--- a/frontend/src/features/Dashboard/components/Pdf/v2/Table/index.tsx
+++ b/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({
- {image && }
+ {image && }
>
)
}
diff --git a/frontend/src/features/Dashboard/components/Pdf/v2/style.ts b/frontend/src/features/Dashboard/components/Pdf/v2/style.ts
index fa25db64c..1529348c2 100644
--- a/frontend/src/features/Dashboard/components/Pdf/v2/style.ts
+++ b/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,
diff --git a/frontend/src/features/Dashboard/hooks/useExportImages.tsx b/frontend/src/features/Dashboard/hooks/useExportImages.tsx
index dd749d908..521136245 100644
--- a/frontend/src/features/Dashboard/hooks/useExportImages.tsx
+++ b/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()
const [loading, setLoading] = useState(false)
const mapRef = useRef(null) as MutableRefObject
@@ -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)
}