HIMA-921 scroll 3 items at once

This commit is contained in:
Adrian Toczydlowski
2019-12-15 22:02:02 +01:00
parent 29c14be945
commit 24bda8a9f7
5 changed files with 58 additions and 44 deletions

View File

@@ -22,7 +22,7 @@ import { ReloadGoodsIn } from '../actions/goods-in.actions';
import { ReloadBranchProcess } from '../actions/branch-process.actions';
import { ReloadRemission } from '../actions/remission.actions';
export const SYNC_DATA_VERSION = 128;
export const SYNC_DATA_VERSION = 133;
export class AppStateModel {
currentProcesssId: number;

View File

@@ -18,7 +18,7 @@
*ngIf="showBackContainer && showBack"
></div>
<div class="icon-start" (mouseleave)="hideBackIcon($event)" *ngIf="showBack && showBackContainer">
<lib-icon class="icon-start" width="50px" name="tab_Arrow_3" type="png" (click)="scrollBack()"></lib-icon>
<lib-icon class="icon-start" width="50px" name="tab_Arrow_3" type="png" (click)="scrollBack($event)"></lib-icon>
</div>
<ng-container *ngFor="let book of card.books; let last = last">
<img [src]="book.ean | bookImageUrl | async" class="book-image" alt="book image" (click)="details(book.ean, book.name)" />
@@ -45,7 +45,7 @@
*ngIf="showForward && showForwarContainer"
></div>
<div class="icon" (mouseleave)="hideFowardIcon($event)" *ngIf="showForward && showForwarContainer">
<lib-icon class="icon" width="50px" name="tab_Arrow_2" type="png" (click)="scrollForward()"></lib-icon>
<lib-icon class="icon" width="50px" name="tab_Arrow_2" type="png" (click)="scrollForward($event)"></lib-icon>
</div>
</div>
</div>

View File

@@ -14,7 +14,7 @@ import { WindowRef } from 'apps/sales/src/app/core/services/window-ref.service';
selector: 'app-book-card',
templateUrl: './book-card.component.html',
styleUrls: ['./book-card.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class BookCardComponent implements OnInit {
@ViewChild('books', { read: ElementRef }) public books: ElementRef<any>;
@@ -53,7 +53,7 @@ export class BookCardComponent implements OnInit {
const newBread: Breadcrumb = {
name: name.substring(0, 12) + (name.length > 12 ? '...' : ''),
path: '/product/details/' + ean,
queryParams: { type: 'ean' },
queryParams: { type: 'ean' }
};
this.store.dispatch(new AddBreadcrumb(newBread, 'product'));
@@ -64,7 +64,7 @@ export class BookCardComponent implements OnInit {
createProcess() {
const newProcess = <Process>{
id: 1,
name: 'Vorgang 1',
name: 'Vorgang 1'
};
this.store.dispatch(new AddProcess(newProcess));
}
@@ -97,22 +97,36 @@ export class BookCardComponent implements OnInit {
this.showBack = false;
}
scrollForward() {
this.books.nativeElement.scrollTo({ left: this.books.nativeElement.scrollLeft + 101, behavior: 'smooth' });
this.showForwarContainer = this.books.nativeElement.scrollLeft + 101 + this.offset * 2 < this.books.nativeElement.scrollWidth;
this.showBackContainer = true;
this.showBack = false;
scrollForward(event) {
if (event) {
event.stopPropagation();
const newScrollLeftPosition = this.books.nativeElement.scrollLeft + 102 * 3;
const scrollLeft =
newScrollLeftPosition + this.offset * 2 > this.books.nativeElement.scrollWidth
? this.books.nativeElement.scrollWidth
: newScrollLeftPosition;
this.books.nativeElement.scrollTo({ left: scrollLeft, behavior: 'smooth' });
this.showForwarContainer = scrollLeft + this.offset * 2 < this.books.nativeElement.scrollWidth;
this.showBackContainer = true;
this.showBack = false;
}
}
scrollBack() {
this.books.nativeElement.scrollTo({ left: this.books.nativeElement.scrollLeft - 101, behavior: 'smooth' });
this.showBackContainer = this.books.nativeElement.scrollLeft - this.offset > 0;
this.showForwarContainer = true;
this.showForward = false;
scrollBack(event) {
if (event) {
event.stopPropagation();
const newScrollLeftPosition = this.books.nativeElement.scrollLeft - 102 * 3;
const scrollLeft = newScrollLeftPosition + this.offset * 2 < 0 ? this.books.nativeElement.scrollWidth : newScrollLeftPosition;
this.books.nativeElement.scrollTo({ left: scrollLeft, behavior: 'smooth' });
this.showBackContainer = this.books.nativeElement.scrollLeft - this.offset > 0;
this.showForwarContainer = true;
this.showForward = false;
}
}
@HostListener('window:scroll', ['$event'])
scrollHandler(event) {
event.stopPropagation();
if (this.isIPad) {
return;
}

42
package-lock.json generated
View File

@@ -1039,57 +1039,57 @@
}
},
"@cmf/catalog-api": {
"version": "0.1.8",
"resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/@cmf/catalog-api/-/catalog-api-0.1.8.tgz",
"integrity": "sha1-U0sNLVzptjXl1PFY3HuzEGR/66g=",
"version": "0.1.12",
"resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/@cmf/catalog-api/-/catalog-api-0.1.12.tgz",
"integrity": "sha1-UwJ0RraS3TzJrWSekd1XocRgncw=",
"requires": {
"tslib": "^1.9.0"
}
},
"@cmf/core": {
"version": "0.1.8",
"resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/@cmf/core/-/core-0.1.8.tgz",
"integrity": "sha1-VUspqHh0s0ZD83MNkEJ0Wth58bk=",
"version": "0.1.12",
"resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/@cmf/core/-/core-0.1.12.tgz",
"integrity": "sha1-Z5tnE0Btomnx+mL38+RLK9RA2fM=",
"requires": {
"tslib": "^1.9.0"
}
},
"@cmf/inventory-api": {
"version": "0.1.8",
"resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/@cmf/inventory-api/-/inventory-api-0.1.8.tgz",
"integrity": "sha1-zQ3Kr7NfZEq/MsHjyx7rJEeVkTM=",
"version": "0.1.12",
"resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/@cmf/inventory-api/-/inventory-api-0.1.12.tgz",
"integrity": "sha1-/hA5Y2NFQnI3FkUMcOaV6IusY8I=",
"requires": {
"tslib": "^1.9.0"
}
},
"@cmf/trade-api": {
"version": "0.1.8",
"resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/@cmf/trade-api/-/trade-api-0.1.8.tgz",
"integrity": "sha1-T2JjckMZL3t62i32oqOWm2YbF9I=",
"version": "0.1.12",
"resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/@cmf/trade-api/-/trade-api-0.1.12.tgz",
"integrity": "sha1-XYg4PKQuRiJcwvaJ0PzqTel5Qco=",
"requires": {
"tslib": "^1.9.0"
}
},
"@isa/catsearch-api": {
"version": "0.0.31",
"resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/@isa/catsearch-api/-/catsearch-api-0.0.31.tgz",
"integrity": "sha1-HZ+q/u/sEJxKyBl1jRw/KYSHSo4=",
"version": "0.0.35",
"resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/@isa/catsearch-api/-/catsearch-api-0.0.35.tgz",
"integrity": "sha1-4UgxV2A+iZSSWzCD368Q5L4oQ84=",
"requires": {
"tslib": "^1.9.0"
}
},
"@isa/print-api": {
"version": "0.0.31",
"resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/@isa/print-api/-/print-api-0.0.31.tgz",
"integrity": "sha1-TRhC94k9ccz5Dj3qzl+8EreEwFs=",
"version": "0.0.35",
"resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/@isa/print-api/-/print-api-0.0.35.tgz",
"integrity": "sha1-KuW/mURsU8MeGhIyLDvfHcnLxLk=",
"requires": {
"tslib": "^1.9.0"
}
},
"@isa/remi-api": {
"version": "0.0.31",
"resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/@isa/remi-api/-/remi-api-0.0.31.tgz",
"integrity": "sha1-tmvyef/ZoLbu1NBz1mwWW2EFbxw=",
"version": "0.0.35",
"resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/@isa/remi-api/-/remi-api-0.0.35.tgz",
"integrity": "sha1-uq/eHkiFIYeo5XdEgMEkVKVaeh0=",
"requires": {
"tslib": "^1.9.0"
}

View File

@@ -33,13 +33,13 @@
"@angular/pwa": "^0.13.4",
"@angular/router": "~7.2.12",
"@angular/service-worker": "~7.2.12",
"@cmf/catalog-api": "0.1.8",
"@cmf/core": "0.1.8",
"@cmf/inventory-api": "0.1.8",
"@cmf/trade-api": "0.1.8",
"@isa/catsearch-api": "^0.0.31",
"@isa/print-api": "^0.0.31",
"@isa/remi-api": "^0.0.31",
"@cmf/catalog-api": "^0.1.12",
"@cmf/core": "^0.1.12",
"@cmf/inventory-api": "^0.1.12",
"@cmf/trade-api": "^0.1.12",
"@isa/catsearch-api": "^0.0.35",
"@isa/print-api": "^0.0.35",
"@isa/remi-api": "^0.0.35",
"@isa/remission": "^0.2.4",
"@ng-idle/core": "^8.0.0-beta.4",
"@ng-idle/keepalive": "^8.0.0-beta.4",