Merged in feature/images-gallery (pull request gothinkster#21)

Feature/images gallery

* added ng-gallery library

* added shared lightbox component

* added lightbox component to discogs release overview

* added images to product model and api request

* added lightbox to product details overview

package.json

@@ -23,6 +23,7 @@
     "@angular/service-worker": "^13.2.3",
     "@swimlane/ngx-charts": "^20.0.1",
     "angular-animations": "^0.11.0",
+    "ng-gallery": "^6.0.1",
     "rxjs": "^7.4.0",
     "tslib": "^2.3.1",
     "zone.js": "~0.11.4"

src/app/core/models/product.model.ts

@@ -21,6 +21,7 @@ export class Product extends Resource {
   public status!: string;
   public createdAt!: string;
   public updatedAt!: string;
+  public images!: { src: string, thumb: string}[];
   public options!: {
     discogs?: {
       releaseId: string,
@@ -61,6 +62,11 @@ export class ProductSerializer implements Serializer {
     resource.createdAt = json.created_at;
     resource.updatedAt = json.updated_at;
 
+    resource.images = [];
+    json.images?.forEach(function (element: any) {
+      resource.images.push({ src: element.src, thumb: element.src })
+    });
+
     resource.options = {};
     json.options?.forEach(function (element: any) {
       if (element.type === 'discogs') {

src/app/features/channels/discogs/part-listing-overview/part-listing-overview.component.html

@@ -11,15 +11,15 @@ <h3 class="inline-flex">Discogs Release #{{ release.id }}</h3>
 
     <div class="grid grid-cols-6 md:gap-x-12">
       <div class="col-span-full block md:hidden">
-        <img alt="" width="100%" src="{{ release.images[0].src }}" class="float-left py-4">
+        <app-lightbox [imageData]="release.images" classes="float-left py-4"></app-lightbox>
       </div>
       <div class="col-span-full block md:hidden">
         <mat-divider></mat-divider>
       </div>
 
       <div class="col-span-full md:col-span-4">
-        <img alt="" height="150" src="{{ release.thumb }}" class="float-left pt-4 pr-4 hidden md:block">
-        <h3 class="mat-body-strong pt-4 underline md:no-underline">
+        <app-lightbox [imageData]="release.images" thumbSize="150" classes="float-left pt-4 pr-4 hidden md:block"></app-lightbox>
+        <h3 class="font-bold pt-4 underline md:no-underline">
           {{release.artist }} - {{ release.title }}
         </h3>
         <div class="grid grid-cols-3">

src/app/features/products/part-product-overview/part-product-overview.component.html

@@ -28,9 +28,17 @@
   </mat-card>
 
   <ng-template #discogsListing>
-    <div class="grid grid-cols-4 gap-x-4 pt-4">
+    <div class="grid grid-cols-4 gap-x-4">
+      <div class="col-span-full block md:hidden">
+        <app-lightbox [imageData]="product.images" classes="float-left py-4"></app-lightbox>
+      </div>
+      <div class="col-span-full block md:hidden">
+        <mat-divider></mat-divider>
+      </div>
+
       <div class="col-span-full mb-4">
-        <p class="mb-1" *ngIf="product.options.discogs">Discogs Release #
+        <app-lightbox [imageData]="product.images" thumbSize="150" classes="float-left pt-4 pr-4 hidden md:block"></app-lightbox>
+        <p class="pt-4 mb-1" *ngIf="product.options.discogs">Discogs Release #
           <a (click)="$event.stopPropagation()"
              href="https://www.discogs.com/release/{{ product.options.discogs.releaseId }}"
              rel="noopener noreferrer" class="link content-center" target="_blank">
@@ -96,9 +104,17 @@ <h3 class="mb-0">{{product.vendor }} - {{ product.title }}</h3>
   </ng-template>
 
   <ng-template #posListing let-listingForm="listing">
-    <div class="grid grid-cols-4 gap-x-4 pt-4">
+    <div class="grid grid-cols-4 gap-x-4">
+      <div class="col-span-full block md:hidden">
+        <app-lightbox [imageData]="product.images" classes="float-left py-4"></app-lightbox>
+      </div>
+      <div class="col-span-full block md:hidden">
+        <mat-divider></mat-divider>
+      </div>
+
       <div class="col-span-full mb-4">
-        <p class="mb-1" *ngIf="product.options.discogs">Discogs Release #
+        <app-lightbox [imageData]="product.images" thumbSize="150" classes="float-left pt-4 pr-4 hidden md:block"></app-lightbox>
+        <p class="pt-4 mb-1" *ngIf="product.options.discogs">Discogs Release #
           <a (click)="$event.stopPropagation()"
              href="https://www.discogs.com/release/{{ product.options.discogs.releaseId }}"
              rel="noopener noreferrer" class="link content-center" target="_blank">

src/app/features/products/product/product.component.ts

@@ -36,7 +36,7 @@ export class ProductSerializer extends BaseProductSerializer {
   providers: [
     ApiService,
     { provide: 'apiServiceEndpoint', useValue: 'products' },
-    { provide: 'apiServiceOptions', useValue: { with: 'listings,options' } },
+    { provide: 'apiServiceOptions', useValue: { with: 'listings,options,images' } },
     { provide: 'apiServiceSerializer', useClass: ProductSerializer },
   ]
 })

src/app/shared/lightbox/lightbox.component.html

@@ -0,0 +1,5 @@
+
+<a (click)="lightbox.open(0)" class="cursor-pointer">
+  <img *ngIf="!thumbSize" alt="" src="{{ imageData[0].src }}" class="{{ classes }}">
+  <img *ngIf="thumbSize" alt="" src="{{ imageData[0].src }}" class="{{ classes }}" [style.width.px]="thumbSize">
+</a>

src/app/shared/lightbox/lightbox.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Gallery, GalleryItem, ImageItem } from 'ng-gallery';
+import { Lightbox } from 'ng-gallery/lightbox';
+
+@Component({
+  selector: 'app-lightbox',
+  templateUrl: './lightbox.component.html'
+})
+export class LightboxComponent implements OnInit {
+  items: GalleryItem[] = [];
+  @Input() imageData: { src: string, thumb: string}[] = [];
+  @Input() thumbSize?: string;
+  @Input() classes: string = '';
+
+  constructor(public gallery: Gallery, public lightbox: Lightbox) {
+  }
+
+  ngOnInit(): void {
+    this.items = this.imageData.map(item => new ImageItem({ src: item.src, thumb: item.thumb }));
+    const lightboxRef = this.gallery.ref('lightbox');
+    lightboxRef.load(this.items);
+  }
+
+}

src/app/shared/shared.module.ts

@@ -6,6 +6,9 @@ import { CurrencyPipe } from './pipes/currency.pipe';
 import { DataListComponent } from '@shared/data-list/data-list.component';
 import { DatePipe } from './pipes/date.pipe';
 import { DeleteButtonComponent } from '@shared/delete-button/delete-button.component';
+import { GalleryModule } from 'ng-gallery';
+import { LightboxComponent } from './lightbox/lightbox.component';
+import { LightboxModule } from 'ng-gallery/lightbox';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
 import { MatButtonModule } from '@angular/material/button';
@@ -45,14 +48,17 @@ import { UpdateNotificationComponent } from './update-notification/update-notifi
     DataListComponent,
     DatePipe,
     DeleteButtonComponent,
+    LightboxComponent,
     PageHeaderComponent,
     NotificationsComponent,
     RemoveUnderscorePipe,
     SubmitButtonComponent,
-    UpdateNotificationComponent
+    UpdateNotificationComponent,
   ],
   imports: [
     CommonModule,
+    GalleryModule,
+    LightboxModule,
     MatBadgeModule,
     MatButtonModule,
     MatDialogModule,
@@ -103,6 +109,7 @@ import { UpdateNotificationComponent } from './update-notification/update-notifi
     RouterModule,
     SubmitButtonComponent,
     UpdateNotificationComponent,
+    LightboxComponent,
   ]
 })
 export class SharedModule {

src/styles.scss

@@ -13,6 +13,8 @@
 @import 'scss/palette';
 @import 'scss/spiner-theme';
 
+@import '../node_modules/@angular/cdk/overlay-prebuilt.css';
+
 // Typography config
 $typography-config: mat.define-typography-config(
     $font-family: (Lato, "Helvetica Neue", sans-serif),