From 0b8a3242474ab7cdfdab8896b14f0baf6febe60c Mon Sep 17 00:00:00 2001
From: Mayura Deshmukh <mayura.deshmukh@gmail.com>
Date: Fri, 8 Dec 2023 18:24:40 +0530
Subject: [PATCH] MOSIP-30406 added sorting

Signed-off-by: Mayura Deshmukh <mayura.deshmukh@gmail.com>
---
 .../test-run/test-run/test-run.component.css  | 35 +++++++++++++++++++
 .../test-run/test-run/test-run.component.html | 10 +++---
 .../test-run/test-run/test-run.component.ts   |  4 ++-
 3 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/src/app/features/test-run/test-run/test-run.component.css b/src/app/features/test-run/test-run/test-run.component.css
index e6caff3e..e4a28f96 100644
--- a/src/app/features/test-run/test-run/test-run.component.css
+++ b/src/app/features/test-run/test-run/test-run.component.css
@@ -345,4 +345,39 @@ mat-panel-title {
   .expanded-details{
     width: 250px;
   }
+}
+.mat-column-testId {
+  word-wrap: break-word !important;
+  white-space: unset !important;
+  flex: 0 0 20% !important;
+  width: 20% !important;
+  overflow-wrap: break-word;
+}
+.mat-column-testName {
+  word-wrap: break-word !important;
+  white-space: unset !important;
+  flex: 0 0 50% !important;
+  width: 50% !important;
+  overflow-wrap: break-word;
+}
+.mat-column-resultStatus {
+  word-wrap: break-word !important;
+  white-space: unset !important;
+  flex: 0 0 10% !important;
+  width: 10% !important;
+  overflow-wrap: break-word;
+}
+.mat-column-executionStatus {
+  word-wrap: break-word !important;
+  white-space: unset !important;
+  flex: 0 0 10% !important;
+  width: 10% !important;
+  overflow-wrap: break-word;
+}
+.mat-column-expand {
+  word-wrap: break-word !important;
+  white-space: unset !important;
+  flex: 0 0 10% !important;
+  width: 1cap !important;
+  overflow-wrap: break-word;
 }
\ No newline at end of file
diff --git a/src/app/features/test-run/test-run/test-run.component.html b/src/app/features/test-run/test-run/test-run.component.html
index cd75a590..426feb7c 100644
--- a/src/app/features/test-run/test-run/test-run.component.html
+++ b/src/app/features/test-run/test-run/test-run.component.html
@@ -6,20 +6,20 @@
     </div>
     <div class="mat-elevation-z8">
         <div class="filter-container">
-            <mat-paginator class="paginator" [pageSizeOptions]="[10,20,30]"
+            <mat-paginator class="paginator" [pageSizeOptions]="[10,20,30,40,50]"
                 aria-label="Select page of projects"></mat-paginator>
         </div>
         <div *ngIf="dataSource && dataSource.data && dataSource.data.length <= 0" [ngStyle]="{color: 'red', padding: '30px'}">
             {{"viewTestRun.testRunDetailsAreNotAvailable"|translate}}
         </div>
         <div class="table-container">
-            <table mat-table [dataSource]="dataSource" multiTemplateDataRows class="testcases-table">
+            <table mat-table [dataSource]="dataSource" multiTemplateDataRows matSort class="testcases-table">
                 <caption>{{ "viewTestRun.tableDescription" | translate }}</caption>
                 <!--- Note that these columns can be defined in any order.
                 The actual rendered columns are set as a property on the row definition" -->
                 <!-- Test Order Sequence Column -->
                 <ng-container matColumnDef="testId">
-                    <th mat-header-cell *matHeaderCellDef class="testIDHeader"> {{"viewTestRun.id"|translate}} </th>
+                    <th mat-header-cell *matHeaderCellDef  mat-sort-header class="testIDHeader"> {{"viewTestRun.id"|translate}} </th>
                     <td mat-cell *matCellDef="let element" class="testIDCell">
                         {{element.testId}}<span *ngIf="element.methodId != '' && element.methodId !== 'Not_Available'">
                             - ( {{element.methodId}} )</span>
@@ -32,7 +32,7 @@
                     </td>
                 </ng-container>
                 <ng-container matColumnDef="resultStatus">
-                    <th mat-header-cell *matHeaderCellDef class="resultStatusHeader"> {{"viewTestRun.status"|translate}}
+                    <th mat-header-cell *matHeaderCellDef  mat-sort-header class="resultStatusHeader"> {{"viewTestRun.status"|translate}}
                     </th>
                     <td mat-cell *matCellDef="let element" class="resultStatusCell">
                         <span class="custom-class" *ngIf="element.resultStatus == 'success'">
@@ -46,7 +46,7 @@
                     </td>
                 </ng-container>
                 <ng-container matColumnDef="executionStatus">
-                    <th mat-header-cell *matHeaderCellDef class="executionStatusHeader">
+                    <th mat-header-cell *matHeaderCellDef  mat-sort-header class="executionStatusHeader">
                         {{"viewTestRun.executionStatus"|translate}} </th>
                     <td mat-cell *matCellDef="let element" class="executionStatusCell">
                         <span class="custom-class" *ngIf="element.executionStatus == 'complete'">
diff --git a/src/app/features/test-run/test-run/test-run.component.ts b/src/app/features/test-run/test-run/test-run.component.ts
index 23ba492f..27b75431 100644
--- a/src/app/features/test-run/test-run/test-run.component.ts
+++ b/src/app/features/test-run/test-run/test-run.component.ts
@@ -28,6 +28,7 @@ import { environment } from 'src/environments/environment';
 import { Directory, Filesystem } from '@capacitor/filesystem';
 import { Toast } from '@capacitor/toast';
 import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
 
 @Component({
   selector: 'app-test-run',
@@ -74,7 +75,7 @@ export class TestRunComponent implements OnInit {
   resourceBundleJson: any = {};
   langCode = this.userProfileService.getUserPreferredLanguage();
   @ViewChild(MatPaginator) paginator: MatPaginator;
-  
+  @ViewChild(MatSort) sort: MatSort;
   constructor(
     public authService: AuthService,
     private activatedRoute: ActivatedRoute,
@@ -267,6 +268,7 @@ export class TestRunComponent implements OnInit {
             }
             this.dataSource = new MatTableDataSource(tableData);
             this.dataSource.paginator = this.paginator;
+            this.dataSource.sort = this.sort;
             resolve(true);
           },
           (errors) => {