META-INF.resources.js.components.ModalImport.ModalImport.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 ClayModal, {useModal} from '@clayui/modal';
import {API} from '@liferay/object-js-components-web';
import React, {FormEvent, useEffect, useState} from 'react';

import {ModalImportContent} from './ModalImportContent';
import {ModalImportFailed} from './ModalImportFailed';
import {ModalImportWarning} from './ModalImportWarning';
import {
	handleDefaultImport,
	handleImport,
	handleImportMultiplesObjectDefinitions,
} from './handleImportUtil';

export type ModalImportKeys =
	| 'listTypeDefinition'
	| 'objectDefinition'
	| 'objectDefinitions'
	| 'objectFolder';
interface ModalImportProps {
	JSONInputId: string;
	apiURL: string;
	handleOnClose?: () => void;
	importExtendedInfo: KeyValueObject;
	importURL: string;
	modalImportKey: ModalImportKeys;
	nameMaxLength: string;
	objectFolderExternalReferenceCode?: string;
	onAfterImport?: () => void;
	portletNamespace: string;
	showModal?: boolean;
}

export type TFile = {
	fileName?: string;
	inputFile?: File | null;
};

export default function ModalImport({
	JSONInputId,
	apiURL,
	handleOnClose,
	importExtendedInfo,
	importURL,
	modalImportKey,
	nameMaxLength,
	objectFolderExternalReferenceCode,
	onAfterImport,
	portletNamespace,
	showModal,
}: ModalImportProps) {
	const [importLoading, setImportLoading] = useState(false);
	const [error, setError] = useState();
	const [existingObjectDefinitions, setExistingObjectDefinitions] = useState<
		ObjectDefinition[]
	>([]);
	const [externalReferenceCode, setExternalReferenceCode] =
		useState('');
	const [importedObjectDefinitions, setImportedObjectDefinitions] =
		useState();
	const [{fileName, inputFile}, setFile] = useState({});
	const [importFormData, setImportFormData] = useState();
	const importModalComponentId = `${portletNamespace}importModal`;
	const [modalImportKeyState, setModalImportKeyState] =
		useState(modalImportKey);
	const [name, setName] = useState('');
	const [visible, setVisible] = useState(showModal ?? false);
	const [warningModalVisible, setWarningModalVisible] = useState(false);
	const [failedModalVisible, setFailedModalVisible] = useState(false);

	const {observer, onClose} = useModal({
		onClose: () => {
			setVisible(false);
			setError(undefined);
			setExternalReferenceCode('');
			setFile({
				fileName: '',
				inputFile: null,
			});
			setName('');
			setFailedModalVisible(false);
			setWarningModalVisible(false);

			if (handleOnClose) {
				handleOnClose();
			}

			if (
				error &&
				error?.message !== '' &&
				!error?.type?.includes('ObjectFolderNameException') &&
				modalImportKey === 'objectFolder'
			) {
				window.location.reload();
			}
		},
	});

	const handleSubmit = (event: FormEvent) => {
		event.preventDefault();

		if (Liferay.FeatureFlags['LPD-34594'] && importedObjectDefinitions) {
			handleImportMultiplesObjectDefinitions({
				importURL,
				importedObjectDefinitions,
				objectFolderExternalReferenceCode:
					objectFolderExternalReferenceCode as string,
				onClose,
				setError,
				setExistingObjectDefinitions,
				setFailedModalVisible,
				setImportFormData,
				setImportLoading,
				setModalImportKeyState,
				setWarningModalVisible,
			});

			return;
		}

		handleDefaultImport({
			JSONInputId,
			apiURL,
			event,
			externalReferenceCode,
			importExtendedInfo,
			importURL,
			inputFile,
			onAfterImport,
			onClose,
			setError,
			setImportFormData,
			setImportLoading,
			setWarningModalVisible,
		});
	};

	useEffect(() => {
		Liferay.component(
			importModalComponentId,
			{
				open: () => {
					setVisible(true);
				},
			},
			{
				destroyOnNavigate: true,
			}
		);

		return () => Liferay.destroyComponent(importModalComponentId);
	}, [importModalComponentId, setVisible]);

	return visible ? (
		
			{warningModalVisible && (
				
						handleImport({
							importURL,
							item: importFormData as FormData,
							onAfterImport,
							onClose,
							setError,
							setFailedModalVisible,
							setImportLoading,
							setWarningModalVisible,
						})
					}
					handleOnClose={onClose}
					importLoading={importLoading}
					modalImportKey={modalImportKeyState}
				/>
			)}

			{Liferay.FeatureFlags['LPD-34594'] &&
				failedModalVisible &&
				importedObjectDefinitions &&
				error?.type === 'importMultipleObjectDefinitions' && (
					 onClose()}
						importedObjectDefinitions={importedObjectDefinitions}
					/>
				)}

			{!warningModalVisible && !failedModalVisible && (
				
			)}
		
	) : null;
}