Skip to content

Commit b94e675

Browse files
bytesantiagobytesantiago
committed
fix: TT-344 handle pagination bugs
1 parent 79c00cd commit b94e675

File tree

2 files changed

+71
-77
lines changed

2 files changed

+71
-77
lines changed

‎src/app/modules/time-entries/pages/time-entries.component.html‎

Lines changed: 71 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -23,84 +23,80 @@
2323
<app-month-picker [selectedDate]="selectedDate" (dateSelected)="dateSelected($event)"></app-month-picker>
2424
<div style="height: 15px"></div>
2525

26-
<div *ngIf="displayGridView; then gridView; else listView"></div>
27-
<ng-template #gridView>
28-
<div id="gridView">
29-
<div *ngIf="timeEntriesDataSource$ | async as dataSource">
30-
<app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
31-
<app-calendar
32-
*ngIf="!dataSource.isLoading"
33-
[timeEntries$]="timeEntriesDataSource$"
34-
[currentDate]="selectedDate.toDate()"
35-
[calendarView]="calendarView"
36-
(changeDate)="changeDate($event)"
37-
(changeView)="changeView($event)"
38-
(viewModal)="editEntry($event.id)"
39-
(deleteTimeEntry)="openModal($event.timeEntry)"
40-
>
41-
</app-calendar>
42-
</div>
26+
27+
<div id="gridView" [hidden]="!displayGridView">
28+
<div *ngIf="timeEntriesDataSource$ | async as dataSource">
29+
<app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
30+
<app-calendar
31+
*ngIf="!dataSource.isLoading"
32+
[timeEntries$]="timeEntriesDataSource$"
33+
[currentDate]="selectedDate.toDate()"
34+
[calendarView]="calendarView"
35+
(changeDate)="changeDate($event)"
36+
(changeView)="changeView($event)"
37+
(viewModal)="editEntry($event.id)"
38+
(deleteTimeEntry)="openModal($event.timeEntry)"
39+
>
40+
</app-calendar>
4341
</div>
44-
</ng-template>
45-
46-
<ng-template #listView>
47-
<div id="listView">
48-
<table
49-
class="table table-sm table-striped mb-0"
50-
datatable
51-
[dtTrigger]="dtTrigger"
52-
[dtOptions]="dtOptions"
53-
*ngIf="(timeEntriesDataSource$ | async) as dataSource">
54-
<caption></caption>
55-
<thead class="thead-blue">
56-
<tr class="d-flex">
57-
<th class="col">Date</th>
58-
<th class="col">Time in - out</th>
59-
<th class="col">Duration</th>
60-
<th class="col">Customer</th>
61-
<th class="col">Project</th>
62-
<th class="col">Activity</th>
63-
<th class="col"></th>
64-
</tr>
65-
</thead>
66-
<tr *ngIf="dataSource.isLoading">
42+
</div>
43+
44+
<div id="listView" [hidden]="displayGridView">
45+
<table
46+
class="table table-sm table-striped mb-0"
47+
datatable
48+
[dtTrigger]="dtTrigger"
49+
[dtOptions]="dtOptions"
50+
*ngIf="(timeEntriesDataSource$ | async) as dataSource">
51+
<caption></caption>
52+
<thead class="thead-blue">
53+
<tr class="d-flex">
54+
<th class="col">Date</th>
55+
<th class="col">Time in - out</th>
56+
<th class="col">Duration</th>
57+
<th class="col">Customer</th>
58+
<th class="col">Project</th>
59+
<th class="col">Activity</th>
60+
<th class="col"></th>
61+
</tr>
62+
</thead>
63+
<tr *ngIf="dataSource.isLoading">
64+
<td class="text-center" colspan="7">{{NO_DATA_MESSAGE}}</td>
65+
</tr>
66+
<app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
67+
<tbody *ngIf="!dataSource.isLoading">
68+
<tr *ngIf="!dataSource?.data.length">
6769
<td class="text-center" colspan="7">{{NO_DATA_MESSAGE}}</td>
6870
</tr>
69-
<app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
70-
<tbody *ngIf="!dataSource.isLoading">
71-
<tr *ngIf="!dataSource?.data.length">
72-
<td class="text-center" colspan="7">{{NO_DATA_MESSAGE}}</td>
73-
</tr>
74-
<tr class="d-flex" *ngFor="let entry of dataSource.data">
75-
<td class="col">{{ entry.start_date | date: 'MM/dd/yyyy' }}</td>
76-
<td class="col">{{ entry.start_date | date: 'HH:mm' }} - {{ entry.end_date | date: 'HH:mm' }}</td>
77-
<td class="col">{{ entry.end_date | substractDate: entry.start_date }}</td>
78-
<td class="col">{{ entry.customer_name }}</td>
79-
<td class="col">{{ entry.project_name }}</td>
80-
<td class="col">{{ entry.activity_name }}</td>
81-
<td class="col">
82-
<button
83-
class="btn btn-sm btn-primary"
84-
data-toggle="modal"
85-
data-target="#editRecordsByDate"
86-
(click)="editEntry(entry.id)"
87-
>
88-
<i class="fa fa-edit fa-xs"></i>
89-
</button>
90-
<button
91-
class="btn btn-sm btn-danger ml-2"
92-
data-toggle="modal"
93-
data-target="#deleteModal"
94-
(click)="openModal(entry)"
95-
>
96-
<i class="fa fa-trash fa-xs"></i>
97-
</button>
98-
</td>
99-
</tr>
100-
</tbody>
101-
</table>
102-
</div>
103-
</ng-template>
71+
<tr class="d-flex" *ngFor="let entry of dataSource.data">
72+
<td class="col">{{ entry.start_date | date: 'MM/dd/yyyy' }}</td>
73+
<td class="col">{{ entry.start_date | date: 'HH:mm' }} - {{ entry.end_date | date: 'HH:mm' }}</td>
74+
<td class="col">{{ entry.end_date | substractDate: entry.start_date }}</td>
75+
<td class="col">{{ entry.customer_name }}</td>
76+
<td class="col">{{ entry.project_name }}</td>
77+
<td class="col">{{ entry.activity_name }}</td>
78+
<td class="col">
79+
<button
80+
class="btn btn-sm btn-primary"
81+
data-toggle="modal"
82+
data-target="#editRecordsByDate"
83+
(click)="editEntry(entry.id)"
84+
>
85+
<i class="fa fa-edit fa-xs"></i>
86+
</button>
87+
<button
88+
class="btn btn-sm btn-danger ml-2"
89+
data-toggle="modal"
90+
data-target="#deleteModal"
91+
(click)="openModal(entry)"
92+
>
93+
<i class="fa fa-trash fa-xs"></i>
94+
</button>
95+
</td>
96+
</tr>
97+
</tbody>
98+
</table>
99+
</div>
104100
</div>
105101

106102
<div class="modal fade" id="editRecordsByDate" tabindex="-1" role="dialog">

‎src/app/modules/time-entries/pages/time-entries.component.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -195,8 +195,6 @@ export class TimeEntriesComponent implements OnInit, OnDestroy, AfterViewInit {
195195
}
196196
onDisplayModeChange() {
197197
this.displayGridView = !this.displayGridView;
198-
this.dtTrigger = new Subject();
199-
this.dtTrigger.next();
200198
}
201199
removeEntry() {
202200
this.store.dispatch(new entryActions.DeleteEntry(this.idToDelete));

0 commit comments

Comments
 (0)