11import { Component , Directive , Inject , ElementRef , EventEmitter , Output , Input , Query , QueryList , Renderer , OnChanges , NgZone ,
2- SimpleChange , ChangeDetectionStrategy , IterableDiffers , DoCheck , Optional } from '@angular/core' ;
2+ SimpleChange , ChangeDetectionStrategy , IterableDiffers , DoCheck , Optional , ContentChildren , AfterContentInit } from '@angular/core' ;
33import { NgModel , ControlValueAccessor } from '@angular/common' ;
44
55declare var jQuery : any ;
@@ -46,6 +46,118 @@ var NODES = {
4646 "ig-tile-manager" : "div"
4747} ;
4848
49+ module IgUtil {
50+ export function extractAllGridFeatureOptions ( ) {
51+ let allWidgets = jQuery . ui ;
52+ let options = [ 'name' ] ;
53+ let widget : any ;
54+ for ( widget in allWidgets ) {
55+ if ( widget . substring ( 0 , 6 ) === "igGrid" && widget !== "igGrid" ) {
56+ options = options . concat ( Object . keys ( jQuery . ui [ widget ] . prototype . options ) ) ;
57+ }
58+ }
59+ return options ;
60+ }
61+
62+ export function extractAllGridColumnProperties ( ) {
63+ return [ 'headerText' , 'key' , 'formatter' , 'format' , 'dataType' , 'width' , 'hidden' , 'template' , 'unbound' , 'group' , 'rowspan' , 'formula' , 'unboundValues' , 'unboundValuesUpdateMode' , 'headerCssClass' , 'columnCssClass' ] ;
64+ }
65+ }
66+
67+ @Directive ( {
68+ selector : 'column' ,
69+ inputs : IgUtil . extractAllGridColumnProperties ( )
70+ } )
71+ export class Column {
72+ public _settings : any = { } ;
73+ private _el : any ;
74+
75+ constructor ( el : ElementRef ) {
76+ this . _el = el ;
77+ let self = this ;
78+ let i , settings = IgUtil . extractAllGridColumnProperties ( ) ;
79+ for ( i = 0 ; i < settings . length ; i ++ ) {
80+ Object . defineProperty ( self , settings [ i ] , {
81+ set : self . createColumnsSetter ( settings [ i ] ) ,
82+ get : self . createColumnsGetter ( settings [ i ] ) ,
83+ enumerable : true ,
84+ configurable : true
85+ } ) ;
86+ }
87+ }
88+
89+ createColumnsSetter ( name ) {
90+ return function ( value ) {
91+ let grid = jQuery ( this . _el . nativeElement . parentElement ) . find ( "table[role='grid']" ) ;
92+ this . _settings [ name ] = value ;
93+
94+ if ( jQuery . ui [ "igGrid" ] &&
95+ jQuery . ui [ "igGrid" ] . prototype . options &&
96+ jQuery . ui [ "igGrid" ] . prototype . options . hasOwnProperty ( "columns" ) &&
97+ grid . data ( "igGrid" ) ) {
98+ grid [ "igGrid" ] ( "option" , "columns" , this . _settings ) ;
99+ }
100+ }
101+ }
102+
103+ createColumnsGetter ( name ) {
104+ return function ( ) {
105+ return this . _settings [ name ] ;
106+ }
107+ }
108+ }
109+
110+ @Directive ( {
111+ selector : 'feature' ,
112+ inputs : IgUtil . extractAllGridFeatureOptions ( )
113+ } )
114+
115+ export class Feature {
116+ private _el : any ;
117+ public _settings : any = { } ;
118+ public initSettings : { } ;
119+ private name : string ;
120+
121+ constructor ( el : ElementRef ) {
122+ this . _el = el ;
123+ }
124+
125+ ngOnInit ( ) {
126+ var self = this ;
127+ this . initSettings = jQuery . extend ( true , { } , this ) ;
128+ let featureName = "igGrid" + this . name ;
129+ for ( var setting in jQuery . ui [ featureName ] . prototype . options ) {
130+ Object . defineProperty ( self , setting , {
131+ set : self . createFeatureSetter ( setting ) ,
132+ get : self . createFeatureGetter ( setting ) ,
133+ enumerable : true ,
134+ configurable : true
135+ } ) ;
136+ }
137+ }
138+
139+ createFeatureSetter ( name ) {
140+ return function ( value ) {
141+ let grid = jQuery ( this . _el . nativeElement . parentElement ) . find ( "table[role='grid']" ) ;
142+ let featureName = "igGrid" + this . name ;
143+ this . _settings [ name ] = value ;
144+
145+ if ( jQuery . ui [ featureName ] &&
146+ jQuery . ui [ featureName ] . prototype . options &&
147+ jQuery . ui [ featureName ] . prototype . options . hasOwnProperty ( name ) &&
148+ grid . data ( featureName ) ) {
149+ grid [ featureName ] ( "option" , name , value ) ;
150+ }
151+ }
152+ }
153+
154+ createFeatureGetter ( name ) {
155+ return function ( ) {
156+ return this . _settings [ name ] ;
157+ }
158+ }
159+ }
160+
49161export function IgComponent ( args : any = { } ) {
50162
51163 return function ( cls ) {
@@ -66,7 +178,7 @@ export function IgComponent(args: any = {}) {
66178 } ) ;
67179
68180 var evt = [ ] ;
69- var opts = [ ] ;
181+ var opts = [ "options" , "widgetId" , "changeDetectionInterval" ] ;
70182 if ( jQuery . ui [ contrName ] ) {
71183 for ( var propt in jQuery . ui [ contrName ] . prototype . events ) {
72184 evt . push ( propt ) ;
@@ -86,16 +198,16 @@ export function IgComponent(args: any = {}) {
86198}
87199
88200export class IgControlBase < Model > implements DoCheck {
89- private _opts : any = { } ;
90201 private _differs : any ;
202+ protected _opts : any = { } ;
91203 protected _el : any ;
92204 protected _widgetName : string ;
93205 protected _differ : any ;
94206 protected _config : any ;
95207 protected _events : Map < string , string > ;
96208 protected _allowChangeDetection = true ;
97209
98- @ Input ( ) set options ( v : Model ) {
210+ set options ( v : Model ) {
99211 this . _config = jQuery . extend ( true , v , this . _opts ) ;
100212 if ( this . _opts . dataSource ) {
101213 // _config.dataSource should reference the data if the data is set as a top-level opts
@@ -108,8 +220,8 @@ export class IgControlBase<Model> implements DoCheck {
108220 delete this . _opts . dataSource ;
109221 }
110222 } ;
111- @ Input ( ) widgetId : string ;
112- @ Input ( ) changeDetectionInterval : number ;
223+ public widgetId : string ;
224+ public changeDetectionInterval : number ;
113225
114226 constructor ( el : ElementRef , renderer : Renderer , differs : IterableDiffers ) {
115227 this . _differs = differs ;
@@ -132,11 +244,13 @@ export class IgControlBase<Model> implements DoCheck {
132244 createSetter ( name ) {
133245 return function ( value ) {
134246 this . _opts [ name ] = value ;
247+ if ( this . _config ) {
248+ this . _config [ name ] = value ;
249+ }
135250 if ( jQuery . ui [ this . _widgetName ] &&
136251 jQuery . ui [ this . _widgetName ] . prototype . options &&
137252 jQuery . ui [ this . _widgetName ] . prototype . options . hasOwnProperty ( name ) &&
138253 jQuery ( this . _el ) . data ( this . _widgetName ) ) {
139- this . _config [ name ] = value ;
140254 jQuery ( this . _el ) [ this . _widgetName ] ( "option" , name , value ) ;
141255 }
142256 }
@@ -300,15 +414,28 @@ export class IgControlBase<Model> implements DoCheck {
300414 }
301415}
302416
303- export class IgGridBase < Model > extends IgControlBase < Model > {
417+ export class IgGridBase < Model > extends IgControlBase < Model > implements AfterContentInit {
304418 protected _dataSource : any ;
305419 protected _changes : any ;
420+ @ContentChildren ( Column ) _columns : QueryList < Column > ;
421+ @ContentChildren ( Feature ) _features : QueryList < Feature > ;
306422
307423 constructor ( el : ElementRef , renderer : Renderer , differs : IterableDiffers ) { super ( el , renderer , differs ) ; }
308424
309425 ngOnInit ( ) {
426+ this . _dataSource = this . _opts . dataSource ?
427+ JSON . parse ( JSON . stringify ( this . _opts . dataSource ) ) :
428+ JSON . parse ( JSON . stringify ( this . _config . dataSource ) ) ;
429+ }
430+
431+ ngAfterContentInit ( ) {
432+ if ( this . _columns . length ) {
433+ this . _opts [ "columns" ] = this . _columns . map ( ( c ) => c . _settings ) ;
434+ }
435+ if ( this . _features . length ) {
436+ this . _opts [ "features" ] = this . _features . map ( ( c ) => c . initSettings ) ;
437+ }
310438 super . ngOnInit ( ) ;
311- this . _dataSource = JSON . parse ( JSON . stringify ( this . _config . dataSource ) ) ;
312439 }
313440
314441 deleteRow ( id ) {
0 commit comments