Controlled vocabulary support

jyhein · Nov 25, 2024 · 271d26b · 271d26b
1 parent a67fd26
commit 271d26b
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 18 deletions.
diff --git a/src/components/Form/fields/FieldBaseAutosuggest.vue b/src/components/Form/fields/FieldBaseAutosuggest.vue
@@ -150,7 +150,30 @@
 								class="autosuggest__results-item"
 								:class="active && 'autosuggest__results-item--highlighted'"
 							>
-								{{ suggestion.label }}
+								<ul>
+									<li>
+										{{ suggestion.label }}
+									</li>
+									<li v-if="suggestion.value.identifier?.match(/^http/)">
+										<a
+											:href="suggestion.value.identifier"
+											target="_blank"
+											@click.stop
+										>
+											{{ suggestion.value.identifier }}
+										</a>
+									</li>
+									<li v-else-if="suggestion.value.identifier">
+										{{ suggestion.value.identifier }}
+									</li>
+									<li
+										v-for="(extraItem, extraItemKey) in suggestion.extraItems ??
+										{}"
+										:key="extraItemKey"
+									>
+										{{ extraItem }}
+									</li>
+								</ul>
 							</li>
 						</ComboboxOption>
 					</ComboboxOptions>
@@ -592,6 +615,12 @@ export default {
 			background: @primary;
 			transition: width 0.3s;
 		}
+
+		& ul li {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
 	}
 
 	.autosuggest__results-item--highlighted {

diff --git a/src/components/Form/fields/FieldControlledVocab.vue b/src/components/Form/fields/FieldControlledVocab.vue
@@ -2,13 +2,23 @@
 import FieldBaseAutosuggest from './FieldBaseAutosuggest.vue';
 import debounce from 'debounce';
 
+function setSuggestion(value) {
+	const {term, label = null, identifier = null, ...extraItems} = value;
+	const suggestion = {
+		value: value,
+		label: label ?? term,
+		identifier: identifier,
+		...(extraItems ? {extraItems: extraItems} : {}),
+	};
+	return suggestion;
+}
+
 export default {
 	name: 'FieldControlledVocab',
 	extends: FieldBaseAutosuggest,
 	data() {
 		return {
 			allSuggestions: [],
-			suggestionsLoaded: false,
 			suggestionsLoading: false,
 			allowCustom: true,
 		};
@@ -25,40 +35,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
@@ -71,7 +76,7 @@ export default {
 				this.select(suggestion);
 			} else if (this.inputValue) {
 				this.select({
-					value: this.inputValue,
+					value: {term: this.inputValue},
 					label: this.inputValue,
 				});
 			}
@@ -93,8 +98,8 @@ export default {
 			this.suggestions = this.allSuggestions.filter(
 				(suggestion) =>
 					!this.inputValue ||
-					(this.inputValue !== suggestion.value &&
-						suggestion.value.match(regex)),
+					(this.inputValue !== suggestion.value.term &&
+						suggestion.value.term.match(regex)),
 			);
 		}, 250),
 	},