diff --git a/apps/frontend/src/AppRoutes.tsx b/apps/frontend/src/AppRoutes.tsx
index a8f838d2f..659bd506a 100644
--- a/apps/frontend/src/AppRoutes.tsx
+++ b/apps/frontend/src/AppRoutes.tsx
@@ -27,6 +27,7 @@ import { MainPage } from './pages/MainPage'
import { MyEtterlevelseDokumentasjonerPage } from './pages/MyEtterlevelseDokumentasjonerPage'
import NotFound from './pages/NotFound'
import QuestionAndAnswerLogPage from './pages/QuestionAndAnswerLogPage'
+import { RelasjonsOversikt } from './pages/RelasjonsOversikt'
import { TemaPage } from './pages/TemaPage'
import { TemaOversiktPage } from './pages/TemaoversiktPage'
import { VarselPage } from './pages/VarselPage'
@@ -149,6 +150,11 @@ const AppRoutes = (): JSX.Element => {
} caseSensitive={true} />
} caseSensitive={true} />
+ }
+ caseSensitive={true}
+ />
}
diff --git a/apps/frontend/src/components/common/CustomizedBreadcrumbs.tsx b/apps/frontend/src/components/common/CustomizedBreadcrumbs.tsx
index 0f6da34eb..ef3135220 100644
--- a/apps/frontend/src/components/common/CustomizedBreadcrumbs.tsx
+++ b/apps/frontend/src/components/common/CustomizedBreadcrumbs.tsx
@@ -11,6 +11,8 @@ interface IProps {
type TCustomizedProps = IProps
const CustomizedBreadcrumbs = (props: TCustomizedProps) => {
+ const { paths, currentPage } = props
+
const getName = (pathName: string) =>
pathName.length > 40 ? pathName.substring(0, 40) + '...' : pathName
const linkColor = /^\/(lov|etterlevelse)\//.test(window.location.pathname)
@@ -22,7 +24,7 @@ const CustomizedBreadcrumbs = (props: TCustomizedProps) => {
Forsiden
- {props.paths?.map((path) => (
+ {paths?.map((path) => (
{
{getName(path.pathName)}
))}
- {props.currentPage && (
- {getName(props.currentPage)}
- )}
+ {currentPage && {getName(currentPage)}}
)
}
diff --git a/apps/frontend/src/components/etterlevelseDokumentasjon/EtterlevelseDokumentasjonExpansionCard.tsx b/apps/frontend/src/components/etterlevelseDokumentasjon/EtterlevelseDokumentasjonExpansionCard.tsx
index 99218a633..7b7b47c5f 100644
--- a/apps/frontend/src/components/etterlevelseDokumentasjon/EtterlevelseDokumentasjonExpansionCard.tsx
+++ b/apps/frontend/src/components/etterlevelseDokumentasjon/EtterlevelseDokumentasjonExpansionCard.tsx
@@ -1,5 +1,5 @@
import { ExclamationmarkTriangleFillIcon } from '@navikt/aksel-icons'
-import { BodyShort, Button, Label, ReadMore, Tag } from '@navikt/ds-react'
+import { BodyShort, Button, Label, Link, ReadMore, Tag } from '@navikt/ds-react'
import { useNavigate } from 'react-router-dom'
import { TEtterlevelseDokumentasjonQL } from '../../constants'
import { EListName, ICode, codelist } from '../../services/Codelist'
@@ -141,19 +141,26 @@ export const EtterlevelseDokumentasjonExpansionCard = (props: IProps) => {
)}
{etterlevelseDokumentasjon.tilgjengeligForGjenbruk && user.isAdmin() && (
-
-
-
+ <>
+
+
+
+
+
+ Se hvilke etterlevelser som allerede gjenbruker dette dokumentet
+
+
+ >
)}
diff --git a/apps/frontend/src/pages/RelasjonsOversikt.tsx b/apps/frontend/src/pages/RelasjonsOversikt.tsx
new file mode 100644
index 000000000..26228b997
--- /dev/null
+++ b/apps/frontend/src/pages/RelasjonsOversikt.tsx
@@ -0,0 +1,88 @@
+import { Heading, Link, Table } from '@navikt/ds-react'
+import { useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom'
+import { getDocumentRelationByFromIdAndRelationTypeWithData } from '../api/DocumentRelationApi'
+import { useEtterlevelseDokumentasjon } from '../api/EtterlevelseDokumentasjonApi'
+import { LoadingSkeleton } from '../components/common/LoadingSkeleton'
+import { PageLayout } from '../components/scaffold/Page'
+import {
+ ERelationType,
+ IBreadCrumbPath,
+ IDocumentRelationWithEtterlevelseDokumetajson,
+} from '../constants'
+import { ampli, userRoleEventProp } from '../services/Amplitude'
+import { dokumentasjonBreadCrumbPath, dokumentasjonerBreadCrumbPath } from './util/BreadCrumbPath'
+
+export const RelasjonsOversikt = () => {
+ const params = useParams<{ id?: string; tema?: string }>()
+
+ const [etterlevelseDokumentasjon, , ,] = useEtterlevelseDokumentasjon(params.id)
+ const [dokumentRelasjonBarn, setDokumentRelasjonBarn] =
+ useState()
+
+ useEffect(() => {
+ if (etterlevelseDokumentasjon) {
+ ampli.logEvent('sidevisning', {
+ side: 'Etterlevelse Dokumentasjon Page',
+ sidetittel: `E${etterlevelseDokumentasjon.etterlevelseNummer.toString()} ${
+ etterlevelseDokumentasjon.title
+ }`,
+ ...userRoleEventProp,
+ })
+
+ getDocumentRelationByFromIdAndRelationTypeWithData(
+ etterlevelseDokumentasjon.id,
+ ERelationType.ARVER
+ ).then((response) => {
+ setDokumentRelasjonBarn(response)
+ })
+ }
+ }, [etterlevelseDokumentasjon])
+
+ if (!etterlevelseDokumentasjon) return
+
+ const { etterlevelseNummer, title } = etterlevelseDokumentasjon
+ const etterlevelseNavn: string = 'E' + etterlevelseNummer.toString() + ' ' + title
+ const breadcrumbPaths: IBreadCrumbPath[] = [
+ dokumentasjonBreadCrumbPath(
+ dokumentasjonerBreadCrumbPath.pathName,
+ dokumentasjonerBreadCrumbPath.href
+ ),
+ dokumentasjonBreadCrumbPath(etterlevelseNavn, `/dokumentasjon/${params.id}`),
+ ]
+
+ return (
+
+
+
+
+ Dokumenter som gjenbruker E{etterlevelseNummer.toString()} {title}
+
+
+
+ Dokumentnavn
+
+
+ {dokumentRelasjonBarn?.map((dokument, index) => (
+
+
+
+ {'E' +
+ dokument.toDocumentWithData.etterlevelseNummer.toString() +
+ ' ' +
+ dokument.toDocumentWithData.title}
+
+
+
+ ))}
+
+
+
+
+
+ )
+}
diff --git a/apps/frontend/src/pages/util/BreadCrumbPath.ts b/apps/frontend/src/pages/util/BreadCrumbPath.ts
index fbffb83fd..533315f1b 100644
--- a/apps/frontend/src/pages/util/BreadCrumbPath.ts
+++ b/apps/frontend/src/pages/util/BreadCrumbPath.ts
@@ -14,3 +14,9 @@ export const dokumentasjonerBreadCrumbPath: IBreadCrumbPath = {
pathName: 'Dokumenter etterlevelse',
href: '/dokumentasjoner',
}
+
+export const dokumentasjonBreadCrumbPath = (pathName: string, href: string): IBreadCrumbPath => {
+ const dokumentasjon: IBreadCrumbPath = { pathName: pathName, href: href }
+
+ return dokumentasjon
+}