feat(ui): Create new component for lightbox, don't

display thumbnail if image is a placeholder
geonetwork · Jan 17, 2024 · ffa8569 · ffa8569
1 parent 54aa5d3
commit ffa8569
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 32 deletions.
diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
@@ -33,29 +33,12 @@
             [metadataQualityDisplay]="metadataQualityDisplay"
           ></gn-ui-metadata-quality>
         </div>
-        <div
-          *ngIf="lightbox$ | async as lightbox"
-          data-cy="record-thumbnail"
-          class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36 group-hover:shadow-xl group-hover:border-0 mb-3"
+        <gn-ui-image-overlay-preview
+          [imageUrl]="thumbnailUrl$ | async"
+          (isPlaceholderShown)="showOverlay = !$event"
+          *ngIf="showOverlay"
         >
-          <gn-ui-thumbnail
-            class="relative h-full w-full"
-            [thumbnailUrl]="(facade.metadata$ | async).overviews?.[0]?.url"
-            fit="cover"
-          ></gn-ui-thumbnail>
-          <div class="relative">
-            <gn-ui-button
-              class="absolute bottom-0 right-0 z-10 mr-2 mb-2"
-              [type]="'outline'"
-              [extraClass]="'!py-2 !px-0'"
-              (buttonClick)="openLightbox(lightbox)"
-            >
-              <mat-icon class="material-symbols-outlined font-extralight"
-                >zoom_out_map</mat-icon
-              >
-            </gn-ui-button>
-          </div>
-        </div>
+        </gn-ui-image-overlay-preview>
         <div>
           <gn-ui-metadata-contact
             (organizationClick)="onOrganizationClick($event)"

diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts b/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts
@@ -7,7 +7,6 @@ import { filter, map, mergeMap } from 'rxjs/operators'
 import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface'
 import { Organization } from '@geonetwork-ui/common/domain/model/record'
 import { MdViewFacade } from '@geonetwork-ui/feature/record'
-import * as basicLightbox from 'basiclightbox'
 
 @Component({
   selector: 'datahub-record-metadata',
@@ -56,10 +55,13 @@ export class RecordMetadataComponent {
   errorTypes = ErrorType
   selectedTabIndex$ = new BehaviorSubject(0)
 
-  lightbox$ = this.facade.metadata$.pipe(
-    map((metadata) => metadata?.overviews?.[0]?.url)
+  thumbnailUrl$ = this.facade.metadata$.pipe(
+    map((metadata) => {
+      return metadata?.overviews?.[0]?.url
+    })
   )
-  lightboxInstance: any
+
+  showOverlay = true
 
   constructor(
     public facade: MdViewFacade,
@@ -83,9 +85,4 @@ export class RecordMetadataComponent {
       .getFiltersForOrgs([org])
       .subscribe((filters) => this.searchService.updateFilters(filters))
   }
-
-  openLightbox(src: string) {
-    this.lightboxInstance = basicLightbox.create(`<img src="${src}"/>`)
-    this.lightboxInstance.show()
-  }
 }
diff --git a/libs/ui/elements/src/index.ts b/libs/ui/elements/src/index.ts
@@ -19,3 +19,4 @@ export * from './lib/related-record-card/related-record-card.component'
 export * from './lib/search-results-error/search-results-error.component'
 export * from './lib/user-preview/user-preview.component'
 export * from './lib/record-api-form/record-api-form.component'
+export * from './lib/image-overlay-preview/image-overlay-preview.component'
diff --git a/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.css b/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.css
diff --git a/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.html b/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.html
@@ -0,0 +1,29 @@
+<gn-ui-content-ghost
+  [showContent]="imageUrl !== undefined"
+  ghostClass="h-36 mb-3"
+>
+  <div
+    *ngIf="imageUrl"
+    data-cy="record-thumbnail"
+    class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36 group-hover:shadow-xl group-hover:border-0 mb-3"
+  >
+    <gn-ui-thumbnail
+      class="relative h-full w-full"
+      [thumbnailUrl]="imageUrl"
+      fit="cover"
+      (placeholderShown)="isPlaceholderShown.emit($event)"
+    ></gn-ui-thumbnail>
+    <div class="relative">
+      <gn-ui-button
+        class="absolute bottom-0 right-0 z-10 mr-2 mb-2"
+        [type]="'outline'"
+        [extraClass]="'!py-2 !px-0'"
+        (buttonClick)="openLightbox(imageUrl)"
+      >
+        <mat-icon class="material-symbols-outlined font-extralight"
+          >zoom_out_map</mat-icon
+        >
+      </gn-ui-button>
+    </div>
+  </div>
+</gn-ui-content-ghost>
diff --git a/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.spec.ts b/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImageOverlayPreviewComponent } from './image-overlay-preview.component';
+
+describe('ImageOverlayPreviewComponent', () => {
+  let component: ImageOverlayPreviewComponent;
+  let fixture: ComponentFixture<ImageOverlayPreviewComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ImageOverlayPreviewComponent]
+    });
+    fixture = TestBed.createComponent(ImageOverlayPreviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.ts b/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.ts
@@ -0,0 +1,15 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import * as basicLightbox from 'basiclightbox'
+
+@Component({
+  selector: 'gn-ui-image-overlay-preview',
+  templateUrl: './image-overlay-preview.component.html',
+  styleUrls: ['./image-overlay-preview.component.css'],
+})
+export class ImageOverlayPreviewComponent {
+  @Input() imageUrl: string
+  @Output() isPlaceholderShown = new EventEmitter<boolean>()
+  openLightbox(src: string) {
+    basicLightbox.create(`<img src="${src}"/>`).show()
+  }
+}
diff --git a/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.html b/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.html
@@ -20,7 +20,7 @@
           (click)="onOrganizationClick()"
           data-cy="organization-name"
         >
-          {{ shownOrganization.name }}
+          {{ shownOrganization?.name }}
         </div>
       </div>
       <div *ngIf="shownOrganization?.website">

diff --git a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts
@@ -10,6 +10,8 @@ import {
   Optional,
   SimpleChanges,
   ViewChild,
+  Output,
+  EventEmitter,
 } from '@angular/core'
 
 export const THUMBNAIL_PLACEHOLDER = new InjectionToken<string>(
@@ -36,6 +38,7 @@ export class ThumbnailComponent implements OnInit, OnChanges {
   @Input() fit: FitOptions | FitOptions[] = 'cover'
   @ViewChild('imageElement') imgElement: ElementRef<HTMLImageElement>
   @ViewChild('containerElement') containerElement: ElementRef<HTMLDivElement>
+  @Output() placeholderShown = new EventEmitter<boolean>()
   imgUrl: string
   imgFit: FitOptions
   placeholderUrl = this.optionalPlaceholderUrl || DEFAULT_PLACEHOLDER
@@ -85,6 +88,7 @@ export class ThumbnailComponent implements OnInit, OnChanges {
   private setNewSrcImage(image: ThumbnailImageObject) {
     this.imgFit = image.fit
     this.imgUrl = image.url
+    this.placeholderShown.emit(this.isPlaceholder)
   }
 
   private setPlaceholder(): void {

diff --git a/libs/ui/elements/src/lib/ui-elements.module.ts b/libs/ui/elements/src/lib/ui-elements.module.ts
@@ -29,6 +29,7 @@ import { GnUiLinkifyDirective } from './metadata-info/linkify.directive'
 import { PaginationButtonsComponent } from './pagination-buttons/pagination-buttons.component'
 import { MaxLinesComponent } from './max-lines/max-lines.component'
 import { RecordApiFormComponent } from './record-api-form/record-api-form.component'
+import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-overlay-preview.component'
 
 @NgModule({
   imports: [
@@ -65,6 +66,7 @@ import { RecordApiFormComponent } from './record-api-form/record-api-form.compon
     PaginationButtonsComponent,
     MaxLinesComponent,
     RecordApiFormComponent,
+    ImageOverlayPreviewComponent,
   ],
   exports: [
     MetadataInfoComponent,
@@ -85,6 +87,7 @@ import { RecordApiFormComponent } from './record-api-form/record-api-form.compon
     UserPreviewComponent,
     PaginationButtonsComponent,
     RecordApiFormComponent,
+    ImageOverlayPreviewComponent,
   ],
 })
 export class UiElementsModule {}