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) }