diff --git a/projects/arlas-components/src/lib/components/results/result-detailed-grid/result-detailed-grid.component.css b/projects/arlas-components/src/lib/components/results/result-detailed-grid/result-detailed-grid.component.css index 1c192677..0e1cb618 100644 --- a/projects/arlas-components/src/lib/components/results/result-detailed-grid/result-detailed-grid.component.css +++ b/projects/arlas-components/src/lib/components/results/result-detailed-grid/result-detailed-grid.component.css @@ -63,6 +63,7 @@ .image_view { max-height: 100%; max-width: 100%; + cursor: pointer } ::ng-deep .iv-image-mode { diff --git a/projects/arlas-components/src/lib/components/results/result-detailed-grid/result-detailed-grid.component.html b/projects/arlas-components/src/lib/components/results/result-detailed-grid/result-detailed-grid.component.html index afa1fa7c..f87661a6 100644 --- a/projects/arlas-components/src/lib/components/results/result-detailed-grid/result-detailed-grid.component.html +++ b/projects/arlas-components/src/lib/components/results/result-detailed-grid/result-detailed-grid.component.html @@ -2,7 +2,7 @@
- +
diff --git a/projects/arlas-components/src/lib/components/results/result-detailed-grid/result-detailed-grid.component.ts b/projects/arlas-components/src/lib/components/results/result-detailed-grid/result-detailed-grid.component.ts index 49a1c994..1a60468b 100644 --- a/projects/arlas-components/src/lib/components/results/result-detailed-grid/result-detailed-grid.component.ts +++ b/projects/arlas-components/src/lib/components/results/result-detailed-grid/result-detailed-grid.component.ts @@ -20,7 +20,7 @@ import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'; import { FullScreenViewer, ImageViewer } from 'iv-viewer'; -import { Subject } from 'rxjs'; +import { Subject, take } from 'rxjs'; import { Item } from '../model/item'; import { Action, ElementIdentifier, QUICKLOOK_HEADER } from '../utils/results.utils'; import { HttpClient } from '@angular/common/http'; @@ -30,7 +30,7 @@ import { HttpClient } from '@angular/common/http'; templateUrl: './result-detailed-grid.component.html', styleUrls: ['./result-detailed-grid.component.css'] }) -export class ResultDetailedGridComponent implements OnInit, OnChanges, AfterViewInit { +export class ResultDetailedGridComponent implements OnInit, OnChanges { public SHOW_DETAILS = 'Show details'; public VIEW_IMAGE = 'View quicklook'; public SHOW_IMAGE = 'Show image'; @@ -113,16 +113,12 @@ export class ResultDetailedGridComponent implements OnInit, OnChanges, AfterView if (this.viewer) { this.viewer = this.viewer.destroy(); } - setTimeout(() => { - if (!!this.imageViewer) { - this.viewer = new ImageViewer(this.imageViewer.nativeElement); - } - this.getImage(); - }, 0); + this.getImage(); } } private getImage() { + this.imgSrc = undefined; if (!this.gridTile || (this.gridTile && !this.gridTile.urlImage)) { return; } @@ -130,6 +126,7 @@ export class ResultDetailedGridComponent implements OnInit, OnChanges, AfterView if (this.useHttp) { this.isLoading = true; this.http.get(this.gridTile.urlImage, {headers: {[QUICKLOOK_HEADER]: 'true'}, responseType: 'blob'}) + .pipe(take(1)) .subscribe({ next: (image: Blob) => { const reader = new FileReader(); @@ -137,6 +134,7 @@ export class ResultDetailedGridComponent implements OnInit, OnChanges, AfterView this.imgSrc = reader.result; this.gridTile.imageEnabled = true; this.isLoading = false; + this.resetViewer(); }, false); if (image) { reader.readAsDataURL(image); @@ -148,9 +146,18 @@ export class ResultDetailedGridComponent implements OnInit, OnChanges, AfterView }); } else { this.imgSrc = this.gridTile.urlImage; + this.resetViewer(); } } + private resetViewer() { + setTimeout(() => { + if (!!this.imageViewer && !this.viewer) { + this.viewer = new ImageViewer(this.imageViewer.nativeElement); + } + }, 0); + } + public destroyViewer(event): void { this.imgSrc = this.noViewImg; if (this.viewer) { @@ -159,8 +166,6 @@ export class ResultDetailedGridComponent implements OnInit, OnChanges, AfterView this.gridTile.imageEnabled = false; } - public ngAfterViewInit(): void {} - public showHideDetailedData() { this.isDetailedDataShowed = !this.isDetailedDataShowed; this.changeDetectorRef.detectChanges(); diff --git a/projects/arlas-components/src/lib/components/results/result-list/result-list.component.html b/projects/arlas-components/src/lib/components/results/result-list/result-list.component.html index d5871f51..97273bfa 100644 --- a/projects/arlas-components/src/lib/components/results/result-list/result-list.component.html +++ b/projects/arlas-components/src/lib/components/results/result-list/result-list.component.html @@ -107,7 +107,7 @@ - ["{field1}", "{field2}"] */ - this.fieldsConfiguration.urlImageTemplate.match(/{(.+?)}/g).forEach(t => { - const key: string = t.replace('{', '').replace('}', ''); - item.urlImage = item.urlImage.replace(t, itemData.get(key).toString()); - }); + const matches = this.fieldsConfiguration.urlImageTemplate.match(/{(.+?)}/g); + if (matches) { + matches.forEach(t => { + const key: string = t.replace('{', '').replace('}', ''); + item.urlImage = item.urlImage.replace(t, itemData.get(key).toString()); + }); + } } if (item.thumbnailEnabled && this.fieldsConfiguration.urlThumbnailTemplate) { item.urlThumbnail = this.fieldsConfiguration.urlThumbnailTemplate; /** match : => ["{field1}", "{field2}"] */ - this.fieldsConfiguration.urlThumbnailTemplate.match(/{(.+?)}/g).forEach(t => { - const key: string = t.replace('{', '').replace('}', ''); - item.urlThumbnail = item.urlThumbnail.replace(t, itemData.get(key).toString()); - }); + const matches = this.fieldsConfiguration.urlThumbnailTemplate.match(/{(.+?)}/g); + if (matches) { + matches.forEach(t => { + const key: string = t.replace('{', '').replace('}', ''); + item.urlThumbnail = item.urlThumbnail.replace(t, itemData.get(key).toString()); + }); + } } item.position = this.items.length + 1; diff --git a/src/app/results-demo/results-demo.component.ts b/src/app/results-demo/results-demo.component.ts index e4475c5e..b40abb18 100644 --- a/src/app/results-demo/results-demo.component.ts +++ b/src/app/results-demo/results-demo.component.ts @@ -52,7 +52,7 @@ export class ResultsDemoComponent implements OnInit { this.options.showDetailIconName = 'keyboard_arrow_down'; this.fieldsConfiguration = { idFieldName: 'id', urlImageTemplate: - 'urlImage', urlThumbnailTemplate: 'urlImage', titleFieldNames: [{ fieldPath: 'source', process: '' }] + '{urlImage}', urlThumbnailTemplate: 'urlImage', titleFieldNames: [{ fieldPath: 'source', process: '' }] }; this.fieldsList = new Array<{ columnName: string; fieldName: string; dataType: string; dropdown?: boolean; }>(); @@ -76,12 +76,14 @@ export class ResultsDemoComponent implements OnInit { map.set('source', 'SPOT' + (i + 1)); map.set('acquired', '2017-0' + (i + 1) + '-' + (i + 3)); map.set('cloud', (i + 1) + '.0'); + map.set('imageEnabled', 'true'); if (i % 2 === 0) { - map.set('urlImage', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-9QP6CIX2F41m5fztAivya8_JPWTFqdYQg345dJXl4E1Q0JYEMQ'); + map.set('urlImage', 'https://www.un-autre-regard-sur-la-terre.org/document/blogUARST/Satellites/' + + 'Per%f9sat/Per%faSAT-1%20-%20premi%e8res%20images%20-%20first%20images%20-%20Huamanga%20-%20Ayacucho%20-%20CONIDA%20-%202016.jpg'); } else { map.set('urlImage', 'http://www.un-autre-regard-sur-la-terre.org/document/blogUARST/Satellites/' + - 'Pleiades%20-%20La%20suite/Airbus%20-%20Si%C3%A8ge%20Groupe%20-%20Toulouse%20-%20Pl%C3%A9iades%2' - + '0-%20VHR%20-%20Tr%C3%A8s%20haute%20r%C3%A9solution%20-%20satellite.JPG'); + 'Pleiades%20-%20La%20suite/Airbus%20-%20Si%C3%A8ge%20Groupe%20-%20Toulouse%20-%20Pl%C3%A9iades%2' + + '0-%20VHR%20-%20Tr%C3%A8s%20haute%20r%C3%A9solution%20-%20satellite.JPG'); } map.set('incidence', (i + 10));