Skip to content

Commit e9d20c0

Browse files
hakimiohakimio
committed
chore(virtual-table-demo): refactoring and fixes
1 parent e2265c1 commit e9d20c0

47 files changed

Lines changed: 321 additions & 382 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.global/integration-app.style.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ a {
8888
color: red;
8989
}
9090

91-
.spinner.mat-progress-spinner {
91+
.spinner.mat-mdc-progress-spinner {
9292
position: absolute;
9393
right: 0;
9494
}

‎apps/tooltip-demo/src/samples/guide/guide.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ <h2>Example with remove Nodes</h2>
113113
[itemSize]="24"
114114
[style.height.px]="200"
115115
>
116-
<ng-container *cdkVirtualFor="let favorite of favorites">
116+
<ng-container *cdkVirtualFor="let favorite of favorites()">
117117
<ng-template
118118
[ngTemplateOutlet]="virtualRef"
119119
[ngTemplateOutletContext]="{$implicit: favorite}"

‎apps/tooltip-demo/src/samples/guide/guide.component.ts‎

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import {
66
import {NgTemplateOutlet} from '@angular/common';
77
import {
88
ChangeDetectionStrategy,
9-
ChangeDetectorRef,
109
Component,
1110
inject,
1211
NgZone,
12+
signal,
1313
VERSION,
1414
Version,
1515
} from '@angular/core';
@@ -37,36 +37,37 @@ interface Favorite {
3737
})
3838
export default class GuideComponent {
3939
private readonly zone = inject(NgZone);
40-
protected readonly cd = inject(ChangeDetectorRef);
4140

4241
public version: Version = VERSION;
4342
// eslint-disable-next-line @typescript-eslint/no-magic-numbers,@typescript-eslint/explicit-function-return-type
44-
public favorites: Favorite[] = new Array(10000).fill(0).map(
45-
// eslint-disable-next-line @typescript-eslint/typedef
46-
(_, i: number): Favorite => ({
47-
id: i + 1,
48-
title: Math.random()
49-
// eslint-disable-next-line @typescript-eslint/no-magic-numbers
50-
.toString(36)
51-
.replaceAll(/[^a-z]+/g, '')
52-
.slice(0, 5),
53-
isMarked: false,
54-
}),
43+
public favorites = signal<Favorite[]>(
44+
new Array(10000).fill(0).map(
45+
// eslint-disable-next-line @typescript-eslint/typedef
46+
(_, i: number): Favorite => ({
47+
id: i + 1,
48+
title: Math.random()
49+
// eslint-disable-next-line @typescript-eslint/no-magic-numbers
50+
.toString(36)
51+
.replaceAll(/[^a-z]+/g, '')
52+
.slice(0, 5),
53+
isMarked: false,
54+
}),
55+
),
5556
);
5657

5758
public markFavorite(favorite: Favorite): void {
5859
this.zone.runOutsideAngular((): void => {
5960
// eslint-disable-next-line no-restricted-globals
6061
setTimeout((): void => {
61-
this.favorites = this.favorites.map((item: Favorite): Favorite => {
62-
if (favorite.id === item.id) {
63-
return {...favorite, isMarked: !favorite.isMarked};
64-
}
62+
this.favorites.set(
63+
this.favorites().map((item: Favorite): Favorite => {
64+
if (favorite.id === item.id) {
65+
return {...favorite, isMarked: !favorite.isMarked};
66+
}
6567

66-
return item;
67-
});
68-
this.cd.detectChanges();
69-
// eslint-disable-next-line @typescript-eslint/no-magic-numbers
68+
return item;
69+
}),
70+
);
7071
}, 100);
7172
});
7273
}
@@ -75,11 +76,11 @@ export default class GuideComponent {
7576
this.zone.runOutsideAngular((): void => {
7677
// eslint-disable-next-line no-restricted-globals
7778
setTimeout((): void => {
78-
this.favorites = this.favorites.filter(
79-
(item: Favorite): boolean => item.id !== favorite.id,
79+
this.favorites.set(
80+
this.favorites().filter(
81+
(item: Favorite): boolean => item.id !== favorite.id,
82+
),
8083
);
81-
this.cd.detectChanges();
82-
// eslint-disable-next-line @typescript-eslint/no-magic-numbers
8384
}, 100);
8485
});
8586
}

‎apps/virtual-table-demo/src/mocks-generator.ts‎

Lines changed: 13 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,25 @@
1-
/* eslint-disable no-magic-numbers,@typescript-eslint/no-magic-numbers,max-classes-per-file */
21
import {PlainObject} from '@angular-ru/cdk/typings';
3-
import {WebWorkerThreadService} from '@angular-ru/cdk/webworker';
42

53
export class MocksGenerator {
6-
// eslint-disable-next-line max-lines-per-function
74
public static async generator(
85
rowsNumber: number,
96
colsNumber: number,
107
startIndex = 0,
118
): Promise<PlainObject[]> {
12-
return new WebWorkerThreadService().run<PlainObject[], any>(
13-
// eslint-disable-next-line max-lines-per-function
14-
(data: any): PlainObject[] => {
15-
class FakeGenerator {
16-
// eslint-disable-next-line max-lines-per-function
17-
public static generateTable(
18-
rows: number,
19-
cols: number,
20-
start: number,
21-
): PlainObject[] {
22-
const startDate: Date = new Date();
23-
const endDate: Date = new Date(
24-
new Date().setFullYear(new Date().getFullYear() + 1),
25-
);
26-
27-
// eslint-disable-next-line max-lines-per-function
28-
return new Array(rows).fill(0).map(
29-
// eslint-disable-next-line max-lines-per-function
30-
(_: unknown, index: number): PlainObject => {
31-
const idx: number = start + index + 1;
32-
33-
const baseRow: PlainObject = {
34-
id: idx,
35-
reverseId:
36-
Math.round(
37-
Math.random() +
38-
rows * 512 +
39-
cols +
40-
start * 10,
41-
) * 1024,
42-
someDate: new Date(
43-
startDate.getTime() +
44-
Math.random() *
45-
(endDate.getTime() - startDate.getTime()),
46-
).getTime(),
47-
name: `Random - ${((Math.random() + 1) * 100).toFixed(0)}__${idx}`,
48-
description: `Random - ${((Math.random() + 1) * 100).toFixed(0)}__${idx}`,
49-
guid: `${'5cdae5b2ba0a57f709b72142' + '__'}${idx}`,
50-
someBoolean: Math.random() > 0.5,
51-
someNull: Math.random() > 0.5 ? null : 'not null',
52-
};
53-
54-
// eslint-disable-next-line @typescript-eslint/typedef,@typescript-eslint/explicit-function-return-type
55-
const random = (min: number, max: number) =>
56-
min + Math.random() * (max - min);
57-
58-
if (cols > 7) {
59-
baseRow[
60-
'About Big Text And More Powerful Label Fugiat Tempor Sunt Nostrud'
61-
] = new Array(Math.ceil(random(0, 1000)))
62-
.fill(null)
63-
.map((): string =>
64-
(~~(Math.random() * 36)).toString(36),
65-
)
66-
.join('');
67-
68-
for (let i = 7; i <= cols - 1; i++) {
69-
baseRow[`column-${i}`] = `$row-${idx} $col-${i}`;
70-
}
71-
}
72-
73-
return baseRow;
74-
},
75-
);
76-
}
77-
}
78-
79-
return FakeGenerator.generateTable(data.rows, data.cols, data.start);
9+
const worker = new Worker(new URL('./mocks-generator.worker', import.meta.url));
10+
11+
return new Promise<PlainObject[]>(
12+
(resolve: (value: PlainObject[]) => void): void => {
13+
worker.onmessage = ({data}: {data: PlainObject[]}) => {
14+
resolve(data);
15+
};
16+
17+
worker.postMessage({
18+
rows: rowsNumber,
19+
cols: colsNumber,
20+
start: startIndex,
21+
});
8022
},
81-
{rows: rowsNumber, cols: colsNumber, start: startIndex},
8223
);
8324
}
8425
}

‎apps/virtual-table-demo/src/mocks-generator.worker.ts‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import {PlainObject} from '@angular-ru/cdk/typings';
2+
import {
3+
randAwsRequestId,
4+
randBetweenDate,
5+
randBoolean,
6+
randCatchPhrase,
7+
randNumber,
8+
randProductDescription,
9+
randProductName,
10+
randUuid,
11+
} from '@ngneat/falso';
12+
13+
interface DataType {
14+
rows: number;
15+
cols: number;
16+
start: number;
17+
}
18+
19+
addEventListener('message', ({data}: {data: DataType}) => {
20+
const {rows, cols, start} = data;
21+
const startDate: Date = new Date();
22+
const endDate: Date = new Date(new Date().setFullYear(new Date().getFullYear() + 1));
23+
24+
const generatedData = Array.from(
25+
{
26+
length: rows,
27+
},
28+
(_: unknown, index: number): PlainObject => {
29+
const idx: number = start + index + 1;
30+
const reverseIdMin = (rows * 512 + cols + start * 10) * 1024;
31+
const reverseIdMax = reverseIdMin + 1024;
32+
33+
const baseRow: PlainObject = {
34+
id: idx,
35+
reverseId: randNumber({
36+
min: reverseIdMin,
37+
max: reverseIdMax,
38+
}),
39+
someDate: randBetweenDate({
40+
from: startDate,
41+
to: endDate,
42+
}).toLocaleDateString(),
43+
name: randProductName({
44+
maxCharCount: 20,
45+
}),
46+
description: randProductDescription(),
47+
uuid: randUuid(),
48+
someBoolean: randBoolean(),
49+
someNull: randBoolean() ? null : 'not null',
50+
};
51+
52+
if (cols > 7) {
53+
baseRow[randCatchPhrase()] = randAwsRequestId({
54+
maxCharCount: 1e3,
55+
});
56+
57+
for (let i = 7; i <= cols - 1; i++) {
58+
baseRow[`column-${i}`] = `$row-${idx} $col-${i}`;
59+
}
60+
}
61+
62+
return baseRow;
63+
},
64+
);
65+
66+
postMessage(generatedData);
67+
});

‎apps/virtual-table-demo/src/samples/sample-eight/sample-eight.component.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,16 @@
1919
<ngx-table-builder
2020
#table
2121
[row-height]="40"
22-
[source]="data"
22+
[source]="data()"
2323
[vertical-border]="false"
2424
>
2525
<ngx-column
2626
important-template
2727
key="active"
2828
sticky
2929
vertical-line
30-
width="80"
30+
width="46"
31+
[css-class]="['checkbox-column']"
3132
>
3233
<ng-template ngx-th />
3334
<ng-template

0 commit comments

Comments
 (0)