Ny maal desing (#1315)

* text panel blir automatisk apnet når man skal lage seg et mal * Lukk modal ved lagring * Clean up * små ting * Fix loading når mal blir lagret, text feild blir ikke borte når side refreshes * code fix --------- Co-authored-by: Sigurd Grøneng <sigurd.groneng@nav.no>
navikt · Oct 11, 2024 · 9a4f974 · 9a4f974
1 parent 4fbdc31
commit 9a4f974
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 40 deletions.
diff --git a/src/moduler/mal/MalForm.tsx b/src/moduler/mal/MalForm.tsx
@@ -3,7 +3,7 @@ import { Button, Textarea } from '@navikt/ds-react';
 import { isFulfilled } from '@reduxjs/toolkit';
 import React, { MutableRefObject, useLayoutEffect, useRef } from 'react';
 import { useForm } from 'react-hook-form';
-import { useSelector } from 'react-redux';
+import { shallowEqual, useSelector } from 'react-redux';
 import { z } from 'zod';
 
 import useAppDispatch from '../../felles-komponenter/hooks/useAppDispatch';
@@ -12,6 +12,7 @@ import Feilmelding from '../feilmelding/Feilmelding';
 import { oppdaterMal } from './aktivitetsmal-slice';
 import { hentMalListe } from './malliste-slice';
 import { logKlikkKnapp } from '../../amplitude/amplitude';
+import { selectErUnderOppfolging, selectHarSkriveTilgang } from '../oppfolging-status/oppfolging-selector';
 
 const schema = z.object({
     mal: z.string().min(1, 'Feltet må fylles ut').max(500, 'Du må korte ned teksten til 500 tegn'),
@@ -61,7 +62,7 @@ const MalForm = (props: Props) => {
         register,
         handleSubmit,
         watch,
-        formState: { errors, isDirty },
+        formState: { errors, isDirty, isSubmitting },
     } = useForm<MalFormValues>({ defaultValues, resolver: zodResolver(schema), shouldFocusError: true });
 
     if (dirtyRef) {
@@ -71,6 +72,8 @@ const MalForm = (props: Props) => {
     const malValue = watch('mal'); // for <Textarea /> character-count to work
 
     const feil = useSelector(selectOppdaterMalFeil);
+    const harSkriveTilgang = useSelector(selectHarSkriveTilgang, shallowEqual);
+    const underOppfolging = useSelector(selectErUnderOppfolging, shallowEqual);
 
     return (
         <form className="my-4 space-y-8" onSubmit={handleSubmit((data) => onSubmit(data))}>
@@ -81,9 +84,10 @@ const MalForm = (props: Props) => {
                 {...register('mal')}
                 error={errors.mal && errors.mal.message}
                 value={malValue}
+                disabled={isSubmitting || !harSkriveTilgang || !underOppfolging}
             />
             <Feilmelding feilmeldinger={feil} />
-            <Button onClick={() => logKlikkKnapp('Lagre mål')}>Lagre</Button>
+            <Button onClick={() => logKlikkKnapp('Lagre mål')} disabled={isSubmitting}>Lagre</Button>
         </form>
     );
 };

diff --git a/src/moduler/mal/mal-container.tsx b/src/moduler/mal/mal-container.tsx
@@ -1,16 +1,17 @@
-import React, { MutableRefObject, useState } from 'react';
+import React, { MutableRefObject, useEffect, useState } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 
 import { loggMittMalLagre } from '../../felles-komponenter/utils/logging';
 import { useErVeileder } from '../../Provider';
-import { selectViserHistoriskPeriode } from '../filtrering/filter/filter-selector';
 import { selectErUnderOppfolging, selectHarSkriveTilgang } from '../oppfolging-status/oppfolging-selector';
 import { selectGjeldendeMal } from './aktivitetsmal-selector';
-import Malvisning from './mal-visning';
 import MalForm from './MalForm';
+import { selectViserHistoriskPeriode } from '../filtrering/filter/filter-selector';
+import Malvisning from './mal-visning';
 
 interface Props {
     dirtyRef: MutableRefObject<boolean>;
+    onLagre: () => void;
 }
 
 const MalContainer = (props: Props) => {
@@ -22,7 +23,10 @@ const MalContainer = (props: Props) => {
 
     const mal = malData && malData.mal;
 
-    const [edit, setEdit] = useState(!viserHistoriskPeriode && !mal && underOppfolging && harSkriveTilgang);
+    const [edit, setEdit] = useState( !viserHistoriskPeriode && underOppfolging && harSkriveTilgang);
+    useEffect(() => {
+        setEdit(!viserHistoriskPeriode && underOppfolging && harSkriveTilgang);
+    }, [viserHistoriskPeriode, underOppfolging, harSkriveTilgang]);
 
     if (edit) {
         return (
@@ -33,12 +37,14 @@ const MalContainer = (props: Props) => {
                     setEdit(false);
                     props.dirtyRef.current = false;
                     loggMittMalLagre(erVeileder);
+                    props.onLagre();
                 }}
             />
         );
     }
 
-    return <Malvisning onClick={() => setEdit(true)} />;
+   return <Malvisning/>;
+
 };
 
 export default MalContainer;
diff --git a/src/moduler/mal/mal-modal.tsx b/src/moduler/mal/mal-modal.tsx
@@ -3,8 +3,7 @@ import { useSelector } from 'react-redux';
 
 import Modal from '../../felles-komponenter/modal/Modal';
 import { selectHentMalListeFeil } from '../feilmelding/feil-selector';
-import { useNavigate } from 'react-router-dom';
-import { useRoutes } from '../../routing/useRoutes';
+
 
 interface Props {
     children: React.ReactNode;
@@ -15,12 +14,9 @@ interface Props {
 export function MalModal(props: Props) {
     const { children, heading } = props;
     const feil = useSelector(selectHentMalListeFeil);
-    const navigate = useNavigate();
-    const { hovedsideRoute } = useRoutes();
-    const tilHovedside = () => navigate(hovedsideRoute());
 
     return (
-        <Modal onClose={tilHovedside} onRequestClose={props.onRequestClosed} feilmeldinger={feil} heading={heading}>
+        <Modal lukkPåKlikkUtenfor={true} onRequestClose={props.onRequestClosed} feilmeldinger={feil} heading={heading}>
             {children}
         </Modal>
     );

diff --git a/src/moduler/mal/mal-visning.tsx b/src/moduler/mal/mal-visning.tsx
@@ -2,23 +2,14 @@ import { BodyLong } from '@navikt/ds-react';
 import React from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 
-import { HiddenIfHovedknapp } from '../../felles-komponenter/hidden-if/HiddenIfHovedknapp';
 import { selectViserHistoriskPeriode } from '../filtrering/filter/filter-selector';
-import { selectErUnderOppfolging, selectHarSkriveTilgang } from '../oppfolging-status/oppfolging-selector';
 import { selectGjeldendeMal } from './aktivitetsmal-selector';
 import { selectMalListe } from './malliste-selector';
 
-interface Props {
-    onClick: () => void;
-}
-
-const Malvisning = (props: Props) => {
-    const { onClick } = props;
+const Malvisning = () => {
     const malData = useSelector(selectGjeldendeMal, shallowEqual);
     const historiskeMal = useSelector(selectMalListe, shallowEqual);
     const historiskVisning = useSelector(selectViserHistoriskPeriode, shallowEqual);
-    const harSkriveTilgang = useSelector(selectHarSkriveTilgang, shallowEqual);
-    const underOppfolging = useSelector(selectErUnderOppfolging, shallowEqual);
 
     const mal = malData && malData.mal;
     const malText: string =
@@ -27,13 +18,6 @@ const Malvisning = (props: Props) => {
     return (
         <div className="mb-8">
             <BodyLong className="mb-8">{malText}</BodyLong>
-            <HiddenIfHovedknapp
-                onClick={onClick}
-                hidden={historiskVisning}
-                disabled={!harSkriveTilgang || !underOppfolging}
-            >
-                Rediger
-            </HiddenIfHovedknapp>
         </div>
     );
 };

diff --git a/src/moduler/mal/mal.tsx b/src/moduler/mal/mal.tsx
@@ -4,19 +4,15 @@ import { shallowEqual, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 
 import { CONFIRM } from '../../felles-komponenter/hooks/useConfirmOnBeforeUnload';
-import Innholdslaster from '../../felles-komponenter/utils/Innholdslaster';
 import { useRoutes } from '../../routing/useRoutes';
 import { selectViserHistoriskPeriode } from '../filtrering/filter/filter-selector';
 import { selectErUnderOppfolging, selectHarSkriveTilgang } from '../oppfolging-status/oppfolging-selector';
-import { selectMalStatus } from './aktivitetsmal-selector';
 import MalContainer from './mal-container';
 import MalHistorikk from './mal-historikk';
 import { MalModal } from './mal-modal';
-import { selectMalListe, selectMalListeStatus } from './malliste-selector';
+import { selectMalListe } from './malliste-selector';
 
 const Mal = () => {
-    const malStatus = useSelector(selectMalStatus, shallowEqual);
-    const malListeStatus = useSelector(selectMalListeStatus, shallowEqual);
     const viserHistoriskPeriode = useSelector(selectViserHistoriskPeriode, shallowEqual);
     const underOppfolging = useSelector(selectErUnderOppfolging, shallowEqual);
     const harSkriveTilgang = useSelector(selectHarSkriveTilgang, shallowEqual);
@@ -27,7 +23,6 @@ const Mal = () => {
     const navigate = useNavigate();
     const { hovedsideRoute } = useRoutes();
 
-    const avhengigheter = [malStatus, malListeStatus];
 
     const onModalRequestClosed = () => {
         if (!isDirty.current || window.confirm(CONFIRM)) {
@@ -54,12 +49,10 @@ const Mal = () => {
                         <li>Hva slags arbeidsoppgaver ønsker du deg?</li>
                     </ul>
                 </ReadMore>
-                <Innholdslaster className="flex m-auto" avhengigheter={avhengigheter} alleOK>
                     <section>
-                        <MalContainer dirtyRef={isDirty} />
+                        <MalContainer onLagre={onModalRequestClosed} dirtyRef={isDirty} />
                         <MalHistorikk />
                     </section>
-                </Innholdslaster>
             </div>
         </MalModal>
     );