[HIMA-328] updated the remission library && working on remission QA issues

2025-12-28 22:42:11 +01:00 · 2019-11-25 17:54:14 +01:00
parent 1300c38ae0
commit a154067c1b
9 changed files with 130 additions and 32 deletions
--- a/apps/sales/src/app/modules/remission/components/remission-list-card/remission-list-card.component.ts
+++ b/apps/sales/src/app/modules/remission/components/remission-list-card/remission-list-card.component.ts
@@ -15,9 +15,7 @@ export class RemissionListCardComponent implements OnInit {
  tooltipArrowMl = 5;
  constructor() {}

-  ngOnInit() {
-    console.log(this.product);
-  }
+  ngOnInit() {}

  openTooltip(desc: string, index: number) {
    if (index === 0) {
--- a/apps/sales/src/app/modules/remission/components/remission-list/remission-list.component.html
+++ b/apps/sales/src/app/modules/remission/components/remission-list/remission-list.component.html
@@ -1,4 +1,4 @@
-<div
+<!-- <div
  id="result-container"
  class="result-container"
  [style.height.px]="containerHeight"
@@ -36,4 +36,29 @@
    </cdk-virtual-scroll-viewport>
  </ng-container>
  <div *ngIf="showScrollOverlay" class="scroll-overlay"></div>
+</div> -->
+
+<div
+  class="search-results"
+  infinite-scroll
+  [infiniteScrollDistance]="scrollDistance"
+  [infiniteScrollUpDistance]="scrollUpDistance"
+  [fromRoot]="true"
+  [infiniteScrollContainer]="'.remission-list-container'"
+  (scrolled)="onScrollDown()"
+  (scrolledUp)="onUp()"
+>
+  <ng-container *ngFor="let product of products">
+    <ng-container *ngIf="product != null; else loadingComponent">
+      <app-remission-list-card *ngIf="!started" [product]="product"></app-remission-list-card>
+      <app-remission-list-card-started
+        [remissionProcess]="remissionProcess"
+        *ngIf="started"
+        [product]="product"
+      ></app-remission-list-card-started>
+    </ng-container>
+    <ng-template #loadingComponent>
+      <app-remission-list-card-loading></app-remission-list-card-loading>
+    </ng-template>
+  </ng-container>
 </div>
--- a/apps/sales/src/app/modules/remission/components/remission-list/remission-list.component.scss
+++ b/apps/sales/src/app/modules/remission/components/remission-list/remission-list.component.scss
@@ -44,3 +44,8 @@
 cdk-virtual-scroll-viewport {
  -webkit-overflow-scrolling: auto !important;
 }
+
+// infinite list
+.search-results {
+  height: 100%;
+}
--- a/apps/sales/src/app/modules/remission/components/remission-list/remission-list.component.ts
+++ b/apps/sales/src/app/modules/remission/components/remission-list/remission-list.component.ts
@@ -1,10 +1,10 @@
-import { Component, OnInit, Input, OnDestroy, ViewChild, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, Input, OnDestroy, ViewChild, Output, EventEmitter, ChangeDetectorRef, AfterViewInit } from '@angular/core';
 import { RemissionListDataSource } from './remission-list.datasource';
-import { RemissionService, RemissionProcess } from '@isa/remission';
+import { RemissionService, RemissionProcess, RemissionProduct } from '@isa/remission';
 import { Store } from '@ngxs/store';
 import { RemissionHelperService } from '../../services/remission-helper.service';
 import { Subject } from 'rxjs';
-import { takeUntil, filter, take, distinctUntilChanged } from 'rxjs/operators';
+import { takeUntil, filter, take, distinctUntilChanged, switchMap, tap } from 'rxjs/operators';
 import { isNullOrUndefined } from 'util';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';

@@ -13,7 +13,7 @@ import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
  templateUrl: './remission-list.component.html',
  styleUrls: ['./remission-list.component.scss']
 })
-export class RemissionListComponent implements OnInit, OnDestroy {
+export class RemissionListComponent implements OnInit, OnDestroy, AfterViewInit {
  @ViewChild('scroller') scroller: CdkVirtualScrollViewport;
  @Input() started = false;
  @Input() hits: number;
@@ -30,9 +30,17 @@ export class RemissionListComponent implements OnInit, OnDestroy {
  prevRangeEnd: number;
  showScrollOverlay = false;
  stopListScrolling = true;
+  products: RemissionProduct[] = [];
  containerHeight = 810;
  prevListTop = 0;

+  throttle = 0;
+  scrollDistance = 1;
+  scrollUpDistance = 2;
+  page = 0;
+  pageSize = 10;
+  totalHits = 0;
+
  constructor(
    private remisssionService: RemissionService,
    private store: Store,
@@ -41,11 +49,22 @@ export class RemissionListComponent implements OnInit, OnDestroy {
  ) {}

  ngOnInit() {
+    console.log('init');
    this.subscribeToFilterHeightChanges();
-    this.subscribeToListSrollEvents();
+    // this.subscribeToListSrollEvents();
+  }
+
+  ngAfterViewInit() {
+    console.log('after view init');
+    this.fetchProductPaged(this.page)
+      .toPromise()
+      .then(() => {
+        this.subscribeToRemissionProducts();
+      });
  }

  ngOnDestroy() {
+    console.log('destroyed');
    this.destroy$.next();
  }

@@ -74,23 +93,22 @@ export class RemissionListComponent implements OnInit, OnDestroy {
  public hideOverlay() {}

  public containerScrolled() {
-    if (this.hits < 1) {
-      return;
-    }
-    this.showScrollOverlay = false;
-    const container = document.getElementById('result-container');
-    const listTop = container.getBoundingClientRect().top;
-    if (listTop < 200 && listTop > 140) {
-      this.stopListScrolling = false;
-      this.stopScroll.emit(true);
-    } else {
-      this.stopScroll.emit(false);
-      this.stopListScrolling = true;
-    }
+    // if (this.hits < 1) {
+    //   return;
+    // }
+    // this.showScrollOverlay = false;
+    // const container = document.getElementById('result-container');
+    // const listTop = container.getBoundingClientRect().top;
+    // if (listTop < 200 && listTop > 140) {
+    //   this.stopListScrolling = false;
+    //   this.stopScroll.emit(true);
+    // } else {
+    //   this.stopScroll.emit(false);
+    //   this.stopListScrolling = true;
+    // }
  }

  public subscribeToProducts() {
-    console.log('subscribed to products');
    this.remissionHelper.loadRemissionListProducts$
      .pipe(
        filter(data => !isNullOrUndefined(data)),
@@ -132,4 +150,53 @@ export class RemissionListComponent implements OnInit, OnDestroy {
        }
      });
  }
+
+  onScrollDown() {
+    console.log('scrolled down!!');
+    this.page += 1;
+    this.fetchProductPaged(this.page).toPromise();
+    // this.subscribeToRemissionProducts();
+  }
+
+  onUp() {
+    console.log('scrolled up!');
+  }
+
+  fetchProductPaged(page: number) {
+    console.log(page);
+    return this.remisssionService
+      .updateRemissionFilter({
+        remissionProcessId: this.remissionProcess.id,
+        changes: { skip: page * this.pageSize, take: this.pageSize }
+      })
+      .pipe(
+        takeUntil(this.destroy$),
+        tap(data => {
+          console.log('remission filter', data);
+        })
+      );
+  }
+
+  subscribeToRemissionProducts() {
+    console.log('subscribed to products');
+    this.remisssionService
+      .getRemissionProducts({ remissionProcessId: this.remissionProcess.id })
+      .pipe(
+        filter(data => !isNullOrUndefined(data)),
+        takeUntil(this.destroy$)
+      )
+      .subscribe((result: { skip?: number; take?: number; hits?: number; items: RemissionProduct[]; completed: boolean }) => {
+        console.log('products: ', this.page, result);
+        if (this.page === 0) {
+          // this.products = Array.from<RemissionProduct>({ length: result.hits });
+          this.totalHits = result.hits;
+          this.remissionHelper.setRemissionListHits(result.hits);
+        }
+        const itemsToUpdate = result.items && result.items.length < this.pageSize ? result.items.length : this.pageSize;
+        // this.products.splice(this.page * this.pageSize, this.pageSize, ...result.items);
+        console.log('pushed: ', result.items);
+        this.products.push(...result.items);
+        console.log('Complete list', this.products);
+      });
+  }
 }
--- a/apps/sales/src/app/modules/remission/pages/remission-list-create/remission-list-create.component.html
+++ b/apps/sales/src/app/modules/remission/pages/remission-list-create/remission-list-create.component.html
@@ -56,6 +56,7 @@
      <span>{{ remissionListHits }} Titel</span>
    </div>
    <app-remission-list
+      *ngIf="remissionProcess"
      [remissionProcess]="remissionProcess"
      (scrolled)="remissionListScrolled($event)"
      [hits]="remissionListHits"
--- a/apps/sales/src/app/modules/remission/pages/remission-list-create/remission-list-create.component.ts
+++ b/apps/sales/src/app/modules/remission/pages/remission-list-create/remission-list-create.component.ts
@@ -253,10 +253,10 @@ export class RemissionListCreateComponent implements OnInit, OnDestroy, AfterVie
    }
    this.store.dispatch(new SetRemissionProcess(remissionProcess));
    this.remissionHelper.loadRemissionListProducts(remissionProcess.id);
-    const isSubscribetToProducts = this.remissionList.subscribedToProducts;
-    if (!isSubscribetToProducts) {
-      this.remissionProductsSubscription();
-    }
+    // const isSubscribetToProducts = this.remissionList.subscribedToProducts;
+    // if (!isSubscribetToProducts) {
+    //   this.remissionProductsSubscription();
+    // }
    // TODO: remove console logging
    console.log('remission subscribed', remissionProcess);
  };
--- a/apps/sales/src/app/modules/remission/remission-client.module.ts
+++ b/apps/sales/src/app/modules/remission/remission-client.module.ts
@@ -28,6 +28,7 @@ import { RemissionAddProductToShippingDocumentDialogComponent } from './componen
 // tslint:disable-next-line: max-line-length
 import { RemissionAddProductToShippingDocumentPartiallyDialogComponent } from './components/remission-add-product-to-shipping-document-partially-dialog/remission-add-product-to-shipping-document-partially-dialog.component';
 import { FormsModule } from '@angular/forms';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';

@NgModule({
  declarations: [
@@ -61,7 +62,8 @@ import { FormsModule } from '@angular/forms';
    RemissionContainerScannerModule,
    RemissionShippingDocumentScannerModule,
    ModalModule,
-    DropdownModule
+    DropdownModule,
+    InfiniteScrollModule
  ]
 })
 export class RemissionClientModule {}
--- a/package-lock.json
+++ b/package-lock.json
@@ -1095,9 +1095,9 @@
      }
    },
    "@isa/remission": {
-      "version": "0.1.7",
-      "resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/@isa/remission/-/remission-0.1.7.tgz",
-      "integrity": "sha1-QTIxvC4zmYJtSsXJ5GDo+e5yOfI=",
+      "version": "0.1.8",
+      "resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/@isa/remission/-/remission-0.1.8.tgz",
+      "integrity": "sha1-KNOpCaESv8cSu5mbntwv79AUXEQ=",
      "requires": {
        "tslib": "^1.9.0"
      }
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
    "@isa/catsearch-api": "^0.0.25",
    "@isa/print-api": "^0.0.25",
    "@isa/remi-api": "^0.0.25",
-    "@isa/remission": "^0.1.7",
+    "@isa/remission": "^0.1.8",
    "@ngxs/store": "^3.4.1",
    "@types/faker": "^4.1.5",
    "@zxing/ngx-scanner": "^1.3.0",