From c82241b9c874419fc0fad98166ee27877bc77e5a Mon Sep 17 00:00:00 2001
From: Federico Werner Budtke <wernerbdev@gmail.com>
Date: Tue, 5 Mar 2024 00:12:54 -0300
Subject: [PATCH] Feature: Added numeric sorting to tables

---
 angular.json                                    |  3 +++
 .../crypto-list/crypto-list.component.html      |  6 +++---
 .../crypto-list/crypto-list.component.ts        | 17 +++++++++++++++--
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/angular.json b/angular.json
index f751f17..3267424 100644
--- a/angular.json
+++ b/angular.json
@@ -110,5 +110,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }
diff --git a/src/app/@components/crypto-list/crypto-list.component.html b/src/app/@components/crypto-list/crypto-list.component.html
index 1ff4464..9c1985a 100644
--- a/src/app/@components/crypto-list/crypto-list.component.html
+++ b/src/app/@components/crypto-list/crypto-list.component.html
@@ -14,9 +14,9 @@ <h3>Crypto List</h3>
       <ng-template pTemplate="header">
         <tr>
           <th>Name</th>
-          <th>Price</th>
-          <th>Change</th>
-          <th>Vol 24h</th>
+          <th (click)="sortTableByNumericField('priceUsd')">Price</th>
+          <th (click)="sortTableByNumericField('changePercent24Hr')">Change</th>
+          <th (click)="sortTableByNumericField('volumeUsd24Hr')">Vol 24h</th>
         </tr>
       </ng-template>
       <ng-template pTemplate="body" let-coin>
diff --git a/src/app/@components/crypto-list/crypto-list.component.ts b/src/app/@components/crypto-list/crypto-list.component.ts
index a487856..f66ebfb 100644
--- a/src/app/@components/crypto-list/crypto-list.component.ts
+++ b/src/app/@components/crypto-list/crypto-list.component.ts
@@ -31,7 +31,6 @@ export class CryptoListComponent implements OnInit {
       (resp) => {
         if (Array.isArray(resp.data)) {
           this.coinCryptoAssetsArray = resp.data;
-          console.log(this.coinCryptoAssetsArray);
         } else {
           console.error('Los datos recibidos no son un arreglo:', resp.data);
         }
@@ -57,7 +56,6 @@ export class CryptoListComponent implements OnInit {
   filterTable() {
     this.dataTable.filter(this.searchText, 'name', 'contains');
     this.filteredCoins = this.dataTable.filteredValue || [];
-    console.log(this.filteredCoins);
   }
 
   convertToTwoDecimalString(input: string): string {
@@ -71,4 +69,19 @@ export class CryptoListComponent implements OnInit {
       return 'Invalid number';
     }
   }
+
+  sortTableByNumericField(field: string) {
+    const isNumeric = typeof this.dataTable.value[0][field] === 'number';
+    this.dataTable.value.forEach(item => {
+      if(!isNumeric){
+        item[field] = parseFloat(item[field]);
+      }
+    });
+    this.dataTable.sortOrder *= -1;
+    this.dataTable.value.sort((a, b) => {
+      return (a[field] - b[field]) * this.dataTable.sortOrder;
+    });
+    this.dataTable.sortSingle();
+    this.filteredCoins = this.dataTable.filteredValue || [];
+  }
 }