Skip to content

Commit

Permalink
[Brief] display complete reportings in V1 and add break props, minimi…
Browse files Browse the repository at this point in the history 
…ze margin between map and legend on first page
  • Loading branch information
@claire2212
claire2212 committed Feb 6, 2025
1 parent f95898c commit 3f6abb5
Show file tree
Hide file tree
Showing 4 changed files with 175 additions and 69 deletions.
228 changes: 164 additions & 64 deletions frontend/src/features/Dashboard/components/Pdf/v1/Reportings/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,57 @@
import { getFormattedReportingId, getTargetDetailsSubText, getTargetName } from '@features/Reportings/utils'
import { getFormattedReportingId } from '@features/Reportings/utils'
import { THEME } from '@mtes-mct/monitor-ui'
import { G, Path, Rect, StyleSheet, Svg, Text, View } from '@react-pdf/renderer'
import { formatCoordinates } from '@utils/coordinates'
import { getDateAsLocalizedStringCompact } from '@utils/getDateAsLocalizedString'
import { CoordinatesFormat } from 'domain/entities/map/constants'
import { getReportingStatus, ReportingStatusEnum, ReportingTypeEnum, type Reporting } from 'domain/entities/reporting'
import { ReportingTargetTypeLabels } from 'domain/entities/targetType'
import { vehicleTypeLabels } from 'domain/entities/vehicleType'
import { vesselTypeLabel } from 'domain/entities/vesselType'
import { Fragment } from 'react/jsx-runtime'

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

import type { ControlPlansSubThemeCollection, ControlPlansThemeCollection } from 'domain/entities/controlPlan'
import type { Coordinate } from 'ol/coordinate'

const REPORTING_INDEXS_BREAK = [6, 15, 24, 33]

const styles = StyleSheet.create({
description: { ...areaStyle.description, width: '50%' },
details: { ...areaStyle.details, fontWeight: 'bold' },
legendCard: {
borderColor: THEME.color.gainsboro,
borderRadius: 1,
borderStyle: 'solid',
borderWidth: 1,
fontSize: 6.8,
padding: '6 3',
width: '31.5%'
width: '100%'
},
legendLabel: { ...layoutStyle.row, fontSize: 6.2, gap: 4 },
reportingCard: {
borderColor: THEME.color.gainsboro,
borderRadius: 1,
borderStyle: 'solid',
borderWidth: 1,
fontSize: 6.8,
fontWeight: 'bold',
fontSize: 6.2,
gap: 3.7,
padding: '6 14',
width: '31.5%'
},
reportingDate: {
color: THEME.color.slateGray,
fontSize: 5.5,
fontWeight: 'normal',
marginBottom: 3.7,
marginTop: 3.1
fontWeight: 'normal'
},
reportingHeader: {
flexDirection: 'row'
flexDirection: 'row',
fontSize: 6.8,
fontWeight: 'bold'
},
reportingTarget: {
fontSize: 6.2
separator: {
borderTop: `1 solid ${THEME.color.gainsboro}`
}
})

Expand Down Expand Up @@ -105,22 +117,6 @@ function Flag({ color }: { color: string }) {
)
}

const getTargetText = (reporting: Reporting) => {
const targetName = getTargetName({
target: reporting.targetDetails?.[0],
targetType: reporting.targetType,
vehicleType: reporting.vehicleType
})

const targetDetails = getTargetDetailsSubText({
target: reporting.targetDetails?.[0],
targetType: reporting.targetType,
vehicleType: reporting.vehicleType
})

return `${targetName} ${targetDetails ? `(${targetDetails})` : ''}`.trim()
}

const reportingStatusFlag = (reporting: Reporting) => {
const reportingStatus = getReportingStatus({ ...reporting })

Expand Down Expand Up @@ -172,56 +168,160 @@ export function Reportings({
<Text style={layoutStyle.title}>Signalements</Text>
<Text style={layoutStyle.selected}>{reportings.length} sélectionnée(s)</Text>
</View>

<View style={layoutStyle.cardWrapper}>
{reportings.length > 0 && (
<View style={styles.legendCard}>
<View style={layoutStyle.row}>
<View style={{ flex: 1 }}>
<View style={styles.legendCard}>
<View style={layoutStyle.row}>
<View style={{ marginRight: 16 }}>
<View style={styles.legendLabel}>
<Flag color={THEME.color.slateGray} />
<Text style={{ fontWeight: 'bold' }}>Signalements en cours</Text>
<View style={[layoutStyle.row, { fontSize: 6.2, marginTop: 6 }]}>
<Flag color={THEME.color.blueGray} />
<Text>Observation</Text>
</View>
<View style={[layoutStyle.row, { fontSize: 6.2, marginTop: 6 }]}>
<Flag color={THEME.color.maximumRed} /> <Text>Suspicion d&apos;infraction</Text>
</View>
<View style={[layoutStyle.row, { fontSize: 6.2, marginTop: 6 }]}>
<Flag color={THEME.color.mediumSeaGreen} /> <Text>Rattaché à une mission</Text>
</View>
</View>
<View style={{ flex: 1 }}>
<View style={[styles.legendLabel, { marginLeft: 6, marginTop: 6 }]}>
<Flag color={THEME.color.blueGray} />
<Text>Observation</Text>
</View>
<View style={[styles.legendLabel, { marginLeft: 6, marginTop: 6 }]}>
<Flag color={THEME.color.maximumRed} /> <Text>Suspicion d&apos;infraction</Text>
</View>
<View style={[styles.legendLabel, { marginLeft: 6, marginTop: 6 }]}>
<Flag color={THEME.color.mediumSeaGreen} /> <Text>Rattaché à une mission</Text>
</View>
</View>
<View>
<View style={styles.legendLabel}>
<FlagArchived />
<Text style={{ fontWeight: 'bold' }}>Signalements archivés</Text>
<View style={[layoutStyle.row, { fontSize: 6.2, marginTop: 6 }]}>
<FlagArchivedObservation /> <Text>Observation</Text>
</View>
<View style={[layoutStyle.row, { fontSize: 6.2, marginTop: 6 }]}>
<FlagArchivedInfraction /> <Text>Suspicion d&apos;infraction</Text>
</View>
<View style={[layoutStyle.row, { fontSize: 6.2, marginTop: 6 }]}>
<FlagArchivedWithMission /> <Text>Rattaché à une mission</Text>
</View>
</View>
<View style={[styles.legendLabel, { marginLeft: 6, marginTop: 6 }]}>
<FlagArchivedObservation /> <Text>Observation</Text>
</View>
<View style={[styles.legendLabel, { marginLeft: 6, marginTop: 6 }]}>
<FlagArchivedInfraction /> <Text>Suspicion d&apos;infraction</Text>
</View>
<View style={[styles.legendLabel, { marginLeft: 6, marginTop: 6 }]}>
<FlagArchivedWithMission /> <Text>Rattaché à une mission</Text>
</View>
</View>
</View>
)}
{reportings.map(reporting => (
<View key={reporting.id} style={[styles.reportingCard, { position: 'relative' }]}>
</View>
{reportings.map((reporting, index) => (
<View
key={reporting.id}
break={REPORTING_INDEXS_BREAK.includes(index)}
style={[styles.reportingCard, { position: 'relative' }]}
>
<View style={{ left: 3, position: 'absolute', top: 9 }}>{reportingStatusFlag(reporting)}</View>
<Text>
S. {getFormattedReportingId(reporting.reportingId)} -{' '}
{reporting.reportingSources?.map(source => source.displayedSource).join(', ')}
</Text>
<Text style={styles.reportingTarget}>{getTargetText(reporting)}</Text>
<Text>S. {getFormattedReportingId(reporting.reportingId)}</Text>
{reporting.createdAt && (
<Text style={styles.reportingDate}>{getDateAsLocalizedStringCompact(reporting.createdAt, true)}</Text>
)}
{!!reporting.themeId && (
<Text>
{themes[reporting.themeId]?.theme} /{' '}
{reporting.subThemeIds?.map(subThemeid => subThemes[subThemeid]?.subTheme).join(', ')} -{' '}
</Text>
<View style={(layoutStyle.row, { flexWrap: 'wrap' })}>
<Text style={{ fontWeight: 'bold' }}>{themes[reporting.themeId]?.theme} /</Text>
<Text> {reporting.subThemeIds?.map(subThemeid => subThemes[subThemeid]?.subTheme).join(', ')}</Text>
</View>
)}
<Text style={layoutStyle.regular}>{reporting.description}</Text>
<View style={[layoutStyle.row, { rowGap: 2 }]}>
<View style={styles.description}>
<Text>Localisation</Text>
</View>
<View style={styles.details}>
{reporting.geom?.coordinates && reporting.geom?.coordinates.length > 0 && (
<Text>
{
formatCoordinates(
reporting.geom.coordinates[0] as Coordinate,
CoordinatesFormat.DEGREES_MINUTES_SECONDS
)
.replace(/\u2032/g, "'") // Replace prime by quote
.replace(/\u2033/g, '"') // Replace doubleprime by doublequote
}
</Text>
)}
</View>
</View>

<View style={styles.separator} />
<View style={[layoutStyle.row, { rowGap: 2 }]}>
<View style={styles.description}>
<Text>Source</Text>
</View>
<View style={styles.details}>
<Text>{reporting.reportingSources?.map(source => source.displayedSource).join(', ')}</Text>
</View>
</View>
{reporting.targetDetails.map(target => (
<Fragment key={target.mmsi}>
<View style={[layoutStyle.row, { rowGap: 2 }]}>
<View style={styles.description}>
<Text>Type de cible</Text>
</View>
<View style={styles.details}>
<Text>{reporting.targetType ? ReportingTargetTypeLabels[reporting.targetType] : '-'}</Text>
</View>
</View>
<View style={[layoutStyle.row, { rowGap: 2 }]}>
<View style={styles.description}>
<Text>Type de véhicule</Text>
</View>
<View style={styles.details}>
<Text>{reporting.vehicleType ? vehicleTypeLabels[reporting.vehicleType].label : '-'}</Text>
</View>
</View>
<View style={[layoutStyle.row, { rowGap: 2 }]}>
<View style={styles.description}>
<Text>MMSI</Text>
</View>
<View style={styles.details}>
<Text>{target.mmsi ?? '-'}</Text>
</View>
</View>
<View style={[layoutStyle.row, { rowGap: 2 }]}>
<View style={styles.description}>
<Text>IMO</Text>
</View>
<View style={styles.details}>
<Text>{target.imo ?? '-'}</Text>
</View>
</View>
<View style={[layoutStyle.row, { rowGap: 2 }]}>
<View style={styles.description}>
<Text>Nom du capitaine</Text>
</View>
<View style={styles.details}>
<Text>{target.operatorName ?? '-'}</Text>
</View>
</View>
<View style={[layoutStyle.row, { rowGap: 2 }]}>
<View style={styles.description}>
<Text>Immatriculation</Text>
</View>
<View style={styles.details}>
<Text>{target.externalReferenceNumber ?? '-'}</Text>
</View>
</View>
<View style={[layoutStyle.row, { rowGap: 2 }]}>
<View style={styles.description}>
<Text>Taille</Text>
</View>
<View style={styles.details}>
<Text>{target.size ? `${target.size} m` : '-'}</Text>
</View>
</View>
<View style={[layoutStyle.row, { rowGap: 2 }]}>
<View style={styles.description}>
<Text>Type de navire</Text>
</View>
<View style={styles.details}>
<Text>{target.vesselType ? vesselTypeLabel[target.vesselType] : '-'}</Text>
</View>
</View>
<View style={styles.separator} />
</Fragment>
))}
<Text style={[styles.description, { width: 'auto' }]}>Description du signalement</Text>
<Text>{reporting.description}</Text>
</View>
))}
</View>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/features/Dashboard/components/Pdf/v1/Table/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ export function AreaTable({
<Text style={layoutStyle.title}>Zones</Text>
<Text style={layoutStyle.selected}>{totalSelected} sélectionnée(s)</Text>
</View>
{image && <Image src={image.image} style={{ paddingBottom: 36 }} />}
{image && <Image src={image.image} style={{ paddingBottom: 12 }} />}

<View break style={[styles.table, { height: tableHeight }]}>
<View style={[styles.regulatoryArea, styles.headers]}>
Expand Down
12 changes: 9 additions & 3 deletions frontend/src/features/Dashboard/components/Pdf/v2/Reportings/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import { areaStyle, layoutStyle } from '../style'
import type { ControlPlansSubThemeCollection, ControlPlansThemeCollection } from 'domain/entities/controlPlan'
import type { Coordinate } from 'ol/coordinate'

const REPORTING_INDEXS_BREAK = [6, 15, 24, 33]

const styles = StyleSheet.create({
description: { ...areaStyle.description, width: '50%' },
details: { ...areaStyle.details, fontWeight: 'bold' },
Expand Down Expand Up @@ -203,8 +205,12 @@ export function Reportings({
</View>
</View>
</View>
{reportings.map(reporting => (
<View key={reporting.id} style={[styles.reportingCard, { position: 'relative' }]}>
{reportings.map((reporting, index) => (
<View
key={reporting.id}
break={REPORTING_INDEXS_BREAK.includes(index)}
style={[styles.reportingCard, { position: 'relative' }]}
>
<View style={{ left: 3, position: 'absolute', top: 9 }}>{reportingStatusFlag(reporting)}</View>
<Text>S. {getFormattedReportingId(reporting.reportingId)}</Text>
{reporting.createdAt && (
Expand All @@ -213,7 +219,7 @@ export function Reportings({
{!!reporting.themeId && (
<View style={(layoutStyle.row, { flexWrap: 'wrap' })}>
<Text style={{ fontWeight: 'bold' }}>{themes[reporting.themeId]?.theme} /</Text>
<Text> {reporting.subThemeIds?.map(subThemeid => subThemes[subThemeid]?.subTheme).join(', ')}</Text>
<Text>{reporting.subThemeIds?.map(subThemeid => subThemes[subThemeid]?.subTheme).join(', ')}</Text>
</View>
)}
<View style={[layoutStyle.row, { rowGap: 2 }]}>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/features/Dashboard/components/Pdf/v2/Table/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ export function AreaTable({
<Text style={layoutStyle.title}>Zones</Text>
<Text style={layoutStyle.selected}>{totalSelected} sélectionnée(s)</Text>
</View>
{image && <Image src={image.image} style={{ paddingBottom: 36 }} />}
{image && <Image src={image.image} style={{ paddingBottom: 12 }} />}

<View break style={[styles.table, { height: tableHeight }]}>
<View style={[styles.regulatoryArea, styles.headers]}>
Expand Down

0 comments on commit 3f6abb5

Please sign in to comment.