Skip to content

Commit

Permalink
feat: siirrä notifikaatiot sivun yläreunaan ja lisää puuttuvia Notifi…
Browse files Browse the repository at this point in the history
…cation-elementtejä (#325)
  • Loading branch information
tkork committed Aug 19, 2022
1 parent c105cdb commit 67cebde
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 60 deletions.
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { NahtavillaoloVaiheJulkaisu, NahtavillaoloVaiheTila, Kieli, ProjektiKayttaja } from "@services/api";
import { NahtavillaoloVaiheJulkaisu, Kieli, ProjektiKayttaja } from "@services/api";
import React, { ReactElement } from "react";
import Notification, { NotificationType } from "@components/notification/Notification";
import capitalize from "lodash/capitalize";
import replace from "lodash/replace";
import lowerCase from "lodash/lowerCase";
Expand All @@ -17,7 +16,7 @@ interface Props {
projekti: ProjektiLisatiedolla;
}

export default function AloituskuulutusLukunakyma({ nahtavillaoloVaiheJulkaisu, projekti }: Props): ReactElement {
export default function NahtavillaoloLukunakyma({ nahtavillaoloVaiheJulkaisu, projekti }: Props): ReactElement {
if (!nahtavillaoloVaiheJulkaisu || !projekti) {
return <></>;
}
Expand Down Expand Up @@ -59,24 +58,6 @@ export default function AloituskuulutusLukunakyma({ nahtavillaoloVaiheJulkaisu,
return (
<>
<Section>
{!published && nahtavillaoloVaiheJulkaisu.tila === NahtavillaoloVaiheTila.HYVAKSYTTY && (
<Notification type={NotificationType.WARN}>
Kuulutusta ei ole vielä julkaistu. Kuulutuspäivä {kuulutusPaiva}
</Notification>
)}
{published && nahtavillaoloVaiheJulkaisu.tila === NahtavillaoloVaiheTila.HYVAKSYTTY && (
<Notification type={NotificationType.INFO_GREEN}>
Kuulutus nähtäville asettamisesta on julkaistu {kuulutusPaiva}. Projekti näytetään kuulutuspäivästä lasketun
määräajan jälkeen palvelun julkisella puolella suunnittelussa olevana. Kuulutusvaihe päättyy{" "}
<FormatDate date={nahtavillaoloVaiheJulkaisu.kuulutusVaihePaattyyPaiva} />.
</Notification>
)}
{nahtavillaoloVaiheJulkaisu.tila !== NahtavillaoloVaiheTila.HYVAKSYTTY && (
<Notification type={NotificationType.WARN}>
Kuulutus nähtäville asettamisesta odottaa hyväksyntää. Tarkasta kuulutus ja a) hyväksy tai b) palaute
kuulutus korjattavaksi, jos havaitset puutteita tai virheen.
</Notification>
)}
<div className="grid grid-cols-1 md:grid-cols-4">
<p className="vayla-label md:col-span-1">Kuulutuspäivä</p>
<p className="vayla-label md:col-span-3">Kuulutusvaihe päättyy</p>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default function LausuntopyyntoonLiitettavaLisaaineisto() {

const linkHref = useMemo(() => {
const parametrit = projekti?.nahtavillaoloVaihe?.lisaAineistoParametrit;
if (typeof window === "undefined") {
if (typeof window === "undefined" || !parametrit) {
return undefined;
}
return `${window?.location?.protocol}//${window?.location?.host}/suunnitelma/${projekti?.oid}/lausuntopyyntoaineistot?hash=${parametrit?.hash}&id=${parametrit?.nahtavillaoloVaiheId}&poistumisPaiva=${parametrit?.poistumisPaiva}`;
Expand Down Expand Up @@ -68,13 +68,14 @@ export default function LausuntopyyntoonLiitettavaLisaaineisto() {
label="Linkki lausuntopyyntöön liitettävään aineistoon"
style={{ flexGrow: 1 }}
disabled
value={linkHref}
value={linkHref || "-"}
ref={linkRef}
/>
<IconButton
icon="copy"
className="text-primary-dark"
type="button"
disabled={!linkHref}
onClick={() => {
if (!!linkRef.current?.value) {
navigator.clipboard.writeText(linkRef.current.value);
Expand Down
140 changes: 103 additions & 37 deletions src/pages/yllapito/projekti/[oid]/nahtavillaolo.tsx
Original file line number Diff line number Diff line change
@@ -1,53 +1,119 @@
import React, { ReactElement } from "react";
import React, { FC, 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";
import { useProjekti } from "src/hooks/useProjekti";
import { NahtavillaoloVaiheTila } from "@services/api";
import dayjs from "dayjs";
import SectionContent from "@components/layout/SectionContent";
import FormatDate from "@components/FormatDate";

const InfoElement: FC = () => {
const { data: projekti } = useProjekti();

const julkaisut = projekti?.nahtavillaoloVaiheJulkaisut;

const julkaisu = julkaisut?.[julkaisut.length - 1];

if (julkaisu?.tila === NahtavillaoloVaiheTila.HYVAKSYTTY) {
// Toistaiseksi tarkastellaan julkaisupaivatietoa, koska ei ole olemassa erillista tilaa julkaistulle kuulutukselle
const julkaisupvm = dayjs(julkaisu.kuulutusPaiva);
if (dayjs().isBefore(julkaisupvm, "day")) {
return (
<Notification type={NotificationType.WARN}>
{`Kuulutusta ei ole vielä julkaistu. Kuulutuspäivä ${julkaisupvm.format("DD.MM.YYYY")}.`}
</Notification>
);
} else {
return (
<Notification type={NotificationType.INFO_GREEN}>
Kuulutus on julkaistu {julkaisupvm.format("DD.MM.YYYY")}. Projekti näytetään kuulutuspäivästä lasketun
määräajan jälkeen palvelun julkisella puolella suunnittelussa olevana. Kuulutusvaihe päättyy{" "}
<FormatDate date={julkaisu.kuulutusVaihePaattyyPaiva} />.
</Notification>
);
}
} else if (julkaisu?.tila === NahtavillaoloVaiheTila.ODOTTAA_HYVAKSYNTAA) {
if (projekti?.nykyinenKayttaja.onProjektipaallikko || projekti?.nykyinenKayttaja.onYllapitaja) {
return (
<Notification type={NotificationType.WARN}>
{
"Kuulutus odottaa hyväksyntää. Tarkasta kuulutus ja a) hyväksy tai a) palauta kuulutus korjattavaksi, jos havaitset puutteita tai virheen."
}
</Notification>
);
} else {
return (
<Notification type={NotificationType.WARN}>
Kuulutus on hyväksyttävänä projektipäälliköllä. Jos kuulutusta tarvitsee muokata, ota yhteys
projektipäällikköön.
</Notification>
);
}
} else if (julkaisu?.tila === NahtavillaoloVaiheTila.PALAUTETTU) {
return (
<>
{projekti?.nahtavillaoloVaihe?.palautusSyy && (
<Notification type={NotificationType.WARN}>
{"Aloituskuulutus on palautettu korjattavaksi. Palautuksen syy: " + projekti.nahtavillaoloVaihe.palautusSyy}
</Notification>
)}
</>
);
} else {
return <></>;
}
};

export default function Nahtavillaolo({ setRouteLabels }: PageProps): ReactElement {
useProjektiBreadcrumbs(setRouteLabels);

return (
<ProjektiPageLayout title="Nähtävilläolovaihe">
<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 /> },
]}
/>
<SectionContent largeGaps>
<InfoElement />
<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 /> },
]}
/>
</SectionContent>
</ProjektiPageLayout>
);
}

0 comments on commit 67cebde

Please sign in to comment.