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 { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
  21
  22 export enum EType {
  23   YesNo = 1,
  24   OKCancel,
  25   OK,
  26   Cancel,
  27 }
  28
  29 @Component({
  30   selector: 'xds-confirm-modal',
  31   template: `
  32   <div tabindex="-1">
  33     <div class="modal-header">
  34       {{ title }}
  35     </div>
  36
  37     <div class="modal-body row">
  38       <div class="col-12 text-center">
  39         <div [innerHtml]="question"></div>
  40       </div>
  41       <div class="col-12 text-center" style="margin-top: 2em;">
  42         <button *ngIf="textBtn[0] != ''" type="button" class="btn btn-primary" tabindex="2"
  43           (click)="onClick(textBtn[0])">{{textBtn[0]}}</button>
  44         <button *ngIf="textBtn[1] != ''" type="button" class="btn btn-default" tabindex="1"
  45           (click)="onClick(textBtn[1])">{{textBtn[1]}}</button>
  46         <button *ngIf="textBtn[2] != ''" type="button" class="btn btn-default" tabindex="3"
  47           (click)="onClick(textBtn[2])">{{textBtn[2]}}</button>
  48       </div>
  49     </div>
  50
  51     <div *ngIf="footer!=''" class="modal-footer">
  52       <div class="col-12 text-center">
  53         <div [innerHtml]="footer"></div>
  54       </div>
  55     </div>
  56   </div>
  57   `,
  58 })
  59
  60 export class ConfirmModalComponent implements OnInit {
  61   @Input() title;
  62   @Input() footer = '';
  63   @Input() type;
  64   @Input() question;
  65
  66   bodyQuestion = '';
  67   textBtn: Array<string> = ['', '', ''];
  68
  69   constructor(
  70     private modalRef: NgbActiveModal,
  71   ) { }
  72
  73   ngOnInit() {
  74     switch (this.type) {
  75       case EType.OK:
  76         this.textBtn = [ 'OK', '', '' ];
  77         break;
  78
  79       case EType.Cancel:
  80         this.textBtn = [ '', 'Cancel', '' ];
  81       break;
  82
  83       case EType.OKCancel:
  84         this.textBtn = [ 'OK', 'Cancel', '' ];
  85       break;
  86
  87       default:
  88       case EType.YesNo:
  89         this.textBtn = [ 'Yes', 'No', '' ];
  90         break;
  91     }
  92   }
  93
  94   onClick(txt: string): void {
  95     this.modalRef.close(txt.toLowerCase());
  96   }
  97 }