Skip to content

Commit 390b6a9

Browse files
jr-98scastillo-jp
jr-98
authored and
scastillo-jp
committed
fix: TT-144 Responsive all tables
1 parent d5773d7 commit 390b6a9

File tree

6 files changed

+71
-69
lines changed

6 files changed

+71
-69
lines changed

‎src/app/modules/activities-management/components/activity-list/activity-list.component.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@
22
<table class="table table-sm table-bordered table-striped">
33
<thead class="thead-blue">
44
<tr class="d-flex">
5-
<th class="col-4">Activity ID</th>
6-
<th class="col-5">Activity</th>
5+
<th class="col-4 text-center">Activity ID</th>
6+
<th class="col-5 text-center">Activity</th>
77
<th class="col-3 text-center">Options</th>
88
</tr>
99
</thead>
1010
<app-loading-bar *ngIf="(isLoading$ | async)"></app-loading-bar>
1111
<tbody *ngIf="(isLoading$ | async) === false">
1212
<tr class="d-flex" *ngFor="let activity of activities">
13-
<td class="col-sm-4">{{ activity.id }}</td>
14-
<td class="col-sm-5">{{ activity.name }}</td>
15-
<td class="col-sm-3 text-center">
13+
<td class="col-4 text-break">{{ activity.id }}</td>
14+
<td class="col-5 ">{{ activity.name }}</td>
15+
<td class="col-3 text-center">
1616
<button
1717
type="button"
1818
class="btn btn-sm btn-primary"

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

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

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,10 @@
2626
.hidden-col{
2727
display: none;
2828
}
29+
.table {
30+
overflow-x: auto;
31+
}
32+
.row{
33+
width: 100%;
34+
display: grid;
35+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { getReportDataSource } from '../../../time-clock/store/entry.selectors';
1717
})
1818
export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewInit {
1919
dtOptions: any = {
20-
scrollY: '600px',
20+
scrollY: '590px',
2121
paging: false,
2222
dom: 'Bfrtip',
2323
buttons: [

‎src/app/modules/reports/components/time-range-form/time-range-form.component.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<form [formGroup]="reportForm" (ngSubmit)="onSubmit()">
2-
32
<div class="form-group row">
43
<label class="col-12 col-md-2 col-form-label my-1">Start date:</label>
54
<div class="col-12 col-sm-6 col-md-3 my-1">

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -128,13 +128,13 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
128128
if (dataToUse && this.isNewEntry()) {
129129
const startDate = new Date(new Date().setHours(0, 0, 0, 0));
130130
const entry = {
131-
description : dataToUse.description ? dataToUse.description : '',
132-
technologies : dataToUse.technologies ? dataToUse.technologies : [],
133-
uri : dataToUse.uri ? dataToUse.uri : '',
134-
activity_id : dataToUse.activity_id,
135-
project_id : dataToUse.project_id,
136-
start_date : startDate,
137-
end_date : startDate
131+
description: dataToUse.description ? dataToUse.description : '',
132+
technologies: dataToUse.technologies ? dataToUse.technologies : [],
133+
uri: dataToUse.uri ? dataToUse.uri : '',
134+
activity_id: dataToUse.activity_id,
135+
project_id: dataToUse.project_id,
136+
start_date: startDate,
137+
end_date: startDate
138138
};
139139
this.entry = entry;
140140
}

0 commit comments

Comments
 (0)