From 285b30bcbb484148473547c8e4664960c656c5c7 Mon Sep 17 00:00:00 2001 From: Santiago Date: Wed, 18 Sep 2024 12:33:09 -0300 Subject: [PATCH] correctly set form --- app/react/App/styles/globals.css | 66 ++++++++--------- app/react/I18N/components/Translate.tsx | 2 +- app/react/I18N/components/TranslateModal.tsx | 76 ++++++++++---------- 3 files changed, 71 insertions(+), 73 deletions(-) diff --git a/app/react/App/styles/globals.css b/app/react/App/styles/globals.css index dca95d058a..9d16ab92cb 100644 --- a/app/react/App/styles/globals.css +++ b/app/react/App/styles/globals.css @@ -1,5 +1,5 @@ /* -! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com +! tailwindcss v3.4.11 | MIT License | https://tailwindcss.com */ /* @@ -211,6 +211,8 @@ textarea { /* 1 */ line-height: inherit; /* 1 */ + letter-spacing: inherit; + /* 1 */ color: inherit; /* 1 */ margin: 0; @@ -234,9 +236,9 @@ select { */ button, -[type='button'], -[type='reset'], -[type='submit'] { +input:where([type='button']), +input:where([type='reset']), +input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; @@ -933,6 +935,10 @@ input[type="range"]::-ms-fill-lower { --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; } ::backdrop { @@ -983,6 +989,10 @@ input[type="range"]::-ms-fill-lower { --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; } .container { @@ -1750,10 +1760,6 @@ input[type="range"]::-ms-fill-lower { margin-bottom: 1rem; } -.-ml-0 { - margin-left: -0px; -} - .-ml-0\.5 { margin-left: -0.125rem; } @@ -2402,12 +2408,6 @@ input[type="range"]::-ms-fill-lower { gap: 2rem; } -.space-x-0 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0px * var(--tw-space-x-reverse)); - margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse))); -} - .space-x-0\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.125rem * var(--tw-space-x-reverse)); @@ -4134,97 +4134,97 @@ input[type="range"]::-ms-fill-lower { display: none; } -:is(.dark .dark\:border-gray-600) { +.dark\:border-gray-600:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(75 85 99 / var(--tw-border-opacity)); } -:is(.dark .dark\:\!bg-primary-600) { +.dark\:\!bg-primary-600:is(.dark *) { --tw-bg-opacity: 1 !important; background-color: rgb(79 70 229 / var(--tw-bg-opacity)) !important; } -:is(.dark .dark\:\!bg-primary-700) { +.dark\:\!bg-primary-700:is(.dark *) { --tw-bg-opacity: 1 !important; background-color: rgb(67 56 202 / var(--tw-bg-opacity)) !important; } -:is(.dark .dark\:bg-blue-600) { +.dark\:bg-blue-600:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(79 70 229 / var(--tw-bg-opacity)); } -:is(.dark .dark\:bg-gray-600) { +.dark\:bg-gray-600:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(75 85 99 / var(--tw-bg-opacity)); } -:is(.dark .dark\:bg-gray-700) { +.dark\:bg-gray-700:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(55 65 81 / var(--tw-bg-opacity)); } -:is(.dark .dark\:bg-gray-800) { +.dark\:bg-gray-800:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(31 41 55 / var(--tw-bg-opacity)); } -:is(.dark .dark\:text-error-400) { +.dark\:text-error-400:is(.dark *) { --tw-text-opacity: 1; color: rgb(244 114 182 / var(--tw-text-opacity)); } -:is(.dark .dark\:text-gray-400) { +.dark\:text-gray-400:is(.dark *) { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); } -:is(.dark .dark\:text-gray-500) { +.dark\:text-gray-500:is(.dark *) { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); } -:is(.dark .dark\:text-white) { +.dark\:text-white:is(.dark *) { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } -:is(.dark .dark\:placeholder-gray-400)::-moz-placeholder { +.dark\:placeholder-gray-400:is(.dark *)::-moz-placeholder { --tw-placeholder-opacity: 1; color: rgb(156 163 175 / var(--tw-placeholder-opacity)); } -:is(.dark .dark\:placeholder-gray-400)::placeholder { +.dark\:placeholder-gray-400:is(.dark *)::placeholder { --tw-placeholder-opacity: 1; color: rgb(156 163 175 / var(--tw-placeholder-opacity)); } -:is(.dark .dark\:hover\:\!bg-primary-700:hover) { +.dark\:hover\:\!bg-primary-700:hover:is(.dark *) { --tw-bg-opacity: 1 !important; background-color: rgb(67 56 202 / var(--tw-bg-opacity)) !important; } -:is(.dark .dark\:hover\:bg-blue-700:hover) { +.dark\:hover\:bg-blue-700:hover:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(67 56 202 / var(--tw-bg-opacity)); } -:is(.dark .dark\:hover\:bg-gray-600:hover) { +.dark\:hover\:bg-gray-600:hover:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(75 85 99 / var(--tw-bg-opacity)); } -:is(.dark .dark\:hover\:text-white:hover) { +.dark\:hover\:text-white:hover:is(.dark *) { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } -:is(.dark .dark\:focus\:border-blue-500:focus) { +.dark\:focus\:border-blue-500:focus:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(99 102 241 / var(--tw-border-opacity)); } -:is(.dark .dark\:focus\:ring-blue-500:focus) { +.dark\:focus\:ring-blue-500:focus:is(.dark *) { --tw-ring-opacity: 1; --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity)); } diff --git a/app/react/I18N/components/Translate.tsx b/app/react/I18N/components/Translate.tsx index 7459647a17..017e50cab2 100644 --- a/app/react/I18N/components/Translate.tsx +++ b/app/react/I18N/components/Translate.tsx @@ -56,7 +56,7 @@ const Translate = ({ className, children, context = 'System', translationKey }: setInlineEditState({ inlineEdit: inlineEditState.inlineEdit, context, - translationKey: text, + translationKey: translationKey || children, }); } }} diff --git a/app/react/I18N/components/TranslateModal.tsx b/app/react/I18N/components/TranslateModal.tsx index 1dde8d98a5..0e154ae0e5 100644 --- a/app/react/I18N/components/TranslateModal.tsx +++ b/app/react/I18N/components/TranslateModal.tsx @@ -1,7 +1,7 @@ /* eslint-disable react/jsx-props-no-spreading */ import React, { useEffect } from 'react'; import { useAtom, useAtomValue } from 'jotai'; -import { useForm } from 'react-hook-form'; +import { useFieldArray, useForm } from 'react-hook-form'; import { Modal } from 'V2/Components/UI'; import { settingsAtom, translationsAtom, inlineEditAtom } from 'V2/atoms'; import { InputField } from 'app/V2/Components/Forms'; @@ -12,43 +12,43 @@ const TranslateModal = () => { const [translations, setTranslations] = useAtom(translationsAtom); const { languages } = useAtomValue(settingsAtom); - const defaultValues = { - formValues: [], - }; - - const { register, handleSubmit, setValue } = useForm({ - defaultValues, + const { register, handleSubmit, control } = useForm({ mode: 'onSubmit', }); + const { replace, fields } = useFieldArray({ control, keyName: 'id', name: 'values' }); + useEffect(() => { - if (inlineEditState.context) { - const formValues = translations.map(translation => { - const language = languages?.find(lang => lang.key === translation.locale); - const value = translation.contexts.find(ctx => ctx.id === inlineEditState.context)?.values[ - inlineEditState.translationKey - ]; - return { language: language?.key, value, key: inlineEditState.translationKey }; - }); - setValue('formValues', formValues); - } - }, [inlineEditState, languages, setValue, translations]); + const values = translations.map(translation => { + const language = languages?.find(lang => lang.key === translation.locale); + const value = translation.contexts.find(ctx => ctx.id === inlineEditState.context)?.values[ + inlineEditState.translationKey + ]; + return { + language: language?.key, + value, + key: inlineEditState.translationKey, + }; + }); + replace(values); + }, [inlineEditState.context, inlineEditState.translationKey, languages, replace, translations]); const submit = async values => { - const updatedTranslations = await postV2( - [ - { - language: 'en', - value: 'TEST', - key: 'Filters (FILTERS CONFIGURATION)', - }, - ], - { - type: 'Uwazi UI', - label: 'User Interface', - id: 'System', - } - ); + console.log(values); + // const updatedTranslations = await postV2( + // [ + // { + // language: 'en', + // value: 'TEST', + // key: 'Filters (FILTERS CONFIGURATION)', + // }, + // ], + // { + // type: 'Uwazi UI', + // label: 'User Interface', + // id: 'System', + // } + // ); }; return ( @@ -67,14 +67,12 @@ const TranslateModal = () => {

{inlineEditState.translationKey}

- {defaultValues.formValues.map((language, index) => ( + {fields?.map((field, index) => ( {language.language.toUpperCase()}} - id={`formValues.${index}.value`} - // no unique identifiers for these fields - // eslint-disable-next-line react/no-array-index-key - key={`formValues.${index}.value`} - {...register(`formValues.${index}.value`)} + label={{field.language}} + id={field.id} + key={field.id} + {...register(`values.${index}.value`)} /> ))}