Gantt Sortierung Syncfusion Framework Eingriffe

frontend/src/app/ntt-gantt/ntt-gantt.component.ts

@@ -1,3 +1,4 @@
+import { remoteData } from './../../data';
 import { LanguageService } from '../language.service';
 import { PlanTimeBarComponent } from '../plan-time-bar/plan-time-bar.component';
 import { FilterDialogComponent } from '../filter-dialog/filter-dialog.component';
@@ -114,6 +115,7 @@ export class NttGanttComponent implements OnInit {
   public sort = null;
   public oldSort = null;
   public planTimes : any[] = [];
+  public sortSelectorName: any;
 
   /**###################################################################### Initial Loading functions  ######################################################################*/
 
@@ -527,7 +529,7 @@ export class NttGanttComponent implements OnInit {
     if(args.data.taskData.isRes == false){
       if(args.data.taskData.TaskID.includes("D2")){
         args.milestoneBorder = "black";
-        console.log(args.taskbarElement);
+        //console.log(args.taskbarElement);
         if (args.data.taskData.resources[0].state == 0 ) {
           args.milestoneColor = "#f83200";
         }
@@ -621,7 +623,72 @@ export class NttGanttComponent implements OnInit {
     * @param args event arguments from the syncfusion gantt chart.
     */
   public dataBound(args: any) {
+    console.log(args);
     this.spin = false;
+    if(this.sortSelectorName){
+      this.selectFilteredColumn(this.sortSelectorName);
+    }
+
+
+  //   const headerDivs = document.querySelectorAll('.e-headercelldiv');
+
+
+
+  //   // Add click event listener to each 'e-headercelldiv'
+
+  //   headerDivs.forEach((div) => {
+
+  //     div.addEventListener('click', function () {
+
+  //       console.log('Element is clicked you can write your own custom function');
+  //       console.log(this);
+  //       // Remove 'selected' class from all 'e-headercell' elements
+
+  //       document.querySelectorAll('.e-headercell').forEach((cell) => {
+
+  //         cell.classList.remove('selected');
+
+  //       });
+
+
+  //       // Add 'selected' class to the parent 'e-headercell' of the clicked div
+
+  //       this.closest('.e-headercell').classList.add('selected');
+
+  //     });
+
+  //   });
+  }
+
+  public selectFilteredColumn(colName: string){
+    const headerDivs = document.querySelectorAll('.e-headercelldiv');
+       headerDivs.forEach((div) => {
+         console.log('############################################');
+          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);
+          if(div.firstChild.textContent == colName){
+            div.closest('.e-headercell').classList.add('selected');
+            console.log(div)
+          }else{
+            // div.classList.remove('selected');
+          }
+
+
+        });
+
+
+        // Add 'selected' class to the parent 'e-headercell' of the clicked div
+
+        // this.closest('.e-headercell').classList.add('selected');
+
+      // });
+    // const col = document.querySelector(colName);
+
+    // console.log(col);
   }
 
   /**
@@ -663,37 +730,43 @@ export class NttGanttComponent implements OnInit {
         window.open("https://itsm-dev.asfinag.at/arsys/forms/itsm-app-dev/SHR%3ALandingConsole/Default+Administrator+View/?mode=search&F304255500=CHG:Infrastructure Change&F1000000076=FormOpenNoAppList&F303647600=SearchTicketWithQual&F304255610='1000000182' =\""+args.rowData.taskData.resources[0].changeNr+"\"", "_blank");
       }
     }else{
+      console.log(args.target.firstChild.innerText);
       if(args.requestType=='sorting'){
-        let colName = "";
+          let colName = "";
-        let mode = "asc";
+          let mode = "asc";
-        args.cancel = true;
+          args.cancel = true;
 
-        switch (args.columnName) {
+          switch (args.columnName) {
-          case 'TaskName':
+            case 'TaskName':
-            colName = 'ResourceName';
+              colName = 'ResourceName';
-            break;
+              break;
-          case 'stateName':
+            case 'stateName':
-            colName = 'State';
+              colName = 'State';
-            break;
+              break;
-          case 'supportGroup':
+            case 'supportGroup':
-            colName = 'SupportGroup';
+              colName = 'SupportGroup';
-            break;
+              break;
-          case 'approvalStatus':
+            case 'approvalStatus':
-            colName = 'ApprovalStatus';
+              colName = 'ApprovalStatus';
-            break;
+              break;
-          default:
+            default:
-            break;
+              break;
-        }
+          }
-        if(colName != ''){
+          if(colName != ''){
-          this.sortEnabled = true;
+            this.sortSelectorName = args.target.firstChild.innerText;
-          if(this.oldSort != null && this.oldSort.column == this.sort.column){
+            this.sortEnabled = true;
-            mode = 'dsc'
+            if(this.oldSort != null && this.oldSort.column == this.sort.column){
+              mode = 'dsc'
+            }
+            this.oldSort = this.sort;
+            this.sort = {'column': colName, 'mode': mode}
+            this.refreshData();
+          }else{
+            this.sortSelectorName = null;
+            args.cancel = true;
           }
-          this.oldSort = this.sort;
-          this.sort = {'column': colName, 'mode': mode}
-          this.refreshData();
         }
-      }
+
     }
   }
 

frontend/src/index.html

@@ -25,4 +25,20 @@
   } */
 </style>
 
+<style>
+  .e-headercell {
+    border: 1px solid #ccc;
+    padding: 10px;
+    margin: 5px;
+    background-color: white;
+  }
 
+  .e-headercell.selected {
+    background-color: lightblue;
+  }
+  .square {
+    background-color: #2ecc71;
+    width: 20px;
+    height: 20px;
+  }
+</style>