taubem
/
ChangeCalendar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sort Arrow inserted

main
manueltauber 2023-09-05 10:13:26 +02:00
parent bb7a19dee3
commit be3d963cc3
3 changed files with 59 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/app/ntt-gantt/ntt-gantt.component.html
View File

@ -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>

20
frontend/src/app/ntt-gantt/ntt-gantt.component.ts
View File

@ -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');
}

2
frontend/src/index.html
View File

@ -34,7 +34,7 @@
}
.e-headercell.selected {
background-color: lightblue;
background-color: #E0E0E0;
}
.square {
background-color: #2ecc71;