Issue #ED-4085 fix: udpated sorting in datatable and css

src/app/components/dashboard/dashboard.component.html

@@ -6,10 +6,10 @@
             </span>
         </div>
         <div style="padding-top: 1rem;">
-            <table style="width: 100%;">
+            <table class="dataTable">
                 <thead> 
                     <tr role="row">
-                        <th class="sorting" *ngFor="let clmn of columnConfig?.columnConfig">{{clmn.title}}</th>
+                        <th class="sorting" *ngFor="let clmn of columnConfig?.columnConfig; let i = index" (click)="handleSort(i)">{{clmn.title}}</th>
                     </tr>
                 </thead>
                 <tbody>

src/app/components/dashboard/dashboard.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
 import { Environment, ID, InteractType, PageId } from '../../../services/telemetry-constants';
 import { CommonUtilService } from '../../../services/common-util.service';
 import { TelemetryGeneratorService } from '../../../services/telemetry-generator.service';
@@ -13,7 +13,7 @@ import 'datatables.net-fixedcolumns';
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss'],
 })
-export class DashboardComponent implements OnInit {
+export class DashboardComponent implements OnInit, AfterViewInit {
   @Input() dashletData: any;
   @Input() collectionName: string;
   DashletRowData = { values: [] };
@@ -41,6 +41,62 @@ export class DashboardComponent implements OnInit {
     this.columnConfig.columnConfig = this.dashletData.columns;
   }
 
+  ngAfterViewInit() {
+    let ele = document.querySelectorAll('th')
+    if(ele) {
+      ele.forEach((th, i) => {
+        th.className = ""
+        if(i == 0) {
+          th.className = "sorting_asc"
+        } else {
+          th.className = "sorting"
+        }
+      });
+    } 
+  }
+
+  handleSort(i) {
+    let sortClmn = this.columnConfig.columnConfig[i].data
+    let ele = document.querySelectorAll('th')
+    if(ele) {
+      ele.forEach((th, indx) => {
+        if(i == indx && th.className == "sorting") {
+          this.sortAscDesc(sortClmn, "asc");
+          th.className = ""
+          th.className = "sorting_asc" 
+        } else if(i == indx && th.className == "sorting_asc") {
+          this.sortAscDesc(sortClmn, "desc");
+          th.className = ""
+          th.className = "sorting_desc" 
+        } else if(i == indx && th.className == "sorting_desc") {
+          this.sortAscDesc(sortClmn, "asc");
+          th.className = ""
+          th.className = "sorting_asc" 
+        } else {
+          th.className = ""
+          th.className = "sorting"
+        }
+      });
+    } 
+  }
+
+  sortAscDesc(sortClmn, type) {
+    this.DashletRowData.values.sort((a, b) => {
+      if (typeof(a[sortClmn]) == 'string') {
+        const strA = a[sortClmn].toUpperCase();
+        const strB = b[sortClmn].toUpperCase();
+        if (strA < strB) {
+          return type == "asc" ? -1 : 1;
+        }
+        if (strA > strB) {
+          return type == "asc" ? 1 : -1;
+        }
+        return 0;
+      } else { 
+        return type == "asc" ? a[sortClmn] - b[sortClmn] : b[sortClmn] - a[sortClmn]
+      }
+    });
+  }
 
   async exportCsv() {
     this.telemetryGeneratorService.generateInteractTelemetry(

src/app/my-groups/activity-dashboard/activity-dashboard.page.ts

@@ -94,7 +94,7 @@ export class ActivityDashboardPage {
           },
           mergeGroup: this.group
         };
-            req.leafNodesCount = this.hierarchyData.contentData.leafNodes.length;
+            req.leafNodesCount = this.hierarchyData?.contentData?.leafNodes.length;
 
         try {
           const response: CsGroupActivityDataAggregation = await this.groupService.activityService.getDataAggregation(req).toPromise();

src/global.scss

@@ -172,7 +172,7 @@ table.dataTable thead .sorting_desc_disabled {
   background-repeat: no-repeat !important;
   background-position: center left !important;
   position: relative !important;
-  left: 1rem !important;
+  // left: 1rem !important;
   right: 1rem !important;
 }