From be3d963cc3a727f8c268972ec45a1de280d17cf1 Mon Sep 17 00:00:00 2001
From: manueltauber <manuel.tauber@emea.nttdata.com>
Date: Tue, 5 Sep 2023 10:13:26 +0200
Subject: [PATCH] sort Arrow inserted

---
 .../app/ntt-gantt/ntt-gantt.component.html    | 46 ++++++++++++++++++-
 .../src/app/ntt-gantt/ntt-gantt.component.ts  | 20 +++++---
 frontend/src/index.html                       |  2 +-
 3 files changed, 59 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
index 180afa5..a056555 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@@ -47,7 +47,6 @@
 </div>
 
 
-
 <!-- <button ejs-button id='filterRecord' (click)='filter()'>Filter</button> -->
  <ejs-gantt *ngIf="renderGantt" #ganttObject id="ganttDefault"
     [ngStyle]="{'visibility':spin ? 'hidden' : 'visible'}"
@@ -93,6 +92,51 @@
     (expanding)="onExpand($event)"
 
   >
+  <!-- <e-columns>
+    <e-column headerText="Kurzbeschreibung" field="TaskName" width="250">
+      <ng-template #headerTemplate>
+        Kurzbeschreibung
+        <div class="square"><mat-icon>arrow_downward</mat-icon></div>
+      </ng-template>
+    </e-column>
+
+    <e-column headerText="Kurzbeschreibung" field="stateName" width="250">
+      <ng-template #headerTemplate>
+        <div class="square"><mat-icon>arrow_downward</mat-icon></div>
+      </ng-template>
+    </e-column>
+
+    <e-column headerText="Kurzbeschreibung" field="vertragName" width="250">
+      <ng-template #headerTemplate>
+        <div class="square"><mat-icon>arrow_downward</mat-icon></div>
+      </ng-template>
+    </e-column>
+
+    <e-column headerText="Kurzbeschreibung" field="supportGroup" width="250">
+      <ng-template #headerTemplate>
+        <div class="square"><mat-icon>arrow_downward</mat-icon></div>
+      </ng-template>
+    </e-column>
+
+    <e-column headerText="Kurzbeschreibung" field="StartDate" width="250">
+      <ng-template #headerTemplate>
+        <div class="square"><mat-icon>arrow_downward</mat-icon></div>
+      </ng-template>
+    </e-column>
+
+    <e-column headerText="Kurzbeschreibung" field="plantime" width="250">
+      <ng-template #headerTemplate>
+        <div class="square"><mat-icon>arrow_downward</mat-icon></div>
+      </ng-template>
+    </e-column>
+
+    <e-column headerText="Kurzbeschreibung" field="changeNr" width="250">
+      <ng-template #headerTemplate>
+        <div class="square"><mat-icon>arrow_downward</mat-icon></div>
+      </ng-template>
+    </e-column>
+  </e-columns> -->
+
   <ng-template #tooltipSettingsTaskbar let-data>
     <div>
       <table>
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.ts b/frontend/src/app/ntt-gantt/ntt-gantt.component.ts
index 72053d4..633fbf2 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.ts
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.ts
@@ -626,7 +626,7 @@ export class NttGanttComponent implements OnInit {
     console.log(args);
     this.spin = false;
     if(this.sortSelectorName){
-      this.selectFilteredColumn(this.sortSelectorName);
+      this.selectSortedColumn(this.sortSelectorName);
     }
 
 
@@ -660,21 +660,27 @@ export class NttGanttComponent implements OnInit {
   //   });
   }
 
-  public selectFilteredColumn(colName: string){
+  public selectSortedColumn(colName: string){
     const headerDivs = document.querySelectorAll('.e-headercelldiv');
        headerDivs.forEach((div) => {
          console.log('############################################');
-          console.log(div);
+          // console.log(div);
         // Remove 'selected' class from all 'e-headercell' elements
 
         // document.querySelectorAll('.e-headercell').forEach((cell) => {
-          console.log(div.firstChild.textContent);
-          console.log(colName);
+          // console.log(div.firstChild.textContent);
+          // console.log(colName);
           if(div.firstChild.textContent == colName){
             div.closest('.e-headercell').classList.add('selected');
-            console.log(div)
+            console.log(div.closest('.e-headercell').children[1]);
+            console.log(this.sort.mode == 'asc');
+            if(this.sort.mode == 'asc'){
+              div.closest('.e-headercell').children[1].innerHTML = "<mat-icon style=\"font-family: 'Material Icons'; font-size: 15px; line-height: 1; \">arrow_downward</mat-icon>"
+            }else{
+              div.closest('.e-headercell').children[1].innerHTML = "<mat-icon style=\"font-family: 'Material Icons'; font-size: 15px; line-height: 1; \">arrow_upward</mat-icon>"
+            }
           }else{
-            // div.classList.remove('selected');
+             div.classList.remove('selected');
           }
 
 
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 23a3c0f..219bc8b 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -34,7 +34,7 @@
   }
 
   .e-headercell.selected {
-    background-color: lightblue;
+    background-color: #E0E0E0;
   }
   .square {
     background-color: #2ecc71;