META-INF.resources.js.SystemDataSets.tsx Maven / Gradle / Ivy

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

import {FrontendDataSet} from '@liferay/frontend-data-set-web';
import React, {useContext, useState} from 'react';

import '../css/DataSets.scss';

import ClayButton from '@clayui/button';
import {ClayRadio} from '@clayui/form';
import ClayIcon from '@clayui/icon';
import ClayLabel from '@clayui/label';
import ClayLink from '@clayui/link';
import ClayList from '@clayui/list';
import ClayModal from '@clayui/modal';
import ClaySticker from '@clayui/sticker';
import {ClayTooltipProvider} from '@clayui/tooltip';
import classNames from 'classnames';
import {openModal} from 'frontend-js-components-web';
import {fetch, navigate} from 'frontend-js-web';

import Toggle from './components/Toggle';
import {
	API_URL,
	DEFAULT_FETCH_HEADERS,
	FDS_DEFAULT_PROPS,
} from './utils/constants';
import getAPIExplorerURL from './utils/getAPIExplorerURL';
import openDefaultFailureToast from './utils/openDefaultFailureToast';
import openDefaultSuccessToast from './utils/openDefaultSuccessToast';
import {IDataSet, ISystemDataSet} from './utils/types';

interface IFrontendDataSetContext {
	onSelect: Function;
	selectItems: ({trigger, value}: {trigger: string; value: any}) => void;
	selectable: boolean;
	selectedItemsKey: keyof ISystemDataSet;
	selectedItemsValue: Array;
}

const SystemDataSetsView = ({
	frontendDataSetContext,
	items,
}: {
	frontendDataSetContext: any;
	items: Array;
}) => {
	const {
		onSelect,
		selectItems,
		selectable,
		selectedItemsKey,
		selectedItemsValue,
	} = useContext(frontendDataSetContext) as IFrontendDataSetContext;

	return (
		
			{items.map((item) => {
				return (
					 {
							if (selectable) {
								selectItems({
									trigger: 'container',
									value: item[selectedItemsKey],
								});

								onSelect({selectedItems: [item]});
							}
						}}
					>
						
							
													String(element)
												)
												.includes(
													String(
														item[selectedItemsKey]
													)
												)
										: false
								}
								onChange={() => {}}
								value=""
							/>
						

						
							
								
							
						

						
							
								{item.title}
							

							
								{item.description}
							
						

						{item.imported && (
							
								
									{Liferay.Language.get('created')}
								
							
						)}
					
				);
			})}
		
	);
};

const SelectSystemDataSetModalContent = ({
	closeModal,
	getSystemDataSetsURL,
	importSystemDataSetURL,
	loadData,
	namespace,
}: {
	closeModal: Function;
	getSystemDataSetsURL: string;
	importSystemDataSetURL: string;
	loadData: Function;
	namespace: string;
}) => {
	const [createButtonDisabled, setCreateButtonDisabled] = useState(true);
	const [selectedSystemDataSet, setSelectedSystemDataSet] =
		useState(null);

	const onCreateButtonClick = async () => {
		if (!selectedSystemDataSet) {
			return;
		}

		setCreateButtonDisabled(true);

		const formData = new FormData();

		formData.append(`${namespace}name`, selectedSystemDataSet.name);

		const response = await fetch(importSystemDataSetURL, {
			body: formData,
			method: 'POST',
		});

		if (response.ok) {
			closeModal();

			openDefaultSuccessToast();

			loadData();
		}
		else {
			openDefaultFailureToast();

			setCreateButtonDisabled(false);
		}
	};

	return (
		<>
			
				{Liferay.Language.get('create-system-data-set-customization')}
			

			
				
					;
						}) => {
							setSelectedSystemDataSet(selectedItems[0]);
						}}
						selectedItemsKey="name"
						selectionType="single"
						views={[
							{
								component: SystemDataSetsView,
								contentRenderer: 'custom',
								name: 'custom',
							},
						]}
					/>
				
			

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

						
							{Liferay.Language.get('create')}
						
					
				}
			/>
		
	);
};

const SystemDataSets = ({
	editDataSetURL,
	getSystemDataSetsURL,
	importSystemDataSetURL,
	namespace,
	systemDataSets,
}: {
	editDataSetURL: string;
	getSystemDataSetsURL: string;
	importSystemDataSetURL: string;
	namespace: string;
	systemDataSets: Array;
}) => {
	const [toggleDisabled, setToogleDisabled] = useState(false);

	const getAPIURL = () => {
		if (!systemDataSets.length) {
			return undefined;
		}

		const systemDataSetNames: string = systemDataSets
			.map((systemDataSet) => `'${systemDataSet.name}'`)
			.join(',');

		return `${API_URL.DATA_SETS}?filter=externalReferenceCode in (${systemDataSetNames})`;
	};

	const getEditURL = (itemData: IDataSet) => {
		const url = new URL(editDataSetURL);

		url.searchParams.set(
			`${namespace}dataSetERC`,
			itemData.externalReferenceCode
		);
		url.searchParams.set(`${namespace}dataSetLabel`, itemData.label);

		return url;
	};

	const onDeleteClick = ({
		itemData,
		loadData,
	}: {
		itemData: IDataSet;
		loadData: Function;
	}) => {
		openModal({
			bodyHTML: Liferay.Language.get(
				'are-you-sure-you-want-to-delete-this'
			),
			buttons: [
				{
					autoFocus: true,
					displayType: 'secondary',
					label: Liferay.Language.get('cancel'),
					type: 'cancel',
				},
				{
					displayType: 'danger',
					label: Liferay.Language.get('delete'),
					onClick: ({processClose}: {processClose: Function}) => {
						processClose();

						fetch(itemData.actions.delete.href, {
							headers: DEFAULT_FETCH_HEADERS,
							method: itemData.actions.delete.method,
						})
							.then(() => {
								openDefaultSuccessToast();

								loadData();
							})
							.catch(openDefaultFailureToast);
					},
				},
			],
			status: 'danger',
			title: Liferay.Language.get('delete-data-set'),
		});
	};

	const updateActive = async ({
		itemData,
		onItemsChange,
	}: {
		itemData: IDataSet;
		onItemsChange: ({items}: {items: Array}) => void;
	}) => {
		setToogleDisabled(true);

		const response = await fetch(
			`${API_URL.DATA_SETS}/by-external-reference-code/${itemData.externalReferenceCode}`,
			{
				body: JSON.stringify({active: !itemData.active}),
				headers: DEFAULT_FETCH_HEADERS,
				method: 'PATCH',
			}
		);

		if (!response.ok) {
			openDefaultFailureToast();

			return;
		}

		const systemDataSet: IDataSet = await response.json();

		if (systemDataSet?.id) {
			onItemsChange({items: [systemDataSet]});

			openDefaultSuccessToast();
		}
		else {
			openDefaultFailureToast();
		}

		setToogleDisabled(false);
	};

	const creationMenu = {
		primaryItems: [
			{
				label: Liferay.Language.get(
					'create-system-data-set-customization'
				),
				onClick: ({loadData}: {loadData: Function}) => {
					openModal({
						contentComponent: ({
							closeModal,
						}: {
							closeModal: Function;
						}) => (
							
						),
						size: 'lg',
					});
				},
			},
		],
	};

	const restApplicationRenderer = function ({
		itemData,
	}: {
		itemData: IDataSet;
	}) {
		const apiExplorerURL = getAPIExplorerURL(itemData.restApplication);

		return (
			
				
					
						
					

					{itemData.restApplication}
				
			
		);
	};

	const toggleRenderer = function ({
		itemData,
		onItemsChange,
	}: {
		itemData: IDataSet;
		onItemsChange: ({items}: {items: Array}) => void;
	}) {
		if (itemData.actions.update) {
			return Toggle({
				disabled: toggleDisabled,
				item: itemData,
				toggleChange: () => updateActive({itemData, onItemsChange}),
			});
		}

		return (
			
				{itemData.active
					? Liferay.Language.get('active')
					: Liferay.Language.get('inactive')}
			
		);
	};

	const views = [
		{
			contentRenderer: 'table',
			name: 'table',
			schema: {
				fields: [
					{
						actionId: 'edit',
						contentRenderer: 'actionLink',
						fieldName: 'label',
						label: Liferay.Language.get('name'),
						sortable: true,
					},
					{
						contentRenderer: 'restApplicationRenderer',
						fieldName: 'restApplication',
						label: Liferay.Language.get('rest-application'),
						sortable: true,
					},
					{
						fieldName: 'restSchema',
						label: Liferay.Language.get('rest-schema'),
						sortable: true,
					},
					{
						fieldName: 'restEndpoint',
						label: Liferay.Language.get('rest-endpoint'),
						sortable: true,
					},
					{
						fieldName: 'status',
						label: Liferay.Language.get('status'),
						sortable: true,
					},
					{
						contentRenderer: 'dateTime',
						fieldName: 'dateModified',
						label: Liferay.Language.get('modified-date'),
						sortable: true,
					},
					{
						contentRenderer: 'toggleRenderer',
						fieldName: 'active',
						label: Liferay.Language.get('status'),
						name: 'active',
					},
				],
			},
		},
	];

	return (
		
			 {
							navigate(getEditURL(itemData));
						},
					},
					{
						data: {
							permissionKey: 'delete',
						},
						icon: 'trash',
						label: Liferay.Language.get('delete'),
						onClick: onDeleteClick,
					},
				]}
				sorts={[{direction: 'desc', key: 'dateCreated'}]}
				views={views}
			/>
		
	);
};

export default SystemDataSets;