[HIMA-328] debuging library problem and updated implementation, also implemented button to automatically scroll to shipping document list and to top of remission list

2025-12-28 22:42:11 +01:00 · 2019-11-29 15:07:11 +01:00
parent 489c7856f5
commit d7725094fc
12 changed files with 199 additions and 20 deletions
--- a/apps/sales/src/app/core/store/state/app.state.ts
+++ b/apps/sales/src/app/core/store/state/app.state.ts
@@ -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 = 103;
+export const SYNC_DATA_VERSION = 109;

 export class AppStateModel {
  currentProcesssId: number;
--- 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,4 +1,4 @@
-import { Component, OnInit, Input, OnDestroy, ViewChild } from '@angular/core';
+import { Component, OnInit, Input, OnDestroy, ViewChild, Output, EventEmitter } from '@angular/core';
 import { RemissionListDataSource } from './remission-list.datasource';
 import { RemissionService, RemissionProcess, RemissionProduct, RemissionFilter } from '@isa/remission';
 import { RemissionHelperService } from '../../services/remission-helper.service';
@@ -18,6 +18,7 @@ export class RemissionListComponent implements OnInit, OnDestroy {
  @Input() started = false;
  @Input() hits: number;
  @Input() remissionProcess: RemissionProcess;
+  @Output() fullListLoaded = new EventEmitter();
  remissionProcesessId: number;
  ds: RemissionListDataSource;
  destroy$ = new Subject();
@@ -38,6 +39,8 @@ export class RemissionListComponent implements OnInit, OnDestroy {
  pageSize = 10;
  totalHits = 0;
  isItRefetch = false;
+  isFullLoad = false;
+  isFullListLoaded = false;

  constructor(private remissionService: RemissionService, private remissionHelper: RemissionHelperService) {}

@@ -148,6 +151,9 @@ export class RemissionListComponent implements OnInit, OnDestroy {

  onScrollDown() {
    console.log('scrolled down');
+    if (this.isFullListLoaded) {
+      return;
+    }
    this.page += 1;
    this.fetchProductPaged(this.page).subscribe(data => console.log('filtered on scrolling: ', data));
  }
@@ -202,13 +208,36 @@ export class RemissionListComponent implements OnInit, OnDestroy {
        this.totalHits = result.hits;
        this.remissionHelper.setRemissionListHits(result.hits);
        if (result.items && result.items.length > 0) {
-          if (!this.isItRefetch) {
+          if (!this.isItRefetch && !this.isFullLoad) {
            this.products.push(...result.items);
-          } else {
+          } else if (this.isItRefetch && !this.isFullLoad) {
            this.products.splice(result.skip, result.items.length, ...result.items);
            this.isItRefetch = false;
+          } else if (this.isFullLoad) {
+            this.products = result.items;
+            this.isFullLoad = false;
+            this.isFullListLoaded = true;
+            this.fullListLoaded.emit();
          }
        }
      });
  }
+
+  public loadFullList() {
+    this.isFullLoad = true;
+    return this.remissionService
+      .updateRemissionFilter({
+        remissionProcessId: this.remissionProcess.id,
+        changes: { skip: 0, take: this.totalHits }
+      })
+      .pipe(
+        filter(data => !isNullOrUndefined(data)),
+        take(1),
+        catchError(error => {
+          console.error(error);
+          return of(undefined);
+        })
+      )
+      .subscribe();
+  }
 }
--- a/apps/sales/src/app/modules/remission/components/remission-shipping-document/remission-shipping-document.component.ts
+++ b/apps/sales/src/app/modules/remission/components/remission-shipping-document/remission-shipping-document.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, Input, OnDestroy, Output, EventEmitter } from '@angular/core';
 import { Store, Select } from '@ngxs/store';
 import { RemissionService, ShippingDocument } from '@isa/remission';
-import { take, filter, switchMap, takeUntil, catchError } from 'rxjs/operators';
+import { take, filter, switchMap, takeUntil, catchError, tap } from 'rxjs/operators';
 import { isNullOrUndefined } from 'util';
 import { SetRemissionShippingDocument } from 'apps/sales/src/app/core/store/actions/remission.actions';
 import { RemissionSelectors } from 'apps/sales/src/app/core/store/selectors/remission.selectors';
@@ -42,7 +42,7 @@ export class RemissionShippingDocumentComponent implements OnInit, OnDestroy {

  currentShippingDocumentStatusSubscriptionhandler = (status: boolean) => {
    const shippingDocument$ = !status ? this.createShippingDocument$() : this.continueExistingShippingDocument();
-    shippingDocument$.toPromise().then(shippingDocument => {
+    shippingDocument$.subscribe(shippingDocument => {
      this.shippingDocumentSubscriptionHandler(shippingDocument);
      this.remissionService
        .getShippingDocuments({
@@ -72,9 +72,11 @@ export class RemissionShippingDocumentComponent implements OnInit, OnDestroy {
      params = { remissionProcessId: this.remissionProcessId };
    }

+    console.log('shipping document params', params);
    return this.remissionService.createShippingDocument(params).pipe(
      filter(data => !isNullOrUndefined(data)),
-      take(1)
+      take(1),
+      tap(shippingDocument => console.log('created shipping document', shippingDocument))
    );
  }

--- a/apps/sales/src/app/modules/remission/components/remission-to-top-to-bottom-actions/remission-to-top-to-bottom-actions.component.html
+++ b/apps/sales/src/app/modules/remission/components/remission-to-top-to-bottom-actions/remission-to-top-to-bottom-actions.component.html
@@ -1,3 +1,20 @@
-<p>
-  remission-to-top-to-bottom-actions works!
-</p>
+<div class="top" *ngIf="showTop">
+  <div class="button" (click)="scrollBottom()">
+    <div class="icon">
+      <lib-icon name="Hover_Arrow_Down"></lib-icon>
+    </div>
+    <div class="text">
+      <span>Zum Warenbegleitschein</span>
+    </div>
+  </div>
+</div>
+<div class="bottom" *ngIf="showBottom">
+  <div class="button" (click)="scrollTop()">
+    <div class="icon">
+      <lib-icon name="Hover_Arrow_Up"></lib-icon>
+    </div>
+    <div class="text">
+      <span>Nach oben</span>
+    </div>
+  </div>
+</div>
--- a/apps/sales/src/app/modules/remission/components/remission-to-top-to-bottom-actions/remission-to-top-to-bottom-actions.component.scss
+++ b/apps/sales/src/app/modules/remission/components/remission-to-top-to-bottom-actions/remission-to-top-to-bottom-actions.component.scss
@@ -0,0 +1,44 @@
+.top {
+  position: fixed;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  width: 100%;
+  bottom: 100px;
+  left: 0;
+}
+
+.bottom {
+  position: fixed;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  width: 100%;
+  top: 200px;
+  left: 0;
+}
+
+.button {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  background-color: white;
+  -moz-box-shadow: 0 0 30px #596470;
+  -webkit-box-shadow: 0 0 30px #596470;
+  box-shadow: 0 0 30px rgba(89, 100, 112, 0.5);
+  border-radius: 50px;
+  padding: 15px 20px;
+  cursor: pointer;
+
+  .icon {
+    margin-top: 3px;
+    margin-right: 12px;
+  }
+
+  span {
+    font-family: 'Open Sans';
+    font-size: 18px;
+    font-weight: bold;
+    color: #000000;
+  }
+}
--- a/apps/sales/src/app/modules/remission/components/remission-to-top-to-bottom-actions/remission-to-top-to-bottom-actions.component.ts
+++ b/apps/sales/src/app/modules/remission/components/remission-to-top-to-bottom-actions/remission-to-top-to-bottom-actions.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-remission-to-top-to-bottom-actions',
@@ -6,10 +6,27 @@ import { Component, OnInit } from '@angular/core';
  styleUrls: ['./remission-to-top-to-bottom-actions.component.scss']
 })
 export class RemissionToTopToBottomActionsComponent implements OnInit {
+  @Output() navigateToTop = new EventEmitter();
+  @Output() navigateToBottom = new EventEmitter();
+  showTop = true;
+  showBottom = false;
+  constructor() {}

-  constructor() { }
+  ngOnInit() {}

-  ngOnInit() {
+  public showTopAction(status: boolean) {
+    this.showTop = status;
  }

+  public showBottomAction(status: boolean) {
+    this.showBottom = status;
+  }
+
+  scrollTop() {
+    this.navigateToTop.emit();
+  }
+
+  scrollBottom() {
+    this.navigateToBottom.emit();
+  }
 }
--- a/apps/sales/src/app/modules/remission/pages/remission-list-started/remission-list-started.component.html
+++ b/apps/sales/src/app/modules/remission/pages/remission-list-started/remission-list-started.component.html
@@ -1,4 +1,4 @@
-<div class="shipping-document-creation" *ngIf="!shippingDocumentCreationPage && loaded">
+<div class="shipping-document-creation" *ngIf="shippingDocumentCreationPage && loaded">
  <div class="title">
    <span>Warenbegleitschein eröffnen</span>
  </div>
@@ -19,8 +19,9 @@
  id="remission-list-container"
  class="remission-list-container"
  (scroll)="scrollHandler($event)"
-  *ngIf="shippingDocumentCreationPage && loaded"
+  *ngIf="!shippingDocumentCreationPage && loaded"
 >
+  <div id="top-marker"></div>
  <div class="headers" *ngIf="resourceTypeSwitch">
    <div class="header-item resource-type">
      <lib-double-choice-switch [model]="resourceTypeSwitch" (change)="resourceTypeChange($event)"></lib-double-choice-switch>
@@ -70,6 +71,7 @@
      [remissionProcess]="remissionProcess"
      [hits]="remissionListHits"
      started="true"
+      (fullListLoaded)="fullListLoaded()"
      #remissionList
    ></app-remission-list>
  </div>
@@ -88,4 +90,10 @@
      >
    </div>
  </div>
+  <div id="bottom-marker"></div>
+  <app-remission-to-top-to-bottom-actions
+    (navigateToTop)="navigateToTop()"
+    (navigateToBottom)="navigateToBottom()"
+    #toTopToBottomActions
+  ></app-remission-to-top-to-bottom-actions>
 </div>
--- a/apps/sales/src/app/modules/remission/pages/remission-list-started/remission-list-started.component.ts
+++ b/apps/sales/src/app/modules/remission/pages/remission-list-started/remission-list-started.component.ts
@@ -26,6 +26,8 @@ import { AddBreadcrumb } from 'apps/sales/src/app/core/store/actions/breadcrumb.
 import { Router } from '@angular/router';
 import { SetBranchProcessCurrentPath } from 'apps/sales/src/app/core/store/actions/branch-process.actions';
 import { AppService } from 'apps/sales/src/app/core/services/app.service';
+// tslint:disable-next-line: max-line-length
+import { RemissionToTopToBottomActionsComponent } from '../../components/remission-to-top-to-bottom-actions/remission-to-top-to-bottom-actions.component';

@Component({
  selector: 'app-remission-list-started',
@@ -42,6 +44,7 @@ export class RemissionListStartedComponent implements OnInit, OnDestroy {
  remissionSuppliers$ = this.remissionService.getRemissionTargets();
  remissionSources$ = this.remissionService.getRemissionSources();
  @ViewChild('remissionList') remissionList: RemissionListComponent;
+  @ViewChild('toTopToBottomActions') toTopToBottomActions: RemissionToTopToBottomActionsComponent;
  destroy$ = new Subject();
  selectedRemissionResourceType: RemissionResourceType = RemissionResourceType.Central;
  selectedResourceTypeSpecificModel: ResourceTypeSpecificModel = RESOURCE_TYPE_SPECIFIC_MODEL_OPTIONS[this.selectedRemissionResourceType];
@@ -311,7 +314,44 @@ export class RemissionListStartedComponent implements OnInit, OnDestroy {
  }

  @HostListener('window:scroll', ['$event'])
-  scrollHandler(event) {}
+  scrollHandler(event) {
+    if (event.target.id === 'remission-list-container') {
+      const container = document.getElementById('remission-list-container');
+      const topMarker = document.getElementById('top-marker');
+      const containerCoordinates = container.getBoundingClientRect();
+
+      const topMarkerCoordinates = topMarker.getBoundingClientRect();
+      if (topMarkerCoordinates.top > 0) {
+        this.toTopToBottomActions.showTopAction(true);
+        this.toTopToBottomActions.showBottomAction(false);
+      } else if (containerCoordinates.height + container.scrollTop + 130 >= container.scrollHeight) {
+        this.toTopToBottomActions.showTopAction(false);
+        this.toTopToBottomActions.showBottomAction(true);
+      } else {
+        this.toTopToBottomActions.showTopAction(false);
+        this.toTopToBottomActions.showBottomAction(false);
+      }
+    }
+  }
+
+  navigateToTop() {
+    const container = document.getElementById('remission-list-container');
+    container.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+
+  navigateToBottom() {
+    if (this.remissionList.isFullListLoaded) {
+      this.fullListLoaded();
+    } else {
+      this.remissionList.loadFullList();
+    }
+  }
+
+  fullListLoaded() {
+    const container = document.getElementById('remission-list-container');
+    console.log('container.scrollHeight:', container.scrollHeight);
+    container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
+  }

  shippingDocumentWithGeneratedId() {
    this.shippingDocumentCreationPage = false;
--- a/apps/sales/src/assets/images/Hover_Arrow_Down.svg
+++ b/apps/sales/src/assets/images/Hover_Arrow_Down.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13px" height="15px" viewBox="0 0 13 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 56.2 (81672) - https://sketch.com -->
+    <title>Arrow_Less</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="ISA_HIMA-701_Filiale_Remission_Blank_1_09" transform="translate(-259.000000, -887.000000)" fill="#000000" stroke="#000000" stroke-width="0.1">
+            <path d="M271.516621,895.424547 C271.590815,895.374264 271.660372,895.313799 271.723028,895.243009 C271.806173,895.148748 271.870446,895.043898 271.916278,894.933281 C271.97311,894.794778 272.001041,894.647157 272,894.499943 C272.00212,894.23527 271.910455,893.969268 271.723028,893.75702 C271.660372,893.68623 271.590815,893.625754 271.516621,893.575482 L266.834931,889.282173 C266.392029,888.876186 265.710691,888.912655 265.312112,889.363425 C264.913424,889.814194 264.949228,890.508715 265.39159,890.914572 L268.094942,893.393538 L260.078404,893.393538 C259.482861,893.393538 259,893.885331 259,894.491903 C259,895.098465 259.482861,895.590269 260.078404,895.590269 L268.112304,895.590269 L265.39159,898.085458 C264.949228,898.491304 264.913424,899.185833 265.312112,899.636602 C265.710691,900.087338 266.392029,900.123804 266.834931,899.717848 L271.516621,895.424547 Z" id="Arrow_Less" transform="translate(265.500000, 894.500000) rotate(-270.000000) translate(-265.500000, -894.500000) "></path>
+        </g>
+    </g>
+</svg>
--- a/apps/sales/src/assets/images/Hover_Arrow_Up.svg
+++ b/apps/sales/src/assets/images/Hover_Arrow_Up.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13px" height="15px" viewBox="0 0 13 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 56.2 (81672) - https://sketch.com -->
+    <title>Arrow_Less</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="ISA_HIMA-701_Filiale_Remission_Blank_1_10" transform="translate(-322.000000, -186.000000)" fill="#000000" stroke="#000000" stroke-width="0.1">
+            <path d="M334.516621,194.424547 C334.590815,194.374264 334.660372,194.313799 334.723028,194.243009 C334.806173,194.148748 334.870446,194.043898 334.916278,193.933281 C334.97311,193.794778 335.001041,193.647157 335,193.499943 C335.00212,193.23527 334.910455,192.969268 334.723028,192.75702 C334.660372,192.68623 334.590815,192.625754 334.516621,192.575482 L329.834931,188.282173 C329.392029,187.876186 328.710691,187.912655 328.312112,188.363425 C327.913424,188.814194 327.949228,189.508715 328.39159,189.914572 L331.094942,192.393538 L323.078404,192.393538 C322.482861,192.393538 322,192.885331 322,193.491903 C322,194.098465 322.482861,194.590269 323.078404,194.590269 L331.112304,194.590269 L328.39159,197.085458 C327.949228,197.491304 327.913424,198.185833 328.312112,198.636602 C328.710691,199.087338 329.392029,199.123804 329.834931,198.717848 L334.516621,194.424547 Z" id="Arrow_Less" transform="translate(328.500000, 193.500000) rotate(-90.000000) translate(-328.500000, -193.500000) "></path>
+        </g>
+    </g>
+</svg>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1095,9 +1095,9 @@
      }
    },
    "@isa/remission": {
-      "version": "0.1.11",
-      "resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/@isa/remission/-/remission-0.1.11.tgz",
-      "integrity": "sha1-30QDUmP1AVRwLiFftI8L7MBfEy0=",
+      "version": "0.1.14",
+      "resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/@isa/remission/-/remission-0.1.14.tgz",
+      "integrity": "sha1-WcIikUxBtaaqZ5LYPVLnanARBYw=",
      "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.11",
+    "@isa/remission": "^0.1.14",
    "@ngxs/store": "^3.4.1",
    "@types/faker": "^4.1.5",
    "@zxing/ngx-scanner": "^1.3.0",