refactor description listing filters

frontend/src/app/ui/description/listing/description-listing.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
+import { FormBuilder, UntypedFormBuilder, Validators } from '@angular/forms';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
@@ -281,16 +281,17 @@ export class DescriptionListingComponent extends BaseListingComponent<BaseDescri
 		});
 
 		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
-			if (result) {
+			if (!result) return;
-				this.updateDataFn(result);
+
-			}
+			this.updateDataFn(result);
 		});
 	}
 
 	updateDataFn(filters: DescriptionListingFilters): void {
 		this.referenceFilters = this._patchReferenceFilters(filters);
-		this.lookup = this._patchLookupFromFilters(filters);
+		this._patchLookupFromFilters(filters);
 		this.filtersCount = this._countFilters(this.lookup);
+		this.isLoading = false;
 		this.filterChanged(this.lookup)
 	}
 
@@ -412,12 +413,10 @@ export class DescriptionListingComponent extends BaseListingComponent<BaseDescri
 	}
 
 	_patchLookupFromFilters(filters: DescriptionListingFilters): DescriptionLookup {
-		if (!filters) return;
+		this.lookup.statuses = filters?.status != null ? [filters?.status] : null;
-
-		this.lookup.statuses = filters.status !== null ? [filters.status] : null;
 
 		// Tenants
-		let viewOnlyTenant = filters.viewOnlyTenant ?? false;
+		let viewOnlyTenant = filters?.viewOnlyTenant ?? false;
 		if (viewOnlyTenant) {
 				let tenant = this.tenants?.find(t => t.code && t.code?.toString() == this.authService.selectedTenant());
 				if (tenant && tenant?.code) {
@@ -428,35 +427,33 @@ export class DescriptionListingComponent extends BaseListingComponent<BaseDescri
 		} else this.lookup.tenantSubQuery = null;
 		
 		// Description Templates
-		let descriptionTemplates = filters.descriptionTemplates ?? null;
+		let descriptionTemplates = filters?.descriptionTemplates ?? null;
 		if (descriptionTemplates && descriptionTemplates?.length > 0) {
 			this.lookup.descriptionTemplateSubQuery = DescriptionFilterService.initializeDescriptionTemplateLookup();
 			this.lookup.descriptionTemplateSubQuery.ids = descriptionTemplates;
 		} else this.lookup.descriptionTemplateSubQuery = null;
 
 		// Plans
-		let plans = filters.associatedPlanIds ?? null; let addPlans = plans && plans?.length > 0;
+		if (filters?.role || filters?.associatedPlanIds?.length) {
-		let roles = filters.role !== null ? [filters.role] : null; let addRoles = roles && roles?.length > 0;
-		if (addPlans || addRoles) {
 			this.lookup.planSubQuery = DescriptionFilterService.initializePlanLookup();
 
-			if (addPlans) this.lookup.planSubQuery.ids = plans?.length > 0 ? plans : null;
+			if (filters?.associatedPlanIds?.length) this.lookup.planSubQuery.ids = filters?.associatedPlanIds ?? null;
 
-			if (addRoles) {
+			if (filters?.role) {
 				this.lookup.planSubQuery.planUserSubQuery = DescriptionFilterService.initializePlanUserLookup();
-				this.lookup.planSubQuery.planUserSubQuery.userRoles = roles;
+				this.lookup.planSubQuery.planUserSubQuery.userRoles = [filters?.role];
 			}
 		} else this.lookup.planSubQuery = null;
 
 		// Tags
-		let tags = filters.tags ?? null;
+		let tags = filters?.tags ?? null;
 		if (tags && tags?.length > 0) {
 			this.lookup.descriptionTagSubQuery = DescriptionFilterService.initializeTagLookup();
 			this.lookup.descriptionTagSubQuery.tagIds = tags;
 		} else this.lookup.descriptionTagSubQuery = null;
 
 		// References
-		let references: Guid[] = filters.references
+		let references: Guid[] = filters?.references
 				?.filter((reference: ReferencesWithType) => reference.referenceTypeId != null && reference.referenceIds?.length > 0)
 				?.flatMap((referencesWithType: ReferencesWithType) => referencesWithType.referenceIds) as Guid[];
 
@@ -469,7 +466,7 @@ export class DescriptionListingComponent extends BaseListingComponent<BaseDescri
 	}
 
 	_patchReferenceFilters(filters: DescriptionListingFilters): ReferencesWithType[] {
-		return filters.references?.filter(( referencesWithType: ReferencesWithType ) => referencesWithType.referenceTypeId != null && referencesWithType.referenceIds?.length > 0) ?? null;
+		return filters?.references?.filter(( referencesWithType: ReferencesWithType ) => referencesWithType.referenceTypeId != null && referencesWithType.referenceIds?.length > 0) ?? null;
 	}
 
 	private _countFilters(lookup: DescriptionLookup): number {

frontend/src/app/ui/description/listing/filtering/description-filter-dialogue/description-filter-dialog.component.html

@@ -1,8 +1,7 @@
 
 <a class="col-auto d-flex pointer" (click)="onClose()"><span class="ml-auto mt-3 material-icons clear-icon">clear</span></a>
 <app-description-filter-component 
-  [filterFormGroup]="formGroup"
+  [filters]="filters"
-  [referencesWithTypeItems]="data.referencesWithTypeItems"
   [isPublic]="data.isPublic"
   [hasSelectedTenant]="data.hasSelectedTenant"
   (filterChanged)="onFilterChanged($event)" 

frontend/src/app/ui/description/listing/filtering/description-filter-dialogue/description-filter-dialog.component.ts

@@ -1,8 +1,7 @@
 import { Component, Inject, OnInit, ViewChild } from '@angular/core';
-import { FormGroup, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { AnalyticsService } from '@app/core/services/matomo/analytics-service';
-import { DescriptionFilterComponent, DescriptionListingFilterForm, DescriptionListingFilters } from '../description-filter.component';
+import { DescriptionFilterComponent, DescriptionListingFilters } from '../description-filter.component';
 import { DescriptionLookup, ReferencesWithType } from '@app/core/query/description.lookup';
 
 @Component({
@@ -15,7 +14,7 @@ export class DescriptionFilterDialogComponent implements OnInit {
 
 	@ViewChild(DescriptionFilterComponent, { static: true }) filter: DescriptionFilterComponent;
 
-	formGroup: FormGroup<DescriptionListingFilterForm>;
+	filters: DescriptionListingFilters;
 
 	constructor(
 		public dialogRef: MatDialogRef<DescriptionFilterComponent>,
@@ -27,7 +26,7 @@ export class DescriptionFilterDialogComponent implements OnInit {
 			referencesWithTypeItems: ReferencesWithType[],
 		}
 	) { 
-		this.formGroup = this._buildFormFromLookup(data?.lookup);
+		this.filters = this._buildDescriptionFilters(data?.lookup, data?.referencesWithTypeItems);
 	}
 
 	ngOnInit() {
@@ -42,18 +41,19 @@ export class DescriptionFilterDialogComponent implements OnInit {
 		this.dialogRef.close();
 	}
 
-	onFilterChanged(formGroup: UntypedFormGroup) {
+	onFilterChanged(filters: DescriptionListingFilters) {
-		this.dialogRef.close(formGroup.value as DescriptionListingFilters);
+		this.dialogRef.close(filters);
 	}
 
-	private _buildFormFromLookup(lookup: DescriptionLookup): FormGroup<DescriptionListingFilterForm> {
+	private _buildDescriptionFilters(lookup: DescriptionLookup, references: ReferencesWithType[]): DescriptionListingFilters {
-		return (new UntypedFormBuilder()).group({
+		return {
-			status: [lookup.statuses?.length > 0 ? lookup.statuses[0] : null],
+			status: lookup.statuses?.[0] ?? null,
-			viewOnlyTenant: [lookup.tenantSubQuery?.codes?.length > 0 ? true : false],
+			viewOnlyTenant: lookup.tenantSubQuery?.codes?.length > 0,
-			role:  lookup.planSubQuery?.planUserSubQuery?.userRoles ? lookup.planSubQuery?.planUserSubQuery?.userRoles[0] : [],
+			role:  lookup.planSubQuery?.planUserSubQuery?.userRoles?.[0] ?? null,
-			descriptionTemplates: lookup.descriptionTemplateSubQuery?.ids ? [lookup.descriptionTemplateSubQuery?.ids] : [],
+			descriptionTemplates: lookup.descriptionTemplateSubQuery?.ids ?? [],
-			associatedPlanIds: lookup.planSubQuery?.ids ? [lookup.planSubQuery?.ids] : [],
+			associatedPlanIds: lookup.planSubQuery?.ids ?? [],
-			tags: lookup.descriptionTagSubQuery?.tagIds ? [lookup.descriptionTagSubQuery?.tagIds] : [],
+			tags: lookup.descriptionTagSubQuery?.tagIds ?? [],
-		});
+			references: references ?? []
+		};
 	}
 }

frontend/src/app/ui/description/listing/filtering/description-filter.component.html

@@ -88,7 +88,7 @@
 			<!-- Reference Types -->
 			<div class="col-10 mb-1">
 				<h6 class="category-title">{{'DESCRIPTION-LISTING.FILTERS.REFERENCE-TYPES.NAME' | translate }}</h6>
-				<ng-container *ngFor="let referenceForm of filterFormGroup.get('references')?.controls; let i=index">
+				<ng-container *ngFor="let referenceForm of formGroup.get('references')?.controls; let i=index">
 					<div class="row">
 						<div class="col-12">
 							<mat-form-field class="w-100" *ngIf="referenceForm.get('referenceTypeId')">
@@ -98,7 +98,7 @@
 							</mat-form-field>
 						</div>
 					</div>
-					<div class="row" *ngIf="referenceForm.get('referenceTypeId')?.value">
+					<div class="row" *ngIf="referenceForm.get('referenceTypeId')?.value && selectReferenceAutocompleteConfiguration(referenceForm.get('referenceTypeId').value)">
 						<div class="col-12">
 							<mat-form-field class="w-100 mb-2">
 								<mat-label>{{'DESCRIPTION-LISTING.FILTERS.REFERENCE-TYPES.REFERENCE' | translate}}</mat-label>
@@ -126,7 +126,11 @@
 			</div>
 			<!-- End of Reference Types -->
 
-			<div class="col-auto ml-auto mb-4">
+			<div class="col-10 d-flex justify-content-between mb-4">
+				<button mat-button class="normal-btn-sm rounded-btn secondary" (click)="resetFilters()" style="font-size: 0.87rem;">
+					{{'DESCRIPTION-LISTING.FILTERS.RESET-FILTERS' | translate}} 
+				</button>
+
 				<button class="normal-btn-sm" (click)="controlModified()">
 					{{'DESCRIPTION-LISTING.FILTERS.APPLY-FILTERS' | translate}}
 				</button>

frontend/src/app/ui/description/listing/filtering/description-filter.component.ts

@@ -1,6 +1,6 @@
 
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { AbstractControl, FormArray, FormBuilder, FormControl, UntypedFormArray, UntypedFormGroup } from '@angular/forms';
+import { FormArray, FormControl, FormGroup, UntypedFormGroup } from '@angular/forms';
 import { DescriptionStatusEnum } from '@app/core/common/enum/description-status';
 import { PlanUserRole } from '@app/core/common/enum/plan-user-role';
 import { ReferenceType } from '@app/core/model/reference-type/reference-type';
@@ -18,10 +18,9 @@ import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/mu
 import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
 import { BaseCriteriaComponent } from '@app/ui/misc/criteria/base-criteria.component';
 import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model';
-import { QueryResult } from '@common/model/query-result';
 import { Guid } from '@common/types/guid';
 import { IsActive } from '@notification-service/core/enum/is-active.enum';
-import { takeUntil } from 'rxjs/operators';
+import { map, takeUntil } from 'rxjs/operators';
 import { nameof } from 'ts-simple-nameof';
 
 @Component({
@@ -29,13 +28,22 @@ import { nameof } from 'ts-simple-nameof';
 	templateUrl: './description-filter.component.html',
 	styleUrls: ['./description-filter.component.scss']
 })
-export class DescriptionFilterComponent extends BaseCriteriaComponent<any> implements OnInit, OnChanges {
+export class DescriptionFilterComponent extends BaseCriteriaComponent<DescriptionListingFilterForm> implements OnInit {
 
-	@Input() status;
 	@Input() isPublic: boolean;
 	@Input() hasSelectedTenant: boolean;
-	@Input() referencesWithTypeItems: ReferencesWithType[];
+
-	@Input() filterFormGroup: UntypedFormGroup;
+	private _filters: DescriptionListingFilters;
+	@Input() set filters(v: DescriptionListingFilters) {
+		if (v) {
+			this._filters = v;
+			this.buildForm(v);
+		}
+	}
+	get filters(): DescriptionListingFilters {
+		return this._filters;
+	}
+
 	@Output() filterChanged: EventEmitter<any> = new EventEmitter();
 
 	public criteria: any;
@@ -45,11 +53,11 @@ export class DescriptionFilterComponent extends BaseCriteriaComponent<any> imple
 	planRole = PlanUserRole;
 	options: UntypedFormGroup;
 
-	descriptionTemplateAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
+	descriptionTemplateAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = this.descriptionTemplateService.buildMultipleAutocompleteConfiguration();
-	planAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
+	planAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = this.planService.multipleAutocompleteConfiguration;
-	tagAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
+	tagAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = this.tagService.multipleAutocompleteConfiguration;
-	referenceTypeAutocompleteConfiguration: SingleAutoCompleteConfiguration;
+	referenceTypeAutocompleteConfiguration: SingleAutoCompleteConfiguration = this.getReferenceTypeAutocompleteConfiguration();
-	referenceAutocompleteConfiguration: Map<string, MultipleAutoCompleteConfiguration>;
+	referenceAutocompleteConfiguration: Map<Guid, MultipleAutoCompleteConfiguration>;
 
 	constructor(
 		public enumUtils: EnumUtils,
@@ -59,7 +67,6 @@ export class DescriptionFilterComponent extends BaseCriteriaComponent<any> imple
 		private tagService: TagService,
 		private referenceService: ReferenceService,
 		private referenceTypeService: ReferenceTypeService,
-		private formBuilder: FormBuilder,
 	) {
 		super(new ValidationErrorModel());
 	}
@@ -68,78 +75,78 @@ export class DescriptionFilterComponent extends BaseCriteriaComponent<any> imple
 		super.ngOnInit();
 	}
 
-	ngOnChanges(changes: SimpleChanges): void {
+	buildForm(filters: DescriptionListingFilters) {
-		if (changes['filterFormGroup']) {
+		this.formGroup = new FormGroup<DescriptionListingFilterForm>({
-			
+			status: new FormControl(filters?.status),
-			this.descriptionTemplateAutoCompleteConfiguration = this.descriptionTemplateService.buildMultipleAutocompleteConfiguration();
+			viewOnlyTenant: new FormControl(filters.viewOnlyTenant),
-			this.planAutoCompleteConfiguration = this.planService.multipleAutocompleteConfiguration;
+			role: new FormControl(filters.role),
-			this.tagAutoCompleteConfiguration = this.tagService.multipleAutocompleteConfiguration;
+			descriptionTemplates: new FormControl(filters.descriptionTemplates),
-			this.referenceTypeAutocompleteConfiguration = this.getReferenceTypeAutocompleteConfiguration();
+			associatedPlanIds: new FormControl(filters.associatedPlanIds),
-			this.referenceAutocompleteConfiguration = new Map<string, MultipleAutoCompleteConfiguration>();
+			tags: new FormControl(filters.tags),
-
+			references: new FormArray([])
-			this.formGroup = this.filterFormGroup;
-
-			this.referencesWithTypeItems.forEach((referencesWithType: ReferencesWithType) => {
-		
-				if (referencesWithType.referenceTypeId) {
-					this.addReferenceType(referencesWithType.referenceTypeId.toString(), referencesWithType.referenceIds.map(x => x.toString()));
-				}
-				else if (referencesWithType.referenceIds && referencesWithType.referenceIds?.length > 0) {
-					this.referenceService.query(this._referenceLookup(referencesWithType.referenceIds)).pipe(takeUntil(this._destroyed))
-					.subscribe((result: QueryResult<Reference>) => {
-						const references: Reference[] = result.items;
-
-						const groupedReferencesByTypeIds = new Map<string, string[]>();
-						references.forEach(reference => {
-							if (!groupedReferencesByTypeIds.has(reference.type.id.toString())) groupedReferencesByTypeIds.set(reference.type.id.toString(), []);
-
-							groupedReferencesByTypeIds.get(reference.type.id.toString()).push(reference.id.toString());
-						});
-
-						groupedReferencesByTypeIds.forEach((referenceIds: string[], referenceId: string) => {
-							this.addReferenceType(referenceId, referenceIds);
-						});
-					});
-				}
-			});
-		}
-	}
-
-	addReferenceType(referenceTypeId: string = null, referenceIds: string[] = null): void {
-		if (!this.formGroup.get('references')) this.formGroup.addControl('references', this.formBuilder.array([]));
-
-		const formArray = this.formGroup.get('references') as UntypedFormArray;
-
-		const referenceForm = this.formBuilder.group({
-			referenceTypeId: referenceTypeId,
-			referenceIds: referenceIds ? [referenceIds] : null,
 		});
 
-		if (referenceTypeId && referenceTypeId != '' && referenceIds && referenceIds.length > 0) {
+		this.referenceAutocompleteConfiguration = new Map<Guid, MultipleAutoCompleteConfiguration>();
-			let referenceAutocomplete = this.getReferenceAutocompleteConfiguration(Guid.parse(referenceTypeId));
+
+		filters?.references?.forEach((item: ReferencesWithType) => {
+	
+			if (item.referenceTypeId) {
+				this.addReferenceType(item.referenceTypeId, item.referenceIds);
+			}
+			else if (item.referenceIds && item.referenceIds?.length > 0) {
+				this.referenceService.query(this._referenceLookup(item.referenceIds)).pipe(takeUntil(this._destroyed), map((x) => x.items))
+				.subscribe((references: Reference[]) => {
+					const types = new Set(references.map((x) => x.type.id));
+
+					types.forEach((typeId) => {
+						const referenceIds = references.filter((x) => x.type.id === typeId).map(x => x.id);
+						this.addReferenceType(typeId, referenceIds);
+					});
+				});
+			}
+		});
+	}
+
+	resetFilters() {
+		this.formGroup.reset();
+		this.formGroup.patchValue({
+			status: null,
+			viewOnlyTenant: null,
+			role: null,
+			descriptionTemplates: null,
+			associatedPlanIds: null,
+			tags: null,
+			references: null
+		});
+		this.referenceAutocompleteConfiguration.clear();
+	}
+
+	addReferenceType(referenceTypeId: Guid = null, referenceIds: Guid[] = null): void {
+		const referenceForm = new FormGroup<DescriptionListingFilterReferencesForm>({
+			referenceTypeId: new FormControl(referenceTypeId),
+			referenceIds: new FormControl(referenceIds ? referenceIds : []),
+		});
+
+		if (referenceTypeId && referenceIds?.length) {
+			let referenceAutocomplete = this.getReferenceAutocompleteConfiguration(referenceTypeId);
 			this.referenceAutocompleteConfiguration.set(referenceTypeId, referenceAutocomplete);
-		}
+		}		
 
 		this._registerReferenceTypeListener(referenceForm);
 		this._registerReferencesListener(referenceForm);
 		
-		formArray.push(referenceForm);
+		this.formGroup.controls.references.push(referenceForm);
 	}
 
 	deleteRow(index: number): void {
-		const formArray = this.formGroup.get('references') as UntypedFormArray;
+		const formArray = this.formGroup.controls.references;
 
 		formArray.removeAt(index);
 	}
 
 	controlModified(): void {
 		this.clearErrorModel();
-		this.filterChanged.emit(this.formGroup);
+		this.filterChanged.emit(this.formGroup.value as DescriptionListingFilters);
-		if (this.refreshCallback != null &&
-			(this.formGroup.get('like')?.value == null || this.formGroup.get('like')?.value.length === 0 || this.formGroup.get('like')?.value.length > 2)
-		) {
-			setTimeout(() => this.refreshCallback(true));
-		}
 	}
 
 	isAuthenticated(): boolean {
@@ -150,7 +157,7 @@ export class DescriptionFilterComponent extends BaseCriteriaComponent<any> imple
 		return this.referenceTypeService.getSingleAutocompleteConfiguration();
 	};
 
-	selectReferenceAutocompleteConfiguration(referenceTypeId: string): MultipleAutoCompleteConfiguration {
+	selectReferenceAutocompleteConfiguration(referenceTypeId: Guid): MultipleAutoCompleteConfiguration {
 		return this.referenceAutocompleteConfiguration.get(referenceTypeId);
 	};
 
@@ -176,26 +183,26 @@ export class DescriptionFilterComponent extends BaseCriteriaComponent<any> imple
 		return lookup;
 	}
 
-	private _registerReferenceTypeListener(control: AbstractControl) {
+	private _registerReferenceTypeListener(formGroup: FormGroup<DescriptionListingFilterReferencesForm>) {
-		control.get('referenceTypeId')?.valueChanges.pipe(takeUntil(this._destroyed))
+		formGroup.controls.referenceTypeId?.valueChanges.pipe(takeUntil(this._destroyed))
-			.subscribe((referenceTypeId: string) => {
+			.subscribe((referenceTypeId: Guid) => {
 				this.referenceTypeAutocompleteConfiguration = this.getReferenceTypeAutocompleteConfiguration();
-				control.get('referenceIds')?.reset();
+				formGroup.controls.referenceIds?.reset();
 
-				if (referenceTypeId && referenceTypeId != '') {
+				if (referenceTypeId) {
-					let referenceAutocomplete = this.getReferenceAutocompleteConfiguration(Guid.parse(referenceTypeId));
+					let referenceAutocomplete = this.getReferenceAutocompleteConfiguration(referenceTypeId);
 					this.referenceAutocompleteConfiguration.set(referenceTypeId, referenceAutocomplete);
 				}
 			});
 	}
 
-	private _registerReferencesListener(control: AbstractControl) {
+	private _registerReferencesListener(formGroup: FormGroup<DescriptionListingFilterReferencesForm>) {
-		control.get('referenceIds')?.valueChanges.pipe(takeUntil(this._destroyed))
+		formGroup.controls.referenceIds?.valueChanges.pipe(takeUntil(this._destroyed))
 			.subscribe(references => {
-				let referenceTypeId = control.get('referenceTypeId').value;
+				let referenceTypeId = formGroup.controls.referenceTypeId.value;
 				if (!referenceTypeId) return;
 				
-				let referenceAutocomplete = this.getReferenceAutocompleteConfiguration(Guid.parse(referenceTypeId));
+				let referenceAutocomplete = this.getReferenceAutocompleteConfiguration(referenceTypeId);
 				this.referenceAutocompleteConfiguration.set(referenceTypeId, referenceAutocomplete);
 			});
 	}
@@ -211,12 +218,17 @@ export interface DescriptionListingFilters {
 	references: ReferencesWithType[]
 }
 
-export interface DescriptionListingFilterForm {
+interface DescriptionListingFilterForm {
 	status: FormControl<DescriptionStatusEnum>,
 	viewOnlyTenant: FormControl<boolean>,
 	role: FormControl<Guid>,
 	descriptionTemplates: FormControl<Guid[]>,
 	associatedPlanIds: FormControl<Guid[]>,
 	tags: FormControl<Guid[]>,
-	references: FormArray<any>
+	references: FormArray<FormGroup<DescriptionListingFilterReferencesForm>>
+}
+
+interface DescriptionListingFilterReferencesForm {
+	referenceTypeId: FormControl<Guid>,
+	referenceIds: FormControl<Guid[]>
 }

frontend/src/app/ui/plan/listing/plan-listing.component.ts

@@ -316,6 +316,8 @@ export class PlanListingComponent extends BaseListingComponent<BasePlan, PlanLoo
 		});
 
 		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
+			if (!result) return;
+
 			this.updateDataFn(result);
 		});
 	}
@@ -408,7 +410,7 @@ export class PlanListingComponent extends BaseListingComponent<BasePlan, PlanLoo
 
 	private _patchLookupFromFilters(filters: PlanListingFilters): PlanLookup {
 
-		this.lookup.statuses = filters?.status !== null ? [filters.status] : null;
+		this.lookup.statuses = filters?.status != null ? [filters.status] : null;
 
 		// Tenants
 		let viewOnlyTenant = filters?.viewOnlyTenant ?? false;
@@ -437,7 +439,7 @@ export class PlanListingComponent extends BaseListingComponent<BasePlan, PlanLoo
 		} else this.lookup.planBlueprintSubQuery = null;
 
 		// plans
-		let roles = filters?.role !== null ? [filters.role] : null;
+		let roles = filters?.role != null ? [filters.role] : null;
 		if (roles && roles?.length > 0) {
 			this.lookup.planUserSubQuery = PlanFilterService.initializePlanUserLookup();
 				this.lookup.planUserSubQuery.userRoles = roles;

frontend/src/assets/i18n/baq.json

@@ -758,6 +758,7 @@
 		"FILTERS": {
 			"NAME": "Filters",
 			"APPLY-FILTERS": "Apply filters",
+			"RESET-FILTERS": "Reset",
 			"NO-ITEMS-FOUND": "Your search didn't match any items.",
 			"STATUS": {
 				"NAME": "Status",
@@ -1045,6 +1046,7 @@
 		"FILTERS": {
 			"NAME": "Filters",
 			"APPLY-FILTERS": "Apply filters",
+			"RESET-FILTERS": "Reset",
 			"STATUS": {
 				"NAME": "Status",
 				"TYPES": {

frontend/src/assets/i18n/de.json

@@ -758,6 +758,7 @@
 		"FILTERS": {
 			"NAME": "Filters",
 			"APPLY-FILTERS": "Apply filters",
+			"RESET-FILTERS": "Reset",
 			"NO-ITEMS-FOUND": "Your search didn't match any items.",
 			"STATUS": {
 				"NAME": "Status",
@@ -1045,6 +1046,7 @@
 		"FILTERS": {
 			"NAME": "Filters",
 			"APPLY-FILTERS": "Apply filters",
+			"RESET-FILTERS": "Reset",
 			"STATUS": {
 				"NAME": "Status",
 				"TYPES": {

frontend/src/assets/i18n/en.json

@@ -1044,6 +1044,7 @@
 		"FILTERS": {
 			"NAME": "Filters",
 			"APPLY-FILTERS": "Apply filters",
+			"RESET-FILTERS": "Reset",
 			"STATUS": {
 				"NAME": "Status",
 				"TYPES": {

frontend/src/assets/i18n/es.json

@@ -1046,6 +1046,7 @@
 		"FILTERS": {
 			"NAME": "Filters",
 			"APPLY-FILTERS": "Apply filters",
+			"RESET-FILTERS": "Reset",
 			"STATUS": {
 				"NAME": "Status",
 				"TYPES": {

frontend/src/assets/i18n/gr.json

@@ -1046,6 +1046,7 @@
 		"FILTERS": {
 			"NAME": "Filters",
 			"APPLY-FILTERS": "Apply filters",
+			"RESET-FILTERS": "Reset",
 			"STATUS": {
 				"NAME": "Status",
 				"TYPES": {

frontend/src/assets/i18n/hr.json

@@ -1046,6 +1046,7 @@
 		"FILTERS": {
 			"NAME": "Filters",
 			"APPLY-FILTERS": "Apply filters",
+			"RESET-FILTERS": "Reset",
 			"STATUS": {
 				"NAME": "Status",
 				"TYPES": {

frontend/src/assets/i18n/pl.json

@@ -1046,6 +1046,7 @@
 		"FILTERS": {
 			"NAME": "Filters",
 			"APPLY-FILTERS": "Apply filters",
+			"RESET-FILTERS": "Reset",
 			"STATUS": {
 				"NAME": "Status",
 				"TYPES": {

frontend/src/assets/i18n/pt.json

@@ -1046,6 +1046,7 @@
 		"FILTERS": {
 			"NAME": "Filters",
 			"APPLY-FILTERS": "Apply filters",
+			"RESET-FILTERS": "Reset",
 			"STATUS": {
 				"NAME": "Status",
 				"TYPES": {

frontend/src/assets/i18n/sk.json

@@ -1046,6 +1046,7 @@
 		"FILTERS": {
 			"NAME": "Filters",
 			"APPLY-FILTERS": "Apply filters",
+			"RESET-FILTERS": "Reset",
 			"STATUS": {
 				"NAME": "Status",
 				"TYPES": {

frontend/src/assets/i18n/sr.json

@@ -1046,6 +1046,7 @@
 		"FILTERS": {
 			"NAME": "Filters",
 			"APPLY-FILTERS": "Apply filters",
+			"RESET-FILTERS": "Reset",
 			"STATUS": {
 				"NAME": "Status",
 				"TYPES": {

frontend/src/assets/i18n/tr.json

@@ -1046,6 +1046,7 @@
 		"FILTERS": {
 			"NAME": "Filters",
 			"APPLY-FILTERS": "Apply filters",
+			"RESET-FILTERS": "Reset",
 			"STATUS": {
 				"NAME": "Status",
 				"TYPES": {