• Home
• com.liferay
• com.liferay.frontend.data.set.admin.web
• 1.0.20
• source code
• Actions.tsx

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

META-INF.resources.js.data_set.actions.Actions.tsx Maven / Gradle / Ivy

/**
 * 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 ClayBreadcrumb from '@clayui/breadcrumb';
import ClayLayout from '@clayui/layout';
import ClayLoadingIndicator from '@clayui/loading-indicator';
import ClayTabs from '@clayui/tabs';
import {openModal} from 'frontend-js-components-web';
import {fetch} from 'frontend-js-web';
import React, {useEffect, useState} from 'react';

import {
	API_URL,
	DEFAULT_FETCH_HEADERS,
	OBJECT_RELATIONSHIP,
} from '../../utils/constants';
import openDefaultFailureToast from '../../utils/openDefaultFailureToast';
import openDefaultSuccessToast from '../../utils/openDefaultSuccessToast';
import {IDataSetSectionProps} from '../DataSet';
import ActionForm from './components/ActionForm';
import ActionList from './components/ActionList';

import '../../../css/Actions.scss';
import sortItems from '../../utils/sortItems';
import {IOrderable} from '../../utils/types';

export enum EActionTarget {
	ASYNC = 'async',
	HEADLESS = 'headless',
	LINK = 'link',
	MODAL = 'modal',
	SIDEPANEL = 'sidePanel',
}

export enum EActionType {
	CREATION = 'creation',
	ITEM = 'item',
}

const SECTIONS = {
	CREATION_ACTIONS: 'creation-actions',
	EDIT_CREATION_ACTION: 'edit-creation-action',
	EDIT_ITEM_ACTION: 'edit-item-action',
	ITEM_ACTIONS: 'item-actions',
	NEW_CREATION_ACTION: 'new-creation-action',
	NEW_ITEM_ACTION: 'new-item-action',
};

interface IAction extends IOrderable {
	[OBJECT_RELATIONSHIP.DATA_SET_ACTIONS]?: any;
	actions: {
		delete: {
			href: string;
			method: string;
		};
	};
	active: boolean;
	confirmationMessage?: string;
	confirmationMessageType?: string;
	confirmationMessage_i18n?: {
		[key: string]: string;
	};
	errorMessage?: string;
	errorMessage_i18n?: {
		[key: string]: string;
	};
	externalReferenceCode: string;
	icon: string;
	label: string;
	label_i18n: {
		[key: string]: string;
	};
	method?: string;
	modalSize?: string;
	permissionKey: string;
	requestBody?: string;
	successMessage?: string;
	successMessage_i18n?: {
		[key: string]: string;
	};
	target: EActionTarget;
	title?: string;
	title_i18n?: {
		[key: string]: string;
	};
	type: EActionType;
	url: string;
}

const Actions = ({dataSet, namespace, spritemap}: IDataSetSectionProps) => {
	const [actions, setActions] = useState>([]);
	const [activeSection, setActiveSection] = useState(SECTIONS.ITEM_ACTIONS);
	const [activeTab, setActiveTab] = useState(0);
	const [loading, setLoading] = useState(true);
	const [initialActionFormValues, setInitialActionFormValues] =
		useState();
	const [toggleActiveDisabled, setToogleActiveDisabled] =
		useState(false);

	const getBreadcrumbItems = () => {
		const breadcrumbItems: React.ComponentProps<
			typeof ClayBreadcrumb
		>['items'] = [
			{
				active:
					activeSection === SECTIONS.ITEM_ACTIONS ||
					activeSection === SECTIONS.CREATION_ACTIONS,
				label: Liferay.Language.get('actions'),
				onClick: () => {
					const activeSection =
						activeTab === 0
							? SECTIONS.ITEM_ACTIONS
							: SECTIONS.CREATION_ACTIONS;
					setActiveSection(activeSection);
				},
			},
		];

		if (activeSection === SECTIONS.NEW_ITEM_ACTION) {
			breadcrumbItems.push({
				active: true,
				label: Liferay.Language.get('new-item-action'),
				onClick: () => setActiveSection(SECTIONS.NEW_ITEM_ACTION),
			});
		}

		if (
			activeSection === SECTIONS.EDIT_ITEM_ACTION ||
			activeSection === SECTIONS.EDIT_CREATION_ACTION
		) {
			breadcrumbItems.push({
				active: true,
				label: initialActionFormValues?.label || '',
			});
		}

		if (activeSection === SECTIONS.NEW_CREATION_ACTION) {
			breadcrumbItems.push({
				active: true,
				label: Liferay.Language.get('new-creation-action'),
				onClick: () => setActiveSection(SECTIONS.NEW_CREATION_ACTION),
			});
		}

		return breadcrumbItems;
	};

	const loadActions = async ({activeTab}: {activeTab: number}) => {
		setLoading(true);

		const type = activeTab === 0 ? EActionType.ITEM : EActionType.CREATION;

		const url = `${API_URL.ACTIONS}?filter=(${OBJECT_RELATIONSHIP.DATA_SET_ACTIONS_ID} eq '${dataSet.id}') and (type eq '${type}')&nestedFields=${OBJECT_RELATIONSHIP.DATA_SET_ACTIONS}&sort=dateCreated:asc`;

		if (activeTab === 0) {
			setActiveSection(SECTIONS.ITEM_ACTIONS);
		}
		else if (activeTab === 1) {
			setActiveSection(SECTIONS.CREATION_ACTIONS);
		}

		const response = await fetch(url, {
			headers: DEFAULT_FETCH_HEADERS,
		});

		if (!response.ok) {
			setLoading(false);

			openDefaultFailureToast();

			return;
		}

		const responseJSON = await response.json();

		const storedActions: IAction[] = responseJSON.items;

		const actionTypeOrder =
			activeTab === 0 ? 'itemActionsOrder' : 'creationActionsOrder';

		const actionsOrder =
			storedActions?.[0]?.[OBJECT_RELATIONSHIP.DATA_SET_ACTIONS]?.[
				actionTypeOrder
			];

		setActions(sortItems(storedActions, actionsOrder) as IAction[]);

		setLoading(false);
	};

	const createAction = () => {
		const activeSection =
			activeTab === 0
				? SECTIONS.NEW_ITEM_ACTION
				: SECTIONS.NEW_CREATION_ACTION;

		setActiveSection(activeSection);
	};

	const deleteAction = ({item}: {item: IAction}) => {
		openModal({
			bodyHTML: Liferay.Language.get(
				'are-you-sure-you-want-to-delete-this-action?-fragments-using-it-will-be-affected'
			),
			buttons: [
				{
					autoFocus: true,
					displayType: 'secondary',
					label: Liferay.Language.get('cancel'),
					type: 'cancel',
				},
				{
					displayType: 'danger',
					label: Liferay.Language.get('delete'),
					onClick: ({processClose}: {processClose: Function}) => {
						processClose();

						const url = `${API_URL.ACTIONS}/${item.id}`;

						fetch(url, {
							headers: DEFAULT_FETCH_HEADERS,
							method: 'DELETE',
						})
							.then(() => {
								openDefaultSuccessToast();

								loadActions({activeTab});
							})
							.catch(() => openDefaultFailureToast());
					},
				},
			],
			status: 'danger',
			title: Liferay.Language.get('delete-action'),
		});
	};

	const editAction = ({item}: {item: IAction}) => {
		setInitialActionFormValues(item);

		const actionType =
			activeTab === 0
				? SECTIONS.EDIT_ITEM_ACTION
				: SECTIONS.EDIT_CREATION_ACTION;

		setActiveSection(actionType);
	};

	const updateActionsOrder = async ({order}: {order: string}) => {
		const actionTypeOrder =
			activeTab === 0 ? 'itemActionsOrder' : 'creationActionsOrder';

		const apiURL = API_URL.DATA_SETS;

		const response = await fetch(
			`${apiURL}/by-external-reference-code/${dataSet.externalReferenceCode}`,
			{
				body: JSON.stringify({
					[actionTypeOrder]: order,
				}),
				headers: DEFAULT_FETCH_HEADERS,
				method: 'PATCH',
			}
		);

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

			return;
		}

		const responseJSON = await response.json();

		const storedActionsOrder = responseJSON?.[actionTypeOrder];

		if (actions && storedActionsOrder && storedActionsOrder === order) {
			setActions(sortItems(actions, storedActionsOrder) as IAction[]);

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

	const updateActive = async (item: IAction) => {
		setToogleActiveDisabled(true);

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

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

			return;
		}

		const dataSetAction: IAction = await response.json();

		if (dataSetAction?.id) {
			const updatedActions = actions.map((action) => {
				if (action.id === dataSetAction.id) {
					action = {...action, ...dataSetAction};
				}

				return action;
			});

			setActions(updatedActions);

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

		setToogleActiveDisabled(false);
	};

	useEffect(() => {
		loadActions({activeTab: 0});

		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	if (loading) {
		return ;
	}

	return (
		
			

			
				{(activeSection === SECTIONS.ITEM_ACTIONS ||
					activeSection === SECTIONS.CREATION_ACTIONS) && (
					<>
						

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

						 {
								setActiveTab(tab);

								loadActions({activeTab: tab});
							}}
						>
							
								{Liferay.Language.get('item-actions')}
							

							
								{Liferay.Language.get('creation-actions')}
							
						

						
							{activeSection === SECTIONS.ITEM_ACTIONS && (
								
									
								
							)}

							{activeSection === SECTIONS.CREATION_ACTIONS && (
								
									
								
							)}
						
					
				)}

				{(activeSection === SECTIONS.NEW_CREATION_ACTION ||
					activeSection === SECTIONS.NEW_ITEM_ACTION) && (
					 {
							setActiveSection(
								activeTab === 0
									? SECTIONS.ITEM_ACTIONS
									: SECTIONS.CREATION_ACTIONS
							);
						}}
						onSave={() => {
							setActiveSection(
								activeTab === 0
									? SECTIONS.ITEM_ACTIONS
									: SECTIONS.CREATION_ACTIONS
							);

							loadActions({activeTab});
						}}
						spritemap={spritemap}
					/>
				)}

				{(activeSection === SECTIONS.EDIT_CREATION_ACTION ||
					activeSection === SECTIONS.EDIT_ITEM_ACTION) && (
					 {
							setActiveSection(
								activeTab === 0
									? SECTIONS.ITEM_ACTIONS
									: SECTIONS.CREATION_ACTIONS
							);
						}}
						onSave={() => {
							setActiveSection(
								activeTab === 0
									? SECTIONS.ITEM_ACTIONS
									: SECTIONS.CREATION_ACTIONS
							);

							loadActions({activeTab});
						}}
						spritemap={spritemap}
					/>
				)}
			
		
	);
};

export {IAction, SECTIONS};
export default Actions;