UPDATE: sist redigert av page

Author: JeremiahUy

apps/frontend/src/components/PvkDokument/PvoTabs.tsx

@@ -2,6 +2,7 @@ import { Label, Tabs } from '@navikt/ds-react'
 import { useEffect, useState } from 'react'
 import { NavigateFunction, useNavigate, useParams } from 'react-router-dom'
 import { EPVO, IPvkDokumentListItem } from '../../constants'
+import PvoSistRedigertView from '../PvoTilbakemelding/PvoSistRedigertView'
 import { PvoTilbakemeldingsList } from './PvoTilbakemeldingsList'
 
 type TSection = 'siste' | 'alle'
@@ -37,7 +38,7 @@ const PvoTabs = ({ allPvkDocumentListItem, isLoading }: IProps) => {
         <Tabs.Tab value='alle' label='Alle PVKer' />
       </Tabs.List>
       <Tabs.Panel value='siste'>
-        HER SKAL DET VÆRE SISTE REDIGERTE {/* <SistRedigertKrav /> */}
+        <PvoSistRedigertView />
       </Tabs.Panel>
       <Tabs.Panel value='alle'>
         <div className='w-full justify-center my-4'>

apps/frontend/src/components/PvoTilbakemelding/PvoSistRedigertView.tsx

@@ -0,0 +1,61 @@
+import { useQuery } from '@apollo/client'
+import { Label, List, Loader } from '@navikt/ds-react'
+import moment from 'moment'
+import { EPVO, EPvkDokumentStatus, IPageResponse, TPvoTilbakemeldingQL } from '../../constants'
+import { TPvoVariables, getPvoTilbakemeldingListQuery } from '../../query/PvoTilbakemeldingQuery'
+import { ListLayout } from '../common/ListLayout'
+import PvoStatusView from './common/PvoStatusView'
+
+export const PvoSistRedigertView = () => {
+  const { data, loading: isLoading } = useQuery<
+    { pvoTilbakemeldinger: IPageResponse<TPvoTilbakemeldingQL> },
+    TPvoVariables
+  >(getPvoTilbakemeldingListQuery, {
+    variables: { sistRedigert: 20 },
+  })
+
+  return (
+    <div>
+      {isLoading && (
+        <div className='flex w-full justify-center items-center mt-5'>
+          <Loader size='3xlarge' className='flex justify-self-center' />
+        </div>
+      )}
+
+      {!isLoading && (
+        <div>
+          <div className='w-full justify-center my-4'>
+            <div className='flex justify-center content-center w-full'>
+              <div className='flex justify-start align-middle w-full'>
+                <Label size='medium'>
+                  {data?.pvoTilbakemeldinger.numberOfElements} PVK dokumenter
+                </Label>
+              </div>
+            </div>
+          </div>
+          <List className='mb-2.5 flex flex-col gap-2'>
+            {data &&
+              data.pvoTilbakemeldinger &&
+              data.pvoTilbakemeldinger.content.map((pvoTilbakemelding: TPvoTilbakemeldingQL) => (
+                <ListLayout
+                  key={pvoTilbakemelding.id}
+                  id={pvoTilbakemelding.id}
+                  url={`/pvkdokument/${pvoTilbakemelding.pvkDokumentId}${EPVO.tilbakemelding}/1`}
+                  documentNumber={`E${pvoTilbakemelding.etterlevelseDokumentasjonData.etterlevelseNummer}`}
+                  title={pvoTilbakemelding.etterlevelseDokumentasjonData.title}
+                  status={
+                    <PvoStatusView
+                      status={pvoTilbakemelding.pvkDokumentStatus as EPvkDokumentStatus}
+                    />
+                  }
+                  upperRightField='PVK dokument ble'
+                  changeStamp={`sist endret av meg: ${moment(pvoTilbakemelding.sistEndretAvMeg).format('ll')}`}
+                />
+              ))}
+          </List>
+        </div>
+      )}
+    </div>
+  )
+}
+export default PvoSistRedigertView

apps/frontend/src/query/PvoTilbakemeldingQuery.ts

@@ -36,3 +36,9 @@ export const getPvoTilbakemeldingListQuery = gql`
     }
   }
 `
+
+export type TPvoVariables = {
+  pageNumber?: number
+  pageSize?: number
+  sistRedigert?: number
+}