1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
import {Component, Input, Output, EventEmitter, ComponentRef} from "@angular/core";
import { ModalService } from "../../../src/angular/modals/modal.service";
import { IModalConfig, ModalType, ModalSize } from "../../../src/angular/modals/models/modal-config";
import { ModalButtonComponent } from './../../../src/angular/modals/modal-button.component';
import { Placement, ButtonType } from "../../../src/angular/common/enums";
import { ModalComponent } from "../../../src/angular/components";
import { ModalInnerContent } from "./modal-inner-content-example.component";
import {ButtonComponent} from "../../../src/angular/buttons/button.component"
const MODAL_CONTENT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non,' +
'pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra';
@Component({
selector: 'modal-consumer',
template: `<sdc-button [text]="'View Modal'" (click)="openModal()"></sdc-button>`
})
export class ModalConsumerComponent {
@Input() action: string;
private customModal1: ModalComponent;
private customModal2: ModalComponent;
constructor(private modalService: ModalService) {
}
private openModal = (): void => {
if (this[this.action]) {
this[this.action]();
}
}
private openInfoModal = (): void => {
this.modalService.openInfoModal("Info modal title", MODAL_CONTENT, 'infoModalTestId');
}
private openWarningModal = (): void => {
this.modalService.openWarningModal("Warning modal title", MODAL_CONTENT, 'warningModalTestId');
}
private openErrorModal = (): void => {
this.modalService.openErrorModal("Error modal title", MODAL_CONTENT, 'errorModalTestId');
}
private openSuccessModal = (): void => {
this.modalService.openSuccessModal("Success modal title", MODAL_CONTENT, 'successModalTestId');
}
private openInfoModalWithCustomButtons = (): void => {
const buttons = [
{ text: 'CONFIRM', type: ButtonType.info, callback: this.onConfirmAction, closeModal: true },
{ text: 'CANCEL', type: ButtonType.info, closeModal: true }
] as ModalButtonComponent[];
this.modalService.openInfoModal('Info modal title', MODAL_CONTENT, "infoModalCustomTestId", buttons);
}
private openWarningModalWithCustomButtons = (): void => {
const buttons = [
{ text: 'SAVE', type: ButtonType.warning, callback: this.onSaveAction, closeModal: true },
{ text: 'APPLY', type: ButtonType.warning, callback: this.onApplyAction },
{ text: 'CANCEL', type: ButtonType.warning, closeModal: true }
] as ModalButtonComponent[];
this.modalService.openWarningModal('Warning modal title', MODAL_CONTENT, "warningModalCustomTestId", buttons);
}
private onConfirmAction = (): void => {
alert("Action has been confirmed, modal will be closed");
}
private onSaveAction = (): void => {
alert("Action has been saved, modal will be close");
}
private onApplyAction = (): void => {
alert("Action has been applied, modal will not be close");
}
private openCustomModal1 = (): void => {
const modalConfig = {
size: ModalSize.medium,
title: 'Modal title',
type: ModalType.custom,
testId: 'sampleTestIdModal1',
buttons: [
{id: "saveButton", text: "Save", callback: this.customModalOnSave1, closeModal: false},
{id: "cancelButton", text: "Cancel", size: 'x-small', type: ButtonType.secondary , closeModal: true}
]
} as IModalConfig;
this.customModal1 = this.modalService.openCustomModal(modalConfig, ModalInnerContent, {name: "Sample Content"});
}
private customModalOnSave1 = (): void => {
const saveButton: ModalButtonComponent = this.customModal1.getButtonById("saveButton");
saveButton.show_spinner = true;
saveButton.spinner_position = Placement.right;
// Show spinner for 2 seconds
console.log('Saving example, please wait ...');
window.setTimeout((button: ModalButtonComponent) => {
button.show_spinner = false;
console.log('Finish saving');
}, 2000, saveButton);
}
private openCustomModal2 = (): void => {
const modalConfig = {
size: ModalSize.medium,
title: 'Title',
type: ModalType.custom,
testId: 'sampleTestIdModal2',
buttons: [
{text: "Change title", callback: this.customModalChangeTitle2, closeModal: false},
{text: "Change buttons", callback: this.customModalUpdateButtons2, closeModal: false},
{text: "Disable close", callback: this.customModalUDisableClose2, closeModal: false}
]
} as IModalConfig;
this.customModal2 = this.modalService.openCustomModal(modalConfig, ModalInnerContent, {name: "Sample Content"});
}
private customModalUDisableClose2 = (): void => {
this.customModal2.getCloseButton().disabled = true;
}
private customModalChangeTitle2 = (): void => {
this.customModal2.setTitle('New title');
}
private customModalUpdateButtons2 = (): void => {
const newButtons = [
{text: "Change title", callback: this.customModalChangeTitle2, closeModal: false},
{text: "Do nothing", closeModal: false}
] as ModalButtonComponent[];
this.customModal2.setButtons(newButtons);
}
private openErrorModalFromModal = ():void => {
this.modalService.openErrorModal("Error", "Error example!!", "second-modal");
}
private openCustomModal3 = (): void => {
const modalConfig = {
size: ModalSize.medium,
title: 'Title',
type: ModalType.custom,
testId: 'sampleTestIdModal3',
buttons: [
{text: "Open Error", callback: this.openErrorModalFromModal, closeModal: false}
]
} as IModalConfig;
this.modalService.openCustomModal(modalConfig, ModalInnerContent, {name: "Sample Content"});
}
}
|
