feat(feature-details): open secure docs and images from depot API

packages/common/src/lib/image/secure-image.pipe.ts

@@ -4,12 +4,15 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Cacheable } from 'ts-cacheable';
 import { Observable } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
+import { ConfigService } from '@igo2/core';
 
 @Pipe({
   name: 'secureImage'
 })
 export class SecureImagePipe implements PipeTransform {
-  constructor(private http: HttpClient) {}
+  constructor(
+    private http: HttpClient,
+    private configService?: ConfigService) {}
 
   @Cacheable({
     maxCacheCount: 20
@@ -20,6 +23,11 @@ export class SecureImagePipe implements PipeTransform {
       activityInterceptor: 'false'
     });
 
+    const regexDepot = new RegExp(this.configService?.getConfig('depot.url') + '.*?(?="|$)');
+    if (regexDepot.test(url)) {
+      url = url.match(regexDepot)[0];
+    }
+
     return this.http
       .get(url, {
         headers,

packages/geo/src/lib/feature/feature-details/feature-details.component.html

@@ -11,16 +11,23 @@
       </td>
 
       <td id="keyValue" *ngIf="feature.properties.target === undefined">
-        {{property.key }}
+        {{property.key}}
       </td>
 
-      <td *ngIf="feature.properties.target === undefined && !isObject(property.value) && !isUrl(property.value)" [innerHTML]="property.value">
+      <td *ngIf="feature.properties.target === undefined && !isObject(property.value) && !isUrl(property.value) && !isEmbeddedLink(property.value)" [innerHTML]="property.value">
       </td>
 
-      <td *ngIf="feature.properties.target === undefined && !isObject(property.value) && isUrl(property.value)">
-        <a href="{{property.value}}" target='_blank' rel="noopener noreferrer">
-          <img *ngIf="isImg(property.value);else notImg" src="{{(property.value | secureImage) | async}}" width="225" heigth="auto">
-          <ng-template #notImg><span>{{ 'igo.geo.targetHtmlUrl' | translate }} </span></ng-template>
+      <td *ngIf="feature.properties.target === undefined && isEmbeddedLink(property.value)">
+        <u [ngStyle]="{'cursor': 'pointer', 'color': 'blue'}" (click)="openSecureUrl(property.value)">{{ getEmbeddedLinkText(property.value) }}</u>
+      </td>
+
+      <td *ngIf="feature.properties.target === undefined && !isObject(property.value) && (isDoc(property.value) || isUrl(property.value)) && !isImg(property.value)">
+        <u [ngStyle]="{'cursor': 'pointer', 'color': 'blue'}" (click)="openSecureUrl(property.value)">{{ 'igo.geo.targetHtmlUrl' | translate }}</u>
+      </td>
+
+      <td *ngIf="feature.properties.target === undefined && !isObject(property.value) && isUrl(property.value) && isImg(property.value)">
+        <a href="{{property.value}}" target='_blank' (click)="openSecureUrl(property.value)" rel="noopener noreferrer">
+          <img src="{{(property.value | secureImage) | async}}" width="225" height="auto">
         </a>
       </td>
 

packages/geo/src/lib/feature/feature-details/feature-details.component.ts

@@ -13,13 +13,15 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { userAgent } from '@igo2/utils';
-import { NetworkService, ConnectionState } from '@igo2/core';
+import { NetworkService, ConnectionState, MessageService, LanguageService } from '@igo2/core';
+import { ConfigService } from '@igo2/core';
 import { getEntityTitle, getEntityIcon } from '@igo2/common';
 import type { Toolbox } from '@igo2/common';
 
 import { Feature } from '../shared';
 import { SearchSource } from '../../search/shared/sources/source';
 import { IgoMap } from '../../map/shared/map';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
   selector: 'igo-feature-details',
@@ -79,9 +81,13 @@ export class FeatureDetailsComponent implements OnInit, OnDestroy {
 
 
   constructor(
+    private http: HttpClient,
     private cdRef: ChangeDetectorRef,
     private sanitizer: DomSanitizer,
-    private networkService: NetworkService
+    private networkService: NetworkService,
+    private messageService: MessageService,
+    private languageService: LanguageService,
+    private configService: ConfigService
   ) {
     this.networkService.currentState().pipe(takeUntil(this.unsubscribe$)).subscribe((state: ConnectionState) => {
       this.state = state;
@@ -129,26 +135,76 @@ export class FeatureDetailsComponent implements OnInit, OnDestroy {
     return typeof value === 'object';
   }
 
+  openSecureUrl(value) {
+    let url: string;
+    const regexDepot = new RegExp(this.configService?.getConfig('depot.url') + '.*?(?="|$)');
+    const regexUrl = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;
+
+    if (regexDepot.test(value)) {
+      url = value.match(regexDepot)[0];
+
+      this.http.get(url, {
+        responseType: 'blob'
+      })
+      .subscribe((docOrImage) => {
+        const fileUrl = URL.createObjectURL(docOrImage);
+        window.open(fileUrl, '_blank');
+        this.cdRef.detectChanges();
+      },
+      (error: Error) => {
+        const translate = this.languageService.translate;
+        const title = translate.instant('igo.geo.targetHtmlUrlUnauthorizedTitle');
+        const message = translate.instant('igo.geo.targetHtmlUrlUnauthorized');
+        this.messageService.error(message, title);
+      });
+    } else {
+      url = value.match(regexUrl)[0];
+      window.open(url, '_blank');
+    }
+  }
+
   isUrl(value) {
     if (typeof value === 'string') {
-      return (
-        value.slice(0, 8) === 'https://' || value.slice(0, 7) === 'http://'
-      );
-    } else {
-      return false;
+      const regex = /^https?:\/\//;
+      return regex.test(value);
+    }
+  }
+
+  isDoc(value) {
+    if (typeof value === 'string') {
+      if (this.isUrl(value)) {
+        const regex = /(pdf|docx?|xlsx?)$/;
+        return regex.test(value.toLowerCase());
+      } else {
+        return false;
+      }
     }
   }
 
   isImg(value) {
-    if (this.isUrl(value)) {
-      return (
-        ['jpg', 'png', 'gif'].includes(value.split('.').pop().toLowerCase())
-      );
-    } else {
-      return false;
+    if (typeof value ==='string') {
+      if (this.isUrl(value)) {
+        const regex = /(jpe?g|png|gif)$/;
+        return regex.test(value.toLowerCase());
+      } else {
+        return false;
+      }
     }
   }
 
+  isEmbeddedLink(value) {
+    if (typeof value === 'string') {
+      const regex = /^<a/;
+      return regex.test(value);
+    }
+  }
+
+  getEmbeddedLinkText(value) {
+    const regex = /(?<=>).*?(?=<|$)/;
+    const text = value.match(regex)[0];
+    return text;
+  }
+
   filterFeatureProperties(feature) {
     const allowedFieldsAndAlias = feature.meta ? feature.meta.alias : undefined;
     const properties = {};

packages/geo/src/lib/layer/layer-legend/layer-legend.component.ts

@@ -9,7 +9,7 @@ import { Layer, ItemStyleOptions } from '../shared/layers';
 import { LegendMapViewOptions } from '../shared/layers/layer.interface';
 import { CapabilitiesService } from '../../datasource/shared/capabilities.service';
 import { catchError, map } from 'rxjs/operators';
-import { LanguageService } from '@igo2/core';
+import { LanguageService, ConfigService } from '@igo2/core';
 import { WMSDataSource, WMSDataSourceOptions } from '../../datasource';
 import { SecureImagePipe } from '@igo2/common';
 
@@ -79,6 +79,7 @@ export class LayerLegendComponent implements OnInit, OnDestroy {
   constructor(
     private capabilitiesService: CapabilitiesService,
     private languageService: LanguageService,
+    private configService: ConfigService,
     private http: HttpClient,
     private cdRef: ChangeDetectorRef) {}
 
@@ -128,7 +129,7 @@ export class LayerLegendComponent implements OnInit, OnDestroy {
 
   getLegendGraphic(item: Legend) {
     if (item.url) {
-      const secureIMG = new SecureImagePipe(this.http);
+      const secureIMG = new SecureImagePipe(this.http, this.configService);
       secureIMG.transform(item.url).pipe(
         catchError((err) => {
           if (err.error) {

packages/geo/src/lib/print/shared/print.service.ts

@@ -11,7 +11,7 @@ import * as JSZip from 'jszip';
 
 import { SubjectStatus } from '@igo2/utils';
 import { SecureImagePipe } from '@igo2/common';
-import { MessageService, ActivityService, LanguageService } from '@igo2/core';
+import { MessageService, ActivityService, LanguageService, ConfigService } from '@igo2/core';
 
 import { IgoMap } from '../../map/shared/map';
 import { formatScale } from '../../map/shared/map.utils';
@@ -31,7 +31,8 @@ export class PrintService {
     private http: HttpClient,
     private messageService: MessageService,
     private activityService: ActivityService,
-    private languageService: LanguageService
+    private languageService: LanguageService,
+    private configService: ConfigService
   ) {}
 
   print(map: IgoMap, options: PrintOptions): Subject<any> {
@@ -196,7 +197,7 @@ export class PrintService {
   }
 
   getDataImage(url: string): Observable<string> {
-    const secureIMG = new SecureImagePipe(this.http);
+    const secureIMG = new SecureImagePipe(this.http, this.configService);
     return secureIMG.transform(url);
   }
 

packages/geo/src/lib/query/shared/query.service.ts

@@ -181,7 +181,7 @@ export class QueryService {
           coordinates: olmline.getCoordinates()
         };
       case 'Point':
-        return olmpts;
+        returnGeometry = olmpts;
       case 'Polygon':
         returnGeometry = {
           type: olmpoly.getType(),

packages/geo/src/locale/en.geo.json

@@ -514,6 +514,8 @@
         "polygon": "Polygon"
       },
       "targetHtmlUrl": "Open the external link",
+      "targetHtmlUrlUnauthorizedTitle": "Unauthorized",
+      "targetHtmlUrlUnauthorized": "You do not have the credentials to open this external link.",
       "searchByCoord": "Search by coordinates",
       "searchByName": "Search by name",
       "seeRouting": "See routing",

packages/geo/src/locale/fr.geo.json

@@ -513,6 +513,8 @@
         "polygon": "Surface"
       },
       "targetHtmlUrl": "Ouvrir le lien externe",
+      "targetHtmlUrlUnauthorizedTitle": "Non autorisé",
+      "targetHtmlUrlUnauthorized": "Vous n'êtes pas autorisé à ouvrir ce lien externe.",
       "searchByCoord": "Rechercher par coordonnées",
       "searchByName": "Rechercher par nom",
       "seeRouting": "Voir l'itinéraire",