META-INF.resources.js.translation_manager.TranslationOptions.tsx Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.journal.web
Liferay Journal Web
There is a newer version: 5.0.181
/**
 * SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
 * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
 */

import ClayButton from '@clayui/button';
import ClayDropDown from '@clayui/drop-down';
import ClayIcon from '@clayui/icon';
import ClayModal, {useModal} from '@clayui/modal';
import {sub} from 'frontend-js-web';
import React, {useState} from 'react';

import {TranslationManagerProps} from './Types';
import useTranslationProgress from './useTranslationProgress';

export default function TranslationOptions({
	defaultLanguageId: initialDefaultLanguageId,
	fields: initialFields,
	locales,
	namespace,
	selectedLanguageId: initialSelectedLanguageId,
}: TranslationManagerProps) {
	const {
		observer: resetTranslationObserver,
		onOpenChange: onOpenChangeResetTranslation,
		open: openResetTranslation,
	} = useModal();

	const {
		observer: markTranslatedObserver,
		onOpenChange: onOpenChangeMarkAsTranslated,
		open: openMarkTranslated,
	} = useModal();

	const [dropdownActive, setDropdownActive] = useState(false);

	const {
		defaultLanguageId,
		selectedLanguageId,
		translationProgress,
		updateTranslations,
	} = useTranslationProgress({
		defaultLanguageId: initialDefaultLanguageId,
		fields: initialFields,
		locales,
		namespace,
		selectedLanguageId: initialSelectedLanguageId,
	});

	const markAsTranslatedHandler = () => {
		Liferay.fire('inputLocalized:markAsTranslated', {selectedLanguageId});
		Liferay.fire('journal:storeState', {
			fieldName: Liferay.Language.get('mark-as-translated'),
		});
	};

	const resetButtonHandler = () => {
		Object.keys(initialFields)
			.flatMap((fieldName) => {
				return Array.from(
					document.querySelectorAll(
						`[type="hidden"][data-field-name="${fieldName}"]`
					)
				).filter(
					(input) => input.dataset.languageid === selectedLanguageId
				);
			})
			.map((input) => {
				input.remove();
			});

		Liferay.fire('inputLocalized:resetTranslations', {
			defaultLanguageId,
		});

		Liferay.fire('inputLocalized:localeChanged', {
			item: document.querySelector(
				`[data-languageid="${selectedLanguageId}"][data-value="${selectedLanguageId}"]`
			),
		});

		Liferay.fire('inputLocalized:updateTranslationStatus');

		Liferay.fire('journal:storeState', {
			fieldName: Liferay.Language.get('reset-translation'),
		});
	};

	const disabledResetButton =
		!translationProgress?.translatedItems[selectedLanguageId] ||
		translationProgress?.translatedItems[selectedLanguageId] === 0;

	const disabledMarkTranslatedButton =
		translationProgress?.translatedItems[selectedLanguageId] ===
		translationProgress?.totalItems;

	return (
		<>
			{selectedLanguageId !== defaultLanguageId && (
				 {
						if (active) {
							updateTranslations();
						}

						setDropdownActive(active);
					}}
					trigger={
						
							
						
					}
				>
					
						
							
									onOpenChangeMarkAsTranslated(true)
								}
								size="sm"
							>
								

								
									{Liferay.Language.get('mark-as-translated')}
								
							
						

						
							
									onOpenChangeResetTranslation(true)
								}
								size="sm"
							>
								

								
									{Liferay.Language.get('reset-translation')}
								
							
						
					
				
			)}

			{openResetTranslation && (
				
					
						{sub(
							Liferay.Language.get('delete-x-translation'),
							selectedLanguageId
						)}
					

					
						${selectedLanguageId}`
								),
							}}
						/>
					

					
								
										onOpenChangeResetTranslation(false)
									}
								>
									{Liferay.Language.get('cancel')}
								

								 {
										onOpenChangeResetTranslation(false);
										resetButtonHandler();
									}}
								>
									{Liferay.Language.get('delete')}
								
							
						}
					/>
				
			)}
			{openMarkTranslated && (
				
					
						{sub(
							Liferay.Language.get('mark-x-as-translated'),
							selectedLanguageId
						)}
					

					
						${selectedLanguageId}`
								),
							}}
						/>
					

					
								
										onOpenChangeMarkAsTranslated(false)
									}
								>
									{Liferay.Language.get('cancel')}
								

								 {
										onOpenChangeMarkAsTranslated(false);
										markAsTranslatedHandler();
									}}
								>
									{Liferay.Language.get('mark-as-translated')}
								
							
						}
					/>
				
			)}
		
	);
}