OTR(Frontend): use updated LanguageSelect

Author: pkoivisto

frontend/packages/otr/package.json

@@ -25,6 +25,6 @@
     "otr:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.9.29"
+    "shared": "npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.10.0"
   }
 }

frontend/packages/otr/src/components/clerkInterpreter/filters/ClerkInterpreterAutocompleteFilters.tsx

@@ -65,11 +65,16 @@ export const ClerkInterpreterAutocompleteFilters = ({
   };
 
   const handleFilterChange =
-    (filter: keyof ClerkInterpreterFilters) =>
+    (filter: keyof Omit<ClerkInterpreterFilters, 'fromLang' | 'toLang'>) =>
     ({}, value: AutocompleteValue) => {
       setPage(0);
       dispatch(addClerkInterpreterFilter({ [filter]: value?.value }));
     };
+  const handleLanguageFilterChange =
+    (filter: 'fromLang' | 'toLang') => (language?: string) => {
+      setPage(0);
+      dispatch(addClerkInterpreterFilter({ [filter]: language }));
+    };
 
   const getPermissionToPublishSelectValues = () =>
     Object.values(PermissionToPublish).map((v) => ({
@@ -97,7 +102,7 @@ export const ClerkInterpreterAutocompleteFilters = ({
             value={getLanguageSelectValue(filters.fromLang)}
             disabled={true}
             variant={TextFieldVariant.Outlined}
-            onChange={handleFilterChange('fromLang')}
+            onLanguageChange={handleLanguageFilterChange('fromLang')}
             languages={QualificationUtils.selectableFromLangs}
             excludedLanguage={filters.toLang}
             translateLanguage={translateLanguage}
@@ -108,7 +113,7 @@ export const ClerkInterpreterAutocompleteFilters = ({
             label={t('languagePair.toPlaceholder')}
             value={getLanguageSelectValue(filters.toLang)}
             variant={TextFieldVariant.Outlined}
-            onChange={handleFilterChange('toLang')}
+            onLanguageChange={handleLanguageFilterChange('toLang')}
             languages={distinctToLangs}
             excludedLanguage={filters.fromLang}
             translateLanguage={translateLanguage}

frontend/packages/otr/src/components/clerkInterpreter/qualification/QualificationFields.tsx

@@ -78,11 +78,10 @@ export const QualificationFields = ({
     : null;
 
   const handleLanguageSelectChange =
-    (fieldName: string) =>
-    ({}, value: AutocompleteValue) => {
+    (fieldName: 'fromLang' | 'toLang') => (language?: string) => {
       setQualification({
         ...qualification,
-        [fieldName]: value?.value ?? '',
+        [fieldName]: language,
       });
       setIsQualificationDataChanged(true);
     };
@@ -161,7 +160,7 @@ export const QualificationFields = ({
               label={t('fieldPlaceholders.from')}
               variant={TextFieldVariant.Outlined}
               value={getLanguageSelectValue(qualification.fromLang)}
-              onChange={handleLanguageSelectChange('fromLang')}
+              onLanguageChange={handleLanguageSelectChange('fromLang')}
               languages={QualificationUtils.selectableFromLangs}
               excludedLanguage={qualification.toLang}
               translateLanguage={translateLanguage}
@@ -176,7 +175,7 @@ export const QualificationFields = ({
               label={t('fieldPlaceholders.to')}
               variant={TextFieldVariant.Outlined}
               value={getLanguageSelectValue(qualification.toLang)}
-              onChange={handleLanguageSelectChange('toLang')}
+              onLanguageChange={handleLanguageSelectChange('toLang')}
               languages={QualificationUtils.getKoodistoLangKeys()}
               excludedLanguage={qualification.fromLang}
               translateLanguage={translateLanguage}

frontend/packages/otr/src/components/publicInterpreter/filters/PublicInterpreterFilters.tsx

@@ -68,11 +68,8 @@ export const PublicInterpreterFilters = ({
   };
 
   const defaultValuesState: PublicInterpreterFilterValues = {
-    fromLang: languageToComboBoxOption(
-      translateLanguage,
-      QualificationUtils.defaultFromLang
-    ),
-    toLang: null,
+    fromLang: '',
+    toLang: '',
     name: '',
     region: null,
   };
@@ -161,6 +158,20 @@ export const PublicInterpreterFilters = ({
       setSearchButtonDisabled(false);
     };
 
+  const handleLanguageChange =
+    (languageField: SearchFilter.FromLang | SearchFilter.ToLang) =>
+    (language?: string) => {
+      setFilters((prevState) => ({
+        ...prevState,
+        [languageField]: language || '',
+      }));
+      setValues((prevState) => ({
+        ...prevState,
+        [languageField]: language || '',
+      }));
+      setSearchButtonDisabled(false);
+    };
+
   const handleTextFieldFilterChange =
     (filterName: SearchFilter) =>
     (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
@@ -178,10 +189,8 @@ export const PublicInterpreterFilters = ({
   const getComboBoxAttributes = (fieldName: SearchFilter) => ({
     onInputChange: handleComboboxInputChange(fieldName),
     inputValue: inputValues[fieldName],
-    value: values[fieldName] as AutocompleteValue,
     autoHighlight: true,
     variant: TextFieldVariant.Outlined,
-    onChange: handleComboboxFilterChange(fieldName),
   });
 
   const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {
@@ -223,6 +232,12 @@ export const PublicInterpreterFilters = ({
             <LanguageSelect
               data-testid="public-interpreter-filters__from-language-select"
               {...getComboBoxAttributes(SearchFilter.FromLang)}
+              onLanguageChange={handleLanguageChange(SearchFilter.FromLang)}
+              value={
+                values.fromLang
+                  ? languageToComboBoxOption(translateLanguage, values.fromLang)
+                  : null
+              }
               label={t('languagePair.fromPlaceholder')}
               placeholder={t('languagePair.fromPlaceholder')}
               id="filters-from-lang"
@@ -236,6 +251,12 @@ export const PublicInterpreterFilters = ({
             <LanguageSelect
               data-testid="public-interpreter-filters__to-language-select"
               {...getComboBoxAttributes(SearchFilter.ToLang)}
+              value={
+                values.toLang
+                  ? languageToComboBoxOption(translateLanguage, values.toLang)
+                  : null
+              }
+              onLanguageChange={handleLanguageChange(SearchFilter.ToLang)}
               label={t('languagePair.toPlaceholder')}
               placeholder={t('languagePair.toPlaceholder')}
               id="filters-to-lang"
@@ -264,6 +285,8 @@ export const PublicInterpreterFilters = ({
           <ComboBox
             data-testid="public-interpreter-filters__region-combobox"
             {...getComboBoxAttributes(SearchFilter.Region)}
+            value={values[SearchFilter.Region]}
+            onChange={handleComboboxFilterChange(SearchFilter.Region)}
             placeholder={t('region.placeholder')}
             label={t('region.placeholder')}
             id="filters-region"

frontend/packages/otr/src/interfaces/publicInterpreter.ts

@@ -21,8 +21,8 @@ export interface PublicInterpreterFilter {
 }
 
 export interface PublicInterpreterFilterValues {
-  fromLang: AutocompleteValue;
-  toLang: AutocompleteValue;
+  fromLang: string;
+  toLang: string;
   name: string;
   region: AutocompleteValue;
 }

frontend/yarn.lock

@@ -2898,7 +2898,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.otr@workspace:packages/otr"
   dependencies:
-    shared: "npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.9.29"
+    shared: "npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.10.0"
   languageName: unknown
   linkType: soft