diff --git a/frontend/src/components/NavigationButtons.jsx b/frontend/src/components/NavigationButtons.jsx index fc6e3e3e..8e52f05e 100644 --- a/frontend/src/components/NavigationButtons.jsx +++ b/frontend/src/components/NavigationButtons.jsx @@ -19,6 +19,7 @@ const StyledButton = styled(Button)(({ theme }) => ({ const NavigationButtons = (props) => { const { toBefore, toNext, toReturn, returnIcon } = props + return ( { }} > - - - - - - + {toBefore && ( + + + + )} + {toNext && ( + + + + )} {returnIcon} diff --git a/frontend/src/pages/DetailInstallationPage/detailInstallationData.js b/frontend/src/pages/DetailInstallationPage/detailInstallationData.js index b7547a80..56b433b5 100644 --- a/frontend/src/pages/DetailInstallationPage/detailInstallationData.js +++ b/frontend/src/pages/DetailInstallationPage/detailInstallationData.js @@ -26,7 +26,7 @@ export const contractFields = [ 'discharge_date', 'status', ] -export default function transformContractDetails(contractData) { +function transformContractDetails(contractData) { const t = i18n.t const billingModeOptions = { index: t('CONTRACT_DETAIL.BILLING_MODE_INDEX'), @@ -59,3 +59,26 @@ export default function transformContractDetails(contractData) { return contractData } + +function computeNavigationInfo(installations, currentInstallationContractNumber) { + if (installations.length < 2) { + return {} + } + + // Find the index of the current installation + const currentIndex = installations.findIndex( + (installation) => installation.contract_number === currentInstallationContractNumber + ); + + // Determine the index of the previous and next installations + const previousIndex = currentIndex > 0 ? currentIndex - 1 : installations.length - 1; + const nextIndex = currentIndex < installations.length - 1 ? currentIndex + 1 : 0; + + // Extract the contract numbers for the previous and next installations + const before = installations[previousIndex].contract_number; + const next = installations[nextIndex].contract_number; + + return { before, next }; +} + +export { transformContractDetails, computeNavigationInfo } diff --git a/frontend/src/pages/DetailInstallationPage/detailInstallationData.test.js b/frontend/src/pages/DetailInstallationPage/detailInstallationData.test.js index c2cb0fe0..6f4fb3ca 100644 --- a/frontend/src/pages/DetailInstallationPage/detailInstallationData.test.js +++ b/frontend/src/pages/DetailInstallationPage/detailInstallationData.test.js @@ -1,6 +1,6 @@ import { describe, expect, it } from 'vitest' -import transformContractDetails from './detailInstallationData' +import { transformContractDetails, computeNavigationInfo } from './detailInstallationData' describe('transformContractDetails', () => { it('Add `%` to reduction_deviation if cost_deviation is `included`', () => { @@ -57,3 +57,71 @@ describe('transformContractDetails', () => { ) }) }) + + +describe('computeNavigationInfo', () => { + it('Returns empty when installations length is smaller than 2', () => { + const installations = [{ + contract_number: 'a_contract_number', + installation_name: 'an_installation_name', + }] + const currentInstallationContractNumber = 'a_contract_number' + + const result = computeNavigationInfo(installations, currentInstallationContractNumber) + + expect(result).toEqual({}) + }) + + describe('Having the installation 2 elements', () => { + it('Returns the not current element as before and next navigation values', () => { + const installations = [ + { + contract_number: 'a_contract_number', + installation_name: 'an_installation_name', + }, + { + contract_number: 'another_contract_number', + installation_name: 'another_installation_name', + } + ] + const currentInstallationContractNumber = 'a_contract_number' + + const result = computeNavigationInfo(installations, currentInstallationContractNumber) + + const expected_result = { + before: 'another_contract_number', + next: 'another_contract_number', + } + expect(result).toEqual(expected_result) + }) + }) + + describe('Having the installation more than 2 elements', () => { + it('Returns the not current element as before and next navigation values', () => { + const installations = [ + { + contract_number: 'a_contract_number', + installation_name: 'an_installation_name', + }, + { + contract_number: 'another_contract_number', + installation_name: 'another_installation_name', + }, + { + contract_number: 'yet_another_contract_number', + installation_name: 'yet_another_installation_name', + } + ] + const currentInstallationContractNumber = 'another_contract_number' + + const result = computeNavigationInfo(installations, currentInstallationContractNumber) + + const expected_result = { + before: 'a_contract_number', + next: 'yet_another_contract_number', + } + expect(result).toEqual(expected_result) + }) + }) + +}) \ No newline at end of file diff --git a/frontend/src/pages/DetailInstallationPage/index.jsx b/frontend/src/pages/DetailInstallationPage/index.jsx index 6483c32a..27cd850a 100644 --- a/frontend/src/pages/DetailInstallationPage/index.jsx +++ b/frontend/src/pages/DetailInstallationPage/index.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState, useContext } from 'react' +import React, { useEffect, useState } from 'react' import { useParams } from 'react-router-dom' import { useTranslation } from 'react-i18next' import Container from '@mui/material/Container' @@ -12,8 +12,9 @@ import ErrorSplash from '../../components/ErrorSplash' import NavigationButtons from '../../components/NavigationButtons' import { contractFields } from './detailInstallationData' import { installationFields } from './detailInstallationData' -import transformContractDetails from './detailInstallationData' -import { useInstallationContext } from '../../components/InstallationProvider' +import { transformContractDetails, computeNavigationInfo } from './detailInstallationData' +import { useAuth } from '../../components/AuthProvider' +// import { useInstallationContext } from '../../components/InstallationProvider' export default function DetailInstallationPage(params) { const { contract_number } = useParams() @@ -21,13 +22,16 @@ export default function DetailInstallationPage(params) { const [installationDetail, setInstallationDetail] = useState(undefined) const [contractDetail, setContractDetail] = useState(undefined) const [error, setError] = useState(false) - const data = useInstallationContext() - - console.log(data) + const [rows, setRows] = React.useState([]) + const [navigationBeforeUrl, setNavigationBeforeUrl] = React.useState(undefined) + const [navigationNextUrl, setNavigationNextUrl] = React.useState(undefined) + // const data = useInstallationContext() + const { currentUser } = useAuth() useEffect(() => { getDetailInstallation() - }, [contract_number]) + getNavigationInfo() + }, [contract_number, currentUser]) async function getDetailInstallation() { setError(false) @@ -43,6 +47,20 @@ export default function DetailInstallationPage(params) { setContractDetail(contractData) } + async function getNavigationInfo() { + setError(false) + try { + const installations = await ovapi.installations(currentUser) + const navigationInfo = computeNavigationInfo(installations, installationDetail?.contract_number) + const navigationBeforeUrl = navigationInfo.before ? `/installation/${navigationInfo.before}` : undefined + const navigationNextUrl = navigationInfo.next ? `/installation/${navigationInfo.next}` : undefined + setNavigationBeforeUrl(navigationBeforeUrl) + setNavigationNextUrl(navigationNextUrl) + } catch (error) { + setError(error) + } + } + return !error && (!installationDetail || !contractDetail) ? ( ) : ( @@ -58,10 +76,9 @@ export default function DetailInstallationPage(params) { /> ) : ( <> - {/* TODO: get the before and after user installations */} } />