fix: TT-178 applied styles to http|s ticket column

Author: thegreatyamori

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

@@ -1,10 +1,6 @@
 <div class="row scroll-table mt-5 ml-0">
-  <table
-    class="table table-striped mb-0"
-    datatable
-    [dtTrigger]="dtTrigger"
-    [dtOptions]="dtOptions"
-    *ngIf="(reportDataSource$ | async) as dataSource">
+  <table class="table table-striped mb-0" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions"
+    *ngIf="reportDataSource$ | async as dataSource">
     <thead class="thead-blue">
       <tr class="d-flex">
         <th class="hidden-col">ID</th>
@@ -25,7 +21,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" _nghost-c0 = "" >
+      <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 +37,13 @@
         <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"><a (click)="isLinkExternal(entry.uri)">{{ entry.uri }}</a></td>
+        <td class="col lg-col">
+          <ng-container *ngIf="entry.uri !== null">
+            <a [class.is-url]="isValidUri(entry.uri)" (click)="isLinkExternal(entry.uri)">
+              {{ entry.uri }}
+            </a>
+          </ng-container>
+        </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.scss

@@ -32,3 +32,25 @@
   width: 100%;
   display: grid;
 }
+
+$base-color: #00BAEE;
+$hover-color: darken($base-color, 20);
+
+.is-url {
+  cursor: pointer;
+  color: $base-color;
+  text-decoration: underline;
+
+  &:visited {
+    color: green;
+  }
+
+  &:hover {
+    color: $hover-color;
+  }
+
+  &:active {
+    color: $base-color;
+  }
+}
+

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

@@ -14,7 +14,7 @@ import { getReportDataSource } from '../../../time-clock/store/entry.selectors';
 @Component({
   selector: 'app-time-entries-table',
   templateUrl: './time-entries-table.component.html',
-  styleUrls: ['./time-entries-table.component.scss']
+  styleUrls: ['./time-entries-table.component.scss'],
 })
 export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewInit {
   dtOptions: any = {
@@ -25,38 +25,33 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
       {
         extend: 'colvis',
         columns: ':not(.hidden-col)',
-
       },
       'print',
       {
         extend: 'excel',
         exportOptions: {
           format: {
             body: (data, row, column, node) => {
-              return column === 3 ?
-                moment.duration(data).asHours().toFixed(4).slice(0, -1) :
-                data;
-            }
-          }
+              return column === 3 ? moment.duration(data).asHours().toFixed(4).slice(0, -1) : data;
+            },
+          },
         },
         text: 'Excel',
-        filename: `time-entries-${formatDate(new Date(), 'MM_dd_yyyy-HH_mm', 'en')}`
+        filename: `time-entries-${formatDate(new Date(), 'MM_dd_yyyy-HH_mm', 'en')}`,
       },
       {
         extend: 'csv',
         exportOptions: {
           format: {
             body: (data, row, column, node) => {
-              return column === 3 ?
-                moment.duration(data).asHours().toFixed(4).slice(0, -1) :
-                data;
-            }
-          }
+              return column === 3 ? moment.duration(data).asHours().toFixed(4).slice(0, -1) : data;
+            },
+          },
         },
         text: 'CSV',
-        filename: `time-entries-${formatDate(new Date(), 'MM_dd_yyyy-HH_mm', 'en')}`
-      }
-    ]
+        filename: `time-entries-${formatDate(new Date(), 'MM_dd_yyyy-HH_mm', 'en')}`,
+      },
+    ],
   };
   dtTrigger: Subject<any> = new Subject();
   @ViewChild(DataTableDirective, { static: false })
@@ -94,8 +89,10 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn
   }
 
   isLinkExternal(uri: string) {
-    const isValidUri = uri.startsWith('http' || 'https');
-    return isValidUri ? window.open(uri, '_blank') : '';
+    return this.isValidUri(uri) ? window.open(uri, '_blank') : '';
   }
 
+  isValidUri(uri: string) {
+    return uri.startsWith('http' || 'https');
+  }
 }