diff --git a/libs/types/src/lib/localization.ts b/libs/types/src/lib/localization.ts index 12436c934..fd2d420cd 100644 --- a/libs/types/src/lib/localization.ts +++ b/libs/types/src/lib/localization.ts @@ -1,5 +1,5 @@ export interface LocalizedStrings { - [kode: string]: string; + [kode: string]: string | string[]; } export type ISOLanguage = 'nb' | 'nn' | 'no' | 'en'; diff --git a/libs/ui/src/lib/formik-language-fieldset/index.tsx b/libs/ui/src/lib/formik-language-fieldset/index.tsx index 41053b60a..2335fba19 100644 --- a/libs/ui/src/lib/formik-language-fieldset/index.tsx +++ b/libs/ui/src/lib/formik-language-fieldset/index.tsx @@ -1,20 +1,23 @@ 'use client'; -import { ReactNode } from 'react'; +import { ReactNode, useState } from 'react'; import { localization } from '@catalog-frontend/utils'; -import { Fieldset, Button, Box, Paragraph, Textfield } from '@digdir/designsystemet-react'; +import { Fieldset, Button, Box, Paragraph, Textfield, ErrorMessage, Chip } from '@digdir/designsystemet-react'; import { FastField, useFormikContext } from 'formik'; import styles from './formik-language-fieldset.module.scss'; import { ISOLanguage, LocalizedStrings } from '@catalog-frontend/types'; import { PlusCircleIcon, TrashIcon } from '@navikt/aksel-icons'; import { TextareaWithPrefix } from '../textarea-with-prefix'; +import _ from 'lodash'; type LanuguageFieldsetProps = { legend?: ReactNode; name: string; + errorFieldLabel: string; requiredLanguages?: Omit[]; as?: typeof Textfield | typeof TextareaWithPrefix; + multiple?: boolean; }; const allowedLanguages = Object.freeze(['nb', 'nn', 'en']); @@ -22,87 +25,158 @@ const allowedLanguages = Object.freeze(['nb', 'nn', 'en']); export const FormikLanguageFieldset = ({ legend, name, + errorFieldLabel, requiredLanguages, as: renderAs = Textfield, + multiple = false, }: LanuguageFieldsetProps) => { - const { errors, getFieldMeta, setFieldValue } = useFormikContext>(); + const { errors, values, getFieldMeta, setFieldValue } = useFormikContext>(); + const [textValue, setTextValue] = useState>({}); const handleAddLanguage = (lang: string) => { - setFieldValue(`${name}.${lang}`, ''); + setFieldValue(`${name}.${lang}`, multiple ? [] : ''); }; const handleRemoveLanguage = (lang: string) => { setFieldValue(`${name}.${lang}`, undefined); }; + const handleOnChangeTextValue = (value: string, lang: string) => { + setTextValue((prev) => ({ ...prev, ...{ [lang]: value } })); + }; + + const handleAddTextValue = (lang: string) => { + if(Boolean(textValue[lang]) === true) { + const textValues = [...(values?.[name]?.[lang] as string[]), textValue[lang]]; + setFieldValue(`${name}.${lang}`, textValues); + setTextValue((prev) => ({ ...prev, ...{ [lang]: '' } })); + } + }; + + const handleRemoveTextValue = (index: number, lang: string) => { + const textValues = [...(values?.[name]?.[lang] as string[])]; + textValues.splice(index, 1); + setFieldValue(`${name}.${lang}`, textValues); + }; + const visibleLanguageFields = allowedLanguages.filter((lang) => { const metadata = getFieldMeta(`${name}.${lang}`); return requiredLanguages?.includes(lang) || metadata.value !== undefined; }); const visibleLanguageButtons = allowedLanguages.filter((lang) => !visibleLanguageFields.includes(lang)); + const languagesWithError = allowedLanguages + .filter((lang) => _.get(errors, `${name}.${lang}`)) + .map((lang) => localization.language[lang]); return ( -
+
{visibleLanguageFields.map((lang) => ( -
- - - {localization.language[lang]} - - {!requiredLanguages?.includes(lang) && ( - - + + + + {(values?.[name]?.[lang] as string[] | undefined)?.map((v, i) => ( + handleRemoveTextValue(i, lang)} + > + {v} + + ))} + + + ) : ( + + + handleRemoveLanguage(lang)} + variant='short' > - - {localization.button.delete} - - - )} - - ), - } - : { - prefix: localization.language[lang], - })} - /> - {!requiredLanguages?.includes(lang) && renderAs !== TextareaWithPrefix && ( - + + )} + + ), + } + : { + prefix: localization.language[lang], + })} /> - {localization.button.delete} - + {!requiredLanguages?.includes(lang) && renderAs !== TextareaWithPrefix && ( + + )} + )}
))} @@ -120,6 +194,13 @@ export const FormikLanguageFieldset = ({ ))} + + {languagesWithError.length > 0 && ( + {`${localization.formatString(localization.conceptForm.validation.languageRequired, { label: errorFieldLabel, language: languagesWithError.join(', ') })}`} + )}
); };