Skip to content

Commit

Permalink
Brief: add images to pdf
Browse files Browse the repository at this point in the history
  • Loading branch information
@maximeperrault
maximeperrault committed Dec 23, 2024
1 parent 7503b47 commit 49c7ae6
Show file tree
Hide file tree
Showing 11 changed files with 434 additions and 764 deletions.
377 changes: 216 additions & 161 deletions frontend/src/features/Dashboard/components/Layers/ExportLayer.tsx
View file

Large diffs are not rendered by default.

410 changes: 0 additions & 410 deletions frontend/src/features/Dashboard/components/Layers/ExportLayer2.tsx
View file

This file was deleted.

73 changes: 44 additions & 29 deletions frontend/src/features/Dashboard/components/Pdf/Amps/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,25 @@
import { Dashboard } from '@features/Dashboard/types'
import { THEME } from '@mtes-mct/monitor-ui'
import { Link, Text, View } from '@react-pdf/renderer'
import { Image, Link, Text, View } from '@react-pdf/renderer'
import { getTitle } from 'domain/entities/layers/utils'

import { areaStyle, layoutStyle } from '../style'

import type { ExportImageType } from '../../Layers/ExportLayer'
import type { AMPFromAPI } from 'domain/entities/AMPs'

export function Amps({ amps }: { amps: AMPFromAPI[] }) {
export function Amps({ amps, images }: { amps: AMPFromAPI[]; images: ExportImageType[] }) {
function getImage(amp: AMPFromAPI): string | undefined {
return images.find(image => {
if (!image.featureId) {
return false
}
const [type, id] = `${image.featureId}`.split(':')

return type === Dashboard.featuresCode[Dashboard.Layer.DASHBOARD_AMP] && id && amp.id === +id
})?.image
}

return (
<>
<View style={layoutStyle.header}>
Expand All @@ -15,38 +28,40 @@ export function Amps({ amps }: { amps: AMPFromAPI[] }) {
</View>
<View style={layoutStyle.cardWrapper}>
{amps.map(amp => (
<View key={amp.id} style={areaStyle.card} wrap={false}>
<View style={areaStyle.header}>
<Text> {getTitle(amp.name)}</Text>
</View>
<View style={areaStyle.content}>
<View style={[layoutStyle.row]}>
<View style={areaStyle.description}>
<Text>Nature d&apos;AMP</Text>
</View>
<View style={areaStyle.details}>
<Text>{amp.designation || '-'}</Text>
</View>
<View key={amp.id} style={areaStyle.wrapper} wrap={false}>
<View style={areaStyle.card}>
<View style={areaStyle.header}>
<Text> {getTitle(amp.name)}</Text>
</View>
</View>
{amp.url_legicem && (
<View style={[areaStyle.content, { borderTop: `1 solid ${THEME.color.gainsboro}` }]}>
<View>
<Text style={[areaStyle.description, { width: 'auto' }]}>Résumé réglementaire sur Légicem</Text>
</View>
<View style={(layoutStyle.row, { fontSize: 5.5, marginTop: 3.4, position: 'relative' })}>
<View style={{ fontSize: 10, left: 3, position: 'absolute', top: -3 }}>
<Text>→</Text>
<View style={areaStyle.content}>
<View style={[layoutStyle.row]}>
<View style={areaStyle.description}>
<Text>Nature d&apos;AMP</Text>
</View>
<View style={{ paddingLeft: 18 }}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<Link src={amp.url_legicem}>
<Text>{amp.ref_reg}</Text>
</Link>
<View style={areaStyle.details}>
<Text>{amp.designation || '-'}</Text>
</View>
</View>
</View>
)}
{amp.url_legicem && (
<View style={[areaStyle.content, { borderTop: `1 solid ${THEME.color.gainsboro}` }]}>
<View>
<Text style={[areaStyle.description, { width: 'auto' }]}>Résumé réglementaire sur Légicem</Text>
</View>
<View style={(layoutStyle.row, { fontSize: 5.5, marginTop: 3.4, position: 'relative' })}>
<View style={{ fontSize: 10, left: 3, position: 'absolute', top: -3 }}>
<Text>→</Text>
</View>
<View style={{ paddingLeft: 18 }}>
<Link href={amp.url_legicem}>
<Text>{amp.ref_reg}</Text>
</Link>
</View>
</View>
</View>
)}
</View>
{getImage(amp) && <Image src={getImage(amp)} />}
</View>
))}
</View>
Expand Down
13 changes: 4 additions & 9 deletions frontend/src/features/Dashboard/components/Pdf/Brief.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,4 @@
/* eslint-disable import/no-absolute-path */

// TODO (04/11/2024) : use monitor-ui fonts instead of imported/duplicated ones

import { Document, Image, Page, View } from '@react-pdf/renderer'
import { Document, Page, View } from '@react-pdf/renderer'

import { Amps } from './Amps'
import { Comments } from './Comments'
Expand Down Expand Up @@ -40,20 +36,19 @@ export function Brief({ brief }: BriefProps) {
<AreaTable amps={brief.amps} regulatoryAreas={brief.regulatoryAreas} vigilanceAreas={brief.vigilanceAreas} />
</View>
<View style={layoutStyle.section}>
<RegulatoryAreas regulatoryAreas={brief.regulatoryAreas} />
<RegulatoryAreas images={brief.images ?? []} regulatoryAreas={brief.regulatoryAreas} />
</View>
<View style={layoutStyle.section}>
<Amps amps={brief.amps} />
<Amps amps={brief.amps} images={brief.images ?? []} />
</View>
<View style={layoutStyle.section}>
<VigilanceAreas
images={brief.images ?? []}
linkedAMPs={brief.allLinkedAMPs}
linkedRegulatoryAreas={brief.allLinkedRegulatoryAreas}
vigilanceAreas={brief.vigilanceAreas}
/>
</View>
{/* eslint-disable-next-line react/no-array-index-key */}
{brief.images && brief.images.map((image, index) => <Image key={index} src={image} />)}
</Page>
</Document>
)
Expand Down
13 changes: 3 additions & 10 deletions frontend/src/features/Dashboard/components/Pdf/GeneratePdfButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { useEffect, useMemo, useState } from 'react'
import styled from 'styled-components'

import { Brief } from './Brief'
import { ExportLayer2 } from '../Layers/ExportLayer2'
import { ExportLayer, type ExportImageType } from '../Layers/ExportLayer'

import type { Dashboard } from '@features/Dashboard/types'

Expand Down Expand Up @@ -89,18 +89,11 @@ export function GeneratePdfButton({ dashboard }: GeneratePdfButtonProps) {
setShouldLoadImage(true)
}

const updateBrief = (imagesToUpdate: string[]) => {
const updateBrief = (imagesToUpdate: ExportImageType[]) => {
update(<Brief brief={{ ...brief, images: imagesToUpdate }} />)
setShouldLoadImage(false)
}

// useEffect(() => {
// if (isGeneratingBrief === 'imagesToUpdate' && !pdf.loading && pdf.blob && pdf.url) {
// dispatch(dashboardActions.setIsGeneratingBrief('ready'))
// setIsGenerating(true)
// }
// }, [brief, dispatch, images, isGeneratingBrief, pdf.blob, pdf.loading, pdf.url])

useEffect(() => {
if (isGenerating && !shouldLoadImage && !pdf.loading && pdf.blob && pdf.url) {
setIsGenerating(false)
Expand All @@ -114,7 +107,7 @@ export function GeneratePdfButton({ dashboard }: GeneratePdfButtonProps) {

return (
<>
<ExportLayer2 onImagesReady={updateBrief} shouldLoadImage={shouldLoadImage} />
<ExportLayer onImagesReady={updateBrief} shouldLoadImages={shouldLoadImage} />
<StyledLinkButton
$isDisabled={isGenerating}
Icon={isGenerating ? Icon.Reset : Icon.Document}
Expand Down
111 changes: 67 additions & 44 deletions frontend/src/features/Dashboard/components/Pdf/RegulatoryAreas/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,33 @@
import { Dashboard } from '@features/Dashboard/types'
import { THEME } from '@mtes-mct/monitor-ui'
import { Link, Text, View } from '@react-pdf/renderer'
import { Image, Link, Text, View } from '@react-pdf/renderer'
import { getTitle } from 'domain/entities/layers/utils'

import { areaStyle, layoutStyle } from '../style'

import type { ExportImageType } from '../../Layers/ExportLayer'
import type { RegulatoryLayerWithMetadata } from 'domain/entities/regulatory'

export function RegulatoryAreas({ regulatoryAreas }: { regulatoryAreas: RegulatoryLayerWithMetadata[] }) {
export function RegulatoryAreas({
images,
regulatoryAreas
}: {
images: ExportImageType[]
regulatoryAreas: RegulatoryLayerWithMetadata[]
}) {
function getImage(regulatoryArea: RegulatoryLayerWithMetadata): string | undefined {
return images.find(image => {
if (!image.featureId) {
return false
}
const [type, id] = `${image.featureId}`.split(':')

return (
type === Dashboard.featuresCode[Dashboard.Layer.DASHBOARD_REGULATORY_AREAS] && id && regulatoryArea.id === +id
)
})?.image
}

return (
<>
<View style={layoutStyle.header}>
Expand All @@ -15,58 +36,60 @@ export function RegulatoryAreas({ regulatoryAreas }: { regulatoryAreas: Regulato
</View>
<View style={layoutStyle.cardWrapper}>
{regulatoryAreas.map(regulatoryArea => (
<View key={regulatoryArea.id} style={areaStyle.card} wrap={false}>
<View style={areaStyle.header}>
<Text> {getTitle(regulatoryArea.layer_name)}</Text>
</View>
<View style={areaStyle.content}>
<View style={[layoutStyle.row, { rowGap: 2 }]}>
<View style={areaStyle.description}>
<Text>Entité</Text>
</View>
<View style={areaStyle.details}>
<Text>{regulatoryArea.entity_name || 'AUCUN NOM'}</Text>
</View>
<View key={regulatoryArea.id} style={areaStyle.wrapper} wrap={false}>
<View style={areaStyle.card}>
<View style={areaStyle.header}>
<Text> {getTitle(regulatoryArea.layer_name)}</Text>
</View>
<View style={layoutStyle.row}>
<View style={areaStyle.description}>
<Text>Ensemble reg.</Text>
<View style={areaStyle.content}>
<View style={[layoutStyle.row, { rowGap: 2 }]}>
<View style={areaStyle.description}>
<Text>Entité</Text>
</View>
<View style={areaStyle.details}>
<Text>{regulatoryArea.entity_name || 'AUCUN NOM'}</Text>
</View>
</View>
<View style={areaStyle.details}>
<Text>{regulatoryArea.type || '-'}</Text>
<View style={layoutStyle.row}>
<View style={areaStyle.description}>
<Text>Ensemble reg.</Text>
</View>
<View style={areaStyle.details}>
<Text>{regulatoryArea.type || '-'}</Text>
</View>
</View>
</View>
<View style={layoutStyle.row}>
<View style={areaStyle.description}>
<Text>Thématique</Text>
<View style={layoutStyle.row}>
<View style={areaStyle.description}>
<Text>Thématique</Text>
</View>
<View style={areaStyle.details}>
<Text>{regulatoryArea.thematique || '-'}</Text>
</View>
</View>
<View style={areaStyle.details}>
<Text>{regulatoryArea.thematique || '-'}</Text>
<View style={layoutStyle.row}>
<View style={areaStyle.description}>
<Text>Façade</Text>
</View>
<View style={areaStyle.details}>
<Text>{regulatoryArea.facade || '-'}</Text>
</View>
</View>
</View>
<View style={layoutStyle.row}>
<View style={areaStyle.description}>
<Text>Façade</Text>
</View>
<View style={areaStyle.details}>
<Text>{regulatoryArea.facade || '-'}</Text>
</View>
</View>
</View>
<View style={[areaStyle.content, { borderTop: `1 solid ${THEME.color.gainsboro}` }]}>
<View>
<Text style={[areaStyle.description, { width: 'auto' }]}>Résumé réglementaire sur Légicem</Text>
</View>
<View style={(layoutStyle.row, { fontSize: 5.5, marginTop: 3.4, position: 'relative' })}>
<View style={{ fontSize: 10, left: 3, position: 'absolute', top: -3 }}>
<Text>→</Text>
<View style={[areaStyle.content, { borderTop: `1 solid ${THEME.color.gainsboro}` }]}>
<View>
<Text style={[areaStyle.description, { width: 'auto' }]}>Résumé réglementaire sur Légicem</Text>
</View>
<View style={{ paddingLeft: 18 }}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<Link src={regulatoryArea.url}>{regulatoryArea.ref_reg}</Link>
<View style={(layoutStyle.row, { fontSize: 5.5, marginTop: 3.4, position: 'relative' })}>
<View style={{ fontSize: 10, left: 3, position: 'absolute', top: -3 }}>
<Text>→</Text>
</View>
<View style={{ paddingLeft: 18 }}>
<Link href={regulatoryArea.url}>{regulatoryArea.ref_reg}</Link>
</View>
</View>
</View>
</View>
{getImage(regulatoryArea) && <Image src={getImage(regulatoryArea)} />}
</View>
))}
</View>
Expand Down
Loading

0 comments on commit 49c7ae6

Please sign in to comment.