• Home
• com.liferay
• com.liferay.frontend.data.set.admin.web
• 1.0.4
• source code
• Settings.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.settings.Settings.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 ClayButton from '@clayui/button';
import {Option, Picker, Text} from '@clayui/core';
import DropDown from '@clayui/drop-down';
import ClayIcon from '@clayui/icon';
import ClayLayout from '@clayui/layout';
import ClayLink from '@clayui/link';
import {ClayTooltipProvider} from '@clayui/tooltip';
import {fetch, navigate} from 'frontend-js-web';
import React, {useEffect, useState} from 'react';

import {
	API_URL,
	DEFAULT_FETCH_HEADERS,
	DEFAULT_VISUALIZATION_MODES,
	OBJECT_RELATIONSHIP,
} from '../../utils/constants';
import openDefaultFailureToast from '../../utils/openDefaultFailureToast';
import openDefaultSuccessToast from '../../utils/openDefaultSuccessToast';
import {TVisualizationMode} from '../../utils/types';
import {IDataSetSectionProps} from '../DataSet';

const NOT_CONFIGURED_VISUALIZATION_MODE = {
	label: Liferay.Language.get('go-to-visualization-modes'),
	thumbnail: 'plus',
	type: Liferay.Language.get('not-configured'),
};

const Settings = ({
	backURL,
	dataSet,
	onActiveSectionChange,
	onDataSetUpdate,
	spritemap,
}: IDataSetSectionProps) => {
	const [defaultVisualizationMode, setDefaultVisualizationMode] = useState(
		NOT_CONFIGURED_VISUALIZATION_MODE.type
	);
	const [loading, setLoading] = useState(true);
	const [visualizationModes, setVisualizationModes] = useState<
		Array
	>([]);

	const getActiveVisualizationModes = async () => {
		const fields = [
			OBJECT_RELATIONSHIP.DATA_SET_CARDS_SECTION,
			OBJECT_RELATIONSHIP.DATA_SET_LIST_SECTION,
			OBJECT_RELATIONSHIP.DATA_SET_TABLE_SECTION,
		].join(',');

		const response = await fetch(
			`${API_URL.DATA_SETS}/by-external-reference-code/${dataSet.externalReferenceCode}?fields=${fields}&nestedFields=${fields}`,
			{
				headers: DEFAULT_FETCH_HEADERS,
			}
		);

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

			setVisualizationModes([]);

			setLoading(false);

			return;
		}

		const responseJSON = await response.json();

		const {
			fdsViewFDSCardsSectionRelationship: cards,
			fdsViewFDSFieldRelationship: table,
			fdsViewFDSListSectionRelationship: list,
		} = responseJSON;

		const activeViews: Array = [];

		(DEFAULT_VISUALIZATION_MODES as Array).forEach(
			(view) => {
				if (view.mode === 'cards' && cards && cards.length) {
					activeViews.push(view);
				}
				if (view.mode === 'list' && list && list.length) {
					activeViews.push(view);
				}
				if (view.mode === 'table' && table && table.length) {
					activeViews.push(view);
				}
			}
		);

		setVisualizationModes(activeViews);

		setDefaultVisualizationMode(() => {
			if (
				activeViews.find(
					(view: TVisualizationMode) =>
						view.mode === dataSet.defaultVisualizationMode
				)
			) {
				return dataSet.defaultVisualizationMode;
			}
			else {
				return activeViews.length
					? activeViews[0].mode
					: NOT_CONFIGURED_VISUALIZATION_MODE.type;
			}
		});

		setLoading(false);
	};

	const updateFDSViewSettings = async () => {
		const body = {
			defaultVisualizationMode,
		};

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

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

			return;
		}

		const responseJSON = await response.json();

		if (responseJSON?.id) {
			openDefaultSuccessToast();

			onDataSetUpdate(responseJSON);
		}
		else {
			openDefaultFailureToast();
		}
	};

	useEffect(() => {
		getActiveVisualizationModes();

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

	return (
		
			
				

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

			
				

					{Liferay.Language.get('fragment-defaults')}
				

				
					
						

							
								{Liferay.Language.get(
									'default-visualization-mode'
								)}
							

							
								
									
								
							
						

						

							{Liferay.Language.get(
								'default-visualization-mode-help'
							)}
						
					

					
						{!loading && (
							 {
									if (
										option !==
										NOT_CONFIGURED_VISUALIZATION_MODE.type
									) {
										setDefaultVisualizationMode(
											option as string
										);
									}
								}}
								placeholder={
									NOT_CONFIGURED_VISUALIZATION_MODE.type
								}
								selectedKey={defaultVisualizationMode}
							>
								{visualizationModes.length ? (
									({label, mode, thumbnail}) => (
										
											

											{label}
										
									)
								) : (
									
										
											
												
													
														{
															NOT_CONFIGURED_VISUALIZATION_MODE.label
														}
													
												
											
										
									
								)}
							
						)}

						{!loading && !visualizationModes.length && (
							 onActiveSectionChange(1)}
								onKeyPress={() => onActiveSectionChange(1)}
								tabIndex={0}
								weight="semi-bold"
							>
								
									
								

								{Liferay.Language.get(
									'go-to-visualization-modes'
								)}
							
						)}
					
				
			

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

					 navigate(backURL)}
					>
						{Liferay.Language.get('cancel')}
					
				
			
		
	);
};

export default Settings;