Skip to content

Commit dd90c81

Browse files
ngalvare10ngalvare10
committed
TT-664 fix bad UX
1 parent d617e1d commit dd90c81

File tree

6 files changed

+116
-96
lines changed

6 files changed

+116
-96
lines changed

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

Lines changed: 57 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,62 @@
11
<div class="row scroll-table mt-5 ml-0">
22
<app-search-user [users]="users" (selectedUserId)="user($event)"></app-search-user>
33

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

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,3 +132,5 @@ table.dataTable thead .sorting_desc {
132132
font-style: italic;
133133
cursor: pointer;
134134
}
135+
136+

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

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,17 +27,21 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
2727
users: User[] = [];
2828
dtOptions: any = {
2929
scrollY: '590px',
30+
sScrollX: '100%',
31+
bScrollCollapse: true,
3032
dom: '<"d-flex justify-content-between"B<"d-flex"<"mr-5"l>f>>rtip',
3133
pageLength: 30,
3234
lengthMenu: [this.selectOptionValues, this.selectOptionNames],
3335
buttons: [
3436
{
3537
text: 'Column Visibility' + ' ▼',
36-
extend: 'colvis',
37-
columns: ':not(.hidden-col)'
38+
extend: 'colvis'
3839
},
3940
{
40-
extend: 'print'
41+
extend: 'print',
42+
exportOptions: {
43+
columns: ':visible'
44+
}
4145
},
4246
{
4347
extend: 'excel',
@@ -88,28 +92,34 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
8892
ngOnInit(): void {
8993
this.rerenderTableSubscription = this.reportDataSource$.subscribe((ds) => {
9094
this.sumDates(ds.data);
91-
this.rerenderDataTable();
95+
console.log(this.dtElement)
9296
});
97+
9398
this.uploadUsers();
99+
94100
}
95101

96102
ngAfterViewInit(): void {
97103
this.rerenderDataTable();
104+
98105
}
99106

100107
ngOnDestroy(): void {
101108
this.rerenderTableSubscription.unsubscribe();
102109
this.dtTrigger.unsubscribe();
103110
}
104111

105-
private rerenderDataTable(): void {
112+
private rerenderDataTable(): any {
106113
if (this.dtElement && this.dtElement.dtInstance) {
107114
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
108115
dtInstance.destroy();
109116
this.dtTrigger.next();
110117
});
111118
} else {
119+
112120
this.dtTrigger.next();
121+
122+
return;
113123
}
114124
}
115125

@@ -151,6 +161,4 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
151161
user(userId: string){
152162
this.selectedUserId.emit(userId);
153163
}
154-
155-
}
156-
164+
}

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

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -23,39 +23,41 @@
2323
</div>
2424

2525
<div id="listView" [hidden]="displayGridView">
26-
<table class="table table-sm table-striped mb-0" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions" *ngIf="(timeEntriesDataSource$ | async) as dataSource">
27-
<caption></caption>
28-
<thead class="thead-blue">
29-
<tr class="d-flex">
30-
<th class="col">Date</th>
31-
<th class="col">Time in - out</th>
32-
<th class="col">Duration</th>
33-
<th class="col">Customer</th>
34-
<th class="col">Project</th>
35-
<th class="col">Activity</th>
36-
<th class="col"></th>
37-
</tr>
38-
</thead>
39-
<app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
40-
<tbody *ngIf="!dataSource.isLoading">
41-
<tr class="d-flex" *ngFor="let entry of dataSource.data">
42-
<td class="col">{{ entry.start_date | date: 'MM/dd/yyyy' }}</td>
43-
<td class="col">{{ dateTimeOffset.parseDateTimeOffset(entry.start_date,entry.timezone_offset) }} - {{ dateTimeOffset.parseDateTimeOffset(entry.end_date,entry.timezone_offset) }}</td>
44-
<td class="col">{{ entry.end_date | substractDate: entry.start_date }}</td>
45-
<td class="col">{{ entry.customer_name }}</td>
46-
<td class="col">{{ entry.project_name }}</td>
47-
<td class="col">{{ entry.activity_name }}</td>
48-
<td class="col">
49-
<button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editRecordsByDate" (click)="editEntry(entry.id)">
50-
<i class="fa fa-edit fa-xs"></i>
51-
</button>
52-
<button class="btn btn-sm btn-danger ml-2" data-toggle="modal" data-target="#deleteModal" (click)="openModal(entry)">
53-
<i class="fa fa-trash fa-xs"></i>
54-
</button>
55-
</td>
56-
</tr>
57-
</tbody>
58-
</table>
26+
<div class="table-responsive">
27+
<table class="table table-sm table-striped mb-0 " datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions" *ngIf="(timeEntriesDataSource$ | async) as dataSource">
28+
<caption></caption>
29+
<thead class="thead-blue">
30+
<tr class="d-flex">
31+
<th class="col">Date</th>
32+
<th class="col">Time in - out</th>
33+
<th class="col">Duration</th>
34+
<th class="col">Customer</th>
35+
<th class="col">Project</th>
36+
<th class="col">Activity</th>
37+
<th class="col"></th>
38+
</tr>
39+
</thead>
40+
<app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
41+
<tbody *ngIf="!dataSource.isLoading">
42+
<tr class="d-flex" *ngFor="let entry of dataSource.data">
43+
<td class="col">{{ entry.start_date | date: 'MM/dd/yyyy' }}</td>
44+
<td class="col">{{ dateTimeOffset.parseDateTimeOffset(entry.start_date,entry.timezone_offset) }} - {{ dateTimeOffset.parseDateTimeOffset(entry.end_date,entry.timezone_offset) }}</td>
45+
<td class="col">{{ entry.end_date | substractDate: entry.start_date }}</td>
46+
<td class="col">{{ entry.customer_name }}</td>
47+
<td class="col">{{ entry.project_name }}</td>
48+
<td class="col">{{ entry.activity_name }}</td>
49+
<td class="col">
50+
<button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editRecordsByDate" (click)="editEntry(entry.id)">
51+
<i class="fa fa-edit fa-xs"></i>
52+
</button>
53+
<button class="btn btn-sm btn-danger ml-2" data-toggle="modal" data-target="#deleteModal" (click)="openModal(entry)">
54+
<i class="fa fa-trash fa-xs"></i>
55+
</button>
56+
</td>
57+
</tr>
58+
</tbody>
59+
</table>
60+
</div>
5961
</div>
6062
</div>
6163

‎src/styles.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,11 @@ Overwritten calendar style
6868
border: 0.1px solid lighten($primary-text, 30%);
6969
}
7070

71+
.buttons-columnVisibility
72+
{
73+
background: $primary-disable !important;
74+
}
75+
7176
@media (max-width: 640px) {
7277
div.dt-buttons {
7378
text-align: start !important;

‎src/styles/colors.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ $font-size-base: 0.9rem;
22

33
$dark: #5c4e63;
44
$primary: #00baee;
5+
$primary-disable: #9ecedbe7;
56
$secondary: #555164;
67
$success: #00cc6c;
78
$warning: #ff5e0a;

0 commit comments

Comments
 (0)