Open-ILS/src/eg2/src/app/share/dialog/progress.component.ts

   1 import {Component, Input, ViewChild, TemplateRef} from '@angular/core';
   2 import {DialogComponent} from '@eg/share/dialog/dialog.component';
   3
   4 @Component({
   5   selector: 'eg-progress-dialog',
   6   templateUrl: './progress.component.html',
   7   styleUrls: ['progress.component.css']
   8 })
   9
  10 /**
  11  * TODO: This duplicates the code from ProgressInlineComponent.
  12  * This component should insert to <eg-progress-inline/> into
  13  * its template instead of duplicating the code.  However, until
  14  * Angular bug https://github.com/angular/angular/issues/14842
  15  * is fixed, it's not possible to get a reference to the embedded
  16  * inline progress, which is needed for access the update/increment
  17  * API.
  18  * Also consider moving the progress traking logic to a service
  19  * to reduce code duplication.
  20  */
  21
  22 /**
  23  * Progress Dialog.
  24  *
  25  * // assuming a template reference...
  26  * @ViewChild('progressDialog')
  27  * private dialog: ProgressDialogComponent;
  28  *
  29  * dialog.open();
  30  * dialog.update({value : 0, max : 123});
  31  * dialog.increment();
  32  * dialog.increment();
  33  * dialog.close();
  34  *
  35  * Each dialog has 2 numbers, 'max' and 'value'.
  36  * The content of these values determines how the dialog displays.
  37  *
  38  * There are 3 flavors:
  39  *
  40  * -- value is set, max is set
  41  * determinate: shows a progression with a percent complete.
  42  *
  43  * -- value is set, max is unset
  44  * semi-determinate, with a value report.  Shows a value-less
  45  * <progress/>, but shows the value as a number in the dialog.
  46  *
  47  * This is useful in cases where the total number of items to retrieve
  48  * from the server is unknown, but we know how many items we've
  49  * retrieved thus far.  It helps to reinforce that something specific
  50  * is happening, but we don't know when it will end.
  51  *
  52  * -- value is unset
  53  * indeterminate: shows a generic value-less <progress/> with no
  54  * clear indication of progress.
  55  */
  56 export class ProgressDialogComponent extends DialogComponent {
  57
  58     max: number;
  59     value: number;
  60
  61     reset() {
  62         delete this.max;
  63         delete this.value;
  64     }
  65
  66     hasValue(): boolean {
  67         return Number.isInteger(this.value);
  68     }
  69
  70     hasMax(): boolean {
  71         return Number.isInteger(this.max);
  72     }
  73
  74     percent(): number {
  75         if (this.hasValue()  &&
  76             this.hasMax()    &&
  77             this.max > 0     &&
  78             this.value <= this.max) {
  79             return Math.floor((this.value / this.max) * 100);
  80         }
  81         return 100;
  82     }
  83
  84     // Set the current state of the progress bar.
  85     update(args: {[key: string]: number}) {
  86         if (args.max !== undefined) {
  87             this.max = args.max;
  88         }
  89         if (args.value !== undefined) {
  90             this.value = args.value;
  91         }
  92     }
  93
  94     // Increment the current value.  If no amount is specified,
  95     // it increments by 1.  Calling increment() on an indetermite
  96     // progress bar will force it to be a (semi-)determinate bar.
  97     increment(amt?: number) {
  98         if (!Number.isInteger(amt)) { amt = 1; }
  99
 100         if (!this.hasValue()) {
 101             this.value = 0;
 102         }
 103
 104         this.value += amt;
 105     }
 106 }
 107
 108