From 05596bb603a14955ad6ed185cf8ca66eb3951d11 Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Wed, 30 Apr 2025 13:30:44 +0300 Subject: [PATCH 1/4] Added custom sorting on address columns and fixed rating column --- .../src/components/ErpHGrid/ErpHGrid.tsx | 11 ++++++++-- .../CustomFilteringOperand.ts | 2 +- .../CustomSortingStrategy.ts | 20 +++++++++++++++++++ 3 files changed, 30 insertions(+), 3 deletions(-) rename projects/erp-hierarchical-grid/src/{ => services/custom-operations}/CustomFilteringOperand.ts (97%) create mode 100644 projects/erp-hierarchical-grid/src/services/custom-operations/CustomSortingStrategy.ts diff --git a/projects/erp-hierarchical-grid/src/components/ErpHGrid/ErpHGrid.tsx b/projects/erp-hierarchical-grid/src/components/ErpHGrid/ErpHGrid.tsx index 0dbf22e..cd65ebc 100644 --- a/projects/erp-hierarchical-grid/src/components/ErpHGrid/ErpHGrid.tsx +++ b/projects/erp-hierarchical-grid/src/components/ErpHGrid/ErpHGrid.tsx @@ -23,7 +23,7 @@ import { erpDataService } from "../../services/ErpDataService"; import { BadgeVariant } from "../../models/BadgeVariant"; import { OrderStatus } from "../../models/OrderStatus"; import { DataPoint } from "../../models/DataPoint"; -import { FullAddressFilteringOperand } from "../../CustomFilteringOperand"; +import { FullAddressFilteringOperand } from "../../services/custom-operations/CustomFilteringOperand"; import BILL_PAID from "../../assets/icons/bill_paid.svg"; import CHECK from "../../assets/icons/check.svg"; import DELIVERY from "../../assets/icons/delivery.svg"; @@ -37,6 +37,7 @@ import { useFloating, useTransitionStyles, } from "@floating-ui/react"; +import { AddressSortStrategy } from "../../services/custom-operations/CustomSortingStrategy"; const ErpHGrid = () => { const selectionMode: GridSelectionMode = "multiple"; @@ -130,7 +131,7 @@ const ErpHGrid = () => { const rating: number = ctx.cell.value; return ( <> - + ); }; @@ -238,6 +239,10 @@ const ErpHGrid = () => { return `${value.streetNumber} ${value.streetName}, ${value.zipCode} ${value.city}, ${value.country}`; }; + // Custom sorting strategy + const shortAddressSortStrategy = new AddressSortStrategy(formatAddress); + const fullAddressSortStrategy = new AddressSortStrategy(formatFullAddress); + // SORTINGS const childGridSortingExpression: IgrSortingExpression[] = [ { @@ -460,6 +465,7 @@ const ErpHGrid = () => { header="Address" dataType="string" sortable={true} + sortStrategy={shortAddressSortStrategy} resizable={true} visibleWhenCollapsed={false} formatter={formatAddress} @@ -472,6 +478,7 @@ const ErpHGrid = () => { header="Address" dataType="string" sortable={true} + sortStrategy={fullAddressSortStrategy} resizable={true} visibleWhenCollapsed={true} formatter={formatFullAddress} diff --git a/projects/erp-hierarchical-grid/src/CustomFilteringOperand.ts b/projects/erp-hierarchical-grid/src/services/custom-operations/CustomFilteringOperand.ts similarity index 97% rename from projects/erp-hierarchical-grid/src/CustomFilteringOperand.ts rename to projects/erp-hierarchical-grid/src/services/custom-operations/CustomFilteringOperand.ts index 33e716a..5f2b9ad 100644 --- a/projects/erp-hierarchical-grid/src/CustomFilteringOperand.ts +++ b/projects/erp-hierarchical-grid/src/services/custom-operations/CustomFilteringOperand.ts @@ -1,4 +1,4 @@ -import { IgrStringFilteringOperand } from "igniteui-react-grids/grids"; +import { IgrStringFilteringOperand, IFilteringStrategy } from "igniteui-react-grids/grids"; export class FullAddressFilteringOperand extends IgrStringFilteringOperand { public constructor(isAddressShort: boolean = false) { diff --git a/projects/erp-hierarchical-grid/src/services/custom-operations/CustomSortingStrategy.ts b/projects/erp-hierarchical-grid/src/services/custom-operations/CustomSortingStrategy.ts new file mode 100644 index 0000000..9b7b512 --- /dev/null +++ b/projects/erp-hierarchical-grid/src/services/custom-operations/CustomSortingStrategy.ts @@ -0,0 +1,20 @@ +export class AddressSortStrategy { + constructor(private formatter: (value: any) => string) {} + + compareValues(a: any, b: any): number { + const addressA = this.formatter(a)?.toLowerCase() ?? ''; + const addressB = this.formatter(b)?.toLowerCase() ?? ''; + return addressA.localeCompare(addressB); + } + + sort(data: any[], fieldName: string, sortingDirection: any): any[] { + if (!sortingDirection) return data; + + return [...data].sort((rowA, rowB) => { + const valA = rowA[fieldName]; + const valB = rowB[fieldName]; + const compareResult = this.compareValues(valA, valB); + return sortingDirection === 1 ? compareResult : -compareResult; + }); + } +} \ No newline at end of file From d81587a4603326b3ace38f98007df8b1435728ba Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Fri, 2 May 2025 15:52:21 +0300 Subject: [PATCH 2/4] Removed sorting on Address column --- .../src/components/ErpHGrid/ErpHGrid.tsx | 11 ++-------- .../CustomSortingStrategy.ts | 20 ------------------- 2 files changed, 2 insertions(+), 29 deletions(-) delete mode 100644 projects/erp-hierarchical-grid/src/services/custom-operations/CustomSortingStrategy.ts diff --git a/projects/erp-hierarchical-grid/src/components/ErpHGrid/ErpHGrid.tsx b/projects/erp-hierarchical-grid/src/components/ErpHGrid/ErpHGrid.tsx index cd65ebc..d5413ea 100644 --- a/projects/erp-hierarchical-grid/src/components/ErpHGrid/ErpHGrid.tsx +++ b/projects/erp-hierarchical-grid/src/components/ErpHGrid/ErpHGrid.tsx @@ -37,7 +37,6 @@ import { useFloating, useTransitionStyles, } from "@floating-ui/react"; -import { AddressSortStrategy } from "../../services/custom-operations/CustomSortingStrategy"; const ErpHGrid = () => { const selectionMode: GridSelectionMode = "multiple"; @@ -239,10 +238,6 @@ const ErpHGrid = () => { return `${value.streetNumber} ${value.streetName}, ${value.zipCode} ${value.city}, ${value.country}`; }; - // Custom sorting strategy - const shortAddressSortStrategy = new AddressSortStrategy(formatAddress); - const fullAddressSortStrategy = new AddressSortStrategy(formatFullAddress); - // SORTINGS const childGridSortingExpression: IgrSortingExpression[] = [ { @@ -464,8 +459,7 @@ const ErpHGrid = () => { field="orderInformation" header="Address" dataType="string" - sortable={true} - sortStrategy={shortAddressSortStrategy} + sortable={false} resizable={true} visibleWhenCollapsed={false} formatter={formatAddress} @@ -477,8 +471,7 @@ const ErpHGrid = () => { field="orderInformation" header="Address" dataType="string" - sortable={true} - sortStrategy={fullAddressSortStrategy} + sortable={false} resizable={true} visibleWhenCollapsed={true} formatter={formatFullAddress} diff --git a/projects/erp-hierarchical-grid/src/services/custom-operations/CustomSortingStrategy.ts b/projects/erp-hierarchical-grid/src/services/custom-operations/CustomSortingStrategy.ts deleted file mode 100644 index 9b7b512..0000000 --- a/projects/erp-hierarchical-grid/src/services/custom-operations/CustomSortingStrategy.ts +++ /dev/null @@ -1,20 +0,0 @@ -export class AddressSortStrategy { - constructor(private formatter: (value: any) => string) {} - - compareValues(a: any, b: any): number { - const addressA = this.formatter(a)?.toLowerCase() ?? ''; - const addressB = this.formatter(b)?.toLowerCase() ?? ''; - return addressA.localeCompare(addressB); - } - - sort(data: any[], fieldName: string, sortingDirection: any): any[] { - if (!sortingDirection) return data; - - return [...data].sort((rowA, rowB) => { - const valA = rowA[fieldName]; - const valB = rowB[fieldName]; - const compareResult = this.compareValues(valA, valB); - return sortingDirection === 1 ? compareResult : -compareResult; - }); - } -} \ No newline at end of file From 24b2365ff6405f3c59c93d2c7bdf0401a14c2b7c Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Mon, 5 May 2025 17:56:08 +0300 Subject: [PATCH 3/4] Resolving lint issues --- .../src/services/custom-operations/CustomFilteringOperand.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/erp-hierarchical-grid/src/services/custom-operations/CustomFilteringOperand.ts b/projects/erp-hierarchical-grid/src/services/custom-operations/CustomFilteringOperand.ts index 5f2b9ad..33e716a 100644 --- a/projects/erp-hierarchical-grid/src/services/custom-operations/CustomFilteringOperand.ts +++ b/projects/erp-hierarchical-grid/src/services/custom-operations/CustomFilteringOperand.ts @@ -1,4 +1,4 @@ -import { IgrStringFilteringOperand, IFilteringStrategy } from "igniteui-react-grids/grids"; +import { IgrStringFilteringOperand } from "igniteui-react-grids/grids"; export class FullAddressFilteringOperand extends IgrStringFilteringOperand { public constructor(isAddressShort: boolean = false) { From 598abf57ed335cfbaeb88def8b5da07399e4daab Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Mon, 5 May 2025 18:01:06 +0300 Subject: [PATCH 4/4] Resolving pipeline issues --- .../erp-hierarchical-grid/src/components/ErpHGrid/ErpHGrid.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/erp-hierarchical-grid/src/components/ErpHGrid/ErpHGrid.tsx b/projects/erp-hierarchical-grid/src/components/ErpHGrid/ErpHGrid.tsx index d5413ea..9d65c81 100644 --- a/projects/erp-hierarchical-grid/src/components/ErpHGrid/ErpHGrid.tsx +++ b/projects/erp-hierarchical-grid/src/components/ErpHGrid/ErpHGrid.tsx @@ -130,7 +130,7 @@ const ErpHGrid = () => { const rating: number = ctx.cell.value; return ( <> - + ); };