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