Skip to content

Commit 21c8eb3

Browse files
zdrawkuzdrawku
authored
Merge pull request #9867 from IgniteUI/ddincheva/paginatorMigration
Paginator migrations
2 parents 1ff2b86 + ea914d9 commit 21c8eb3

File tree

4 files changed

+404
-9
lines changed

4 files changed

+404
-9
lines changed

‎projects/igniteui-angular/migrations/common/util.ts

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ export const getPackageVersion = (pkg: string): string => {
9090
let version = null;
9191
try {
9292
version = require(path.posix.join(pkg, 'package.json'))?.version;
93-
} catch {}
93+
} catch { }
9494

9595
return version;
9696
};
@@ -153,9 +153,9 @@ export class FileChange {
153153
public text = '',
154154
public replaceText = '',
155155
public type: 'insert' | 'replace' = 'insert'
156-
) {}
156+
) { }
157157

158-
apply(content: string) {
158+
public apply(content: string) {
159159
if (this.type === 'insert') {
160160
return `${content.substring(0, this.position)}${this.text}${content.substring(this.position)}`;
161161
}
@@ -232,31 +232,31 @@ export const flatten = (list: Node[]) => {
232232
*/
233233
class SerializerVisitor implements Visitor {
234234

235-
visitElement(element: Element, context: any): any {
235+
public visitElement(element: Element, _context: any): any {
236236
if (getHtmlTagDefinition(element.name).isVoid) {
237237
return `<${element.name}${this._visitAll(element.attrs, ' ')}/>`;
238238
}
239239

240240
return `<${element.name}${this._visitAll(element.attrs, ' ')}>${this._visitAll(element.children)}</${element.name}>`;
241241
}
242242

243-
visitAttribute(attribute: Attribute, context: any): any {
243+
public visitAttribute(attribute: Attribute, _context: any): any {
244244
return attribute.value === '' ? `${attribute.name}` : `${attribute.name}="${attribute.value}"`;
245245
}
246246

247-
visitText(text: Text, context: any): any {
247+
public visitText(text: Text, _context: any): any {
248248
return text.value;
249249
}
250250

251-
visitComment(comment: Comment, context: any): any {
251+
public visitComment(comment: Comment, _context: any): any {
252252
return `<!--${comment.value}-->`;
253253
}
254254

255-
visitExpansion(expansion: Expansion, context: any): any {
255+
public visitExpansion(expansion: Expansion, _context: any): any {
256256
return `{${expansion.switchValue}, ${expansion.type},${this._visitAll(expansion.cases)}}`;
257257
}
258258

259-
visitExpansionCase(expansionCase: ExpansionCase, context: any): any {
259+
public visitExpansionCase(expansionCase: ExpansionCase, _context: any): any {
260260
return ` ${expansionCase.value} {${this._visitAll(expansionCase.expression)}}`;
261261
}
262262

@@ -270,3 +270,14 @@ class SerializerVisitor implements Visitor {
270270

271271

272272
export const serializeNodes = (nodes: Node[]): string[] => nodes.map(node => node.visit(new SerializerVisitor(), null));
273+
274+
export const makeNgIf = (name: string, value: string) => name.startsWith('[') && value !== 'true';
275+
276+
export const stringifyAttriutes = (attributes: Attribute[]) => {
277+
let stringAttributes = '';
278+
attributes.forEach(element => {
279+
// eslint-disable-next-line max-len
280+
stringAttributes = stringAttributes.concat(element.name.includes('#') ? ` ${element.name} ` : `${element.name}="${element.value}" `);
281+
});
282+
return stringAttributes;
283+
};

‎projects/igniteui-angular/migrations/update-12_1_0/changes/inputs.json

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
{
2+
"@scheme": "../../common/schema/binding.schema.json",
3+
"changes": [
4+
{
5+
"name": "paging",
6+
"remove": "true",
7+
"owner": {
8+
"selector": "igx-grid",
9+
"type": "component"
10+
}
11+
},
12+
{
13+
"name": "paging",
14+
"remove": "true",
15+
"owner": {
16+
"selector": "igx-tree-grid",
17+
"type": "component"
18+
}
19+
},
20+
{
21+
"name": "paging",
22+
"remove": "true",
23+
"owner": {
24+
"selector": "igx-hierarchical-grid",
25+
"type": "component"
26+
}
27+
},
28+
{
29+
"name": "paging",
30+
"remove": "true",
31+
"owner": {
32+
"selector": "igx-row-island",
33+
"type": "component"
34+
}
35+
},
36+
{
37+
"name": "paginationTemplate",
38+
"remove": "true",
39+
"owner": {
40+
"selector": "igx-grid",
41+
"type": "component"
42+
}
43+
},
44+
{
45+
"name": "paginationTemplate",
46+
"remove": "true",
47+
"owner": {
48+
"selector": "igx-tree-grid",
49+
"type": "component"
50+
}
51+
},
52+
{
53+
"name": "paginationTemplate",
54+
"remove": "true",
55+
"owner": {
56+
"selector": "igx-hierarchical-grid",
57+
"type": "component"
58+
}
59+
},
60+
{
61+
"name": "paginationTemplate",
62+
"remove": "true",
63+
"owner": {
64+
"selector": "igx-row-island",
65+
"type": "component"
66+
}
67+
},
68+
{
69+
"name": "pagerHidden",
70+
"remove": "true",
71+
"owner": {
72+
"selector": "igx-paginator",
73+
"type": "component"
74+
}
75+
},
76+
{
77+
"name": "dropdownHidden",
78+
"remove": "true",
79+
"owner": {
80+
"selector": "igx-paginator",
81+
"type": "component"
82+
}
83+
},
84+
{
85+
"name": "dropdownEnabled",
86+
"remove": "true",
87+
"owner": {
88+
"selector": "igx-paginator",
89+
"type": "component"
90+
}
91+
},
92+
{
93+
"name": "pagerEnabled",
94+
"remove": "true",
95+
"owner": {
96+
"selector": "igx-paginator",
97+
"type": "component"
98+
}
99+
}
100+
]
101+
}

‎projects/igniteui-angular/migrations/update-12_1_0/index.spec.ts

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ describe(`Update to ${version}`, () => {
2323
};
2424

2525
const migrationName = 'migration-21';
26+
const lineBreaksAndSpaceRegex = /\s/g;
2627
// eslint-disable-next-line max-len
2728
const noteText = `<!--NOTE: This component has been updated by Infragistics migration: v${version}\nPlease check your template whether all bindings/event handlers are correct.-->`;
2829

@@ -194,4 +195,182 @@ export class TestComponent implements OnInit {
194195
</igx-expansion-panel-header>
195196
</igx-expansion-panel>`);
196197
});
198+
199+
it('should remove paging property and define a igx-paginator component instead', async () => {
200+
appTree.create(
201+
'/testSrc/appPrefix/component/test.component.html', `
202+
<igx-grid #grid1 [data]="data" [paging]="someVal" [perPage]="10" height="300px" width="300px">
203+
<igx-column field="Name" header="Athlete"></igx-column>
204+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
205+
<igx-column field="CountryFlag" header="Country"></igx-column>
206+
</igx-grid>`);
207+
const tree = await schematicRunner.runSchematicAsync(migrationName, {}, appTree)
208+
.toPromise();
209+
210+
expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
211+
.toEqual(`
212+
<igx-grid #grid1 [data]="data" [perPage]="10" height="300px" width="300px">
213+
<igx-paginator *ngIf="someVal"></igx-paginator>
214+
<igx-column field="Name" header="Athlete"></igx-column>
215+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
216+
<igx-column field="CountryFlag" header="Country"></igx-column>
217+
</igx-grid>`);
218+
});
219+
220+
it('should remove paging and paginationTemplate property and define a igx-paginator component with custom content', async () => {
221+
appTree.create(
222+
'/testSrc/appPrefix/component/test.component.html', `
223+
<igx-grid #grid1 [data]="data" [paging]="true" [paginationTemplate]="customPager" height="300px" width="300px">
224+
<igx-column field="Name" header="Athlete"></igx-column>
225+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
226+
<igx-column field="CountryFlag" header="Country"></igx-column>
227+
</igx-grid>
228+
<ng-template #customPager let-api>
229+
<div class="igx-grid__footer">
230+
<div id="numberPager" class="igx-paginator" style="justify-content: center;">
231+
<button [disabled]="firstPage" (click)="previousPage()" igxButton="flat">PREV</button>
232+
<button [disabled]="lastPage" (click)="nextPage()" igxButton="flat">NEXT</button>
233+
</div>
234+
</div>
235+
</ng-template>`);
236+
const tree = await schematicRunner.runSchematicAsync(migrationName, {}, appTree)
237+
.toPromise();
238+
239+
expect(tree.readContent('/testSrc/appPrefix/component/test.component.html').replace(lineBreaksAndSpaceRegex, ''))
240+
.toEqual(`
241+
<igx-grid #grid1 [data]="data" height="300px" width="300px">
242+
<igx-paginator>
243+
<!-- Auto migrated template content. Please, check your bindings! -->
244+
245+
<igx-paginator-content>
246+
247+
<div class="igx-grid__footer">
248+
<div id="numberPager" class="igx-paginator" style="justify-content: center;">
249+
<button [disabled]="firstPage" (click)="previousPage()" igxButton="flat">PREV</button>
250+
<button [disabled]="lastPage" (click)="nextPage()" igxButton="flat">NEXT</button>
251+
</div>
252+
</div>
253+
254+
</igx-paginator-content>
255+
</igx-paginator>
256+
<igx-column field="Name" header="Athlete"></igx-column>
257+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
258+
<igx-column field="CountryFlag" header="Country"></igx-column>
259+
</igx-grid>
260+
`.replace(lineBreaksAndSpaceRegex, ''));
261+
});
262+
263+
it('should remove paging property and define a igx-paginator component instead in hGrid', async () => {
264+
appTree.create(
265+
'/testSrc/appPrefix/component/test.component.html', `
266+
<igx-hierarchical-grid [paging]="parentPaging">
267+
<igx-column></igx-column>
268+
<igx-row-island [paging]="childPaging">
269+
<igx-column></igx-column>
270+
</igx-row-island>
271+
</igx-hierarchical-grid>`);
272+
const tree = await schematicRunner.runSchematicAsync(migrationName, {}, appTree)
273+
.toPromise();
274+
275+
expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
276+
.toEqual(`
277+
<igx-hierarchical-grid>
278+
<igx-paginator *ngIf="parentPaging"></igx-paginator>
279+
<igx-column></igx-column>
280+
<igx-row-island>
281+
<igx-paginator *igxPaginator *ngIf="childPaging"></igx-paginator>
282+
<igx-column></igx-column>
283+
</igx-row-island>
284+
</igx-hierarchical-grid>`);
285+
});
286+
287+
it('should remove paging property and paginationTemplate in hGrid', async () => {
288+
appTree.create(
289+
'/testSrc/appPrefix/component/test.component.html', `
290+
<igx-hierarchical-grid [paging]="parentPaging" [paginationTemplate]="myTemplate">
291+
<igx-column></igx-column>
292+
<igx-row-island [paging]="childPaging" [paginationTemplate]="childTemplate">
293+
<igx-column></igx-column>
294+
</igx-row-island>
295+
</igx-hierarchical-grid>
296+
<ng-template #myTemplate>
297+
<div>
298+
Current page: {{ hierarchicalGrid.page }}
299+
</div>
300+
</ng-template>
301+
<ng-template #childTemplate>
302+
<div>
303+
<button (click)="previous()">PREV</button>
304+
Current page: {{ hierarchicalGrid.page }}
305+
<button (click)="next()">NEXT</button>
306+
</div>
307+
</ng-template>`);
308+
const tree = await schematicRunner.runSchematicAsync(migrationName, {}, appTree)
309+
.toPromise();
310+
311+
expect(tree.readContent('/testSrc/appPrefix/component/test.component.html').replace(lineBreaksAndSpaceRegex, ''))
312+
.toEqual(`
313+
<igx-hierarchical-grid>
314+
<igx-paginator *ngIf="parentPaging">
315+
<!-- Auto migrated template content. Please, check your bindings! -->
316+
317+
<igx-paginator-content>
318+
319+
<div>
320+
Current page: {{ hierarchicalGrid.page }}
321+
</div>
322+
323+
</igx-paginator-content>
324+
</igx-paginator>
325+
<igx-column></igx-column>
326+
<igx-row-island>
327+
<igx-paginator *igxPaginator *ngIf="childPaging">
328+
329+
<!-- Auto migrated template content. Please, check your bindings! -->
330+
331+
<igx-paginator-content>
332+
333+
<div>
334+
<button (click)="previous()">PREV</button>
335+
Current page: {{ hierarchicalGrid.page }}
336+
<button (click)="next()">NEXT</button>
337+
</div>
338+
339+
</igx-paginator-content>
340+
</igx-paginator>
341+
342+
<igx-column></igx-column>
343+
</igx-row-island>
344+
</igx-hierarchical-grid>`.replace(lineBreaksAndSpaceRegex, ''));
345+
});
346+
347+
it('should define correctly paginator when using the component inside custom template', async () => {
348+
appTree.create(
349+
'/testSrc/appPrefix/component/test.component.html', `
350+
<igx-grid #grid1 [data]="data" [paging]="true" [paginationTemplate]="customPager" height="300px" width="300px">
351+
<igx-column field="Name" header="Athlete"></igx-column>
352+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
353+
<igx-column field="CountryFlag" header="Country"></igx-column>
354+
</igx-grid>
355+
<ng-template #customPager let-api>
356+
<igx-paginator #paginator [(page)]="grid.page" [totalRecords]="grid.totalRecords" [(perPage)]="grid.perPage"
357+
[selectOptions]="selectOptions" [displayDensity]="grid.displayDensity">
358+
</igx-paginator>
359+
</ng-template>`);
360+
const tree = await schematicRunner.runSchematicAsync(migrationName, {}, appTree)
361+
.toPromise();
362+
363+
expect(tree.readContent('/testSrc/appPrefix/component/test.component.html').replace(lineBreaksAndSpaceRegex, ''))
364+
.toEqual(`
365+
<igx-grid #grid1 [data]="data" height="300px" width="300px">
366+
<igx-paginator #paginator [(page)]="grid.page" [totalRecords]="grid.totalRecords" [(perPage)]="grid.perPage"
367+
[selectOptions]="selectOptions" [displayDensity]="grid.displayDensity">
368+
</igx-paginator>
369+
<igx-column field="Name" header="Athlete"></igx-column>
370+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
371+
<igx-column field="CountryFlag" header="Country"></igx-column>
372+
</igx-grid>
373+
`.replace(lineBreaksAndSpaceRegex, ''));
374+
});
375+
197376
});

0 commit comments

Comments
 (0)