From ad7d39203fef849da4ebc0cd2913445573fd8aa1 Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Wed, 29 Jun 2022 03:06:18 +0800
Subject: [PATCH] Fix v-select search & selection of groups (#14154)

* fix search not matching parent items

* make group selectable in v-select

* fix wrong prop name

* set selected group to active for highlighted style

* Fix typings

Co-authored-by: ian <licitdev@gmail.com>
---
 .../v-select/select-list-item-group.vue       | 35 +++++++++++++++++--
 .../components/v-select/select-list-item.vue  | 19 ++++++++--
 app/src/components/v-select/v-select.vue      | 14 ++++++--
 .../_system/system-filter/input-component.vue |  1 +
 4 files changed, 63 insertions(+), 6 deletions(-)

diff --git a/app/src/components/v-select/select-list-item-group.vue b/app/src/components/v-select/select-list-item-group.vue
index e68bbfb05b..8e7f028e4f 100644
--- a/app/src/components/v-select/select-list-item-group.vue
+++ b/app/src/components/v-select/select-list-item-group.vue
@@ -1,5 +1,11 @@
 <template>
-	<v-list-group :clickable="item.selectable" :open="item.children?.length === 1" :value="item.value">
+	<v-list-group
+		:active="isActive"
+		:clickable="groupSelectable || item.selectable"
+		:open="item.children?.length === 1"
+		:value="item.value"
+		@click="onGroupClick(item)"
+	>
 		<template #activator>
 			<v-list-item-icon v-if="multiple === false && allowOther === false && item.icon">
 				<v-icon :name="item.icon" />
@@ -24,6 +30,7 @@
 				:model-value="modelValue"
 				:multiple="multiple"
 				:allow-other="allowOther"
+				:group-selectable="groupSelectable"
 				@update:model-value="$emit('update:modelValue', $event)"
 			/>
 			<select-list-item
@@ -39,7 +46,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import { computed, defineComponent, PropType } from 'vue';
 import { Option } from './types';
 import SelectListItem from './select-list-item.vue';
 
@@ -63,7 +70,31 @@ export default defineComponent({
 			type: Boolean,
 			required: true,
 		},
+		groupSelectable: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	emits: ['update:modelValue'],
+	setup(props, { emit }) {
+		const isActive = computed(() => {
+			if (props.multiple) {
+				if (!Array.isArray(props.modelValue) || !props.item.value) {
+					return false;
+				}
+				return props.modelValue.includes(props.item.value);
+			} else {
+				return props.modelValue === props.item.value;
+			}
+		});
+
+		return { isActive, onGroupClick };
+
+		function onGroupClick(item: Option) {
+			if (!props.groupSelectable) return;
+
+			emit('update:modelValue', item.value);
+		}
+	},
 });
 </script>
diff --git a/app/src/components/v-select/select-list-item.vue b/app/src/components/v-select/select-list-item.vue
index b6483b34be..0983516e04 100644
--- a/app/src/components/v-select/select-list-item.vue
+++ b/app/src/components/v-select/select-list-item.vue
@@ -3,7 +3,7 @@
 
 	<v-list-item
 		v-else
-		:active="multiple ? (modelValue || []).includes(item.value) : modelValue === item.value"
+		:active="isActive"
 		:disabled="item.disabled"
 		clickable
 		:value="item.value"
@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import { computed, defineComponent, PropType } from 'vue';
 import { Option } from './types';
 
 export default defineComponent({
@@ -51,5 +51,20 @@ export default defineComponent({
 		},
 	},
 	emits: ['update:modelValue'],
+	setup(props) {
+		const isActive = computed(() => {
+			if (props.multiple) {
+				if (!Array.isArray(props.modelValue) || !props.item.value) {
+					return false;
+				}
+				return props.modelValue.includes(props.item.value);
+			} else {
+				return props.modelValue === props.item.value;
+			}
+		});
+		return {
+			isActive,
+		};
+	},
 });
 </script>
diff --git a/app/src/components/v-select/v-select.vue b/app/src/components/v-select/v-select.vue
index e92cda5bba..5f51411cbc 100644
--- a/app/src/components/v-select/v-select.vue
+++ b/app/src/components/v-select/v-select.vue
@@ -65,6 +65,7 @@
 					:model-value="modelValue"
 					:multiple="multiple"
 					:allow-other="allowOther"
+					:group-selectable="groupSelectable"
 					@update:model-value="$emit('update:modelValue', $event)"
 				/>
 				<select-list-item
@@ -178,6 +179,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		groupSelectable: {
+			type: Boolean,
+			default: false,
+		},
 		mandatory: {
 			type: Boolean,
 			default: true,
@@ -292,8 +297,13 @@ export default defineComponent({
 					const searchValue = internalSearch.value.toLowerCase();
 
 					return item?.children
-						? item.children.some((item: Record<string, any>) => filterItem(item))
-						: item.text?.toLowerCase().includes(searchValue) || item.value?.toLowerCase().includes(searchValue);
+						? isMatchingCurrentItem(item, searchValue) ||
+								item.children.some((item: Record<string, any>) => filterItem(item))
+						: isMatchingCurrentItem(item, searchValue);
+
+					function isMatchingCurrentItem(item: Record<string, any>, searchValue: string): boolean {
+						return item.text?.toLowerCase().includes(searchValue) || item.value?.toLowerCase().includes(searchValue);
+					}
 				};
 
 				const items = internalSearch.value ? props.items.filter(filterItem).map(parseItem) : props.items.map(parseItem);
diff --git a/app/src/interfaces/_system/system-filter/input-component.vue b/app/src/interfaces/_system/system-filter/input-component.vue
index 51648348fd..595f288b26 100644
--- a/app/src/interfaces/_system/system-filter/input-component.vue
+++ b/app/src/interfaces/_system/system-filter/input-component.vue
@@ -24,6 +24,7 @@
 		:model-value="value"
 		:placeholder="t('select')"
 		allow-other
+		group-selectable
 		@update:model-value="emitValue($event)"
 	/>
 	<template v-else-if="is === 'interface-datetime'">