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> </div>
<!-- <button ejs-button id='filterRecord' (click)='filter()'>Filter</button> --> <!-- <button ejs-button id='filterRecord' (click)='filter()'>Filter</button> -->
<ejs-gantt *ngIf="renderGantt" #ganttObject id="ganttDefault" <ejs-gantt *ngIf="renderGantt" #ganttObject id="ganttDefault"
[ngStyle]="{'visibility':spin ? 'hidden' : 'visible'}" [ngStyle]="{'visibility':spin ? 'hidden' : 'visible'}"
@ -93,6 +92,51 @@
(expanding)="onExpand($event)" (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> <ng-template #tooltipSettingsTaskbar let-data>
<div> <div>
<table> <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); console.log(args);
this.spin = false; this.spin = false;
if(this.sortSelectorName){ 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'); const headerDivs = document.querySelectorAll('.e-headercelldiv');
headerDivs.forEach((div) => { headerDivs.forEach((div) => {
console.log('############################################'); console.log('############################################');
console.log(div); // console.log(div);
// Remove 'selected' class from all 'e-headercell' elements // Remove 'selected' class from all 'e-headercell' elements
// document.querySelectorAll('.e-headercell').forEach((cell) => { // document.querySelectorAll('.e-headercell').forEach((cell) => {
console.log(div.firstChild.textContent); // console.log(div.firstChild.textContent);
console.log(colName); // console.log(colName);
if(div.firstChild.textContent == colName){ if(div.firstChild.textContent == colName){
div.closest('.e-headercell').classList.add('selected'); 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{ }else{
// div.classList.remove('selected'); div.classList.remove('selected');
} }

2
frontend/src/index.html
View File

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