diff --git a/backend/src/main/kotlin/fr/gouv/cnsp/monitorfish/infrastructure/api/outputs/PriorNotificationDataOutput.kt b/backend/src/main/kotlin/fr/gouv/cnsp/monitorfish/infrastructure/api/outputs/PriorNotificationDataOutput.kt index 18e57dd1c7..7b2921648c 100644 --- a/backend/src/main/kotlin/fr/gouv/cnsp/monitorfish/infrastructure/api/outputs/PriorNotificationDataOutput.kt +++ b/backend/src/main/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, 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 index ed5e68d89b..63a91592f8 100644 --- 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 - } + 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 ( {String(countryCode)} @@ -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 index be3d885c0b..6b144b3cc8 100644 --- 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/frontend/src/features/Logbook/components/VesselLogbook/LogbookMessages/messages/LogbookMessage.tsx b/frontend/src/features/Logbook/components/VesselLogbook/LogbookMessages/messages/LogbookMessage.tsx index 5bf26c420c..d4f62fa7f9 100644 --- a/frontend/src/features/Logbook/components/VesselLogbook/LogbookMessages/messages/LogbookMessage.tsx +++ b/frontend/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; `