LPS-108168 SF

modules/apps/dynamic-data-mapping/dynamic-data-mapping-form-builder/src/main/resources/META-INF/resources/css/form-builder/_form-pagination.scss

@@ -50,6 +50,33 @@ $c: '.ddm-form-pagination';
 	padding: 0;
 	position: relative;
 
+	&.bottom .ddm-paginated-builder-dropdown {
+		bottom: 25px;
+	}
+
+	&.top .ddm-paginated-builder-dropdown {
+		top: 45px;
+	}
+}
+
+.horizontal-line {
+	background-color: #cdced9;
+	height: 1px;
+	margin-bottom: 40px;
+	margin-top: 40px;
+	padding: 0 10px;
+}
+
+.page {
+	padding: 0;
+	position: relative;
+
+	h5.pagination {
+		color: #a7a9bc;
+		font-size: 10px;
+		text-transform: uppercase;
+	}
+
 	.ddm-paginated-builder-dropdown {
 		position: absolute;
 		right: 3rem;
@@ -60,6 +87,31 @@ $c: '.ddm-form-pagination';
 	}
 
 	&.top .ddm-paginated-builder-dropdown {
-		top: 45px;
+		right: 20px;
+		top: 20px;
+	}
+
+	.add-page-button-container {
+		align-items: center;
+		display: flex;
+		margin: 20px 0;
+
+		.add-page-button {
+			margin: 0 10px;
+			white-space: nowrap;
+		}
+
+		.horizontal-line {
+			background-color: #cdced9;
+			height: 1px;
+			margin: 4px 0;
+			padding: 0;
+			width: 100%;
+		}
+	}
+
+	.sheet {
+		margin: 0;
+		padding: 0;
 	}
 }

modules/apps/dynamic-data-mapping/dynamic-data-mapping-form-builder/src/main/resources/META-INF/resources/js/components/FormBuilder/FormBuilder.es.js

@@ -12,8 +12,6 @@
  * details.
  */
 
-import '../SuccessPage/SuccessPage.es';
-
 import {PagesVisitor, compose} from 'dynamic-data-mapping-form-renderer';
 import FormRenderer from 'dynamic-data-mapping-form-renderer/js/components/FormRenderer/FormRenderer.es';
 import Component from 'metal-jsx';
@@ -83,23 +81,25 @@ class FormBuilderBase extends Component {
 			paginationMode,
 			portletNamespace,
 			spritemap,
+			successPageSettings,
+			view,
 		} = props;
 
 		return (
 			<div class="ddm-form-builder-wrapper">
 				<div class="container ddm-form-builder">
-					<div class="sheet">
-						<FormRenderer
-							activePage={activePage}
-							editable={true}
-							editingLanguageId={editingLanguageId}
-							pages={this.preparePagesForRender(pages)}
-							paginationMode={paginationMode}
-							portletNamespace={portletNamespace}
-							ref="FormRenderer"
-							spritemap={spritemap}
-						/>
-					</div>
+					<FormRenderer
+						activePage={activePage}
+						editable={true}
+						editingLanguageId={editingLanguageId}
+						pages={this.preparePagesForRender(pages)}
+						paginationMode={paginationMode}
+						portletNamespace={portletNamespace}
+						ref="FormRenderer"
+						spritemap={spritemap}
+						successPageSettings={successPageSettings}
+						view={view}
+					/>
 				</div>
 			</div>
 		);
@@ -189,6 +189,15 @@ FormBuilderBase.PROPS = {
 	 */
 
 	view: Config.string(),
+
+	/**
+	 * @default undefined
+	 * @instance
+	 * @memberof FormBuilder
+	 * @type {?bool}
+	 */
+
+	viewMode: Config.bool(),
 };
 
 export default compose(

modules/apps/dynamic-data-mapping/dynamic-data-mapping-form-builder/src/main/resources/META-INF/resources/js/components/FormBuilder/withEditablePageHeader.es.js

@@ -15,6 +15,7 @@
 import './EditablePageHeader.soy';
 
 import {PagesVisitor} from 'dynamic-data-mapping-form-renderer';
+import dom from 'metal-dom';
 import {EventHandler} from 'metal-events';
 import Component from 'metal-jsx';
 
@@ -48,16 +49,22 @@ const withEditablePageHeader = (ChildComponent) => {
 			const {pages} = this.props;
 			const total = pages.length;
 			const visitor = new PagesVisitor(pages);
+			let lastPageIndex = total;
+
+			if (pages[pages.length - 1].contentRenderer == 'success') {
+				lastPageIndex = total - 1;
+			}
 
 			return visitor.mapPages((page, pageIndex) => {
 				return {
 					...page,
 					headerRenderer: 'editable',
 					pageIndex,
-					placeholder: sub(
-						Liferay.Language.get('untitled-page-x-of-x'),
-						[pageIndex + 1, total]
-					),
+					pagination: sub(Liferay.Language.get('page-x-of-x'), [
+						pageIndex + 1,
+						lastPageIndex,
+					]),
+					placeholder: Liferay.Language.get('page-title'),
 					total,
 				};
 			});
@@ -71,17 +78,30 @@ const withEditablePageHeader = (ChildComponent) => {
 			);
 		}
 
+		_getPageNumber(node) {
+			let pageNumber;
+
+			const element = dom.closest(node, '[data-ddm-page]');
+
+			if (element) {
+				pageNumber = parseInt(element.dataset.ddmPage, 10);
+			}
+
+			return pageNumber;
+		}
+
 		_handlePageDescriptionChanged(event) {
-			const {activePage, editingLanguageId, pages} = this.props;
-			const {delegateTarget} = event;
+			const {editingLanguageId, pages} = this.props;
+			const {delegateTarget, target} = event;
 			const {dispatch} = this.context;
+			const currentPage = this._getPageNumber(target);
 			const value = delegateTarget.value;
 			const visitor = new PagesVisitor(pages);
 
 			dispatch(
 				'pagesUpdated',
 				visitor.mapPages((page, pageIndex) => {
-					if (pageIndex === activePage) {
+					if (pageIndex === currentPage) {
 						page = {
 							...page,
 							description: value,
@@ -98,16 +118,17 @@ const withEditablePageHeader = (ChildComponent) => {
 		}
 
 		_handlePageTitleChanged(event) {
-			const {activePage, editingLanguageId, pages} = this.props;
-			const {delegateTarget} = event;
+			const {editingLanguageId, pages} = this.props;
+			const {delegateTarget, target} = event;
 			const {dispatch} = this.context;
+			const currentPage = this._getPageNumber(target);
 			const value = delegateTarget.value;
 			const visitor = new PagesVisitor(pages);
 
 			dispatch(
 				'pagesUpdated',
 				visitor.mapPages((page, pageIndex) => {
-					if (pageIndex === activePage) {
+					if (pageIndex === currentPage) {
 						page = {
 							...page,
 							localizedTitle: {