fix: Lisää kaksikielisyys aineistojen kategorisointiin (#304)

* fix: Lisää kaksikielisyys aineistojen kategorisointiin * fix localstack version
finnishtransportagency · Jul 12, 2022 · 1654699 · 1654699
1 parent fd1cbf6
commit 1654699
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 59 deletions.
diff --git a/common/aineistoKategoriat.ts b/common/aineistoKategoriat.ts
@@ -2,7 +2,6 @@ export {};
 
 type AineistoKategoriaProps = {
   id: string;
-  nimi: string;
   hakulauseet?: string[];
   alakategoriat?: AineistoKategoriaProps[];
 };
@@ -36,10 +35,6 @@ export class AineistoKategoria {
   public get hakulauseet() {
     return this.props.hakulauseet;
   }
-
-  public get nimi() {
-    return this.props.nimi;
-  }
 }
 
 export class AineistoKategoriat {
@@ -119,47 +114,40 @@ function findMatchingCategory(
 export const aineistoKategoriat = new AineistoKategoriat([
   {
     id: "T1xx",
-    nimi: "Selostusosa",
     hakulauseet: ["T1[0-9]{2}"],
-    alakategoriat: [
-      { id: "TBD101", nimi: "Kaavakartat", hakulauseet: ["T119"] },
-      { id: "TBD102", nimi: "Suunnitteluprosessiin liittyvä aineisto" },
-      { id: "TBD103", nimi: "YVA" },
-    ],
+    alakategoriat: [{ id: "TBD101", hakulauseet: ["T119"] }, { id: "TBD102" }, { id: "TBD103" }],
   },
   {
     id: "T2xx",
-    nimi: "Pääpiirustukset",
     hakulauseet: ["T2[0-9]{2}"],
     alakategoriat: [
-      { id: "TBD201", nimi: "Yleiskartat" },
-      { id: "TBD202", nimi: "Hallinnollisten järjestelyiden kartat" },
-      { id: "TBD203", nimi: "Suunnitelmakartat" },
-      { id: "TBD204", nimi: "Pituusleikkaukset", hakulauseet: ["T216"] },
-      { id: "TBD205", nimi: "Poikkileikkaukset" },
-      { id: "TBD206", nimi: "Siltasuunnitelmat ja muut taitorakenteet" },
-      { id: "TBD207", nimi: "Ympäristörakenteet, esim. meluesteet" },
-      { id: "TBD208", nimi: "Lunastuskartat" },
-      { id: "TBD209", nimi: "Liikennepaikkojen suunnitelmat" },
-      { id: "TBD210", nimi: "Maanteiden toimenpiteet ratasuunnitelmassa" },
-      { id: "TBD211", nimi: "Ratojen toimenpiteet tiesuunnitelmassa" },
-      { id: "TBD212", nimi: "Muut piirustukset ja kuvat" },
+      { id: "TBD201" },
+      { id: "TBD202" },
+      { id: "TBD203" },
+      { id: "TBD204", hakulauseet: ["T216"] },
+      { id: "TBD205" },
+      { id: "TBD206" },
+      { id: "TBD207" },
+      { id: "TBD208" },
+      { id: "TBD209" },
+      { id: "TBD210" },
+      { id: "TBD211" },
+      { id: "TBD212" },
     ],
   },
   {
     id: "T3xx",
-    nimi: "Informatiivinen aineisto",
     hakulauseet: ["T3[0-9]{2}"],
     alakategoriat: [
-      { id: "TBD301", nimi: "Vaikutuksia kuvaavat selvitykset" },
-      { id: "TBD302", nimi: "Ulkopuoliset rakenteet" },
-      { id: "TBD303", nimi: "Tutkitut vaihtoehdot" },
-      { id: "TBD304", nimi: "Katusuunnitelmat" },
-      { id: "TBD305", nimi: "Visualisointikuvat" },
-      { id: "TBD306", nimi: "Ympäristösuunnitelmat", hakulauseet: ["T320"] },
-      { id: "TBD307", nimi: "Muut selvitykset" },
-      { id: "TBD308", nimi: "Valaistuksen ja liikenteenohjauksen yleiskartat" },
-      { id: "TBD309", nimi: "Johtosiirrot ja kunnallistekniset suunnitelmat" },
+      { id: "TBD301" },
+      { id: "TBD302" },
+      { id: "TBD303" },
+      { id: "TBD304" },
+      { id: "TBD305" },
+      { id: "TBD306", hakulauseet: ["T320"] },
+      { id: "TBD307" },
+      { id: "TBD308" },
+      { id: "TBD309" },
     ],
   },
 ]);
diff --git a/i18n.js b/i18n.js
@@ -4,6 +4,8 @@ module.exports = {
   pages: {
     "*": ["common", "projekti"],
     "/yllapito/perusta": ["velho-haku"],
+    "/suunnitelma/[oid]/nahtavillaolo": ["aineisto"],
+    "/yllapito/projekti/[oid]/nahtavillaolo": ["aineisto"],
   },
   loadLocaleFrom: (lang, ns) =>
     // You can use a dynamic import, fetch, whatever. You should

diff --git a/...ponents/projekti/nahtavillaolo/nahtavilleAsetettavatAineistot/SuunnitelmatJaAineistot.tsx b/...ponents/projekti/nahtavillaolo/nahtavilleAsetettavatAineistot/SuunnitelmatJaAineistot.tsx
@@ -13,7 +13,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Aineisto } from "@services/api";
 import { AineistoKategoria, aineistoKategoriat, getNestedCategoryIds } from "common/aineistoKategoriat";
 import { find } from "lodash";
-import React, { Key, useMemo, useState } from "react";
+import useTranslation from "next-translate/useTranslation";
+import React, { Key, useCallback, useMemo, useState } from "react";
 import { FieldArrayWithId, useFieldArray, useFormContext } from "react-hook-form";
 import { Column } from "react-table";
 import { useHassuTable } from "src/hooks/useHassuTable";
@@ -42,6 +43,7 @@ export default function SuunnitelmatJaAineistot() {
   const { watch } = useFormContext<NahtavilleAsetettavatAineistotFormValues>();
   const aineistoNahtavilla = watch("aineistoNahtavilla");
   const [expandedAineisto, setExpandedAineisto] = useState<Key[]>([]);
+  const { t } = useTranslation("aineisto");
 
   return (
     <Section>
@@ -84,10 +86,9 @@ export default function SuunnitelmatJaAineistot() {
         expandedState={[expandedAineisto, setExpandedAineisto]}
         items={aineistoKategoriat.listKategoriat().map((paakategoria) => ({
           title: (
-            <span className="vayla-small-title">{`${paakategoria.nimi} (${getKategoriaAineistoMaara(
-              aineistoNahtavilla,
-              paakategoria
-            )})`}</span>
+            <span className="vayla-small-title">{`${t(
+              `aineisto-kategoria-nimi.${paakategoria.id}`
+            )} (${getKategoriaAineistoMaara(aineistoNahtavilla, paakategoria)})`}</span>
           ),
           content: (
             <SectionContent largeGaps>
@@ -155,12 +156,16 @@ interface SuunnitelmaAineistoAlakategoriaAccordionProps {
 
 const SuunnitelmaAineistoAlakategoriaAccordion = (props: SuunnitelmaAineistoAlakategoriaAccordionProps) => {
   const { watch } = useFormContext<NahtavilleAsetettavatAineistotFormValues>();
+  const { t } = useTranslation("aineisto");
   const aineistoNahtavilla = watch("aineistoNahtavilla");
   return (
     <HassuAccordion
       expandedState={props.expandedAineistoState}
       items={props.alakategoriat.map((alakategoria) => ({
-        title: `${alakategoria.nimi} (${getKategoriaAineistoMaara(aineistoNahtavilla, alakategoria)})`,
+        title: `${t(`aineisto-kategoria-nimi.${alakategoria.id}`)} (${getKategoriaAineistoMaara(
+          aineistoNahtavilla,
+          alakategoria
+        )})`,
         content: <AlakategoriaContent kategoria={alakategoria} expandedAineistoState={props.expandedAineistoState} />,
         id: alakategoria.id,
       }))}
@@ -201,29 +206,42 @@ interface AineistoTableProps {
   kategoriaId: string;
 }
 
-const getAllOptionsForKategoriat: (kategoriat: AineistoKategoria[], ylakategoriaNimi?: string) => SelectOption[] = (
-  kategoriat,
-  ylakategoriaNimi
-) => {
-  const ylakategoriaPrefix = ylakategoriaNimi ? `${ylakategoriaNimi} - ` : "";
-  const kategoriaIds: SelectOption[] = [];
-  kategoriat.forEach((kategoria) => {
-    kategoriaIds.push({ label: ylakategoriaPrefix + kategoria.nimi, value: kategoria.id });
-    if (kategoria.alaKategoriat) {
-      kategoriaIds.push(...getAllOptionsForKategoriat(kategoria.alaKategoriat, ylakategoriaPrefix + kategoria.nimi));
-    }
-  });
-  return kategoriaIds;
-};
-
-const ALL_OPTIONS = getAllOptionsForKategoriat(aineistoKategoriat.listKategoriat());
-
 const AineistoTable = (props: AineistoTableProps) => {
   const { data: projekti } = useProjekti();
   const { control, formState, register, getValues, setValue } =
     useFormContext<NahtavilleAsetettavatAineistotFormValues>();
   const aineistoRoute: `aineistoNahtavilla.${string}` = `aineistoNahtavilla.${props.kategoriaId}`;
   const { fields, remove } = useFieldArray({ name: aineistoRoute, control });
+  const { t } = useTranslation("aineisto");
+
+  const getAllOptionsForKategoriat: (kategoriat: AineistoKategoria[], ylakategoriaNimi?: string) => SelectOption[] =
+    useCallback(
+      (kategoriat, ylakategoriaNimi) => {
+        const ylakategoriaPrefix = ylakategoriaNimi ? `${ylakategoriaNimi} - ` : "";
+        const kategoriaIds: SelectOption[] = [];
+        kategoriat.forEach((kategoria) => {
+          kategoriaIds.push({
+            label: ylakategoriaPrefix + t(`aineisto-kategoria-nimi.${kategoria.id}`),
+            value: kategoria.id,
+          });
+          if (kategoria.alaKategoriat) {
+            kategoriaIds.push(
+              ...getAllOptionsForKategoriat(
+                kategoria.alaKategoriat,
+                ylakategoriaPrefix + t(`aineisto-kategoria-nimi.${kategoria.id}`)
+              )
+            );
+          }
+        });
+        return kategoriaIds;
+      },
+      [t]
+    );
+
+  const allOptions = useMemo(
+    () => getAllOptionsForKategoriat(aineistoKategoriat.listKategoriat()),
+    [getAllOptionsForKategoriat]
+  );
 
   const enrichedFields: FormAineisto[] = useMemo(
     () =>
@@ -265,7 +283,7 @@ const AineistoTable = (props: AineistoTableProps) => {
         accessor: (aineisto) => {
           return (
             <Select
-              options={ALL_OPTIONS}
+              options={allOptions}
               defaultValue={props.kategoriaId}
               onChange={(event) => {
                 const newKategoria = event.target.value;
@@ -316,6 +334,7 @@ const AineistoTable = (props: AineistoTableProps) => {
       register,
       remove,
       setValue,
+      allOptions,
     ]
   );
   const tableProps = useHassuTable<FormAineisto>({

diff --git a/src/locales/fi/aineisto.json b/src/locales/fi/aineisto.json
@@ -0,0 +1,33 @@
+{
+  "aineisto-kategoria-nimi": {
+    "T1xx": "Selostusosa",
+    "TBD101": "Kaavakartat",
+    "TBD102": "Suunnitteluprosessiin liittyvä aineisto",
+    "TBD103": "YVA",
+
+    "T2xx": "Pääpiirustukset",
+    "TBD201": "Yleiskartat",
+    "TBD202": "Hallinnollisten järjestelyiden kartat",
+    "TBD203": "Suunnitelmakartat",
+    "TBD204": "Pituusleikkaukset",
+    "TBD205": "Poikkileikkaukset",
+    "TBD206": "Siltasuunnitelmat ja muut taitorakenteet",
+    "TBD207": "Ympäristörakenteet, esim. meluesteet",
+    "TBD208": "Lunastuskartat",
+    "TBD209": "Liikennepaikkojen suunnitelmat",
+    "TBD210": "Maanteiden toimenpiteet ratasuunnitelmassa",
+    "TBD211": "Ratojen toimenpiteet tiesuunnitelmassa",
+    "TBD212": "Muut piirustukset ja kuvat",
+
+    "T3xx": "Informatiivinen aineisto",
+    "TBD301": "Vaikutuksia kuvaavat selvitykset",
+    "TBD302": "Ulkopuoliset rakenteet",
+    "TBD303": "Tutkitut vaihtoehdot",
+    "TBD304": "Katusuunnitelmat",
+    "TBD305": "Visualisointikuvat",
+    "TBD306": "Ympäristösuunnitelmat",
+    "TBD307": "Muut selvitykset",
+    "TBD308": "Valaistuksen ja liikenteenohjauksen yleiskartat",
+    "TBD309": "Johtosiirrot ja kunnallistekniset suunnitelmat"
+  }
+}
diff --git a/src/locales/sv/aineisto.json b/src/locales/sv/aineisto.json
@@ -0,0 +1,33 @@
+{
+  "aineisto-kategoria-nimi": {
+    "T1xx": "RUOTSI Selostusosa",
+    "TBD101": "RUOTSI Kaavakartat",
+    "TBD102": "RUOTSI Suunnitteluprosessiin liittyvä aineisto",
+    "TBD103": "RUOTSI YVA",
+
+    "T2xx": "RUOTSI Pääpiirustukset",
+    "TBD201": "RUOTSI Yleiskartat",
+    "TBD202": "RUOTSI Hallinnollisten järjestelyiden kartat",
+    "TBD203": "RUOTSI Suunnitelmakartat",
+    "TBD204": "RUOTSI Pituusleikkaukset",
+    "TBD205": "RUOTSI Poikkileikkaukset",
+    "TBD206": "RUOTSI Siltasuunnitelmat ja muut taitorakenteet",
+    "TBD207": "RUOTSI Ympäristörakenteet, esim. meluesteet",
+    "TBD208": "RUOTSI Lunastuskartat",
+    "TBD209": "RUOTSI Liikennepaikkojen suunnitelmat",
+    "TBD210": "RUOTSI Maanteiden toimenpiteet ratasuunnitelmassa",
+    "TBD211": "RUOTSI Ratojen toimenpiteet tiesuunnitelmassa",
+    "TBD212": "RUOTSI Muut piirustukset ja kuvat",
+
+    "T3xx": "RUOTSI Informatiivinen aineisto",
+    "TBD301": "RUOTSI Vaikutuksia kuvaavat selvitykset",
+    "TBD302": "RUOTSI Ulkopuoliset rakenteet",
+    "TBD303": "RUOTSI Tutkitut vaihtoehdot",
+    "TBD304": "RUOTSI Katusuunnitelmat",
+    "TBD305": "RUOTSI Visualisointikuvat",
+    "TBD306": "RUOTSI Ympäristösuunnitelmat",
+    "TBD307": "RUOTSI Muut selvitykset",
+    "TBD308": "RUOTSI Valaistuksen ja liikenteenohjauksen yleiskartat",
+    "TBD309": "RUOTSI Johtosiirrot ja kunnallistekniset suunnitelmat"
+  }
+}
diff --git a/src/pages/suunnitelma/[oid]/nahtavillaolo.tsx b/src/pages/suunnitelma/[oid]/nahtavillaolo.tsx
@@ -204,6 +204,7 @@ interface AineistoKategoriaAccordionProps {
 }
 
 const AineistoKategoriaAccordion = (props: AineistoKategoriaAccordionProps) => {
+  const { t } = useTranslation("aineisto");
   return props.aineistoKategoriat ? (
     <HassuAccordion
       items={props.aineistoKategoriat?.map((kategoria) => {
@@ -213,7 +214,7 @@ const AineistoKategoriaAccordion = (props: AineistoKategoriaAccordionProps) => {
             kategoria.alaKategoriat?.some((alakategoria) => alakategoria.id === aineisto.kategoriaId)
         );
         return {
-          title: `${kategoria.nimi} (${aineistot?.length || 0})`,
+          title: `${t(`aineisto-kategoria-nimi.${kategoria.id}`)} (${aineistot?.length || 0})`,
           content: (
             <SuunnitelmaAineistoKategoriaContent
               aineistot={aineistot}