<div class="container" style="min-height: 50px; margin-top: 0px;">
<div class="col-md-12">
<div class="statistics">
<div id="myRoleItemsAll" >
<button [ngClass]="{'selected' : totalMySupportVarianceSelected}" class="statistic-box statistic-box-3" (click)="displayTotalVarianceMyAwaitingSupport()">
<p class="countnumber countnumber-purple">{{totalMySupportVarianceCount}}</p>
<label>Total</label>
</button>
</div>
<div id="myRoleItemsActive" >
<button [ngClass]="{'selected' : pendingByMeVarianceSelected}" class="statistic-box statistic-box-3" (click)="displayPendingByMeVarianceMyAwaitingSupport()">
<p class="countnumber countnumber-green">{{pendingByMeVarianceCount}}</p>
<label>Pending on Me</label>
</button>
</div>
<div id="myRoleItemsExpired" >
<button [ngClass]="{'selected' : doneByMeVarianceSelected}" class="statistic-box statistic-box-3" (click)="displayDoneByMeVarianceMyAwaitingSupport()">
<p class="countnumber countnumber-red">{{doneByMeVarianceCount}}</p>
<label>Done by Me</label>
</button>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="panelGridContainer">
<ng-template #template let-anchor>
<span>{{ anchor.nativeElement.innerText }}</span>
</ng-template>
<div kendoTooltip
showOn="none"
[tooltipTemplate]="template"
filter=".k-grid td"
(mouseover)="showTooltip($event)"
position="right"
>
<kendo-grid
[data]="viewMySupport"
[columnMenu]="false"
filterable='menu'
[filter]="gridState.filter"
[resizable]="true"
[sort]="gridState.sort"
[sortable]="true"
(filterChange)="filterChange($event)"
(dataStateChange)="onStateChange($event)"
[navigable]="true"
[style.height.%]="300"
>
<ng-template kendoGridToolbarTemplate>
<button type="button" kendoGridExcelCommand icon="file-excel">
Export to Excel
</button>
</ng-template>
<kendo-grid-column
field="varianceID"
title=" Variance ID"
>
<ng-template kendoGridCellTemplate let-dataItem>
<a style="color:#337ab7" [routerLink]="['/variance/edit/'+dataItem.varianceID]">{{dataItem.varianceID}}</a>
</ng-template>
</kendo-grid-column>
<kendo-grid-column
field="varianceTitle"
title="Variance Title"
>
<ng-template kendoGridCellTemplate let-dataItem>
<span style="overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;"
>
{{ dataItem.varianceTitle }}
</span>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="expirationDate" title="Expiration Date"
format="MM/dd/yyyy"
filter="date"
>
<ng-template kendoGridCellTemplate let-dataItem>
{{dataItem.expirationDate | date: 'MM/dd/yyyy'}}
</ng-template>
</kendo-grid-column>
<kendo-grid-column
field="status"
title="Status"
></kendo-grid-column>
<kendo-grid-excel fileName="VarianceAwaitingSupportList.xlsx"></kendo-grid-excel>
</kendo-grid>
</div>
import { Component, Inject, OnInit, ViewChild } from '@angular/core';
import { filter, map, Observable } from 'rxjs';
import { GridDataResult, DataStateChangeEvent, GridComponent } from "@progress/kendo-angular-grid";
import { State, process, FilterDescriptor, FilterOperator, CompositeFilterDescriptor, DataSourceRequestState } from "@progress/kendo-data-query";
import { TooltipDirective } from '@progress/kendo-angular-tooltip';
import { AuthService } from 'src/app/services/general-app-services/auth/auth.service';
import { AwaitingSupportDashboardDataService } from 'src/app/admin/services/awaiting-support-dashboard-data.service';
@Component({
selector: 'app-supportawaitingitems',
templateUrl: './supportawaitingitems.component.html',
styleUrls: ['./supportawaitingitems.component.css']
})
export class SupportawaitingitemsComponent implements OnInit {
@ViewChild(TooltipDirective) public tooltipDir: TooltipDirective;
currentUserId: string;
public viewMySupportData: Observable<GridDataResult> | any;
public viewMySupport: Observable<GridDataResult> | any;
public gridState: State = {
sort: [],
// // Initial filter descriptor
filter: {
logic: 'and',
filters: []
}
};
public totalMySupportVarianceCount: number | undefined;
public pendingByMeVarianceCount: number | undefined;
public doneByMeVarianceCount: number | undefined;
totalMySupportVarianceSelected: boolean | undefined = true;
pendingByMeVarianceSelected: boolean | undefined = false;
doneByMeVarianceSelected: boolean | undefined = false;
private awaitingSupportService: AwaitingSupportDashboardDataService;
pendingState: string = "ActionPending";
doneState: string = "ActionDone";
constructor(@Inject(AwaitingSupportDashboardDataService) AwaitingSupportDashboardDataServiceFactory: () => AwaitingSupportDashboardDataService,
private authService: AuthService) {
this.awaitingSupportService = AwaitingSupportDashboardDataServiceFactory();
this.currentUserId = authService.getUserId();
}
public ngOnInit() {
this.awaitingSupportService.fetchCountOfVarianceAwaitingSupport(this.currentUserId).subscribe((val: any) => {
this.totalMySupportVarianceCount = val[0].totalVarianceCountForSupporter;
this.pendingByMeVarianceCount = val[0].pendingSupporterAction;
this.doneByMeVarianceCount = val[0].completedSupporterAction;
});
this.viewMySupportData = this.awaitingSupportService.pipe(
map((data) => process(data, this.gridState))
);
this.viewMySupport = this.viewMySupportData.subscribe(val => {
this.viewMySupport = val;
});
this.awaitingSupportService.read(this.currentUserId);
}
public onStateChange(state: DataSourceRequestState): void {
this.gridState = state;
this.awaitingSupportService.read(this.currentUserId);
}
public displayTotalVarianceMyAwaitingSupport() {
this.totalMySupportVarianceSelected = true;
this.pendingByMeVarianceSelected = false;
this.doneByMeVarianceSelected = false;
this.loadVariaceByStatus('All',true);
}
public filterChange(filter: CompositeFilterDescriptor): void
{
this.gridState.filter = filter;
//this.logs = filterBy(sampleProducts, filter);
}
public displayPendingByMeVarianceMyAwaitingSupport() {
this.totalMySupportVarianceSelected = false;
this.pendingByMeVarianceSelected = true;
this.doneByMeVarianceSelected = false;
this.loadVariaceByStatus(this.pendingState,false);
}
public displayDoneByMeVarianceMyAwaitingSupport() {
this.totalMySupportVarianceSelected = false;
this.pendingByMeVarianceSelected = false;
this.doneByMeVarianceSelected = true;
this.loadVariaceByStatus(this.doneState,false);
}
loadVariaceByStatus(statusCall: string, isTotalCall: boolean) {
if (isTotalCall) {
this.viewMySupportData = this.awaitingSupportService.pipe(
map((data) => process(data, this.gridState))
);
this.viewMySupport = this.viewMySupportData.subscribe(val => {
this.viewMySupport = val;
});
} else {
this.viewMySupportData = this.awaitingSupportService.pipe(
map((data) => process(data.filter(x => x.state === statusCall), this.gridState))
);
this.viewMySupport = this.viewMySupportData.subscribe(val => {
this.viewMySupport = val;
});
}
this.awaitingSupportService.read(this.currentUserId);
}
public showTooltip(e: MouseEvent): void {
const element = e.target as HTMLElement;
if ((element.nodeName === 'TD' || element.nodeName === 'TH')
&& element.offsetWidth < element.scrollWidth) {
this.tooltipDir.toggle(element);
} else {
this.tooltipDir.hide();
}
}
}