Skip to content

Commit dbac20b

Browse files
maximeperraultmaximeperraultdev
maximeperrault
authored and
maximeperraultdev
committed
feat: balance area table and refacto reporting breaking spot
1 parent d1ca003 commit dbac20b

File tree

6 files changed

+166
-152
lines changed

6 files changed

+166
-152
lines changed

‎frontend/src/features/Dashboard/components/Pdf/v1/Reportings/index.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,6 @@ import { areaStyle, layoutStyle } from '../style'
1515
import type { ControlPlansSubThemeCollection, ControlPlansThemeCollection } from 'domain/entities/controlPlan'
1616
import type { Coordinate } from 'ol/coordinate'
1717

18-
const REPORTING_INDEXS_BREAK = [6, 15, 24, 33]
19-
2018
const styles = StyleSheet.create({
2119
description: { ...areaStyle.description, width: '50%' },
2220
details: { ...areaStyle.details, fontWeight: 'bold' },
@@ -205,12 +203,8 @@ export function Reportings({
205203
</View>
206204
</View>
207205
</View>
208-
{reportings.map((reporting, index) => (
209-
<View
210-
key={reporting.id}
211-
break={REPORTING_INDEXS_BREAK.includes(index)}
212-
style={[styles.reportingCard, { position: 'relative' }]}
213-
>
206+
{reportings.map(reporting => (
207+
<View key={reporting.id} style={[styles.reportingCard, { position: 'relative' }]} wrap={false}>
214208
<View style={{ left: 3, position: 'absolute', top: 9 }}>{reportingStatusFlag(reporting)}</View>
215209
<Text>S. {getFormattedReportingId(reporting.reportingId)}</Text>
216210
{reporting.createdAt && (
@@ -317,7 +311,6 @@ export function Reportings({
317311
<Text>{target.vesselType ? vesselTypeLabel[target.vesselType] : '-'}</Text>
318312
</View>
319313
</View>
320-
<View style={styles.separator} />
321314
</Fragment>
322315
))}
323316
</View>

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

Lines changed: 79 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { THEME } from '@mtes-mct/monitor-ui'
55
import { StyleSheet, Text, View, Image } from '@react-pdf/renderer'
66
import { getTitle } from 'domain/entities/layers/utils'
77
import { groupBy } from 'lodash'
8+
import { Fragment } from 'react/jsx-runtime'
89

910
import { layoutStyle } from '../style'
1011

@@ -13,6 +14,8 @@ import type { VigilanceArea } from '@features/VigilanceArea/types'
1314
import type { AMPFromAPI } from 'domain/entities/AMPs'
1415
import type { RegulatoryLayerWithMetadata } from 'domain/entities/regulatory'
1516

17+
const cellHeight = 20
18+
1619
const styles = StyleSheet.create({
1720
amp: {
1821
backgroundColor: '#D6DF64',
@@ -23,7 +26,7 @@ const styles = StyleSheet.create({
2326
border: `0.5 solid ${THEME.color.blueGray25}`,
2427
flexDirection: 'row',
2528
fontSize: 6.8,
26-
height: 20,
29+
height: cellHeight,
2730
padding: '4.3 12',
2831
width: 185
2932
},
@@ -37,7 +40,7 @@ const styles = StyleSheet.create({
3740
flexDirection: 'row',
3841
fontSize: 6.8,
3942
fontWeight: 'bold',
40-
height: 20,
43+
height: cellHeight,
4144
justifyContent: 'space-between',
4245
padding: '4.3 12',
4346
width: 185
@@ -46,7 +49,7 @@ const styles = StyleSheet.create({
4649
border: `0.5 solid ${THEME.color.blueGray25}`,
4750
fontSize: 6.8,
4851
fontWeight: 'bold',
49-
height: 20,
52+
height: cellHeight,
5053
padding: '4.3 12',
5154
width: 185
5255
},
@@ -93,84 +96,93 @@ export function AreaTable({
9396
r => r.name
9497
)
9598

99+
const nbHeader = 3
100+
const nbColumn =
101+
(amps.length > 0 ? 1 : 0) + (regulatoryAreas.length > 0 ? 1 : 0) + (vigilanceAreas.length > 0 ? 1 : 0)
102+
96103
const totalSelected = amps.length + regulatoryAreas.length + vigilanceAreas.length
97-
const tableHeight = ((totalSelected + 3) * 40) / 3
104+
105+
const nbCell = totalSelected + Object.keys(groupedAmps).length + Object.keys(groupedRegulatoryAreas).length + nbHeader
106+
const tableHeight = (nbCell * (cellHeight + 2)) / nbColumn
98107

99108
return (
100109
<>
101-
<View style={layoutStyle.header}>
102-
<Text style={layoutStyle.title}>Zones</Text>
103-
<Text style={layoutStyle.selected}>{totalSelected} sélectionnée(s)</Text>
104-
</View>
105-
{image && <Image src={image.image} style={{ paddingBottom: 12 }} />}
110+
{image && <Image src={image.image} style={{ marginBottom: 6.2 }} />}
106111

107-
<View break style={[styles.table, { height: tableHeight }]}>
108-
<View style={[styles.regulatoryArea, styles.headers]}>
109-
<Text>Zones réglementaires</Text>
110-
<Text>{regulatoryAreas.length} sélectionnée(s)</Text>
112+
<View break>
113+
<View style={layoutStyle.header}>
114+
<Text style={layoutStyle.title}>Zones</Text>
115+
<Text style={layoutStyle.selected}>{totalSelected} sélectionnée(s)</Text>
111116
</View>
112117

113-
{Object.entries(groupedRegulatoryAreas).map(([groupName, layers]) => (
114-
<View key={groupName}>
115-
<Text style={styles.layerGroup}>{getTitle(groupName)}</Text>
116-
{layers.map(layer => (
117-
<View key={layer.id} style={styles.cell}>
118-
<View
119-
style={[
120-
styles.layerLegend,
121-
{
122-
backgroundColor: getRegulatoryEnvColorWithAlpha(layer.thematique, layer.entityName)
123-
}
124-
]}
125-
/>
126-
<Text>{layer.entityName ?? 'AUCUN NOM'}</Text>
127-
</View>
128-
))}
118+
<View style={[styles.table, { height: tableHeight }]}>
119+
<View style={[styles.regulatoryArea, styles.headers]}>
120+
<Text>Zones réglementaires</Text>
121+
<Text>{regulatoryAreas.length} sélectionnée(s)</Text>
129122
</View>
130-
))}
131123

132-
<View style={[styles.amp, styles.headers]}>
133-
<Text>Zones AMP</Text>
134-
<Text>{amps.length} sélectionnée(s)</Text>
135-
</View>
124+
{Object.entries(groupedRegulatoryAreas).map(([groupName, layers]) => (
125+
<Fragment key={groupName}>
126+
<Text style={styles.layerGroup}>{getTitle(groupName)}</Text>
127+
{layers.map(layer => (
128+
<View key={layer.id} style={styles.cell}>
129+
<View
130+
style={[
131+
styles.layerLegend,
132+
{
133+
backgroundColor: getRegulatoryEnvColorWithAlpha(layer.thematique, layer.entityName)
134+
}
135+
]}
136+
/>
137+
<Text>{layer.entityName || 'AUCUN NOM'}</Text>
138+
</View>
139+
))}
140+
</Fragment>
141+
))}
136142

137-
{Object.entries(groupedAmps).map(([groupName, layers]) => (
138-
<View key={groupName}>
139-
<Text style={styles.layerGroup}>{getTitle(groupName)}</Text>
140-
{layers.map(layer => (
141-
<View key={layer.id} style={styles.cell}>
142-
<View
143-
style={[
144-
styles.layerLegend,
145-
{
146-
backgroundColor: getAMPColorWithAlpha(layer.type, layer.name)
147-
}
148-
]}
149-
/>
150-
<Text>{layer.name ?? 'AUCUN NOM'}</Text>
151-
</View>
152-
))}
143+
<View style={[styles.amp, styles.headers]}>
144+
<Text>Zones AMP</Text>
145+
<Text>{amps.length} sélectionnée(s)</Text>
153146
</View>
154-
))}
155147

156-
<View style={[styles.vigilanceArea, styles.headers]}>
157-
<Text>Zones de vigilance</Text>
158-
<Text>{vigilanceAreas.length} sélectionnée(s)</Text>
159-
</View>
148+
{Object.entries(groupedAmps).map(([groupName, layers]) => (
149+
<Fragment key={groupName}>
150+
<Text style={styles.layerGroup}>{getTitle(groupName)}</Text>
151+
{layers.map(layer => (
152+
<View key={layer.id} style={styles.cell}>
153+
<View
154+
style={[
155+
styles.layerLegend,
156+
{
157+
backgroundColor: getAMPColorWithAlpha(layer.type, layer.name)
158+
}
159+
]}
160+
/>
161+
<Text>{layer.name || 'AUCUN NOM'}</Text>
162+
</View>
163+
))}
164+
</Fragment>
165+
))}
160166

161-
{vigilanceAreas.map(vigilanceArea => (
162-
<View key={vigilanceArea.id} style={styles.cell}>
163-
<View
164-
style={[
165-
styles.layerLegend,
166-
{
167-
backgroundColor: getVigilanceAreaColorWithAlpha(vigilanceArea.name, vigilanceArea.comments)
168-
}
169-
]}
170-
/>
171-
<Text>{vigilanceArea.name}</Text>
167+
<View style={[styles.vigilanceArea, styles.headers]}>
168+
<Text>Zones de vigilance</Text>
169+
<Text>{vigilanceAreas.length} sélectionnée(s)</Text>
172170
</View>
173-
))}
171+
172+
{vigilanceAreas.map(vigilanceArea => (
173+
<View key={vigilanceArea.id} style={styles.cell}>
174+
<View
175+
style={[
176+
styles.layerLegend,
177+
{
178+
backgroundColor: getVigilanceAreaColorWithAlpha(vigilanceArea.name, vigilanceArea.comments)
179+
}
180+
]}
181+
/>
182+
<Text>{vigilanceArea.name}</Text>
183+
</View>
184+
))}
185+
</View>
174186
</View>
175187
</>
176188
)

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import MarianeRegular from '@mtes-mct/monitor-ui/assets/fonts/Marianne-Regular.w
77
import MarianeRegularItalic from '@mtes-mct/monitor-ui/assets/fonts/Marianne-Regular_Italic.woff2'
88
import { Font, StyleSheet } from '@react-pdf/renderer'
99

10+
// Note: in order to convert pixels to pt you must multiply by approximately 0.31. Ex: 20px * 0.31 = 6.2pt
11+
1012
export const registerFonts = () => {
1113
Font.register({
1214
family: 'Mariane',

‎frontend/src/features/Dashboard/components/Pdf/v2/Reportings/index.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,6 @@ import { areaStyle, layoutStyle } from '../style'
1515
import type { ControlPlansSubThemeCollection, ControlPlansThemeCollection } from 'domain/entities/controlPlan'
1616
import type { Coordinate } from 'ol/coordinate'
1717

18-
const REPORTING_INDEXS_BREAK = [6, 15, 24, 33]
19-
2018
const styles = StyleSheet.create({
2119
description: { ...areaStyle.description, width: '50%' },
2220
details: { ...areaStyle.details, fontWeight: 'bold' },
@@ -205,12 +203,8 @@ export function Reportings({
205203
</View>
206204
</View>
207205
</View>
208-
{reportings.map((reporting, index) => (
209-
<View
210-
key={reporting.id}
211-
break={REPORTING_INDEXS_BREAK.includes(index)}
212-
style={[styles.reportingCard, { position: 'relative' }]}
213-
>
206+
{reportings.map(reporting => (
207+
<View key={reporting.id} style={[styles.reportingCard, { position: 'relative' }]} wrap={false}>
214208
<View style={{ left: 3, position: 'absolute', top: 9 }}>{reportingStatusFlag(reporting)}</View>
215209
<Text>S. {getFormattedReportingId(reporting.reportingId)}</Text>
216210
{reporting.createdAt && (
@@ -317,7 +311,6 @@ export function Reportings({
317311
<Text>{target.vesselType ? vesselTypeLabel[target.vesselType] : '-'}</Text>
318312
</View>
319313
</View>
320-
<View style={styles.separator} />
321314
</Fragment>
322315
))}
323316
</View>

0 commit comments

Comments
 (0)