pkp/pkp-lib#6675 Added extra features to the Autosuggest field (showP…

public/globals.js

@@ -89,6 +89,8 @@ window.pkp = {
 		'common.pagination.label': 'View additional pages',
 		'common.pagination.next': 'Next page',
 		'common.pagination.previous': 'Previous page',
+		'common.pagination.loadMore': 'Load more',
+		'common.pagination.loadMore.description': '{$quantity} results not shown',
 		'common.remove': 'Remove',
 		'common.required': 'Required',
 		'common.save': 'Save',

src/App.vue

@@ -89,6 +89,11 @@
 								FieldBaseAutosuggest
 							</router-link>
 						</li>
+						<li>
+							<router-link to="/component/Form/fields/FieldMappedAutosuggest">
+								FieldMappedAutosuggest
+							</router-link>
+						</li>
 						<li>
 							<router-link to="/component/Form/fields/FieldHtml">
 								FieldHtml

src/components/Filter/FilterAutosuggest.vue

@@ -7,12 +7,14 @@
 <script>
 import Filter from './Filter.vue';
 import FieldAutosuggestPreset from '@/components/Form/fields/FieldAutosuggestPreset.vue';
+import FieldMappedAutosuggest from '@/components/Form/fields/FieldMappedAutosuggest.vue';
 import FieldSelectUsers from '@/components/Form/fields/FieldSelectUsers.vue';
 import FieldSelectIssues from '@/components/Form/fields/FieldSelectIssues.vue';
 export default {
 	extends: Filter,
 	components: {
 		FieldAutosuggestPreset,
+		FieldMappedAutosuggest,
 		FieldSelectUsers,
 		FieldSelectIssues
 	},

src/components/Form/fields/FieldBaseAutosuggest.vue

@@ -66,7 +66,31 @@
 				class="pkpFormField--autosuggest__autosuggest"
 				v-bind="autosuggestOptions"
 				@selected="selectSuggestion"
-			/>
+				:style="maxHeight === null || `--maxAutosuggestHeight: ${maxHeight}`"
+			>
+				<template slot="after-suggestions" v-if="currentPage < lastPage">
+					<div
+						class="pkpFormField--autosuggest__pagination"
+						@click.prevent.stop=""
+						@mouseup.prevent.stop=""
+						@mousedown.prevent.stop=""
+					>
+						<pkp-button
+							:isDisabled="isLoading"
+							@click="setPage(currentPage + 1)"
+							:aria-controls="controlId"
+						>
+							{{ __('common.pagination.loadMore') }}
+						</pkp-button>
+						{{
+							__('common.pagination.loadMore.description', {
+								quantity: this.unloadedItems
+							})
+						}}
+					</div>
+				</template>
+			</vue-autosuggest>
+			<spinner class="pkpFormField--autosuggest__spinner" v-if="isLoading" />
 			<div
 				v-if="currentPosition === 'below'"
 				class="pkpFormField--autosuggest__values pkpFormField--autosuggest__values--below"
@@ -109,35 +133,23 @@
 import FieldBase from './FieldBase.vue';
 import PkpBadge from '@/components/Badge/Badge.vue';
 import {VueAutosuggest} from 'vue-autosuggest';
-import ajaxError from '@/mixins/ajaxError';
 import debounce from 'debounce';
+import fetch from '@/mixins/fetch';
 import elementResizeEvent from 'element-resize-event';
 
 export default {
 	name: 'FieldBaseAutosuggest',
 	extends: FieldBase,
-	mixins: [ajaxError],
+	mixins: [fetch],
 	components: {
 		PkpBadge,
 		VueAutosuggest
 	},
 	props: {
-		apiUrl: {
-			type: String,
-			default() {
-				return '';
-			}
-		},
 		deselectLabel: {
 			type: String,
 			required: true
 		},
-		getParams: {
-			type: Object,
-			default() {
-				return {};
-			}
-		},
 		initialPosition: {
 			type: String,
 			default() {
@@ -156,6 +168,22 @@ export default {
 		selectedLabel: {
 			type: String,
 			required: true
+		},
+		minInputLength: {
+			type: Number,
+			default: 0
+		},
+		maxSelectedItems: {
+			type: Number,
+			default: null
+		},
+		replaceWhenFull: {
+			type: Boolean,
+			default: true
+		},
+		maxHeight: {
+			type: String,
+			default: '260px'
 		}
 	},
 	data() {
@@ -257,6 +285,15 @@ export default {
 				id: this.controlId,
 				name: this.name
 			};
+		},
+
+		/**
+		 * Retrieves the quantity of items which were not loaded yet
+		 *
+		 * @return int
+		 */
+		unloadedItems() {
+			return Math.max(0, this.itemsMax - this.suggestions.length);
 		}
 	},
 	methods: {
@@ -275,29 +312,30 @@ export default {
 		},
 
 		/**
-		 * Get suggestions from the API url
+		 * Update the list of items
+		 *
+		 * @param {Array} items
+		 * @param {Number} itemsMax
+		 */
+		setItems(items, itemsMax) {
+			this.setSuggestions(items, itemsMax);
+		},
+
+		/**
+		 * Overwrite the get method from the fetch mixin to avoid requesting a resource if there's no user input
 		 */
-		getSuggestions: debounce(function() {
+		get() {
 			if (!this.inputValue) {
 				this.suggestions = [];
 				return;
 			}
-			var self = this;
-			$.ajax({
-				url: this.apiUrl,
-				type: 'GET',
-				data: {
-					...this.getParams,
-					searchPhrase: this.inputValue
-				},
-				error(r) {
-					self.ajaxErrorCallback(r);
-				},
-				success(r) {
-					self.setSuggestions(r.items);
-				}
-			});
-		}, 250),
+			this.getSuggestions();
+		},
+
+		/**
+		 * Get suggestions from the API url by leveraging the get method of the fetch mixin
+		 */
+		getSuggestions: debounce(fetch.methods.get, 250),
 
 		/**
 		 * Add a suggested item to the list of selected items
@@ -316,7 +354,21 @@ export default {
 				}
 				item = this.suggestions[0];
 			}
-			this.currentSelected.push(item);
+			if (!this.currentSelected.find(({value}) => value === item.value)) {
+				const hasReachedLimit =
+					this.maxSelectedItems !== null &&
+					this.currentSelected.length >= this.maxSelectedItems;
+				const canReplace =
+					hasReachedLimit &&
+					this.currentSelected.length &&
+					this.replaceWhenFull;
+				if (!hasReachedLimit || canReplace) {
+					if (canReplace) {
+						this.currentSelected.pop();
+					}
+					this.currentSelected.push(item);
+				}
+			}
 			this.inputValue = '';
 			this.$nextTick(() => {
 				this.$nextTick(() => {
@@ -342,9 +394,10 @@ export default {
 		 * This must be implemented in a component that extends
 		 * this component
 		 *
-		 * @param {Array} newItems
+		 * @param {Array} items
+		 * @param {Number} itemsMax
 		 */
-		setSuggestions(newItems) {
+		setSuggestions(items, itemsMax) {
 			throw new Error(
 				'The setSuggestions method must be implemented in any component that extends FieldBaseAutosuggest.'
 			);
@@ -404,7 +457,9 @@ export default {
 			if (newVal === oldVal) {
 				return;
 			}
-			this.getSuggestions();
+			if (newVal.length >= this.minInputLength) {
+				this.setSearchPhrase(newVal);
+			}
 		}
 	},
 	mounted() {
@@ -482,9 +537,21 @@ export default {
 }
 
 .pkpFormField--autosuggest__autosuggest {
+	--maxAutosuggestHeight: 100%;
 	position: relative;
 }
 
+.pkpFormField--autosuggest__pagination {
+	border-top: @bg-border;
+	padding: 0.5rem 1rem;
+}
+
+.pkpFormField--autosuggest__spinner {
+	position: absolute;
+	right: 1rem;
+	top: 0.2rem;
+}
+
 .pkpFormField--autosuggest__input {
 	width: 100%;
 }
@@ -497,6 +564,7 @@ export default {
 	max-width: 100%;
 	min-width: 20rem;
 	z-index: 9999;
+	background: @lift;
 }
 
 .autosuggest__results {
@@ -506,6 +574,8 @@ export default {
 	background: @lift;
 	box-shadow: 0 0.75rem 0.75rem rgba(0, 0, 0, 0.2);
 	font-size: @font-sml;
+	max-height: var(--maxAutosuggestHeight);
+	overflow: auto;
 
 	&:after {
 		content: '';

src/components/Form/fields/FieldControlledVocab.vue

@@ -20,8 +20,9 @@ export default {
 				this.suggestions = [];
 				return;
 			}
-			if (!this.suggestionsLoaded) {
+			if (!this.suggestionsLoaded && !this.isLoading) {
 				const self = this;
+				this.isLoading = true;
 				$.ajax({
 					url: this.apiUrl,
 					type: 'GET',
@@ -30,14 +31,23 @@ export default {
 						self.ajaxErrorCallback(r);
 					},
 					success(r) {
-						self.allSuggestions = r.map(v => {
-							return {
-								value: v,
-								label: v
-							};
-						});
-						self.setSuggestions.apply(self);
+						self.allSuggestions = r
+							.sort(
+								new Intl.Collator(
+									(this.localeKey || $.pkp.app.currentLocale).split('_')[0]
+								).compare
+							)
+							.map(v => {
+								return {
+									value: v,
+									label: v
+								};
+							});
+						self.setSuggestions();
 						self.suggestionsLoaded = true;
+					},
+					complete() {
+						self.isLoading = false;
 					}
 				});
 			}

src/components/Form/fields/FieldMappedAutosuggest.vue

@@ -0,0 +1,30 @@
+<script>
+import FieldBaseAutosuggest from './FieldBaseAutosuggest.vue';
+
+export default {
+	name: 'FieldMappedAutosuggest',
+	extends: FieldBaseAutosuggest,
+	props: {
+		dataMapper: {
+			type: Function
+		}
+	},
+	methods: {
+		/**
+		 * Set the suggestions
+		 *
+		 * @param {Array} items List of items
+		 * @param {Number} itemsMax Total amount of items from the API
+		 */
+		setSuggestions(items, itemsMax) {
+			const suggestions = this.dataMapper ? items.map(this.dataMapper) : items;
+			if (this.offset) {
+				this.suggestions.push(...suggestions);
+			} else {
+				this.suggestions = suggestions;
+			}
+			this.itemsMax = itemsMax;
+		}
+	}
+};
+</script>

src/components/Form/fields/FieldSelectIssues.vue

@@ -8,23 +8,25 @@ export default {
 		/**
 		 * Set the suggestions from an API response
 		 *
-		 * Maps the API response when searching for submissions
+		 * Maps the API response when searching for issues
 		 * to an object with value and label props.
 		 *
-		 * @param {Array} newItems List of submissions
+		 * @param {Array} items List of issues
+		 * @param {Number} itemsMax Total amount of issues based on the applied filters
 		 */
-		setSuggestions(newItems) {
-			const suggestions = newItems
-				.filter(item => {
-					return !this.selected.find(s => s.value === item.id);
-				})
-				.map(item => {
-					return {
-						value: item.id,
-						label: item.identification
-					};
-				});
-			this.suggestions = suggestions;
+		setSuggestions(items, itemsMax) {
+			const suggestions = items.map(item => {
+				return {
+					value: item.id,
+					label: item.identification
+				};
+			});
+			if (this.offset) {
+				this.suggestions.push(...suggestions);
+			} else {
+				this.suggestions = suggestions;
+			}
+			this.itemsMax = itemsMax;
 		}
 	}
 };