]>
Commit | Line | Data |
---|---|---|
437e8e06 K |
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 | } |