From 4dc8ea8ea918889062ba7326e37c703ad95941be Mon Sep 17 00:00:00 2001
From: Florian Wendelborn <1133858+FlorianWendelborn@users.noreply.github.com>
Date: Mon, 6 Dec 2021 02:49:08 +0100
Subject: [PATCH] wip

---
 .../KtFieldSingleSelectRemote.vue             | 182 +--------------
 .../components/GenericSelectField.vue         | 220 ++++++++++++++++++
 2 files changed, 227 insertions(+), 175 deletions(-)
 create mode 100644 packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue

diff --git a/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelectRemote.vue b/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelectRemote.vue
index 06d1d4d8aa..74c406a9ca 100644
--- a/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelectRemote.vue
+++ b/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelectRemote.vue
@@ -1,87 +1,19 @@
 <template>
-	<div>
-		<div ref="tippyTriggerRef">
-			<KtField
-				v-bind="{ field }"
-				class="kt-field-select kt-field-select--single-remote"
-				:getEmptyValue="() => null"
-				:helpTextSlot="$slots.helpText"
-			>
-				<input
-					v-bind="inputProps"
-					@blur="handleInputBlur"
-					@click="handleInputClick"
-					@focus="handleInputFocus"
-					@input="updateQuery"
-				/>
-				<template v-slot:actionIcon="{ classes, handleClear, showClear }">
-					<ActionIconNext
-						v-bind="{
-							classes,
-							handleClear,
-							isDropdownOpen,
-							showClear,
-						}"
-					/>
-				</template>
-			</KtField>
-		</div>
-		<div ref="tippyContentRef">
-			<FieldSelectOptions
-				:actions="actions"
-				:isDisabled="field.isDisabled"
-				:options="options"
-				:value="field.currentValue === null ? [] : [field.currentValue]"
-				@close="setIsDropdownOpen(false)"
-				@input="(e) => selectOption(e.length === 0 ? null : e[0])"
-			/>
-		</div>
-	</div>
+	<GenericSelectField isRemote />
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, watch } from '@vue/composition-api'
+import { defineComponent } from '@vue/composition-api'
 
-import { KtField } from '../kotti-field'
 import { KOTTI_FIELD_PROPS } from '../kotti-field/constants'
-import { useField } from '../kotti-field/hooks'
-import { useForceUpdate } from '../kotti-field/hooks'
 
-import ActionIconNext from './components/ActionIconNext.vue'
-import FieldSelectOptions from './components/Options.vue'
-import {
-	KOTTI_FIELD_REMOTE_SINGLE_SELECT_PROPS,
-	KOTTI_FIELD_REMOTE_SELECT_SUPPORTS,
-} from './constants'
-import { useSelectTippy } from './hooks/use-select-tippy'
-import { KottiFieldSingleSelectRemote } from './types'
-
-const UPDATE_QUERY = 'update:query'
-
-const isTippyOrInTippy = (element: Element, tippy: Element | null): boolean => {
-	if (tippy === null) return false
-
-	let currentElement = element
-
-	while (currentElement) {
-		if (currentElement.isSameNode(tippy)) return true
-		currentElement = currentElement?.parentElement
-	}
-
-	return false
-}
-
-const isEqualValue = (
-	currentValue: KottiFieldSingleSelectRemote.Value,
-	newValue: KottiFieldSingleSelectRemote.Value,
-) => currentValue === newValue
+import GenericSelectField from './components/GenericSelectField.vue'
+import { KOTTI_FIELD_REMOTE_SINGLE_SELECT_PROPS } from './constants'
 
 export default defineComponent({
 	name: 'KtFieldSingleSelectRemote',
 	components: {
-		ActionIconNext,
-		FieldSelectOptions,
-		KtField,
+		GenericSelectField,
 	},
 	props: {
 		...KOTTI_FIELD_PROPS,
@@ -89,110 +21,10 @@ export default defineComponent({
 		query: { default: null, type: String },
 		value: { default: null, type: [Number, String, Boolean] },
 	},
-	setup(props: KottiFieldSingleSelectRemote.Props, { emit }) {
-		const field = useField<KottiFieldSingleSelectRemote.Value, string | null>({
-			emit,
-			isCorrectDataType: (value): value is KottiFieldSingleSelectRemote.Value =>
-				['boolean', 'number', 'string', 'symbol'].includes(typeof value) ||
-				value === null,
-			isEmpty: (value) => value === null,
-			props,
-			supports: KOTTI_FIELD_REMOTE_SELECT_SUPPORTS,
-		})
-
-		const selectTippy = useSelectTippy()
-
-		const isInputFocused = ref(false)
-		const selectedLabel = computed((): string | null => {
-			if (field.currentValue === null) return null
-			return (
-				props.options.find((option) => option.value === field.currentValue)
-					?.label ?? null
-			)
-		})
-
-		const { forceUpdateKey, forceUpdate } = useForceUpdate()
-
-		const isUserInteracting = computed(
-			() => isInputFocused.value || selectTippy.isDropdownOpen.value,
-		)
-
-		watch(isUserInteracting, (newValue) => {
-			if (!newValue) emit(UPDATE_QUERY, null)
-		})
-
+	setup(_, { emit }) {
 		return {
-			field,
-			handleInputBlur: (event: { relatedTarget: HTMLElement }) => {
-				const blurToElement = event.relatedTarget
-				if (
-					!isTippyOrInTippy(blurToElement, selectTippy.tippyContentRef.value)
-				) {
-					selectTippy.setIsDropdownOpen(false)
-				}
-
-				isInputFocused.value = false
-			},
-			handleInputClick: () => {
-				// always show the dropdown if the input was clicked
-				selectTippy.setIsDropdownOpen(true)
-			},
-			handleInputFocus: () => {
-				// always show the dropdown if the input was focused
-				selectTippy.setIsDropdownOpen(true)
-				isInputFocused.value = true
-			},
-			inputProps: computed(() => ({
-				class: ['kt-field-select--single-remote__wrapper'],
-				forceUpdateKey: forceUpdateKey.value,
-				placeholder: props.placeholder ?? undefined,
-				size: 1,
-				type: 'text',
-				value: (() => {
-					if (isUserInteracting.value) return props.query ?? undefined
-
-					return selectedLabel.value ?? undefined
-				})(),
-			})),
-			isDropdownOpen: selectTippy.isDropdownOpen,
-			tippyContentRef: selectTippy.tippyContentRef,
-			tippyTriggerRef: selectTippy.tippyTriggerRef,
-			selectOption: (
-				value: KottiFieldSingleSelectRemote.Props['options'][number]['value'],
-			) => {
-				// optimization: no need to change the value if it’s already set
-				if (!isEqualValue(field.currentValue, value)) field.setValue(value)
-
-				// close the tippy instance whenever a selection is made
-				selectTippy.setIsDropdownOpen(false)
-
-				// when a selection is made, intentionally reset the query
-				// so that the api-call (for example) can already trigger
-				// and load the non-filtered options
-				emit(UPDATE_QUERY, null)
-			},
-			setIsDropdownOpen: selectTippy.setIsDropdownOpen,
-			updateQuery: (event: { target: HTMLInputElement }) => {
-				const newValue = event.target.value
-
-				emit(UPDATE_QUERY, newValue === '' ? null : newValue)
-
-				forceUpdate()
-			},
+			onEmit: emit,
 		}
 	},
 })
 </script>
-
-<style lang="scss" scoped>
-.kt-field-select--single-remote {
-	&__wrapper {
-		display: flex;
-		width: 100%;
-		padding: 0;
-		margin: 0;
-		line-height: 1.6;
-		border: 0;
-	}
-}
-</style>
diff --git a/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue b/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue
new file mode 100644
index 0000000000..7871b32036
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue
@@ -0,0 +1,220 @@
+<template>
+	<div>
+		<div ref="tippyTriggerRef">
+			<KtField
+				v-bind="{ field }"
+				class="kt-field-select kt-field-select--single-remote"
+				:getEmptyValue="() => null"
+				:helpTextSlot="$slots.helpText"
+			>
+				<input
+					v-bind="inputProps"
+					@blur="handleInputBlur"
+					@click="handleInputClick"
+					@focus="handleInputFocus"
+					@input="updateQuery"
+				/>
+				<template v-slot:actionIcon="{ classes, handleClear, showClear }">
+					<ActionIconNext
+						v-bind="{
+							classes,
+							handleClear,
+							isDropdownOpen,
+							showClear,
+						}"
+					/>
+				</template>
+			</KtField>
+		</div>
+		<div ref="tippyContentRef">
+			<FieldSelectOptions
+				:actions="actions"
+				:isDisabled="field.isDisabled"
+				:options="filteredOptions"
+				:value="field.currentValue === null ? [] : [field.currentValue]"
+				@close="setIsDropdownOpen(false)"
+				@input="(e) => selectOption(e.length === 0 ? null : e[0])"
+			/>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch } from '@vue/composition-api'
+import { z } from 'zod'
+
+import { KtField } from '../../kotti-field'
+import { KOTTI_FIELD_PROPS } from '../../kotti-field/constants'
+import { useField } from '../../kotti-field/hooks'
+import { useForceUpdate } from '../../kotti-field/hooks'
+import { makeProps } from '../../make-props'
+import {
+	KOTTI_FIELD_REMOTE_SINGLE_SELECT_PROPS,
+	KOTTI_FIELD_REMOTE_SELECT_SUPPORTS,
+} from '../constants'
+import { useSelectTippy } from '../hooks/use-select-tippy'
+import { KottiFieldSingleSelectRemote } from '../types'
+
+import ActionIconNext from './components/ActionIconNext.vue'
+import FieldSelectOptions from './components/Options.vue'
+
+const UPDATE_QUERY = 'update:query'
+
+const isTippyOrInTippy = (element: Element, tippy: Element | null): boolean => {
+	if (tippy === null) return false
+
+	let currentElement = element
+
+	while (currentElement) {
+		if (currentElement.isSameNode(tippy)) return true
+		currentElement = currentElement?.parentElement
+	}
+
+	return false
+}
+
+const isEqualValue = (
+	currentValue: KottiFieldSingleSelectRemote.Value,
+	newValue: KottiFieldSingleSelectRemote.Value,
+) => currentValue === newValue
+
+const propsSchema = z.object({
+	isMultiple: z.boolean().default(false),
+	isRemote: z.boolean().default(false),
+})
+
+export default defineComponent<
+	KottiFieldSingleSelectRemote.Props & z.output<typeof propsSchema>
+>({
+	name: 'FieldGenericSelect',
+	components: {
+		ActionIconNext,
+		FieldSelectOptions,
+		KtField,
+	},
+	props: {
+		...KOTTI_FIELD_PROPS,
+		...KOTTI_FIELD_REMOTE_SINGLE_SELECT_PROPS,
+		query: { default: null, type: String },
+		value: { default: null, type: [Number, String, Boolean] },
+		...makeProps(propsSchema),
+	},
+	setup(props, { emit }) {
+		const field = useField<KottiFieldSingleSelectRemote.Value, string | null>({
+			emit,
+			isCorrectDataType: (value): value is KottiFieldSingleSelectRemote.Value =>
+				['boolean', 'number', 'string', 'symbol'].includes(typeof value) ||
+				value === null,
+			isEmpty: (value) => value === null,
+			props,
+			supports: KOTTI_FIELD_REMOTE_SELECT_SUPPORTS,
+		})
+
+		const localQuery = ref<string | null>(null)
+
+		const selectTippy = useSelectTippy()
+
+		const isInputFocused = ref(false)
+		const selectedLabel = computed((): string | null => {
+			if (field.currentValue === null) return null
+			return (
+				props.options.find((option) => option.value === field.currentValue)
+					?.label ?? null
+			)
+		})
+
+		const { forceUpdateKey, forceUpdate } = useForceUpdate()
+
+		const isUserInteracting = computed(
+			() => isInputFocused.value || selectTippy.isDropdownOpen.value,
+		)
+
+		watch(isUserInteracting, (newValue) => {
+			if (!newValue) emit(UPDATE_QUERY, null)
+		})
+
+		return {
+			field,
+			filteredOptions: computed(() =>
+				props.isRemote
+					? props.options
+					: props.options.filter(
+							(o) =>
+								localQuery.value === null ||
+								o.label.toLowerCase().includes(localQuery.value.toLowerCase()),
+					  ),
+			),
+			handleInputBlur: (event: { relatedTarget: HTMLElement }) => {
+				const blurToElement = event.relatedTarget
+				if (
+					!isTippyOrInTippy(blurToElement, selectTippy.tippyContentRef.value)
+				) {
+					selectTippy.setIsDropdownOpen(false)
+				}
+
+				isInputFocused.value = false
+			},
+			handleInputClick: () => {
+				// always show the dropdown if the input was clicked
+				selectTippy.setIsDropdownOpen(true)
+			},
+			handleInputFocus: () => {
+				// always show the dropdown if the input was focused
+				selectTippy.setIsDropdownOpen(true)
+				isInputFocused.value = true
+			},
+			inputProps: computed(() => ({
+				class: ['kt-field-select--single-remote__wrapper'],
+				forceUpdateKey: forceUpdateKey.value,
+				placeholder: props.placeholder ?? undefined,
+				size: 1,
+				type: 'text',
+				value: (() => {
+					if (isUserInteracting.value) return props.query ?? undefined
+
+					return selectedLabel.value ?? undefined
+				})(),
+			})),
+			isDropdownOpen: selectTippy.isDropdownOpen,
+			tippyContentRef: selectTippy.tippyContentRef,
+			tippyTriggerRef: selectTippy.tippyTriggerRef,
+			selectOption: (
+				value: KottiFieldSingleSelectRemote.Props['options'][number]['value'],
+			) => {
+				// optimization: no need to change the value if it’s already set
+				if (!isEqualValue(field.currentValue, value)) field.setValue(value)
+
+				// close the tippy instance whenever a selection is made
+				selectTippy.setIsDropdownOpen(false)
+
+				// when a selection is made, intentionally reset the query
+				// so that the api-call (for example) can already trigger
+				// and load the non-filtered options
+				emit(UPDATE_QUERY, null)
+			},
+			setIsDropdownOpen: selectTippy.setIsDropdownOpen,
+			updateQuery: ({ target: { value } }: { target: HTMLInputElement }) => {
+				const newValue = value === '' ? null : value
+
+				if (props.isRemote) emit(UPDATE_QUERY, newValue)
+				else localQuery.value = newValue
+
+				forceUpdate()
+			},
+		}
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+.kt-field-select--single-remote {
+	&__wrapper {
+		display: flex;
+		width: 100%;
+		padding: 0;
+		margin: 0;
+		line-height: 1.6;
+		border: 0;
+	}
+}
+</style>