Make property values that are urls clickable in dataset details table...

Make property values that are urls clickable in dataset details table component and data details component

src/app/geosource/components/dataset-detail/dataset-data-details/dataset-data-detail-properties/dataset-data-detail-properties.component.html

@@ -43,7 +43,7 @@
       <div *ngSwitchDefault class="property-value">
         <span
           *ngIf="!isUrl(properties[key])">{{ (properties[key] && properties[key] !== '') ? properties[key] : '-'  }}</span>
-        <a [href]="properties[key]" *ngIf="isUrl(properties[key])">{{ properties[key] }}</a>
+        <a [href]="properties[key]" target="_blank" *ngIf="isUrl(properties[key])">{{ properties[key] }}</a>
       </div>
     </ng-container>
   </div>

src/app/geosource/components/dataset-detail/dataset-data-details/dataset-data-detail-properties/dataset-data-detail-properties.component.scss

 @import "../../../../../../scss/variables";
 
 .property-value {
+  font-size: 0.875rem;
   font-weight: 600;
   word-break: break-word;
 }

src/app/geosource/components/dataset-detail/dataset-data-details/dataset-data-detail-properties/dataset-data-detail-properties.component.ts

@@ -89,7 +89,7 @@ export class DatasetDataDetailPropertiesComponent implements OnInit {
   }
 
   isUrl(value: any) {
-    const expression = 'https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)';
+    const expression = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
     const regex = new RegExp(expression);
     const isStringAndNotNull = value ? typeof value === 'string' : false;
     return isStringAndNotNull ? value.match(regex) : false;

src/app/geosource/components/dataset-detail/dataset-table/dataset-table.component.html

@@ -18,7 +18,14 @@
     <div [class]="'item-grid' +  ' item-grid-' + indexData"
       [ngClass]="{'is-first': indexRow === 0, 'selected': element.id === selectedFeature, 'visited': isVisited(element.id) }"
       *ngFor="let key of displayedProperties; let indexRow=index;" (click)="emitSelectedData(element)">
-      <span *ngIf="!isPropertyComplex(element,key)" class="data-property-value">{{ element.properties[key] }}</span>
+      <ng-container *ngIf="!isPropertyComplex(element,key)">
+        <span *ngIf="!isUrl(element.properties[key]); else urlPropTemplate"
+          class="data-property-value">{{ element.properties[key] }}</span>
+        <ng-template #urlPropTemplate>
+          <a class="data-property-value" target="_blank"
+            [href]="element.properties[key]">{{ element.properties[key] }}</a>
+        </ng-template>
+      </ng-container>
       <span *ngIf="isPropertyComplex(element,key)">
         <span class="tooltip-right" i18n-data-tooltip="@@dataset.data.tooltip"
           data-tooltip="Complex property, please unfold the line">

src/app/geosource/components/dataset-detail/dataset-table/dataset-table.component.scss

@@ -91,6 +91,10 @@
   }
 }
 
+a.data-property-value {
+  font-size: 0.875rem;
+}
+
 [class^="tooltip"] {
   svg path {
     fill: $grey-dark-color;

src/app/geosource/components/dataset-detail/dataset-table/dataset-table.component.ts

@@ -156,6 +156,13 @@ export class DatasetTableComponent implements OnInit, OnDestroy {
     return type === 'object' || Array.isArray(element.properties[key]);
   }
 
+  isUrl(value: any) {
+    const expression = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
+    const regex = new RegExp(expression);
+    const isStringAndNotNull = value ? typeof value === 'string' : false;
+    return isStringAndNotNull ? value.match(regex) : false;
+  }
+
   addVisitedItem(id: number) {
     this.visitedFeatures.push(id);
     // Make there are no duplicates in the array