Skip to content

Commit 02e1b69

Browse files
maximeperraultmaximeperraultdev
maximeperrault
authored and
maximeperraultdev
committed
feat: modify Zones AMP to Aires Marines Protégées, modify AMP cells to be inlined and revert area table wrapping
1 parent dbac20b commit 02e1b69

File tree

5 files changed

+156
-187
lines changed

5 files changed

+156
-187
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export function Amps({ amps }: { amps: AMPFromAPI[] }) {
1111
return (
1212
<>
1313
<View style={layoutStyle.header}>
14-
<Text style={layoutStyle.title}>Zones AMP</Text>
14+
<Text style={layoutStyle.title}>Aires marines protégées</Text>
1515
<Text style={layoutStyle.selected}>{amps.length} sélectionnée(s)</Text>
1616
</View>
1717
<View style={layoutStyle.cardWrapper}>

‎frontend/src/features/Dashboard/components/Pdf/v1/GeneratePdfButton.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ type GeneratePdfButtonProps = {
2121
export function GeneratePdfButton({ dashboard }: GeneratePdfButtonProps) {
2222
const [shouldTriggerExport, setShouldTriggerExport] = useState(false)
2323
const [isOpening, setIsOpening] = useState(false)
24+
const [isLoading, setIsLoading] = useState(false)
2425

2526
const { subThemes, themes } = useGetControlPlans()
2627

@@ -83,6 +84,7 @@ export function GeneratePdfButton({ dashboard }: GeneratePdfButtonProps) {
8384

8485
const handleDownload = async () => {
8586
setShouldTriggerExport(true)
87+
setIsLoading(true)
8688
}
8789

8890
useEffect(() => {
@@ -103,12 +105,16 @@ export function GeneratePdfButton({ dashboard }: GeneratePdfButtonProps) {
103105
}
104106
setShouldTriggerExport(false)
105107
setIsOpening(false)
108+
setIsLoading(false)
106109
}
107110
}
108111
renderPdf()
109112
}, [brief, dashboard.name, loading, shouldTriggerExport])
110113

111114
const getLoadingText = () => {
115+
if (loading) {
116+
return 'Chargement des images'
117+
}
112118
if (isOpening) {
113119
return 'Chargement du brief'
114120
}
@@ -118,7 +124,7 @@ export function GeneratePdfButton({ dashboard }: GeneratePdfButtonProps) {
118124

119125
return (
120126
<>
121-
<StyledLinkButton disabled={isOpening} Icon={isOpening ? Icon.Reset : Icon.Document} onClick={handleDownload}>
127+
<StyledLinkButton disabled={isLoading} Icon={isLoading ? Icon.Reset : Icon.Document} onClick={handleDownload}>
122128
{getLoadingText()}
123129
</StyledLinkButton>
124130
</>

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

Lines changed: 72 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -27,31 +27,26 @@ const styles = StyleSheet.create({
2727
flexDirection: 'row',
2828
fontSize: 6.8,
2929
height: cellHeight,
30-
padding: '4.3 12',
31-
width: 185
30+
padding: '4.3 12'
3231
},
3332
header: {
3433
flex: 1,
3534
flexDirection: 'row',
35+
height: cellHeight,
3636
justifyContent: 'space-between',
37-
padding: '3 12'
37+
padding: '4.3 12'
3838
},
3939
headers: {
4040
flexDirection: 'row',
4141
fontSize: 6.8,
42-
fontWeight: 'bold',
43-
height: cellHeight,
44-
justifyContent: 'space-between',
45-
padding: '4.3 12',
46-
width: 185
42+
fontWeight: 'bold'
4743
},
4844
layerGroup: {
4945
border: `0.5 solid ${THEME.color.blueGray25}`,
5046
fontSize: 6.8,
5147
fontWeight: 'bold',
5248
height: cellHeight,
53-
padding: '4.3 12',
54-
width: 185
49+
padding: '4.3 12'
5550
},
5651
layerLegend: {
5752
border: `0.5 solid ${THEME.color.slateGray}`,
@@ -65,9 +60,7 @@ const styles = StyleSheet.create({
6560
},
6661
table: {
6762
display: 'flex',
68-
flexDirection: 'column',
69-
flexWrap: 'wrap',
70-
width: '100%'
63+
flexDirection: 'column'
7164
},
7265
vigilanceArea: {
7366
backgroundColor: '#C58F7E',
@@ -90,98 +83,87 @@ export function AreaTable({
9083
[...regulatoryAreas].sort((a, b) => a.layerName.localeCompare(b.layerName)),
9184
regulatory => regulatory.layerName
9285
)
93-
94-
const groupedAmps = groupBy(
95-
[...amps].sort((a, b) => a.name.localeCompare(b.name)),
96-
r => r.name
97-
)
98-
99-
const nbHeader = 3
100-
const nbColumn =
101-
(amps.length > 0 ? 1 : 0) + (regulatoryAreas.length > 0 ? 1 : 0) + (vigilanceAreas.length > 0 ? 1 : 0)
102-
10386
const totalSelected = amps.length + regulatoryAreas.length + vigilanceAreas.length
10487

105-
const nbCell = totalSelected + Object.keys(groupedAmps).length + Object.keys(groupedRegulatoryAreas).length + nbHeader
106-
const tableHeight = (nbCell * (cellHeight + 2)) / nbColumn
107-
10888
return (
10989
<>
11090
{image && <Image src={image.image} style={{ marginBottom: 6.2 }} />}
11191

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>
116-
</View>
117-
118-
<View style={[styles.table, { height: tableHeight }]}>
119-
<View style={[styles.regulatoryArea, styles.headers]}>
92+
<View style={layoutStyle.header}>
93+
<Text style={layoutStyle.title}>Zones</Text>
94+
<Text style={layoutStyle.selected}>{totalSelected} sélectionnée(s)</Text>
95+
</View>
96+
<View style={styles.table}>
97+
<View style={styles.headers}>
98+
<View style={[styles.regulatoryArea, styles.header]}>
12099
<Text>Zones réglementaires</Text>
121100
<Text>{regulatoryAreas.length} sélectionnée(s)</Text>
122101
</View>
123-
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-
))}
142-
143-
<View style={[styles.amp, styles.headers]}>
144-
<Text>Zones AMP</Text>
102+
<View style={[styles.amp, styles.header]}>
103+
<Text>Aires Marines Protégées</Text>
145104
<Text>{amps.length} sélectionnée(s)</Text>
146105
</View>
147-
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-
))}
166-
167-
<View style={[styles.vigilanceArea, styles.headers]}>
106+
<View style={[styles.vigilanceArea, styles.header]}>
168107
<Text>Zones de vigilance</Text>
169108
<Text>{vigilanceAreas.length} sélectionnée(s)</Text>
170109
</View>
110+
</View>
171111

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-
))}
112+
<View style={layoutStyle.row}>
113+
<View style={{ flex: 1 }}>
114+
{Object.entries(groupedRegulatoryAreas).map(([groupName, layers]) => (
115+
<Fragment key={groupName}>
116+
<Text style={styles.layerGroup} wrap={false}>
117+
{getTitle(groupName)}
118+
</Text>
119+
{layers.map(layer => (
120+
<View key={layer.id} style={styles.cell} wrap={false}>
121+
<View
122+
style={[
123+
styles.layerLegend,
124+
{
125+
backgroundColor: getRegulatoryEnvColorWithAlpha(layer.thematique, layer.entityName)
126+
}
127+
]}
128+
/>
129+
<Text>{layer.entityName || 'AUCUN NOM'}</Text>
130+
</View>
131+
))}
132+
</Fragment>
133+
))}
134+
</View>
135+
<View style={{ flex: 1 }}>
136+
{amps.map(amp => (
137+
<View key={amp.id} style={styles.cell} wrap={false}>
138+
<View
139+
style={[
140+
styles.layerLegend,
141+
{
142+
backgroundColor: getAMPColorWithAlpha(amp.type, amp.name)
143+
}
144+
]}
145+
/>
146+
<Text style={{ fontWeight: 'bold' }}>
147+
{getTitle(amp.name)} <Text style={{ fontWeight: 'normal' }}> / {amp.type ?? 'AUCUN NOM'}</Text>
148+
</Text>
149+
</View>
150+
))}
151+
</View>
152+
<View style={{ flex: 1 }}>
153+
{vigilanceAreas.map(vigilanceArea => (
154+
<View key={vigilanceArea.id} style={styles.cell} wrap={false}>
155+
<View
156+
style={[
157+
styles.layerLegend,
158+
{
159+
backgroundColor: getVigilanceAreaColorWithAlpha(vigilanceArea.name, vigilanceArea.comments)
160+
}
161+
]}
162+
/>
163+
<Text>{vigilanceArea.name}</Text>
164+
</View>
165+
))}
166+
</View>
185167
</View>
186168
</View>
187169
</>

‎frontend/src/features/Dashboard/components/Pdf/v2/GeneratePdfButton.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ type GeneratePdfButtonProps = {
2121
export function GeneratePdfButton({ dashboard }: GeneratePdfButtonProps) {
2222
const [shouldTriggerExport, setShouldTriggerExport] = useState(false)
2323
const [isOpening, setIsOpening] = useState(false)
24+
const [isLoading, setIsLoading] = useState(false)
2425

2526
const { subThemes, themes } = useGetControlPlans()
2627

@@ -83,6 +84,7 @@ export function GeneratePdfButton({ dashboard }: GeneratePdfButtonProps) {
8384

8485
const handleDownload = async () => {
8586
setShouldTriggerExport(true)
87+
setIsLoading(true)
8688
}
8789

8890
useEffect(() => {
@@ -103,6 +105,7 @@ export function GeneratePdfButton({ dashboard }: GeneratePdfButtonProps) {
103105
}
104106
setShouldTriggerExport(false)
105107
setIsOpening(false)
108+
setIsLoading(false)
106109
}
107110
}
108111
renderPdf()
@@ -121,11 +124,7 @@ export function GeneratePdfButton({ dashboard }: GeneratePdfButtonProps) {
121124

122125
return (
123126
<>
124-
<StyledLinkButton
125-
disabled={loading || isOpening}
126-
Icon={loading || isOpening ? Icon.Reset : Icon.Document}
127-
onClick={handleDownload}
128-
>
127+
<StyledLinkButton disabled={isLoading} Icon={isLoading ? Icon.Reset : Icon.Document} onClick={handleDownload}>
129128
{getLoadingText()}
130129
</StyledLinkButton>
131130
</>

0 commit comments

Comments
 (0)