Merge pull request #101 from IgniteUI/dkamburov/another-attempt

Publish to prod

Author: dkamburov

package-lock.json

@@ -44,7 +44,7 @@
     "express": "^4.18.2",
     "fflate": "^0.8.1",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^19.0.7",
+    "igniteui-angular": "^19.1.4",
     "igniteui-angular-charts": "^18.2.0",
     "igniteui-webcomponents": "^5.1.2",
     "igniteui-angular-core": "^18.2.0",

package.json

@@ -26,7 +26,7 @@
     "@igniteui/material-icons-extended": "^3.1.0",
     "express": "^4.21.2",
     "hammerjs": "~2.0.8",
-    "igniteui-angular": "^19.0.7",
+    "igniteui-angular": "^19.1.4",
     "igniteui-angular-charts": "^18.1.1",
     "igniteui-angular-core": "^18.1.1",
     "igniteui-webcomponents": "^5.1.2",

projects/erp-hgrid/package-lock.json

@@ -130,7 +130,7 @@
                 <igx-column
                     field="delivery.dateOrdered"
                     header="Date Ordered"
-                    dataType="string"
+                    dataType="date"
                     width="12%"
                     [sortable]="true"
                     [resizable]="true"
@@ -142,7 +142,7 @@
                 <igx-column
                     field="delivery.dateOrdered"
                     header="Date Ordered"
-                    dataType="string"
+                    dataType="date"
                     width="12%"
                     [sortable]="true"
                     [resizable]="true"
@@ -152,7 +152,7 @@
                 <igx-column
                     field="delivery.dateShipped"
                     header="Date Shipped"
-                    dataType="string"
+                    dataType="date"
                     width="12%"
                     [sortable]="true"
                     [resizable]="true"
@@ -162,7 +162,7 @@
                 <igx-column
                     field="delivery.dateDelivered"
                     header="Date Delivered"
-                    dataType="string"
+                    dataType="date"
                     width="12%"
                     [sortable]="true"
                     [resizable]="true"
@@ -215,11 +215,12 @@
                 <igx-column
                     field="orderInformation.zipCode"
                     header="Zip Code"
-                    dataType="string"
+                    dataType="number"
                     width="9%"
                     [sortable]="true"
                     [resizable]="true"
-                    [visibleWhenCollapsed]="false">
+                    [visibleWhenCollapsed]="false"
+                    [formatter]="formatNumberAsIs">
                 </igx-column>
                 <igx-column
                     field="orderInformation"
@@ -228,7 +229,8 @@
                     [sortable]="true"
                     [resizable]="true"
                     [visibleWhenCollapsed]="false"
-                    [formatter]="formatAddress">
+                    [formatter]="formatAddress"
+                    [filters]="shortAddressFilteringOperand">
                 </igx-column>
 
                 <!-- Show this column when collapsed -->
@@ -239,7 +241,8 @@
                     [sortable]="true"
                     [resizable]="true"
                     [visibleWhenCollapsed]="true"
-                    [formatter]="formatAddress">
+                    [formatter]="formatFullAddress"
+                    [filters]="fullAddressFilteringOperand">
                 </igx-column>
 
             </igx-column-group>

projects/erp-hgrid/package.json

@@ -37,14 +37,19 @@ import {
   VerticalAlignment,
   THEME_TOKEN,
   ThemeToken,
-  IgxGridToolbarDirective
+  IgxGridToolbarDirective,
+  OverlaySettings,
+  IgxStringFilteringOperand,
+  IFilteringOperation
 } from 'igniteui-angular';
+import { fadeIn } from 'igniteui-angular/animations'
 import { IgxSparklineModule } from 'igniteui-angular-charts';
 import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
 import { dropbox, delivery, billPaid, check } from '@igniteui/material-icons-extended';
 import { OrderDetails, OrderStatus, TemplateDataModel } from '../data/dataModels';
 import { SalesTrendsChartComponent } from '../sales-trends-chart/sales-trends-chart.component';
 import { ErpDataService } from '../services/erp-data.service';
+import { useAnimation } from '@angular/animations';
 
 defineComponents(IgcRatingComponent);
 
@@ -99,6 +104,8 @@ export class ErpHGridSampleComponent implements AfterViewInit {
   public rowisland!: IgxRowIslandComponent;
   @ViewChild('imageElement', { static: true }) imageElement!: ElementRef;
   @ViewChild('imageDialog', { static: true }) imageDialog!: IgxDialogComponent;
+  public fullAddressFilteringOperand = FullAddressFilteringOperand.instance();
+  public shortAddressFilteringOperand = new FullAddressFilteringOperand(true);
 
   public hgridData: TemplateDataModel[];
   public selectionMode: GridSelectionMode = 'multiple';
@@ -110,7 +117,6 @@ export class ErpHGridSampleComponent implements AfterViewInit {
   ) {
     // data
     this.hgridData = this.erpDataService.getProducts();
-    const x = this.erpDataService.getProductsJson();
 
     // Icons used
     this.iconService.addSvgIconFromText(dropbox.name, dropbox.value, 'imx-icons');
@@ -145,7 +151,11 @@ export class ErpHGridSampleComponent implements AfterViewInit {
   }
 
   public formatAddress(value: OrderDetails): string {
-    return `${value.streetName} ${value.streetNumber}`;
+    return `${value.streetNumber} ${value.streetName}`;
+  }
+
+  public formatFullAddress(value: OrderDetails): string {
+    return `${value.streetNumber} ${value.streetName}, ${value.zipCode} ${value.city}, ${value.country}`;
   }
 
   public formatNumberAsIs(value: number): number {
@@ -162,19 +172,25 @@ export class ErpHGridSampleComponent implements AfterViewInit {
   }
 
   public onImageHover(event: MouseEvent, dialog: IgxDialogComponent) {
-    if(dialog) {
+    if (dialog) {
       const targetEl = event.target as HTMLElement;
 
       const positionSettings: PositionSettings = {
+        openAnimation: useAnimation(fadeIn, {
+          params: {
+            delay: '400ms'
+          }
+        }),
         horizontalStartPoint: HorizontalAlignment.Right,
         verticalStartPoint: VerticalAlignment.Top
       };
 
-      dialog.open({
+      const overlaySettings: OverlaySettings = {
         target: targetEl,
         modal: false,
         positionStrategy: new AutoPositionStrategy(positionSettings)
-      });
+      }
+      dialog.open(overlaySettings);
     }
   }
 
@@ -184,3 +200,102 @@ export class ErpHGridSampleComponent implements AfterViewInit {
     }
   }
 }
+
+export class FullAddressFilteringOperand extends IgxStringFilteringOperand {
+  public constructor(isAddressShort: boolean = false) {
+    super();
+    const getShortAddress = (target: any) => `${target.streetNumber} ${target.streetName}`;
+    const getFullAddress = (target: any) => `${target.streetNumber} ${target.streetName}, ${target.zipCode} ${target.city}, ${target.country}`;
+
+    // Rewriting filtering operations to work on the address field
+    // as it is an object with properties
+    // and we can't filter it like a normal string field
+    const customOperations: IFilteringOperation[] = [
+      {
+        iconName: 'filter_contains',
+        isUnary: false,
+        logic: (target: any, searchVal: string, ignoreCase?: boolean) => {
+          const address = isAddressShort ? getShortAddress(target) : getFullAddress(target);
+          ignoreCase = true;
+          const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
+          target = IgxStringFilteringOperand.applyIgnoreCase(address, ignoreCase);
+          return target.indexOf(search) !== -1;
+        },
+        name: 'Contains'
+      },
+      {
+        iconName: 'filter_does_not_contain',
+        isUnary: false,
+        logic: (target: any, searchVal: string, ignoreCase?: boolean) => {
+          const address = isAddressShort ? getShortAddress(target) : getFullAddress(target);
+          ignoreCase = true;
+          const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
+          target = IgxStringFilteringOperand.applyIgnoreCase(address, ignoreCase);
+          return target.indexOf(search) === -1;
+        },
+        name: 'Does Not Contain'
+      },
+      {
+        iconName: 'filter_starts_with',
+        isUnary: false,
+        logic: (target: any, searchVal: string, ignoreCase?: boolean) => {
+          const address = isAddressShort ? getShortAddress(target) : getFullAddress(target);
+          ignoreCase = true;
+          const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
+          target = IgxStringFilteringOperand.applyIgnoreCase(address, ignoreCase);
+          return target.startsWith(search);
+        },
+        name: 'Starts With'
+      },
+      {
+        iconName: 'filter_ends_with',
+        isUnary: false,
+        logic: (target: any, searchVal: string, ignoreCase?: boolean) => {
+          const address = isAddressShort ? getShortAddress(target) : getFullAddress(target);
+          ignoreCase = true;
+          const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
+          target = IgxStringFilteringOperand.applyIgnoreCase(address, ignoreCase);
+          return target.endsWith(search);
+        },
+        name: 'Ends With'
+      },
+      {
+        iconName: 'filter_equal',
+        isUnary: false,
+        logic: (target: any, searchVal: string, ignoreCase?: boolean) => {
+          const address = isAddressShort ? getShortAddress(target) : getFullAddress(target);
+          ignoreCase = true;
+          const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
+          target = IgxStringFilteringOperand.applyIgnoreCase(address, ignoreCase);
+          return target === search;
+        },
+        name: 'Equals'
+      },
+      {
+        iconName: 'filter_not_equal',
+        isUnary: false,
+        logic: (target: any, searchVal: string, ignoreCase?: boolean) => {
+          const address = isAddressShort ? getShortAddress(target) : getFullAddress(target);
+          ignoreCase = true;
+          const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
+          target = IgxStringFilteringOperand.applyIgnoreCase(address, ignoreCase);
+          return target !== search;
+        },
+        name: 'Does Not Equal'
+      },
+    ];
+
+    const emptyOperators = [
+        // 'Empty'
+        this.operations[6],
+        // 'Not Empty'
+        this.operations[7],
+        // 'Null'
+        this.operations[8],
+        // 'Not Null'
+        this.operations[9],
+    ];
+
+    this.operations = customOperations.concat(emptyOperators);
+  }
+}