From 9f163ce320e0d9a4331c2109c3cc7396ea736a90 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Fri, 15 Oct 2021 17:20:37 -0400
Subject: [PATCH] Fix choices not showing up in filter (#8839)

---
 .../_system/system-filter/input-component.vue | 19 +++++++++++++
 .../_system/system-filter/input-group.vue     | 27 ++++++++++++++++---
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/app/src/interfaces/_system/system-filter/input-component.vue b/app/src/interfaces/_system/system-filter/input-component.vue
index 61aea8f574..5f1141b47f 100644
--- a/app/src/interfaces/_system/system-filter/input-component.vue
+++ b/app/src/interfaces/_system/system-filter/input-component.vue
@@ -17,6 +17,15 @@
 		placeholder="--"
 		@input="emitValueDebounced($event.target.value)"
 	/>
+	<v-select
+		v-else-if="is === 'select'"
+		inline
+		:items="choices"
+		:model-value="value"
+		allow-other
+		:placeholder="t('select')"
+		@update:model-value="emitValueDebounced($event)"
+	/>
 	<v-menu v-else :close-on-content-click="false" :show-arrow="true" placement="bottom-start">
 		<template #activator="{ toggle }">
 			<v-icon
@@ -45,6 +54,12 @@ import { debounce } from 'lodash';
 import { computed, defineComponent, PropType, ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+type Choice = {
+	text: string;
+	value: string | number;
+	children?: Choice[];
+};
+
 export default defineComponent({
 	props: {
 		is: {
@@ -63,6 +78,10 @@ export default defineComponent({
 			type: Boolean,
 			default: true,
 		},
+		choices: {
+			type: Array as PropType<Choice[]>,
+			default: () => [],
+		},
 	},
 	emits: ['input'],
 	setup(props, { emit }) {
diff --git a/app/src/interfaces/_system/system-filter/input-group.vue b/app/src/interfaces/_system/system-filter/input-group.vue
index 4150e6d98c..279ced462e 100644
--- a/app/src/interfaces/_system/system-filter/input-group.vue
+++ b/app/src/interfaces/_system/system-filter/input-group.vue
@@ -17,7 +17,13 @@
 			].includes(getComparator(field))
 		"
 	>
-		<input-component :is="interfaceType" :type="fieldInfo.type" :value="value" @input="value = $event" />
+		<input-component
+			:is="interfaceType"
+			:choices="fieldInfo.meta?.options?.choices"
+			:type="fieldInfo.type"
+			:value="value"
+			@input="value = $event"
+		/>
 	</template>
 
 	<div
@@ -31,15 +37,28 @@
 				:type="fieldInfo.type"
 				:value="val"
 				:focus="false"
+				:choices="fieldInfo.meta?.options?.choices"
 				@input="setValueAt(index, $event)"
 			/>
 		</div>
 	</div>
 
 	<template v-else-if="['_between', '_nbetween'].includes(getComparator(field))" class="between">
-		<input-component :is="interfaceType" :type="fieldInfo.type" :value="value[0]" @input="setValueAt(0, $event)" />
+		<input-component
+			:is="interfaceType"
+			:choices="fieldInfo.meta?.options?.choices"
+			:type="fieldInfo.type"
+			:value="value[0]"
+			@input="setValueAt(0, $event)"
+		/>
 		<div class="and">{{ t('interfaces.filter.and') }}</div>
-		<input-component :is="interfaceType" :type="fieldInfo.type" :value="value[1]" @input="setValueAt(1, $event)" />
+		<input-component
+			:is="interfaceType"
+			:choices="fieldInfo.meta?.options?.choices"
+			:type="fieldInfo.type"
+			:value="value[1]"
+			@input="setValueAt(1, $event)"
+		/>
 	</template>
 </template>
 
@@ -74,6 +93,8 @@ export default defineComponent({
 		});
 
 		const interfaceType = computed(() => {
+			if (fieldInfo.value?.meta?.options?.choices) return 'select';
+
 			const types: Record<string, string> = {
 				bigInteger: 'input',
 				binary: 'input',