TTL 886 display time zone reports (#988)

feat: TTL-886 add time_zone column to reports

Author: Santiago220991

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

@@ -7,6 +7,7 @@
     [dtTrigger]="dtTrigger"
     [dtOptions]="dtOptions"
     *ngIf="reportDataSource$ | async as dataSource"
+    id="time-entries-table"
   >
     <thead class="thead-blue">
       <tr class="d-flex">
@@ -17,6 +18,7 @@
         <th class="col sm-col" title="Duration (hours)">Duration</th>
         <th class="col x-sm-col" title="Time in">Time in</th>
         <th class="col x-sm-col" title="Time out">Time out</th>
+        <th class="col sm-col" title="Time zone">Time zone</th>
         <th class="col md-col">Project</th>
         <th class="hidden-col">Project ID</th>
         <th class="col md-col">Customer</th>
@@ -38,11 +40,14 @@
         <td class="col sm-col">
           {{ entry.start_date | date: 'MM/dd/yyyy' }}
         </td>
-        <td class="col sm-col">
+        <td class="col sm-col text-center">
           {{ entry.end_date | substractDateDisplayAsFloat: entry.start_date }}
         </td>
-        <td class="col x-sm-col">{{ dateTimeOffset.parseDateTimeOffset(entry.start_date, entry.timezone_offset) }}</td>
-        <td class="col x-sm-col">{{ dateTimeOffset.parseDateTimeOffset(entry.end_date, entry.timezone_offset) }}</td>
+        <td class="col x-sm-col text-center">{{ dateTimeOffset.parseDateTimeOffset(entry.start_date, entry.timezone_offset) }}</td>
+        <td class="col x-sm-col text-center">{{ dateTimeOffset.parseDateTimeOffset(entry.end_date, entry.timezone_offset) }}</td>
+        <td class="col sm-col text-center">
+          UTC{{ (entry.timezone_offset < 0) ? "+" : "" }}{{ - entry.timezone_offset / 60 }}
+        </td>
         <td class="col md-col">{{ entry.project_name }}</td>
         <td class="hidden-col">{{ entry.project_id }}</td>
         <td class="col md-col">{{ entry.customer_name }}</td>

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

@@ -30,6 +30,7 @@ describe('Reports Page', () => {
       uri: 'custom uri',
       project_id: '123',
       project_name: 'Time-Tracker',
+      timezone_offset: 300,
     };
 
     const timeEntryList: Entry[] = [
@@ -253,6 +254,25 @@ describe('Reports Page', () => {
       });
     });
 
+    it('Should render column header called Time Zone', () => {
+      const table = document.querySelector('table#time-entries-table');
+      const tableHeaderElements = Array.from(table.getElementsByTagName('th'));
+      const tableHeaderTitles = tableHeaderElements.map(element => (element.textContent));
+      expect(tableHeaderTitles).toContain('Time zone');
+    });
+
+    it('Should render a cell content with UTC text', () => {
+      const TIME_ZONE_CELL_NUMBER = 7;
+      const TABLE_ROW_NUMBER = 1;
+      const table = document.querySelector('table#time-entries-table');
+      const arrayTableRows = Array.from(table.getElementsByTagName('tr'));
+      const tablerow = arrayTableRows[TABLE_ROW_NUMBER];
+      const cells = Array.from(tablerow.getElementsByTagName('td'));
+      const cell = cells[TIME_ZONE_CELL_NUMBER].textContent;
+      expect(cell).toContain('UTC-5');
+    });
+
+
     afterEach(() => {
       fixture.destroy();
     });

src/app/modules/shared/models/entry.model.ts

@@ -15,6 +15,7 @@ export interface Entry {
 
   customer_id?: string;
   customer_name?: string;
+  timezone_offset?: number;
 }
 
 export interface NewEntry {