🎹 Pagination: Create Overview demo page. (Angular) (#28490)

Co-authored-by: Sergey Arzamasov <[email protected]>

apps/demos/Demos/Pagination/Overview/Angular/app/app.component.css

@@ -0,0 +1,100 @@
+body {
+  overflow-x: hidden;
+}
+
+.demo-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.container {
+  min-width: 720px;
+  width: 100%;
+}
+
+::ng-deep .employees {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  min-height: 644px;
+  padding-bottom: 24px;
+}
+
+::ng-deep employee-card {
+  width: 100%;
+  max-height: 312px;
+  align-self: stretch;
+  overflow: hidden;
+  border: var(--dx-border-width) solid var(--dx-color-border);
+  border-radius: var(--dx-border-radius);
+  background-color: var(--dx-component-color-bg);
+}
+
+::ng-deep .employees.employees--forth employee-card {
+  min-width: 250px;
+  width: 390px;
+  flex-basis: calc(50% - 10px);
+}
+
+::ng-deep .employees.employees--six employee-card {
+  flex-basis: calc(33.3% - 12.5px);
+}
+
+::ng-deep .employees__img-wrapper {
+  height: 180px;
+  position: relative;
+  overflow: hidden;
+  border-bottom: var(--dx-border-width) solid var(--dx-color-border);
+  background-color: #fff;
+}
+
+::ng-deep .employees__img {
+  display: block;
+  height: 220px;
+  position: absolute;
+  content: "";
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+}
+
+::ng-deep .employees__info {
+  padding: 24px;
+}
+
+::ng-deep .employees__info-row {
+  margin-bottom: 8px;
+  text-wrap: nowrap;
+}
+
+::ng-deep .employees__info-label {
+  display: inline-block;
+  font-weight: 600;
+  vertical-align: middle;
+}
+
+::ng-deep .employees.employees--forth .employees__info-label {
+  width: 160px;
+}
+
+::ng-deep .employees.employees--six .employees__info-label {
+  width: 80px;
+}
+
+::ng-deep .employees__info-value {
+  display: inline-block;
+  text-wrap: nowrap;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  overflow: hidden;
+  white-space:nowrap
+}
+
+::ng-deep .employees.employees--forth .employees__info-value {
+  max-width: 180px;
+}
+
+::ng-deep .employees.employees--six .employees__info-value {
+  max-width: 120px;
+}

apps/demos/Demos/Pagination/Overview/Angular/app/app.component.html

@@ -1,7 +1,22 @@
-<dx-data-grid
-  id="gridContainer"
-  [dataSource]="customers"
-  [columns]="['CompanyName', 'City', 'State', 'Phone', 'Fax']"
-  [showBorders]="true"
->
-</dx-data-grid>
+<div class="container">
+  <div
+    class="employees"
+    [ngClass]="pageSize === 4 ? 'employees--forth' : 'employees--six'"
+  >
+    @for (employee of pageEmployees; track employee.ID) {
+    <employee-card [employee]="employee"></employee-card>
+    }
+  </div>
+
+  <dx-pagination
+    [showInfo]="showInfo"
+    [showNavigationButtons]="showNavigationButtons"
+    [allowedPageSizes]="allowedPageSizes"
+    [itemCount]="itemCount"
+    [pageIndex]="pageIndex"
+    [pageSize]="pageSize"
+    (pageIndexChange)="onPageIndexChange($event)"
+    (pageSizeChange)="onPageSizeChange($event)"
+  >
+  </dx-pagination>
+</div>

apps/demos/Demos/Pagination/Overview/Angular/app/app.component.ts

@@ -1,8 +1,9 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxDataGridModule } from 'devextreme-angular';
-import { Customer, Service } from './app.service';
+import { DxPaginationModule } from 'devextreme-angular';
+import { Employee, Service } from './app.service';
+import { EmployeeCard } from './employee-card/employee-card.component';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -17,22 +18,53 @@ if (window && window.config.packageConfigPaths) {
 @Component({
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
+  styleUrls: [`.${modulePrefix}/app.component.css`],
   providers: [Service],
 })
 export class AppComponent {
-  customers: Customer[];
+  employees: Employee[];
+
+  pageEmployees: Employee[];
+
+  itemCount: number;
+
+  readonly allowedPageSizes = [4, 6];
+
+  showInfo = true;
+
+  showNavigationButtons = true;
+
+  pageIndex = 1;
+
+  pageSize = 4;
+
+  onPageIndexChange(val) {
+    this.pageIndex = val;
+    this.setPageEmployees();
+  }
+
+  onPageSizeChange(val) {
+    this.pageSize = val;
+    this.setPageEmployees();
+  }
+
+  setPageEmployees() {
+    this.pageEmployees = this.employees.slice((this.pageIndex - 1) * this.pageSize, this.pageIndex * this.pageSize);
+  }
 
   constructor(service: Service) {
-    this.customers = service.getCustomers();
+    this.employees = service.getEmployees();
+    this.itemCount = this.employees.length;
+    this.setPageEmployees();
   }
 }
 
 @NgModule({
   imports: [
     BrowserModule,
-    DxDataGridModule,
+    DxPaginationModule,
   ],
-  declarations: [AppComponent],
+  declarations: [AppComponent, EmployeeCard],
   bootstrap: [AppComponent],
 })
 export class AppModule { }