Skip to content

Commit

Permalink
correctly set form
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zasa-san
Zasa-san committed Sep 18, 2024
1 parent 83cf08f commit 285b30b
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 73 deletions.
66 changes: 33 additions & 33 deletions app/react/App/styles/globals.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
! tailwindcss v3.4.11 | MIT License | https://tailwindcss.com
*/

/*
Expand Down Expand Up @@ -211,6 +211,8 @@ textarea {
/* 1 */
line-height: inherit;
/* 1 */
letter-spacing: inherit;
/* 1 */
color: inherit;
/* 1 */
margin: 0;
Expand All @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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));
Expand Down Expand Up @@ -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));
}
Expand Down
2 changes: 1 addition & 1 deletion app/react/I18N/components/Translate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const Translate = ({ className, children, context = 'System', translationKey }:
setInlineEditState({
inlineEdit: inlineEditState.inlineEdit,
context,
translationKey: text,
translationKey: translationKey || children,
});
}
}}
Expand Down
76 changes: 37 additions & 39 deletions app/react/I18N/components/TranslateModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -12,43 +12,43 @@ const TranslateModal = () => {
const [translations, setTranslations] = useAtom(translationsAtom);

Check failure on line 12 in app/react/I18N/components/TranslateModal.tsx

View workflow job for this annotation

GitHub Actions / eslint 

'setTranslations' is assigned a value but never used
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 (
Expand All @@ -67,14 +67,12 @@ const TranslateModal = () => {
<p>{inlineEditState.translationKey}</p>

<form onSubmit={handleSubmit(submit)}>
{defaultValues.formValues.map((language, index) => (
{fields?.map((field, index) => (
<InputField
label={<span>{language.language.toUpperCase()}</span>}
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={<span>{field.language}</span>}
id={field.id}
key={field.id}
{...register(`values.${index}.value`)}
/>
))}
<button type="submit">Save</button>
Expand Down

0 comments on commit 285b30b

Please sign in to comment.