CardView - demos - filterPanel (DevExpress#29972)

Author: pomahtri

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

@@ -1,6 +1,29 @@
-<dx-card-view id="cardView" [dataSource]="customers" keyExpr="ID">
+<dx-card-view
+  id="cardView"
+  [dataSource]="orders"
+  keyExpr="ID"
+  [headerFilter]="headerFilterConfig"
+  [filterPanel]="filterPanelConfig"
+  [filterValue]="filterValue"
+  [filterBuilder]="filterBuilderConfig"
+>
   <dxi-card-view-column
-    *ngFor="let column of columns"
-    [dataField]="column"
+    dataField="OrderNumber"
+    [headerFilter]="orderNumberHeaderFilterConfig"
   ></dxi-card-view-column>
+  <dxi-card-view-column
+    dataField="OrderDate"
+    dataType="date"
+  ></dxi-card-view-column>
+  <dxi-card-view-column
+    dataField="DeliveryDate"
+    dataType="datetime"
+  ></dxi-card-view-column>
+  <dxi-card-view-column
+    dataField="SaleAmount"
+    dataType="number"
+    [headerFilter]="saleAmountHeaderFilterConfig"
+  ></dxi-card-view-column>
+  <dxi-card-view-column dataField="CustomerStoreCity"></dxi-card-view-column>
+  <dxi-card-view-column dataField="Employee"></dxi-card-view-column>
 </dx-card-view>

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

@@ -1,8 +1,8 @@
 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 { DxCardViewModule, DxCardViewTypes } from 'devextreme-angular/ui/card-view';
+import { Order, Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -14,18 +14,94 @@ if (window && window.config?.packageConfigPaths) {
   modulePrefix = '/app';
 }
 
+function getDeliveryHours(rowData) {
+  return (new Date(rowData.DeliveryDate)).getHours();
+}
+
 @Component({
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   providers: [Service],
 })
 export class AppComponent {
-  customers: Customer[];
+  // TODO: make nested
+  headerFilterConfig = {
+    visible: true
+  };
+
+  // TODO: make nested
+  filterPanelConfig = {
+    visible: true
+  };
+
+  filterValue = [['Employee', '=', 'Clark Morgan'], 'and', ['DeliveryDate', 'beforeNoon']];
+
+  // TODO: make nested
+  filterBuilderConfig = {
+    customOperations: [{
+      name: 'beforeNoon',
+      caption: 'Before noon',
+      dataTypes: ['datetime'],
+      icon: 'check',
+      hasValue: false,
+      calculateFilterExpression() {
+        return [getDeliveryHours, '<', 12];
+      },
+    }, {
+      name: 'afterNoon',
+      caption: 'After noon',
+      dataTypes: ['datetime'],
+      icon: 'check',
+      hasValue: false,
+      calculateFilterExpression() {
+        return [getDeliveryHours, '>=', 12];
+      },
+    }],
+  };
+
+
+  // TODO: make nested
+  saleAmountHeaderFilterConfig = {
+    dataSource: [
+      {
+        text: 'Less than $3000',
+        value: ['SaleAmount', '<', 3000],
+      },
+      {
+        text: '$3000 - $5000',
+        value: [
+          ['SaleAmount', '>=', 3000],
+          ['SaleAmount', '<', 5000],
+        ],
+      },
+      {
+        text: '$5000 - $10000',
+        value: [
+          ['SaleAmount', '>=', 5000],
+          ['SaleAmount', '<', 10000],
+        ],
+      },
+      {
+        text: '$10000 - $20000',
+        value: [
+          ['SaleAmount', '>=', 10000],
+          ['SaleAmount', '<', 20000],
+        ],
+      },
+      {
+        text: 'Greater than $20000',
+        value: ['SaleAmount', '>=', 20000],
+      },
+    ],
+  };
+
+  // TODO: make nested
+  orderNumberHeaderFilterConfig = { groupInterval: 10000 };
 
-  columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
+  orders: Order[];
 
   constructor(service: Service) {
-    this.customers = service.getCustomers();
+    this.orders = service.getOrders();
   }
 }