META-INF.resources.js.components.ModalImport.ModalImportContent.tsx Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.object.web
Liferay Object Web
The newest version!
/**
 * SPDX-FileCopyrightText: (c) 2023 Liferay, Inc. https://liferay.com
 * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
 */

import ClayAlert from '@clayui/alert';
import ClayButton from '@clayui/button';
import ClayForm, {ClayInput} from '@clayui/form';
import ClayLoadingIndicator from '@clayui/loading-indicator';
import ClayModal from '@clayui/modal';
import {API, Input} from '@liferay/object-js-components-web';
import classNames from 'classnames';
import React, {FormEvent, useRef} from 'react';

import {ModalImportProperties} from '../ViewObjectDefinitions/ViewObjectDefinitions';
import {ModalImportKeys, TFile} from './ModalImport';
import {
	modalImportContentFeedbackMessage,
	modalImportContentTitle,
} from './modalImportLanguageUtil';

import './ModalImportContent.scss';

interface ModalImportContentProps extends ModalImportProperties {
	error?: API.ErrorDetails;
	externalReferenceCode: string;
	fileName: string;
	handleOnClose: () => void;
	handleSubmit: (value: FormEvent) => void;
	importLoading: boolean;
	importedObjectDefinitions?: ObjectDefinition[];
	inputFile: File;
	modalImportKey: ModalImportKeys;
	name: string;
	nameMaxLength: string;
	portletNamespace: string;
	setError: (value?: API.ErrorDetails) => void;
	setExternalReferenceCode: (value: string) => void;
	setFile: (value: TFile) => void;
	setImportedObjectDefinitions: (value?: ObjectDefinition[]) => void;
	setName: (value: string) => void;
}

export function ModalImportContent({
	JSONInputId,
	error,
	externalReferenceCode,
	fileName,
	handleOnClose,
	handleSubmit,
	importLoading,
	importedObjectDefinitions,
	inputFile,
	modalImportKey,
	name,
	nameMaxLength,
	portletNamespace,
	setError,
	setExternalReferenceCode,
	setFile,
	setImportedObjectDefinitions,
	setName,
}: ModalImportContentProps) {
	const importFormId = `${portletNamespace}importForm`;
	const inputFileRef = useRef() as React.MutableRefObject;
	const nameInputId = `${portletNamespace}name`;

	const getImportButtonDisableState = () => {
		if (
			Liferay.FeatureFlags['LPD-34594'] &&
			inputFile &&
			importedObjectDefinitions
		) {
			return false;
		}

		if (!inputFile || !name) {
			return true;
		}

		if (error && error?.message !== '') {
			if (
				error?.type?.includes('ObjectDefinitionNameException') ||
				error?.type?.includes('ObjectFolderNameException')
			) {
				return false;
			}

			if (modalImportKey === 'objectFolder') {
				return true;
			}
		}

		return false;
	};

	return (
		<>
			
				{modalImportContentTitle[modalImportKey]}
			

			
				
					{error?.message && (
						
							{error.message}
						
					)}

					
						{Liferay.Language.get(
							'the-import-process-will-run-in-the-background-and-may-take-a-few-minutes'
						)}
					

					{!importedObjectDefinitions && (
						
							
								{Liferay.Language.get('name')}
							

							
									setName(event.target.value)
								}
								type="text"
								value={name}
							/>
						
					)}

					
						
							{Liferay.Language.get('json-file')}
						

						
							
								
							

							
								 inputFileRef.current.click()}
								>
									{Liferay.Language.get('select')}
								
							

							{inputFile && (
								
									 {
											setExternalReferenceCode('');
											setFile({
												fileName: '',
												inputFile: null,
											});
											setImportedObjectDefinitions(
												undefined
											);
											inputFileRef.current.value = '';
										}}
									>
										{Liferay.Language.get('clear')}
									
								
							)}
						
					

					{externalReferenceCode && (
						
					)}

					 {
							const inputFile = target.files?.item(0);

							if (inputFile) {
								setFile({
									fileName: inputFile?.name,
									inputFile,
								});

								const fileReader = new FileReader();

								fileReader.readAsText(inputFile);

								fileReader.onload = () => {
									try {
										const JSONFile = JSON.parse(
											fileReader.result as string
										) as
											| {externalReferenceCode: string}
											| ObjectDefinition[];

										if (
											Liferay.FeatureFlags['LPD-34594'] &&
											Array.isArray(JSONFile) &&
											JSONFile[0].scope
										) {
											setError(undefined);
											setImportedObjectDefinitions(
												JSONFile
											);
											setExternalReferenceCode('');
											setName('');
										}
										else {
											setError(undefined);
											setExternalReferenceCode(
												(
													JSONFile as {
														externalReferenceCode: string;
													}
												).externalReferenceCode
											);
											setImportedObjectDefinitions(
												undefined
											);
										}
									}
									catch (error) {
										setError({
											message: Liferay.Language.get(
												'the-structure-failed-to-import'
											),
											name: '',
										});
										setExternalReferenceCode('');
										setFile({
											fileName: '',
											inputFile: null,
										});
										inputFileRef.current.value = '';
									}
								};
							}
						}}
						ref={inputFileRef}
						type="file"
					/>
				
			

			
						
							{Liferay.Language.get('cancel')}
						

						
							{importLoading ? (
								
							) : (
								Liferay.Language.get('import')
							)}
						
					
				}
			/>
		
	);
}