From 827544772aed087f6ac65b9fbab6921a33e7b088 Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Wed, 20 Nov 2024 19:12:34 +0800
Subject: [PATCH] pkp/pkp-lib#10624 Add slots for rendering
 FieldBaseAutosuggest options

---
 .../Form/fields/FieldBaseAutosuggest.mdx      |  9 ++
 .../fields/FieldBaseAutosuggest.stories.js    | 86 +++++++++++++++++++
 .../Form/fields/FieldBaseAutosuggest.vue      | 86 ++++++-------------
 src/components/Form/fields/FieldComboBox.vue  | 86 +++++++++++++++++++
 .../Form/fields/FieldControlledVocab.vue      |  5 +-
 src/composables/useAutosuggest.js             | 31 +++++++
 src/mocks/institutions.json                   | 54 ++++++++++++
 7 files changed, 295 insertions(+), 62 deletions(-)
 create mode 100644 src/components/Form/fields/FieldComboBox.vue
 create mode 100644 src/composables/useAutosuggest.js
 create mode 100644 src/mocks/institutions.json

diff --git a/src/components/Form/fields/FieldBaseAutosuggest.mdx b/src/components/Form/fields/FieldBaseAutosuggest.mdx
index fbde357ad..2f74646ed 100644
--- a/src/components/Form/fields/FieldBaseAutosuggest.mdx
+++ b/src/components/Form/fields/FieldBaseAutosuggest.mdx
@@ -44,5 +44,14 @@ The following autosuggest fields are available to be used.
 - `FieldControlledVocab` can be used to enter metadata such as keywords and subjects.
 - `FieldSelectSubmissions` can be used to find and select submissions.
 
+## Customizing options
+
+The component allows for flexible customization of its options through named slots. This lets you control how suggestions are displayed and interact within the options. See [Custom Options](?path=/story/forms-fieldbaseautosuggest--custom-options) for sample implemenation.
+
+### Named Slots
+
+- `input-slot`: Customizes the input area of the combobox.
+- `option`: Defines how each suggestion is rendered in the dropdown.
+
 <Primary />
 <Controls />
diff --git a/src/components/Form/fields/FieldBaseAutosuggest.stories.js b/src/components/Form/fields/FieldBaseAutosuggest.stories.js
index f69830ec8..453ddd119 100644
--- a/src/components/Form/fields/FieldBaseAutosuggest.stories.js
+++ b/src/components/Form/fields/FieldBaseAutosuggest.stories.js
@@ -1,9 +1,11 @@
 import {http, HttpResponse} from 'msw';
 
 import FieldBaseAutosuggest from './FieldBaseAutosuggest.vue';
+import Icon from '@/components/Icon/Icon.vue';
 import FieldBaseMock from '../mocks/field-base';
 import FieldBaseAutosuggestMock from '../mocks/field-autosuggest';
 import UsernamesMock from '@/mocks/usernames.json';
+import InstitutionsMock from '@/mocks/institutions.json';
 
 export default {
 	title: 'Forms/FieldBaseAutosuggest',
@@ -97,3 +99,87 @@ export const Inline = {
 		isLabelInline: true,
 	},
 };
+
+const RORExample = {
+	extends: FieldBaseAutosuggest,
+	methods: {
+		setSuggestions(items) {
+			// Escape the search phrase for regex
+			// See: https://stackoverflow.com/a/3561711/1723499
+			const regex = new RegExp(
+				this.inputValue.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'),
+				'gi',
+			);
+
+			const suggestions = items
+				.filter((u) => u.fullName.match(regex))
+				.filter((u) => !this.currentValue.includes(u.id))
+				.map((u) => {
+					return {
+						value: u.id,
+						label: u.fullName,
+						hasSlot: u.ror,
+					};
+				});
+
+			this.suggestions = [...suggestions];
+		},
+	},
+};
+
+export const CustomOptions = {
+	render: (args) => ({
+		components: {RORExample, Icon},
+		setup() {
+			function change(name, prop, newValue, localeKey) {
+				if (localeKey) {
+					args[prop][localeKey] = newValue;
+				} else {
+					args[prop] = newValue;
+				}
+			}
+
+			return {args, change};
+		},
+		template: `
+			<RORExample v-bind="args" @change="change">
+				<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="#" target="_blank" class="ms-auto flex">
+						<span class="sr-only">Open link in new tab</span>
+						<Icon icon="NewTab" class="text-primary h-5 w-5" :inline="true" />
+					</a>
+				</template>
+			</RORExample>
+		`,
+	}),
+	args: {
+		...FieldBaseMock,
+		...FieldBaseAutosuggestMock,
+		apiUrl: 'https://mock/index.php/publicknowledge/api/v1/users',
+		label: 'Select Users',
+		selected: [],
+		isMultiple: false,
+	},
+	parameters: {
+		msw: {
+			handlers: [
+				http.get(
+					'https://mock/index.php/publicknowledge/api/v1/users',
+					async (req, res, ctx) => {
+						return HttpResponse.json(InstitutionsMock);
+					},
+				),
+			],
+		},
+		docs: {
+			story: {
+				height: '300px',
+			},
+		},
+	},
+};
diff --git a/src/components/Form/fields/FieldBaseAutosuggest.vue b/src/components/Form/fields/FieldBaseAutosuggest.vue
index 3e12db31f..1c1483c38 100644
--- a/src/components/Form/fields/FieldBaseAutosuggest.vue
+++ b/src/components/Form/fields/FieldBaseAutosuggest.vue
@@ -91,6 +91,7 @@
 					class="pkpAutosuggest__selection"
 				>
 					{{ item.label }}
+					<slot v-if="item.hasSlot" name="input-slot" />
 					<button
 						v-if="!isDisabled"
 						class="pkpAutosuggest__deselect text-negative hover:text-on-dark"
@@ -102,59 +103,20 @@
 						</span>
 					</button>
 				</PkpBadge>
-				<Combobox
+				<FieldComboBox
 					v-if="!isDisabled"
 					:id="autosuggestId"
-					:key="autosuggestId"
-					:model-value="null"
-					class="pkpAutosuggest__autosuggester"
-					as="div"
-					@update:modelValue="selectSuggestion"
+					ref="cb"
+					v-model:inputValue="inputValue"
+					v-model:isFocused="isFocused"
+					:input-props="inputProps"
+					:suggestions="suggestions"
+					@update:model-value="selectSuggestion"
 				>
-					<ComboboxInput
-						ref="autosuggestInput"
-						class="pkpAutosuggest__input"
-						v-bind="inputProps"
-						@change="inputValue = $event.target.value.trim()"
-						@focus="() => (isFocused = true)"
-						@blur="() => (isFocused = false)"
-					/>
-					<ComboboxOptions
-						v-if="suggestions.length || (allowCustom && inputValue?.length)"
-						class="autosuggest__results-container autosuggest__results"
-					>
-						<ComboboxOption
-							v-if="
-								allowCustom &&
-								inputValue?.length &&
-								!suggestions.includes(inputValue)
-							"
-							v-slot="{active}"
-							as="template"
-						>
-							<li
-								class="autosuggest__results-item"
-								:class="active && 'autosuggest__results-item--highlighted'"
-							>
-								{{ inputValue }}
-							</li>
-						</ComboboxOption>
-						<ComboboxOption
-							v-for="suggestion in suggestions"
-							:key="suggestion.value"
-							v-slot="{active}"
-							:value="suggestion"
-							as="template"
-						>
-							<li
-								class="autosuggest__results-item"
-								:class="active && 'autosuggest__results-item--highlighted'"
-							>
-								{{ suggestion.label }}
-							</li>
-						</ComboboxOption>
-					</ComboboxOptions>
-				</Combobox>
+					<template v-if="$slots.option" #option="{suggestion}">
+						<slot name="option" :suggestion="suggestion"></slot>
+					</template>
+				</FieldComboBox>
 				<span class="pkpAutosuggest__endslot">
 					<slot name="end"></slot>
 				</span>
@@ -176,6 +138,7 @@
 
 <script>
 import FieldBase from './FieldBase.vue';
+import FieldComboBox from './FieldComboBox.vue';
 import PkpBadge from '@/components/Badge/Badge.vue';
 import FormFieldLabel from '@/components/Form/FormFieldLabel.vue';
 import Tooltip from '@/components/Tooltip/Tooltip.vue';
@@ -184,12 +147,6 @@ import FieldError from '@/components/Form/FieldError.vue';
 import MultilingualProgress from '@/components/MultilingualProgress/MultilingualProgress.vue';
 import Icon from '@/components/Icon/Icon.vue';
 
-import {
-	Combobox,
-	ComboboxInput,
-	ComboboxOption,
-	ComboboxOptions,
-} from '@headlessui/vue';
 import ajaxError from '@/mixins/ajaxError';
 import debounce from 'debounce';
 
@@ -197,16 +154,13 @@ export default {
 	name: 'FieldBaseAutosuggest',
 	components: {
 		PkpBadge,
-		Combobox,
-		ComboboxInput,
-		ComboboxOption,
-		ComboboxOptions,
 		FormFieldLabel,
 		Tooltip,
 		HelpButton,
 		FieldError,
 		Icon,
 		MultilingualProgress,
+		FieldComboBox,
 	},
 	extends: FieldBase,
 	mixins: [ajaxError],
@@ -256,6 +210,11 @@ export default {
 			type: String,
 			required: true,
 		},
+		/** If the combobox should allow multiple options to be selected */
+		isMultiple: {
+			type: Boolean,
+			default: () => true,
+		},
 	},
 	data() {
 		return {
@@ -357,7 +316,7 @@ export default {
 				return;
 			}
 
-			this.$refs.autosuggestInput.$el.focus();
+			this.$refs.cb.$refs.autosuggestInput.$el.focus();
 		},
 
 		/**
@@ -421,6 +380,11 @@ export default {
 		 * Emit events to change the selected items and the field's value
 		 */
 		setSelected(selected) {
+			if (selected?.length > 1 && !this.isMultiple) {
+				// override selected value if only one option can be selected
+				selected = [selected[1]];
+			}
+
 			this.$emit('change', this.name, 'selected', selected, this.localeKey);
 			this.$emit(
 				'change',
diff --git a/src/components/Form/fields/FieldComboBox.vue b/src/components/Form/fields/FieldComboBox.vue
new file mode 100644
index 000000000..194c58cd7
--- /dev/null
+++ b/src/components/Form/fields/FieldComboBox.vue
@@ -0,0 +1,86 @@
+<template>
+	<Combobox
+		:id="id"
+		:key="id"
+		:model-value="null"
+		class="pkpAutosuggest__autosuggester"
+		as="div"
+	>
+		<ComboboxInput
+			ref="autosuggestInput"
+			class="pkpAutosuggest__input"
+			v-bind="inputProps"
+			@change="(event) => handleChange(event, emit)"
+			@focus="() => handleFocus(emit)"
+			@blur="() => handleBlur(emit)"
+		/>
+		<ComboboxOptions
+			v-if="suggestions.length || (allowCustom && localInputValue?.length)"
+			class="autosuggest__results-container autosuggest__results"
+		>
+			<ComboboxOption
+				v-if="
+					allowCustom &&
+					localInputValue?.length &&
+					!suggestions.includes(localInputValue)
+				"
+				v-slot="{active}"
+				as="template"
+			>
+				<li
+					class="autosuggest__results-item"
+					:class="active && 'autosuggest__results-item--highlighted'"
+				>
+					{{ localInputValue }}
+				</li>
+			</ComboboxOption>
+			<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>
+		</ComboboxOptions>
+	</Combobox>
+</template>
+<script setup>
+import {useSlots} from 'vue';
+import {
+	Combobox,
+	ComboboxInput,
+	ComboboxOption,
+	ComboboxOptions,
+} from '@headlessui/vue';
+import {useAutosuggest} from '@/composables/useAutosuggest';
+
+const slots = useSlots();
+
+defineProps({
+	id: {
+		type: String,
+		required: true,
+	},
+	inputProps: {
+		type: Object,
+		required: true,
+	},
+	suggestions: {
+		type: Array,
+		default: () => [],
+	},
+});
+
+const emit = defineEmits(['update:inputValue', 'update:isFocused']);
+
+const {allowCustom, localInputValue, handleChange, handleFocus, handleBlur} =
+	useAutosuggest();
+</script>
diff --git a/src/components/Form/fields/FieldControlledVocab.vue b/src/components/Form/fields/FieldControlledVocab.vue
index 6c463b305..b5f2939fc 100644
--- a/src/components/Form/fields/FieldControlledVocab.vue
+++ b/src/components/Form/fields/FieldControlledVocab.vue
@@ -1,16 +1,19 @@
 <script>
+import {provide} from 'vue';
 import FieldBaseAutosuggest from './FieldBaseAutosuggest.vue';
 import debounce from 'debounce';
 
 export default {
 	name: 'FieldControlledVocab',
 	extends: FieldBaseAutosuggest,
+	setup() {
+		provide('allowCustom', true);
+	},
 	data() {
 		return {
 			allSuggestions: [],
 			suggestionsLoaded: false,
 			suggestionsLoading: false,
-			allowCustom: true,
 		};
 	},
 	methods: {
diff --git a/src/composables/useAutosuggest.js b/src/composables/useAutosuggest.js
new file mode 100644
index 000000000..4800717a6
--- /dev/null
+++ b/src/composables/useAutosuggest.js
@@ -0,0 +1,31 @@
+import {ref, inject} from 'vue';
+
+export function useAutosuggest(emit) {
+	const allowCustom = inject('allowCustom', false);
+	const localInputValue = ref('');
+	const isFocused = ref(false);
+
+	function handleChange(event, emit) {
+		localInputValue.value = event.target.value.trim();
+		emit('update:inputValue', localInputValue.value);
+	}
+
+	function handleFocus(emit) {
+		isFocused.value = true;
+		emit('update:isFocused', isFocused.value);
+	}
+
+	function handleBlur(emit) {
+		isFocused.value = false;
+		emit('update:isFocused', isFocused.value);
+	}
+
+	return {
+		allowCustom,
+		localInputValue,
+		isFocused,
+		handleChange,
+		handleFocus,
+		handleBlur,
+	};
+}
diff --git a/src/mocks/institutions.json b/src/mocks/institutions.json
new file mode 100644
index 000000000..476d5fd61
--- /dev/null
+++ b/src/mocks/institutions.json
@@ -0,0 +1,54 @@
+{
+	"items": [
+		{
+			"id": 1,
+			"fullName": "University of Toronto",
+			"ror": true
+		},
+		{
+			"id": 2,
+			"fullName": "University of Bath",
+			"ror": true
+		},
+		{
+			"id": 3,
+			"fullName": "University of Melbourne",
+			"ror": true
+		},
+		{
+			"id": 4,
+			"fullName": "Technical University of Berlin",
+			"ror": true
+		},
+		{
+			"id": 5,
+			"fullName": "University of West Los Angeles",
+			"ror": true
+		},
+		{
+			"id": 6,
+			"fullName": "Niagara College",
+			"ror": true
+		},
+		{
+			"id": 7,
+			"fullName": "Innovate Niagara",
+			"ror": true
+		},
+		{
+			"id": 8,
+			"fullName": "Regional Municipality of Niagara",
+			"ror": true
+		},
+		{
+			"id": 9,
+			"fullName": "Niagara University",
+			"ror": true
+		},
+		{
+			"id": 10,
+			"fullName": "Niagara Association of Medicine"
+		}
+	],
+	"itemsMax": 10
+}