LP#1626157 progress dialog port

Signed-off-by: Bill Erickson <berickxx@gmail.com>

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 (file)
index 0000000..a79609e
--- /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 (file)
index 0000000..5d682b9
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/dialog/progress.component.html
@@ -0,0 +1,32 @@
+<ng-template #dialogContent>
+  <div class="modal-header bg-info">
+    <button type="button" class="close" 
+      i18n-aria-label aria-label="Close" 
+      (click)="dismiss('cross_click')">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+
+  <div class="modal-body eg-progress-dialog">
+
+    <div *ngIf="hasValue() && hasMax()">
+      <!-- determinate progress bar.  shows max/value progress -->
+      <div class="col-lg-10">
+        <progress max="{{max}}" value="{{value}}"></progress>
+      </div>
+      <div class="col-lg-2">{{percent()}}%</div>
+    </div>
+
+    <div *ngIf="hasValue() && !hasMax()">
+      <!-- semi-determinate progress bar.  shows value -->
+      <div class="col-lg-10"><progress max="1"></progress></div>
+      <div class="col-lg-2">{{value}}...</div>
+    </div>
+
+    <div *ngIf="!hasValue()">
+      <!-- indeterminate -->
+      <div class="col-lg-12"><progress max="1"></progress></div>
+    </div>
+
+  </div>
+</ng-template>

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 (file)
index 0000000..33f8099
--- /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
+ * <progress/>, 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 <progress/> 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 82529f4..762c1aa 100644 (file)
--- 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 09196cf..f4cc4b6 100644 (file)
--- 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"
 </fm-record-editor>
 <button (click)="fmRecordEditor.open({size:'lg'})">Fm Record Editor</button>
 
+<br/><br/>
+
+<eg-progress-dialog #progressDialog>
+</eg-progress-dialog>
+<button (click)="showProgress()">Test Progress Dialog</button>
 

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 ac00156..8e3c725 100644 (file)
--- 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);
+    }
 }