From f2e21334964f07de402e487fa1217e8d7006c3ed Mon Sep 17 00:00:00 2001
From: HardiReady <hardi@noarch.de>
Date: Tue, 17 Jul 2018 10:07:12 +0200
Subject: [PATCH] * Suppress enter key action in critical forms (CC-39) * Add
 spinner service

---
 static/src/app/app.component.html             |  2 +-
 static/src/app/app.component.ts               | 18 +++++++++----
 static/src/app/app.module.ts                  |  4 ++-
 .../edit-decoration.component.html            |  3 ++-
 .../ranks/edit-rank/edit-rank.component.html  |  3 ++-
 .../user-interface/spinner/spinner.service.ts | 19 +++++++++++++
 .../edit-squad/edit-squad.component.html      |  3 ++-
 .../campaign-submit.component.html            |  9 ++-----
 .../campaign-submit.component.ts              | 27 +++++++++----------
 .../war/war-edit/war-edit.component.html      |  9 ++-----
 .../war/war-edit/war-edit.component.ts        | 13 ++++-----
 .../war/war-submit/war-submit.component.html  |  3 ++-
 .../users/edit-user/edit-user.component.html  |  5 ++--
 13 files changed, 68 insertions(+), 50 deletions(-)
 create mode 100644 static/src/app/services/user-interface/spinner/spinner.service.ts

diff --git a/static/src/app/app.component.html b/static/src/app/app.component.html
index ba388f7..3e7b1f9 100644
--- a/static/src/app/app.component.html
+++ b/static/src/app/app.component.html
@@ -98,7 +98,7 @@
   <button mat-icon-button
           (click)="toggleSidebar()"
           *ngIf="showSidebarToggleBtn"
-          style="background: linear-gradient(-90deg, #e8e5e5,#ffffff);margin-left: -12px;">
+          style="background: linear-gradient(-90deg, #e8e5e5,#ffffff);margin-left: -12px;z-index:500;">
     <mat-icon svgIcon="chevron-left" *ngIf="sidebarOpen">
     </mat-icon>
     <mat-icon svgIcon="chevron-right" *ngIf="!sidebarOpen">
diff --git a/static/src/app/app.component.ts b/static/src/app/app.component.ts
index bdb5814..7743739 100644
--- a/static/src/app/app.component.ts
+++ b/static/src/app/app.component.ts
@@ -7,6 +7,7 @@ import {RouteConfig} from './app.config';
 import {DOCUMENT} from '@angular/common';
 import {DomSanitizer} from '@angular/platform-browser';
 import {MatIconRegistry} from '@angular/material';
+import {SpinnerService} from './services/user-interface/spinner/spinner.service';
 
 declare function require(url: string);
 
@@ -51,17 +52,20 @@ export class AppComponent implements OnInit {
               private router: Router,
               private iconRegistry: MatIconRegistry,
               private sanitizer: DomSanitizer,
+              private spinnerService: SpinnerService,
               @Inject(DOCUMENT) private document) {
     this.initMaterialSvgIcons();
 
+    this.spinnerService.spinnerActive.subscribe(active => this.toggleSpinner(active));
+
     router.events.subscribe(event => {
       if (event instanceof NavigationStart) {
-        this.loading = true;
+        this.spinnerService.activate();
       }
       if (event instanceof NavigationEnd) {
         const currentUrl = this.router.url;
 
-        this.loading = false;
+        this.spinnerService.deactivate();
         // scroll to top on route from army overview to user detail and back
         if (currentUrl.includes('/overview')) {
           this.scrollToTop();
@@ -83,6 +87,10 @@ export class AppComponent implements OnInit {
     });
   }
 
+  toggleSpinner(active){
+    this.loading = active;
+  }
+
   initMaterialSvgIcons() {
     Object.keys(this.svgIcons).forEach(key => {
       const fileUri = '../assets/icon/' + this.svgIcons[key] + '.svg';
@@ -113,14 +121,14 @@ export class AppComponent implements OnInit {
 
   logout() {
     this.loginService.logout();
-    this.router.navigate([RouteConfig.overviewPath]);
-    return false;
+    setTimeout(() => {
+      this.router.navigate([RouteConfig.overviewPath]);
+    }, 500);
   }
 
   scrollToTop() {
     this.document.body.scrollTop = 0; // For Safari
     this.document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
   }
-
 }
 
diff --git a/static/src/app/app.module.ts b/static/src/app/app.module.ts
index bf76ceb..10c897b 100644
--- a/static/src/app/app.module.ts
+++ b/static/src/app/app.module.ts
@@ -25,6 +25,7 @@ import {CookieService} from 'ngx-cookie-service';
 import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service';
 import {MaterialComponentsModule} from './material-components.module';
 import {HttpClientModule} from '@angular/common/http';
+import {SpinnerService} from './services/user-interface/spinner/spinner.service';
 
 @NgModule({
   imports: [SharedModule, BrowserModule, BrowserAnimationsModule, appRouting, HttpModule, HttpClientModule,
@@ -49,7 +50,8 @@ import {HttpClientModule} from '@angular/common/http';
     AppConfig,
     routingProviders,
     CookieService,
-    SnackBarService
+    SnackBarService,
+    SpinnerService
   ],
   declarations: [
     AppComponent,
diff --git a/static/src/app/decorations/edit-decoration/edit-decoration.component.html b/static/src/app/decorations/edit-decoration/edit-decoration.component.html
index ee704d0..3401d7f 100644
--- a/static/src/app/decorations/edit-decoration/edit-decoration.component.html
+++ b/static/src/app/decorations/edit-decoration/edit-decoration.component.html
@@ -1,4 +1,4 @@
-<form #form="ngForm" class="overview">
+<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
   <h3 *ngIf="decoration._id">Auszeichnung editieren</h3>
   <h3 *ngIf="!decoration._id">Neue Auszeichnung hinzufügen</h3>
 
@@ -70,6 +70,7 @@
   </button>
 
   <button id="save"
+          type="submit"
           (click)="saveDecoration(fileInput)"
           class="btn btn-default"
           [disabled]="!form.valid">
diff --git a/static/src/app/ranks/edit-rank/edit-rank.component.html b/static/src/app/ranks/edit-rank/edit-rank.component.html
index 7efdfda..9b0d94e 100644
--- a/static/src/app/ranks/edit-rank/edit-rank.component.html
+++ b/static/src/app/ranks/edit-rank/edit-rank.component.html
@@ -1,4 +1,4 @@
-<form #form="ngForm" class="overview">
+<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
   <h3 *ngIf="rank._id">Rang editieren</h3>
   <h3 *ngIf="!rank._id">Neuen Rang hinzufügen</h3>
 
@@ -51,6 +51,7 @@
   </button>
 
   <button id="save"
+          type="submit"
           (click)="saveRank(fileInput)"
           class="btn btn-default"
           [disabled]="!form.valid">
diff --git a/static/src/app/services/user-interface/spinner/spinner.service.ts b/static/src/app/services/user-interface/spinner/spinner.service.ts
new file mode 100644
index 0000000..e6fb326
--- /dev/null
+++ b/static/src/app/services/user-interface/spinner/spinner.service.ts
@@ -0,0 +1,19 @@
+import {EventEmitter, Injectable} from '@angular/core';
+
+@Injectable()
+export class SpinnerService {
+
+  public spinnerActive: EventEmitter<Boolean>;
+
+  constructor() {
+    this.spinnerActive = new EventEmitter();
+  }
+
+  activate() {
+    this.spinnerActive.emit(true)
+  }
+
+  deactivate() {
+    this.spinnerActive.emit(false)
+  }
+}
diff --git a/static/src/app/squads/edit-squad/edit-squad.component.html b/static/src/app/squads/edit-squad/edit-squad.component.html
index 126bc53..2f5b7a7 100644
--- a/static/src/app/squads/edit-squad/edit-squad.component.html
+++ b/static/src/app/squads/edit-squad/edit-squad.component.html
@@ -1,4 +1,4 @@
-<form #form="ngForm" class="overview">
+<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
   <h3 *ngIf="squad._id">Squad editieren</h3>
   <h3 *ngIf="!squad._id">Neues Squad hinzufügen</h3>
 
@@ -51,6 +51,7 @@
   </button>
 
   <button id="save"
+          type="submit"
           (click)="saveSquad(fileInput)"
           class="btn btn-default"
           [disabled]="!form.valid">
diff --git a/static/src/app/statistic/campaign/campaign-submit/campaign-submit.component.html b/static/src/app/statistic/campaign/campaign-submit/campaign-submit.component.html
index 4bd7b3d..56353ea 100644
--- a/static/src/app/statistic/campaign/campaign-submit/campaign-submit.component.html
+++ b/static/src/app/statistic/campaign/campaign-submit/campaign-submit.component.html
@@ -1,4 +1,4 @@
-<form #form="ngForm" class="overview">
+<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
   <h3 *ngIf="campaign._id">Kampagne editieren</h3>
   <h3 *ngIf="!campaign._id">Neue Kampagne hinzufügen</h3>
 
@@ -20,15 +20,10 @@
   </button>
 
   <button id="save"
+          type="submit"
           (click)="saveCampaign()"
           class="btn btn-default"
           [disabled]="!form.valid">
     Bestätigen
   </button>
-
-  <span *ngIf="showErrorLabel"
-        class="center-block label label-danger" style="font-size: medium; padding: 2px; margin-top: 2px">
-        {{error}}
-      </span>
-
 </form>
diff --git a/static/src/app/statistic/campaign/campaign-submit/campaign-submit.component.ts b/static/src/app/statistic/campaign/campaign-submit/campaign-submit.component.ts
index d7d38f3..31e3420 100644
--- a/static/src/app/statistic/campaign/campaign-submit/campaign-submit.component.ts
+++ b/static/src/app/statistic/campaign/campaign-submit/campaign-submit.component.ts
@@ -4,6 +4,8 @@ import {NgForm} from '@angular/forms';
 import {Subscription} from 'rxjs/Subscription';
 import {Campaign} from '../../../models/model-interfaces';
 import {CampaignService} from '../../../services/logs/campaign.service';
+import {Message} from '../../../i18n/de.messages';
+import {SnackBarService} from '../../../services/user-interface/snack-bar/snack-bar.service';
 
 
 @Component({
@@ -15,24 +17,21 @@ export class CampaignSubmitComponent {
 
   campaign: Campaign = {};
 
-  showErrorLabel = false;
-
-  error;
-
   subscription: Subscription;
 
   @ViewChild(NgForm) form: NgForm;
 
   constructor(private route: ActivatedRoute,
               private router: Router,
-              private campaignService: CampaignService) {
+              private campaignService: CampaignService,
+              private snackBarService: SnackBarService) {
     this.subscription = this.route.params
-      .map(params => params['id'])
-      .filter(id => id !== undefined)
-      .flatMap(id => this.campaignService.getCampaign(id))
-      .subscribe(campaign => {
-        this.campaign = campaign;
-      });
+                            .map(params => params['id'])
+                            .filter(id => id !== undefined)
+                            .flatMap(id => this.campaignService.getCampaign(id))
+                            .subscribe(campaign => {
+                              this.campaign = campaign;
+                            });
   }
 
   saveCampaign() {
@@ -42,12 +41,10 @@ export class CampaignSubmitComponent {
             if (this.campaign._id) {
               redirectSuccessUrl = '../' + redirectSuccessUrl;
             }
+            this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
             this.router.navigate([redirectSuccessUrl + campaign._id], {relativeTo: this.route});
           },
-          error => {
-            this.error = error._body.error.message;
-            this.showErrorLabel = true;
-          });
+          error => this.snackBarService.showError(error._body.error.message, 30000));
   }
 
   cancel() {
diff --git a/static/src/app/statistic/war/war-edit/war-edit.component.html b/static/src/app/statistic/war/war-edit/war-edit.component.html
index ff08c34..eb1f5a0 100644
--- a/static/src/app/statistic/war/war-edit/war-edit.component.html
+++ b/static/src/app/statistic/war/war-edit/war-edit.component.html
@@ -1,4 +1,4 @@
-<form #form="ngForm" class="overview">
+<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
   <h3>Schlacht bearbeiten</h3>
 
   <div class="form-group">
@@ -71,15 +71,10 @@
   </button>
 
   <button id="save"
+          type="submit"
           (click)="updateWar()"
           class="btn btn-default"
           [disabled]="!form.valid">
     Bestätigen
   </button>
-
-  <span *ngIf="showErrorLabel"
-        class="center-block label label-danger" style="font-size: medium; padding: 2px; margin-top: 2px">
-        {{error}}
-      </span>
-
 </form>
diff --git a/static/src/app/statistic/war/war-edit/war-edit.component.ts b/static/src/app/statistic/war/war-edit/war-edit.component.ts
index e84e42b..634d3fa 100644
--- a/static/src/app/statistic/war/war-edit/war-edit.component.ts
+++ b/static/src/app/statistic/war/war-edit/war-edit.component.ts
@@ -5,6 +5,8 @@ import {WarService} from '../../../services/logs/war.service';
 import {War} from '../../../models/model-interfaces';
 import {CampaignService} from '../../../services/logs/campaign.service';
 import {Subscription} from 'rxjs/Subscription';
+import {SnackBarService} from '../../../services/user-interface/snack-bar/snack-bar.service';
+import {Message} from '../../../i18n/de.messages';
 
 
 @Component({
@@ -19,15 +21,12 @@ export class WarEditComponent {
 
   subscription: Subscription;
 
-  showErrorLabel = false;
-
-  error;
-
   @ViewChild(NgForm) form: NgForm;
 
   constructor(private route: ActivatedRoute,
               private router: Router,
               private warService: WarService,
+              private snackBarService: SnackBarService,
               public campaignService: CampaignService) {
     this.subscription = this.route.params
                             .map(params => params['id'])
@@ -41,12 +40,10 @@ export class WarEditComponent {
   updateWar() {
     this.warService.updateWar(this.war)
         .subscribe(war => {
+            this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
             this.router.navigate(['../../war/' + war._id], {relativeTo: this.route});
           },
-          error => {
-            this.error = error._body.error.message;
-            this.showErrorLabel = true;
-          });
+          error => this.snackBarService.showError(error._body.error.message, 30000));
   }
 
   cancel() {
diff --git a/static/src/app/statistic/war/war-submit/war-submit.component.html b/static/src/app/statistic/war/war-submit/war-submit.component.html
index 5d6138c..2708d55 100644
--- a/static/src/app/statistic/war/war-submit/war-submit.component.html
+++ b/static/src/app/statistic/war/war-submit/war-submit.component.html
@@ -1,4 +1,4 @@
-<form #form="ngForm" class="overview">
+<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
   <h3>Neue Schlacht hinzufügen</h3>
 
   <div class="form-group">
@@ -42,6 +42,7 @@
   </button>
 
   <button id="save"
+          type="submit"
           *ngIf="!loading"
           (click)="saveWar()"
           class="btn btn-default"
diff --git a/static/src/app/users/edit-user/edit-user.component.html b/static/src/app/users/edit-user/edit-user.component.html
index a14d701..895066c 100644
--- a/static/src/app/users/edit-user/edit-user.component.html
+++ b/static/src/app/users/edit-user/edit-user.component.html
@@ -1,4 +1,4 @@
-<form #form="ngForm" class="overview">
+<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
   <h3 *ngIf="user._id">Teilnehmer editieren</h3>
   <h3 *ngIf="!user._id">Neuen Teilnehmer hinzufügen</h3>
 
@@ -41,7 +41,7 @@
       <option *ngFor="let rank of ranks" [value]="rank.level">{{rank.name}}</option>
     </select>
 
-    <show-error displayName="Squad" controlPath="squad"></show-error>
+    <show-error displayName="Rang" controlPath="rank"></show-error>
   </div>
 
   <button id="cancel"
@@ -51,6 +51,7 @@
   </button>
 
   <button id="save"
+          type="submit"
           (click)="saveUser(rankLevel.value)"
           class="btn btn-default"
           [disabled]="!form.valid">