Display images, links and attachments

package.json

@@ -33,6 +33,7 @@
     "firebase": "^5.1.0",
     "firebase-tools": "^3.19.0",
     "hammerjs": "^2.0.8",
+    "ng-simple-slideshow": "^1.2.3",
     "ngx-electron": "^1.0.4",
     "rxjs": "^6.0.0",
     "webstorage-decorators": "^1.0.3",

src/app/app.module.ts

@@ -29,6 +29,7 @@ import {NewComponentComponent} from './formulaManager/newComponent/newComponent.
 import {HttpModule} from '@angular/http';
 import {NewFormulaComponent} from './formulaManager/newFormula/newFormula.component';
 import {AppStore} from './app.store';
+import {SlideshowModule} from 'ng-simple-slideshow';
 
 @NgModule({
   declarations: [
@@ -71,7 +72,8 @@ import {AppStore} from './app.store';
       {path: 'store', component: CategoriesComponent},
       {path: '**', component: HomeComponent}
     ]),
-    ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
+    ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}),
+    SlideshowModule
   ],
   providers: [AppStore],
   entryComponents: [

src/app/app.store.ts

@@ -73,6 +73,7 @@ export class AppStore {
         map(rows =>
           rows.map((row: any) => {
             let temp = Object.assign({id: row.payload.doc.id, ref: row.payload.doc.ref}, row.payload.doc.data());
+            temp.originalImage = temp.image;
             temp.image = this.domSanitizer.bypassSecurityTrustUrl(temp.image);
             temp.originalDescription = temp.description;
             temp.description = this.domSanitizer.bypassSecurityTrustHtml(

src/app/store/product.ts

@@ -5,10 +5,12 @@ export interface Product {
   category: string;
   currency: 'CAD' | 'USD';
   description: SafeHtml;
-  files: {link: string; type: string}[];
+  files: {name: string; link: string; type: string}[];
   id: string;
   image: SafeUrl;
   name: string;
+  originalDescription: string;
+  originalImage: string;
   price: number;
   ref: DocumentReference;
   weight: number;

src/app/store/products/products.component.html

@@ -2,12 +2,43 @@
     <div class="container">
         <div class="row">
             <div class="col-12 py-4">
-                <img [src]="product.image" class="float-left img-fluid mb-4 mr-4">
+                <div class="row">
-                <h2 class="roboto">{{product.name}}</h2>
+                    <div class="col-12 col-md-3">
-                <h5 *ngIf="product.price" class="text-muted">{{product.currency}} {{product.price | currency}}</h5>
+                        <slideshow [autoPlay]="true" [imageUrls]="preview"></slideshow>
-                <h5 *ngIf="!product.price" class="text-muted">Contact For Price</h5>
+                        <div *ngIf="links.length">
-                <hr class="ml-4" />
+                            <h5 class="mt-3 mb-0 pl-3">Links</h5>
-                <p [innerHtml]="product.description"></p>
+                            <mat-list>
+                                <mat-list-item *ngFor="let l of links">
+                                    <a [href]="l.link">{{l.name}}</a>
+                                </mat-list-item>
+                            </mat-list>
+                        </div>
+                    </div>
+                    <div class="col-12 col-md-9">
+                        <h2 class="roboto">{{product.name}}</h2>
+                        <h5 *ngIf="product.price" class="text-muted">{{product.currency}} {{product.price | currency}}</h5>
+                        <h5 *ngIf="!product.price" class="text-muted">Contact For Price</h5>
+                        <mat-divider class="my-3"></mat-divider>
+                        <p [innerHtml]="product.description"></p>
+                        <mat-divider class="my-3"></mat-divider>
+                        <div *ngIf="attachments.length">
+                            <h5 class="ml-3">
+                                <mat-icon style="vertical-align: bottom;">cloud_download</mat-icon> Downloads
+                            </h5>
+                            <mat-list>
+                                <mat-list-item *ngFor="let a of attachments">
+                                    <mat-icon mat-list-icon>insert_drive_file</mat-icon>
+                                    <h6 mat-line>{{a.name}}</h6>
+                                    <div mat-line>
+                                        <a class="mr-2" [href]="a.link" target="_blank">View</a>
+                                        |
+                                        <a class="ml-2" [href]="a.link" download>Download</a>
+                                    </div>
+                                </mat-list-item>
+                            </mat-list>
+                        </div>
+                    </div>
+                </div>
                 <div class="float-right">
                     <mat-form-field class="mr-1" style="width: 40px">
                         <input #quantity matInput type="number" value="1" min="1">

src/app/store/products/products.component.ts

@@ -3,20 +3,38 @@ import {ActivatedRoute} from '@angular/router';
 import {AppComponent} from '../../app.component';
 import {map} from 'rxjs/operators';
 import {AppStore} from '../../app.store';
+import {Product} from '../product';
+import {SafeUrl, DomSanitizer} from '../../../../node_modules/@angular/platform-browser';
 
 @Component({
   selector: 'products',
   templateUrl: 'products.component.html'
 })
 export class ProductsComponent {
-  product;
+  product: Product;
+  preview: SafeUrl[];
+  links: {name: string; link: string; type: string}[];
+  attachments: {name: string; link: string; type: string}[];
 
-  constructor(private store: AppStore, private route: ActivatedRoute, public app: AppComponent) {}
+  constructor(
+    private store: AppStore,
+    private route: ActivatedRoute,
+    private domSanitizer: DomSanitizer,
+    public app: AppComponent
+  ) {}
 
   ngOnInit() {
     this.route.params.subscribe(params => {
       this.store.products.pipe(map(rows => rows.filter(row => row.name == params['product']))).subscribe(data => {
         this.product = data[0];
+
+        this.preview = [this.product.originalImage];
+        this.preview = this.preview.concat(
+          this.product.files.filter(row => row.type == 'preview').map(row => row.link)
+        );
+
+        this.links = this.product.files.filter(row => row.type == 'link');
+        this.attachments = this.product.files.filter(row => row.type == 'other');
       });
     });
   }

yarn.lock

@@ -5663,6 +5663,10 @@ next-tick@1:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
 
+ng-simple-slideshow@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/ng-simple-slideshow/-/ng-simple-slideshow-1.2.3.tgz#78938ce2ca936d2a96badd86214dc36cb9ca72bc"
+
 ngx-electron@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/ngx-electron/-/ngx-electron-1.0.4.tgz#2d80b25d74ae4d6226ad8b3bc4ecfa611e48fdca"