Project

General

Profile

1
import {Component, ViewEncapsulation, ElementRef, EventEmitter, Output, Input, ViewChild} from '@angular/core';
2
import {properties} from "../../../../environments/environment";
3

    
4
declare var UIkit: any;
5

    
6
@Component({
7
  selector: 'modal-alert',
8
  template: `
9
    <div #element class="uk-modal" [class.uk-modal-container]="large" [id]="id" uk-modal>
10
      <div class="uk-modal-dialog uk-modal-body uk-animation-fast uk-margin-medium-bottom uk-text-left"
11
           [ngClass]="classBody">
12
        <div [ngClass]="classTitle" class="uk-modal-title" [hidden]=!alertHeader>
13
          <button class="uk-modal-close-default uk-float-right" (click)='cancel()' uk-close></button>
14
          <h4 *ngIf="!isDashboard" class="modal-title">{{alertTitle}}</h4>
15
          <h6 *ngIf="isDashboard" class="uk-text-bold">{{alertTitle}}</h6>
16
        </div>
17
        <div class="uk-margin">
18
          <div *ngIf="message" [hidden]=!alertMessage [innerHTML]="message | safeHtml"></div>
19
          <ng-content></ng-content>
20
        </div>
21
        <div class="uk-grid uk-flex uk-flex-middle">
22
          <label *ngIf="choice" class="uk-width-1-2 checkbox">
23
            <input type="checkbox" [(ngModel)]="select">
24
            <span class="uk-margin-small-left" style="font-weight: normal;">Don't show this message again</span>
25
          </label>
26
          <div [ngClass]="(choice)?'uk-width-1-2':'uk-width-1-1'">
27
            <div class="uk-flex-right uk-grid uk-grid-small" [hidden]=!alertFooter uk-grid>
28
              <span [hidden]=!okButton [class.uk-flex-last]="!okButtonLeft">
29
                <button *ngIf="okDisabled" class="uk-button disabled uk-button-default ignoreCommunityPanelBackground" disabled>{{okButtonText}}</button>
30
                <button *ngIf="!okDisabled" [class.portal-button]="!isDashboard"
31
                        [class.uk-button-secondary]="isDashboard" [class.outlined]="isDashboard"
32
                      class="uk-button ignoreCommunityPanelBackground"
33
                      (click)="ok()">{{okButtonText}}</button>
34
              </span>
35
              <span [hidden]=!cancelButton>
36
                <button class="uk-button md-btn uk-button-default uk-margin-small-left"
37
                        (click)="cancel()">{{cancelButtonText}}</button>
38
              </span>
39
            </div>
40
          </div>
41
        </div>
42
      </div>
43
    </div>
44
  `,
45
  encapsulation: ViewEncapsulation.None,
46
})
47
/**
48
 * API to an open alert window.
49
 */
50
export class AlertModal {
51
  @Input() id: string = "modal";
52
  @Input() classTitle: string = "";
53
  @Input() classBody: string = "";
54
  @Input() large: boolean = false;
55
  isDashboard: boolean = properties.isDashboard;
56
  /**
57
   * Caption for the title.
58
   */
59
  public alertTitle: string;
60
  /**
61
   * Describes if the alert contains Ok Button.
62
   * The default Ok button will close the alert and emit the callback.
63
   * Defaults to true.
64
   */
65
  public okButton: boolean = true;
66
  /**
67
   * Caption for the OK button.
68
   * Default: Ok
69
   */
70
  public okButtonText: string = 'OK';
71
  /**
72
   * Describes if the alert contains cancel Button.
73
   * The default Cancelbutton will close the alert.
74
   * Defaults to true.
75
   */
76
  public cancelButton: boolean = true;
77
  /**
78
   * Caption for the Cancel button.
79
   * Default: Cancel
80
   */
81
  public cancelButtonText: string = 'Cancel';
82
  /**
83
   * if the alertMessage is true it will show the contentString inside alert body.
84
   */
85
  public alertMessage: boolean = true;
86
  /**
87
   * Some message/content can be set in message which will be shown in alert body.
88
   */
89
  public message: string;
90
  /**
91
   * if the value is true alert footer will be visible or else it will be hidden.
92
   */
93
  public alertFooter: boolean = true;
94
  /**
95
   * shows alert header if the value is true.
96
   */
97
  public alertHeader: boolean = true;
98
  /**
99
   *  if the value is true ok button align on the left, else on the right
100
   */
101
  public okButtonLeft: boolean = true;
102

    
103
  /**
104
   *  if the value is true ok button is disabled
105
   */
106
  @Input()
107
  public okDisabled: boolean = false;
108

    
109
  /**
110
   *  If the value is true, a checkbox option will be appeared on the right side of footer
111
   */
112
  @Input()
113
  public choice: boolean = false;
114

    
115
  /**
116
   * if the value is true then on ok clicked, modal will stay open.
117
   */
118
  public stayOpen: boolean = false;
119

    
120
  /**
121
   *  Value will be emitted if @choice is true
122
   */
123
  public select: boolean = false;
124
  /**
125
   * Emitted when a ok button was clicked
126
   * or when Ok method is called.
127
   */
128
  @Output() public alertOutput: EventEmitter<any> = new EventEmitter();
129

    
130
  @ViewChild('element') element: ElementRef;
131

    
132
  constructor() {
133
  }
134

    
135
  /**
136
   * Opens a alert window creating backdrop.
137
   */
138
  open() {
139
    UIkit.modal(this.element.nativeElement).show();
140
  }
141

    
142
  /**
143
   *  ok method closes the modal and emits modalOutput.
144
   */
145
  ok() {
146
    if (!this.stayOpen) {
147
      this.cancel();
148
    }
149
    if (!this.choice) {
150
      this.alertOutput.emit(true);
151
    } else {
152
      this.alertOutput.emit({
153
        value: true,
154
        choice: this.select
155
      });
156
    }
157
  }
158

    
159
  /**
160
   *  cancel method closes the modal.
161
   */
162
  cancel() {
163
    UIkit.modal(this.element.nativeElement).hide();
164
  }
165
}
(1-1/8)