From a3b76c869fc0a39deff4dcd98b8cfae8505fe910 Mon Sep 17 00:00:00 2001
From: beeccy <beeccy@users.noreply.github.com>
Date: Fri, 16 Aug 2024 12:32:33 +0200
Subject: [PATCH] Mor oversikt over barnedokumenter (#950)

* Lagt inn skjellet for moroversikt over barnedokumenter

* Lagt inn etterlevelse header, men ikke ferdig

* Lagt inn mor oversikt i breadcrumbs, mangler fortsatt lenke

* Fikset breadcrumbs, fungerer

* Lagt inn lenke til mor oversikt av barnedokumenter

* Fikset breadcrumbs sti og fjernet en kolonne

* Lagt inn data, it woooooorks

* Fikset relasjonsOversikt og url
---
 apps/frontend/src/AppRoutes.tsx               |  6 ++
 .../common/CustomizedBreadcrumbs.tsx          |  8 +-
 ...EtterlevelseDokumentasjonExpansionCard.tsx | 35 +++++---
 apps/frontend/src/pages/RelasjonsOversikt.tsx | 88 +++++++++++++++++++
 .../frontend/src/pages/util/BreadCrumbPath.ts |  6 ++
 5 files changed, 125 insertions(+), 18 deletions(-)
 create mode 100644 apps/frontend/src/pages/RelasjonsOversikt.tsx

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 => {
 
       <Route path="/dokumentasjon/:id" element={<DokumentasjonPage />} caseSensitive={true} />
       <Route path="/dokumentasjon/:id/:tema" element={<DokumentasjonPage />} caseSensitive={true} />
+      <Route
+        path="/dokumentasjon/relasjon/:id/"
+        element={<RelasjonsOversikt />}
+        caseSensitive={true}
+      />
       <Route
         path="/dokumentasjon/"
         element={<MyEtterlevelseDokumentasjonerPage />}
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) => {
       <Link href="/" className={`gap-1 flex ${linkColor}`}>
         Forsiden <ChevronRightIcon area-label="" aria-hidden />
       </Link>
-      {props.paths?.map((path) => (
+      {paths?.map((path) => (
         <Link
           href={path.href}
           key={'breadcrumb_link_' + getName(path.pathName)}
@@ -31,9 +33,7 @@ const CustomizedBreadcrumbs = (props: TCustomizedProps) => {
           {getName(path.pathName)} <ChevronRightIcon area-label="" aria-hidden />
         </Link>
       ))}
-      {props.currentPage && (
-        <BodyShort className={linkColor}>{getName(props.currentPage)}</BodyShort>
-      )}
+      {currentPage && <BodyShort className={linkColor}>{getName(currentPage)}</BodyShort>}
     </div>
   )
 }
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() && (
-                <div className="mt-5">
-                  <Button
-                    onClick={() => {
-                      navigate('/dokumentasjon/gjenbruk/' + etterlevelseDokumentasjon.id)
-                    }}
-                    size="small"
-                    variant="secondary"
-                    className="whitespace-nowrap mt-3"
-                    type="button"
-                  >
-                    Gjenbruk dokumentet
-                  </Button>
-                </div>
+                <>
+                  <div className="mt-5">
+                    <Button
+                      onClick={() => {
+                        navigate('/dokumentasjon/gjenbruk/' + etterlevelseDokumentasjon.id)
+                      }}
+                      size="small"
+                      variant="secondary"
+                      className="whitespace-nowrap mt-3"
+                      type="button"
+                    >
+                      Gjenbruk dokumentet
+                    </Button>
+                  </div>
+                  <div className="mt-5">
+                    <Link href={`/dokumentasjon/relasjon/${etterlevelseDokumentasjon.id}`}>
+                      Se hvilke etterlevelser som allerede gjenbruker dette dokumentet
+                    </Link>
+                  </div>
+                </>
               )}
             </ReadMore>
           </div>
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<IDocumentRelationWithEtterlevelseDokumetajson[]>()
+
+  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 <LoadingSkeleton header="Dokumentasjon" />
+
+  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 (
+    <PageLayout
+      pageTitle={'Dokumenter som gjenbruker ' + etterlevelseNavn}
+      currentPage={'Dokumenter som gjenbruker ' + etterlevelseNavn}
+      breadcrumbPaths={breadcrumbPaths}
+    >
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-2">
+          <Heading level="1" size="medium">
+            Dokumenter som gjenbruker E{etterlevelseNummer.toString()} {title}
+          </Heading>
+          <Table zebraStripes>
+            <Table.Header>
+              <Table.HeaderCell>Dokumentnavn</Table.HeaderCell>
+            </Table.Header>
+            <Table.Body>
+              {dokumentRelasjonBarn?.map((dokument, index) => (
+                <Table.Row key={index + dokument.toDocumentWithData.etterlevelseNummer}>
+                  <Table.DataCell>
+                    <Link href={`/dokumentasjon/${dokument.toDocumentWithData.id}`}>
+                      {'E' +
+                        dokument.toDocumentWithData.etterlevelseNummer.toString() +
+                        ' ' +
+                        dokument.toDocumentWithData.title}
+                    </Link>
+                  </Table.DataCell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table>
+        </div>
+      </div>
+    </PageLayout>
+  )
+}
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
+}