pkp/pkp-lib#3594 Add initial support for paged forms

package.json

@@ -18,6 +18,7 @@
     "v-tooltip": "^2.0.0-rc.32",
     "vue": "^2.5.13",
     "vue-router": "^3.0.1",
+    "vue-scrollto": "^2.11.0",
     "vue-slider-component": "^2.5.3",
     "vuedraggable": "^2.16.0"
   },

src/components/Form/Form.vue

@@ -4,31 +4,40 @@
 		class="pkpForm -pkpClearfix"
 		:action="action"
 	>
-		<form-page v-for="page in pages"
-			:key="page.id"
-			v-bind="page"
-			:groups="groups"
-			:fields="fields"
-			:formId="id"
-			:activeLocales="activeLocales"
-			:availableLocales="availableLocales"
-			:i18n="i18n"
-			@setLocales="setActiveLocales"
-			@change="fieldChanged"
-			@pageSubmitted="submitPage"
+		<form-page-list v-if="pages.length"
+			:pages="pages"
+			:currentPage="currentPage"
+			@setPage="setCurrentPage"
 		/>
+		<div class="pkpFormPages">
+			<form-page v-for="page in pages"
+				:key="page.id"
+				v-bind="page"
+				:groups="groups"
+				:fields="fields"
+				:formId="id"
+				:isCurrentPage="currentPage === page.id"
+				:activeLocales="activeLocales"
+				:availableLocales="availableLocales"
+				:i18n="i18n"
+				@setLocales="setActiveLocales"
+				@change="fieldChanged"
+				@pageSubmitted="submitPage"
+				@previousPage="setCurrentPage(false)"
+			/>
+		</div>
 	</form>
 </template>
 
 <script>
 import FormPage from './FormPage.vue';
-import PkpButton from '@/components/Button/Button.vue';
+import FormPageList from './FormPageList.vue';
 
 export default {
 	name: 'Form',
 	components: {
 		FormPage,
-		PkpButton,
+		FormPageList,
 	},
 	data: function () {
 		return {
@@ -40,6 +49,7 @@ export default {
 			groups: [],
 			pages: [],
 			activeLocales: [],
+			currentPage: '',
 			i18n: {},
 		};
 	},
@@ -67,7 +77,24 @@ export default {
 		 * Submit a page in the form
 		 */
 		submitPage: function (pageId) {
-			console.log('submitted ' + pageId);
+			const pageIndex = this.pages.findIndex((page) => page.id === pageId);
+			if (this.pages.length === 1 || pageIndex === (this.pages.length - 1)) {
+				this.submitForm();
+				return;
+			}
+			const page = this.pages.find((page) => page.id === pageId);
+			if (page.submitOnNext) {
+				console.log('Submit page');
+			} else {
+				this.setCurrentPage(true);
+			}
+		},
+
+		/**
+		 * Submit the form
+		 */
+		submitForm: function () {
+			console.log('Submit form');
 		},
 
 		/**
@@ -91,13 +118,69 @@ export default {
 		fieldChanged: function (data) {
 			console.log('field changed', data);
 		},
+
+		/**
+		 * Set the current page
+		 *
+		 * @param boolean|number pageId The id of the page you want to display.
+		 *  You can also pass `true` to move to the next page and `false` to move to
+		 *  the previous page.
+		 */
+		setCurrentPage: function (pageId) {
+			const currentPageIndex = this.pages.findIndex((page) => page.id === this.currentPage);
+			if (pageId === true) {
+				if (this.pages.length <= currentPageIndex) {
+					return;
+				}
+				pageId = this.pages[currentPageIndex + 1].id;
+			} else if (pageId === false) {
+				if (!currentPageIndex) {
+					return;
+				}
+				pageId = this.pages[currentPageIndex - 1].id;
+			}
+			this.currentPage = pageId;
+			this.$scrollTo(this.$el, 500, {
+				offset: -50,
+			});
+		},
 	},
 	mounted: function () {
 
 		// Set the current locale
 		if (!this.activeLocales.length) {
 			this.activeLocales = [this.availableLocales[0].key];
 		}
+
+		// Set the current page
+		if (!this.currentPage) {
+			this.currentPage = this.pages[0].id;
+		}
 	},
 };
 </script>
+
+<style lang="less">
+@import '../../styles/_import';
+
+.pkpFormPageList {
+	float: left;
+	padding-right: @base;
+	width: 20%;
+	border-right: @bg-border-light;
+
+	+ .pkpFormPages {
+		margin-left: 20%;
+	}
+}
+
+.pkpFormPage {
+	position: absolute;
+	left: -9999px;
+}
+
+.pkpFormPage--current {
+	position: relative;
+	left: auto;
+}
+</style>

src/components/Form/FormPage.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="pkpFormPage">
+	<div class="pkpFormPage" :class="{'pkpFormPage--current': isCurrentPage}">
 		<div v-if="availableLocales.length" class="pkpFormPage__locales">
 			<pkp-button v-for="locale in availableLocales"
 				:key="locale.key"
@@ -18,8 +18,12 @@
 			:i18n="i18n"
 			@change="fieldChanged"
 		/>
-		<div v-if="submitButton" class="pkpFormPage__buttons">
-			<pkp-button
+		<div class="pkpFormPage__buttons">
+			<pkp-button v-if="previousButton"
+				v-bind="previousButton"
+				@click="previousPage"
+			/>
+			<pkp-button v-if="submitButton"
 				v-bind="submitButton"
 				@click="submit"
 			/>
@@ -46,9 +50,11 @@ export default {
 		groups: Array,
 		fields: Array,
 		formId: String,
+		isCurrentPage: Boolean,
 		activeLocales: Array,
 		availableLocales: Array,
 		submitButton: Object,
+		previousButton: Object,
 		i18n: Object,
 	},
 	computed: {
@@ -97,9 +103,15 @@ export default {
 		 * Submit the form page
 		 */
 		submit: function () {
-			console.log('is this happening');
 			this.$emit('pageSubmitted', this.id);
 		},
+
+		/**
+		 * Request the previous page
+		 */
+		previousPage: function () {
+			this.$emit('previousPage', this.id);
+		},
 	},
 };
 </script>

src/components/Form/FormPageList.vue

@@ -0,0 +1,69 @@
+<template>
+	<div class="pkpFormPageList">
+		<ol class="pkpFormPageList__list">
+			<li v-for="page in pages" class="pkpFormPageList__listItem">
+				<a
+					href="#"
+					class="pkpFormPageList__page"
+					:class="{'pkpFormPageList__page--current': page.id === currentPage}"
+					@click.prevent="setPage(page.id)"
+				>
+					{{ page.label }}
+				</a>
+			</li>
+		</ol>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'FormPageList',
+	props: {
+		currentPage: {
+			type: String,
+			required: true,
+		},
+		pages: {
+			type: Array,
+			required: true,
+		},
+	},
+	methods: {
+		/**
+		 * Emit an event to change the page
+		 *
+		 * @param number pageId
+		 */
+		setPage: function (pageId) {
+			this.$emit('setPage', pageId);
+		},
+	},
+};
+</script>
+
+<style lang="less">
+@import '../../styles/_import';
+
+.pkpFormPageList__list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.pkpFormPageList__listItem {
+	font-size: @font-sml;
+	line-height: 1.5em;
+
+	+ .pkpFormPageList__listItem {
+		margin-top: 1em;
+	}
+}
+
+.pkpFormPageList__page {
+	text-decoration: none;
+}
+
+.pkpFormPageList__page--current {
+	font-weight: @bold;
+}
+</style>

src/docs/examples/Form/data.js

@@ -15,5 +15,6 @@ export default {
 		groups: 'Array of form groups. Use these to group related fields.',
 		pages: 'Array of form pages.',
 		activeLocales: 'The locale(s) the form is currently being presented in.',
+		currentPage: 'Contains the page ID of the currently active page. If empty, it will be set to the first page when mounted.',
 	},
 };

src/docs/examples/Form/implementations/helpers/form-default.js

@@ -15,6 +15,7 @@ export default {
 			isPrimary: true,
 		},
 	}],
+	currentPage: '',
 	activeLocales: ['en_US'],
 	i18n: FormI18n,
 };