Skip to content

Commit 4d9be3c

Browse files
alexslavralexslavr
authored
Angular: Generate missing recursive collection nested components (#30219)
1 parent ddb0051 commit 4d9be3c

File tree

14 files changed

+321
-107
lines changed

14 files changed

+321
-107
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
"axe-core": "4.10.3",
4545
"cheerio": "1.0.0-rc.10",
4646
"codelyzer": "6.0.2",
47-
"devextreme-internal-tools": "18.0.0-beta.8",
47+
"devextreme-internal-tools": "18.0.0-beta.11",
4848
"http-server": "14.1.1",
4949
"husky": "8.0.3",
5050
"jest": "29.7.0",

‎packages/devextreme-angular/src/ui/card-view/nested/group-item-dxi.ts‎

Lines changed: 52 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,11 @@ import {
1010
Inject,
1111
AfterViewInit,
1212
SkipSelf,
13-
Input
13+
Input,
14+
ContentChildren,
15+
forwardRef,
16+
QueryList,
17+
AfterContentInit
1418
} from '@angular/core';
1519

1620
import { DOCUMENT } from '@angular/common';
@@ -27,6 +31,11 @@ import {
2731
DxTemplateHost
2832
} from 'devextreme-angular/core';
2933
import { CollectionNestedOption } from 'devextreme-angular/core';
34+
import { DxiCardViewButtonItemComponent } from './button-item-dxi';
35+
import { DxiCardViewEmptyItemComponent } from './empty-item-dxi';
36+
import { DxiCardViewItemComponent } from './item-dxi';
37+
import { DxiCardViewSimpleItemComponent } from './simple-item-dxi';
38+
import { DxiCardViewTabbedItemComponent } from './tabbed-item-dxi';
3039

3140

3241
@Component({
@@ -38,7 +47,7 @@ import { CollectionNestedOption } from 'devextreme-angular/core';
3847
providers: [NestedOptionHost, DxTemplateHost]
3948
})
4049
export class DxiCardViewGroupItemComponent extends CollectionNestedOption implements AfterViewInit,
41-
IDxTemplateHost {
50+
IDxTemplateHost, AfterContentInit {
4251
@Input()
4352
get alignItemLabels(): boolean {
4453
return this._getOption('alignItemLabels');
@@ -149,6 +158,37 @@ export class DxiCardViewGroupItemComponent extends CollectionNestedOption implem
149158
}
150159

151160

161+
@ContentChildren(forwardRef(() => DxiCardViewButtonItemComponent)) buttonItemsChildren!: QueryList<DxiCardViewButtonItemComponent>
162+
163+
@ContentChildren(forwardRef(() => DxiCardViewEmptyItemComponent)) emptyItemsChildren!: QueryList<DxiCardViewEmptyItemComponent>
164+
165+
@ContentChildren(forwardRef(() => DxiCardViewGroupItemComponent)) groupItemsChildren!: QueryList<DxiCardViewGroupItemComponent>
166+
167+
@ContentChildren(forwardRef(() => DxiCardViewItemComponent)) itemsChildren!: QueryList<DxiCardViewItemComponent>
168+
169+
@ContentChildren(forwardRef(() => DxiCardViewSimpleItemComponent)) simpleItemsChildren!: QueryList<DxiCardViewSimpleItemComponent>
170+
171+
@ContentChildren(forwardRef(() => DxiCardViewTabbedItemComponent)) tabbedItemsChildren!: QueryList<DxiCardViewTabbedItemComponent>
172+
173+
setItems() {
174+
const q: QueryList<any> = new QueryList();
175+
q.reset([
176+
...this.buttonItemsChildren.toArray(),
177+
...this.emptyItemsChildren.toArray(),
178+
...this.groupItemsChildren.toArray(),
179+
...this.itemsChildren.toArray(),
180+
...this.simpleItemsChildren.toArray(),
181+
...this.tabbedItemsChildren.toArray(),
182+
]);
183+
this.setChildren('items', q);
184+
}
185+
186+
187+
188+
189+
190+
191+
152192
constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
153193
@Host() optionHost: NestedOptionHost,
154194
private renderer: Renderer2,
@@ -174,6 +214,16 @@ export class DxiCardViewGroupItemComponent extends CollectionNestedOption implem
174214
this._deleteRemovedOptions(this._fullOptionPath());
175215
}
176216

217+
ngAfterContentInit() {
218+
this.setItems();
219+
220+
this.buttonItemsChildren.changes.subscribe(() => { this.setItems() });
221+
this.emptyItemsChildren.changes.subscribe(() => { this.setItems() });
222+
this.groupItemsChildren.changes.subscribe(() => { this.setItems() });
223+
this.itemsChildren.changes.subscribe(() => { this.setItems() });
224+
this.simpleItemsChildren.changes.subscribe(() => { this.setItems() });
225+
this.tabbedItemsChildren.changes.subscribe(() => { this.setItems() });
226+
}
177227
}
178228

179229
@NgModule({

‎packages/devextreme-angular/src/ui/card-view/nested/item-dxi.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -425,6 +425,14 @@ export class DxiCardViewItemComponent extends CollectionNestedOption implements
425425
}
426426

427427

428+
@ContentChildren(forwardRef(() => DxiCardViewItemComponent))
429+
get itemsChildren(): QueryList<DxiCardViewItemComponent> {
430+
return this._getOption('items');
431+
}
432+
set itemsChildren(value) {
433+
this.setChildren('items', value);
434+
}
435+
428436
constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
429437
@Host() optionHost: NestedOptionHost,
430438
private renderer: Renderer2,

‎packages/devextreme-angular/src/ui/data-grid/nested/column-dxi.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -674,6 +674,14 @@ export class DxiDataGridColumnComponent extends CollectionNestedOption implement
674674

675675

676676

677+
@ContentChildren(forwardRef(() => DxiDataGridColumnComponent))
678+
get columnsChildren(): QueryList<DxiDataGridColumnComponent> {
679+
return this._getOption('columns');
680+
}
681+
set columnsChildren(value) {
682+
this.setChildren('columns', value);
683+
}
684+
677685
constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
678686
@Host() optionHost: NestedOptionHost) {
679687
super();

‎packages/devextreme-angular/src/ui/diagram/nested/command-item-dxi.ts‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@ import {
66
NgModule,
77
Host,
88
SkipSelf,
9-
Input
9+
Input,
10+
ContentChildren,
11+
forwardRef,
12+
QueryList,
13+
AfterContentInit
1014
} from '@angular/core';
1115

1216

@@ -20,6 +24,7 @@ import {
2024
NestedOptionHost,
2125
} from 'devextreme-angular/core';
2226
import { CollectionNestedOption } from 'devextreme-angular/core';
27+
import { DxiDiagramItemComponent } from './item-dxi';
2328

2429

2530
@Component({
@@ -30,7 +35,7 @@ import { CollectionNestedOption } from 'devextreme-angular/core';
3035
imports: [ DxIntegrationModule ],
3136
providers: [NestedOptionHost]
3237
})
33-
export class DxiDiagramCommandItemComponent extends CollectionNestedOption {
38+
export class DxiDiagramCommandItemComponent extends CollectionNestedOption implements AfterContentInit {
3439
@Input()
3540
get icon(): string {
3641
return this._getOption('icon');
@@ -77,6 +82,21 @@ export class DxiDiagramCommandItemComponent extends CollectionNestedOption {
7782
}
7883

7984

85+
@ContentChildren(forwardRef(() => DxiDiagramCommandItemComponent)) commandItemsChildren!: QueryList<DxiDiagramCommandItemComponent>
86+
87+
@ContentChildren(forwardRef(() => DxiDiagramItemComponent)) itemsChildren!: QueryList<DxiDiagramItemComponent>
88+
89+
setItems() {
90+
const q: QueryList<any> = new QueryList();
91+
q.reset([
92+
...this.commandItemsChildren.toArray(),
93+
...this.itemsChildren.toArray(),
94+
]);
95+
this.setChildren('items', q);
96+
}
97+
98+
99+
80100
constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
81101
@Host() optionHost: NestedOptionHost) {
82102
super();
@@ -90,6 +110,12 @@ export class DxiDiagramCommandItemComponent extends CollectionNestedOption {
90110
this._deleteRemovedOptions(this._fullOptionPath());
91111
}
92112

113+
ngAfterContentInit() {
114+
this.setItems();
115+
116+
this.commandItemsChildren.changes.subscribe(() => { this.setItems() });
117+
this.itemsChildren.changes.subscribe(() => { this.setItems() });
118+
}
93119
}
94120

95121
@NgModule({

‎packages/devextreme-angular/src/ui/diagram/nested/item-dxi.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ import {
66
NgModule,
77
Host,
88
SkipSelf,
9-
Input
9+
Input,
10+
ContentChildren,
11+
forwardRef,
12+
QueryList
1013
} from '@angular/core';
1114

1215

@@ -93,6 +96,14 @@ export class DxiDiagramItemComponent extends CollectionNestedOption {
9396
}
9497

9598

99+
@ContentChildren(forwardRef(() => DxiDiagramItemComponent))
100+
get itemsChildren(): QueryList<DxiDiagramItemComponent> {
101+
return this._getOption('items');
102+
}
103+
set itemsChildren(value) {
104+
this.setChildren('items', value);
105+
}
106+
96107
constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
97108
@Host() optionHost: NestedOptionHost) {
98109
super();

‎packages/devextreme-angular/src/ui/file-manager/nested/context-menu-item-dxi.ts‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import {
99
Input,
1010
ContentChildren,
1111
forwardRef,
12-
QueryList
12+
QueryList,
13+
AfterContentInit
1314
} from '@angular/core';
1415

1516

@@ -33,7 +34,7 @@ import { DxiFileManagerItemComponent } from './item-dxi';
3334
imports: [ DxIntegrationModule ],
3435
providers: [NestedOptionHost]
3536
})
36-
export class DxiFileManagerContextMenuItemComponent extends CollectionNestedOption {
37+
export class DxiFileManagerContextMenuItemComponent extends CollectionNestedOption implements AfterContentInit {
3738
@Input()
3839
get beginGroup(): boolean {
3940
return this._getOption('beginGroup');
@@ -120,14 +121,21 @@ export class DxiFileManagerContextMenuItemComponent extends CollectionNestedOpti
120121
}
121122

122123

123-
@ContentChildren(forwardRef(() => DxiFileManagerItemComponent))
124-
get itemsChildren(): QueryList<DxiFileManagerItemComponent> {
125-
return this._getOption('items');
126-
}
127-
set itemsChildren(value) {
128-
this.setChildren('items', value);
124+
@ContentChildren(forwardRef(() => DxiFileManagerItemComponent)) itemsChildren!: QueryList<DxiFileManagerItemComponent>
125+
126+
@ContentChildren(forwardRef(() => DxiFileManagerContextMenuItemComponent)) contextMenuItemsChildren!: QueryList<DxiFileManagerContextMenuItemComponent>
127+
128+
setItems() {
129+
const q: QueryList<any> = new QueryList();
130+
q.reset([
131+
...this.itemsChildren.toArray(),
132+
...this.contextMenuItemsChildren.toArray(),
133+
]);
134+
this.setChildren('items', q);
129135
}
130136

137+
138+
131139
constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
132140
@Host() optionHost: NestedOptionHost) {
133141
super();
@@ -141,6 +149,12 @@ export class DxiFileManagerContextMenuItemComponent extends CollectionNestedOpti
141149
this._deleteRemovedOptions(this._fullOptionPath());
142150
}
143151

152+
ngAfterContentInit() {
153+
this.setItems();
154+
155+
this.itemsChildren.changes.subscribe(() => { this.setItems() });
156+
this.contextMenuItemsChildren.changes.subscribe(() => { this.setItems() });
157+
}
144158
}
145159

146160
@NgModule({

‎packages/devextreme-angular/src/ui/form/nested/group-item-dxi.ts‎

Lines changed: 52 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,11 @@ import {
1010
Inject,
1111
AfterViewInit,
1212
SkipSelf,
13-
Input
13+
Input,
14+
ContentChildren,
15+
forwardRef,
16+
QueryList,
17+
AfterContentInit
1418
} from '@angular/core';
1519

1620
import { DOCUMENT } from '@angular/common';
@@ -27,6 +31,11 @@ import {
2731
DxTemplateHost
2832
} from 'devextreme-angular/core';
2933
import { CollectionNestedOption } from 'devextreme-angular/core';
34+
import { DxiFormButtonItemComponent } from './button-item-dxi';
35+
import { DxiFormEmptyItemComponent } from './empty-item-dxi';
36+
import { DxiFormItemComponent } from './item-dxi';
37+
import { DxiFormSimpleItemComponent } from './simple-item-dxi';
38+
import { DxiFormTabbedItemComponent } from './tabbed-item-dxi';
3039

3140

3241
@Component({
@@ -38,7 +47,7 @@ import { CollectionNestedOption } from 'devextreme-angular/core';
3847
providers: [NestedOptionHost, DxTemplateHost]
3948
})
4049
export class DxiFormGroupItemComponent extends CollectionNestedOption implements AfterViewInit,
41-
IDxTemplateHost {
50+
IDxTemplateHost, AfterContentInit {
4251
@Input()
4352
get alignItemLabels(): boolean {
4453
return this._getOption('alignItemLabels');
@@ -149,6 +158,37 @@ export class DxiFormGroupItemComponent extends CollectionNestedOption implements
149158
}
150159

151160

161+
@ContentChildren(forwardRef(() => DxiFormButtonItemComponent)) buttonItemsChildren!: QueryList<DxiFormButtonItemComponent>
162+
163+
@ContentChildren(forwardRef(() => DxiFormEmptyItemComponent)) emptyItemsChildren!: QueryList<DxiFormEmptyItemComponent>
164+
165+
@ContentChildren(forwardRef(() => DxiFormGroupItemComponent)) groupItemsChildren!: QueryList<DxiFormGroupItemComponent>
166+
167+
@ContentChildren(forwardRef(() => DxiFormItemComponent)) itemsChildren!: QueryList<DxiFormItemComponent>
168+
169+
@ContentChildren(forwardRef(() => DxiFormSimpleItemComponent)) simpleItemsChildren!: QueryList<DxiFormSimpleItemComponent>
170+
171+
@ContentChildren(forwardRef(() => DxiFormTabbedItemComponent)) tabbedItemsChildren!: QueryList<DxiFormTabbedItemComponent>
172+
173+
setItems() {
174+
const q: QueryList<any> = new QueryList();
175+
q.reset([
176+
...this.buttonItemsChildren.toArray(),
177+
...this.emptyItemsChildren.toArray(),
178+
...this.groupItemsChildren.toArray(),
179+
...this.itemsChildren.toArray(),
180+
...this.simpleItemsChildren.toArray(),
181+
...this.tabbedItemsChildren.toArray(),
182+
]);
183+
this.setChildren('items', q);
184+
}
185+
186+
187+
188+
189+
190+
191+
152192
constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
153193
@Host() optionHost: NestedOptionHost,
154194
private renderer: Renderer2,
@@ -174,6 +214,16 @@ export class DxiFormGroupItemComponent extends CollectionNestedOption implements
174214
this._deleteRemovedOptions(this._fullOptionPath());
175215
}
176216

217+
ngAfterContentInit() {
218+
this.setItems();
219+
220+
this.buttonItemsChildren.changes.subscribe(() => { this.setItems() });
221+
this.emptyItemsChildren.changes.subscribe(() => { this.setItems() });
222+
this.groupItemsChildren.changes.subscribe(() => { this.setItems() });
223+
this.itemsChildren.changes.subscribe(() => { this.setItems() });
224+
this.simpleItemsChildren.changes.subscribe(() => { this.setItems() });
225+
this.tabbedItemsChildren.changes.subscribe(() => { this.setItems() });
226+
}
177227
}
178228

179229
@NgModule({

‎packages/devextreme-angular/src/ui/form/nested/item-dxi.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -375,6 +375,14 @@ export class DxiFormItemComponent extends CollectionNestedOption implements Afte
375375
}
376376

377377

378+
@ContentChildren(forwardRef(() => DxiFormItemComponent))
379+
get itemsChildren(): QueryList<DxiFormItemComponent> {
380+
return this._getOption('items');
381+
}
382+
set itemsChildren(value) {
383+
this.setChildren('items', value);
384+
}
385+
378386
constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
379387
@Host() optionHost: NestedOptionHost,
380388
private renderer: Renderer2,

0 commit comments

Comments
 (0)