fix issue with empty fields by passing field names

guavestudios · Jul 28, 2023 · d28f660 · d28f660
1 parent 7dc04ad
commit d28f660
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 23 deletions.
diff --git a/src/Controller/DeeplApiController.php b/src/Controller/DeeplApiController.php
@@ -42,9 +42,9 @@ public function translate(Request $request): Response
         $translatedTexts = [];
 
         try {
-            foreach ($texts as $text) {
+            foreach ($texts as $k => $text) {
                 $response = $this->deeplApi->translate($text, $sourceLang, $targetLang);
-                $translatedTexts[] = [
+                $translatedTexts[$k] = [
                     'source' => $text,
                     'translation' => $response['translations'][0]['text'],
                 ];

diff --git a/src/Resources/public/assets/translate.js b/src/Resources/public/assets/translate.js
@@ -142,14 +142,16 @@
 	async function translateFields(fieldNames = [], targetLang = sourceLang) {
 		// get fields
 		const fields = fieldNames.reduce((arr, name) => {
-			const field = document.querySelector(`[name="${name}"]`);
-			if (field) {
-				arr.push(field);
+			const element = document.querySelector(`[name="${name}"]`);
+			if (element) {
+				arr.push({
+					name,
+					element,
+				});
 			}
 			return arr;
 		}, []);
 
-
 		if (fields.length) {
 			// dynamically ask for the source language, with default of de
 			// const lang = prompt('Übersetzen von? [de|en|fr|it]', sourceLang);
@@ -160,44 +162,56 @@
 
 			// prepare data
 			const data = {
-				texts: fields.map(field => {
+				texts: fields.reduce((texts, field) => {
 					// get the value from the html form input
-					let value = field.value;
+					let value = field.element.value;
 
 					if (window.tinyMCE) {
 						// get tinyMCE instance
-						const wysiwyg = tinyMCE.get(field.id);
+						const wysiwyg = tinyMCE.get(field.element.id);
 
 						if (wysiwyg) {
 							// get content from tinyMCE instance
 							value = wysiwyg.getContent();
 						}
 					}
 
-					return value;
-				}),
+					// if value is not empty, add value with field name as key
+					if (value) {
+						texts[field.name] = value;
+					}
+
+					return texts;
+				}, {}),
 				sourceLang,
 				targetLang
 			}
 
+
 			// send get request
 			const response = await fetch(`${API_BASE}?${urlParams(data)}`);
 			const results = await response.json();
 
 			if (results.translations) {
 				// loop through translations
-				results.translations.forEach((t, i) => {
-					// assign translation to field
-					fields[i].value = t.translation;
-
-					// check if tinyMCE exists
-					if (window.tinyMCE) {
-						// get tinyMCE instance
-						const wysiwyg = tinyMCE.get(fields[i].id);
-
-						if (wysiwyg) {
-							// set content for tinyMCE instance
-							wysiwyg.setContent(t.translation);
+				Object.entries(results.translations).forEach(([key, value]) => {
+					// find field in fields array
+					const field = fields.find(field => field.name === key)
+
+					// check if field exists
+					if (field) {
+						// assign translation to field
+						field.element.value = value.translation;
+
+						// check if tinyMCE exists
+						if (window.tinyMCE) {
+							// get tinyMCE instance
+							const wysiwyg = tinyMCE.get(field.element.id);
+
+							if (wysiwyg) {
+								// set content for tinyMCE instance
+								wysiwyg.setContent(value.translation);
+							}
 						}
 					}
 				});