ERP HGrid: Small edits and code cleanup

projects/erp-hgrid/src/app/data/dataModels.ts

@@ -47,3 +47,5 @@ export enum OrderStatus  {
   CUSTOMS = "Customs",
   DELIVERED = "Delivered"
 }
+
+export type BadgeVariant = "primary" | "info" | "success" | "warning" | "error";

projects/erp-hgrid/src/app/erp-hgrid-sample/erp-hgrid-sample.component.html

@@ -38,14 +38,8 @@
                     [src]="cell.value"
                     alt="Product"
                     igxRipple="white"
-                    (mouseenter)="onImageHover($event, imageDialog)"
+                    (mouseenter)="onImageHover($event, cell.row.data.productName, imageDialog)"
                     (mouseleave)="onImageLeave($event, imageDialog)"/>
-                <igx-dialog
-                    #imageDialog
-                    isModal="false"
-                    [title]="cell.row.data.productName">
-                    <img [src]="cell.value" width="312px" alt="Product View"/>
-                </igx-dialog>
             </ng-template>
         </igx-column>
         <igx-column field="productName" header="Product Name" dataType="string" [sortable]="true" width="12%"></igx-column>
@@ -61,7 +55,7 @@
             </ng-template>
         </igx-column>
         <igx-column field="unitsSold" header="Sold Units Last Month" dataType="number" width="10%" [sortable]="true"></igx-column>
-        <igx-column field="salesTrendData" header="Mothly Sales Trends" filterable="false" width="15%">
+        <igx-column field="salesTrendData" header="Monthly Sales Trends" filterable="false" width="15%">
             <ng-template igxCell let-cell="cell" let-val>
                 @defer {
                   <sales-trends-chart [dataSource]="cell.value"></sales-trends-chart>
@@ -94,18 +88,12 @@
                 <ng-template igxCell let-cell="cell">
                     <div class="status-cell">
                         <span>
-                            <igx-badge  *ngIf="cell.value === orderStatus.PACKED" type="primary" shape="rounded" elevated>
-                                <igx-icon family="imx-icons" name="dropbox" class="custom-icon"></igx-icon>
-                            </igx-badge>
-                            <igx-badge  *ngIf="cell.value === orderStatus.IN_TRANSIT" type="warning" shape="rounded">
-                                <igx-icon family="imx-icons" name="delivery" class="custom-icon"></igx-icon>
-                            </igx-badge>
-                            <igx-badge  *ngIf="cell.value === orderStatus.CUSTOMS" type="error" shape="rounded">
-                                <igx-icon family="imx-icons" name="bill-paid" class="custom-icon"></igx-icon>
-                            </igx-badge>
-                            <igx-badge  *ngIf="cell.value === orderStatus.DELIVERED" type="success" shape="rounded">
-                                <igx-icon family="imx-icons" name="check" class="custom-icon"></igx-icon>
-                            </igx-badge>
+                          <igx-badge
+                            type={{getOrderStatusBadgeVariant(cell.value)}}
+                            shape="rounded"
+                            elevated>
+                            <igx-icon family="imx-icons" name={{getOrderStatusIconName(cell.value)}} class="custom-icon"></igx-icon>
+                          </igx-badge>
                         </span>
                         <span>{{cell.value}}</span>
                     </div>
@@ -249,4 +237,12 @@
             </igx-column-group>
         </igx-row-island>
     </igx-hierarchical-grid>
+
+    <!-- Overay shown when hovering on product image -->
+    <igx-dialog
+      #imageDialog
+      isModal="false"
+      [title]="this.hoveredImageProductName">
+      <img [src]="this.hoveredImageUrl" width="312px" alt="Product View"/>
+    </igx-dialog>
 </div>

projects/erp-hgrid/src/app/erp-hgrid-sample/erp-hgrid-sample.component.scss

@@ -8,19 +8,19 @@
   --ig-size: var(--ig-size-medium);
   height: 100%;
 
-  igx-badge[type="primary"]{
+  .igx-badge {
     background-color: var(--ig-primary-50);
   }
 
-  igx-badge[type="warning"]{
+  .igx-badge--warning {
     background-color: var(--ig-warn-100);
   }
 
-  igx-badge[type="error"]{
+  .igx-badge--error {
     background-color: var(--ig-error-50);
   }
 
-  igx-badge[type="success"]{
+  .igx-badge--success {
     background-color: var(--ig-success-100);
   }
 }
@@ -55,11 +55,6 @@
   gap: 8px;
 }
 
-.sales-sparkline {
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
-
 // Overridden styles for design purposes
 ::ng-deep {
 

projects/erp-hgrid/src/app/erp-hgrid-sample/erp-hgrid-sample.component.ts

@@ -1,5 +1,5 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild, AfterViewInit, ElementRef, OnInit } from '@angular/core';
-import { CommonModule, NgIf } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import {
   IgxHierarchicalGridComponent,
   IgxColumnGroupComponent,
@@ -46,7 +46,7 @@ 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 { BadgeVariant, OrderDetails, OrderStatus, TemplateDataModel } from '../data/dataModels';
 import { SalesTrendsChartComponent } from '../sales-trends-chart/sales-trends-chart.component';
 import { ErpDataService } from '../services/erp-data.service';
 import { BehaviorSubject } from 'rxjs';
@@ -87,7 +87,6 @@ defineComponents(IgcRatingComponent);
       IgxIconModule,
       IgxBadgeModule,
       IgxBadgeComponent,
-      NgIf,
       IgxSparklineModule,
       IgxButtonModule,
 	    IgxDialogModule,
@@ -104,7 +103,6 @@ export class ErpHGridSampleComponent implements OnInit, AfterViewInit {
   public hierarchicalGrid!: IgxHierarchicalGridComponent;
   @ViewChild('rowisland', { read: IgxRowIslandComponent, static: true })
   public rowisland!: IgxRowIslandComponent;
-  @ViewChild('imageElement', { static: true }) imageElement!: ElementRef;
   @ViewChild('imageDialog', { static: true }) imageDialog!: IgxDialogComponent;
   public fullAddressFilteringOperand = FullAddressFilteringOperand.instance();
   public shortAddressFilteringOperand = new FullAddressFilteringOperand(true);
@@ -115,6 +113,10 @@ export class ErpHGridSampleComponent implements OnInit, AfterViewInit {
   public data$: BehaviorSubject<TemplateDataModel[]> = new BehaviorSubject<TemplateDataModel[]>([]);
   public isLoading = true;
 
+    // Image tooltip for each product fields
+  public hoveredImageUrl: string = '';
+  public hoveredImageProductName: string = '';
+
   constructor(
     private iconService: IgxIconService,
     private erpDataService: ErpDataService
@@ -139,12 +141,6 @@ export class ErpHGridSampleComponent implements OnInit, AfterViewInit {
 
   public ngAfterViewInit(): void {
     // Default sortings
-    this.hierarchicalGrid.sortingExpressions = [
-        {
-            dir: SortingDirection.Asc, fieldName: 'sku',
-            ignoreCase: true, strategy: DefaultSortingStrategy.instance()
-        }
-    ];
     this.rowisland.sortingExpressions = [
       {
           dir: SortingDirection.Desc, fieldName: 'delivery.dateOrdered',
@@ -158,6 +154,36 @@ export class ErpHGridSampleComponent implements OnInit, AfterViewInit {
       'The column is expanded! Click here to collapse.' : 'The column is collapsed! Click here to expand';
   }
 
+  public getOrderStatusBadgeVariant = (status: string): BadgeVariant => {
+    switch (status) {
+      case OrderStatus.PACKED:
+        return "primary";
+      case OrderStatus.IN_TRANSIT:
+        return "warning";
+      case OrderStatus.CUSTOMS:
+        return "error";
+      case OrderStatus.DELIVERED:
+        return "success";
+      default:
+        return "primary";
+    }
+  };
+
+  public getOrderStatusIconName = (status: string): string => {
+    switch (status) {
+      case OrderStatus.PACKED:
+        return "dropbox";
+      case OrderStatus.IN_TRANSIT:
+        return "delivery";
+      case OrderStatus.CUSTOMS:
+        return "bill-paid";
+      case OrderStatus.DELIVERED:
+        return "check";
+      default:
+        return "dropbox";
+    }
+  };
+
   public formatDate(value: string): string {
     return value || 'N/A';
   }
@@ -179,13 +205,18 @@ export class ErpHGridSampleComponent implements OnInit, AfterViewInit {
   public exportStarted(args: IgxExporterEvent): void {
     args.exporter.columnExporting.subscribe((columnArgs: IColumnExportingEventArgs) => {
       // Don't export Performance column
-      columnArgs.cancel = columnArgs.header === 'Performance';
+      columnArgs.cancel = columnArgs.field === 'salesTrendData';
     });
   }
 
-  public onImageHover(event: MouseEvent, dialog: IgxDialogComponent) {
+  public onImageHover(event: MouseEvent, productName: string, dialog: IgxDialogComponent) {
     if (dialog) {
       const targetEl = event.target as HTMLElement;
+      const imageUrl = targetEl.getAttribute("src") || '';
+
+      // Set current hovered image properties
+      this.hoveredImageUrl = imageUrl;
+      this.hoveredImageProductName = productName;
 
       const positionSettings: PositionSettings = {
         openAnimation: useAnimation(fadeIn, {

projects/erp-hgrid/src/app/sales-trends-chart/sales-trends-chart.component.html

@@ -26,7 +26,6 @@
         showDefaultTooltip="true"
         brush="#8A8A8A"
         outline="#8A8A8A"
-        highlightingMode="fadeOthersOnHover"
         highlightingFadeOpacity="0.3">
     </igx-column-series>
 </igx-data-chart>