CardView: Card template demo (DevExpress#30029)

Co-authored-by: wdevfx <ilya.vinogradov@devexpress.com>

Author: Andrey Dolzhikov

apps/demos/Demos/CardView/CardTemplate/Angular/app/app.component.html

@@ -1,6 +1,54 @@
-<dx-card-view id="cardView" [dataSource]="customers" keyExpr="ID">
-  <dxi-card-view-column
-    *ngFor="let column of columns"
-    [dataField]="column"
-  ></dxi-card-view-column>
+<dx-card-view
+  [dataSource]="vehicles"
+  cardsPerRow="auto"
+  [cardMinWidth]="260"
+  cardTemplate="vehicleCardTemplate"
+>
+  <dxo-card-view-header-filter [visible]="true"></dxo-card-view-header-filter>
+  <dxo-card-view-search-panel [visible]="true"></dxo-card-view-search-panel>
+  <dxo-card-view-paging [pageSize]="12"></dxo-card-view-paging>
+
+  <dxi-card-view-column dataField="TrademarkName"></dxi-card-view-column>
+  <dxi-card-view-column dataField="Name"></dxi-card-view-column>
+  <dxi-card-view-column dataField="Price" format="currency">
+    <dxo-card-view-column-header-filter
+      [groupInterval]="20000"
+    ></dxo-card-view-column-header-filter>
+  </dxi-card-view-column>
+  <dxi-card-view-column dataField="CategoryName"></dxi-card-view-column>
+  <dxi-card-view-column dataField="Modification"></dxi-card-view-column>
+  <dxi-card-view-column dataField="BodyStyleName"></dxi-card-view-column>
+  <dxi-card-view-column dataField="Horsepower"></dxi-card-view-column>
+
+  <div *dxTemplate="let model of 'vehicleCardTemplate'">
+    <ng-container *ngIf="model.card?.data as data">
+      <vehicle-card
+        [id]="data.ID"
+        [model]="data.TrademarkName + ' ' + data.Name"
+        [price]="getFormattedPrice(model.card)"
+        [categoryName]="data.CategoryName"
+        [modification]="data.Modification"
+        [bodyStyleName]="data.BodyStyleName"
+        [horsepower]="data.Horsepower"
+        (showInfo)="showInfo(data)"
+      ></vehicle-card>
+    </ng-container>
+  </div>
 </dx-card-view>
+
+<dx-popup
+  [width]="350"
+  [height]="240"
+  [(visible)]="popupVisible"
+  [dragEnabled]="false"
+  [hideOnOutsideClick]="true"
+  title="Image Info"
+>
+  <dxo-position at="center" my="center" collision="fit"></dxo-position>
+  <div *dxTemplate="let _ of 'content'">
+    <license-info
+      *ngIf="currentVehicle"
+      [vehicle]="currentVehicle"
+    ></license-info>
+  </div>
+</dx-popup>

apps/demos/Demos/CardView/CardTemplate/Angular/app/app.component.ts

@@ -1,8 +1,16 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxCardViewModule } from 'devextreme-angular';
-import { Customer, Service } from './app.service';
+import { 
+  DxButtonModule,
+  DxCardViewModule,
+  DxPopupModule,
+  DxTemplateModule,
+} from 'devextreme-angular';
+import { CardInfo } from 'devextreme-angular/ui/card-view';
+import { Service, Vehicle } from './app.service';
+import { VehicleCard } from './vehicle-card/vehicle-card.component';
+import { LicenseInfo } from './license-info/license-info.component';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -20,21 +28,39 @@ if (window && window.config?.packageConfigPaths) {
   providers: [Service],
 })
 export class AppComponent {
-  customers: Customer[];
+  vehicles: Vehicle[];
 
-  columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
+  popupVisible = false;
+  currentVehicle: Vehicle | null = null;
 
   constructor(service: Service) {
-    this.customers = service.getCustomers();
+    this.vehicles = service.getVehicles();
+  }
+
+  showInfo(vehicle: Vehicle) {
+    this.currentVehicle = vehicle;
+    this.popupVisible = true;
+  }
+
+  hideInfo() {
+    this.popupVisible = false;
+  }
+
+  getFormattedPrice(card: CardInfo): string {
+    const priceText = card.fields.find(f => f?.column?.dataField === 'Price');
+    return priceText?.text ?? '';
   }
 }
 
 @NgModule({
   imports: [
     BrowserModule,
+    DxTemplateModule,
     DxCardViewModule,
+    DxPopupModule,
+    DxButtonModule,
   ],
-  declarations: [AppComponent],
+  declarations: [AppComponent, VehicleCard, LicenseInfo],
   bootstrap: [AppComponent],
 })
 export class AppModule { }