From a89d473e6235e1dc265cbc3a1846baae1a3deebb Mon Sep 17 00:00:00 2001
From: kiswa <kiswa.com@gmail.com>
Date: Tue, 31 Jan 2017 23:57:57 +0000
Subject: [PATCH] Add default action attribute to modal

---
 .../settings/board-admin/board-admin.component.html    |  4 ++--
 src/app/settings/user-admin/user-admin.component.html  | 10 +++++++---
 src/app/shared/modal/modal.component.html              |  3 ++-
 src/app/shared/modal/modal.component.ts                |  8 ++++++++
 4 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/app/settings/board-admin/board-admin.component.html b/src/app/settings/board-admin/board-admin.component.html
index 8546e3d..004f0d8 100644
--- a/src/app/settings/board-admin/board-admin.component.html
+++ b/src/app/settings/board-admin/board-admin.component.html
@@ -135,7 +135,7 @@
         <button class="flat"
             (click)="removeBoard()"
             [disabled]="saving">Yes</button>
-        <button
+        <button #defaultAction
             (click)="modal.close(MODAL_CONFIRM_ID)"
             [disabled]="saving">No</button>
     </div>
@@ -272,7 +272,7 @@
     </div>
 
     <div class="buttons">
-        <button (click)="addEditBoard()" [disabled]="saving">
+        <button #defaultAction (click)="addEditBoard()" [disabled]="saving">
             <i class="icon"
                 [ngClass]="{ 'icon-plus': modalProps.title === 'Add', 'icon-floppy': modalProps.title !== 'Add' }"></i>
             {{ modalProps.title === 'Add' ? 'Add' : 'Save' }}
diff --git a/src/app/settings/user-admin/user-admin.component.html b/src/app/settings/user-admin/user-admin.component.html
index 588cb94..8da0fa1 100644
--- a/src/app/settings/user-admin/user-admin.component.html
+++ b/src/app/settings/user-admin/user-admin.component.html
@@ -33,6 +33,7 @@
                 </tr>
             </tbody>
         </table>
+
         <div *ngIf="loading" class="center">
             <div class="spinner"></div>
         </div>
@@ -48,8 +49,10 @@
     modal-id="{{ MODAL_CONFIRM_ID }}">
     <div class="center">Removing a user cannot be undone.<br>Continue?</div>
     <div class="buttons">
-        <button class="flat" (click)="removeUser()">Yes</button>
-        <button (click)="modal.close(MODAL_CONFIRM_ID)">No</button>
+        <button class="flat"
+            (click)="removeUser()">Yes</button>
+        <button #defaultAction
+            (click)="modal.close(MODAL_CONFIRM_ID)">No</button>
     </div>
 </tb-modal>
 
@@ -110,7 +113,8 @@
     </label>
 
     <div class="buttons">
-        <button (click)="addEditUser()" [disabled]="saving">
+        <button #defaultAction
+            (click)="addEditUser()" [disabled]="saving">
             <i class="icon"
                 [ngClass]="{ 'icon-plus': modalProps.prefix === '',
                     'icon-floppy': modalProps.prefix !== '' }"></i>
diff --git a/src/app/shared/modal/modal.component.html b/src/app/shared/modal/modal.component.html
index d1004c5..b09d87d 100644
--- a/src/app/shared/modal/modal.component.html
+++ b/src/app/shared/modal/modal.component.html
@@ -4,7 +4,8 @@
 
     <div class="modal"
         [ngClass]="{ wide: wide, animated: animate, 'modal-closed': !isOpen }"
-        (click)="filterClick($event)">
+        (click)="filterClick($event)"
+        (keyup.enter)="clickDefaultAction()">
         <div class="title" *ngIf="modalTitle">
             <h2>
                 {{ modalTitle }}
diff --git a/src/app/shared/modal/modal.component.ts b/src/app/shared/modal/modal.component.ts
index 27e13ed..965a205 100644
--- a/src/app/shared/modal/modal.component.ts
+++ b/src/app/shared/modal/modal.component.ts
@@ -19,6 +19,7 @@ export class Modal implements OnInit {
     @Input() wide = false;
 
     @ContentChild('focusMe') focusElement: any;
+    @ContentChild('defaultAction') defaulActionElement: any;
 
     isOpen = false;
     animate = true;
@@ -43,11 +44,18 @@ export class Modal implements OnInit {
     private filterClick(event: Event): void {
         event = event || window.event;
 
+        // Prevent click from propagating to modal container
         if (event.stopPropagation) {
             event.stopPropagation();
         } else {
             event.cancelBubble = true;
         }
     }
+
+    private clickDefaultAction(): void {
+        if (this.defaulActionElement) {
+            this.defaulActionElement.nativeElement.click();
+        }
+    }
 }