client/src/app/modal/custom-modal.component.ts

   1 import { Component, ElementRef, ViewChild, Input } from '@angular/core'
   2 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
   3
   4 @Component({
   5   selector: 'my-custom-modal',
   6   templateUrl: './custom-modal.component.html',
   7   styleUrls: [ './custom-modal.component.scss' ]
   8 })
   9 export class CustomModalComponent {
  10   @ViewChild('modal', { static: true }) modal: ElementRef
  11
  12   @Input() title: string
  13   @Input() content: string
  14   @Input() close?: boolean
  15   @Input() cancel?: { value: string, action?: () => void }
  16   @Input() confirm?: { value: string, action?: () => void }
  17
  18   private modalRef: NgbModalRef
  19
  20   constructor (
  21     private modalService: NgbModal
  22   ) { }
  23
  24   show (input: {
  25     title: string,
  26     content: string,
  27     close?: boolean,
  28     cancel?: { value: string, action?: () => void },
  29     confirm?: { value: string, action?: () => void }
  30   }) {
  31     if (this.modalRef instanceof NgbModalRef && this.modalService.hasOpenModals()) {
  32       console.error('Cannot open another custom modal, one is already opened.')
  33       return
  34     }
  35
  36     const { title, content, close, cancel, confirm } = input
  37
  38     this.title = title
  39     this.content = content
  40     this.close = close
  41     this.cancel = cancel
  42     this.confirm = confirm
  43
  44     this.modalRef = this.modalService.open(this.modal, {
  45       centered: true,
  46       backdrop: 'static',
  47       keyboard: false,
  48       size: 'lg'
  49     })
  50   }
  51
  52   onCancelClick () {
  53     this.modalRef.close()
  54
  55     if (typeof this.cancel.action === 'function') {
  56       this.cancel.action()
  57     }
  58
  59     this.destroy()
  60   }
  61
  62   onCloseClick () {
  63     this.modalRef.close()
  64     this.destroy()
  65   }
  66
  67   onConfirmClick () {
  68     this.modalRef.close()
  69
  70     if (typeof this.confirm.action === 'function') {
  71       this.confirm.action()
  72     }
  73
  74     this.destroy()
  75   }
  76
  77   hasCancel () {
  78     return typeof this.cancel !== 'undefined'
  79   }
  80
  81   hasConfirm () {
  82     return typeof this.confirm !== 'undefined'
  83   }
  84
  85   private destroy () {
  86     delete this.modalRef
  87     delete this.title
  88     delete this.content
  89     delete this.close
  90     delete this.cancel
  91     delete this.confirm
  92   }
  93 }