VKT(Frontend): Upgrade to use new ComboBox implementation [deploy]

Opetushallitus · Oct 25, 2023 · 0e85d14 · 0e85d14
1 parent cc1fb03
commit 0e85d14
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 29 deletions.
diff --git a/frontend/packages/vkt/package.json b/frontend/packages/vkt/package.json
@@ -26,6 +26,6 @@
   },
   "dependencies": {
     "reduxjs-toolkit-persist": "^7.2.1",
-    "shared": "npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.9.29"
+    "shared": "npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.10.0"
   }
 }
diff --git a/frontend/packages/vkt/src/components/clerkEnrollment/overview/MoveModal.tsx b/frontend/packages/vkt/src/components/clerkEnrollment/overview/MoveModal.tsx
@@ -14,7 +14,7 @@ import {
   Variant,
 } from 'shared/enums';
 import { useToast } from 'shared/hooks';
-import { AutocompleteValue, ComboBoxOption } from 'shared/interfaces';
+import { ComboBoxOption } from 'shared/interfaces';
 import { DateUtils } from 'shared/utils';
 
 import { useClerkTranslation, useCommonTranslation } from 'configs/i18n';
@@ -104,8 +104,15 @@ export const MoveModal: FC<MoveModalProps> = ({ enrollment, onCancel }) => {
     .reverse()
     .map(getComboBoxOption);
 
-  const handleExamEventOptionChange = ({}, value: AutocompleteValue) => {
-    setSelectedExamEventOption(value as ComboBoxOption);
+  const handleExamEventOptionChange = (value?: string) => {
+    if (value) {
+      const selected = selectableExamEventOptions.filter(
+        (v: ComboBoxOption) => v.value === value
+      );
+      setSelectedExamEventOption(selected);
+    } else {
+      setSelectedExamEventOption(null);
+    }
   };
 
   const handleMoveButtonClick = () => {

diff --git a/frontend/packages/vkt/src/components/clerkExamEvent/create/ClerkExamLanguageLevel.tsx b/frontend/packages/vkt/src/components/clerkExamEvent/create/ClerkExamLanguageLevel.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { ComboBox, H3 } from 'shared/components';
 import { TextFieldVariant } from 'shared/enums';
-import { AutocompleteValue } from 'shared/interfaces';
 
 import { useClerkTranslation, useCommonTranslation } from 'configs/i18n';
 import { useAppDispatch } from 'configs/redux';
@@ -29,8 +28,8 @@ export const ClerkExamLanguageLevel = ({
   const translateCommon = useCommonTranslation();
   const dispatch = useAppDispatch();
 
-  const onLangLevelChange = ({}, value: AutocompleteValue) => {
-    const [language, level] = (value?.value.split('-') as [
+  const onLangLevelChange = (languageAndLevel?: string) => {
+    const [language, level] = (languageAndLevel?.split('-') as [
       Exclude<ExamLanguage, ExamLanguage.ALL>,
       ExamLevel
     ]) || [undefined, undefined];

diff --git a/frontend/packages/vkt/src/components/clerkExamEvent/overview/ClerkExamEventDetails.tsx b/frontend/packages/vkt/src/components/clerkExamEvent/overview/ClerkExamEventDetails.tsx
@@ -3,13 +3,7 @@ import DownloadIcon from '@mui/icons-material/DownloadOutlined';
 import { Alert } from '@mui/material';
 import { Dayjs } from 'dayjs';
 import { ChangeEvent, FC, useCallback, useEffect, useState } from 'react';
-import {
-  AutocompleteValue,
-  DropDownMenuButton,
-  ExtLink,
-  H2,
-  Text,
-} from 'shared/components';
+import { DropDownMenuButton, ExtLink, H2, Text } from 'shared/components';
 import { APIResponseStatus, Color, Severity, Variant } from 'shared/enums';
 import { useDialog, useToast } from 'shared/hooks';
 
@@ -195,9 +189,8 @@ export const ClerkExamEventDetails = () => {
   ];
 
   const handleComboBoxChange =
-    (field: keyof ClerkExamEventBasicInformation) =>
-    ({}, autocompleteValue?: AutocompleteValue) => {
-      handleFieldChange(field, autocompleteValue?.value);
+    (field: keyof ClerkExamEventBasicInformation) => (value?: string) => {
+      handleFieldChange(field, value);
     };
 
   const handleCheckBoxChange =

diff --git a/frontend/packages/vkt/src/components/clerkExamEvent/overview/ClerkExamEventDetailsFields.tsx b/frontend/packages/vkt/src/components/clerkExamEvent/overview/ClerkExamEventDetailsFields.tsx
@@ -1,7 +1,6 @@
 import dayjs, { Dayjs } from 'dayjs';
 import { ChangeEvent } from 'react';
 import {
-  AutocompleteValue,
   ComboBox,
   CustomDatePicker,
   CustomSwitch,
@@ -30,7 +29,7 @@ export const ClerkExamEventDetailsFields = ({
   editDisabled: boolean;
   onComboBoxChange: (
     field: keyof ClerkExamEventBasicInformation
-  ) => ({}, autocompleteValue?: AutocompleteValue) => void;
+  ) => (value?: string) => void;
   onDateChange: (
     field: keyof Pick<
       ClerkExamEventBasicInformation,
@@ -79,7 +78,11 @@ export const ClerkExamEventDetailsFields = ({
             values={Object.keys(ExamLanguage)
               .filter((l) => l !== ExamLanguage.ALL)
               .map(languageCodeToLabel)}
-            value={languageCodeToLabel(examEvent.language)}
+            value={
+              examEvent.language
+                ? languageCodeToLabel(examEvent.language)
+                : null
+            }
             onChange={onComboBoxChange('language')}
           />
         </div>
@@ -91,7 +94,7 @@ export const ClerkExamEventDetailsFields = ({
             disabled={editDisabled}
             variant={TextFieldVariant.Outlined}
             values={Object.keys(ExamLevel).map(examLevelToLabel)}
-            value={examLevelToLabel(examEvent.level)}
+            value={examEvent.level ? examLevelToLabel(examEvent.level) : null}
             onChange={onComboBoxChange('level')}
           />
         </div>

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -3001,7 +3001,7 @@ __metadata:
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.vkt@workspace:packages/vkt"
   dependencies:
     reduxjs-toolkit-persist: ^7.2.1
-    shared: "npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.9.29"
+    shared: "npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.10.0"
   languageName: unknown
   linkType: soft
 
@@ -12606,13 +12606,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shared@npm:@opetushallitus/[email protected]":
-  version: 1.9.29
-  resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.shared@npm:1.9.29::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40Opetushallitus%2Fkieli-ja-kaantajatutkinnot.shared%2F1.9.29%2Fbae7e4637da7470c2d65ef5969d5bdc015618fc6"
-  checksum: 78851915b3556ca5bc459ddf5ade477c5f62876e6a267f1bb174f4a5e0add4d957ae35882f358e748ef58bb2dea00db913aa8cf2937340199037b7ff23757a40
-  languageName: node
-  linkType: hard
-
 "shebang-command@npm:^2.0.0":
   version: 2.0.0
   resolution: "shebang-command@npm:2.0.0"