Setter inputfelter i lesevisning ved read only (#6801)

* Setter inputfelter i lesevisning ved read only * Sender ned props for alle relevante ytelser * Gjør at man slipper å trykke på rediger for å se vurdering
navikt · Nov 8, 2024 · 6707a81 · 6707a81
1 parent 1f1aa90
commit 6707a81
Show file tree

Hide file tree

Showing 12 changed files with 57 additions and 38 deletions.
diff --git a/packages/behandling-opplaeringspenger/src/components/Uttak.tsx b/packages/behandling-opplaeringspenger/src/components/Uttak.tsx
@@ -1,9 +1,7 @@
-import React from 'react';
-
 import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import aksjonspunktStatus from '@fpsak-frontend/kodeverk/src/aksjonspunktStatus';
-import { Aksjonspunkt, AlleKodeverk, ArbeidsgiverOpplysningerPerId } from '@k9-sak-web/types';
 import { Uttak } from '@k9-sak-web/prosess-uttak';
+import { Aksjonspunkt, AlleKodeverk, ArbeidsgiverOpplysningerPerId } from '@k9-sak-web/types';
 
 interface UttakProps {
   uuid: string;
@@ -15,6 +13,7 @@ interface UttakProps {
   alleKodeverk: AlleKodeverk;
   submitCallback: (data: { kode: string; begrunnelse: string; virkningsdato: string }[]) => void;
   virkningsdatoUttakNyeRegler?: string;
+  readOnly: boolean;
 }
 
 export default ({
@@ -27,6 +26,7 @@ export default ({
   alleKodeverk,
   submitCallback,
   virkningsdatoUttakNyeRegler,
+  readOnly,
 }: UttakProps) => {
   const relevanteAksjonspunkter = [aksjonspunktCodes.VENT_ANNEN_PSB_SAK, aksjonspunktCodes.VURDER_DATO_NY_REGEL_UTTAK];
   const funnedeRelevanteAksjonspunkter = aksjonspunkter.filter(aksjonspunkt =>
@@ -53,6 +53,7 @@ export default ({
         løsAksjonspunktVurderDatoNyRegelUttak,
         virkningsdatoUttakNyeRegler,
         erOverstyrer: false, // Overstyring er ikke implementert for Pleiepenger
+        readOnly,
       }}
     />
   );

diff --git a/...g-opplaeringspenger/src/panelDefinisjoner/prosessStegPaneler/UttakProsessStegPanelDef.tsx b/...g-opplaeringspenger/src/panelDefinisjoner/prosessStegPaneler/UttakProsessStegPanelDef.tsx
@@ -1,8 +1,7 @@
+import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType';
 import { ProsessStegDef, ProsessStegPanelDef } from '@k9-sak-web/behandling-felles';
 import { prosessStegCodes } from '@k9-sak-web/konstanter';
-import React from 'react';
-import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import Uttak from '../../components/Uttak';
 import { OpplaeringspengerBehandlingApiKeys } from '../../data/opplaeringspengerBehandlingApi';
 
@@ -16,6 +15,7 @@ class PanelDef extends ProsessStegPanelDef {
     alleKodeverk,
     submitCallback,
     virkningsdatoUttakNyeRegler,
+    isReadOnly,
   }) => (
     <Uttak
       uuid={behandling.uuid}
@@ -26,6 +26,7 @@ class PanelDef extends ProsessStegPanelDef {
       alleKodeverk={alleKodeverk}
       submitCallback={submitCallback}
       virkningsdatoUttakNyeRegler={virkningsdatoUttakNyeRegler}
+      readOnly={isReadOnly}
     />
   );
 

diff --git a/packages/behandling-pleiepenger-sluttfase/src/components/Uttak.tsx b/packages/behandling-pleiepenger-sluttfase/src/components/Uttak.tsx
@@ -1,9 +1,7 @@
-import React from 'react';
-
 import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import aksjonspunktStatus from '@fpsak-frontend/kodeverk/src/aksjonspunktStatus';
-import { Aksjonspunkt, AlleKodeverk, ArbeidsgiverOpplysningerPerId } from '@k9-sak-web/types';
 import { Uttak } from '@k9-sak-web/prosess-uttak';
+import { Aksjonspunkt, AlleKodeverk, ArbeidsgiverOpplysningerPerId } from '@k9-sak-web/types';
 
 interface UttakProps {
   uuid: string;
@@ -16,6 +14,7 @@ interface UttakProps {
   erFagytelsetypeLivetsSluttfase: boolean;
   submitCallback: (data: { kode: string; begrunnelse: string; virkningsdato: string }[]) => void;
   virkningsdatoUttakNyeRegler?: string;
+  readOnly: boolean;
 }
 
 export default ({
@@ -29,6 +28,7 @@ export default ({
   erFagytelsetypeLivetsSluttfase,
   submitCallback,
   virkningsdatoUttakNyeRegler,
+  readOnly,
 }: UttakProps) => {
   const relevanteAksjonspunkter = [aksjonspunktCodes.VENT_ANNEN_PSB_SAK, aksjonspunktCodes.VURDER_DATO_NY_REGEL_UTTAK];
   const funnedeRelevanteAksjonspunkter = aksjonspunkter.filter(aksjonspunkt =>
@@ -56,6 +56,7 @@ export default ({
         virkningsdatoUttakNyeRegler,
         aksjonspunkter: funnedeRelevanteAksjonspunkter,
         erOverstyrer: false, // Overstyring er ikke implementert for PILS
+        readOnly,
       }}
     />
   );

diff --git a/...eiepenger-sluttfase/src/panelDefinisjoner/prosessStegPaneler/UttakProsessStegPanelDef.tsx b/...eiepenger-sluttfase/src/panelDefinisjoner/prosessStegPaneler/UttakProsessStegPanelDef.tsx
@@ -1,9 +1,8 @@
+import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
+import fagsakYtelseType from '@fpsak-frontend/kodeverk/src/fagsakYtelseType';
 import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType';
 import { ProsessStegDef, ProsessStegPanelDef } from '@k9-sak-web/behandling-felles';
 import { prosessStegCodes } from '@k9-sak-web/konstanter';
-import React from 'react';
-import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
-import fagsakYtelseType from '@fpsak-frontend/kodeverk/src/fagsakYtelseType';
 import AntallDagerLivetsSluttfaseIndex from '@k9-sak-web/prosess-uttak-antall-dager-sluttfase';
 import Uttak from '../../components/Uttak';
 import { PleiepengerSluttfaseBehandlingApiKeys } from '../../data/pleiepengerSluttfaseBehandlingApi';
@@ -20,6 +19,7 @@ class PanelDef extends ProsessStegPanelDef {
     erFagytelsetypeLivetsSluttfase,
     submitCallback,
     virkningsdatoUttakNyeRegler,
+    isReadOnly,
   }) => (
     <>
       <AntallDagerLivetsSluttfaseIndex kvoteInfo={kvoteInfo} />
@@ -33,6 +33,7 @@ class PanelDef extends ProsessStegPanelDef {
         erFagytelsetypeLivetsSluttfase={erFagytelsetypeLivetsSluttfase}
         submitCallback={submitCallback}
         virkningsdatoUttakNyeRegler={virkningsdatoUttakNyeRegler}
+        readOnly={isReadOnly}
       />
     </>
   );

diff --git a/packages/behandling-pleiepenger/src/components/Uttak.tsx b/packages/behandling-pleiepenger/src/components/Uttak.tsx
@@ -1,12 +1,10 @@
-import React from 'react';
-
 import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import aksjonspunktStatus from '@fpsak-frontend/kodeverk/src/aksjonspunktStatus';
-import { Aksjonspunkt, AlleKodeverk, ArbeidsgiverOpplysningerPerId, Behandling } from '@k9-sak-web/types';
-import { Uttak } from '@k9-sak-web/prosess-uttak';
-import { useRestApiErrorDispatcher } from '@k9-sak-web/rest-api-hooks';
 import { findEndpointsForMicrofrontend, httpErrorHandler } from '@fpsak-frontend/utils';
 import { VilkarResultPicker } from '@k9-sak-web/prosess-felles';
+import { Uttak } from '@k9-sak-web/prosess-uttak';
+import { useRestApiErrorDispatcher } from '@k9-sak-web/rest-api-hooks';
+import { Aksjonspunkt, AlleKodeverk, ArbeidsgiverOpplysningerPerId, Behandling } from '@k9-sak-web/types';
 import { OverstyringUttakRequest } from '../types';
 
 interface UttakProps {
@@ -23,6 +21,7 @@ interface UttakProps {
   lagreOverstyringUttak: (values: any) => void;
   relevanteAksjonspunkter: string[];
   erOverstyrer: boolean;
+  readOnly: boolean;
 }
 
 export default ({
@@ -39,6 +38,7 @@ export default ({
   lagreOverstyringUttak,
   relevanteAksjonspunkter,
   erOverstyrer,
+  readOnly,
 }: UttakProps) => {
   const { versjon, links, status: behandlingStatus } = behandling;
   const { addErrorMessage } = useRestApiErrorDispatcher();
@@ -86,6 +86,7 @@ export default ({
         versjon,
         erOverstyrer,
         status: behandlingStatus.kode,
+        readOnly,
       }}
     />
   );

diff --git a/...andling-pleiepenger/src/panelDefinisjoner/prosessStegPaneler/UttakProsessStegPanelDef.tsx b/...andling-pleiepenger/src/panelDefinisjoner/prosessStegPaneler/UttakProsessStegPanelDef.tsx
@@ -1,8 +1,7 @@
+import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType';
 import { ProsessStegDef, ProsessStegPanelDef } from '@k9-sak-web/behandling-felles';
 import { prosessStegCodes } from '@k9-sak-web/konstanter';
-import React from 'react';
-import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import Uttak from '../../components/Uttak';
 import { PleiepengerBehandlingApiKeys } from '../../data/pleiepengerBehandlingApi';
 
@@ -20,6 +19,7 @@ class PanelDef extends ProsessStegPanelDef {
     virkningsdatoUttakNyeRegler,
     relevanteAksjonspunkter,
     erOverstyrer,
+    isReadOnly,
   }) => (
     <Uttak
       uuid={behandling.uuid}
@@ -35,6 +35,7 @@ class PanelDef extends ProsessStegPanelDef {
       virkningsdatoUttakNyeRegler={virkningsdatoUttakNyeRegler}
       relevanteAksjonspunkter={relevanteAksjonspunkter}
       erOverstyrer={erOverstyrer}
+      readOnly={isReadOnly}
     />
   );
 

diff --git a/packages/prosess-uttak/src/types/ContainerContract.ts b/packages/prosess-uttak/src/types/ContainerContract.ts
@@ -1,8 +1,8 @@
-import { Aksjonspunkt } from '@k9-sak-web/types';
 import { OverstyringUttakRequest } from '@k9-sak-web/behandling-pleiepenger';
-import Uttaksperioder from './Uttaksperioder';
+import { Aksjonspunkt } from '@k9-sak-web/types';
 import ArbeidsgiverOpplysninger from './ArbeidsgiverOpplysninger';
 import KodeverkMedNavn from './kodeverkMedNavnTsType';
+import Uttaksperioder from './Uttaksperioder';
 
 interface ContainerContract {
   httpErrorHandler?: (status: number, locationHeader?: string) => void;
@@ -31,6 +31,7 @@ interface ContainerContract {
   versjon?: number;
   erOverstyrer?: boolean;
   status?: string | false;
+  readOnly: boolean;
 }
 
 export default ContainerContract;
diff --git a/packages/prosess-uttak/src/ui/Uttak.stories.tsx b/packages/prosess-uttak/src/ui/Uttak.stories.tsx
@@ -205,6 +205,7 @@ export const Uttak: Story = {
       erFagytelsetypeLivetsSluttfase: false,
       løsAksjonspunktVurderDatoNyRegelUttak: undefined,
       virkningsdatoUttakNyeRegler: '',
+      readOnly: false,
     },
   },
 };
diff --git a/packages/prosess-uttak/src/ui/UttakContainer.tsx b/packages/prosess-uttak/src/ui/UttakContainer.tsx
@@ -19,7 +19,7 @@ interface MainComponentProps {
 }
 
 const UttakContainer = ({ containerData }: MainComponentProps): JSX.Element => {
-  const { uttaksperioder, aksjonspunktkoder, aksjonspunkter, virkningsdatoUttakNyeRegler, erOverstyrer } =
+  const { uttaksperioder, aksjonspunktkoder, aksjonspunkter, virkningsdatoUttakNyeRegler, erOverstyrer, readOnly } =
     containerData;
   const [redigerVirkningsdato, setRedigervirkningsdato] = React.useState<boolean>(false);
   const aksjonspunktVurderDato = aksjonspunkter?.find(ap => ap.definisjon.kode === aksjonspunktVurderDatoKode);
@@ -52,7 +52,9 @@ const UttakContainer = ({ containerData }: MainComponentProps): JSX.Element => {
 
       <UtsattePerioderStripe />
       {/* Allerede løst og har klikket rediger, eller har uløst aksjonspunkt */}
-      {((virkningsdatoUttakNyeRegler && redigerVirkningsdato) || harAksjonspunktVurderDatoMedStatusOpprettet) && (
+      {((virkningsdatoUttakNyeRegler && redigerVirkningsdato) ||
+        harAksjonspunktVurderDatoMedStatusOpprettet ||
+        readOnly) && (
         <VurderDato
           avbryt={
             virkningsdatoUttakNyeRegler && redigerVirkningsdato ? () => setRedigervirkningsdato(false) : undefined
@@ -61,13 +63,15 @@ const UttakContainer = ({ containerData }: MainComponentProps): JSX.Element => {
             begrunnelse: aksjonspunktVurderDato?.begrunnelse,
             virkningsdato: virkningsdatoUttakNyeRegler,
           }}
+          readOnly={readOnly}
         />
       )}
       {!harVentAnnenPSBSakAksjonspunkt && (
         <UttaksperiodeListe
           uttaksperioder={lagUttaksperiodeliste(uttaksperioder)}
           redigerVirkningsdatoFunc={() => setRedigervirkningsdato(true)}
           redigerVirkningsdato={redigerVirkningsdato}
+          readOnly={readOnly}
         />
       )}
     </ContainerContext.Provider>

diff --git a/packages/prosess-uttak/src/ui/components/uttaksperiode-liste/UttaksperiodeListe.tsx b/packages/prosess-uttak/src/ui/components/uttaksperiode-liste/UttaksperiodeListe.tsx
@@ -11,6 +11,7 @@ interface UttaksperiodeListeProps {
   uttaksperioder: Uttaksperiode[];
   redigerVirkningsdatoFunc: () => void;
   redigerVirkningsdato: boolean;
+  readOnly: boolean;
 }
 
 const splitUttakByDate = (
@@ -52,7 +53,7 @@ const UttaksperiodeListe = (props: UttaksperiodeListeProps): JSX.Element => {
     virkningsdatoUttakNyeRegler,
     status = false,
   } = React.useContext(ContainerContext);
-  const { uttaksperioder, redigerVirkningsdatoFunc, redigerVirkningsdato } = props;
+  const { uttaksperioder, redigerVirkningsdatoFunc, redigerVirkningsdato, readOnly } = props;
 
   const [before, afterOrCovering] = splitUttakByDate(uttaksperioder, virkningsdatoUttakNyeRegler);
 
@@ -111,7 +112,7 @@ const UttaksperiodeListe = (props: UttaksperiodeListeProps): JSX.Element => {
                         size="small"
                         className={styles.redigerDato}
                         onClick={redigerVirkningsdatoFunc}
-                        disabled={status === behandlingStatus.AVSLUTTET}
+                        disabled={status === behandlingStatus.AVSLUTTET || readOnly}
                       >
                         Rediger
                       </Button>

diff --git a/packages/prosess-uttak/src/ui/components/vurderDato/VurderDato.tsx b/packages/prosess-uttak/src/ui/components/vurderDato/VurderDato.tsx
@@ -1,14 +1,15 @@
 import { Accordion, Alert, BodyLong, Label } from '@navikt/ds-react';
-import React, { useEffect } from 'react';
-import VurderDatoAksjonspunkt from './VurderDatoAksjonspunkt';
+import { useEffect } from 'react';
 import styles from './VurderDato.module.css';
+import VurderDatoAksjonspunkt from './VurderDatoAksjonspunkt';
 
 interface Props {
   avbryt?: () => void;
   initialValues?: {
     virkningsdato: string;
     begrunnelse: string;
   };
+  readOnly: boolean;
 }
 
 // eslint-disable-next-line consistent-return
@@ -27,7 +28,7 @@ const scrollToVurderDatoContainer = () => {
     };
   }
 };
-const VurderDato = ({ avbryt, initialValues }: Props) => {
+const VurderDato = ({ avbryt, initialValues, readOnly }: Props) => {
   useEffect(() => {
     // avbryt er kun definert når vi skal redigere et løst aksjonspunkt
     if (typeof avbryt === 'function') {
@@ -73,7 +74,7 @@ const VurderDato = ({ avbryt, initialValues }: Props) => {
           </Accordion.Item>
         </Accordion>
       </Alert>
-      <VurderDatoAksjonspunkt avbryt={avbryt} initialValues={initialValues} />
+      <VurderDatoAksjonspunkt avbryt={avbryt} initialValues={initialValues} readOnly={readOnly} />
     </div>
   );
 };

diff --git a/packages/prosess-uttak/src/ui/components/vurderDato/VurderDatoAksjonspunkt.tsx b/packages/prosess-uttak/src/ui/components/vurderDato/VurderDatoAksjonspunkt.tsx
@@ -17,9 +17,10 @@ interface Props {
     virkningsdato: string;
     begrunnelse: string;
   };
+  readOnly: boolean;
 }
 
-const VurderDatoAksjonspunkt = ({ avbryt, initialValues }: Props) => {
+const VurderDatoAksjonspunkt = ({ avbryt, initialValues, readOnly }: Props) => {
   const { løsAksjonspunktVurderDatoNyRegelUttak } = React.useContext(ContainerContext);
   const formMethods = useForm<FormData>({
     defaultValues: initialValues,
@@ -39,24 +40,28 @@ const VurderDatoAksjonspunkt = ({ avbryt, initialValues }: Props) => {
           fromDate={new Date('1 Jan 2019')}
           toDate={new Date('31 Dec 2025')}
           validate={[required, hasValidDate]}
+          isReadOnly={readOnly}
         />
         <TextAreaField
           name="begrunnelse"
           label="Begrunnelse"
           size="small"
           maxLength={1500}
           validate={[required, minLength(5), maxLength(1500)]}
+          readOnly={readOnly}
         />
-        <div className={styles.knapper}>
-          <Button size="small" type="submit" className={styles.bekreft}>
-            Bekreft og fortsett
-          </Button>
-          {avbryt && (
-            <Button variant="secondary" type="button" size="small" onClick={avbryt}>
-              Avbryt
+        {!readOnly && (
+          <div className={styles.knapper}>
+            <Button size="small" type="submit" className={styles.bekreft}>
+              Bekreft og fortsett
             </Button>
-          )}
-        </div>
+            {avbryt && (
+              <Button variant="secondary" type="button" size="small" onClick={avbryt}>
+                Avbryt
+              </Button>
+            )}
+          </div>
+        )}
       </div>
     </Form>
   );