optimize expantion panel by manuall open and make the filter function…

… private #3212
MaibornWolff · Apr 2, 2024 · b45e04a · b45e04a
1 parent 6a3ccd3
commit b45e04a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 14 deletions.
diff --git a/.../customConfigItemGroup/customConfigDescription/filterCustomConfigDataBySearchTerm.pipe.ts b/.../customConfigItemGroup/customConfigDescription/filterCustomConfigDataBySearchTerm.pipe.ts
@@ -1,17 +1,22 @@
 import { Pipe, PipeTransform } from "@angular/core"
 import { CustomConfigItem } from "../../../customConfigs.component"
 
-@Pipe({ name: "filterCustomConfigDataBySearchTerm" })
+@Pipe({
+	name: "filterCustomConfigDataBySearchTerm"
+})
 export class FilterCustomConfigDataBySearchTermPipe implements PipeTransform {
-	transform(customConfigItems: CustomConfigItem[], searchTerm: string) {
+	transform(customConfigItems: CustomConfigItem[], searchTerm: string): CustomConfigItem[] {
 		const lowerCasedSearchTerm = searchTerm.toLocaleLowerCase().trimEnd()
-		return customConfigItems.filter(customConfigItem => {
-			const isSearchTermIncludedInName = customConfigItem.name.toLocaleLowerCase().includes(lowerCasedSearchTerm)
-			const isSearchTermInlcudedInMode = customConfigItem.mapSelectionMode.toLocaleLowerCase().includes(lowerCasedSearchTerm)
-			const isSearchTermIncludedInMetrics = Object.values(customConfigItem.metrics).some(metric =>
-				metric?.toLocaleLowerCase().includes(lowerCasedSearchTerm)
-			)
-			return isSearchTermIncludedInName || isSearchTermInlcudedInMode || isSearchTermIncludedInMetrics
-		})
+		return customConfigItems.filter(item => this.isItemMatchingSearchTerm(item, lowerCasedSearchTerm))
+	}
+
+	private isItemMatchingSearchTerm(customConfigItem: CustomConfigItem, searchTerm: string): boolean {
+		const isSearchTermIncludedInName = customConfigItem.name.toLocaleLowerCase().includes(searchTerm)
+		const isSearchTermIncludedInMode = customConfigItem.mapSelectionMode.toLocaleLowerCase().includes(searchTerm)
+		const isSearchTermIncludedInMetrics = Object.values(customConfigItem.metrics).some(metric =>
+			metric?.toLocaleLowerCase().includes(searchTerm)
+		)
+
+		return isSearchTermIncludedInName || isSearchTermIncludedInMode || isSearchTermIncludedInMetrics
 	}
 }
diff --git a/...i/customConfigs/customConfigList/customConfigItemGroup/customConfigItemGroup.component.ts b/...i/customConfigs/customConfigList/customConfigItemGroup/customConfigItemGroup.component.ts
@@ -17,6 +17,7 @@ export class CustomConfigItemGroupComponent implements OnChanges {
 	@ViewChild("matExpansionPanel") matExpansionPanel: MatExpansionPanel
 	@Input() searchTerm = ""
 	expandedStates: { [key: string]: boolean } = {}
+	manuallyToggled: Set<string> = new Set()
 
 	constructor(
 		private store: Store,
@@ -25,18 +26,30 @@ export class CustomConfigItemGroupComponent implements OnChanges {
 	) {}
 
 	ngOnChanges(changes: SimpleChanges): void {
-		if (changes.searchTerm && changes.searchTerm.currentValue.length > 0) {
-			this.matExpansionPanel.open()
+		if (changes.searchTerm) {
+			if (changes.searchTerm.currentValue.length > 0) {
+				for (const groupKey of Object.keys(this.expandedStates)) {
+					this.expandedStates[groupKey] = true
+				}
+			} else {
+				for (const groupKey of Object.keys(this.expandedStates)) {
+					if (!this.manuallyToggled.has(groupKey)) {
+						this.expandedStates[groupKey] = false
+					}
+				}
+			}
 		}
-		this.expandedStates = {}
 	}
 
 	isGroupExpanded(groupKey: string): boolean {
-		return this.expandedStates[groupKey] || false
+		return this.searchTerm.length > 0
+			? !this.manuallyToggled.has(groupKey) || this.expandedStates[groupKey]
+			: this.expandedStates[groupKey] || false
 	}
 
 	toggleGroupExpansion(groupKey: string): void {
 		this.expandedStates[groupKey] = !this.isGroupExpanded(groupKey)
+		this.manuallyToggled.add(groupKey)
 	}
 	removeCustomConfig(configId: string, groupKey: string) {
 		CustomConfigHelper.deleteCustomConfig(configId)