From 0fcc28d27409ef5f519d150a5843876a3bd31038 Mon Sep 17 00:00:00 2001 From: Bill Erickson Date: Wed, 18 Apr 2018 14:46:53 -0400 Subject: [PATCH] LP#1626157 progress dialog port Signed-off-by: Bill Erickson --- .../src/app/share/dialog/progress.component.css | 5 ++ .../src/app/share/dialog/progress.component.html | 32 ++++++++ .../eg2/src/app/share/dialog/progress.component.ts | 92 ++++++++++++++++++++++ Open-ILS/src/eg2/src/app/staff/common.module.ts | 3 + .../src/app/staff/sandbox/sandbox.component.html | 5 ++ .../eg2/src/app/staff/sandbox/sandbox.component.ts | 16 +++- 6 files changed, 152 insertions(+), 1 deletion(-) create mode 100644 Open-ILS/src/eg2/src/app/share/dialog/progress.component.css create mode 100644 Open-ILS/src/eg2/src/app/share/dialog/progress.component.html create mode 100644 Open-ILS/src/eg2/src/app/share/dialog/progress.component.ts diff --git a/Open-ILS/src/eg2/src/app/share/dialog/progress.component.css b/Open-ILS/src/eg2/src/app/share/dialog/progress.component.css new file mode 100644 index 0000000000..a79609e08a --- /dev/null +++ b/Open-ILS/src/eg2/src/app/share/dialog/progress.component.css @@ -0,0 +1,5 @@ + +.eg-progress-dialog progress { + width: 100%; + height: 25px; +} diff --git a/Open-ILS/src/eg2/src/app/share/dialog/progress.component.html b/Open-ILS/src/eg2/src/app/share/dialog/progress.component.html new file mode 100644 index 0000000000..5d682b94ae --- /dev/null +++ b/Open-ILS/src/eg2/src/app/share/dialog/progress.component.html @@ -0,0 +1,32 @@ + +
+ +
+ +
+ +
+ +
+ +
+
{{percent()}}%
+
+ +
+ +
+
{{value}}...
+
+ +
+ +
+
+ +
+ diff --git a/Open-ILS/src/eg2/src/app/share/dialog/progress.component.ts b/Open-ILS/src/eg2/src/app/share/dialog/progress.component.ts new file mode 100644 index 0000000000..33f80998d4 --- /dev/null +++ b/Open-ILS/src/eg2/src/app/share/dialog/progress.component.ts @@ -0,0 +1,92 @@ +import {Component, Input, ViewChild, TemplateRef} from '@angular/core'; +import {EgDialogComponent} from '@eg/share/dialog/dialog.component'; + +@Component({ + selector: 'eg-progress-dialog', + templateUrl: './progress.component.html', + styleUrls: ['progress.component.css'] +}) + +/** + * Progress Dialog. + * + * // assuming a template reference... + * @ViewChild('progressDialog') + * private dialog: EgProgressDialogComponent; + * + * dialog.open(); + * dialog.update({value : 0, max : 123}); + * dialog.increment(); + * dialog.increment(); + * dialog.close(); + * + * Each dialog has 2 numbers, 'max' and 'value'. + * The content of these values determines how the dialog displays. + * + * There are 3 flavors: + * + * -- value is set, max is set + * determinate: shows a progression with a percent complete. + * + * -- value is set, max is unset + * semi-determinate, with a value report. Shows a value-less + * , but shows the value as a number in the dialog. + * + * This is useful in cases where the total number of items to retrieve + * from the server is unknown, but we know how many items we've + * retrieved thus far. It helps to reinforce that something specific + * is happening, but we don't know when it will end. + * + * -- value is unset + * indeterminate: shows a generic value-less with no + * clear indication of progress. + */ +export class EgProgressDialogComponent extends EgDialogComponent { + + max: number; + value: number; + + reset() { + delete this.max; + delete this.value; + } + + hasValue(): boolean { + return Number.isInteger(this.value); + } + + hasMax(): boolean { + return Number.isInteger(this.max); + } + + percent(): number { + if (this.hasValue() && + this.hasMax() && + this.max > 0 && + this.value <= this.max) + return Math.floor((this.value / this.max) * 100); + return 100; + } + + // Set the current state of the progress bar. + update(args: {[key:string] : number}) { + if (args.max != undefined) + this.max = args.max; + if (args.value != undefined) + this.value = args.value; + } + + // Increment the current value. If no amount is specified, + // it increments by 1. Calling increment() on an indetermite + // progress bar will force it to be a (semi-)determinate bar. + increment(amt: number) { + if (!Number.isInteger(amt)) amt = 1; + + if (!this.hasValue()) + this.value = 0; + + this.value += amt; + } +} + + diff --git a/Open-ILS/src/eg2/src/app/staff/common.module.ts b/Open-ILS/src/eg2/src/app/staff/common.module.ts index 82529f4955..762c1aa877 100644 --- a/Open-ILS/src/eg2/src/app/staff/common.module.ts +++ b/Open-ILS/src/eg2/src/app/staff/common.module.ts @@ -5,6 +5,7 @@ import {EgOrgSelectComponent} from '@eg/share/org-select.component'; import {EgDialogComponent} from '@eg/share/dialog/dialog.component'; import {EgConfirmDialogComponent} from '@eg/share/dialog/confirm.component'; import {EgPromptDialogComponent} from '@eg/share/dialog/prompt.component'; +import {EgProgressDialogComponent} from '@eg/share/dialog/progress.component'; import {EgAccessKeyDirective} from '@eg/share/accesskey/accesskey.directive'; import {EgAccessKeyService} from '@eg/share/accesskey/accesskey.service'; import {EgAccessKeyInfoComponent} from '@eg/share/accesskey/accesskey-info.component'; @@ -20,6 +21,7 @@ import {EgAccessKeyInfoComponent} from '@eg/share/accesskey/accesskey-info.compo EgDialogComponent, EgConfirmDialogComponent, EgPromptDialogComponent, + EgProgressDialogComponent, EgAccessKeyDirective, EgAccessKeyInfoComponent ], @@ -33,6 +35,7 @@ import {EgAccessKeyInfoComponent} from '@eg/share/accesskey/accesskey-info.compo EgDialogComponent, EgConfirmDialogComponent, EgPromptDialogComponent, + EgProgressDialogComponent, EgAccessKeyDirective, EgAccessKeyInfoComponent ] diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html index 09196cfea8..f4cc4b6ada 100644 --- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html +++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html @@ -12,4 +12,9 @@ idlClass="cbt" +

+ + + + diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts index ac00156ba8..8e3c725378 100644 --- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts +++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts @@ -1,13 +1,27 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, OnInit, ViewChild} from '@angular/core'; +import {EgProgressDialogComponent} from '@eg/share/dialog/progress.component'; @Component({ templateUrl: 'sandbox.component.html' }) export class EgSandboxComponent implements OnInit { + @ViewChild('progressDialog') + private progressDialog: EgProgressDialogComponent; + constructor() {} ngOnInit() { } + + showProgress() { + this.progressDialog.open(); + this.progressDialog.update({value: 1, max: 100}) + setTimeout(() => this.progressDialog.update({value: 5}), 1000); + setTimeout(() => this.progressDialog.update({value: 10}), 2000); + setTimeout(() => this.progressDialog.update({value: 50}), 3000); + setTimeout(() => this.progressDialog.update({value: 95}), 4000); + setTimeout(() => this.progressDialog.close(), 5000); + } } -- 2.11.0