@ -14,26 +14,26 @@
/// limitations under the License.
/// limitations under the License.
///
///
import { Component , forwardRef , Input , OnDestroy , OnInit } from '@angular/core' ; import { Component , DestroyRef , forwardRef , Input , OnInit } from '@angular/core' ;
import { import {
AbstractControl ,
ControlValueAccessor , ControlValueAccessor ,
UntypedFormArray , FormArray ,
UntypedFormBuilder , FormBuilder ,
UntypedFormControl , FormControl ,
UntypedFormGroup ,
NG_VALIDATORS , NG_VALIDATORS ,
NG_VALUE_ACCESSOR , NG_VALUE_ACCESSOR ,
ValidationErrors , ValidationErrors ,
Validator , Validator ,
Validators Validators
} from '@angular/forms' ; } from '@angular/forms' ;
import { Observable , Subject } from 'rxjs' ; import { Observable } from 'rxjs' ;
import { takeUntilDestroyed } from '@angular/core/rxjs-interop' ;
import { import {
ComplexOperation , ComplexOperation ,
complexOperationTranslationMap , complexOperationTranslationMap ,
EntityKeyType , EntityKeyType ,
entityKeyTypeTranslationMap , entityKeyTypeTranslationMap ,
KeyFilter ,
KeyFilterInfo , KeyFilterInfo ,
keyFilterInfosToKeyFilters keyFilterInfosToKeyFilters
} from '@shared/models/query/query.models' ; } from '@shared/models/query/query.models' ;
@ -41,27 +41,26 @@ import { MatDialog } from '@angular/material/dialog';
import { deepClone } from '@core/utils' ; import { deepClone } from '@core/utils' ;
import { KeyFilterDialogComponent , KeyFilterDialogData } from '@home/components/filter/key-filter-dialog.component' ; import { KeyFilterDialogComponent , KeyFilterDialogData } from '@home/components/filter/key-filter-dialog.component' ;
import { EntityId } from '@shared/models/id/entity-id' ; import { EntityId } from '@shared/models/id/entity-id' ;
import { takeUntil } from 'rxjs/operators' ;
@Component ( { @Component ( {
selector : 'tb-key-filter-list' , selector : 'tb-key-filter-list' ,
templateUrl : './key-filter-list.component.html' , templateUrl : './key-filter-list.component.html' ,
styleUrls : [ './key-filter-list.component.scss' ] , styleUrls : [ './key-filter-list.component.scss' ] ,
providers : [ providers : [
{ {
provide : NG_VALUE_ACCESSOR , provide : NG_VALUE_ACCESSOR ,
useExisting : forwardRef ( ( ) = > KeyFilterListComponent ) , useExisting : forwardRef ( ( ) = > KeyFilterListComponent ) ,
multi : true multi : true
} , } ,
{ {
provide : NG_VALIDATORS , provide : NG_VALIDATORS ,
useExisting : forwardRef ( ( ) = > KeyFilterListComponent ) , useExisting : forwardRef ( ( ) = > KeyFilterListComponent ) ,
multi : true multi : true
} }
] , ] ,
standalone : false standalone : false
} ) } )
export class KeyFilterListComponent implements ControlValueAccessor , Validator , OnInit , OnDestroy { export class KeyFilterListComponent implements ControlValueAccessor , Validator , OnInit {
@Input ( ) disabled : boolean ; @Input ( ) disabled : boolean ;
@ -77,39 +76,28 @@ export class KeyFilterListComponent implements ControlValueAccessor, Validator,
complexOperationTranslationMap = complexOperationTranslationMap ; complexOperationTranslationMap = complexOperationTranslationMap ;
keyFilterListFormGroup : UntypedFormGroup ;
entityKeyTypeTranslations = entityKeyTypeTranslationMap ; entityKeyTypeTranslations = entityKeyTypeTranslationMap ;
keyFiltersControl : UntypedFormControl ; keyFiltersFormArray : FormArray < FormControl < KeyFilterInfo > > ;
keyFiltersControl : FormControl < Array < KeyFilter > > ;
private destroy $ = new Subject < void > ( ) ;
private propagateChange = null ; private propagateChange = null ;
constructor ( private fb : UntypedFormBuilder , constructor ( private fb : FormBuilder ,
private dialog : MatDialog ) { private dialog : MatDialog ,
private destroyRef : DestroyRef ) {
} }
ngOnInit ( ) : void { ngOnInit ( ) : void {
this . keyFilterListFormGroup = this . fb . group ( { this . keyFiltersFormArray = this . fb . array < FormControl < KeyFilterInfo > > ( [ ] ) ;
keyFilters : this.fb.array ( [ ] )
} ) ;
this . keyFiltersControl = this . fb . control ( null ) ; this . keyFiltersControl = this . fb . control ( null ) ;
this . keyFilterListFormGroup . valueChanges . pipe ( this . keyFiltersFormArray . valueChanges . pipe (
takeUntil ( this . destroy $ ) takeUntilDestroyed ( this . destroyRef )
) . subscribe ( ( ) = > this . updateModel ( ) ) ; ) . subscribe ( ( ) = > this . updateModel ( ) ) ;
} }
ngOnDestroy() {
this . destroy $ . next ( ) ;
this . destroy $ . complete ( ) ;
}
get keyFiltersFormArray ( ) : UntypedFormArray {
return this . keyFilterListFormGroup . get ( 'keyFilters' ) as UntypedFormArray ;
}
registerOnChange ( fn : any ) : void { registerOnChange ( fn : any ) : void {
this . propagateChange = fn ; this . propagateChange = fn ;
} }
@ -120,61 +108,61 @@ export class KeyFilterListComponent implements ControlValueAccessor, Validator,
setDisabledState ? ( isDisabled : boolean ) : void { setDisabledState ? ( isDisabled : boolean ) : void {
this . disabled = isDisabled ; this . disabled = isDisabled ;
if ( this . disabled ) { if ( this . disabled ) {
this . keyFilterListFormGroup . disable ( { emitEvent : false } ) ; this . keyFiltersFormArray . disable ( { emitEvent : false } ) ;
this . keyFiltersControl . disable ( { emitEvent : false } ) ; this . keyFiltersControl . disable ( { emitEvent : false } ) ;
} else { } else {
this . keyFilterListFormGroup . enable ( { emitEvent : false } ) ; this . keyFiltersFormArray . enable ( { emitEvent : false } ) ;
this . keyFiltersControl . enable ( { emitEvent : false } ) ; this . keyFiltersControl . enable ( { emitEvent : false } ) ;
} }
} }
validate ( ) : ValidationErrors | null { validate ( ) : ValidationErrors | null {
return this . keyFilterListFormGroup . valid && this . keyFiltersControl . valid ? null : { return this . keyFiltersFormArray . valid && this . keyFiltersControl . valid ? null : {
keyFilterList : { valid : false } keyFilterList : { valid : false }
} ; } ;
} }
writeValue ( keyFilters : Array < KeyFilterInfo > ) : void { writeValue ( keyFilters : Array < KeyFilterInfo > ) : void {
if ( keyFilters . length === this . keyFiltersFormArray . length ) { if ( keyFilters ? . length === this . keyFiltersFormArray . length ) {
this . keyFiltersFormArray . patchValue ( keyFilters , { emitEvent : false } ) ; this . keyFiltersFormArray . patchValue ( keyFilters , { emitEvent : false } ) ;
} else { } else {
const keyFilterControls : Array < AbstractControl > = [ ] ; this . keyFiltersFormArray . clear ( { emitEvent : false } ) ;
if ( keyFilters ) { if ( keyFilters ) {
for ( const keyFilter of keyFilters ) { for ( const keyFilter of keyFilters ) {
keyFilterControls . push ( this . fb . control ( keyFilter , [ Validators . required ] ) ) ; this . keyFiltersFormArray . push (
this . fb . control ( keyFilter , [ Validators . required ] ) ,
{ emitEvent : false }
) ;
} }
} }
this . keyFilterListFormGroup . setControl ( 'keyFilters' , this . fb . array ( keyFilterControls ) , { emitEvent : false } ) ;
if ( this . disabled ) { if ( this . disabled ) {
this . keyFilterListFormGroup . disable ( { emitEvent : false } ) ; this . keyFiltersFormArray . disable ( { emitEvent : false } ) ;
} else { } else {
this . keyFilterListFormGroup . enable ( { emitEvent : false } ) ; this . keyFiltersFormArray . enable ( { emitEvent : false } ) ;
} }
} }
const keyFiltersArray = keyFilterInfosToKeyFilters ( keyFilters ) ; const keyFiltersArray = keyFilterInfosToKeyFilters ( keyFilters ) ;
this . keyFiltersControl . patchValue ( keyFiltersArray , { emitEvent : false } ) ; this . keyFiltersControl . patchValue ( keyFiltersArray , { emitEvent : false } ) ;
} }
public removeKeyFilter ( index : number ) { removeKeyFilter ( index : number ) {
( this . keyFilterLi stFormGroup . get ( 'keyFilters' ) as Untyped FormArray ) . removeAt ( index ) ; this . keyFiltersFormArray . removeAt ( index ) ;
} }
public addKeyFilter() { addKeyFilter() {
const keyFiltersFormArray = this . keyFilterListFormGroup . get ( 'keyFilters' ) as UntypedFormArray ;
this . openKeyFilterDialog ( null ) . subscribe ( ( result ) = > { this . openKeyFilterDialog ( null ) . subscribe ( ( result ) = > {
if ( result ) { if ( result ) {
keyFiltersFormArray . push ( this . fb . control ( result , [ Validators . required ] ) ) ; this . keyFiltersFormArray . push ( this . fb . control ( result , [ Validators . required ] ) ) ;
} }
} ) ; } ) ;
} }
public editKeyFilter ( index : number ) { editKeyFilter ( index : number ) {
const keyFilter : KeyFilterInfo = const keyFilter = this . keyFiltersFormArray . at ( index ) . value ;
( this . keyFilterListFormGroup . get ( 'keyFilters' ) as UntypedFormArray ) . at ( index ) . value ;
this . openKeyFilterDialog ( keyFilter ) . subscribe ( this . openKeyFilterDialog ( keyFilter ) . subscribe (
( result ) = > { ( result ) = > {
if ( result ) { if ( result ) {
( this . keyFilterLi stFormGroup . get ( 'keyFilters' ) as Untyped FormArray ) . at ( index ) . patchValue ( result ) ; this . keyFiltersFormArray . at ( index ) . patchValue ( result ) ;
} }
} }
) ; ) ;
@ -210,12 +198,8 @@ export class KeyFilterListComponent implements ControlValueAccessor, Validator,
} }
private updateModel() { private updateModel() {
const keyFilters : Array < KeyFilterInfo > = this . keyFilterListFormGroup . getRawValue ( ) . keyFilters ; const keyFilters = this . keyFiltersFormArray . getRawValue ( ) ;
if ( keyFilters . length ) { this . propagateChange ( keyFilters . length ? keyFilters : null ) ;
this . propagateChange ( keyFilters ) ;
} else {
this . propagateChange ( null ) ;
}
const keyFiltersArray = keyFilterInfosToKeyFilters ( keyFilters ) ; const keyFiltersArray = keyFilterInfosToKeyFilters ( keyFilters ) ;
this . keyFiltersControl . patchValue ( keyFiltersArray , { emitEvent : false } ) ; this . keyFiltersControl . patchValue ( keyFiltersArray , { emitEvent : false } ) ;
} }
Vladyslav_Prykhodko
6 months ago