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
|
import { Component, Input, Output, EventEmitter } from "@angular/core";
import { ModalService } from "../../../src/angular/modals/modal.service";
import { IModalConfig, ModalType, ModalSize } from "../../../src/angular/modals/models/modal-config";
import { ModalInnerContent } from "./modal-inner-content-example.component";
import { ButtonComponent } from "../../../src/angular/buttons/button.component";
import { ModalButtonComponent } from './../../../src/angular/modals/modal-button.component';
import { Placement } from "../../../src/angular/common/enums";
import { ModalComponent } from "../../../src/angular/components";
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 ModalConsumer {
@Input() action: string;
constructor(private modalService: ModalService) {
}
private openModal = (): void => {
if (this[this.action]) {
this[this.action]();
}
}
private openErrorModal = (): void => {
this.modalService.openErrorModal(MODAL_CONTENT, "sampleTestId");
}
private openAlertModal = (): void => {
this.modalService.openAlertModal("Alert Title", MODAL_CONTENT, 'Continue', this.onConfirmAction, 'sampleTestId');
}
private openActionModal = (): void => {
this.modalService.openActionModal('Standard Modal', MODAL_CONTENT, "OK", this.onConfirmAction, "sampleTestId");
}
private onConfirmAction = (): void => {
alert("Action has been confirmed");
}
private openCustomModal1 = (): void => {
const modalConfig = {
size: ModalSize.medium,
title: 'Title',
type: ModalType.custom,
testId: 'sampleTestIdModal1',
buttons: [
{id: "saveButton", text: "Save", callback: this.customModalOnSave1, closeModal: false},
{id: "cancelButton", text: "Cancel", size: 'x-small', type: 'secondary', closeModal: true}
] as ModalButtonComponent[]
} as IModalConfig;
this.modalService.openCustomModal(modalConfig, ModalInnerContent, {name: "Sample Content"});
}
private customModalOnSave1 = (): void => {
const currentInstance: ModalComponent = this.modalService.getCurrentInstance();
const saveButton: ModalButtonComponent = currentInstance.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.modalService.openCustomModal(modalConfig, ModalInnerContent, {name: "Sample Content"});
}
private customModalUDisableClose2 = (): void => {
const currentInstance: ModalComponent = this.modalService.getCurrentInstance();
currentInstance.getCloseButton().disabled = true;
}
private customModalChangeTitle2 = (): void => {
const currentInstance: ModalComponent = this.modalService.getCurrentInstance();
currentInstance.setTitle('New title');
}
private customModalUpdateButtons2 = (): void => {
const currentInstance: ModalComponent = this.modalService.getCurrentInstance();
const newButtons = [
{text: "Change title", callback: this.customModalChangeTitle2, closeModal: false},
{text: "Do nothing", closeModal: false}
] as ModalButtonComponent[];
currentInstance.setButtons(newButtons);
}
}
|
