From a7b1f5b15d1cc986f887fd01db349b4b005d3f29 Mon Sep 17 00:00:00 2001 From: Unai Zalba Date: Wed, 27 Nov 2024 15:35:23 +0100 Subject: [PATCH 1/2] fix/AB#106122_ABC-resource-question-display-glitches fix: initialize resource query on component mount, not on component open --- .../resource-select/resource-select.component.ts | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/libs/shared/src/lib/components/controls/resource-select/resource-select.component.ts b/libs/shared/src/lib/components/controls/resource-select/resource-select.component.ts index 4fb555a4d1..7e13d83b65 100644 --- a/libs/shared/src/lib/components/controls/resource-select/resource-select.component.ts +++ b/libs/shared/src/lib/components/controls/resource-select/resource-select.component.ts @@ -80,17 +80,7 @@ export class ResourceSelectComponent extends GraphQLSelectComponent { this.valueField = 'id'; this.textField = 'name'; this.filterable = true; - this.searchChange.pipe(takeUntil(this.destroy$)).subscribe((value) => { - this.onSearchChange(value); - }); - } - - /** - * Override GraphQLSelectComponent onOpenSelect to only load query when - * select menu is open for the first time. - * - */ - public override onOpenSelect(): void { + /** Initialize resource query with the component automatically*/ if (!this.query) { this.query = this.apollo.watchQuery({ query: GET_RESOURCES, @@ -107,7 +97,9 @@ export class ResourceSelectComponent extends GraphQLSelectComponent { this.updateValues(data, loading); }); } - super.onOpenSelect(); + this.searchChange.pipe(takeUntil(this.destroy$)).subscribe((value) => { + this.onSearchChange(value); + }); } /** From 68b4448157e22739424a6c96f22a58715988a3c7 Mon Sep 17 00:00:00 2001 From: Unai Zalba Date: Fri, 29 Nov 2024 16:14:17 +0100 Subject: [PATCH 2/2] fix/AB#106122_ABC-resource-question-display-glitches feat: remove unseful query subscription from the extended graphql component fix: update of values for outside of list elements in the resource dropdown for survey by always reassigning selected values from the list in the graphql component feat: improve the selectedResource property to avoid undefined trash values --- .../resource-select.component.ts | 7 ------ .../resource-dropdown.component.html | 2 +- .../resource-dropdown.component.ts | 25 ++++++++++--------- .../graphql-select.component.ts | 7 +++--- 4 files changed, 18 insertions(+), 23 deletions(-) diff --git a/libs/shared/src/lib/components/controls/resource-select/resource-select.component.ts b/libs/shared/src/lib/components/controls/resource-select/resource-select.component.ts index 7e13d83b65..f668376c5a 100644 --- a/libs/shared/src/lib/components/controls/resource-select/resource-select.component.ts +++ b/libs/shared/src/lib/components/controls/resource-select/resource-select.component.ts @@ -89,13 +89,6 @@ export class ResourceSelectComponent extends GraphQLSelectComponent { sortField: 'name', }, }); - - this.query.valueChanges - .pipe(takeUntil(this.queryChange$), takeUntil(this.destroy$)) - .subscribe(({ data, loading }) => { - this.queryName = Object.keys(data)[0]; - this.updateValues(data, loading); - }); } this.searchChange.pipe(takeUntil(this.destroy$)).subscribe((value) => { this.onSearchChange(value); diff --git a/libs/shared/src/lib/survey/components/resource-dropdown/resource-dropdown.component.html b/libs/shared/src/lib/survey/components/resource-dropdown/resource-dropdown.component.html index 153e2931fa..c0e069f5e9 100644 --- a/libs/shared/src/lib/survey/components/resource-dropdown/resource-dropdown.component.html +++ b/libs/shared/src/lib/survey/components/resource-dropdown/resource-dropdown.component.html @@ -3,7 +3,7 @@ diff --git a/libs/shared/src/lib/survey/components/resource-dropdown/resource-dropdown.component.ts b/libs/shared/src/lib/survey/components/resource-dropdown/resource-dropdown.component.ts index 7f74858dd0..e010b5d3f9 100644 --- a/libs/shared/src/lib/survey/components/resource-dropdown/resource-dropdown.component.ts +++ b/libs/shared/src/lib/survey/components/resource-dropdown/resource-dropdown.component.ts @@ -6,15 +6,15 @@ import { } from '@angular/core'; import { UntypedFormControl } from '@angular/forms'; import { Apollo } from 'apollo-angular'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { QuestionAngular } from 'survey-angular-ui'; import { Resource, ResourceQueryResponse, } from '../../../models/resource.model'; import { GET_SHORT_RESOURCE_BY_ID } from './graphql/queries'; -import { takeUntil } from 'rxjs/operators'; -import { QuestionAngular } from 'survey-angular-ui'; import { QuestionResourceDropdownModel } from './resource-dropdown.model'; -import { Subject } from 'rxjs'; /** * This component is used to create a dropdown where the user can select a resource. @@ -29,7 +29,7 @@ export class ResourceDropdownComponent implements OnInit { /** Selected resource */ - public selectedResource?: Resource; + public selectedResource: Resource[] = []; /** Resource control */ public resourceControl!: UntypedFormControl; @@ -54,13 +54,6 @@ export class ResourceDropdownComponent override ngOnInit(): void { super.ngOnInit(); - this.resourceControl = new UntypedFormControl(this.model.value ?? ''); - this.resourceControl.valueChanges - .pipe(takeUntil(this.destroy$)) - .subscribe((value) => { - this.model.value = value; - this.model.obj.gridFieldsSettings = null; - }); if (this.model.value) { this.apollo .query({ @@ -71,9 +64,17 @@ export class ResourceDropdownComponent }) .subscribe(({ data }) => { if (data.resource) { - this.selectedResource = data.resource; + this.selectedResource = [data.resource]; + this.changeDetectorRef.detectChanges(); } }); } + this.resourceControl = new UntypedFormControl(this.model.value ?? ''); + this.resourceControl.valueChanges + .pipe(takeUntil(this.destroy$)) + .subscribe((value) => { + this.model.value = value; + this.model.obj.gridFieldsSettings = null; + }); } } diff --git a/libs/ui/src/lib/graphql-select/graphql-select.component.ts b/libs/ui/src/lib/graphql-select/graphql-select.component.ts index 4621f961a1..746d77e8e2 100644 --- a/libs/ui/src/lib/graphql-select/graphql-select.component.ts +++ b/libs/ui/src/lib/graphql-select/graphql-select.component.ts @@ -533,9 +533,10 @@ export class GraphQLSelectComponent const selectedElements = this.selectedElements.filter( (selectedElement) => selectedElement && - !elements.find( - (node) => node[this.valueField] === selectedElement[this.valueField] - ) + (this.isSurveyQuestion || + !elements.find( + (node) => node[this.valueField] === selectedElement[this.valueField] + )) ); this.cachedElements = updateQueryUniqueValues(this.cachedElements, [ ...selectedElements,