webapp/src/app/pages/confirm/confirm-modal/confirm-modal.component.ts

   1 /**
   2 * @license
   3 * Copyright (C) 2017-2018 "IoT.bzh"
   4 * Author Sebastien Douheret <sebastien@iot.bzh>
   5 *
   6 * Licensed under the Apache License, Version 2.0 (the "License");
   7 * you may not use this file except in compliance with the License.
   8 * You may obtain a copy of the License at
   9 *
  10 *   http://www.apache.org/licenses/LICENSE-2.0
  11 *
  12 * Unless required by applicable law or agreed to in writing, software
  13 * distributed under the License is distributed on an "AS IS" BASIS,
  14 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15 * See the License for the specific language governing permissions and
  16 * limitations under the License.
  17 */
  18
  19 import { Component, OnInit, Input } from '@angular/core';
  20 import { DomSanitizer } from '@angular/platform-browser';
  21 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
  22
  23 export enum EType {
  24   YesNo = 1,
  25   OKCancel,
  26   OK,
  27   Cancel,
  28 }
  29
  30 @Component({
  31   selector: 'xds-confirm-modal',
  32   template: `
  33   <div tabindex="-1">
  34     <div class="modal-header">
  35       {{ title }}
  36     </div>
  37
  38     <div class="modal-body row">
  39       <div class="col-12 text-center">
  40         <div [innerHtml]="question"></div>
  41       </div>
  42       <div class="col-12 text-center" style="margin-top: 2em;">
  43         <button *ngIf="textBtn[0] != ''" type="button" class="btn btn-primary" tabindex="2"
  44           (click)="onClick(textBtn[0])">{{textBtn[0]}}</button>
  45         <button *ngIf="textBtn[1] != ''" type="button" class="btn btn-default" tabindex="1"
  46           (click)="onClick(textBtn[1])">{{textBtn[1]}}</button>
  47         <button *ngIf="textBtn[2] != ''" type="button" class="btn btn-default" tabindex="3"
  48           (click)="onClick(textBtn[2])">{{textBtn[2]}}</button>
  49       </div>
  50     </div>
  51
  52     <div *ngIf="footer!=''" class="modal-footer">
  53       <div class="col-12 text-center">
  54         <div [innerHtml]="footer"></div>
  55       </div>
  56     </div>
  57   </div>
  58   `,
  59 })
  60
  61 export class ConfirmModalComponent implements OnInit {
  62   @Input() title;
  63   @Input() footer = '';
  64   @Input() type;
  65   @Input() question;
  66
  67   bodyQuestion = '';
  68   textBtn: Array<string> = ['', '', ''];
  69
  70   constructor(
  71     private modalRef: NgbActiveModal,
  72     private sanitizer: DomSanitizer,
  73   ) { }
  74
  75   ngOnInit() {
  76     switch (this.type) {
  77       case EType.OK:
  78         this.textBtn = [ 'OK', '', '' ];
  79         break;
  80
  81       case EType.Cancel:
  82         this.textBtn = [ '', 'Cancel', '' ];
  83       break;
  84
  85       case EType.OKCancel:
  86         this.textBtn = [ 'OK', 'Cancel', '' ];
  87       break;
  88
  89       default:
  90       case EType.YesNo:
  91         this.textBtn = [ 'Yes', 'No', '' ];
  92         break;
  93     }
  94   }
  95
  96   onClick(txt: string): void {
  97     this.modalRef.close(txt.toLowerCase());
  98   }
  99 }