Skip to content

Commit e2a2761

Browse files
committed
Implementing time sum feature
1 parent 128c5d2 commit e2a2761

File tree

3 files changed

+73
-81
lines changed

3 files changed

+73
-81
lines changed
Lines changed: 55 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,58 @@
1-
<div class="row scroll-table mt-5 ml-0">
2-
<table
3-
class="table table-striped mb-0"
4-
datatable
5-
[dtTrigger]="dtTrigger"
6-
[dtOptions]="dtOptions"
7-
*ngIf="(reportDataSource$ | async) as dataSource">
8-
<thead class="thead-blue">
9-
<tr class="d-flex">
10-
<th class="hidden-col">ID</th>
11-
<th class="col md-col">User email</th>
12-
<th class="col sm-col">Date</th>
13-
<th class="col sm-col" title="Duration (hours)">Duration</th>
14-
<th class="col x-sm-col" title="Time in">Time in</th>
15-
<th class="col x-sm-col" title="Time out">Time out</th>
16-
<th class="col md-col">Project</th>
17-
<th class="hidden-col">Project ID</th>
18-
<th class="col md-col">Customer</th>
19-
<th class="hidden-col">Customer ID</th>
20-
<th class="col md-col">Activity</th>
21-
<th class="col lg-col">Ticket</th>
22-
<th class="col lg-col">Description</th>
23-
<th class="col lg-col">Technologies</th>
24-
</tr>
25-
</thead>
26-
<app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
27-
<tbody *ngIf="!dataSource.isLoading">
28-
<tr class="d-flex" *ngFor="let entry of dataSource.data">
29-
<td class="hidden-col">{{ entry.id }}</td>
30-
<td class="col md-col">{{ entry.owner_email }}</td>
31-
<td class="col sm-col">
32-
{{ entry.start_date | date: 'MM/dd/yyyy' }}
33-
</td>
34-
<td class="col sm-col">
35-
{{ entry.end_date | substractDate: entry.start_date }}
36-
</td>
37-
<td class="col x-sm-col">{{ entry.start_date | date: 'HH:mm' }}</td>
38-
<td class="col x-sm-col">{{ entry.end_date | date: 'HH:mm' }}</td>
39-
<td class="col md-col">{{ entry.project_name }}</td>
40-
<td class="hidden-col">{{ entry.project_id }}</td>
41-
<td class="col md-col">{{ entry.customer_name }}</td>
42-
<td class="hidden-col">{{ entry.customer_id }}</td>
43-
<td class="col md-col">{{ entry.activity_name }}</td>
44-
<td class="col lg-col">
45-
<ng-container *ngIf="entry.uri !== null">
46-
<a [class.is-url]="isURL(entry.uri)" (click)="openURLInNewTab(entry.uri)">
1+
<div class="row scroll-table mt-5 ml-0 mb-3">
2+
<table class="table table-striped mb-0" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions" *ngIf="(reportDataSource$ | async) as dataSource">
3+
<thead class="thead-blue">
4+
<tr class="d-flex">
5+
<th class="hidden-col">ID</th>
6+
<th class="col md-col">User email</th>
7+
<th class="col sm-col">Date</th>
8+
<th class="col sm-col" title="Duration (hours)">Duration</th>
9+
<th class="col x-sm-col" title="Time in">Time in</th>
10+
<th class="col x-sm-col" title="Time out">Time out</th>
11+
<th class="col md-col">Project</th>
12+
<th class="hidden-col">Project ID</th>
13+
<th class="col md-col">Customer</th>
14+
<th class="hidden-col">Customer ID</th>
15+
<th class="col md-col">Activity</th>
16+
<th class="col lg-col">Ticket</th>
17+
<th class="col lg-col">Description</th>
18+
<th class="col lg-col">Technologies</th>
19+
</tr>
20+
</thead>
21+
<app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
22+
<tbody *ngIf="!dataSource.isLoading">
23+
<tr class="d-flex" *ngFor="let entry of dataSource.data">
24+
<td class="hidden-col">{{ entry.id }}</td>
25+
<td class="col md-col">{{ entry.owner_email }}</td>
26+
<td class="col sm-col">
27+
{{ entry.start_date | date: 'MM/dd/yyyy' }}
28+
</td>
29+
<td class="col sm-col">
30+
{{ entry.end_date | substractDate: entry.start_date }}
31+
</td>
32+
<td class="col x-sm-col">{{ entry.start_date | date: 'HH:mm' }}</td>
33+
<td class="col x-sm-col">{{ entry.end_date | date: 'HH:mm' }}</td>
34+
<td class="col md-col">{{ entry.project_name }}</td>
35+
<td class="hidden-col">{{ entry.project_id }}</td>
36+
<td class="col md-col">{{ entry.customer_name }}</td>
37+
<td class="hidden-col">{{ entry.customer_id }}</td>
38+
<td class="col md-col">{{ entry.activity_name }}</td>
39+
<td class="col lg-col">
40+
<ng-container *ngIf="entry.uri !== null">
41+
<a [class.is-url]="isURL(entry.uri)" (click)="openURLInNewTab(entry.uri)">
4742
{{ entry.uri }}
4843
</a>
49-
</ng-container>
50-
</td>
51-
<td class="col lg-col">{{ entry.description }}</td>
52-
<td class="col lg-col">
53-
<ng-container *ngIf="entry.technologies.length > 0">
54-
<div *ngFor="let technology of entry.technologies" class="badge bg-secondary text-wrap">
55-
{{ technology }}
56-
</div>
57-
</ng-container>
58-
</td>
59-
</tr>
60-
</tbody>
61-
</table>
44+
</ng-container>
45+
</td>
46+
<td class="col lg-col">{{ entry.description }}</td>
47+
<td class="col lg-col">
48+
<ng-container *ngIf="entry.technologies.length > 0">
49+
<div *ngFor="let technology of entry.technologies" class="badge bg-secondary text-wrap">
50+
{{ technology }}
51+
</div>
52+
</ng-container>
53+
</td>
54+
</tr>
55+
</tbody>
56+
</table>
6257
</div>
58+
<div class="alert alert-dark">Total: {{this.resultSum.hours}} hours, {{this.resultSum.minutes}} minutes, {{this.resultSum.seconds}} seconds</div>

src/app/modules/reports/components/time-entries-table/time-entries-table.component.ts

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
6262
isLoading$: Observable<boolean>;
6363
reportDataSource$: Observable<DataSource<Entry>>;
6464
rerenderTableSubscription: Subscription;
65+
resultSum: TotalHours;
6566

6667
constructor(private store: Store<EntryState>) {
6768
this.reportDataSource$ = this.store.pipe(select(getReportDataSource));
@@ -109,28 +110,17 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
109110
return column === durationColumnIndex ? moment.duration(dataFormated).asHours().toFixed(2) : dataFormated;
110111
}
111112

112-
sumDates(arrayData: Entry[]): TotalHours{
113-
114-
let totalDaysInHours: number = 0;
115-
let totalHours: number = 0;
116-
let totalMinutes: number = 0;
117-
let totalSeconds: number = 0;
118-
let resultSum: TotalHours;
119-
113+
sumDates(arrayData: Entry[]): TotalHours{
114+
this.resultSum = new TotalHours();
120115
arrayData.forEach(entry =>{
121116
let duration = this.getTimeDifference(moment(entry.end_date),moment(entry.start_date));
122-
totalDaysInHours += duration.days() >= 1 ? duration.days() * 24 : 0;
123-
totalHours += duration.hours();
124-
totalMinutes += duration.minutes();
125-
totalSeconds += duration.seconds();
126-
127-
console.log(resultSum);
128-
129-
117+
this.resultSum.hours = Math.abs( this.resultSum.hours + duration.days() >= 1 ? duration.days() * 24 : 0);
118+
this.resultSum.hours = Math.abs(this.resultSum.hours + duration.hours());
119+
this.resultSum.minutes = Math.abs(this.resultSum.minutes + duration.minutes());
120+
this.resultSum.seconds = Math.abs(this.resultSum.seconds + duration.seconds());
130121
});
131-
return resultSum;
122+
return this.resultSum;
132123
}
133-
134124
getTimeDifference(substractDate: moment.Moment, fromDate: moment.Moment): moment.Duration {
135125
return moment.duration(fromDate.diff(substractDate));
136126
}
Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1-
export interface TotalHours {
2-
totalHours: number;
3-
totalMinutes: number;
4-
totalSeconds: number;
1+
export class TotalHours {
2+
hours?: number;
3+
minutes?: number;
4+
seconds?: number;
5+
6+
constructor() {
7+
this.hours = 0;
8+
this.minutes = 0;
9+
this.seconds = 0;
10+
}
511
}

0 commit comments

Comments
 (0)