SHARED:VKT(Frontend): Properly translated municipality selection comp…

…onent

frontend/packages/shared/src/components/ComboBox/ComboBox.tsx

@@ -177,6 +177,7 @@ type AutoCompleteMultipleComboBox = AutocompleteProps<
   false,
   false
 >;
+
 export const LabeledMultipleCheckboxDropdown = ({
   id,
   label,
@@ -187,7 +188,7 @@ export const LabeledMultipleCheckboxDropdown = ({
   value,
   onChange,
   ...rest
-}: Omit<ComboBoxProps, 'value' | 'onChange'> &
+}: Omit<ComboBoxProps, 'value' | 'onChange' | 'showInputLabel'> &
   Omit<AutoCompleteMultipleComboBox, 'options' | 'renderInput'> & {
     id: string;
   }) => {
@@ -207,6 +208,7 @@ export const LabeledMultipleCheckboxDropdown = ({
         disableCloseOnSelect
         options={values}
         value={value}
+        isOptionEqualToValue={(option, value) => option.value === value.value}
         renderOption={(props, option, { selected }) => {
           const { key, ...optionProps } = props;
           return (
@@ -222,11 +224,7 @@ export const LabeledMultipleCheckboxDropdown = ({
           );
         }}
         renderInput={(params) => (
-          <TextField
-            {...params}
-            variant={variant}
-            error={showError}
-          />
+          <TextField {...params} variant={variant} error={showError} />
         )}
         onChange={onChange}
         {...rest}

frontend/packages/shared/src/enums/common.ts

@@ -69,6 +69,7 @@ export enum I18nNamespace {
   Clerk = 'clerk',
   Common = 'common',
   KoodistoCountries = 'koodistoCountries',
+  KoodistoMunicipalities = 'koodistoMunicipalities',
   KoodistoLanguages = 'koodistoLanguages',
   KoodistoRegions = 'koodistoRegions',
   Privacy = 'privacy',

frontend/packages/vkt/src/configs/i18n.ts

@@ -11,10 +11,12 @@ import { DateUtils } from 'shared/utils';
 import accessibilityFI from 'public/i18n/fi-FI/accessibility.json';
 import clerkFI from 'public/i18n/fi-FI/clerk.json';
 import commonFI from 'public/i18n/fi-FI/common.json';
+import koodistoMunicipalitiesFI from 'public/i18n/fi-FI/koodisto_municipalities.json';
 import publicFI from 'public/i18n/fi-FI/public.json';
 import accessibilitySV from 'public/i18n/sv-SE/accessibility.json';
 import clerkSV from 'public/i18n/sv-SE/clerk.json';
 import commonSV from 'public/i18n/sv-SE/common.json';
+import koodistoMunicipalitiesSV from 'public/i18n/sv-SE/koodisto_municipalities.json';
 import publicSV from 'public/i18n/sv-SE/public.json';
 
 // Defaults and resources
@@ -29,12 +31,14 @@ const resources = {
     [I18nNamespace.Clerk]: clerkFI,
     [I18nNamespace.Common]: commonFI,
     [I18nNamespace.Public]: publicFI,
+    [I18nNamespace.KoodistoMunicipalities]: koodistoMunicipalitiesFI,
   },
   [langSV]: {
     [I18nNamespace.Accessibility]: accessibilitySV,
     [I18nNamespace.Clerk]: clerkSV,
     [I18nNamespace.Common]: commonSV,
     [I18nNamespace.Public]: publicSV,
+    [I18nNamespace.KoodistoMunicipalities]: koodistoMunicipalitiesSV,
   },
 };
 
@@ -109,6 +113,15 @@ export const usePublicTranslation = (
   return useAppTranslation(options, I18nNamespace.Public);
 };
 
+export const useKoodistoMunicipalitiesTranslation = () => {
+  const { t } = useAppTranslation(
+    { keyPrefix: 'vkt.koodisto.municipalities' },
+    I18nNamespace.KoodistoMunicipalities,
+  );
+
+  return t;
+};
+
 export const translateOutsideComponent = () => {
   return t;
 };

frontend/packages/vkt/src/hooks/useKoodistoMunicipalities.ts

@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+
+import { useKoodistoMunicipalitiesTranslation } from 'configs/i18n';
+import koodistoMunicipalitiesFI from 'public/i18n/fi-FI/koodisto_municipalities.json';
+
+interface KoodistoMunicipalities {
+  vkt: {
+    koodisto: {
+      municipalities: Map<string, string>;
+    };
+  };
+}
+
+const getCodes: () => Array<string> = () => {
+  return Object.keys(
+    (koodistoMunicipalitiesFI as KoodistoMunicipalities).vkt.koodisto
+      .municipalities,
+  );
+};
+
+export const useKoodistoMunicipalities = () => {
+  return getCodes();
+};
+
+export const useMunicipalityOptions = () => {
+  const translate = useKoodistoMunicipalitiesTranslation();
+
+  const sortedOptions = useMemo(() => {
+    const options = getCodes().map((value) => ({
+      value,
+      label: translate(value),
+    }));
+    const locale = new Intl.Locale('fi-FI');
+
+    return options.sort((a, b) => a.label.localeCompare(b.label, locale));
+  }, [translate]);
+
+  return sortedOptions;
+};

frontend/packages/vkt/src/interfaces/publicExaminer.ts

@@ -3,7 +3,7 @@ import { APIResponseStatus } from 'shared/enums';
 import { WithId } from 'shared/interfaces';
 
 import { ExamLanguage } from 'enums/app';
-import { Municipality } from './municipality';
+import { Municipality } from 'interfaces/municipality';
 
 
 interface PublicExaminerExamDate {

frontend/packages/vkt/src/pages/examiner/ExaminerHomePage.tsx

@@ -7,7 +7,7 @@ import {
   Grid,
   Paper,
 } from '@mui/material';
-import { FC, useEffect } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
   H1,
@@ -23,16 +23,25 @@ import {
   TextFieldVariant,
 } from 'shared/enums';
 
+import { useKoodistoMunicipalitiesTranslation } from 'configs/i18n';
 import { useAppDispatch, useAppSelector } from 'configs/redux';
 import { AppRoutes } from 'enums/app';
+import { useMunicipalityOptions } from 'hooks/useKoodistoMunicipalities';
 import { loadExaminerDetails } from 'redux/reducers/examinerDetails';
 import { loadExaminerDetailsInit } from 'redux/reducers/examinerDetailsInit';
 import { clerkUserSelector } from 'redux/selectors/clerkUser';
 import { examinerDetailsSelector } from 'redux/selectors/examinerDetails';
 import { examinerDetailsInitSelector } from 'redux/selectors/examinerDetailsInit';
 
 const InitializeExaminerDetails = () => {
+  const translateMunicipality = useKoodistoMunicipalitiesTranslation();
   const { initData } = useAppSelector(examinerDetailsInitSelector);
+  const municipalityOptions = useMunicipalityOptions();
+  const municipalityToOption = (municipality: string) => ({
+    value: municipality,
+    label: translateMunicipality(municipality),
+  });
+  const [municipalities, setMunicipalities] = useState<Array<string>>([]);
 
   return (
     <Paper elevation={3} className="examiner-details-page__details-view">
@@ -89,10 +98,11 @@ const InitializeExaminerDetails = () => {
             showInputLabel={false}
             showError={false}
             variant={TextFieldVariant.Outlined}
-            values={[
-              { label: 'Helsinki', value: 'Helsinki' },
-              { label: 'Espoo', value: 'Espoo' },
-            ]}
+            values={municipalityOptions}
+            value={municipalities.map(municipalityToOption)}
+            onChange={(_, options) => {
+              setMunicipalities(options.map((v) => v.value));
+            }}
           />
         </div>
       </div>