Source: dynamic-data-mapping-form-renderer/src/main/resources/META-INF/resources/js/components/PageRenderer/PageRenderer.es.js

/**
 * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
 *
 * This library is free software; you can redistribute it and/or modify it under
 * the terms of the GNU Lesser General Public License as published by the Free
 * Software Foundation; either version 2.1 of the License, or (at your option)
 * any later version.
 *
 * This library is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
 * details.
 */

import * as FormSupport from '../FormRenderer/FormSupport.es';

import './MultiPagesRenderer.soy';

import './PaginatedPageRenderer.soy';

import './SimplePageRenderer.soy';

import './TabbedPageRenderer.soy';

import './WizardPageRenderer.soy';

import 'clay-button';

import 'clay-dropdown';

import templates from './PageRenderer.soy';

import 'clay-modal';
import core from 'metal';
import Component from 'metal-component';
import dom from 'metal-dom';
import Soy from 'metal-soy';
import {Config} from 'metal-state';

import '../SuccessPage/SuccessPagePaginationItem.soy';

import '../SuccessPage/SuccessPageRenderer.soy';

import '../SuccessPage/SuccessPageWizardItem.soy';
import {setValue} from '../../util/i18n.es';

class PageRenderer extends Component {
	getPage(page) {
		const {editingLanguageId} = this;

		if (core.isObject(page.description)) {
			page = {
				...page,
				description: page.description[editingLanguageId],
			};
		}
		if (core.isObject(page.title)) {
			page = {
				...page,
				title: page.title[editingLanguageId],
			};
		}

		return page;
	}

	isEmptyPage({rows}) {
		let empty = false;

		if (!rows || !rows.length) {
			empty = true;
		}
		else {
			empty = !rows.some(({columns}) => {
				let hasFields = true;

				if (!columns) {
					hasFields = false;
				}
				else {
					hasFields = columns.some((column) => column.fields.length);
				}

				return hasFields;
			});
		}

		return empty;
	}

	prepareStateForRender(states) {
		if (states.view === 'fieldSets') {
			this._updateSuccessPage({
				body: '',
				enabled: false,
				title: '',
			});
		}

		return {
			...states,
			empty: this.isEmptyPage(states.page),
			page: this.getPage(states.page),
			pageSettingsItems: this._pageSettingsItems(states.pages),
			pageSuccessSettingsItems: this._pageSuccessSettingsItems(
				states.pages
			),
		};
	}

	_addPage(pageIndex) {
		const {dispatch} = this.context;

		dispatch('pageAdded', {
			pageIndex,
		});
	}

	_addSuccessPage() {
		const {dispatch} = this.context;
		const {pages} = this;

		this._updateSuccessPage({
			body: Liferay.Language.get(
				'your-information-was-successfully-received-thank-you-for-filling-out-the-form'
			),
			enabled: true,
			title: Liferay.Language.get('thank-you'),
		});

		dispatch('activePageUpdated', pages.length);
	}

	_deletePage() {
		const {dispatch} = this.context;

		dispatch('pageDeleted', this.pageIndex);
	}

	_deleteSuccessPage() {
		const {dispatch} = this.context;
		const {pages} = this;

		this._updateSuccessPage({
			enabled: false,
		});

		dispatch('activePageUpdated', pages.length - 1);
	}

	_resetPage(pageIndex) {
		const {dispatch} = this.context;

		dispatch('pageReset', {
			pageIndex,
		});
	}

	_handleAddPageClicked() {
		const {pageIndex} = this;

		this._addPage(pageIndex);
	}

	_handleAddSuccessPageClicked() {
		const {pageIndex} = this;

		this._addSuccessPage(pageIndex);
	}

	_handleDropdownItemClicked({data}) {
		const {pageIndex, successPageSettings} = this;
		const {settingsItem} = data.item;

		this.setState({
			dropdownExpanded: false,
		});

		if (settingsItem === 'reset-page') {
			this._resetPage(pageIndex);
		}
		else if (settingsItem === 'remove-page') {
			if (
				successPageSettings.enabled &&
				pageIndex == this.pages.length - 1
			) {
				this._deleteSuccessPage();
			}
			else {
				this._deletePage();
			}
		}
	}

	_handleFieldBlurred(event) {
		this.emit('fieldBlurred', event);
	}

	_handleFieldClicked(event) {
		const {delegateTarget} = event;
		const {fieldName} = delegateTarget.dataset;

		event.stopPropagation();

		this.emit('fieldClicked', {
			...FormSupport.getIndexes(dom.closest(delegateTarget, '.col-ddm')),
			fieldName,
			originalEvent: event,
		});
	}

	_handleFieldEdited(event) {
		this.emit('fieldEdited', event);
	}

	_handleFieldFocused(event) {
		this.emit('fieldFocused', event);
	}

	_pageSettingsItems(pages) {
		const {successPageSettings} = this;
		const pageSettingsItems = [
			{
				label: Liferay.Language.get('reset-page'),
				settingsItem: 'reset-page',
			},
		];

		if (
			(successPageSettings.enabled && pages.length > 2) ||
			(pages.length > 1 && !successPageSettings.enabled)
		) {
			pageSettingsItems.push({
				label: Liferay.Language.get('remove-page'),
				settingsItem: 'remove-page',
			});
		}

		return pageSettingsItems;
	}

	_pageSuccessSettingsItems() {
		const pageSuccessSettingsItems = [
			{
				label: Liferay.Language.get('remove-success-page'),
				settingsItem: 'remove-page',
			},
		];

		return pageSuccessSettingsItems;
	}

	_updateSuccessPage({body = '', enabled, title = ''}) {
		const {dispatch} = this.context;
		const {editingLanguageId} = this;
		const successPageSettings = {
			body: {},
			enabled,
			title: {},
		};

		setValue(successPageSettings, editingLanguageId, 'body', body);
		setValue(successPageSettings, editingLanguageId, 'title', title);

		dispatch('successPageChanged', successPageSettings);
	}
}

PageRenderer.STATE = {

	/**
	 * @instance
	 * @memberof FormPage
	 * @type {?number}
	 */

	activePage: Config.number().value(0),

	/**
	 * @instance
	 * @memberof FormPage
	 * @type {?number}
	 */

	dropdownExpanded: Config.bool().value(false),

	/**
	 * @instance
	 * @memberof FormPage
	 * @type {?boolean}
	 */
	editable: Config.bool().value(false),

	/**
	 * @default []
	 * @instance
	 * @memberof FormRenderer
	 * @type {?array<object>}
	 */

	page: Config.object(),

	/**
	 * @default 1
	 * @instance
	 * @memberof FormPage
	 * @type {?number}
	 */

	pageIndex: Config.number().value(0),

	/**
	 * @default 1
	 * @instance
	 * @memberof FormPage
	 * @type {?number}
	 */

	pageSettingsItems: Config.array(),

	/**
	 * @default 1
	 * @instance
	 * @memberof FormPage
	 * @type {?number}
	 */

	pageSuccessSettingsItems: Config.array(),

	/**
	 * @default undefined
	 * @instance
	 * @memberof FormRenderer
	 * @type {!string}
	 */

	spritemap: Config.string().required(),

	strings: Config.object().value({
		'success-page': Liferay.Language.get('success-page'),
	}),

	successPageSettings: Config.shapeOf({
		body: Config.object(),
		enabled: Config.bool(),
		title: Config.object(),
	}).value({}),
};

Soy.register(PageRenderer, templates);

export default PageRenderer;