ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Earlier PDF progress bar

Browse Source 
Shows an indeterminate spinner before the actual PDF creation
This commit is contained in:
Sean Engelhardt 2019-08-21 13:35:17 +02:00
parent bbe294a1ad
commit 1d566feab6
5 changed files with 72 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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
});

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

@ -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> {
return this._progressInfo;
public get messageSubject(): Subject<string> {
return this._messageSubject;
}
/**
* Get the progres amount as observable
* get the progress mode as observable
*/
public get amount(): Subject<number> {
return this._progressAmount;
public get progressModeSubject(): Subject<ProgressMode> {
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) {
setTimeout(() => this._progressInfo.next(newInfo));
public set message(newText: string) {
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);
}
}

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

@ -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>

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

@ -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._message = info.text;
this._mode = info.mode;
this.messageSubscription = this.progressService.messageSubject.subscribe(message => {
this._message = message;
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) {
this.infoSubscription.unsubscribe();
this.infoSubscription = null;
if (this.messageSubscription) {
this.messageSubscription.unsubscribe();
this.messageSubscription = null;
}
if (this.valueSubscription) {
this.valueSubscription.unsubscribe();
this.valueSubscription = null;
}
if (this.progressModeSubscription) {
this.progressModeSubscription.unsubscribe();
this.progressModeSubscription = null;
}
}
}

4
client/src/assets/styles/global-components-style.scss
View File

@ -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;
}
}