import { AfterViewChecked , ChangeDetectorRef , Component , ElementRef , EventEmitter , Input , OnInit , Output , Pipe , PipeTransform , ViewChild } from '@angular/core' ; import { ControlValueAccessor , FormBuilder , FormControl , FormGroup , FormGroupDirective , NG_VALIDATORS , NG_VALUE_ACCESSOR , ValidationErrors , Validator } from '@angular/forms' ; import { MatTable } from '@angular/material' ; import * as _ from 'lodash' ; import { ComponentValue } from '../include/include.component' ; import { OnExecSuccess , RunService } from '../run.service' ; @ Pipe ( { name : 'camelToTitleCase' } ) export class CamelToTitleCasePipe implements PipeTransform { transform ( camelCase ) { return _ . startCase ( camelCase ) ; } } @ Component ( { selector : 'dv-stage' , templateUrl : './stage.component.html' , styleUrls : [ './stage.component.css' ] , providers : [ { provide : NG_VALUE_ACCESSOR , useExisting : StageComponent , multi : true } , { provide : NG_VALIDATORS , useExisting : StageComponent , multi : true } ] } ) export class StageComponent implements OnInit , ControlValueAccessor , Validator , OnExecSuccess , AfterViewChecked { @ Input ( ) initialStagedEntities : any [ ] = [ ] ; @ Output ( ) stagedEntities = new EventEmitter < any [ ] > ( ) ; @ Input ( ) stageHeader : ComponentValue | undefined ; @ Input ( ) stageEntity : ComponentValue | undefined ; @ Input ( ) showEntity : ComponentValue | undefined ; @ Input ( ) filter : string [ ] | undefined ; @ Output ( ) filteredStagedEntities = new EventEmitter < any [ ] > ( ) ; @ Input ( ) tableView = false ; @ Input ( ) entityName = 'Entity' ; @ Input ( ) stageButtonLabel = 'Add' ; stageComponent = this ; staged : any [ ] = [ ] ; Object = Object ; entityControl = new FormControl ( ) ; @ ViewChild ( FormGroupDirective ) form ; stageForm : FormGroup = this . builder . group ( { entityControl : this . entityControl } ) ; @ ViewChild ( MatTable ) table : MatTable < any > ; constructor ( private builder , private elem , private rs , private cdRef ) { } ngOnInit ( ) { this . rs . register ( this . elem , this ) ; this . staged = this . initialStagedEntities ; } ngAfterViewChecked ( ) { this . cdRef . detectChanges ( ) ; } onSubmit ( ) { this . stage ( this . entityControl . value ) ; if ( this . form ) { this . form . resetForm ( ) ; this . entityControl . reset ( ) ; } } stage ( value ) { if ( value !== undefined && value !== null ) { this . staged . push ( value ) ; this . stagedEntities . emit ( _ . cloneDeep ( this . staged ) ) ; this . filteredStagedEntities . emit ( _ . cloneDeep ( this . filterEntities ( ) ) ) ; if ( this . tableView && this . table ) { this . table . renderRows ( ) ; } } } unstage ( index ) { _ . pullAt ( this . staged , index ) ; this . stagedEntities . emit ( _ . cloneDeep ( this . staged ) ) ; this . filteredStagedEntities . emit ( _ . cloneDeep ( this . filterEntities ( ) ) ) ; if ( this . tableView && this . table ) { this . table . renderRows ( ) ; } } writeValue ( value ) { if ( value ) { this . staged = value ; } else { this . staged = [ ] ; } this . stagedEntities . emit ( _ . cloneDeep ( this . staged ) ) ; this . filteredStagedEntities . emit ( _ . cloneDeep ( this . filterEntities ( ) ) ) ; } registerOnChange ( fn ) { this . stagedEntities . subscribe ( fn ) ; } registerOnTouched ( ) { } validate ( _c ) { return { } ; } dvOnExecSuccess ( ) { this . reset ( ) ; } reset ( ) { this . staged = [ ] ; if ( this . form ) { this . form . resetForm ( ) ; } } private filterEntities ( ) { return _ . map ( this . staged , ( s ) => _ . pick ( s , this . filter ) ) ; } }