Earlier PDF progress bar

Shows an indeterminate spinner before the actual PDF creation

client/src/app/core/pdf-services/pdf-document.service.ts

@@ -392,6 +392,17 @@ export class PdfDocumentService {
         };
     }
 
+    /**
+     * Shows the progress bar earlier
+     */
+    private showProgress(): void {
+        this.matSnackBar.openFromComponent(ProgressSnackBarComponent, {
+            duration: 0
+        });
+        this.progressService.message = this.translate.instant('Creating PDF file...');
+        this.progressService.progressMode = 'determinate';
+    }
+
     /**
      * Downloads a pdf with the standard page definitions.
      *
@@ -400,6 +411,7 @@ export class PdfDocumentService {
      * @param metadata
      */
     public download(docDefinition: object, filename: string, metadata?: object, exportInfo?: MotionExportInfo): void {
+        this.showProgress();
         this.getStandardPaper(docDefinition, metadata, exportInfo).then(doc => {
             this.createPdf(doc, filename);
         });
@@ -413,6 +425,7 @@ export class PdfDocumentService {
      * @param metadata
      */
     public downloadLandscape(docDefinition: object, filename: string, metadata?: object): void {
+        this.showProgress();
         this.getStandardPaper(docDefinition, metadata, null, null, [50, 80, 50, 75], true).then(doc => {
             this.createPdf(doc, filename);
         });
@@ -426,6 +439,7 @@ export class PdfDocumentService {
      * @param logo (optional) url of a logo to be placed as ballot logo
      */
     public downloadWithBallotPaper(docDefinition: object, filename: string, logo?: string): void {
+        this.showProgress();
         this.getBallotPaper(docDefinition, logo).then(doc => {
             this.createPdf(doc, filename);
         });
@@ -439,17 +453,6 @@ export class PdfDocumentService {
      */
     private async createPdf(doc: object, filetitle: string): Promise<void> {
         const filename = `${filetitle}.pdf`;
-
-        // set the required progress info
-        this.progressService.progressInfo = {
-            mode: 'determinate',
-            text: filename
-        };
-
-        // open progress bar
-        this.matSnackBar.openFromComponent(ProgressSnackBarComponent, {
-            duration: 0
-        });
         const fonts = this.getPdfFonts();
         const vfs = await this.initVfs();
         await this.loadAllImages(vfs);
@@ -470,7 +473,6 @@ export class PdfDocumentService {
 
                 // if the worker returns an object, it's always the document
                 if (typeof data === 'object') {
-                    // close progress bar
                     this.matSnackBar.dismiss();
                     saveAs(data, filename, { autoBOM: true });
                 }
@@ -482,6 +484,7 @@ export class PdfDocumentService {
                 vfs: vfs
             });
         } else {
+            this.matSnackBar.dismiss();
             this.matSnackBar.open(this.translate.instant('Web workers are not supported on your browser.'), '', {
                 duration: 0
             });

client/src/app/core/ui-services/progress.service.ts

@@ -7,14 +7,6 @@ import { Subject } from 'rxjs';
  */
 export type ProgressMode = 'determinate' | 'indeterminate' | 'buffer' | 'query';
 
-/**
- * Shape of the progress info
- */
-export interface ProgressInfo {
-    mode: ProgressMode;
-    text?: string;
-}
-
 /**
  * Helper service to announce some sort of progress, determinate or indeterminate.
  */
@@ -23,34 +15,53 @@ export interface ProgressInfo {
 })
 export class ProgressService {
     /**
-     * Subject to get progress information
+     * Subject to get text to display
      */
-    private _progressInfo: Subject<ProgressInfo> = new Subject();
+    private _messageSubject: Subject<string> = new Subject();
+
+    /**
+     * Subject to get the chosen progress mode
+     */
+    private _progressModeSubject: Subject<ProgressMode> = new Subject();
 
     /**
      * Subject to get the progress amount
      */
-    private _progressAmount: Subject<number> = new Subject();
+    private _amountSubject: Subject<number> = new Subject();
 
     /**
      * Get the progress information as observable
      */
-    public get info(): Subject<ProgressInfo> {
+    public get messageSubject(): Subject<string> {
-        return this._progressInfo;
+        return this._messageSubject;
     }
 
     /**
-     * Get the progres amount as observable
+     * get the progress mode as observable
      */
-    public get amount(): Subject<number> {
+    public get progressModeSubject(): Subject<ProgressMode> {
-        return this._progressAmount;
+        return this._progressModeSubject;
+    }
+
+    /**
+     * Get the progress amount as observable
+     */
+    public get amountSubject(): Subject<number> {
+        return this._amountSubject;
     }
 
     /**
      * Set the progress info. Usually only required once for every part if new information
      */
-    public set progressInfo(newInfo: ProgressInfo) {
+    public set message(newText: string) {
-        setTimeout(() => this._progressInfo.next(newInfo));
+        setTimeout(() => this._messageSubject.next(newText));
+    }
+
+    /**
+     * Set the new progress mode
+     */
+    public set progressMode(mode: ProgressMode) {
+        this._progressModeSubject.next(mode);
     }
 
     /**
@@ -58,6 +69,6 @@ export class ProgressService {
      * is available. Required only if the ProgressMode is set to 'determinate'
      */
     public set progressAmount(newAmount: number) {
-        this._progressAmount.next(newAmount);
+        this._amountSubject.next(newAmount);
     }
 }

client/src/app/shared/components/progress-snack-bar/progress-snack-bar.component.html

@@ -2,5 +2,5 @@
     {{ message | translate }}
 </div>
 <div>
-    <mat-progress-bar color="accent" [mode]="mode" [value]="value"></mat-progress-bar>
+    <mat-progress-bar [mode]="mode" [value]="value"></mat-progress-bar>
 </div>

client/src/app/shared/components/progress-snack-bar/progress-snack-bar.component.ts

@@ -42,13 +42,18 @@ export class ProgressSnackBarComponent implements OnInit, OnDestroy {
     /**
      * The sub for the info
      */
-    private infoSubscription: Subscription;
+    private messageSubscription: Subscription;
 
     /**
      * The sub for the amount
      */
     private valueSubscription: Subscription;
 
+    /**
+     *
+     */
+    private progressModeSubscription: Subscription;
+
     /**
      * Public getter of the progress bar mode
      */
@@ -79,13 +84,17 @@ export class ProgressSnackBarComponent implements OnInit, OnDestroy {
      * Get the progress subject and subscribe to the info subject
      */
     public ngOnInit(): void {
-        this.infoSubscription = this.progressService.info.subscribe(info => {
+        this.messageSubscription = this.progressService.messageSubject.subscribe(message => {
-            this._message = info.text;
+            this._message = message;
-            this._mode = info.mode;
             this.cd.detectChanges();
         });
 
-        this.valueSubscription = this.progressService.amount.pipe(distinctUntilChanged()).subscribe(value => {
+        this.progressModeSubscription = this.progressService.progressModeSubject.subscribe(mode => {
+            this._mode = mode;
+            this.cd.detectChanges();
+        });
+
+        this.valueSubscription = this.progressService.amountSubject.pipe(distinctUntilChanged()).subscribe(value => {
             if (value - this._value >= 5 || value === 100) {
                 this._value = value;
                 this.cd.detectChanges();
@@ -97,14 +106,19 @@ export class ProgressSnackBarComponent implements OnInit, OnDestroy {
      * clear the Subscriptions
      */
     public ngOnDestroy(): void {
-        if (this.infoSubscription) {
+        if (this.messageSubscription) {
-            this.infoSubscription.unsubscribe();
+            this.messageSubscription.unsubscribe();
-            this.infoSubscription = null;
+            this.messageSubscription = null;
         }
 
         if (this.valueSubscription) {
             this.valueSubscription.unsubscribe();
             this.valueSubscription = null;
         }
+
+        if (this.progressModeSubscription) {
+            this.progressModeSubscription.unsubscribe();
+            this.progressModeSubscription = null;
+        }
     }
 }

client/src/assets/styles/global-components-style.scss

@@ -131,4 +131,8 @@
     .pbl-ngrid-row:hover {
         background-color: rgba(0, 0, 0, 0.025);
     }
+
+    .mat-progress-bar-buffer {
+        background-color: mat-color($background, card) !important;
+    }
 }