[HIMA-806] added preloader for printing PopUp

apps/sales/src/app/components/printer-selection/printer-selection.component.html

@@ -4,13 +4,25 @@
       <h1>Wählen Sie einen Drucker aus</h1>
       <lib-icon (click)="closeModal()" height="21px" class="close-icon" name="close" alt="close"></lib-icon>
     </div>
-    <div class="body">
-      <app-dropdown (valueChanges)="printerSelected($event)" [options]="options" [selected]="selected" [showFull]="true"></app-dropdown>
-    </div>
-    <div class="actions">
-      <div>
-        <app-button [primary]="true" (action)="emitPrint()">Drucken</app-button>
+    <ng-container *ngIf="!error">
+      <div class="body">
+        <app-dropdown
+          [load]="true"
+          (valueChanges)="printerSelected($event)"
+          [options]="options"
+          [selected]="selected"
+          [loading]="!loaded"
+          [showFull]="true"
+        ></app-dropdown>
       </div>
-    </div>
+      <div class="actions">
+        <div>
+          <app-button [primary]="true" [disabled]="!loaded" (action)="emitPrint()" #printBtn>Drucken</app-button>
+        </div>
+      </div>
+    </ng-container>
+    <ng-container *ngIf="error">
+      <span>{{ errorMessage }}</span>
+    </ng-container>
   </div>
 </app-modal>

apps/sales/src/app/components/printer-selection/printer-selection.component.ts

@@ -1,8 +1,9 @@
-import { Component, OnInit, Output, EventEmitter, OnDestroy } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, OnDestroy, ViewChild } from '@angular/core';
 import { PrinterService } from '../../core/services/printer.service';
-import { ModalService } from '@libs/ui';
+import { ModalService, ButtonComponent } from '@libs/ui';
 import { Subject } from 'rxjs';
-import { takeUntil, map, tap } from 'rxjs/operators';
+import { takeUntil, map, tap, delay } from 'rxjs/operators';
+import { Printer } from '../../core/models/printer.model';
 
 @Component({
   selector: 'app-printer-selection',
@@ -16,7 +17,12 @@ export class PrinterSelectionComponent implements OnInit, OnDestroy {
   selectedPrinterValue: string;
   printers: { key: string; text: string }[] = [];
   destroy$ = new Subject();
+  error = false;
+  errorMessage: string;
+  loaded = false;
+  printingRequested = false;
   @Output() print: EventEmitter<string> = new EventEmitter();
+  @ViewChild('printBtn') printBtn: ButtonComponent;
 
   constructor(private printerService: PrinterService, private modalService: ModalService) {}
 
@@ -28,24 +34,46 @@ export class PrinterSelectionComponent implements OnInit, OnDestroy {
   }
 
   emitPrint() {
-    this.print.emit(this.selectedPrinterValue);
+    if (this.loaded) {
+      this.print.emit(this.selectedPrinterValue);
+    } else {
+      this.printingRequested = true;
+      this.printBtn.startLoading();
+    }
   }
 
   loadPrinters() {
+    this.loaded = false;
     this.printerService
       .getAvailablePrinters()
       .pipe(
         takeUntil(this.destroy$),
-        tap(result => {
-          this.printers = result.map(t => {
-            return { key: t.key, text: t.description };
-          });
-          this.options = this.printers.map(t => t.text);
-          this.selectedPrinterValue = this.printers[0].key;
-          this.selected = this.options[0];
-        })
+        delay(2000)
       )
-      .subscribe();
+      .subscribe(response => {
+        if ((response as { error: string }).error) {
+          const errorResponse = response as { error: string };
+          this.error = true;
+          this.errorMessage = errorResponse.error;
+          return;
+        }
+        const result = response as (Printer[]);
+        this.printers = result.map(t => {
+          return { key: t.key, text: t.description };
+        });
+        this.options = this.printers.map(t => t.text);
+        this.selectedPrinterValue = this.printers[0].key;
+        this.selected = this.options[0];
+        this.error = false;
+        this.loaded = true;
+        if (this.printBtn) {
+          this.printBtn.stopLoading();
+        }
+        if (!this.selected) {
+          this.error = true;
+          this.errorMessage = 'No available printers';
+        }
+      });
   }
 
   openDialog() {
@@ -56,8 +84,14 @@ export class PrinterSelectionComponent implements OnInit, OnDestroy {
   closeModal() {
     this.modalService.close(this.id);
   }
-  
+
   ngOnDestroy() {
     this.destroy$.next();
   }
+
+  contentLoaded() {
+    if (this.printingRequested) {
+      this.print.emit(this.selectedPrinterValue);
+    }
+  }
 }

apps/sales/src/app/core/services/printer.service.ts

@@ -1,10 +1,10 @@
 import { Injectable } from '@angular/core';
 import { PrintService, ItemDTO } from 'swagger';
-import { map } from 'rxjs/operators';
+import { map, catchError } from 'rxjs/operators';
 // tslint:disable-next-line: max-line-length
 import { ListResponseArgsOfKeyValueDTOOfStringAndString } from 'swagger/lib/print/models/list-response-args-of-key-value-dtoof-string-and-string';
 import { Printer } from '../models/printer.model';
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import { PrintRequestOfIEnumerableOfInt64 } from 'swagger/lib/print/models/print-request-of-ienumerable-of-int-64';
 import { PrintRequestOfIEnumerableOfItemDTO } from 'swagger/lib/print/models/print-request-of-ienumerable-of-item-dto';
 import { PrintRequestOfInt64 } from 'swagger/lib/print/models/print-request-of-int-64';
@@ -15,24 +15,23 @@ import { PrintRequestOfInt64 } from 'swagger/lib/print/models/print-request-of-i
 export class PrinterService {
   constructor(private printService: PrintService) {}
 
-  getAvailablePrinters(): Observable<Printer[]> {
+  getAvailablePrinters(): Observable<Printer[] | { error: string }> {
     return this.printService.PrintPrinters().pipe(
+      catchError(error => {
+        return of({ error: error });
+      }),
       map((response: ListResponseArgsOfKeyValueDTOOfStringAndString) => {
         if (response.error) {
-          throw new Error(response.message);
+          return { error: response.message };
         }
-        return (
-          response.result
-            // .filter(t => t.enabled === true)
-            .map(
-              t =>
-                <Printer>{
-                  key: t.key,
-                  value: t.value,
-                  description: t.description,
-                  selected: t.selected,
-                }
-            )
+        return response.result.map(
+          t =>
+            <Printer>{
+              key: t.key,
+              value: t.value,
+              description: t.description,
+              selected: t.selected,
+            }
         );
       })
     );

libs/ui/src/lib/dropdown/dropdown.component.html

@@ -1,4 +1,4 @@
-<div class="dropdown_container" clickOutside (clickOutside)="isOpen = false">
+<div class="dropdown_container" clickOutside (clickOutside)="isOpen = false" *ngIf="!load || !loading">
   <div
     (click)="toggleDropdown()"
     class="dropdown-selected-text"
@@ -30,3 +30,4 @@
     </ul>
   </div>
 </div>
+<div class="spinner" *ngIf="load && loading"></div>

libs/ui/src/lib/dropdown/dropdown.component.scss

@@ -147,3 +147,24 @@
   overflow-y: scroll;
   scroll-behavior: smooth;
 }
+
+.spinner {
+  background-image: url('/assets/images/Icon_Loading_Grey.svg');
+  background-size: 30px 30px;
+  width: 30px;
+  height: 30px;
+  padding-top: 1px;
+  scale: 0.6;
+  background-repeat: no-repeat;
+  margin: auto;
+  animation: spin 1s infinite linear;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

libs/ui/src/lib/dropdown/dropdown.component.ts

@@ -27,6 +27,8 @@ export class DropdownComponent {
   @Input() scrollable = false;
   @Input() floating = false;
   @Input() index: number;
+  @Input() load = false;
+  @Input() loading;
   @Output() valueChanges: EventEmitter<string | number | { key: string; value: string }> = new EventEmitter();
   isOpen = false;
   absolute = false;