From 0a82e7080e539979dcb05df2e001b90c62975539 Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Wed, 4 Dec 2024 03:40:24 +0800
Subject: [PATCH] pkp/pkp-lib#10624 Add ROR autosuggest component

---
 src/components/Form/fields/Autosuggest.vue    | 105 ++++++++----
 .../fields/FieldBaseAutosuggest.stories.js    |   4 +-
 .../Form/fields/FieldBaseAutosuggest.vue      |  39 ++---
 .../fields/FieldRorAutosuggest.stories.js     |  24 +++
 .../Form/fields/FieldRorAutosuggest.vue       | 155 ++++++++++++++++++
 src/mocks/institutions.json                   |  20 +--
 6 files changed, 279 insertions(+), 68 deletions(-)
 create mode 100644 src/components/Form/fields/FieldRorAutosuggest.stories.js
 create mode 100644 src/components/Form/fields/FieldRorAutosuggest.vue

diff --git a/src/components/Form/fields/Autosuggest.vue b/src/components/Form/fields/Autosuggest.vue
index 72b75907..36fc5790 100644
--- a/src/components/Form/fields/Autosuggest.vue
+++ b/src/components/Form/fields/Autosuggest.vue
@@ -18,7 +18,7 @@
 		>
 			<Icon icon="Cancel" class="h-3 w-3" />
 			<span class="-screenReader">
-				{{ deselectLabel.replace('{$item}', item.label) }}
+				{{ deselectLabel?.replace('{$item}', item.label) }}
 			</span>
 		</button>
 	</PkpBadge>
@@ -31,48 +31,72 @@
 		@update:model-value="selectSuggestion"
 	>
 		<ComboboxInput
-			ref="autosuggestInput"
 			class="pkpAutosuggest__input"
 			v-bind="inputProps"
+			autocomplete="off"
 			@change="(event) => handleChange(event)"
-			@focus="() => handleFocus()"
-			@blur="() => handleBlur()"
+			@focus="() => handleFocus(true)"
+			@blur="() => handleFocus(false)"
 		/>
 		<ComboboxOptions
-			v-if="suggestions.length || (allowCustom && localInputValue?.length)"
+			v-if="
+				suggestions.length ||
+				(allowCustom && localInputValue?.length) ||
+				isLoading
+			"
 			class="autosuggest__results-container autosuggest__results"
 		>
 			<ComboboxOption
-				v-if="
-					allowCustom &&
-					localInputValue?.length &&
-					!suggestions.includes(localInputValue)
-				"
+				v-if="isLoading"
 				v-slot="{active}"
 				as="template"
+				:disabled="true"
 			>
 				<li
 					class="autosuggest__results-item"
 					:class="active && 'autosuggest__results-item--highlighted'"
 				>
-					{{ localInputValue }}
+					<Spinner />
+					{{ t('common.loading') }}
 				</li>
 			</ComboboxOption>
 			<ComboboxOption
-				v-for="suggestion in suggestions"
-				:key="suggestion.value"
+				v-if="
+					allowCustom &&
+					localInputValue?.length &&
+					!suggestions.includes(localInputValue)
+				"
 				v-slot="{active}"
-				:value="suggestion"
 				as="template"
 			>
 				<li
-					class="autosuggest__results-item flex items-center"
+					class="autosuggest__results-item"
 					:class="active && 'autosuggest__results-item--highlighted'"
 				>
-					<slot v-if="slots['option']" name="option" :suggestion="suggestion" />
-					<span v-else>{{ suggestion.label }}</span>
+					{{ localInputValue }}
 				</li>
 			</ComboboxOption>
+			<template v-if="!isLoading">
+				<ComboboxOption
+					v-for="suggestion in suggestions"
+					:key="suggestion.value"
+					v-slot="{active}"
+					:value="suggestion"
+					as="template"
+				>
+					<li
+						class="autosuggest__results-item flex items-center"
+						:class="active && 'autosuggest__results-item--highlighted'"
+					>
+						<slot
+							v-if="slots['option']"
+							name="option"
+							:suggestion="suggestion"
+						/>
+						<span v-else>{{ suggestion.label }}</span>
+					</li>
+				</ComboboxOption>
+			</template>
 		</ComboboxOptions>
 	</Combobox>
 </template>
@@ -86,6 +110,7 @@ import {
 } from '@headlessui/vue';
 import PkpBadge from '@/components/Badge/Badge.vue';
 import Icon from '@/components/Icon/Icon.vue';
+import Spinner from '@/components/Spinner/Spinner.vue';
 
 const slots = useSlots();
 
@@ -94,10 +119,6 @@ const props = defineProps({
 		type: String,
 		required: true,
 	},
-	inputProps: {
-		type: Object,
-		required: true,
-	},
 	suggestions: {
 		type: Array,
 		default: () => [],
@@ -122,36 +143,54 @@ const props = defineProps({
 		type: String,
 		default: () => '',
 	},
-	isFocused: {
+	isLoading: {
 		type: Boolean,
 		default: () => false,
 	},
+	inputDescribedByIds: {
+		type: String,
+		required: true,
+	},
+	inputControlId: {
+		type: String,
+		required: true,
+	},
+	inputName: {
+		type: String,
+		default: () => 'autosuggest',
+	},
 });
 
+/**
+ * Props to pass to the input field
+ */
+const inputProps = {
+	'aria-describedby': props.inputDescribedByIds,
+	class: 'pkpAutosuggest__input',
+	id: props.inputControlId,
+	name: props.inputName,
+	disabled: props.isDisabled,
+};
+
 const emit = defineEmits([
 	'update:inputValue',
-	'update:isFocused',
+	'focus-changed',
 	'select-suggestion',
 	'deselect',
 ]);
 
 const allowCustom = inject('allowCustom', false);
 const localInputValue = ref('');
-const localIsFocused = ref(props.isFocused);
+const isFocused = ref(false);
 
 function handleChange(event) {
 	localInputValue.value = event.target.value.trim();
 	emit('update:inputValue', localInputValue.value);
 }
 
-function handleFocus() {
-	localIsFocused.value = true;
-	emit('update:isFocused', localIsFocused.value);
-}
-
-function handleBlur() {
-	localIsFocused.value = false;
-	emit('update:isFocused', localIsFocused.value);
+function handleFocus(state) {
+	isFocused.value = state;
+	emit('focus-changed', state);
 }
 
 function selectSuggestion(suggestion) {
@@ -161,4 +200,6 @@ function selectSuggestion(suggestion) {
 function deselect(item) {
 	emit('deselect', item);
 }
+
+defineExpose({handleFocus});
 </script>
diff --git a/src/components/Form/fields/FieldBaseAutosuggest.stories.js b/src/components/Form/fields/FieldBaseAutosuggest.stories.js
index 453ddd11..b5abd178 100644
--- a/src/components/Form/fields/FieldBaseAutosuggest.stories.js
+++ b/src/components/Form/fields/FieldBaseAutosuggest.stories.js
@@ -112,12 +112,12 @@ const RORExample = {
 			);
 
 			const suggestions = items
-				.filter((u) => u.fullName.match(regex))
+				.filter((u) => u.name.match(regex))
 				.filter((u) => !this.currentValue.includes(u.id))
 				.map((u) => {
 					return {
 						value: u.id,
-						label: u.fullName,
+						label: u.name,
 						hasSlot: u.ror,
 					};
 				});
diff --git a/src/components/Form/fields/FieldBaseAutosuggest.vue b/src/components/Form/fields/FieldBaseAutosuggest.vue
index 086a1f50..4ac7d32a 100644
--- a/src/components/Form/fields/FieldBaseAutosuggest.vue
+++ b/src/components/Form/fields/FieldBaseAutosuggest.vue
@@ -45,7 +45,7 @@
 				:class="{
 					'pkpAutosuggest__inputWrapper--multilingual':
 						isMultilingual && locales.length > 1,
-					'pkpAutosuggest__inputWrapper--focus': isFocused,
+					'pkpAutosuggest__inputWrapper--focus': inputFocused,
 				}"
 				@click="setFocusToInput"
 			>
@@ -83,11 +83,11 @@
 				<Autosuggest
 					v-if="!isDisabled"
 					v-bind="autoSuggestProps"
-					ref="cb"
+					ref="inputRef"
 					v-model:inputValue="inputValue"
-					v-model:isFocused="isFocused"
 					@select-suggestion="selectSuggestion"
 					@deselect="deselect"
+					@focus-changed="changeFocus"
 				>
 					<template v-if="$slots['input-slot']" #input-slot>
 						<slot name="input-slot"></slot>
@@ -194,7 +194,7 @@ export default {
 	data() {
 		return {
 			inputValue: '',
-			isFocused: false,
+			inputFocused: false,
 			suggestions: [],
 		};
 	},
@@ -242,24 +242,6 @@ export default {
 			);
 		},
 
-		/**
-		 * Props to pass to the input field
-		 *
-		 * @return {Object}
-		 */
-		inputProps() {
-			let props = {
-				'aria-describedby': this.describedByIds,
-				class: 'pkpAutosuggest__input',
-				id: this.controlId,
-				name: this.name,
-			};
-			if (this.isDisabled) {
-				props.disabled = 'disabled';
-			}
-			return props;
-		},
-
 		/**
 		 * Is this field in a right-to-left language
 		 */
@@ -270,12 +252,14 @@ export default {
 		autoSuggestProps() {
 			return {
 				id: this.autosuggestId,
-				inputProps: this.inputProps,
 				suggestions: this.suggestions,
 				selectedLabel: this.selectedLabel,
 				currentSelected: this.currentSelected,
 				isDisabled: this.isDisabled,
 				deselectLabel: this.deselectLabel,
+				inputDescribedByIds: this.describedByIds,
+				inputControlId: this.controlId,
+				inputName: this.name,
 			};
 		},
 	},
@@ -319,7 +303,14 @@ export default {
 				return;
 			}
 
-			this.$refs.cb.$refs.autosuggestInput.$el.focus();
+			this.$refs.inputRef.handleFocus(true);
+		},
+
+		/**
+		 * Change the input focus state
+		 */
+		changeFocus(state) {
+			this.inputFocused = state;
 		},
 
 		/**
diff --git a/src/components/Form/fields/FieldRorAutosuggest.stories.js b/src/components/Form/fields/FieldRorAutosuggest.stories.js
new file mode 100644
index 00000000..2c605320
--- /dev/null
+++ b/src/components/Form/fields/FieldRorAutosuggest.stories.js
@@ -0,0 +1,24 @@
+import FieldRorAutosuggest from './FieldRorAutosuggest.vue';
+
+export default {
+	title: 'Components/FieldRorAutosuggest',
+	component: FieldRorAutosuggest,
+	render: (args) => ({
+		components: {FieldRorAutosuggest},
+		setup() {
+			return {args};
+		},
+		template: '<FieldRorAutosuggest v-bind="args" />',
+	}),
+};
+
+export const Default = {
+	render: (args) => ({
+		components: {FieldRorAutosuggest},
+		setup() {
+			return {args};
+		},
+		template: '<FieldRorAutosuggest v-bind="args" />',
+	}),
+	args: {},
+};
diff --git a/src/components/Form/fields/FieldRorAutosuggest.vue b/src/components/Form/fields/FieldRorAutosuggest.vue
new file mode 100644
index 00000000..e6fbb9bf
--- /dev/null
+++ b/src/components/Form/fields/FieldRorAutosuggest.vue
@@ -0,0 +1,155 @@
+<template>
+	<div
+		class="relative"
+		:class="{
+			'pkpAutosuggest--disabled': autoSuggestProps.isDisabled,
+		}"
+	>
+		<div class="relative mt-1 w-full">
+			<div
+				:id="autoSuggestProps.inputDescribedByIds"
+				ref="values"
+				class="pkpAutosuggest__inputWrapper pkpFormField__input"
+				:class="{
+					'pkpAutosuggest__inputWrapper--focus': isFocused,
+				}"
+				@click="setFocusToInput"
+			>
+				<Autosuggest
+					v-bind="autoSuggestProps"
+					@update:input-value="updateInputValue"
+					@select-suggestion="handleSelect"
+					@deselect="handleDeselect"
+					@focus-changed="changeFocus"
+				>
+					<template #input-slot>
+						<Icon icon="ROR" class="ms-2 h-auto w-6" :inline="true" />
+					</template>
+					<template #option="{suggestion}">
+						{{ suggestion.label }}
+						<Icon
+							v-if="suggestion.hasSlot"
+							icon="ROR"
+							class="ms-2 h-auto w-6"
+							:inline="true"
+						/>
+						<a
+							v-if="suggestion.hasSlot"
+							:href="suggestion.href"
+							target="_blank"
+							class="ms-auto flex"
+						>
+							<span class="sr-only">Open link in new tab</span>
+							<Icon icon="NewTab" class="h-5 w-5 text-primary" :inline="true" />
+						</a>
+					</template>
+				</Autosuggest>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import {ref, watch, reactive, computed} from 'vue';
+import Autosuggest from './Autosuggest.vue';
+import Icon from '@/components/Icon/Icon.vue';
+import {useFetch} from '@/composables/useFetch';
+
+const suggestions = ref([]);
+const currentSelected = ref([]);
+const inputValue = ref('');
+const isFocused = ref(false);
+
+const url = 'https://api.ror.org/v2/organizations';
+const queryParams = ref({
+	query: inputValue.value,
+});
+const {data, isLoading, fetch} = useFetch(url, {
+	query: queryParams,
+});
+
+const staticProps = {
+	id: 'default-autosuggest-autosuggest',
+	selectedLabel: 'Selected',
+	isDisabled: false,
+	deselectLabel: 'Remove {$item}',
+	inputDescribedByIds: 'default-autosuggest-selected',
+	inputControlId: 'default-autosuggest-control',
+	// isMultiple: true,
+};
+
+const reactiveProps = reactive({
+	suggestions,
+	currentSelected,
+	isLoading,
+});
+
+const autoSuggestProps = computed(() => ({
+	...staticProps,
+	...reactiveProps,
+}));
+
+watch(inputValue, (newValue, oldValue) => {
+	if (newValue === oldValue) {
+		return;
+	}
+
+	getSuggestions();
+});
+
+function mapResult(items) {
+	if (!items) {
+		return [];
+	}
+
+	return items.map((item) => {
+		// get the name from "ror_display" type
+		const name = item.names?.find((i) =>
+			i.types.includes('ror_display'),
+		)?.value;
+
+		return {
+			value: item.id,
+			label: name,
+			hasSlot: true,
+			href: item.id,
+		};
+	});
+}
+
+async function getSuggestions() {
+	queryParams.value.query = inputValue.value;
+	await fetch();
+	suggestions.value = mapResult(data.value?.items);
+}
+
+function updateInputValue(value) {
+	inputValue.value = value;
+}
+
+function changeFocus(focused) {
+	isFocused.value = focused;
+}
+
+// Removes the currently selected items from the suggestions
+function omitSelectedFromSuggestions() {
+	const currentIds = currentSelected.value.map((c) => c.value);
+	suggestions.value = suggestions.value.filter(
+		(i) => !currentIds.includes(i.value),
+	);
+}
+
+function handleSelect(suggestion) {
+	if (!currentSelected.value.some((item) => item.value === suggestion.value)) {
+		currentSelected.value.push(suggestion);
+	}
+
+	omitSelectedFromSuggestions();
+}
+
+function handleDeselect(item) {
+	currentSelected.value = currentSelected.value.filter(
+		(selected) => selected.value !== item.value,
+	);
+}
+</script>
diff --git a/src/mocks/institutions.json b/src/mocks/institutions.json
index 476d5fd6..231481d8 100644
--- a/src/mocks/institutions.json
+++ b/src/mocks/institutions.json
@@ -2,52 +2,52 @@
 	"items": [
 		{
 			"id": 1,
-			"fullName": "University of Toronto",
+			"name": "University of Toronto",
 			"ror": true
 		},
 		{
 			"id": 2,
-			"fullName": "University of Bath",
+			"name": "University of Bath",
 			"ror": true
 		},
 		{
 			"id": 3,
-			"fullName": "University of Melbourne",
+			"name": "University of Melbourne",
 			"ror": true
 		},
 		{
 			"id": 4,
-			"fullName": "Technical University of Berlin",
+			"name": "Technical University of Berlin",
 			"ror": true
 		},
 		{
 			"id": 5,
-			"fullName": "University of West Los Angeles",
+			"name": "University of West Los Angeles",
 			"ror": true
 		},
 		{
 			"id": 6,
-			"fullName": "Niagara College",
+			"name": "Niagara College",
 			"ror": true
 		},
 		{
 			"id": 7,
-			"fullName": "Innovate Niagara",
+			"name": "Innovate Niagara",
 			"ror": true
 		},
 		{
 			"id": 8,
-			"fullName": "Regional Municipality of Niagara",
+			"name": "Regional Municipality of Niagara",
 			"ror": true
 		},
 		{
 			"id": 9,
-			"fullName": "Niagara University",
+			"name": "Niagara University",
 			"ror": true
 		},
 		{
 			"id": 10,
-			"fullName": "Niagara Association of Medicine"
+			"name": "Niagara Association of Medicine"
 		}
 	],
 	"itemsMax": 10