From 9ff35ad2748c6644911b8c7e506252f84f9097e3 Mon Sep 17 00:00:00 2001 From: petruki <31597636+petruki@users.noreply.github.com> Date: Sun, 27 Oct 2024 13:14:44 -0700 Subject: [PATCH] Fixed and improved Smart Search events to use cached result --- .../domain-module/common/detail-component.ts | 2 +- .../element-autocomplete.component.html | 2 +- .../element-autocomplete.component.ts | 49 ++++++++++--------- .../config-detail/config-detail.component.ts | 14 ++++-- .../group-detail/group-detail.component.html | 2 +- .../group-detail/group-detail.component.ts | 10 +++- src/app/home/home.component.html | 2 +- src/app/model/config.ts | 1 + src/app/model/group.ts | 1 + src/app/services/domain.service.ts | 5 +- 10 files changed, 56 insertions(+), 32 deletions(-) diff --git a/src/app/dashboard-module/domain-module/common/detail-component.ts b/src/app/dashboard-module/domain-module/common/detail-component.ts index 77b901ab..e2ab6e09 100644 --- a/src/app/dashboard-module/domain-module/common/detail-component.ts +++ b/src/app/dashboard-module/domain-module/common/detail-component.ts @@ -38,7 +38,7 @@ export class DetailComponent { } protected showResumed(value: string, length: number): string { - return DataUtils.showResumed(value, length); + return DataUtils.showResumed(value, length); } scrollToElement($element: any): void { diff --git a/src/app/dashboard-module/domain-module/common/element-autocomplete/element-autocomplete.component.html b/src/app/dashboard-module/domain-module/common/element-autocomplete/element-autocomplete.component.html index 21a787d9..f3c40707 100644 --- a/src/app/dashboard-module/domain-module/common/element-autocomplete/element-autocomplete.component.html +++ b/src/app/dashboard-module/domain-module/common/element-autocomplete/element-autocomplete.component.html @@ -1,6 +1,6 @@ Smart Search - ; - private query: QueryRef; + private query: Observable>; constructor( private readonly domainService: DomainService ) { } ngOnInit() { + this.searchedValues = this.smartSearchFormControl.valueChanges.pipe( + startWith(''), + map(value => this.filter(value)) + ); + if (this.value) { this.smartSearchFormControl.setValue(this.value); } @@ -42,11 +48,11 @@ export class ElementAutocompleteComponent implements OnInit, OnDestroy { this.unsubscribe.complete(); } - loadComponent() { - if (!this.query) { - this.loadKeys(this.parentComponent.getDomainId()); + loadComponent($event: any) { + if ($event instanceof MouseEvent) { + this.loadKeys(this.parentComponent.getDomainId(), true); } else { - this.query?.refetch(); + this.loadKeys(this.parentComponent.getDomainId()); } } @@ -54,14 +60,15 @@ export class ElementAutocompleteComponent implements OnInit, OnDestroy { return `[${item.name}]: ${item.description}`; } - private loadKeys(domainId: string): void { - if (!domainId) + private loadKeys(domainId: string, forceRefresh = false): void { + if (!domainId) { return; + } this.query = this.domainService.executeConfigurationTreeQuery( - domainId, this.switchers, this.groups, this.components); + domainId, this.switchers, this.groups, this.components, forceRefresh); - this.query.valueChanges.pipe(takeUntil(this.unsubscribe)) + this.query.pipe(takeUntil(this.unsubscribe), debounceTime(500)) .subscribe({ next: result => { if (result?.data?.domain?.group) { @@ -77,16 +84,12 @@ export class ElementAutocompleteComponent implements OnInit, OnDestroy { ConsoleLogger.printError(error); } }); - - this.searchedValues = this.smartSearchFormControl.valueChanges.pipe( - startWith(''), - map(value => this.filter(value)) - ); } - private loadByComponent(groups?: any) { - if (!this.components) + private loadByComponent(groups?: Group[]) { + if (!this.components) { return; + } const filtered = groups?.map( group => group.config?.map(config => { @@ -103,9 +106,10 @@ export class ElementAutocompleteComponent implements OnInit, OnDestroy { this.searchListItems.push(...filtered.flat()); } - private loadBySwitcher(groups: any) { - if (!this.switchers || !groups) + private loadBySwitcher(groups: Group[]) { + if (!this.switchers || !groups) { return; + } const filtered = groups.map( group => group.config?.map(config => { @@ -122,9 +126,10 @@ export class ElementAutocompleteComponent implements OnInit, OnDestroy { this.searchListItems.push(...filtered.flat()); } - private loadByGroup(groups: any) { - if (!this.groups || !groups) + private loadByGroup(groups: Group[]) { + if (!this.groups || !groups) { return; + } const filtered = groups.map(group => { return { diff --git a/src/app/dashboard-module/domain-module/config/config-detail/config-detail.component.ts b/src/app/dashboard-module/domain-module/config/config-detail/config-detail.component.ts index bd9c360a..313da55c 100644 --- a/src/app/dashboard-module/domain-module/config/config-detail/config-detail.component.ts +++ b/src/app/dashboard-module/domain-module/config/config-detail/config-detail.component.ts @@ -111,11 +111,19 @@ export class ConfigDetailComponent extends DetailComponent implements OnInit, On this.domainId = params.domainid; this.domainName = params.name; }); - + this.route.params.subscribe(params => { this.groupId = params.groupid; this.configId = params.configid; - this.loadConfig(); + + const configFromState = this.router.getCurrentNavigation()?.extras.state?.element; + if (configFromState) { + this.config = JSON.parse(configFromState); + this.updateData(this.config); + this.loadStrategies(); + } else { + this.loadConfig(); + } }); this.hasNewStrategy = false; @@ -307,7 +315,7 @@ export class ConfigDetailComponent extends DetailComponent implements OnInit, On if ($event.reloadPermissions) { this.readPermissionToObject(); } - + this.loadStrategies(); this.disableMetrics = this.isMetricDisabled(); } diff --git a/src/app/dashboard-module/domain-module/group/group-detail/group-detail.component.html b/src/app/dashboard-module/domain-module/group/group-detail/group-detail.component.html index a67e5e2a..a3e95b9b 100644 --- a/src/app/dashboard-module/domain-module/group/group-detail/group-detail.component.html +++ b/src/app/dashboard-module/domain-module/group/group-detail/group-detail.component.html @@ -66,7 +66,7 @@ -
+
diff --git a/src/app/dashboard-module/domain-module/group/group-detail/group-detail.component.ts b/src/app/dashboard-module/domain-module/group/group-detail/group-detail.component.ts index 61cfbb64..9bf5d8a8 100644 --- a/src/app/dashboard-module/domain-module/group/group-detail/group-detail.component.ts +++ b/src/app/dashboard-module/domain-module/group/group-detail/group-detail.component.ts @@ -68,8 +68,16 @@ export class GroupDetailComponent extends DetailComponent implements OnInit, OnD }); this.route.params.subscribe(params => { + this.detailBodyStyle = 'detail-body loading'; + this.loading = true; this.groupId = params.groupid; - this.loadGroup(); + + const groupFromState = this.router.getCurrentNavigation()?.extras.state?.element; + if (groupFromState) { + this.updateData(JSON.parse(groupFromState)); + } else { + this.loadGroup(); + } }); } diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 36376b20..5a1a9c23 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -111,7 +111,7 @@

Our team is diverse and vital to keep this project growing.
- As an open-source project, we appreciate any feedback and contribution from the community.
+ As an open-source project, we appreciate any feedback and contribution from the community.

Your support will help us to continue evolving and providing the best Feature Management experience.


diff --git a/src/app/model/config.ts b/src/app/model/config.ts index 276a7c61..f7788df0 100644 --- a/src/app/model/config.ts +++ b/src/app/model/config.ts @@ -1,6 +1,7 @@ import { Admin } from "./admin"; export class Config { + _id: string; id: string; key: string; description: string; diff --git a/src/app/model/group.ts b/src/app/model/group.ts index a5423433..e7b2c6c8 100644 --- a/src/app/model/group.ts +++ b/src/app/model/group.ts @@ -2,6 +2,7 @@ import { Admin } from './admin'; import { Config } from './config'; export class Group { + _id: string; id: string; name: string; description: string; diff --git a/src/app/services/domain.service.ts b/src/app/services/domain.service.ts index b3314987..ebeb2c83 100644 --- a/src/app/services/domain.service.ts +++ b/src/app/services/domain.service.ts @@ -119,9 +119,10 @@ export class DomainService extends ApiService { }); } - public executeConfigurationTreeQuery(domainId: string, switchers: boolean, groups: boolean, components: boolean) { - return this.apollo.watchQuery({ + public executeConfigurationTreeQuery(domainId: string, switchers: boolean, groups: boolean, components: boolean, forceFetch = false) { + return this.apollo.query({ query: configurationTreeQuery(switchers, groups, components), + fetchPolicy: forceFetch ? 'network-only' : 'cache-first', variables: { id: domainId, }