From d26d293e68c9b40aec71e11025fbfe9114638641 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20G=C3=BCnther?= <mail@oliverguenther.de>
Date: Wed, 20 Mar 2019 08:49:33 +0100
Subject: [PATCH] Add loading indicator to add new board modal

---
 .../new-board-modal/new-board-modal.component.ts  | 15 ++++++++++++++-
 .../boards/new-board-modal/new-board-modal.html   |  8 ++++++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/modules/boards/new-board-modal/new-board-modal.component.ts b/frontend/src/app/modules/boards/new-board-modal/new-board-modal.component.ts
index 530b69028d..53d3ff2bdb 100644
--- a/frontend/src/app/modules/boards/new-board-modal/new-board-modal.component.ts
+++ b/frontend/src/app/modules/boards/new-board-modal/new-board-modal.component.ts
@@ -36,6 +36,8 @@ import {StateService} from "@uirouter/core";
 import {BoardService} from "core-app/modules/boards/board/board.service";
 import {BoardCacheService} from "core-app/modules/boards/board/board-cache.service";
 import {BoardActionsRegistryService} from "core-app/modules/boards/board/board-actions/board-actions-registry.service";
+import {LoadingIndicatorService} from "core-app/modules/common/loading-indicator/loading-indicator.service";
+import {WorkPackageNotificationService} from "core-components/wp-edit/wp-notification.service";
 
 @Component({
   templateUrl: './new-board-modal.html'
@@ -49,6 +51,8 @@ export class NewBoardModalComponent extends OpModalComponent {
 
   public available = this.boardActions.available();
 
+  public inFlight = false;
+
   public text:any = {
     title: this.I18n.t('js.boards.new_board'),
     button_continue: this.I18n.t('js.button_continue'),
@@ -72,6 +76,8 @@ export class NewBoardModalComponent extends OpModalComponent {
               readonly boardService:BoardService,
               readonly boardActions:BoardActionsRegistryService,
               readonly boardCache:BoardCacheService,
+              readonly wpNotifications:WorkPackageNotificationService,
+              readonly loadingIndicatorService:LoadingIndicatorService,
               readonly I18n:I18nService) {
 
     super(locals, cdRef, elementRef);
@@ -86,12 +92,19 @@ export class NewBoardModalComponent extends OpModalComponent {
   }
 
   private create(params:{ type:BoardType, attribute?:string }) {
-    this.boardService
+    this.inFlight = true;
+
+    this.loadingIndicatorService.modal.promise = this.boardService
       .create(params)
       .then((board) => {
+        this.inFlight = false;
         this.closeMe();
         this.boardCache.update(board);
         this.state.go('boards.show', { board_id: board.id, isNew: true });
+      })
+      .catch((error:unknown) => {
+        this.inFlight = false;
+        this.wpNotifications.handleRawError(error);
       });
   }
 }
diff --git a/frontend/src/app/modules/boards/new-board-modal/new-board-modal.html b/frontend/src/app/modules/boards/new-board-modal/new-board-modal.html
index a40efa3e65..8a85502c4a 100644
--- a/frontend/src/app/modules/boards/new-board-modal/new-board-modal.html
+++ b/frontend/src/app/modules/boards/new-board-modal/new-board-modal.html
@@ -18,7 +18,9 @@
         <h3 [textContent]="text.free_board"></h3>
         <p [textContent]="text.free_board_text"></p>
 
-        <button class="button" (accessibleClick)="createFree()">
+        <button class="button"
+                [disabled]="inFlight"
+                (accessibleClick)="createFree()">
           <op-icon icon-classes="icon4 icon-add"></op-icon>
           <span [textContent]="text.free_board"></span>
         </button>
@@ -40,7 +42,9 @@
           </div>
         </div>
 
-        <button class="button" (accessibleClick)="createAction()">
+        <button class="button"
+                [disabled]="inFlight"
+                (accessibleClick)="createAction()">
           <op-icon icon-classes="icon4 icon-add"></op-icon>
           <span [textContent]="text.action_board"></span>
         </button>