feat: Lisää 'likainen lomake' varoitukset tabien-välillä siirtymiseen…

… (nähtävilläolo, hyväksymispäätös) (#358)
finnishtransportagency · Sep 8, 2022 · dda6393 · dda6393
1 parent 2a83510
commit dda6393
Show file tree

Hide file tree

Showing 11 changed files with 250 additions and 175 deletions.
diff --git a/src/components/TallentamattomiaMuutoksiaDialog.tsx b/src/components/TallentamattomiaMuutoksiaDialog.tsx
@@ -0,0 +1,32 @@
+import { DialogActions, DialogContent } from "@mui/material";
+import React, { FC } from "react";
+import Button from "./button/Button";
+import HassuDialog from "./HassuDialog";
+import HassuStack from "./layout/HassuStack";
+
+const TallentamattomiaMuutoksiaDialog: FC<{ open: boolean; handleClickClose: () => void; handleClickOk: () => void }> = ({
+  open,
+  handleClickClose,
+  handleClickOk,
+}) => {
+  return (
+    <HassuDialog title="Tallentamattomia muutoksia" open={open} onClose={handleClickClose}>
+      <DialogContent>
+        <HassuStack>
+          <p>
+            Olet tehnyt sivulle muutoksia, joita ei ole tallennettu. Tehdyt muutokset menetetään, jos poistut sivulta. Haluatko poistua
+            tallentamatta?
+          </p>
+        </HassuStack>
+      </DialogContent>
+      <DialogActions>
+        <Button primary onClick={handleClickOk}>
+          Hylkää muutokset ja siirry
+        </Button>
+        <Button onClick={handleClickClose}>Peruuta</Button>
+      </DialogActions>
+    </HassuDialog>
+  );
+};
+
+export default TallentamattomiaMuutoksiaDialog;
diff --git a/src/components/projekti/hyvaksyminen/aineistot/Muokkausnakyma.tsx b/src/components/projekti/hyvaksyminen/aineistot/Muokkausnakyma.tsx
@@ -1,6 +1,6 @@
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Aineisto, AineistoInput, TallennaProjektiInput } from "@services/api";
-import React, { ReactElement, useMemo } from "react";
+import React, { ReactElement, useEffect, useMemo } from "react";
 import { UseFormProps, useForm, FormProvider } from "react-hook-form";
 import { useProjekti } from "src/hooks/useProjekti";
 import { nahtavillaoloAineistotSchema } from "src/schemas/nahtavillaoloAineistot";
@@ -38,17 +38,21 @@ const getDefaultValueForAineistoNahtavilla = (aineistot: Aineisto[] | undefined
   }, {});
 };
 
-export default function Muokkausnakyma(): ReactElement {
+interface Props {
+  setIsDirty: (value: React.SetStateAction<boolean>) => void;
+}
+
+export default function Muokkausnakyma({ setIsDirty }: Props): ReactElement {
   const { data: projekti } = useProjekti({ revalidateOnMount: true });
 
-  return <>{projekti && <MuokkausnakymaForm projekti={projekti} />}</>;
+  return <>{projekti && <MuokkausnakymaForm projekti={projekti} setIsDirty={setIsDirty} />}</>;
 }
 
 interface MuokkausnakymaFormProps {
   projekti: ProjektiLisatiedolla;
 }
 
-function MuokkausnakymaForm({ projekti }: MuokkausnakymaFormProps) {
+function MuokkausnakymaForm({ projekti, setIsDirty }: MuokkausnakymaFormProps & Props) {
   const defaultValues: HyvaksymisPaatosVaiheAineistotFormValues = useMemo(() => {
     const hyvaksymisPaatos: AineistoInput[] =
       projekti.hyvaksymisPaatosVaihe?.hyvaksymisPaatos?.map(({ dokumenttiOid, nimi, jarjestys }) => ({
@@ -76,14 +80,18 @@ function MuokkausnakymaForm({ projekti }: MuokkausnakymaFormProps) {
     formState: { isDirty },
   } = useFormReturn;
 
+  useEffect(() => {
+    setIsDirty(isDirty);
+  }, [isDirty, setIsDirty]);
+
   useLeaveConfirm(isDirty);
 
   return (
     <FormProvider {...useFormReturn}>
       <h3 className="vayla-small-title">Päätös ja päätöksen liitteenä olevat aineistot</h3>
       <p>
-        Liitä Liikenne- ja viestintäviraston päätös. Liitettävä päätös haetaan Projektivelhosta. Päätös ja sen liitteenä
-        oleva aineisto julkaistaan palvelun julkisella puolella kuulutuksen julkaisupäivänä.
+        Liitä Liikenne- ja viestintäviraston päätös. Liitettävä päätös haetaan Projektivelhosta. Päätös ja sen liitteenä oleva aineisto
+        julkaistaan palvelun julkisella puolella kuulutuksen julkaisupäivänä.
       </p>
       <Notification type={NotificationType.INFO_GRAY}>
         Huomioithan, että suunnitelma-aineistojen tulee täyttää saavutettavuusvaatimukset.

diff --git a/src/components/projekti/hyvaksyminen/aineistot/index.tsx b/src/components/projekti/hyvaksyminen/aineistot/index.tsx
@@ -3,9 +3,13 @@ import { useProjekti } from "src/hooks/useProjekti";
 import Lukunakyma from "./Lukunakyma";
 import Muokkausnakyma from "./Muokkausnakyma";
 
-export default function Aineistot() {
+interface Props {
+  setIsDirty: (value: React.SetStateAction<boolean>) => void;
+}
+
+export default function Aineistot({ setIsDirty }: Props) {
   const { data: projekti } = useProjekti();
 
   const voiMuokata = !projekti?.hyvaksymisPaatosVaiheJulkaisut?.length;
-  return voiMuokata ? <Muokkausnakyma /> : <Lukunakyma />;
+  return voiMuokata ? <Muokkausnakyma setIsDirty={setIsDirty} /> : <Lukunakyma />;
 }
diff --git a/src/components/projekti/hyvaksyminen/kuulutuksenTiedot/index.tsx b/src/components/projekti/hyvaksyminen/kuulutuksenTiedot/index.tsx
@@ -1,7 +1,7 @@
 import { yupResolver } from "@hookform/resolvers/yup";
 import { TallennaProjektiInput, KirjaamoOsoite, HyvaksymisPaatosVaiheInput } from "@services/api";
 import Notification, { NotificationType } from "@components/notification/Notification";
-import React, { ReactElement, useMemo } from "react";
+import React, { ReactElement, useEffect, useMemo } from "react";
 import { UseFormProps, useForm, FormProvider } from "react-hook-form";
 import { ProjektiLisatiedolla, useProjekti } from "src/hooks/useProjekti";
 import { hyvaksymispaatosKuulutusSchema } from "src/schemas/hyvaksymispaatosKuulutus";
@@ -25,18 +25,22 @@ export type KuulutuksenTiedotFormValues = Pick<TallennaProjektiInput, "oid"> & {
   };
 };
 
-export default function KuulutuksenTiedot(): ReactElement {
+interface Props {
+  setIsDirty: (value: React.SetStateAction<boolean>) => void;
+}
+
+export default function KuulutuksenTiedot({ setIsDirty }: Props): ReactElement {
   const { data: projekti } = useProjekti({ revalidateOnMount: true });
   const { data: kirjaamoOsoitteet } = useKirjaamoOsoitteet();
-  return <>{projekti && kirjaamoOsoitteet && <KuulutuksenTiedotForm {...{ kirjaamoOsoitteet, projekti }} />}</>;
+  return <>{projekti && kirjaamoOsoitteet && <KuulutuksenTiedotForm {...{ kirjaamoOsoitteet, projekti, setIsDirty }} />}</>;
 }
 
 interface KuulutuksenTiedotFormProps {
   projekti: ProjektiLisatiedolla;
   kirjaamoOsoitteet: KirjaamoOsoite[];
 }
 
-function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet }: KuulutuksenTiedotFormProps) {
+function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet, setIsDirty }: KuulutuksenTiedotFormProps & Props) {
   const pdfFormRef = React.useRef<React.ElementRef<typeof PdfPreviewForm>>(null);
 
   const defaultValues: KuulutuksenTiedotFormValues = useMemo(() => {
@@ -51,9 +55,7 @@ function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet }: KuulutuksenTiedo
           : [],
         kuulutusYhteysHenkilot:
           projekti?.kayttoOikeudet
-            ?.filter(({ kayttajatunnus }) =>
-              projekti?.hyvaksymisPaatosVaihe?.kuulutusYhteysHenkilot?.includes(kayttajatunnus)
-            )
+            ?.filter(({ kayttajatunnus }) => projekti?.hyvaksymisPaatosVaihe?.kuulutusYhteysHenkilot?.includes(kayttajatunnus))
             .map(({ kayttajatunnus }) => kayttajatunnus) || [],
         ilmoituksenVastaanottajat: defaultVastaanottajat(
           projekti,
@@ -79,6 +81,10 @@ function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet }: KuulutuksenTiedo
     formState: { isDirty },
   } = useFormReturn;
 
+  useEffect(() => {
+    setIsDirty(isDirty);
+  }, [isDirty, setIsDirty]);
+
   useLeaveConfirm(isDirty);
 
   const voiMuokata = !projekti?.hyvaksymisPaatosVaiheJulkaisut || projekti.hyvaksymisPaatosVaiheJulkaisut.length < 1;
@@ -87,8 +93,7 @@ function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet }: KuulutuksenTiedo
     <>
       {projekti.hyvaksymisPaatosVaihe?.palautusSyy && (
         <Notification type={NotificationType.WARN}>
-          {"Hyväksymisvaihejulkaisu on palautettu korjattavaksi. Palautuksen syy: " +
-            projekti.hyvaksymisPaatosVaihe.palautusSyy}
+          {"Hyväksymisvaihejulkaisu on palautettu korjattavaksi. Palautuksen syy: " + projekti.hyvaksymisPaatosVaihe.palautusSyy}
         </Notification>
       )}
 
@@ -110,23 +115,19 @@ function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet }: KuulutuksenTiedo
           </FormProvider>
         </>
       )}
-      {!voiMuokata &&
-        projekti &&
-        projekti.hyvaksymisPaatosVaiheJulkaisut?.[projekti.hyvaksymisPaatosVaiheJulkaisut.length - 1] && (
-          <>
-            <FormProvider {...useFormReturn}>
-              <form>
-                <Lukunakyma
-                  projekti={projekti}
-                  hyvaksymisPaatosVaiheJulkaisu={
-                    projekti.hyvaksymisPaatosVaiheJulkaisut[projekti.hyvaksymisPaatosVaiheJulkaisut.length - 1]
-                  }
-                />
-                <Painikkeet projekti={projekti} />
-              </form>
-            </FormProvider>
-          </>
-        )}
+      {!voiMuokata && projekti && projekti.hyvaksymisPaatosVaiheJulkaisut?.[projekti.hyvaksymisPaatosVaiheJulkaisut.length - 1] && (
+        <>
+          <FormProvider {...useFormReturn}>
+            <form>
+              <Lukunakyma
+                projekti={projekti}
+                hyvaksymisPaatosVaiheJulkaisu={projekti.hyvaksymisPaatosVaiheJulkaisut[projekti.hyvaksymisPaatosVaiheJulkaisut.length - 1]}
+              />
+              <Painikkeet projekti={projekti} />
+            </form>
+          </FormProvider>
+        </>
+      )}
       <PdfPreviewForm ref={pdfFormRef} />
     </>
   );

diff --git a/src/components/projekti/nahtavillaolo/kuulutuksentiedot/KuulutuksenTiedot.tsx b/src/components/projekti/nahtavillaolo/kuulutuksentiedot/KuulutuksenTiedot.tsx
@@ -1,7 +1,7 @@
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Kieli, KirjaamoOsoite, TallennaProjektiInput } from "@services/api";
 import Notification, { NotificationType } from "@components/notification/Notification";
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import { UseFormProps, useForm, FormProvider } from "react-hook-form";
 import { ProjektiLisatiedolla, useProjekti } from "src/hooks/useProjekti";
 import { nahtavillaoloKuulutusSchema } from "src/schemas/nahtavillaoloKuulutus";
@@ -25,14 +25,18 @@ export type KuulutuksenTiedotFormValues = Required<{
   [K in keyof PickedTallennaProjektiInput]: NonNullable<PickedTallennaProjektiInput[K]>;
 }>;
 
-export default function KuulutuksenTiedot() {
+interface Props {
+  setIsDirty: (value: React.SetStateAction<boolean>) => void;
+}
+
+export default function KuulutuksenTiedot({ setIsDirty }: Props) {
   const { data: projekti } = useProjekti({ revalidateOnMount: true });
   const { data: kirjaamoOsoitteet } = useKirjaamoOsoitteet();
 
   return (
     <>
       {projekti && kirjaamoOsoitteet && (
-        <KuulutuksenTiedotForm projekti={projekti} kirjaamoOsoitteet={kirjaamoOsoitteet} />
+        <KuulutuksenTiedotForm setIsDirty={setIsDirty} projekti={projekti} kirjaamoOsoitteet={kirjaamoOsoitteet} />
       )}
     </>
   );
@@ -43,7 +47,7 @@ interface KuulutuksenTiedotFormProps {
   kirjaamoOsoitteet: KirjaamoOsoite[];
 }
 
-function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet }: KuulutuksenTiedotFormProps) {
+function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet, setIsDirty }: KuulutuksenTiedotFormProps & Props) {
   const pdfFormRef = React.useRef<React.ElementRef<typeof PdfPreviewForm>>(null);
 
   const defaultValues: KuulutuksenTiedotFormValues = useMemo(() => {
@@ -55,28 +59,27 @@ function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet }: KuulutuksenTiedo
     // Jos kieli ei ole kielitiedoissa kyseisen kielen kenttää ei tule lisätä hankkeenKuvaus olioon
     // Tästä syystä pickBy:llä poistetaan undefined hankkeenkuvaus tiedot.
     const nahtavillaOloHankkeenKuvaus = projekti.nahtavillaoloVaihe?.hankkeenKuvaus;
-    const hankkeenKuvaus: KuulutuksenTiedotFormValues["nahtavillaoloVaihe"]["hankkeenKuvaus"] =
-      !!nahtavillaOloHankkeenKuvaus
-        ? {
-            SUOMI: nahtavillaOloHankkeenKuvaus.SUOMI || "",
-            ...pickBy(
-              {
-                RUOTSI: hasRuotsinKieli ? nahtavillaOloHankkeenKuvaus.RUOTSI || "" : undefined,
-                SAAME: hasSaamenKieli ? nahtavillaOloHankkeenKuvaus.SAAME || "" : undefined,
-              },
-              (value) => value !== undefined
-            ),
-          }
-        : {
-            SUOMI: projekti.suunnitteluVaihe?.hankkeenKuvaus?.SUOMI || "",
-            ...pickBy(
-              {
-                RUOTSI: hasRuotsinKieli ? projekti.suunnitteluVaihe?.hankkeenKuvaus?.RUOTSI || "" : undefined,
-                SAAME: hasSaamenKieli ? projekti.suunnitteluVaihe?.hankkeenKuvaus?.SAAME || "" : undefined,
-              },
-              (value) => value !== undefined
-            ),
-          };
+    const hankkeenKuvaus: KuulutuksenTiedotFormValues["nahtavillaoloVaihe"]["hankkeenKuvaus"] = !!nahtavillaOloHankkeenKuvaus
+      ? {
+          SUOMI: nahtavillaOloHankkeenKuvaus.SUOMI || "",
+          ...pickBy(
+            {
+              RUOTSI: hasRuotsinKieli ? nahtavillaOloHankkeenKuvaus.RUOTSI || "" : undefined,
+              SAAME: hasSaamenKieli ? nahtavillaOloHankkeenKuvaus.SAAME || "" : undefined,
+            },
+            (value) => value !== undefined
+          ),
+        }
+      : {
+          SUOMI: projekti.suunnitteluVaihe?.hankkeenKuvaus?.SUOMI || "",
+          ...pickBy(
+            {
+              RUOTSI: hasRuotsinKieli ? projekti.suunnitteluVaihe?.hankkeenKuvaus?.RUOTSI || "" : undefined,
+              SAAME: hasSaamenKieli ? projekti.suunnitteluVaihe?.hankkeenKuvaus?.SAAME || "" : undefined,
+            },
+            (value) => value !== undefined
+          ),
+        };
 
     return {
       oid: projekti.oid,
@@ -90,9 +93,7 @@ function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet }: KuulutuksenTiedo
           : [],
         kuulutusYhteysHenkilot:
           projekti?.kayttoOikeudet
-            ?.filter(({ kayttajatunnus }) =>
-              projekti?.nahtavillaoloVaihe?.kuulutusYhteysHenkilot?.includes(kayttajatunnus)
-            )
+            ?.filter(({ kayttajatunnus }) => projekti?.nahtavillaoloVaihe?.kuulutusYhteysHenkilot?.includes(kayttajatunnus))
             .map(({ kayttajatunnus }) => kayttajatunnus) || [],
         ilmoituksenVastaanottajat: defaultVastaanottajat(
           projekti,
@@ -116,6 +117,10 @@ function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet }: KuulutuksenTiedo
     formState: { isDirty },
   } = useFormReturn;
 
+  useEffect(() => {
+    setIsDirty(isDirty);
+  }, [isDirty, setIsDirty]);
+
   useLeaveConfirm(isDirty);
 
   const voiMuokata = !projekti?.nahtavillaoloVaiheJulkaisut || projekti.nahtavillaoloVaiheJulkaisut.length < 1;
@@ -124,8 +129,7 @@ function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet }: KuulutuksenTiedo
     <>
       {projekti.nahtavillaoloVaihe?.palautusSyy && (
         <Notification type={NotificationType.WARN}>
-          {"Nahtävilläolovaihejulkaisu on palautettu korjattavaksi. Palautuksen syy: " +
-            projekti.nahtavillaoloVaihe.palautusSyy}
+          {"Nahtävilläolovaihejulkaisu on palautettu korjattavaksi. Palautuksen syy: " + projekti.nahtavillaoloVaihe.palautusSyy}
         </Notification>
       )}
       {voiMuokata && (
@@ -145,19 +149,15 @@ function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet }: KuulutuksenTiedo
           <PdfPreviewForm ref={pdfFormRef} />
         </>
       )}
-      {!voiMuokata &&
-        projekti &&
-        projekti.nahtavillaoloVaiheJulkaisut?.[projekti.nahtavillaoloVaiheJulkaisut.length - 1] && (
-          <FormProvider {...useFormReturn}>
-            <Lukunakyma
-              projekti={projekti}
-              nahtavillaoloVaiheJulkaisu={
-                projekti.nahtavillaoloVaiheJulkaisut[projekti.nahtavillaoloVaiheJulkaisut.length - 1]
-              }
-            />
-            <Painikkeet projekti={projekti} />
-          </FormProvider>
-        )}
+      {!voiMuokata && projekti && projekti.nahtavillaoloVaiheJulkaisut?.[projekti.nahtavillaoloVaiheJulkaisut.length - 1] && (
+        <FormProvider {...useFormReturn}>
+          <Lukunakyma
+            projekti={projekti}
+            nahtavillaoloVaiheJulkaisu={projekti.nahtavillaoloVaiheJulkaisut[projekti.nahtavillaoloVaiheJulkaisut.length - 1]}
+          />
+          <Painikkeet projekti={projekti} />
+        </FormProvider>
+      )}
     </>
   );
 }
diff --git a/src/components/projekti/nahtavillaolo/nahtavilleAsetettavatAineistot/Muokkausnakyma.tsx b/src/components/projekti/nahtavillaolo/nahtavilleAsetettavatAineistot/Muokkausnakyma.tsx
@@ -1,6 +1,6 @@
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Aineisto, AineistoInput, TallennaProjektiInput } from "@services/api";
-import React, { ReactElement, useMemo } from "react";
+import React, { ReactElement, useEffect, useMemo } from "react";
 import { UseFormProps, useForm, FormProvider } from "react-hook-form";
 import { useProjekti } from "src/hooks/useProjekti";
 import { nahtavillaoloAineistotSchema } from "src/schemas/nahtavillaoloAineistot";
@@ -37,16 +37,20 @@ const getDefaultValueForAineistoNahtavilla = (aineistot: Aineisto[] | undefined
   }, {});
 };
 
-export default function Muokkausnakyma(): ReactElement {
+interface Props {
+  setIsDirty: (value: React.SetStateAction<boolean>) => void;
+}
+
+export default function Muokkausnakyma({ setIsDirty }: Props): ReactElement {
   const { data: projekti } = useProjekti({ revalidateOnMount: true });
-  return <>{projekti && <MuokkausnakymaLomake projekti={projekti} />}</>;
+  return <>{projekti && <MuokkausnakymaLomake setIsDirty={setIsDirty} projekti={projekti} />}</>;
 }
 
 interface MuokkausnakymaLomakeProps {
   projekti: ProjektiLisatiedolla;
 }
 
-function MuokkausnakymaLomake({ projekti }: MuokkausnakymaLomakeProps) {
+function MuokkausnakymaLomake({ projekti, setIsDirty }: MuokkausnakymaLomakeProps & Props) {
   const defaultValues: NahtavilleAsetettavatAineistotFormValues = useMemo(() => {
     const lisaAineisto: AineistoInput[] =
       projekti.nahtavillaoloVaihe?.lisaAineisto?.map(({ dokumenttiOid, nimi, jarjestys }) => ({
@@ -74,6 +78,10 @@ function MuokkausnakymaLomake({ projekti }: MuokkausnakymaLomakeProps) {
     formState: { isDirty },
   } = useFormReturn;
 
+  useEffect(() => {
+    setIsDirty(isDirty);
+  }, [isDirty, setIsDirty]);
+
   useLeaveConfirm(isDirty);
 
   return (