Skip to content

Commit cec8331

Browse files
Sullivan008kzk-ptr
Sullivan008
authored and
kzk-ptr
committed
- Install the following component: rxjs ^6.5.5.
- Change the title of a web application. - Modify the AgGrid theme in styles.scss file. - Configure the routes: - Default -> DashboardComponent. - Everything else -> PageNotFoundComponent. - Creating PageNotFound Component. - Creating Footer Component. - Creating Header Component. - Createing Dashborad Component. - Implement AgGrid in Dashboard Component. - Defining the Default Column Definition. - Resizable, LockPosition, Sortable. - Defining the Column Definitions. - Defining Cache Overflow Size. - Defining Components. - LoadingRenderer: If the items have not yet loaded, a loading gif will appear in the first Id Cell. - Implement FirstDataRenderer Event - Adjust the width of the column when rendering for the first time. - Implement GridReady Event: - In the event, we define the HTTP Server-Side Request. - Creating HttpService class (UserService): - In the service, we define the HTTP Request to the UserController. - Creating HTTP Request and Response Models.
1 parent a4f0aee commit cec8331

24 files changed

+339
-31
lines changed

‎Angular-ServerSidePagination-FrontEnd/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"ag-grid-angular": "^23.2.1",
2323
"ag-grid-community": "^23.2.1",
2424
"bootstrap": "^4.5.0",
25-
"rxjs": "~6.5.4",
25+
"rxjs": "^6.5.5",
2626
"tslib": "^1.10.0",
2727
"zone.js": "~0.10.2"
2828
},

‎Angular-ServerSidePagination-FrontEnd/src/app/app-routing.module.ts‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
import { NgModule } from '@angular/core';
22
import { Routes, RouterModule } from '@angular/router';
3+
import { DashboardComponent } from './dashboard/dashboard.component';
4+
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
35

4-
5-
const routes: Routes = [];
6+
const routes: Routes = [
7+
{ path: '', component: DashboardComponent },
8+
{
9+
path: 'not-found',
10+
component: PageNotFoundComponent,
11+
},
12+
{ path: '**', redirectTo: 'not-found' },
13+
];
614

715
@NgModule({
816
imports: [RouterModule.forRoot(routes)],
9-
exports: [RouterModule]
17+
exports: [RouterModule],
1018
})
11-
export class AppRoutingModule { }
19+
export class AppRoutingModule {}

‎Angular-ServerSidePagination-FrontEnd/src/app/app.component.html‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1-
<div class="container">
2-
<div class="row">
3-
<div class="col-md-12"></div>
1+
<div id="wrapper">
2+
<app-header></app-header>
3+
4+
<div class="container">
5+
<router-outlet></router-outlet>
46
</div>
7+
8+
<app-footer></app-footer>
59
</div>

‎Angular-ServerSidePagination-FrontEnd/src/app/app.component.scss‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
1-
.container {
2-
padding-top: 20px;
3-
min-height: 612px;
1+
#wrapper {
2+
padding: 50px 0;
3+
position: absolute;
4+
top: 0;
5+
bottom: 0;
6+
left: 0;
7+
right: 0;
8+
9+
.container {
10+
width: 100%;
11+
height: 100%;
12+
max-width: 1920px;
13+
}
414
}

‎Angular-ServerSidePagination-FrontEnd/src/app/app.component.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import { Component } from '@angular/core';
33
@Component({
44
selector: 'app-root',
55
templateUrl: './app.component.html',
6-
styleUrls: ['./app.component.scss']
6+
styleUrls: ['./app.component.scss'],
77
})
8-
export class AppComponent {
9-
title = 'Angular-ServerSidePagination-FrontEnd';
10-
}
8+
export class AppComponent {}

‎Angular-ServerSidePagination-FrontEnd/src/app/app.module.ts‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,30 @@
11
import { BrowserModule } from '@angular/platform-browser';
2+
import { HttpClientModule } from '@angular/common/http';
23
import { NgModule } from '@angular/core';
34

45
import { AppRoutingModule } from './app-routing.module';
56
import { AppComponent } from './app.component';
67
import { AgGridModule } from 'ag-grid-angular';
78

9+
import { DashboardComponent } from './dashboard/dashboard.component';
10+
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
11+
import { FooterComponent } from './footer/footer.component';
12+
import { HeaderComponent } from './header/header.component';
13+
814
@NgModule({
9-
declarations: [AppComponent],
10-
imports: [BrowserModule, AppRoutingModule, AgGridModule.withComponents([])],
15+
declarations: [
16+
AppComponent,
17+
DashboardComponent,
18+
PageNotFoundComponent,
19+
FooterComponent,
20+
HeaderComponent,
21+
],
22+
imports: [
23+
BrowserModule,
24+
AppRoutingModule,
25+
AgGridModule.withComponents([]),
26+
HttpClientModule,
27+
],
1128
providers: [],
1229
bootstrap: [AppComponent],
1330
})

‎Angular-ServerSidePagination-FrontEnd/src/app/dashboard/dashboard.component.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div id="user-table-block">
2+
<ag-grid-angular
3+
class="ag-theme-balham"
4+
[gridOptions]="gridOptions"
5+
(gridReady)="onGridReady($event)"
6+
(firstDataRendered)="onFirstDataRendered($event)"
7+
>
8+
</ag-grid-angular>
9+
</div>

‎Angular-ServerSidePagination-FrontEnd/src/app/dashboard/dashboard.component.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
div#user-table-block {
2+
height: 100%;
3+
width: 100%;
4+
5+
.ag-theme-balham {
6+
width: 100%;
7+
height: 100%;
8+
padding: 5em 5em 5em 5em;
9+
}
10+
}

‎Angular-ServerSidePagination-FrontEnd/src/app/dashboard/dashboard.component.ts‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { IGetRowsParams } from 'ag-grid-community/dist/lib/interfaces/iDatasource';
3+
import {
4+
AgGridEvent,
5+
ILoadingCellRendererParams,
6+
GridOptions,
7+
} from 'ag-grid-community';
8+
9+
import { UserService } from './services/user.service';
10+
import { GetAllUserResponseModel } from './models/getAllUserResponseModel.model';
11+
12+
@Component({
13+
selector: 'app-dashboard',
14+
templateUrl: './dashboard.component.html',
15+
styleUrls: ['./dashboard.component.scss'],
16+
})
17+
export class DashboardComponent implements OnInit {
18+
private readonly columnDefs: {}[];
19+
private readonly defaultColDef: {
20+
resizable: boolean;
21+
lockPosition: boolean;
22+
sortable: boolean;
23+
};
24+
25+
private readonly cacheOverflowSize: number;
26+
private readonly components: {};
27+
28+
public gridOptions: GridOptions;
29+
30+
constructor(private userService: UserService) {
31+
this.cacheOverflowSize = 2;
32+
33+
this.defaultColDef = {
34+
resizable: true,
35+
lockPosition: true,
36+
sortable: true,
37+
};
38+
39+
this.columnDefs = [
40+
{
41+
headerName: 'Id',
42+
field: 'id',
43+
minWidth: 55,
44+
maxWidth: 55,
45+
cellRenderer: 'loadingRenderer',
46+
},
47+
{
48+
headerName: 'First name',
49+
field: 'firstName',
50+
minWidth: 250,
51+
maxWidth: 360,
52+
},
53+
{
54+
headerName: 'Last name',
55+
field: 'lastName',
56+
minWidth: 250,
57+
maxWidth: 360,
58+
},
59+
{
60+
headerName: 'Email address',
61+
field: 'email',
62+
minWidth: 200,
63+
maxWidth: 550,
64+
},
65+
{
66+
headerName: 'Gender',
67+
field: 'gender',
68+
minWidth: 90,
69+
maxWidth: 90,
70+
},
71+
{
72+
headerName: 'Company',
73+
field: 'company',
74+
minWidth: 300,
75+
maxWidth: 350,
76+
},
77+
];
78+
79+
this.components = {
80+
loadingRenderer: function (params: ILoadingCellRendererParams) {
81+
if (params.value) {
82+
return params.value;
83+
} else {
84+
return '<img src="./assets/loading.gif">';
85+
}
86+
},
87+
};
88+
}
89+
90+
ngOnInit(): void {
91+
this.gridOptions = {
92+
headerHeight: 45,
93+
rowHeight: 30,
94+
paginationPageSize: 90,
95+
rowModelType: 'infinite',
96+
pagination: true,
97+
columnDefs: this.columnDefs,
98+
defaultColDef: this.defaultColDef,
99+
cacheOverflowSize: this.cacheOverflowSize,
100+
components: this.components,
101+
};
102+
}
103+
104+
public onFirstDataRendered(params: AgGridEvent): void {
105+
params.api.sizeColumnsToFit();
106+
}
107+
108+
public onGridReady(params: AgGridEvent): void {
109+
const dataSource = {
110+
getRows: (params: IGetRowsParams) => {
111+
this.userService.getUsers(params).subscribe(
112+
(response: GetAllUserResponseModel) => {
113+
params.successCallback(response.users, response.totalRecords);
114+
},
115+
(err) => {
116+
console.log(err);
117+
}
118+
);
119+
},
120+
};
121+
122+
params.api.setDatasource(dataSource);
123+
}
124+
}

‎Angular-ServerSidePagination-FrontEnd/src/app/dashboard/models/getAllUserResponseModel.model.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { User } from './user.model';
2+
3+
export class GetAllUserResponseModel {
4+
public users: User[];
5+
public totalRecords: number;
6+
}

0 commit comments

Comments
 (0)