Add country code to prior notifications

MTES-MCT · May 24, 2024 · bf1e141 · bf1e141
1 parent 1cc04bb
commit bf1e141
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 18 deletions.
diff --git a/...kotlin/fr/gouv/cnsp/monitorfish/infrastructure/api/outputs/PriorNotificationDataOutput.kt b/...kotlin/fr/gouv/cnsp/monitorfish/infrastructure/api/outputs/PriorNotificationDataOutput.kt
@@ -1,5 +1,6 @@
 package fr.gouv.cnsp.monitorfish.infrastructure.api.outputs
 
+import com.neovisionaries.i18n.CountryCode
 import fr.gouv.cnsp.monitorfish.domain.entities.logbook.LogbookOperationType
 import fr.gouv.cnsp.monitorfish.domain.entities.prior_notification.PriorNotification
 import org.slf4j.Logger
@@ -26,7 +27,7 @@ class PriorNotificationDataOutput(
     val types: List<PriorNotificationTypeDataOutput>,
     val vesselId: Int?,
     val vesselExternalReferenceNumber: String?,
-    val vesselFlagCountryCode: String?,
+    val vesselFlagCountryCode: CountryCode,
     val vesselInternalReferenceNumber: String?,
     val vesselIrcs: String?,
     val vesselLastControlDate: String?,
@@ -81,7 +82,7 @@ class PriorNotificationDataOutput(
                 types,
                 vesselId = priorNotification.vessel.id,
                 vesselExternalReferenceNumber = priorNotification.vessel.externalReferenceNumber,
-                vesselFlagCountryCode = priorNotification.vessel.flagState.toString(),
+                vesselFlagCountryCode = priorNotification.vessel.flagState,
                 vesselInternalReferenceNumber = priorNotification.vessel.internalReferenceNumber,
                 vesselIrcs = priorNotification.vessel.ircs,
                 vesselLastControlDate = priorNotification.vesselRiskFactor?.lastControlDatetime?.toString(),

diff --git a/frontend/src/components/CountryFlag/index.tsx b/frontend/src/components/CountryFlag/index.tsx
@@ -5,6 +5,8 @@ import { getAlpha2CodeFromAlpha2or3Code } from './utils'
 
 import type { CSSProperties } from 'react'
 
+const MIN_DEFAULT_WIDTH = 24
+
 type CountryFlagProps = Readonly<{
   className?: string | undefined
   countryCode: string | undefined
@@ -16,11 +18,9 @@ export function CountryFlag({ countryCode, size, ...nativeProps }: CountryFlagPr
   const countryName = countryAlpha2Code ? countries.getName(countryAlpha2Code, 'fr') : undefined
   const [width, height] = size
 
-  const url = countryAlpha2Code ? `/flags/${countryAlpha2Code}.svg` : `https://placehold.co/${width}x${height}?text=%3F`
-
-  if (!countryAlpha2Code || countryAlpha2Code === 'undefined') {
-    return <Unknown $height={height} $width={width} title="Inconnu" {...nativeProps} />
-  }
+  const url = countryAlpha2Code
+    ? `${window.location.origin}/flags/${countryAlpha2Code}.svg`
+    : `https://placehold.co/${width < MIN_DEFAULT_WIDTH ? MIN_DEFAULT_WIDTH : width}x${height}?text=%3F`
 
   return (
     <Img $height={height} $width={width} alt={String(countryCode)} src={url} title={countryName} {...nativeProps} />
@@ -34,13 +34,3 @@ const Img = styled.img<{
   height: ${p => p.$height}px;
   width: ${p => p.$width}px;
 `
-
-const Unknown = styled.span<{
-  $height: number
-  $width: number
-}>`
-  background-color: black;
-  display: inline-block;
-  height: ${p => p.$height}px;
-  width: ${p => p.$width}px;
-`
diff --git a/frontend/src/components/CountryFlag/utils.ts b/frontend/src/components/CountryFlag/utils.ts
@@ -5,6 +5,10 @@ export function getAlpha2CodeFromAlpha2or3Code(countryCode: string | undefined):
     return undefined
   }
 
+  if (countryCode === 'UNDEFINED') {
+    return undefined
+  }
+
   try {
     return (countryCode.length === 3 ? countries.alpha3ToAlpha2(countryCode) : countryCode).toLowerCase()
   } catch (err) {

diff --git a/...src/features/Logbook/components/VesselLogbook/LogbookMessages/messages/LogbookMessage.tsx b/...src/features/Logbook/components/VesselLogbook/LogbookMessages/messages/LogbookMessage.tsx
@@ -254,7 +254,7 @@ const VoyageNumber = styled(BodyHeaderBlock)`
 const Acknowledge = styled(BodyHeaderBlock)`
   background: ${p => p.theme.color.white};
   color: ${p => p.theme.color.gunMetal};
-  flex-grow: 4;
+  width: 25px;
   margin-left: 10px;
 `