File
Implements
Constructor
constructor(apiService: ApiService, toastr: ToastrService, spinner: NgxSpinnerService)
|
|
|
Parameters :
| Name |
Type |
Optional |
| apiService |
ApiService
|
No
|
| toastr |
ToastrService
|
No
|
| spinner |
NgxSpinnerService
|
No
|
|
Methods
|
mapMonth
|
mapMonth(month: number)
|
|
|
Parameters :
| Name |
Type |
Optional |
| month |
number
|
No
|
|
|
mapStatus
|
mapStatus(status: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| status |
string
|
No
|
|
|
mapTotalHours
|
mapTotalHours(details: TimesheetDetails[])
|
|
|
Parameters :
| Name |
Type |
Optional |
| details |
TimesheetDetails[]
|
No
|
|
|
Public
timesheetList
|
Type : Timesheet[]
|
Default value : []
|
|
|
|
Public
users
|
Type : User[]
|
Default value : []
|
|
|
import { Component, OnInit } from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';
import { ToastrService } from 'ngx-toastr';
import { Timesheet } from '../models/timesheet';
import { TimesheetDetails } from '../models/timesheet-details';
import { User } from '../models/user';
import { ApiService } from '../services/api.service';
import { mapMonth, mapStatus } from '../timesheets-list/timesheet-list.utils';
@Component({
selector: 'app-manage-timesheets',
templateUrl: './manage-timesheets.component.html',
styleUrls: ['./manage-timesheets.component.css']
})
export class ManageTimesheetsComponent implements OnInit {
public timesheetList: Timesheet[] = []
public users: User[] = []
constructor(private apiService: ApiService, private toastr: ToastrService, private spinner: NgxSpinnerService) { }
ngOnInit(): void {
this.spinner.show()
this.apiService.GetTimesheetListByStatus('P').subscribe(
response => {
this.timesheetList = response;
this.timesheetList.map(sheet => {
this.apiService.getUserById(Number(sheet.userId)).subscribe(
response => {
this.users.push(response);
}
)
this.spinner.hide()
})
}
)
}
mapMonth(month: number): string {
return mapMonth(month);
}
mapStatus(status: string): string {
return mapStatus(status);
}
mapTotalHours(details: TimesheetDetails[]): number{
let hoursReporterd = 0;
details.forEach(
detail => {
hoursReporterd += detail.registeredHours;
}
)
return hoursReporterd;
}
}
<div class="page-header pb-10 page-header-dark bg-primary">
<div class="container-fluid">
<div class="page-header-content">
<h1 class="page-header-title">
<div class="page-header-icon"><i class="fas fa-clipboard-check"></i></div>
<span>Timesheets</span>
</h1>
<div class="page-header-subtitle">Timesheets that required your attention!</div>
</div>
</div>
</div>
<ngx-spinner bdOpacity=0.5 bdColor="rgba(51,51,51,0.85)" size="medium" color="#fff" type="line-scale" [fullScreen]="true">
<p style="color: white"> Openning connection to our database... </p>
</ngx-spinner>
<div class="container-fluid mt-n10">
<div class="card card-header-actions mb-2 lift" *ngFor="let timesheet of timesheetList, let i = index">
<div class="card-header" [routerLink]="['/timesheet-review', timesheet.timesheetID]">
<h1 class="mt-2">{{mapMonth(timesheet.month)}} {{timesheet.year}} - {{users[i]?.firstName ?? ''}} {{users[i]?.lastName ?? ''}}</h1>
<div style="text-align: right; justify-content: right; display:inline-block;">
<button disabled class="btn btn-success mr-3" style="text-align: right; justify-content: right; display:inline-block;">
{{mapTotalHours(timesheet.timesheetDetails)}}h Reported
</button>
<button disabled [ngClass]="timesheet.timesheetStatus == 'A' ? 'btn btn-success' :
timesheet.timesheetStatus == 'P' ?
'btn btn-secondary' :
timesheet.timesheetStatus == 'D' ?
'btn btn-warning' :
'btn btn-danger'" style="display:inline-block;">
{{mapStatus(timesheet.timesheetStatus)}}
</button>
</div>
</div>
</div>
</div>
Legend
Html element with directive