diff options
author | Chocobozzz <me@florianbigard.com> | 2019-01-16 16:05:40 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2019-01-17 10:38:18 +0100 |
commit | 457bb213b273a9b206cc5654eb085cede4e916ad (patch) | |
tree | 6b1a317872a4ca27b5d0dbe543452320b26aacff /client/src/app/shared/confirm/confirm.component.ts | |
parent | 848f499def54db2dd36437ef0dfb74dd5041c23b (diff) | |
download | PeerTube-457bb213b273a9b206cc5654eb085cede4e916ad.tar.gz PeerTube-457bb213b273a9b206cc5654eb085cede4e916ad.tar.zst PeerTube-457bb213b273a9b206cc5654eb085cede4e916ad.zip |
Refactor how we use icons
Inject them in an angular component so we can easily change their color
Diffstat (limited to 'client/src/app/shared/confirm/confirm.component.ts')
-rw-r--r-- | client/src/app/shared/confirm/confirm.component.ts | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/client/src/app/shared/confirm/confirm.component.ts b/client/src/app/shared/confirm/confirm.component.ts new file mode 100644 index 000000000..63c163da6 --- /dev/null +++ b/client/src/app/shared/confirm/confirm.component.ts | |||
@@ -0,0 +1,68 @@ | |||
1 | import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core' | ||
2 | import { ConfirmService } from '@app/core/confirm/confirm.service' | ||
3 | import { I18n } from '@ngx-translate/i18n-polyfill' | ||
4 | import { NgbModal } from '@ng-bootstrap/ng-bootstrap' | ||
5 | import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' | ||
6 | |||
7 | @Component({ | ||
8 | selector: 'my-confirm', | ||
9 | templateUrl: './confirm.component.html', | ||
10 | styleUrls: [ './confirm.component.scss' ] | ||
11 | }) | ||
12 | export class ConfirmComponent implements OnInit { | ||
13 | @ViewChild('confirmModal') confirmModal: ElementRef | ||
14 | |||
15 | title = '' | ||
16 | message = '' | ||
17 | expectedInputValue = '' | ||
18 | inputLabel = '' | ||
19 | |||
20 | inputValue = '' | ||
21 | confirmButtonText = '' | ||
22 | |||
23 | private openedModal: NgbModalRef | ||
24 | |||
25 | constructor ( | ||
26 | private modalService: NgbModal, | ||
27 | private confirmService: ConfirmService, | ||
28 | private i18n: I18n | ||
29 | ) { } | ||
30 | |||
31 | ngOnInit () { | ||
32 | this.confirmService.showConfirm.subscribe( | ||
33 | ({ title, message, expectedInputValue, inputLabel, confirmButtonText }) => { | ||
34 | this.title = title | ||
35 | this.message = message | ||
36 | |||
37 | this.inputLabel = inputLabel | ||
38 | this.expectedInputValue = expectedInputValue | ||
39 | |||
40 | this.confirmButtonText = confirmButtonText || this.i18n('Confirm') | ||
41 | |||
42 | this.showModal() | ||
43 | } | ||
44 | ) | ||
45 | } | ||
46 | |||
47 | @HostListener('document:keydown.enter') | ||
48 | confirm () { | ||
49 | if (this.openedModal) this.openedModal.close() | ||
50 | } | ||
51 | |||
52 | isConfirmationDisabled () { | ||
53 | // No input validation | ||
54 | if (!this.inputLabel || !this.expectedInputValue) return false | ||
55 | |||
56 | return this.expectedInputValue !== this.inputValue | ||
57 | } | ||
58 | |||
59 | showModal () { | ||
60 | this.inputValue = '' | ||
61 | |||
62 | this.openedModal = this.modalService.open(this.confirmModal) | ||
63 | |||
64 | this.openedModal.result | ||
65 | .then(() => this.confirmService.confirmResponse.next(true)) | ||
66 | .catch(() => this.confirmService.confirmResponse.next(false)) | ||
67 | } | ||
68 | } | ||