feat: Lisää nähtävilläolosivulle osioitu sivupohja ja tallennusnapit (#…

…258)

src/components/projekti/ProjektiSideNavigation.tsx

@@ -52,7 +52,16 @@ export default function ProjektiSideNavigation(): ReactElement {
       title: "Nähtävilläolovaihe",
       status: Status.SUUNNITTELU,
       href: oid && `/yllapito/projekti/${oid}/nahtavillaolo`,
-      disabled: true,
+      disabled: !!(
+        projekti?.status &&
+        // TODO Correct this when we can get projects to Status.NAHTAVILLAOLO
+        ![
+          Status.ALOITUSKUULUTUS,
+          Status.EI_JULKAISTU,
+          Status.EI_JULKAISTU_PROJEKTIN_HENKILOT,
+          Status.SUUNNITTELU,
+        ].includes(projekti.status)
+      ),
     },
   ];
 

src/components/projekti/nahtavillaolo/NahtavillaoloPainikkeet.tsx

@@ -0,0 +1,49 @@
+import Button from "@components/button/Button";
+import HassuSpinner from "@components/HassuSpinner";
+import Section from "@components/layout/Section";
+import { Stack } from "@mui/material";
+import { api } from "@services/api";
+import log from "loglevel";
+import React, { useState } from "react";
+import { useFormContext } from "react-hook-form";
+import { useProjektiRoute } from "src/hooks/useProjektiRoute";
+import useSnackbars from "src/hooks/useSnackbars";
+
+export default function NahtavillaoloPainikkeet() {
+  const { mutate: reloadProjekti } = useProjektiRoute();
+  const [isFormSubmitting, setIsFormSubmitting] = useState(false);
+  const { showSuccessMessage, showErrorMessage } = useSnackbars();
+
+  const { handleSubmit } = useFormContext<any>();
+
+  const saveSuunnitteluvaihe = async (formData: any) => {
+    await api.tallennaProjekti(formData);
+    if (reloadProjekti) await reloadProjekti();
+  };
+
+  const saveDraft = async (formData: any) => {
+    setIsFormSubmitting(true);
+    try {
+      await saveSuunnitteluvaihe(formData);
+      showSuccessMessage("Tallennus onnistui!");
+    } catch (e) {
+      log.error("OnSubmit Error", e);
+      showErrorMessage("Tallennuksessa tapahtui virhe");
+    }
+    setIsFormSubmitting(false);
+  };
+
+  return (
+    <>
+      <Section noDivider>
+        <Stack justifyContent={{ md: "flex-end" }} direction={{ xs: "column", md: "row" }}>
+          <Button onClick={handleSubmit(saveDraft)}>Tallenna Luonnos</Button>
+          <Button primary disabled onClick={undefined}>
+            Lähetä Hyväksyttäväksi
+          </Button>
+        </Stack>
+      </Section>
+      <HassuSpinner open={isFormSubmitting} />
+    </>
+  );
+}

src/components/projekti/nahtavillaolo/kuulutuksentiedot/HankkeenSisallonKuvaus.tsx

@@ -0,0 +1,16 @@
+import Section from "@components/layout/Section";
+import React from "react";
+
+type Props = {};
+
+export default function HankkeenSisallonKuvaus({}: Props) {
+  return (
+    <Section>
+      <h4 className="vayla-small-title">Kuulutus ja julkaisupäivä</h4>
+      <p>
+        Kansalaisten tulee muistututtaa suunnitelmista järjestelmän kautta viimeistään alla olevana päivämääränä.
+        Muistutusten päivämäärä määräytyy kuulutuksen nähtävilläoloajan mukaan ja sitä ei voi muokata.
+      </p>
+    </Section>
+  );
+}

src/components/projekti/nahtavillaolo/kuulutuksentiedot/IlmoituksenVastaanottajat.tsx

@@ -0,0 +1,18 @@
+import Section from "@components/layout/Section";
+import React from "react";
+
+type Props = {};
+
+export default function IlmoituksenVastaanottajat({}: Props) {
+  return (
+    <Section>
+      <h4 className="vayla-small-title">Ilmoituksen vastaanottajat</h4>
+      <p>
+        Kuulutuksesta lähetetään sähköpostitse tiedote viranomaiselle sekä projektia koskeville kunnille. Kunnat on
+        haettu Projektivelhosta. Jos tiedote pitää lähettää useammalle kuin yhdelle viranomaisorganisaatiolle, lisää
+        uusi rivi Lisää uusi -painikkeella.
+      </p>
+      <p>Jos kuntatiedoissa on virhe, tee korjaus Projektivelhoon.</p>
+    </Section>
+  );
+}

src/components/projekti/nahtavillaolo/kuulutuksentiedot/KuulutuksenJaIlmoituksenEsikatselu.tsx

@@ -0,0 +1,22 @@
+import Section from "@components/layout/Section";
+import Notification, { NotificationType } from "@components/notification/Notification";
+import React from "react";
+
+type Props = {};
+
+export default function KuulutuksenJaIlmoituksenEsikatselu({}: Props) {
+  return (
+    <Section>
+      <h4 className="vayla-small-title">Kuulutuksen ja ilmoituksen esikatselu</h4>
+      <Notification type={NotificationType.INFO_GRAY}>
+        Esikatsele kuulutus ja ilmoitus ennen hyväksyntään lähettämistä.{" "}
+      </Notification>
+      <p>
+        Kuulutuksesta lähetetään sähköpostitse tiedote viranomaiselle sekä projektia koskeville kunnille. Kunnat on
+        haettu Projektivelhosta. Jos tiedote pitää lähettää useammalle kuin yhdelle viranomaisorganisaatiolle, lisää
+        uusi rivi Lisää uusi -painikkeella.
+      </p>
+      <p>Jos kuntatiedoissa on virhe, tee korjaus Projektivelhoon.</p>
+    </Section>
+  );
+}

src/components/projekti/nahtavillaolo/kuulutuksentiedot/KuulutuksenTiedot.tsx

@@ -0,0 +1,50 @@
+import { yupResolver } from "@hookform/resolvers/yup";
+import { TallennaProjektiInput } from "@services/api";
+import React, { useEffect } from "react";
+import { UseFormProps, useForm, FormProvider } from "react-hook-form";
+import { useProjektiRoute } from "src/hooks/useProjektiRoute";
+import { nahtavillaoloAineistotSchema } from "src/schemas/nahtavillaoloAineistot";
+import NahtavillaoloPainikkeet from "../NahtavillaoloPainikkeet";
+import HankkeenSisallonKuvaus from "./HankkeenSisallonKuvaus";
+import KuulutuksenJaIlmoituksenEsikatselu from "./KuulutuksenJaIlmoituksenEsikatselu";
+import KuulutuksessaEsitettavatYhteystiedot from "./KuulutuksessaEsitettavatYhteystiedot";
+import KuulutusJaJulkaisuPaiva from "./KuulutusJaJulkaisuPaiva";
+import MuistutustenAntaminen from "./MuistutustenAntaminen";
+
+type Props = {};
+
+export type KuulutuksenTiedotFormValues = Pick<TallennaProjektiInput, "oid">;
+
+export default function NahtavilleAsetettavatAineistot({}: Props) {
+  const { data: projekti } = useProjektiRoute();
+  const formOptions: UseFormProps<KuulutuksenTiedotFormValues> = {
+    resolver: yupResolver(nahtavillaoloAineistotSchema, { abortEarly: false, recursive: true }),
+    mode: "onChange",
+    reValidateMode: "onChange",
+  };
+
+  const useFormReturn = useForm<KuulutuksenTiedotFormValues>(formOptions);
+  const { reset } = useFormReturn;
+
+  useEffect(() => {
+    if (projekti?.oid) {
+      const tallentamisTiedot: KuulutuksenTiedotFormValues = {
+        oid: projekti.oid,
+      };
+      reset(tallentamisTiedot);
+    }
+  }, [projekti, reset]);
+
+  return (
+    <FormProvider {...useFormReturn}>
+      <form>
+        <KuulutusJaJulkaisuPaiva />
+        <MuistutustenAntaminen />
+        <HankkeenSisallonKuvaus />
+        <KuulutuksessaEsitettavatYhteystiedot />
+        <KuulutuksenJaIlmoituksenEsikatselu />
+        <NahtavillaoloPainikkeet />
+      </form>
+    </FormProvider>
+  );
+}

src/components/projekti/nahtavillaolo/kuulutuksentiedot/KuulutuksessaEsitettavatYhteystiedot.tsx

@@ -0,0 +1,17 @@
+import Section from "@components/layout/Section";
+import React from "react";
+
+type Props = {};
+
+export default function KuulutuksessaEsitettavatYhteystiedot({}: Props) {
+  return (
+    <Section>
+      <h4 className="vayla-small-title">Kuulutuksessa esitettävät yhteystiedot</h4>
+      <p>
+        Voit valita kuulutuksessa esitettäviin yhteystietoihin projektiin tallennetun henkilön tai lisätä uuden
+        yhteystiedon. Projektipäällikön tiedot esitetään aina. Projektiin tallennettujen henkilöiden yhteystiedot
+        haetaan Projektin henkilöt -sivulle tallennetuista tiedoista.
+      </p>
+    </Section>
+  );
+}

src/components/projekti/nahtavillaolo/kuulutuksentiedot/KuulutusJaJulkaisuPaiva.tsx

@@ -0,0 +1,16 @@
+import Section from "@components/layout/Section";
+import React from "react";
+
+type Props = {};
+
+export default function KuulutusJaJulkaisuPaiva({}: Props) {
+  return (
+    <Section noDivider>
+      <h4 className="vayla-small-title">Kuulutus ja julkaisupäivä</h4>
+      <p>
+        Anna päivämäärä, jolle kuulutus päivätään ja nähtävilläolevan suunnitelman materiaalit julkaistaan palvelun
+        julkisella puolella.
+      </p>
+    </Section>
+  );
+}

src/components/projekti/nahtavillaolo/kuulutuksentiedot/MuistutustenAntaminen.tsx

@@ -0,0 +1,18 @@
+import Section from "@components/layout/Section";
+import React from "react";
+
+type Props = {};
+
+export default function MuistutustenAntaminen({}: Props) {
+  return (
+    <Section>
+      <h4 className="vayla-small-title">Kuulutus ja julkaisupäivä</h4>
+      <p>
+        Kirjoita nähtäville asettamisen kuulutusta varten tiivistetty sisällönkuvaus hankkeesta. Kuvauksen on hyvä
+        sisältää esimerkiksi tieto suunnittelukohteen alueellista rajauksesta (maantiealue ja vaikutusalue),
+        suunnittelun tavoitteet, vaikutukset ja toimenpiteet pääpiirteittäin karkealla tasolla. Älä lisää tekstiin
+        linkkejä.
+      </p>
+    </Section>
+  );
+}

src/components/projekti/nahtavillaolo/nahtavilleAsetettavatAineistot/LausuntopyyntoonLiitettavaLisaaineisto.tsx

@@ -0,0 +1,17 @@
+import Section from "@components/layout/Section";
+import React from "react";
+
+type Props = {};
+
+export default function LausuntopyyntoonLiitettavaLisaaineisto({}: Props) {
+  return (
+    <Section>
+      <h4 className="vayla-small-title">Lausuntopyyntöön liitettävä lisäaineisto</h4>
+      <p>
+        Lausuntopyyntöön liitettävää lisäaineistoa ei julkaista palvelun julkisella puolelle. Linkki lausuntopyyntöön
+        liitettävään aineistoon muodostuu, kun aineisto on tuotu Velhosta. Linkin takana oleva sisältö muodostuu
+        nähtäville asetetuista aineistoista sekä lausuntopyynnön lisäaineistosta.
+      </p>
+    </Section>
+  );
+}

src/components/projekti/nahtavillaolo/nahtavilleAsetettavatAineistot/NahtavilleAsetettavatAineistot.tsx

@@ -0,0 +1,44 @@
+import { yupResolver } from "@hookform/resolvers/yup";
+import { TallennaProjektiInput } from "@services/api";
+import React, { useEffect } from "react";
+import { UseFormProps, useForm, FormProvider } from "react-hook-form";
+import { useProjektiRoute } from "src/hooks/useProjektiRoute";
+import { nahtavillaoloAineistotSchema } from "src/schemas/nahtavillaoloAineistot";
+import NahtavillaoloPainikkeet from "../NahtavillaoloPainikkeet";
+import LausuntopyyntoonLiitettavaLisaaineisto from "./LausuntopyyntoonLiitettavaLisaaineisto";
+import SuunnitelmatJaAineistot from "./SuunnitelmatJaAineistot";
+
+type Props = {};
+
+export type NahtavilleAsetettavatAineistotFormValues = Pick<TallennaProjektiInput, "oid">;
+
+export default function NahtavilleAsetettavatAineistot({}: Props) {
+  const { data: projekti } = useProjektiRoute();
+  const formOptions: UseFormProps<NahtavilleAsetettavatAineistotFormValues> = {
+    resolver: yupResolver(nahtavillaoloAineistotSchema, { abortEarly: false, recursive: true }),
+    mode: "onChange",
+    reValidateMode: "onChange",
+  };
+
+  const useFormReturn = useForm<NahtavilleAsetettavatAineistotFormValues>(formOptions);
+  const { reset } = useFormReturn;
+
+  useEffect(() => {
+    if (projekti?.oid) {
+      const tallentamisTiedot: NahtavilleAsetettavatAineistotFormValues = {
+        oid: projekti.oid,
+      };
+      reset(tallentamisTiedot);
+    }
+  }, [projekti, reset]);
+
+  return (
+    <FormProvider {...useFormReturn}>
+      <form>
+        <SuunnitelmatJaAineistot />
+        <LausuntopyyntoonLiitettavaLisaaineisto />
+        <NahtavillaoloPainikkeet />
+      </form>
+    </FormProvider>
+  );
+}

src/components/projekti/nahtavillaolo/nahtavilleAsetettavatAineistot/SuunnitelmatJaAineistot.tsx

@@ -0,0 +1,20 @@
+import Section from "@components/layout/Section";
+import Notification, { NotificationType } from "@components/notification/Notification";
+import React from "react";
+
+type Props = {};
+
+export default function SuunnitelmatJaAineistot({}: Props) {
+  return (
+    <Section>
+      <h4 className="vayla-small-title">Suunnitelmat ja aineistot</h4>
+      <p>
+        Nähtäville asetettava aineisto sekä lausuntapyyntöön liitettävä aineisto tuodaan Projektivelhosta. Nähtäville
+        asetettu aineisto julkaistaan palvelun julkisella puolella kuulutuksen julkaisupäivänä.
+      </p>
+      <Notification type={NotificationType.INFO_GRAY}>
+        Huomioithan, että suunnitelma-aineistojen tulee täyttää saavutettavuusvaatimukset.
+      </Notification>
+    </Section>
+  );
+}

src/pages/suunnitelma/[oid]/nahtavillaolo.tsx

@@ -10,4 +10,4 @@ export default function Nahtavillaolo(): ReactElement {
       </>
     </ProjektiJulkinenPageLayout>
   );
-}
+}

src/pages/yllapito/projekti/[oid]/nahtavillaolo.tsx

@@ -2,13 +2,52 @@ import React, { ReactElement } from "react";
 import ProjektiPageLayout from "@components/projekti/ProjektiPageLayout";
 import { PageProps } from "@pages/_app";
 import useProjektiBreadcrumbs from "src/hooks/useProjektiBreadcrumbs";
+import Notification, { NotificationType } from "@components/notification/Notification";
+import Tabs from "@components/layout/tabs/Tabs";
+import KuulutuksenTiedot from "@components/projekti/nahtavillaolo/kuulutuksentiedot/KuulutuksenTiedot";
+import NahtavilleAsetettavatAineistot from "@components/projekti/nahtavillaolo/nahtavilleAsetettavatAineistot/NahtavilleAsetettavatAineistot";
 
 export default function Nahtavillaolo({ setRouteLabels }: PageProps): ReactElement {
   useProjektiBreadcrumbs(setRouteLabels);
 
   return (
     <ProjektiPageLayout title="Nähtävilläolovaihe">
-      <div></div>
+      <Notification type={NotificationType.INFO} hideIcon>
+        <div>
+          <h3 className="vayla-small-title">Ohjeet</h3>
+          <ul className="list-disc block pl-5">
+            <li>
+              Lisää nähtäville asetettavat aineistot sekä lausuntopyynnön lisäaineistot kuulutuksen ensimmäiseltä
+              välilehdeltä.
+            </li>
+            <li>Siirry Kuulutuksen tiedot-välilehdelle täyttämään kuulutuksen perustiedot.</li>
+            <li>
+              Anna päivämäärä, jolloin suunnittelun nähtäville asettamisesta kuulutetaan. Projekti ja sen nähtävilläolon
+              kuulutus julkaistaan samana päivänä Valtion liikenneväylien suunnittelu -palvelun kansalaispuolella.
+            </li>
+            <li>
+              Muokkaa tai täydennä halutessasi tiivistetty sisällönkuvaus hankkeesta. Jos projektista tulee tehdä
+              kuulutus suomen lisäksi toisella kielellä, eikä tälle ole kenttää, tarkista projektin tiedot -sivulta
+              projektin kieliasetus.
+            </li>
+            <li>Valitse kuulutuksessa esitettävät yhteystiedot.</li>
+            <li>Lähetä nähtäville asettamisen kuulutus projektipäällikölle hyväksyttäväksi.</li>
+            <li>
+              {
+                "Projekti näytetään kuulutuspäivästä lasketun määräajan jälkeen palvelun julkisella puolella 'Hyväksyntämenettelyssä' -olevana."
+              }
+            </li>
+          </ul>
+        </div>
+      </Notification>
+      <Tabs
+        tabStyle="Underlined"
+        defaultValue={0}
+        tabs={[
+          { label: "Nähtäville asetettavat aineistot", content: <NahtavilleAsetettavatAineistot /> },
+          { label: "Kuulutuksen tiedot", content: <KuulutuksenTiedot /> },
+        ]}
+      />
     </ProjektiPageLayout>
   );
 }

src/schemas/nahtavillaoloAineistot.tsx

@@ -0,0 +1,5 @@
+import * as Yup from "yup";
+
+export const nahtavillaoloAineistotSchema = Yup.object().shape({
+  oid: Yup.string().required(),
+});

src/schemas/nahtavillaoloKuulutus.tsx

@@ -0,0 +1,5 @@
+import * as Yup from "yup";
+
+export const nahtavillaoloKuulutusSchema = Yup.object().shape({
+  oid: Yup.string().required(),
+});