CardView - demos - SearchPanel (DevExpress#29930)

Author: pomahtri

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

@@ -1,6 +1,30 @@
-<dx-card-view id="cardView" [dataSource]="customers" keyExpr="ID">
+<dx-card-view
+  [dataSource]="tasks"
+  keyExpr="Task_ID"
+  [wordWrapEnabled]="true"
+  [headerFilter]="headerFilterConfig"
+  [searchPanel]="searchPanelConfig"
+>
   <dxi-card-view-column
-    *ngFor="let column of columns"
-    [dataField]="column"
+    dataField="Task_Subject"
+    caption="Subject"
+  ></dxi-card-view-column>
+  <dxi-card-view-column
+    dataField="Task_Start_Date"
+    caption="Start Date"
+    dataType="date"
+  ></dxi-card-view-column>
+  <dxi-card-view-column
+    dataField="Task_Due_Date"
+    caption="Due Date"
+    dataType="date"
+  ></dxi-card-view-column>
+  <dxi-card-view-column
+    dataField="Task_Priority"
+    caption="Priority"
+  ></dxi-card-view-column>
+  <dxi-card-view-column
+    dataField="Task_Status"
+    caption="Status"
   ></dxi-card-view-column>
 </dx-card-view>

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

@@ -2,7 +2,7 @@ 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 { Task, Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -20,12 +20,21 @@ if (window && window.config?.packageConfigPaths) {
   providers: [Service],
 })
 export class AppComponent {
-  customers: Customer[];
+  tasks: Task[];
 
-  columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
+  // TODO: Nested component does not exist
+  headerFilterConfig = {
+    visible: true,
+  };
+
+  // TODO: Nested component does not exist
+  searchPanelConfig = {
+    visible: true,
+    text: 'an',
+  };
 
   constructor(service: Service) {
-    this.customers = service.getCustomers();
+    this.tasks = service.getTasks();
   }
 }