Skip to content

Commit 00e159d

Browse files
alexslavralexslavr
authored
Support configuring the same option using different configuration components (DevExpress#30056)
1 parent ce4c575 commit 00e159d

File tree

30 files changed

+1149
-1292
lines changed

30 files changed

+1149
-1292
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.5",
47+
"devextreme-internal-tools": "18.0.0-beta.6",
4848
"http-server": "14.1.1",
4949
"husky": "8.0.3",
5050
"jest": "29.7.0",

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

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ import {
1515
Input,
1616
ContentChildren,
1717
forwardRef,
18-
QueryList
18+
QueryList,
19+
AfterContentInit
1920
} from '@angular/core';
2021

2122
import { DOCUMENT } from '@angular/common';
@@ -45,7 +46,7 @@ import { DxiCardViewItemComponent } from './item-dxi';
4546
providers: [NestedOptionHost, DxTemplateHost]
4647
})
4748
export class DxoCardViewCardHeaderComponent extends NestedOption implements AfterViewInit, OnDestroy, OnInit,
48-
IDxTemplateHost {
49+
IDxTemplateHost, AfterContentInit {
4950
@Input()
5051
get items(): Array<CardHeaderItem | CardHeaderPredefinedItem> {
5152
return this._getOption('items');
@@ -76,21 +77,20 @@ export class DxoCardViewCardHeaderComponent extends NestedOption implements Afte
7677
}
7778

7879

79-
@ContentChildren(forwardRef(() => DxiCardViewCardHeaderItemComponent))
80-
get cardHeaderItemsChildren(): QueryList<DxiCardViewCardHeaderItemComponent> {
81-
return this._getOption('items');
82-
}
83-
set cardHeaderItemsChildren(value) {
84-
this.setChildren('items', value);
80+
@ContentChildren(forwardRef(() => DxiCardViewCardHeaderItemComponent)) cardHeaderItemsChildren!: QueryList<DxiCardViewCardHeaderItemComponent>
81+
82+
@ContentChildren(forwardRef(() => DxiCardViewItemComponent)) itemsChildren!: QueryList<DxiCardViewItemComponent>
83+
84+
setItems() {
85+
const q: QueryList<any> = new QueryList();
86+
q.reset([
87+
...this.cardHeaderItemsChildren.toArray(),
88+
...this.itemsChildren.toArray(),
89+
]);
90+
this.setChildren('items', q);
8591
}
8692

87-
@ContentChildren(forwardRef(() => DxiCardViewItemComponent))
88-
get itemsChildren(): QueryList<DxiCardViewItemComponent> {
89-
return this._getOption('items');
90-
}
91-
set itemsChildren(value) {
92-
this.setChildren('items', value);
93-
}
93+
9494

9595
constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
9696
@Host() optionHost: NestedOptionHost,
@@ -121,6 +121,12 @@ export class DxoCardViewCardHeaderComponent extends NestedOption implements Afte
121121
}
122122

123123

124+
ngAfterContentInit() {
125+
this.setItems();
126+
127+
this.cardHeaderItemsChildren.changes.subscribe(() => { this.setItems() });
128+
this.itemsChildren.changes.subscribe(() => { this.setItems() });
129+
}
124130
}
125131

126132
@NgModule({

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

Lines changed: 53 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ import {
1111
EventEmitter,
1212
ContentChildren,
1313
forwardRef,
14-
QueryList
14+
QueryList,
15+
AfterContentInit
1516
} from '@angular/core';
1617

1718

@@ -48,7 +49,7 @@ import { DxiCardViewValidationRuleComponent } from './validation-rule-dxi';
4849
imports: [ DxIntegrationModule ],
4950
providers: [NestedOptionHost]
5051
})
51-
export class DxiCardViewColumnComponent extends CollectionNestedOption {
52+
export class DxiCardViewColumnComponent extends CollectionNestedOption implements AfterContentInit {
5253
@Input()
5354
get alignment(): HorizontalAlignment | undefined {
5455
return this._getOption('alignment');
@@ -408,85 +409,52 @@ export class DxiCardViewColumnComponent extends CollectionNestedOption {
408409
}
409410

410411

411-
@ContentChildren(forwardRef(() => DxiCardViewAsyncRuleComponent))
412-
get asyncRulesChildren(): QueryList<DxiCardViewAsyncRuleComponent> {
413-
return this._getOption('validationRules');
414-
}
415-
set asyncRulesChildren(value) {
416-
this.setChildren('validationRules', value);
412+
@ContentChildren(forwardRef(() => DxiCardViewAsyncRuleComponent)) asyncRulesChildren!: QueryList<DxiCardViewAsyncRuleComponent>
413+
414+
@ContentChildren(forwardRef(() => DxiCardViewCompareRuleComponent)) compareRulesChildren!: QueryList<DxiCardViewCompareRuleComponent>
415+
416+
@ContentChildren(forwardRef(() => DxiCardViewCustomRuleComponent)) customRulesChildren!: QueryList<DxiCardViewCustomRuleComponent>
417+
418+
@ContentChildren(forwardRef(() => DxiCardViewEmailRuleComponent)) emailRulesChildren!: QueryList<DxiCardViewEmailRuleComponent>
419+
420+
@ContentChildren(forwardRef(() => DxiCardViewNumericRuleComponent)) numericRulesChildren!: QueryList<DxiCardViewNumericRuleComponent>
421+
422+
@ContentChildren(forwardRef(() => DxiCardViewPatternRuleComponent)) patternRulesChildren!: QueryList<DxiCardViewPatternRuleComponent>
423+
424+
@ContentChildren(forwardRef(() => DxiCardViewRangeRuleComponent)) rangeRulesChildren!: QueryList<DxiCardViewRangeRuleComponent>
425+
426+
@ContentChildren(forwardRef(() => DxiCardViewRequiredRuleComponent)) requiredRulesChildren!: QueryList<DxiCardViewRequiredRuleComponent>
427+
428+
@ContentChildren(forwardRef(() => DxiCardViewStringLengthRuleComponent)) stringLengthRulesChildren!: QueryList<DxiCardViewStringLengthRuleComponent>
429+
430+
@ContentChildren(forwardRef(() => DxiCardViewValidationRuleComponent)) validationRulesChildren!: QueryList<DxiCardViewValidationRuleComponent>
431+
432+
setValidationRules() {
433+
const q: QueryList<any> = new QueryList();
434+
q.reset([
435+
...this.asyncRulesChildren.toArray(),
436+
...this.compareRulesChildren.toArray(),
437+
...this.customRulesChildren.toArray(),
438+
...this.emailRulesChildren.toArray(),
439+
...this.numericRulesChildren.toArray(),
440+
...this.patternRulesChildren.toArray(),
441+
...this.rangeRulesChildren.toArray(),
442+
...this.requiredRulesChildren.toArray(),
443+
...this.stringLengthRulesChildren.toArray(),
444+
...this.validationRulesChildren.toArray(),
445+
]);
446+
this.setChildren('validationRules', q);
417447
}
418448

419-
@ContentChildren(forwardRef(() => DxiCardViewCompareRuleComponent))
420-
get compareRulesChildren(): QueryList<DxiCardViewCompareRuleComponent> {
421-
return this._getOption('validationRules');
422-
}
423-
set compareRulesChildren(value) {
424-
this.setChildren('validationRules', value);
425-
}
426449

427-
@ContentChildren(forwardRef(() => DxiCardViewCustomRuleComponent))
428-
get customRulesChildren(): QueryList<DxiCardViewCustomRuleComponent> {
429-
return this._getOption('validationRules');
430-
}
431-
set customRulesChildren(value) {
432-
this.setChildren('validationRules', value);
433-
}
434450

435-
@ContentChildren(forwardRef(() => DxiCardViewEmailRuleComponent))
436-
get emailRulesChildren(): QueryList<DxiCardViewEmailRuleComponent> {
437-
return this._getOption('validationRules');
438-
}
439-
set emailRulesChildren(value) {
440-
this.setChildren('validationRules', value);
441-
}
442451

443-
@ContentChildren(forwardRef(() => DxiCardViewNumericRuleComponent))
444-
get numericRulesChildren(): QueryList<DxiCardViewNumericRuleComponent> {
445-
return this._getOption('validationRules');
446-
}
447-
set numericRulesChildren(value) {
448-
this.setChildren('validationRules', value);
449-
}
450452

451-
@ContentChildren(forwardRef(() => DxiCardViewPatternRuleComponent))
452-
get patternRulesChildren(): QueryList<DxiCardViewPatternRuleComponent> {
453-
return this._getOption('validationRules');
454-
}
455-
set patternRulesChildren(value) {
456-
this.setChildren('validationRules', value);
457-
}
458453

459-
@ContentChildren(forwardRef(() => DxiCardViewRangeRuleComponent))
460-
get rangeRulesChildren(): QueryList<DxiCardViewRangeRuleComponent> {
461-
return this._getOption('validationRules');
462-
}
463-
set rangeRulesChildren(value) {
464-
this.setChildren('validationRules', value);
465-
}
466454

467-
@ContentChildren(forwardRef(() => DxiCardViewRequiredRuleComponent))
468-
get requiredRulesChildren(): QueryList<DxiCardViewRequiredRuleComponent> {
469-
return this._getOption('validationRules');
470-
}
471-
set requiredRulesChildren(value) {
472-
this.setChildren('validationRules', value);
473-
}
474455

475-
@ContentChildren(forwardRef(() => DxiCardViewStringLengthRuleComponent))
476-
get stringLengthRulesChildren(): QueryList<DxiCardViewStringLengthRuleComponent> {
477-
return this._getOption('validationRules');
478-
}
479-
set stringLengthRulesChildren(value) {
480-
this.setChildren('validationRules', value);
481-
}
482456

483-
@ContentChildren(forwardRef(() => DxiCardViewValidationRuleComponent))
484-
get validationRulesChildren(): QueryList<DxiCardViewValidationRuleComponent> {
485-
return this._getOption('validationRules');
486-
}
487-
set validationRulesChildren(value) {
488-
this.setChildren('validationRules', value);
489-
}
457+
490458

491459
constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
492460
@Host() optionHost: NestedOptionHost) {
@@ -511,6 +479,20 @@ export class DxiCardViewColumnComponent extends CollectionNestedOption {
511479
this._deleteRemovedOptions(this._fullOptionPath());
512480
}
513481

482+
ngAfterContentInit() {
483+
this.setValidationRules();
484+
485+
this.asyncRulesChildren.changes.subscribe(() => { this.setValidationRules() });
486+
this.compareRulesChildren.changes.subscribe(() => { this.setValidationRules() });
487+
this.customRulesChildren.changes.subscribe(() => { this.setValidationRules() });
488+
this.emailRulesChildren.changes.subscribe(() => { this.setValidationRules() });
489+
this.numericRulesChildren.changes.subscribe(() => { this.setValidationRules() });
490+
this.patternRulesChildren.changes.subscribe(() => { this.setValidationRules() });
491+
this.rangeRulesChildren.changes.subscribe(() => { this.setValidationRules() });
492+
this.requiredRulesChildren.changes.subscribe(() => { this.setValidationRules() });
493+
this.stringLengthRulesChildren.changes.subscribe(() => { this.setValidationRules() });
494+
this.validationRulesChildren.changes.subscribe(() => { this.setValidationRules() });
495+
}
514496
}
515497

516498
@NgModule({

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

Lines changed: 53 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ import {
1515
Input,
1616
ContentChildren,
1717
forwardRef,
18-
QueryList
18+
QueryList,
19+
AfterContentInit
1920
} from '@angular/core';
2021

2122
import { DOCUMENT } from '@angular/common';
@@ -55,7 +56,7 @@ import { DxiCardViewValidationRuleComponent } from './validation-rule-dxi';
5556
providers: [NestedOptionHost, DxTemplateHost]
5657
})
5758
export class DxoCardViewFormItemComponent extends NestedOption implements AfterViewInit, OnDestroy, OnInit,
58-
IDxTemplateHost {
59+
IDxTemplateHost, AfterContentInit {
5960
@Input()
6061
get colSpan(): number | undefined {
6162
return this._getOption('colSpan');
@@ -174,85 +175,52 @@ export class DxoCardViewFormItemComponent extends NestedOption implements AfterV
174175
}
175176

176177

177-
@ContentChildren(forwardRef(() => DxiCardViewAsyncRuleComponent))
178-
get asyncRulesChildren(): QueryList<DxiCardViewAsyncRuleComponent> {
179-
return this._getOption('validationRules');
180-
}
181-
set asyncRulesChildren(value) {
182-
this.setChildren('validationRules', value);
178+
@ContentChildren(forwardRef(() => DxiCardViewAsyncRuleComponent)) asyncRulesChildren!: QueryList<DxiCardViewAsyncRuleComponent>
179+
180+
@ContentChildren(forwardRef(() => DxiCardViewCompareRuleComponent)) compareRulesChildren!: QueryList<DxiCardViewCompareRuleComponent>
181+
182+
@ContentChildren(forwardRef(() => DxiCardViewCustomRuleComponent)) customRulesChildren!: QueryList<DxiCardViewCustomRuleComponent>
183+
184+
@ContentChildren(forwardRef(() => DxiCardViewEmailRuleComponent)) emailRulesChildren!: QueryList<DxiCardViewEmailRuleComponent>
185+
186+
@ContentChildren(forwardRef(() => DxiCardViewNumericRuleComponent)) numericRulesChildren!: QueryList<DxiCardViewNumericRuleComponent>
187+
188+
@ContentChildren(forwardRef(() => DxiCardViewPatternRuleComponent)) patternRulesChildren!: QueryList<DxiCardViewPatternRuleComponent>
189+
190+
@ContentChildren(forwardRef(() => DxiCardViewRangeRuleComponent)) rangeRulesChildren!: QueryList<DxiCardViewRangeRuleComponent>
191+
192+
@ContentChildren(forwardRef(() => DxiCardViewRequiredRuleComponent)) requiredRulesChildren!: QueryList<DxiCardViewRequiredRuleComponent>
193+
194+
@ContentChildren(forwardRef(() => DxiCardViewStringLengthRuleComponent)) stringLengthRulesChildren!: QueryList<DxiCardViewStringLengthRuleComponent>
195+
196+
@ContentChildren(forwardRef(() => DxiCardViewValidationRuleComponent)) validationRulesChildren!: QueryList<DxiCardViewValidationRuleComponent>
197+
198+
setValidationRules() {
199+
const q: QueryList<any> = new QueryList();
200+
q.reset([
201+
...this.asyncRulesChildren.toArray(),
202+
...this.compareRulesChildren.toArray(),
203+
...this.customRulesChildren.toArray(),
204+
...this.emailRulesChildren.toArray(),
205+
...this.numericRulesChildren.toArray(),
206+
...this.patternRulesChildren.toArray(),
207+
...this.rangeRulesChildren.toArray(),
208+
...this.requiredRulesChildren.toArray(),
209+
...this.stringLengthRulesChildren.toArray(),
210+
...this.validationRulesChildren.toArray(),
211+
]);
212+
this.setChildren('validationRules', q);
183213
}
184214

185-
@ContentChildren(forwardRef(() => DxiCardViewCompareRuleComponent))
186-
get compareRulesChildren(): QueryList<DxiCardViewCompareRuleComponent> {
187-
return this._getOption('validationRules');
188-
}
189-
set compareRulesChildren(value) {
190-
this.setChildren('validationRules', value);
191-
}
192215

193-
@ContentChildren(forwardRef(() => DxiCardViewCustomRuleComponent))
194-
get customRulesChildren(): QueryList<DxiCardViewCustomRuleComponent> {
195-
return this._getOption('validationRules');
196-
}
197-
set customRulesChildren(value) {
198-
this.setChildren('validationRules', value);
199-
}
200216

201-
@ContentChildren(forwardRef(() => DxiCardViewEmailRuleComponent))
202-
get emailRulesChildren(): QueryList<DxiCardViewEmailRuleComponent> {
203-
return this._getOption('validationRules');
204-
}
205-
set emailRulesChildren(value) {
206-
this.setChildren('validationRules', value);
207-
}
208217

209-
@ContentChildren(forwardRef(() => DxiCardViewNumericRuleComponent))
210-
get numericRulesChildren(): QueryList<DxiCardViewNumericRuleComponent> {
211-
return this._getOption('validationRules');
212-
}
213-
set numericRulesChildren(value) {
214-
this.setChildren('validationRules', value);
215-
}
216218

217-
@ContentChildren(forwardRef(() => DxiCardViewPatternRuleComponent))
218-
get patternRulesChildren(): QueryList<DxiCardViewPatternRuleComponent> {
219-
return this._getOption('validationRules');
220-
}
221-
set patternRulesChildren(value) {
222-
this.setChildren('validationRules', value);
223-
}
224219

225-
@ContentChildren(forwardRef(() => DxiCardViewRangeRuleComponent))
226-
get rangeRulesChildren(): QueryList<DxiCardViewRangeRuleComponent> {
227-
return this._getOption('validationRules');
228-
}
229-
set rangeRulesChildren(value) {
230-
this.setChildren('validationRules', value);
231-
}
232220

233-
@ContentChildren(forwardRef(() => DxiCardViewRequiredRuleComponent))
234-
get requiredRulesChildren(): QueryList<DxiCardViewRequiredRuleComponent> {
235-
return this._getOption('validationRules');
236-
}
237-
set requiredRulesChildren(value) {
238-
this.setChildren('validationRules', value);
239-
}
240221

241-
@ContentChildren(forwardRef(() => DxiCardViewStringLengthRuleComponent))
242-
get stringLengthRulesChildren(): QueryList<DxiCardViewStringLengthRuleComponent> {
243-
return this._getOption('validationRules');
244-
}
245-
set stringLengthRulesChildren(value) {
246-
this.setChildren('validationRules', value);
247-
}
248222

249-
@ContentChildren(forwardRef(() => DxiCardViewValidationRuleComponent))
250-
get validationRulesChildren(): QueryList<DxiCardViewValidationRuleComponent> {
251-
return this._getOption('validationRules');
252-
}
253-
set validationRulesChildren(value) {
254-
this.setChildren('validationRules', value);
255-
}
223+
256224

257225
constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
258226
@Host() optionHost: NestedOptionHost,
@@ -283,6 +251,20 @@ export class DxoCardViewFormItemComponent extends NestedOption implements AfterV
283251
}
284252

285253

254+
ngAfterContentInit() {
255+
this.setValidationRules();
256+
257+
this.asyncRulesChildren.changes.subscribe(() => { this.setValidationRules() });
258+
this.compareRulesChildren.changes.subscribe(() => { this.setValidationRules() });
259+
this.customRulesChildren.changes.subscribe(() => { this.setValidationRules() });
260+
this.emailRulesChildren.changes.subscribe(() => { this.setValidationRules() });
261+
this.numericRulesChildren.changes.subscribe(() => { this.setValidationRules() });
262+
this.patternRulesChildren.changes.subscribe(() => { this.setValidationRules() });
263+
this.rangeRulesChildren.changes.subscribe(() => { this.setValidationRules() });
264+
this.requiredRulesChildren.changes.subscribe(() => { this.setValidationRules() });
265+
this.stringLengthRulesChildren.changes.subscribe(() => { this.setValidationRules() });
266+
this.validationRulesChildren.changes.subscribe(() => { this.setValidationRules() });
267+
}
286268
}
287269

288270
@NgModule({

0 commit comments

Comments
 (0)