fix: TT-178 Make URI clickable when possible

Author: wobravo

package-lock.json

@@ -25,7 +25,7 @@
     </thead>
     <app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
     <tbody *ngIf="!dataSource.isLoading">
-      <tr class="d-flex" *ngFor="let entry of dataSource.data">
+      <tr class="d-flex" *ngFor="let entry of dataSource.data" _nghost-c0 = "" >
         <td class="hidden-col">{{ entry.id }}</td>
         <td class="col md-col">{{ entry.owner_email }}</td>
         <td class="col sm-col">
@@ -41,7 +41,7 @@
         <td class="col md-col">{{ entry.customer_name }}</td>
         <td class="hidden-col">{{ entry.customer_id }}</td>
         <td class="col md-col">{{ entry.activity_name }}</td>
-        <td class="col lg-col">{{ entry.uri }}</td>
+        <td class="col lg-col" id="uri"><a (click)="isLinkExternal(entry.uri)" [ngStyle]="{'cursor':'pointer','color':entry.uri === ('http' || 'https')  ? 'black' : 'blue' }">{{ entry.uri }}</a></td>
         <td class="col lg-col">{{ entry.description }}</td>
         <td class="col lg-col">{{ entry.technologies }}</td>
       </tr>

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

@@ -31,4 +31,4 @@
   overflow-x: scroll;
   width: 100%;
   display: grid;
-}
+}

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

@@ -3,7 +3,7 @@ import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { Entry } from 'src/app/modules/shared/models';
 import { SubstractDatePipe } from 'src/app/modules/shared/pipes/substract-date/substract-date.pipe';
 import { getReportDataSource } from 'src/app/modules/time-clock/store/entry.selectors';
-import { EntryState } from '../../../time-clock/store/entry.reducer';
+import { entryReducer, EntryState } from '../../../time-clock/store/entry.reducer';
 import { TimeEntriesTableComponent } from './time-entries-table.component';
 
 describe('Reports Page', () => {
@@ -76,6 +76,15 @@ describe('Reports Page', () => {
       expect(component.dtTrigger.next).toHaveBeenCalled();
     });
 
+    fit('when the variable starts with http or https it should be url', () => {
+      fixture.detectChanges();
+      const initialUri = ('http' || 'https');
+      const entryUri = fixture.debugElement.nativeElement.querySelector('[id=uri]');
+      console.log(entryUri);
+
+      expect(entryUri.id).toEqual(initialUri);
+    });
+
     afterEach(() => {
       fixture.destroy();
     });

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

@@ -1,13 +1,14 @@
 import { formatDate } from '@angular/common';
-import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild, NgModule } from '@angular/core';
 import { select, Store } from '@ngrx/store';
 import { DataTableDirective } from 'angular-datatables';
 import * as moment from 'moment';
+import { getMaxListeners } from 'process';
 import { Observable, Subject } from 'rxjs';
 import { Entry } from 'src/app/modules/shared/models';
 import { DataSource } from 'src/app/modules/shared/models/data-source.model';
 
-import { EntryState } from '../../../time-clock/store/entry.reducer';
+import { entryReducer, EntryState } from '../../../time-clock/store/entry.reducer';
 import { getReportDataSource } from '../../../time-clock/store/entry.selectors';
 
 @Component({
@@ -91,4 +92,10 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
       this.dtTrigger.next();
     }
   }
+
+  isLinkExternal(uri: string) {
+    const isValidUri = uri.startsWith('http' || 'https');
+    return isValidUri ? window.open(uri, '_blank') : '';
+  }
+
 }

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

@@ -160,9 +160,10 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
     this.selectedMonthAsText = moment().month(event.monthIndex).format('MMMM');
     this.store.dispatch(new entryActions.LoadEntries(this.selectedMonth, this.selectedYear));
   }
+
   openModal(item: any) {
     this.idToDelete = item.id;
     this.message = `Are you sure you want to delete ${item.activity_name}?`;
     this.showModal = true;
   }
-}
+}