Controlled vocabulary support

Author: jyhein

src/components/Form/fields/Autosuggest.vue

@@ -95,7 +95,25 @@
 							name="option"
 							:suggestion="suggestion"
 						/>
-						<span v-else>{{ suggestion.label }}</span>
+						<ul v-else>
+							<li>
+								{{ suggestion.label }}
+							</li>
+							<li v-if="suggestion.identifier?.match(/^http/)">
+								<a :href="suggestion.identifier" target="_blank" @click.stop>
+									{{ suggestion.identifier }}
+								</a>
+							</li>
+							<li v-else-if="suggestion.identifier">
+								{{ suggestion.identifier }}
+							</li>
+							<li
+								v-for="(extraItem, extraItemKey) in suggestion.extraItems ?? {}"
+								:key="extraItemKey"
+							>
+								{{ extraItem }}
+							</li>
+						</ul>
 					</li>
 				</ComboboxOption>
 			</template>
@@ -302,6 +320,12 @@ defineExpose({handleFocus});
 			background: @primary;
 			transition: width 0.3s;
 		}
+
+		& ul li {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
 	}
 
 	.autosuggest__results-item--highlighted {

src/components/Form/fields/FieldControlledVocab.vue

@@ -2,6 +2,17 @@
 import FieldBaseAutosuggest from './FieldBaseAutosuggest.vue';
 import debounce from 'debounce';
 
+function setSuggestion(value) {
+	const {name, label = null, identifier = null, ...extraItems} = value;
+	const suggestion = {
+		value: value,
+		label: label ?? name,
+		identifier: identifier,
+		...(extraItems ? {extraItems: extraItems} : {}),
+	};
+	return suggestion;
+}
+
 export default {
 	name: 'FieldControlledVocab',
 	extends: FieldBaseAutosuggest,
@@ -15,7 +26,6 @@ export default {
 	data() {
 		return {
 			allSuggestions: [],
-			suggestionsLoaded: false,
 			suggestionsLoading: false,
 		};
 	},
@@ -31,40 +41,35 @@ export default {
 			if (this.suggestionsLoading) {
 				return;
 			}
-			if (!this.suggestionsLoaded) {
-				this.loadSuggestions(this.setSuggestions);
-			}
+			this.loadSuggestions(this.setSuggestions);
 			this.setSuggestions();
 		},
 
 		/**
 		 * Load suggestions from the API
 		 */
-		loadSuggestions(successCallback) {
+		loadSuggestions: debounce(function (successCallback) {
 			this.suggestionsLoading = true;
 			$.ajax({
 				url: this.apiUrl,
 				type: 'GET',
 				context: this,
-				data: this.isMultilingual ? {locale: this.localeKey} : {},
+				data: {
+					term: this.inputValue ?? null,
+					...(this.isMultilingual ? {locale: this.localeKey} : {}),
+				},
 				error(r) {
 					this.ajaxErrorCallback(r);
 				},
 				success(r) {
-					this.allSuggestions = r.map((v) => {
-						return {
-							value: v,
-							label: v,
-						};
-					});
-					this.suggestionsLoaded = true;
+					this.allSuggestions = r.map((v) => setSuggestion(v));
 					this.suggestionsLoading = false;
 					if (successCallback) {
 						successCallback.apply(this);
 					}
 				},
 			});
-		},
+		}, 250),
 
 		/**
 		 * Override the parent method to accept any typed
@@ -77,7 +82,7 @@ export default {
 				this.select(suggestion);
 			} else if (this.inputValue) {
 				this.select({
-					value: this.inputValue,
+					value: {name: this.inputValue},
 					label: this.inputValue,
 				});
 			}
@@ -99,8 +104,8 @@ export default {
 			this.suggestions = this.allSuggestions.filter(
 				(suggestion) =>
 					!this.inputValue ||
-					(this.inputValue !== suggestion.value &&
-						suggestion.value.match(regex)),
+					(this.inputValue !== suggestion.value.name &&
+						suggestion.value.name.match(regex)),
 			);
 		}, 250),
 	},