From 452ede00c3a9b00a5db42fc617eb7f4b78d4692c Mon Sep 17 00:00:00 2001 From: Joar Aurdal Date: Fri, 8 Nov 2024 08:52:50 +0100 Subject: [PATCH] Fjern janzz fra minne dersom on toggle blir kalt uten verdi (#255) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Fjern janzz fra minne dersom onToggle blir kalt uten verdi * LEgg på useEffect for å få med endringer i tittel i janzz combobox * Bump deploy * Fiks undefined janzz feil * Fiks undefined janzz feil * Fiks undefined janzz feil * Fiks undefined janzz feil * Tilbakestill til master * Bruk onblur til validering av janzz * Bruk onblur til validering av janzz * Endre feilmeldingstekst når yrkestittel ikke er gyldig * Fjern kommerntarer * Fjern kommerntarer * Legg til filter for ugyldige janzz * Pass på at onChange ikke resetter validering når den kjøres etter toggle * Forsøk comboboks janzz uten å bruke ref * Håndter deselection * Legg inn kommentar om hvorfor vi bruker option ref ved endring av komboboks for janzz --- .github/workflows/deploy.yml | 2 +- src/stilling/stilling/adValidationReducer.ts | 3 +- .../edit/om-stillingen/janzz/Janzz.tsx | 48 ++++++++++++++----- 3 files changed, 39 insertions(+), 14 deletions(-) diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 0bf64a0c..ebf760f1 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -45,7 +45,7 @@ jobs: deploy-til-dev: name: Deploy til dev-gcp needs: bygg-og-push-docker-image - if: github.event_name == 'workflow_dispatch' || github.ref == 'refs/heads/master' || github.ref == 'refs/heads/bruk-styrk08Nav-på-gamle-stillinger' + if: github.event_name == 'workflow_dispatch' || github.ref == 'refs/heads/master' || github.ref == 'refs/heads/fjern-janzz-fra-minne-dersom-onToggle-blir-kalt-uten-verdi' runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 diff --git a/src/stilling/stilling/adValidationReducer.ts b/src/stilling/stilling/adValidationReducer.ts index 73ba3192..3e1563a3 100644 --- a/src/stilling/stilling/adValidationReducer.ts +++ b/src/stilling/stilling/adValidationReducer.ts @@ -144,10 +144,9 @@ function* validateLocationArea(): Generator { function* validateYrkestittel(): Generator { const state = yield select(); const { categoryList } = state.adData; - console.log('validateYrkestittel SET_JANZZ', categoryList); if (valueIsNotSet(categoryList)) { - yield addValidationError({ field: 'yrkestittel', message: 'Yrkestittel mangler' }); + yield addValidationError({ field: 'yrkestittel', message: 'Gyldig yrkestittel må velges' }); } else { yield removeValidationError({ field: 'yrkestittel' }); } diff --git a/src/stilling/stilling/edit/om-stillingen/janzz/Janzz.tsx b/src/stilling/stilling/edit/om-stillingen/janzz/Janzz.tsx index f7329dde..ca508f02 100644 --- a/src/stilling/stilling/edit/om-stillingen/janzz/Janzz.tsx +++ b/src/stilling/stilling/edit/om-stillingen/janzz/Janzz.tsx @@ -1,6 +1,4 @@ -// components/Janzz.tsx - -import React, { FunctionComponent, useState } from 'react'; +import React, { FunctionComponent, useState, useRef } from 'react'; import css from './Janzz.module.css'; import { SET_EMPLOYMENT_JOBTITLE, SET_JANZZ } from '../../../adDataReducer'; import { useDispatch, useSelector } from 'react-redux'; @@ -19,16 +17,33 @@ const Janzz: FunctionComponent = ({ tittel }) => { const yrkestittelError = useSelector((state: State) => state.adValidation.errors.yrkestittel); const [input, setInput] = useState(tittel); + const [hasValidSelection, setHasValidSelection] = useState(true); + + // Må håndtere at onChange blir kalt når en onToggleSelection blir valgt i comboboxen + const optionSelectedRef = useRef(false); const { data: suggestions, isLoading, error } = useHentJanzzYrker(input); + const filteredSuggestions = suggestions + ? suggestions + .filter((f) => f.styrk08 && f.styrk08.trim() !== '' && f.styrk08 !== '9999') + .map((f) => f.label) + : []; + const onChange = (event: React.ChangeEvent | null, value?: string) => { - setInput(event?.target?.value || value || ''); + const newValue = event?.target.value || value || ''; + setInput(newValue); + + if (optionSelectedRef.current) { + optionSelectedRef.current = false; + } else { + setHasValidSelection(false); + } }; - const onToggleSelected = (option: string, isSelected: boolean) => { - if (isSelected && suggestions) { - const found = suggestions.find( + const onToggleSelected = (option: string, isSelected: boolean, isCustomOption: boolean) => { + if (isSelected) { + const found = suggestions?.find( (forslag) => forslag.label.toLowerCase() === option.toLowerCase() ); if (found) { @@ -45,13 +60,23 @@ const Janzz: FunctionComponent = ({ tittel }) => { ]; dispatch({ type: SET_JANZZ, kategori }); setInput(capitalizeEmployerName(found.label) || ''); + setHasValidSelection(true); + optionSelectedRef.current = true; } + } else { + setHasValidSelection(false); + dispatch({ type: SET_JANZZ, kategori: undefined }); + } + }; + + const onBlur = () => { + if (!hasValidSelection) { + dispatch({ type: SET_JANZZ, kategori: undefined }); } }; const feilmeldingTilBruker = error ? error.message : undefined; - // TODO: Fjern default tekster fra backend, slik at vi slipper å filterere de bort her return (
= ({ tittel }) => { ? '' : input } - options={suggestions ? suggestions.map((f) => f.label) : []} + options={filteredSuggestions} onChange={onChange} onToggleSelected={onToggleSelected} + onBlur={onBlur} isLoading={isLoading} - error={yrkestittelError || feilmeldingTilBruker} + error={!hasValidSelection ? yrkestittelError || feilmeldingTilBruker : undefined} className={css.typeahead} aria-labelledby="endre-stilling-styrk" - filteredOptions={suggestions ? suggestions.map((f) => f.label) : []} + filteredOptions={filteredSuggestions} />
);