Skip to content

Commit 5c0cfae

Browse files
Mariela TihovaMariela Tihova
Mariela Tihova
authored and
Mariela Tihova
committed
feat(grid-lite-overview): use angular grid lite wrappers
1 parent b183539 commit 5c0cfae

4 files changed

Lines changed: 211 additions & 55 deletions

File tree

‎src/app/grid-lite/grid-lite-data.service.ts‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,12 @@ export type User = {
2727
priority: 'Low' | 'Standard' | 'High';
2828
satisfaction: number;
2929
registeredAt: Date;
30+
// HR-style fields
31+
department: string;
32+
role: string;
33+
location: string;
34+
manager: string;
35+
employmentType: 'Full-Time' | 'Part-Time' | 'Contract';
3036
};
3137

3238
@Injectable({
@@ -37,16 +43,22 @@ export class GridLiteDataService {
3743

3844
private maleFirstNames = ['John', 'Bob', 'Charlie', 'Frank', 'Henry', 'Jack', 'Liam', 'Noah', 'Peter'];
3945
private femaleFirstNames = ['Jane', 'Alice', 'Diana', 'Eve', 'Grace', 'Ivy', 'Kate', 'Mia', 'Olivia', 'Quinn', 'Rachel'];
40-
private lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis',
46+
private lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis',
4147
'Rodriguez', 'Martinez', 'Wilson', 'Anderson', 'Taylor', 'Thomas', 'Moore', 'Jackson', 'White', 'Harris'];
42-
private productNames = ['Widget', 'Gadget', 'Doohickey', 'Thingamajig', 'Gizmo', 'Contraption',
48+
private productNames = ['Widget', 'Gadget', 'Doohickey', 'Thingamajig', 'Gizmo', 'Contraption',
4349
'Device', 'Tool', 'Apparatus', 'Instrument', 'Machine', 'Equipment'];
4450
private priorities: ('Low' | 'Standard' | 'High')[] = ['Low', 'Standard', 'High'];
4551

52+
// HR-style data arrays
53+
private departments = ['Engineering', 'Marketing', 'Sales', 'Finance'];
54+
private roles = ['Developer', 'Designer', 'Manager', 'Analyst', 'Recruiter', 'Accountant', 'Sales Rep', 'Support Specialist'];
55+
private locations = ['New York', 'London', 'Tokyo', 'Berlin', 'Paris', 'Sydney', 'Toronto', 'San Francisco'];
56+
private employmentTypes: ('Full-Time' | 'Part-Time' | 'Contract')[] = ['Full-Time', 'Part-Time', 'Contract'];
57+
4658
private randomFirstName(): { name: string; gender: 'men' | 'women' } {
4759
const isMale = this.randomBoolean();
48-
return isMale
49-
? { name: this.randomElement(this.maleFirstNames), gender: 'men' }
60+
return isMale
61+
? { name: this.randomElement(this.maleFirstNames), gender: 'men' }
5062
: { name: this.randomElement(this.femaleFirstNames), gender: 'women' };
5163
}
5264

@@ -112,13 +124,20 @@ export class GridLiteDataService {
112124
id: this.generateId(),
113125
firstName,
114126
lastName,
115-
age: this.randomInt(18, 90),
127+
age: this.randomInt(18, 65),
116128
email,
117129
avatar: `assets/images/${gender}/${this.randomInt(1, 70)}.jpg`,
118130
active: this.randomBoolean(),
119131
priority: this.randomElement(this.priorities),
120132
satisfaction: this.randomInt(0, 5),
121-
registeredAt: new Date(Date.now() - this.randomInt(0, 365 * 24 * 60 * 60 * 1000))
133+
registeredAt: new Date(Date.now() - this.randomInt(0, 365 * 24 * 60 * 60 * 1000)),
134+
135+
// HR-style columns
136+
department: this.randomElement(this.departments),
137+
role: this.randomElement(this.roles),
138+
location: this.randomElement(this.locations),
139+
manager: `${this.randomElement(this.maleFirstNames)} ${this.randomElement(this.lastNames)}`,
140+
employmentType: this.randomElement(this.employmentTypes),
122141
};
123142
}
124143

‎src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.html‎

Lines changed: 62 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,64 @@
11
<div class="grid-lite-wrapper">
2-
<igc-grid-lite [data]="data">
3-
<igc-grid-lite-column field="avatar" header="Avatar" [cellTemplate]="avatarTemplate"></igc-grid-lite-column>
4-
<igc-grid-lite-column field="firstName" header="First name" sortable filterable resizable></igc-grid-lite-column>
5-
<igc-grid-lite-column field="lastName" header="Last name" sortable filterable resizable></igc-grid-lite-column>
6-
<igc-grid-lite-column field="email" header="Email Address"></igc-grid-lite-column>
7-
<igc-grid-lite-column field="satisfaction" header="Satisfaction rating" data-type="number" sortable filterable [cellTemplate]="satisfactionTemplate"></igc-grid-lite-column>
8-
<igc-grid-lite-column field="registeredAt" header="Registered @" sortable [cellTemplate]="registeredAtTemplate"></igc-grid-lite-column>
9-
</igc-grid-lite>
2+
<igx-grid-lite [data]="data">
3+
4+
<!-- Avatar -->
5+
<igx-grid-lite-column field="avatar" header="Avatar">
6+
<ng-template igxGridLiteCell let-value>
7+
<igx-avatar shape="circle" alt="User avatar" [src]="value">
8+
</igx-avatar>
9+
</ng-template>
10+
</igx-grid-lite-column>
11+
12+
<!-- First & Last Name -->
13+
<igx-grid-lite-column field="firstName" header="First Name" sortable filterable
14+
resizable></igx-grid-lite-column>
15+
<igx-grid-lite-column field="lastName" header="Last Name" sortable filterable resizable></igx-grid-lite-column>
16+
17+
<!-- Email -->
18+
<igx-grid-lite-column field="email" header="Email Address" resizable></igx-grid-lite-column>
19+
20+
<!-- Department -->
21+
<igx-grid-lite-column field="department" header="Department" sortable filterable resizable>
22+
<ng-template igxGridLiteCell let-value>
23+
<igx-chip [ngClass]="getDepartmentBadgeVariant(value)">
24+
{{ value }}
25+
</igx-chip>
26+
</ng-template>
27+
</igx-grid-lite-column>
28+
29+
<!-- Role -->
30+
<igx-grid-lite-column field="role" header="Role" sortable filterable resizable></igx-grid-lite-column>
31+
32+
<!-- Location -->
33+
<igx-grid-lite-column field="location" header="Location" sortable filterable resizable></igx-grid-lite-column>
34+
35+
<!-- Manager -->
36+
<igx-grid-lite-column field="manager" header="Manager" sortable filterable resizable></igx-grid-lite-column>
37+
38+
<!-- Employment Type -->
39+
<igx-grid-lite-column field="employmentType" header="Employment Type" sortable filterable resizable>
40+
41+
<ng-template igxGridLiteCell let-value>
42+
<igx-chip [ngClass]="getEmploymentTypeOutline(value)">
43+
{{ value }}
44+
</igx-chip>
45+
</ng-template>
46+
</igx-grid-lite-column>
47+
48+
<!-- Satisfaction Rating -->
49+
<igx-grid-lite-column field="satisfaction" header="Satisfaction Rating" dataType="number" sortable filterable
50+
resizable>
51+
<ng-template igxGridLiteCell let-value>
52+
<igc-rating [value]="value" [readonly]="true" [min]="0" [max]="5" [step]="0.01"></igc-rating>
53+
</ng-template>
54+
</igx-grid-lite-column>
55+
56+
<!-- Registered On -->
57+
<igx-grid-lite-column field="registeredAt" header="Registered On" sortable resizable>
58+
<ng-template igxGridLiteCell let-value>
59+
<span>{{ value | date:'medium' }}</span>
60+
</ng-template>
61+
</igx-grid-lite-column>
62+
63+
</igx-grid-lite>
1064
</div>

‎src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.scss‎

Lines changed: 72 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,77 @@
99
height: 100%;
1010
}
1111

12-
igc-grid-lite {
12+
igx-grid-lite {
1313
min-height: 75vh;
1414
}
15+
16+
.avatar-name {
17+
display: flex;
18+
align-items: center;
19+
gap: 8px;
20+
}
21+
22+
.avatar-name span {
23+
font-weight: 500;
24+
font-size: 0.95rem;
25+
}
26+
27+
igx-badge {
28+
--size: 28px;
29+
font-size: calc(var(--size) / 2.2);
30+
line-height: normal;
31+
font-weight: 500;
32+
text-transform: capitalize;
33+
}
34+
35+
.badge-cell {
36+
display: flex;
37+
justify-content: center;
38+
align-items: center;
39+
padding: 2px 6px;
40+
}
41+
42+
igc-rating {
43+
display: block;
44+
margin: 0 auto;
45+
}
46+
47+
.success {
48+
--background: #4caf50;
49+
--hover-background: #45a049;
50+
--focus-background: #388e3c;
51+
}
52+
53+
.warning {
54+
--background: #ffb74d;
55+
--hover-background: #ffa726;
56+
--focus-background: #fb8c00;
57+
}
58+
59+
.primary {
60+
--background: #64b5f6;
61+
--hover-background: #42a5f5;
62+
--focus-background: #1e88e5;
63+
}
64+
65+
.error {
66+
--background: #e57373;
67+
--hover-background: #ef5350;
68+
--focus-background: #f44336;
69+
}
70+
71+
.outline-success {
72+
--background: transparent;
73+
--border-color: #4caf50;
74+
}
75+
76+
.outline-warning {
77+
--background: transparent;
78+
--border-color: #ffb74d;
79+
}
80+
81+
.outline-primary {
82+
--background: transparent;
83+
--border-color: #64b5f6;
84+
}
85+

‎src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.ts‎

Lines changed: 52 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,70 @@
11
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
22
import { CommonModule } from '@angular/common';
33
import {
4-
defineComponents,
5-
IgcRatingComponent,
6-
IgcCheckboxComponent,
7-
IgcSelectComponent,
8-
IgcAvatarComponent
4+
defineComponents,
5+
IgcRatingComponent
96
} from 'igniteui-webcomponents';
10-
import { IgcGridLite } from 'igniteui-grid-lite';
117
import { GridLiteDataService, User } from '../grid-lite-data.service';
8+
import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective } from 'igniteui-angular/grids/lite';
9+
import { IgxAvatarComponent } from 'igniteui-angular/avatar';
10+
import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
11+
import { IgxSelectComponent } from 'igniteui-angular/select';
12+
import { IgxBadgeComponent, IgxBadgeModule } from 'igniteui-angular/badge';
13+
import { IgxChipComponent } from 'igniteui-angular';
1214

13-
IgcGridLite.register();
1415

1516
defineComponents(
16-
IgcAvatarComponent,
17-
IgcRatingComponent,
18-
IgcCheckboxComponent,
19-
IgcSelectComponent
17+
IgcRatingComponent
2018
);
2119

2220
@Component({
23-
selector: 'app-grid-lite-overview',
24-
templateUrl: './grid-lite-overview.component.html',
25-
styleUrls: ['./grid-lite-overview.component.scss'],
26-
imports: [CommonModule],
27-
schemas: [CUSTOM_ELEMENTS_SCHEMA]
21+
selector: 'app-grid-lite-overview',
22+
templateUrl: './grid-lite-overview.component.html',
23+
styleUrls: ['./grid-lite-overview.component.scss'],
24+
imports: [
25+
CommonModule,
26+
IgxGridLiteComponent,
27+
IgxGridLiteColumnComponent,
28+
IgxAvatarComponent,
29+
IgxGridLiteCellTemplateDirective,
30+
IgxCheckboxComponent,
31+
IgxSelectComponent,
32+
IgxBadgeModule,
33+
IgxBadgeComponent,
34+
IgxChipComponent
35+
],
36+
schemas: [CUSTOM_ELEMENTS_SCHEMA]
2837
})
2938
export class GridLiteOverviewComponent implements OnInit {
30-
private dataService = inject(GridLiteDataService);
39+
private dataService = inject(GridLiteDataService);
3140

32-
public data: User[] = [];
41+
public data: User[] = [];
3342

34-
ngOnInit() {
35-
this.data = this.dataService.generateUsers(1000);
36-
}
43+
ngOnInit() {
44+
this.data = this.dataService.generateUsers(1000);
45+
}
3746

38-
protected avatarTemplate = (params: any) => {
39-
const cell = document.createElement('igc-avatar');
40-
cell.setAttribute('shape', 'circle');
41-
cell.setAttribute('alt', 'User avatar');
42-
cell.setAttribute('src', params.value);
43-
return cell;
44-
};
47+
public getDepartmentBadgeVariant = (status: string): string => {
48+
switch (status) {
49+
case "Engineering":
50+
return "primary";
51+
case "Marketing":
52+
return "warning";
53+
case "Sales":
54+
return "error";
55+
case "Finance":
56+
return "success";
57+
default:
58+
return "primary";
59+
}
60+
};
4561

46-
protected satisfactionTemplate = (params: any) => {
47-
const rating = document.createElement('igc-rating');
48-
rating.setAttribute('readonly', '');
49-
rating.setAttribute('value', params.value.toString());
50-
return rating;
51-
};
52-
53-
protected registeredAtTemplate = (params: any) => {
54-
const span = document.createElement('span');
55-
span.textContent = params.value.toLocaleString();
56-
return span;
57-
};
62+
public getEmploymentTypeOutline = (type: string): string => {
63+
switch (type) {
64+
case 'Full-Time': return 'outline-success';
65+
case 'Part-Time': return 'outline-warning';
66+
case 'Contract': return 'outline-primary';
67+
default: return 'outline-primary';
68+
}
69+
};
5870
}

0 commit comments

Comments
 (0)