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

   1 import {Component, Input, OnInit, ViewChild, TemplateRef, EventEmitter} from '@angular/core';
   2 import {Observable, Observer} from 'rxjs';
   3 import {NgbModal, NgbModalRef, NgbModalOptions} from '@ng-bootstrap/ng-bootstrap';
   4
   5 /**
   6  * Dialog base class.  Handles the ngbModal logic.
   7  * Sub-classed component templates must have a #dialogContent selector
   8  * at the root of the template (see ConfirmDialogComponent).
   9  *
  10  * Dialogs interact with the caller via Observable.
  11  *
  12  * dialog.open().subscribe(
  13  *   value => handleValue(value),
  14  *   error => handleError(error),
  15  *   ()    => console.debug('dialog closed')
  16  * );
  17  *
  18  * It is up to the dialog implementer to decide what values to
  19  * pass to the caller via the dialog.respond(data) and/or
  20  * dialog.close(data) methods.
  21  *
  22  * dialog.close(...) closes the modal window and completes the
  23  * observable, unless an error was previously passed, in which
  24  * case the observable is already complete.
  25  *
  26  * dialog.close() with no data closes the dialog without passing
  27  * any values to the caller.
  28  */
  29
  30 @Component({
  31     selector: 'eg-dialog',
  32     template: '<ng-template></ng-template>'
  33 })
  34 export class DialogComponent implements OnInit {
  35
  36     // Assume all dialogs support a title attribute.
  37     @Input() public dialogTitle: string;
  38
  39     // Pointer to the dialog content template.
  40     @ViewChild('dialogContent')
  41     private dialogContent: TemplateRef<any>;
  42
  43     // Emitted after open() is called on the ngbModal.
  44     // Note when overriding open(), this will not fire unless also
  45     // called in the overridding method.
  46     onOpen$ = new EventEmitter<any>();
  47
  48     // How we relay responses to the caller.
  49     observer: Observer<any>;
  50
  51     // The modalRef allows direct control of the modal instance.
  52     private modalRef: NgbModalRef = null;
  53
  54     constructor(private modalService: NgbModal) {}
  55
  56     ngOnInit() {
  57         this.onOpen$ = new EventEmitter<any>();
  58     }
  59
  60     open(options?: NgbModalOptions): Observable<any> {
  61
  62         if (this.modalRef !== null) {
  63             this.error('Dialog was replaced!');
  64             this.finalize();
  65         }
  66
  67         this.modalRef = this.modalService.open(this.dialogContent, options);
  68
  69         if (this.onOpen$) {
  70             // Let the digest cycle complete
  71             setTimeout(() => this.onOpen$.emit(true));
  72         }
  73
  74         return new Observable(observer => {
  75             this.observer = observer;
  76
  77             this.modalRef.result.then(
  78                 // Results are relayed to the caller via our observer.
  79                 // Our Observer is marked complete via this.close().
  80                 // Nothing to do here.
  81                 result => {},
  82
  83                 // Modal was dismissed via UI control which
  84                 // bypasses call to this.close()
  85                 dismissed => this.finalize()
  86             );
  87         });
  88     }
  89
  90     // Send a response to the caller without closing the dialog.
  91     respond(value: any) {
  92         if (this.observer && value !== undefined) {
  93             this.observer.next(value);
  94         }
  95     }
  96
  97     // Sends error event to the caller and closes the dialog.
  98     // Once an error is sent, our observable is complete and
  99     // cannot be used again to send any messages.
 100     error(value: any, close?: boolean) {
 101         if (this.observer) {
 102             console.error('Dialog produced error', value);
 103             this.observer.error(value);
 104             this.observer = null;
 105         }
 106         if (this.modalRef) { this.modalRef.close(); }
 107         this.finalize();
 108     }
 109
 110     // Close the dialog, optionally with a value to relay to the caller.
 111     // Calling close() with no value simply dismisses the dialog.
 112     close(value?: any) {
 113         this.respond(value);
 114         if (this.modalRef) { this.modalRef.close(); }
 115         this.finalize();
 116     }
 117
 118     dismiss() {
 119         console.warn('Dialog.dismiss() is deprecated.  Use close() instead');
 120         this.close();
 121     }
 122
 123     // Clean up after closing the dialog.
 124     finalize() {
 125         if (this.observer) { // null if this.error() called
 126             this.observer.complete();
 127             this.observer = null;
 128         }
 129         this.modalRef = null;
 130     }
 131 }
 132
 133