Mor oversikt over barnedokumenter

apps/frontend/src/AppRoutes.tsx

@@ -24,6 +24,7 @@ import { KravListPage } from './pages/KravListPage'
 import { KravPage } from './pages/KravPage'
 import { KravTablePage } from './pages/KravTablePage'
 import { MainPage } from './pages/MainPage'
+import { MorOversiktBarnDokument } from './pages/MorOversiktBarnDokumenter'
 import { MyEtterlevelseDokumentasjonerPage } from './pages/MyEtterlevelseDokumentasjonerPage'
 import NotFound from './pages/NotFound'
 import QuestionAndAnswerLogPage from './pages/QuestionAndAnswerLogPage'
@@ -149,6 +150,12 @@ const AppRoutes = (): JSX.Element => {
 
       <Route path="/dokumentasjon/:id" element={<DokumentasjonPage />} caseSensitive={true} />
       <Route path="/dokumentasjon/:id/:tema" element={<DokumentasjonPage />} caseSensitive={true} />
+      {/* Usikker på hva URL skal hete */}
+      <Route
+        path="/dokumentasjon/:id/morDokument"
+        element={<MorOversiktBarnDokument />}
+        caseSensitive={true}
+      />
       <Route
         path="/dokumentasjon/"
         element={<MyEtterlevelseDokumentasjonerPage />}

apps/frontend/src/components/common/CustomizedBreadcrumbs.tsx

@@ -6,11 +6,15 @@ interface IProps {
   paths?: IBreadCrumbPath[]
   currentPage?: string
   fontColor?: string
+  previousPage?: string
+  paramsId?: string
 }
 
 type TCustomizedProps = IProps
 
 const CustomizedBreadcrumbs = (props: TCustomizedProps) => {
+  const { paths, currentPage, previousPage, paramsId } = props
+
   const getName = (pathName: string) =>
     pathName.length > 40 ? pathName.substring(0, 40) + '...' : pathName
   const linkColor = /^\/(lov|etterlevelse)\//.test(window.location.pathname)
@@ -22,7 +26,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 +35,17 @@ const CustomizedBreadcrumbs = (props: TCustomizedProps) => {
           {getName(path.pathName)} <ChevronRightIcon area-label="" aria-hidden />
         </Link>
       ))}
-      {props.currentPage && (
-        <BodyShort className={linkColor}>{getName(props.currentPage)}</BodyShort>
-      )}
+      {previousPage &&
+        paths?.map((path) => (
+          <Link
+            href={path.href + '/' + paramsId}
+            key={'breadcrumb_link_' + getName(path.pathName)}
+            className={`gap-1 flex ${linkColor}`}
+          >
+            {getName(path.pathName)} <ChevronRightIcon area-label="" aria-hidden />
+          </Link>
+        ))}
+      {currentPage && <BodyShort className={linkColor}>{getName(currentPage)}</BodyShort>}
     </div>
   )
 }

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/${etterlevelseDokumentasjon.id}/morDokument`}>
+                      Se hvilke etterlevelser som allerede gjenbruker dette dokumentet
+                    </Link>
+                  </div>
+                </>
               )}
             </ReadMore>
           </div>

apps/frontend/src/components/scaffold/Page.tsx

@@ -8,17 +8,21 @@ interface IPropsPageLayout {
   pageTitle?: string
   fullWidth?: boolean
   noPadding?: boolean
+  previousPage?: string
   currentPage?: string
   breadcrumbPaths?: IBreadCrumbPath[]
+  paramsId?: string
 }
 
 export const PageLayout = ({
   children,
   pageTitle,
   fullWidth,
   noPadding,
+  previousPage,
   currentPage,
   breadcrumbPaths,
+  paramsId,
 }: IPropsPageLayout) => (
   <div
     id="content"
@@ -27,7 +31,12 @@ export const PageLayout = ({
   >
     <div className={`${noPadding ? '' : 'px-2 pb-6'}`}>
       {(currentPage || breadcrumbPaths) && (
-        <CustomizedBreadcrumbs currentPage={currentPage} paths={breadcrumbPaths} />
+        <CustomizedBreadcrumbs
+          previousPage={previousPage}
+          currentPage={currentPage}
+          paths={breadcrumbPaths}
+          paramsId={paramsId}
+        />
       )}
       {pageTitle && (
         <Helmet>

apps/frontend/src/pages/MorOversiktBarnDokumenter.tsx

@@ -0,0 +1,78 @@
+import { useQuery } from '@apollo/client'
+import { Heading, Table } from '@navikt/ds-react'
+import { useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import { useEtterlevelseDokumentasjon } from '../api/EtterlevelseDokumentasjonApi'
+import { LoadingSkeleton } from '../components/common/LoadingSkeleton'
+import { PageLayout } from '../components/scaffold/Page'
+import { IBreadCrumbPath, IEtterlevelseDokumentasjonStats, IPageResponse } from '../constants'
+import { getEtterlevelseDokumentasjonStatsQuery } from '../query/EtterlevelseDokumentasjonQuery'
+import { ampli, userRoleEventProp } from '../services/Amplitude'
+import { dokumentasjonBreadCrumbPath } from './util/BreadCrumbPath'
+
+export const MorOversiktBarnDokument = () => {
+  const params = useParams<{ id?: string; tema?: string }>()
+  const variables = { etterlevelseDokumentasjonId: params.id }
+
+  const [etterlevelseDokumentasjon, setEtterlevelseDokumentasjon] = useEtterlevelseDokumentasjon(
+    params.id
+  )
+
+  const { refetch: refetchRelevanteData } = useQuery<{
+    etterlevelseDokumentasjon: IPageResponse<{ stats: IEtterlevelseDokumentasjonStats }>
+  }>(getEtterlevelseDokumentasjonStatsQuery, {
+    variables,
+    skip: !params.id,
+  })
+
+  useEffect(() => {
+    setTimeout(() => refetchRelevanteData(), 200)
+    if (etterlevelseDokumentasjon) {
+      ampli.logEvent('sidevisning', {
+        side: 'Etterlevelse Dokumentasjon Page',
+        sidetittel: `E${etterlevelseDokumentasjon.etterlevelseNummer.toString()} ${
+          etterlevelseDokumentasjon.title
+        }`,
+        ...userRoleEventProp,
+      })
+    }
+  }, [etterlevelseDokumentasjon])
+
+  if (!etterlevelseDokumentasjon) return <LoadingSkeleton header="Dokumentasjon" />
+
+  const { etterlevelseNummer, title } = etterlevelseDokumentasjon
+  const etterlevelseNavn: string = 'E' + etterlevelseNummer.toString() + ' ' + title
+  const breadcrumbPaths: IBreadCrumbPath[] = [
+    dokumentasjonBreadCrumbPath(etterlevelseNavn, `/dokumentasjon/${params.id}`),
+  ]
+
+  return (
+    <PageLayout
+      pageTitle={'Dokumenter som gjenbruker ' + etterlevelseNavn}
+      currentPage={'Dokumenter som gjenbruker ' + etterlevelseNavn}
+      previousPage={etterlevelseNavn}
+      breadcrumbPaths={breadcrumbPaths}
+      paramsId={params.id}
+    >
+      <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.HeaderCell>CELLHEADING</Table.HeaderCell>
+            </Table.Header>
+            <Table.Body>
+              <Table.Row>
+                <Table.DataCell>DOKUMENT LENKE</Table.DataCell>
+                <Table.DataCell>CELL TEXT</Table.DataCell>
+              </Table.Row>
+            </Table.Body>
+          </Table>
+        </div>
+      </div>
+    </PageLayout>
+  )
+}

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
+}