diff --git a/frontend/cypress/e2e/vessel_sidebar/reporting.spec.ts b/frontend/cypress/e2e/vessel_sidebar/reporting.spec.ts index d52096b887..54c3d3adcb 100644 --- a/frontend/cypress/e2e/vessel_sidebar/reporting.spec.ts +++ b/frontend/cypress/e2e/vessel_sidebar/reporting.spec.ts @@ -121,6 +121,29 @@ context('Vessel sidebar reporting tab', () => { cy.get('*[data-cy^="vessel-search-selected-vessel-close-title"]', { timeout: 10000 }).click() }) + it('Reporting Should be showed for more years', () => { + // Given + cy.get('*[data-cy="vessel-search-input"]', { timeout: 10000 }).type('FRAIS avis') + cy.get('*[data-cy="vessel-search-item"]', { timeout: 10000 }).eq(0).click() + cy.wait(50) + cy.get('*[data-cy="vessel-sidebar"]', { timeout: 10000 }).should('be.visible') + cy.intercept('GET', '/bff/v1/vessels/reporting*').as('reporting') + cy.get('*[data-cy="vessel-menu-reporting"]').click({ timeout: 10000 }) + cy.get('*[data-cy="vessel-reporting"]', { timeout: 10000 }).should('be.visible') + cy.wait('@reporting') + cy.wait(100) + + // When + cy.get('*[data-cy="vessel-sidebar-reporting-tab-history-button"]').click() + cy.get('*[data-cy="vessel-sidebar-reporting-tab-history"]').should('exist') + cy.get('*[data-cy="vessel-sidebar-reporting-tab-archive-year"]').should('have.length', 6) + cy.clickButton('Afficher plus de signalements') + + // Then + cy.wait('@reporting') + cy.get('*[data-cy="vessel-sidebar-reporting-tab-archive-year"]').should('have.length', 7) + }) + it('Reporting Should be deleted', () => { cy.intercept( 'GET', diff --git a/frontend/src/features/Reporting/components/ReportingList/index.tsx b/frontend/src/features/Reporting/components/ReportingList/index.tsx index 5937419d0a..6da6123705 100644 --- a/frontend/src/features/Reporting/components/ReportingList/index.tsx +++ b/frontend/src/features/Reporting/components/ReportingList/index.tsx @@ -1,8 +1,13 @@ import { ErrorWall } from '@components/ErrorWall' import { SeafrontGroup } from '@constants/seafront' import { ReportingType } from '@features/Reporting/types' +import { useForceUpdate } from '@hooks/useForceUpdate' +import { useMainAppDispatch } from '@hooks/useMainAppDispatch' +import { useMainAppSelector } from '@hooks/useMainAppSelector' +import { useTable } from '@hooks/useTable' import { DisplayedErrorKey } from '@libs/DisplayedError/constants' import { Accent, Icon, IconButton, THEME } from '@mtes-mct/monitor-ui' +import { downloadAsCsv } from '@utils/downloadAsCsv' import dayjs from 'dayjs' import countries from 'i18n-iso-countries' import { useCallback, useMemo, useRef } from 'react' @@ -14,17 +19,12 @@ import { REPORTING_LIST_TABLE_OPTIONS } from './constants' import { getReportingOrigin, getReportingTitle } from './utils' import { ALERTS_MENU_SEAFRONT_TO_SEAFRONTS } from '../../../../domain/entities/alerts/constants' import { showVessel } from '../../../../domain/use_cases/vessel/showVessel' -import { useForceUpdate } from '../../../../hooks/useForceUpdate' -import { useMainAppDispatch } from '../../../../hooks/useMainAppDispatch' -import { useMainAppSelector } from '../../../../hooks/useMainAppSelector' -import { useTable } from '../../../../hooks/useTable' import { CardTable } from '../../../../ui/card-table/CardTable' import { CardTableBody } from '../../../../ui/card-table/CardTableBody' import { CardTableFilters } from '../../../../ui/card-table/CardTableFilters' import { CardTableRow } from '../../../../ui/card-table/CardTableRow' import { EmptyCardTable } from '../../../../ui/card-table/EmptyCardTable' import { FilterTableInput } from '../../../../ui/card-table/FilterTableInput' -import { downloadAsCsv } from '../../../../utils/downloadAsCsv' import { EditReporting } from '../../../SideWindow/Alert/AlertListAndReportingList/EditReporting' import { Flag } from '../../../VesselList/tableCells' import { setEditedReportingInSideWindow } from '../../slice' diff --git a/frontend/src/features/Reporting/components/VesselReportings/Archived/index.tsx b/frontend/src/features/Reporting/components/VesselReportings/Archived/index.tsx index 00cf0cfb93..6c61ac2694 100644 --- a/frontend/src/features/Reporting/components/VesselReportings/Archived/index.tsx +++ b/frontend/src/features/Reporting/components/VesselReportings/Archived/index.tsx @@ -1,7 +1,8 @@ +import { getVesselReportings } from '@features/Reporting/useCases/getVesselReportings' import { Header, Zone } from '@features/VesselSidebar/common_styles/common.style' import { useMainAppDispatch } from '@hooks/useMainAppDispatch' import { useMainAppSelector } from '@hooks/useMainAppSelector' -import { THEME } from '@mtes-mct/monitor-ui' +import { Accent, THEME, Button } from '@mtes-mct/monitor-ui' import dayjs from 'dayjs' import styled from 'styled-components' @@ -19,10 +20,11 @@ export function Archived() { const yearsToReportings = currentAndArchivedReportingsOfSelectedVessel?.archived - function seeMore() { + const seeMore = () => { const nextDate = dayjs(archivedReportingsFromDate).subtract(1, 'year').toDate() dispatch(setArchivedReportingsFromDate(nextDate)) + dispatch(getVesselReportings(false)) } return ( @@ -50,12 +52,9 @@ export function Archived() { )} - + ) @@ -82,16 +81,3 @@ const SeeMoreBackground = styled.div` text-align: center; width: 100%; ` - -const SeeMore = styled.div` - border: 1px solid ${THEME.color.charcoal}; - color: ${THEME.color.gunMetal}; - padding: 5px 10px 5px 10px; - width: max-content; - font-size: 13px; - cursor: pointer; - margin-left: auto; - margin-right: auto; - user-select: none; - background: ${THEME.color.white}; -` diff --git a/frontend/src/features/Reporting/components/VesselReportings/ReportingCard.tsx b/frontend/src/features/Reporting/components/VesselReportings/ReportingCard.tsx index 80af9bca8b..db9729beaa 100644 --- a/frontend/src/features/Reporting/components/VesselReportings/ReportingCard.tsx +++ b/frontend/src/features/Reporting/components/VesselReportings/ReportingCard.tsx @@ -85,15 +85,17 @@ export function ReportingCard({ ) : ( 1}> {numberOfOccurrences > 1 && {numberOfOccurrences}} - dispatch(setEditedReporting(reporting))} - title="Editer" - /> + {reporting.type !== ReportingType.ALERT && ( + dispatch(setEditedReporting(reporting))} + title="Editer" + /> + )} async (dispatch, getState) => { +export const getVesselReportings = (isLoaderShowed: boolean) => async (dispatch, getState) => { const { selectedVesselIdentity } = getState().vessel const { archivedReportingsFromDate, isLoadingReporting } = getState().reporting - if (!selectedVesselIdentity || !archivedReportingsFromDate || isLoadingReporting) { return } - if (isFromUserAction) { + if (isLoaderShowed) { dispatch(displayedErrorActions.unset(DisplayedErrorKey.VESSEL_SIDEBAR_ERROR)) dispatch(loadReporting()) } @@ -40,8 +39,8 @@ export const getVesselReportings = (isFromUserAction: boolean) => async (dispatc dispatch( displayOrLogError( error as Error, - () => getVesselReportings(isFromUserAction), - isFromUserAction, + () => getVesselReportings(isLoaderShowed), + isLoaderShowed, DisplayedErrorKey.VESSEL_SIDEBAR_ERROR ) ) diff --git a/frontend/src/features/Reporting/useCases/updateReporting.ts b/frontend/src/features/Reporting/useCases/updateReporting.ts index 8f3c1f372c..0ba1d80a9b 100644 --- a/frontend/src/features/Reporting/useCases/updateReporting.ts +++ b/frontend/src/features/Reporting/useCases/updateReporting.ts @@ -57,7 +57,7 @@ export const updateReporting = // If the update is done from the Reporting tab of the vessel sidebar if (vesselIdentity) { - await dispatch(getVesselReportings(false)) + await dispatch(getVesselReportings(true)) } } catch (error) { dispatch( diff --git a/frontend/src/features/commonStyles/Buttons.style.jsx b/frontend/src/features/commonStyles/Buttons.style.jsx index 5c453a94df..b99ded15a5 100644 --- a/frontend/src/features/commonStyles/Buttons.style.jsx +++ b/frontend/src/features/commonStyles/Buttons.style.jsx @@ -32,12 +32,6 @@ const Button = styled.button` height: 30px; ` -const BackofficeButton = styled.button` - font-size: 13px; - padding: 6px 12px; - margin: 15px ${props => props.isLast ? '20px' : '0'} 15px 10px; -` - export const PrimaryButton = styled(Button)` ${basePrimaryButton} `