-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: hassu 831 hassu 819 kansalaisen hyväksymispäätöksen lukunäkymä (#…
…329) * Kansalaisen hyväksymispäätöksen alkuosa * Korjaukset kansalaisen hyväksymispäätöksen alkuosan linkkiin. * Kansalaisen hyväksymispäätöksen asianosaisen oikeudet -osio. * Eriytä aineistonäkymä omaksi komponentikseen ja käytä sitä kansalaisen nähtävilläolovaiheessa * Loput kansalaisen hyväksymispäätösvaiheen sivun osiot. Jätä TODO-asioita. * Kansalaisen hyväksymispäätöksen otsikot monikielisiksi * Korjaa typo käännösavaimessa * Poista tarpeeton placeholder eu-logolle. * Poista 'pdf' Co-authored-by: Valhe Kouneli <valhe.kouneli@cgi.com>
- Loading branch information
1 parent
e1779cb
commit 8061730
Showing
7 changed files
with
322 additions
and
138 deletions.
There are no files selected for viewing
167 changes: 167 additions & 0 deletions
167
src/components/projekti/common/KansalaisenAineistoNakyma.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,167 @@ | ||
| import React, { Key, ReactElement, useState } from "react"; | ||
| import useTranslation from "next-translate/useTranslation"; | ||
| import { formatDate } from "src/util/dateUtils"; | ||
| import SectionContent from "@components/layout/SectionContent"; | ||
| import { | ||
| Aineisto, | ||
| ProjektiJulkinen, | ||
| NahtavillaoloVaiheJulkaisuJulkinen, | ||
| HyvaksymisPaatosVaiheJulkaisuJulkinen, | ||
| } from "@services/api"; | ||
| import Trans from "next-translate/Trans"; | ||
| import HassuAccordion from "@components/HassuAccordion"; | ||
| import { AineistoKategoria, aineistoKategoriat } from "common/aineistoKategoriat"; | ||
| import { Link, Stack } from "@mui/material"; | ||
| import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||
| import ButtonFlat from "@components/button/ButtonFlat"; | ||
|
|
||
| type Props = { | ||
| projekti: ProjektiJulkinen; | ||
| kuulutus: NahtavillaoloVaiheJulkaisuJulkinen | HyvaksymisPaatosVaiheJulkaisuJulkinen; | ||
| }; | ||
|
|
||
| export default function KansalaisenAineistoNakyma({ projekti, kuulutus }: Props): ReactElement { | ||
| const { t } = useTranslation("projekti"); | ||
|
|
||
| const [expandedAineistoKategoriat, setExpandedAineistoKategoriat] = useState<Key[]>([]); | ||
| const areAineistoKategoriesExpanded = !!expandedAineistoKategoriat.length; | ||
|
|
||
| const velho = projekti?.velho; | ||
|
|
||
| if (!projekti || !kuulutus || !velho) { | ||
| return <div />; | ||
| } | ||
|
|
||
| let sijainti = ""; | ||
| if (velho.maakunnat) { | ||
| sijainti = sijainti + velho.maakunnat.join(", ") + "; "; | ||
| } | ||
| if (velho.kunnat) { | ||
| sijainti = sijainti + velho.kunnat.join(", "); | ||
| } | ||
|
|
||
| const getAlaKategoryIds = (aineistoKategoriat: AineistoKategoria[]) => { | ||
| const keys: Key[] = []; | ||
| aineistoKategoriat.forEach((kategoria) => { | ||
| keys.push(kategoria.id); | ||
| if (kategoria.alaKategoriat) { | ||
| keys.push(...getAlaKategoryIds(kategoria.alaKategoriat)); | ||
| } | ||
| }); | ||
| return keys; | ||
| }; | ||
|
|
||
| return ( | ||
| <SectionContent> | ||
| <h4 className="vayla-small-title">{t(`ui-otsikot.nahtavillaolo.esittelyaineisto_ja_suunnitelmat`)}</h4> | ||
| <Trans | ||
| i18nKey="projekti:info.nahtavillaolo.ei-rata.suunnitelmiin_on_mahdollista" | ||
| values={{ | ||
| kuulutusVaihePaattyyPaiva: formatDate(kuulutus.kuulutusVaihePaattyyPaiva), | ||
| }} | ||
| components={{ p: <p />, b: <b /> }} | ||
| /> | ||
| <ButtonFlat | ||
| type="button" | ||
| onClick={() => { | ||
| if (areAineistoKategoriesExpanded) { | ||
| setExpandedAineistoKategoriat([]); | ||
| } else { | ||
| setExpandedAineistoKategoriat(getAlaKategoryIds(aineistoKategoriat.listKategoriat())); | ||
| } | ||
| }} | ||
| iconComponent={ | ||
| <span className="fa-layers"> | ||
| <FontAwesomeIcon | ||
| icon="chevron-down" | ||
| transform={`down-6`} | ||
| flip={areAineistoKategoriesExpanded ? "vertical" : undefined} | ||
| /> | ||
| <FontAwesomeIcon | ||
| icon="chevron-up" | ||
| transform={`up-6`} | ||
| flip={areAineistoKategoriesExpanded ? "vertical" : undefined} | ||
| /> | ||
| </span> | ||
| } | ||
| > | ||
| {areAineistoKategoriesExpanded ? "Sulje" : "Avaa"} kaikki kategoriat | ||
| </ButtonFlat> | ||
| <AineistoKategoriaAccordion | ||
| aineistoKategoriat={aineistoKategoriat.listKategoriat()} | ||
| aineistot={kuulutus.aineistoNahtavilla} | ||
| expandedState={[expandedAineistoKategoriat, setExpandedAineistoKategoriat]} | ||
| /> | ||
| </SectionContent> | ||
| ); | ||
| } | ||
|
|
||
| interface AineistoKategoriaAccordionProps { | ||
| aineistoKategoriat?: AineistoKategoria[]; | ||
| aineistot?: Aineisto[] | null; | ||
| expandedState: [React.Key[], React.Dispatch<React.Key[]>]; | ||
| } | ||
|
|
||
| const AineistoKategoriaAccordion = (props: AineistoKategoriaAccordionProps) => { | ||
| const { t } = useTranslation("aineisto"); | ||
| return props.aineistoKategoriat ? ( | ||
| <HassuAccordion | ||
| items={props.aineistoKategoriat?.map((kategoria) => { | ||
| const aineistot = props.aineistot?.filter( | ||
| (aineisto) => | ||
| kategoria.id === aineisto.kategoriaId || | ||
| kategoria.alaKategoriat?.some((alakategoria) => alakategoria.id === aineisto.kategoriaId) | ||
| ); | ||
| return { | ||
| title: `${t(`aineisto-kategoria-nimi.${kategoria.id}`)} (${aineistot?.length || 0})`, | ||
| content: ( | ||
| <SuunnitelmaAineistoKategoriaContent | ||
| aineistot={aineistot} | ||
| kategoria={kategoria} | ||
| expandedState={props.expandedState} | ||
| /> | ||
| ), | ||
| id: kategoria.id, | ||
| }; | ||
| })} | ||
| expandedState={props.expandedState} | ||
| /> | ||
| ) : null; | ||
| }; | ||
|
|
||
| interface SuunnitelmaAineistoKategoriaContentProps { | ||
| aineistot?: Aineisto[]; | ||
| kategoria: AineistoKategoria; | ||
| expandedState: [React.Key[], React.Dispatch<React.Key[]>]; | ||
| } | ||
|
|
||
| const SuunnitelmaAineistoKategoriaContent = (props: SuunnitelmaAineistoKategoriaContentProps) => { | ||
| return ( | ||
| <> | ||
| {!!props.aineistot?.length ? ( | ||
| <Stack direction="column" rowGap={1.5}> | ||
| {props.aineistot | ||
| ?.filter((aineisto) => typeof aineisto.tiedosto === "string" && aineisto.kategoriaId === props.kategoria.id) | ||
| .map((aineisto) => ( | ||
| <Stack direction="row" alignItems="flex-end" columnGap={2} key={aineisto.dokumenttiOid}> | ||
| <Link href={aineisto.tiedosto!} target="_blank" rel="noreferrer"> | ||
| {aineisto.nimi} | ||
| </Link> | ||
| <span>({aineisto.nimi.split(".").pop()})</span> | ||
| <a href={aineisto.tiedosto!} target="_blank" rel="noreferrer"> | ||
| <FontAwesomeIcon icon="external-link-alt" size="lg" className="text-primary-dark" /> | ||
| </a> | ||
| </Stack> | ||
| ))} | ||
| </Stack> | ||
| ) : ( | ||
| <p>Kategoriassa ei ole aineistoa</p> | ||
| )} | ||
| <AineistoKategoriaAccordion | ||
| aineistoKategoriat={props.kategoria.alaKategoriat} | ||
| aineistot={props.aineistot} | ||
| expandedState={props.expandedState} | ||
| /> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,136 @@ | ||
| import React, { ReactElement } from "react"; | ||
| import ProjektiJulkinenPageLayout from "@components/projekti/kansalaisnakyma/ProjektiJulkinenPageLayout"; | ||
| import { formatDate } from "src/util/dateUtils"; | ||
| import { useProjektiJulkinen } from "src/hooks/useProjektiJulkinen"; | ||
| import useTranslation from "next-translate/useTranslation"; | ||
| import KeyValueTable, { KeyValueData } from "@components/KeyValueTable"; | ||
| import Section from "@components/layout/Section"; | ||
|
|
||
| import Trans from "next-translate/Trans"; | ||
| import { Link } from "@mui/material"; | ||
| import ExtLink from "@components/ExtLink"; | ||
| import Notification, { NotificationType } from "@components/notification/Notification"; | ||
| import KansalaisenAineistoNakyma from "../../../components/projekti/common/KansalaisenAineistoNakyma"; | ||
| export default function Hyvaksymispaatos(): ReactElement { | ||
| const { t } = useTranslation(); | ||
| const { data: projekti } = useProjektiJulkinen(); | ||
| const kuulutus = projekti?.hyvaksymisPaatosVaihe; | ||
| const velho = kuulutus?.velho; | ||
| if (!projekti || !kuulutus || !velho) { | ||
| return <div />; | ||
| } | ||
|
|
||
| let sijainti = ""; | ||
| if (velho.maakunnat) { | ||
| sijainti = sijainti + velho.maakunnat.join(", ") + "; "; | ||
| } | ||
| if (velho.kunnat) { | ||
| sijainti = sijainti + velho.kunnat.join(", "); | ||
| } | ||
|
|
||
| const aikavali = `${formatDate(kuulutus.kuulutusPaiva)} - ${formatDate(kuulutus.kuulutusVaihePaattyyPaiva)}`; | ||
|
|
||
| const keyValueData: KeyValueData[] = [ | ||
| { | ||
| header: t(`projekti:ui-otsikot.nahtavillaoloaika`), | ||
| data: aikavali, | ||
| }, | ||
| { header: t(`projekti:ui-otsikot.hankkeen_sijainti`), data: sijainti }, | ||
| { | ||
| header: t(`projekti:ui-otsikot.suunnitelman_tyyppi`), | ||
| data: velho?.tyyppi && t(`projekti:projekti-tyyppi.${velho?.tyyppi}`), | ||
| }, | ||
| ]; | ||
|
|
||
| const kuulutuspaiva = kuulutus.kuulutusPaiva ? new Date(kuulutus.kuulutusPaiva) : null; | ||
| const tiedoksiantopaiva = kuulutuspaiva ? kuulutuspaiva.setDate(kuulutuspaiva.getDate() + 7) : null; | ||
|
|
||
| const yhteystiedotListana = | ||
| kuulutus?.kuulutusYhteystiedot?.map((yhteystieto) => t("common:yhteystieto", yhteystieto)) || []; | ||
|
|
||
| return ( | ||
| <ProjektiJulkinenPageLayout selectedStep={4} title="Tietoa suunnitelmaan liittyvasta hyvaksymispaatoksesta"> | ||
| <> | ||
| <Section></Section> | ||
| </> | ||
| <ProjektiJulkinenPageLayout selectedStep={4} title={t("projekti:ui-otsikot.kuulutus_suunnitelman_hyvaksymisesta")}> | ||
| <Section noDivider> | ||
| <KeyValueTable rows={keyValueData}></KeyValueTable> | ||
| </Section> | ||
| <Section noDivider className="pb-6 mb-6"> | ||
| <div style={{ marginTop: "1rem" }}> | ||
| <Trans | ||
| i18nKey="projekti:info.hyvaksytty.liikenne_ja_viestintavirasto_on_paatoksellaan" | ||
| values={{ | ||
| hyvaksymisPaiva: "TODO", | ||
| paatosNumero: "TODO", | ||
| suunnitelmanNimi: velho.nimi, | ||
| sijainti: sijainti, | ||
| }} | ||
| components={{ p: <p style={{ marginTop: "inherit" }} /> }} | ||
| /> | ||
| <Trans | ||
| i18nKey="projekti:info.hyvaksytty.paatos_ja_sen_perusteena_olevat" | ||
| values={{ | ||
| nahtavillaoloaikavali: aikavali, | ||
| linkki: "TODO", | ||
| osoite: "TODO", | ||
| }} | ||
| components={{ p: <p style={{ marginTop: "inherit" }} />, b: <b />, a: <Link href={"TODO"} /> }} | ||
| /> | ||
| <Trans | ||
| i18nKey="projekti:info.hyvaksytty.kuulutus_on_julkaistu" | ||
| values={{ | ||
| julkaisupaiva: formatDate(kuulutus.kuulutusPaiva), | ||
| }} | ||
| components={{ p: <p style={{ marginTop: "inherit" }} /> }} | ||
| /> | ||
| <Trans | ||
| i18nKey="projekti:info.hyvaksytty.tiedoksisaannin_katsotaan_tapahtuneet" | ||
| values={{ | ||
| tiedoksiantopaiva: formatDate(tiedoksiantopaiva), | ||
| }} | ||
| components={{ p: <p style={{ marginTop: "inherit" }} /> }} | ||
| /> | ||
| </div> | ||
| </Section> | ||
| <Section noDivider> | ||
| <h4 className="vayla-small-title">{t("projekti:ui-otsikot.asianosaisen_oikeudet")}</h4> | ||
| <Notification hideIcon type={NotificationType.INFO}> | ||
| <p> | ||
| <Trans | ||
| i18nKey="projekti:info.hyvaksytty.paatokseen_voi_valittamalla" | ||
| values={{ | ||
| hallintoOikeudelta: t(`common:hallinto-oikeus-ablatiivi.${kuulutus.hallintoOikeus}`), | ||
| }} | ||
| /> | ||
| </p> | ||
| </Notification> | ||
| <p> | ||
| <Trans | ||
| i18nKey="projekti:info.hyvaksytty.vaylavirasto_kasittelee_suunnitelman" | ||
| values={{ | ||
| linkki: t("common:vayla-tietosuojasivu"), | ||
| }} | ||
| components={{ a: <ExtLink href={t("common:vayla-tietosuojasivu")} /> }} | ||
| /> | ||
| </p> | ||
| </Section> | ||
| <Section noDivider> | ||
| <h4 className="vayla-small-title">{t("projekti:ui-otsikot.yhteystiedot")}</h4> | ||
| <p> | ||
| {t("common:lisatietoja_antavat", { | ||
| yhteystiedot: yhteystiedotListana.join(", "), | ||
| count: yhteystiedotListana.length, | ||
| })} | ||
| </p> | ||
| </Section> | ||
| <Section noDivider> | ||
| <h5 className="vayla-smallest-title">{t("projekti:ui-otsikot.paatos")}</h5> | ||
| <p>TODO (käytä hyväksi viranomaispuolen lukunäkymää, refaktoroi se omaksi komponentikseen, ja käytä täällä)</p> | ||
| </Section> | ||
| <Section noDivider> | ||
| <KansalaisenAineistoNakyma projekti={projekti} kuulutus={kuulutus} /> | ||
| </Section> | ||
| <Section noDivider> | ||
| <h5 className="vayla-smallest-title">{t("projekti:ui-otsikot.ladattava_kuulutus")}</h5> | ||
| TODO (toteuta kun pdf on toteutettu bäkissä) | ||
| </Section> | ||
| </ProjektiJulkinenPageLayout> | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.