sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

[HIMA-114] create photo-gallery component and included the component in the product-details page when product image is clicked & added hammerjs to support gallery image swipe

Browse Source
This commit is contained in:
Eraldo Hasanaj
2019-03-11 15:45:08 +01:00
parent 7dfc121500
commit f0ff10924c
12 changed files with 178 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/sales/src/app/components/product-details/product-details.component.html
View File

@@ -146,7 +146,11 @@
<div class="recommandations">
<app-recommendations></app-recommendations>
</div>
<lib-photo-gallery #photoGallery></lib-photo-gallery>
<lib-photo-gallery
*ngIf="item"
#photoGallery
[productId]="item.id"
></lib-photo-gallery>
</div>
<app-loading loading="true" *ngIf="!product"></app-loading>

7
apps/sales/src/app/modules/article-search/components/text-search/text-search.component.ts
View File

@@ -27,11 +27,7 @@ import { Select, Store } from '@ngxs/store';
import { AutocompleteState } from 'apps/sales/src/app/core/store/state/autocomplete.state';
import { LoadAutocomplete } from 'apps/sales/src/app/core/store/actions/autocomplete.actions';
import { ProductService } from '../../../../core/services/product.service';
import {
debounceTime,
distinctUntilChanged,
map
} from 'rxjs/operators';
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
import { ItemDTO } from 'cat-service';
import { fadeInAnimation } from './fadeIn.animation';
@@ -134,7 +130,6 @@ export class TextSearchComponent implements OnInit, AfterViewInit {
}
navigateToRoute(route: string) {
console.log(route);
this.store.dispatch(new ChangeCurrentRoute(route));
this.router.navigate([route], { queryParams: { firstload: true } });
}

11
apps/sales/src/assets/images/Arrow_left.svg Normal file
View File

@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="21px" viewBox="0 0 12 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
<title>Arrow_Down Copy</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="UC1_08_01_Hugendubel_Instoreapp_Kunden_Artikeldetailseite_Bildergalerie" transform="translate(-311.000000, -877.000000)" stroke="#B3C3D4" stroke-width="2.7">
<polyline id="Arrow_Down-Copy" transform="translate(316.946429, 887.303571) rotate(-270.000000) translate(-316.946429, -887.303571) " points="308.446429 883.357143 316.946429 891.25 325.446429 883.357143"></polyline>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 885 B

11
apps/sales/src/assets/images/Arrow_right.svg Normal file
View File

@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="21px" viewBox="0 0 12 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
<title>Arrow_Down</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="UC1_08_01_Hugendubel_Instoreapp_Kunden_Artikeldetailseite_Bildergalerie" transform="translate(-444.000000, -877.000000)" stroke="#B3C3D4" stroke-width="2.7">
<polyline id="Arrow_Down" transform="translate(449.946429, 887.303571) rotate(-90.000000) translate(-449.946429, -887.303571) " points="441.446429 883.357143 449.946429 891.25 458.446429 883.357143"></polyline>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 874 B

1
apps/sales/src/main.ts
View File

@@ -3,6 +3,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import 'hammerjs';
if (environment.production) {
enableProdMode();

3
libs/mock/package.json
View File

@@ -5,6 +5,7 @@
"@angular/common": "^7.2.0",
"@angular/core": "^7.2.0",
"@types/faker": "^4.1.5",
"faker": "^4.1.0"
"faker": "^4.1.0",
"hammerjs": "^2.0.8"
}
}

13
libs/mock/src/lib/mock.service.ts
View File

@@ -1,9 +1,20 @@
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class MockService {
constructor() {}
constructor() { }
galleryImages(id: number): Observable<string[]> {
const imagesPath = [
'https://produktbilder.ihugendubel.de/9783527509560_469x575.jpg?showDummy=true',
'https://produktbilder.ihugendubel.de/9783548602608_469x575.jpg?showDummy=true',
'https://produktbilder.ihugendubel.de/9781408855652_469x575.jpg?showDummy=true',
'https://produktbilder.ihugendubel.de/9783140223720_469x575.jpg?showDummy=true'
];
console.log('serving mock images for id: ' + id);
return of(imagesPath);
}
}

34
libs/ui/src/lib/photo-gallery/photo-gallery.component.html
View File

@@ -1,12 +1,42 @@
<app-modal id="photo-gallery-modal">
<div class="modal-wrapper">
<div
class="modal-wrapper"
(swipeleft)="nextItem()"
(swiperight)="previousItem()"
>
<div class="header">
<img
(click)="closeModal()"
class="close-icon"
src="/apps/sales/src/assets/images/close.svg"
src="assets/images/close.svg"
alt="close"
/>
</div>
<div class="title">
Silberfischechen
</div>
<ng-container *ngFor="let image of (images$ | async); let i = index">
<div class="images" *ngIf="i === activeImage">
<img src="{{ image }}" />
</div>
</ng-container>
<div class="navigation">
<div class="left-arrow" (click)="previousItem()">
<img src="assets/images/Arrow_left.svg" />
</div>
<div class="current-item">
<span>{{ currentItem }}</span>
</div>
<div class="von">
<span>von</span>
</div>
<div class="total-items">
<span>{{ (images$ | async)?.length }}</span>
</div>
<div class="right-arrow" (click)="nextItem()">
<img src="assets/images/Arrow_right.svg" />
</div>
</div>
</div>
</app-modal>

53
libs/ui/src/lib/photo-gallery/photo-gallery.component.scss
View File

@@ -5,9 +5,9 @@
display: flex;
align-items: center;
flex-direction: column;
height: 479px;
height: 844px;
width: 737px;
justify-content: center;
// justify-content: center;
.header {
.close-icon {
@@ -21,4 +21,53 @@
cursor: pointer;
}
}
.title {
margin-top: 38px;
font-size: 20px;
font-weight: bold;
}
.images {
margin-top: 37px;
img {
width: 400px;
height: 655px;
}
}
.navigation {
margin-top: 35.89px;
display: flex;
flex-direction: row;
justify-content: center;
font-size: 16px;
font-weight: bold;
color: #b3c3d4;
.current-item {
margin-left: 33px;
}
.von {
margin-left: 5px;
}
.total-items {
margin-left: 5px;
}
.right-arrow {
margin-left: 33px;
}
.left-arrow:hover {
cursor: pointer;
}
.right-arrow {
cursor: pointer;
}
}
}

48
libs/ui/src/lib/photo-gallery/photo-gallery.component.ts
View File

@@ -1,5 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, Input } from '@angular/core';
import { ModalService } from '../modal/modal.service';
import { MockService } from 'libs/mock/src/public_api';
import { Observable, of } from 'rxjs';
import { count, map, mergeMap } from 'rxjs/operators';
// import { MockService } from 'mock';
@Component({
selector: 'lib-photo-gallery',
@@ -8,15 +12,55 @@ import { ModalService } from '../modal/modal.service';
})
export class PhotoGalleryComponent implements OnInit {
id = 'photo-gallery-modal';
constructor(private modalService: ModalService) {}
images: string[];
images$: Observable<string[]>;
activeImage: number;
imagesCount: number;
@Input() productId: number;
get currentItem() {
return this.activeImage + 1;
}
constructor(
private modalService: ModalService,
private mockService: MockService
) {}
ngOnInit() {}
openDialog() {
this.modalService.open(this.id);
// TODO: change with actual gallery service
this.images$ = this.mockService.galleryImages(this.productId);
this.activeImage = 0;
const imagesSubscription = this.images$
.pipe(
map((items: string[]) => {
this.imagesCount = items.length;
})
)
.subscribe();
imagesSubscription.unsubscribe();
}
closeModal() {
this.modalService.close(this.id);
}
previousItem() {
if (this.imagesCount && this.activeImage === 0) {
this.activeImage = this.imagesCount - 1;
return;
}
this.activeImage--;
}
nextItem() {
if (this.imagesCount && this.activeImage === this.imagesCount - 1) {
this.activeImage = 0;
return;
}
this.activeImage++;
}
}

5
package-lock.json generated
View File

@@ -4907,6 +4907,11 @@
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
"integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA=="
},
"hammerjs": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
"integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
},
"handle-thing": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz",

1
package.json
View File

@@ -32,6 +32,7 @@
"application": "^0.1.4",
"core-js": "^2.6.5",
"faker": "^4.1.0",
"hammerjs": "^2.0.8",
"ng-connection-service": "^1.0.4",
"ngx-infinite-scroll": "^7.0.1",
"rxjs": "~6.4.0",