* Suppress enter key action in critical forms (CC-39)

* Add spinner service
pull/43/head
HardiReady 2018-07-17 10:07:12 +02:00
parent 374e7df34d
commit f2e2133496
13 changed files with 68 additions and 50 deletions

View File

@ -98,7 +98,7 @@
<button mat-icon-button <button mat-icon-button
(click)="toggleSidebar()" (click)="toggleSidebar()"
*ngIf="showSidebarToggleBtn" *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 svgIcon="chevron-left" *ngIf="sidebarOpen">
</mat-icon> </mat-icon>
<mat-icon svgIcon="chevron-right" *ngIf="!sidebarOpen"> <mat-icon svgIcon="chevron-right" *ngIf="!sidebarOpen">

View File

@ -7,6 +7,7 @@ import {RouteConfig} from './app.config';
import {DOCUMENT} from '@angular/common'; import {DOCUMENT} from '@angular/common';
import {DomSanitizer} from '@angular/platform-browser'; import {DomSanitizer} from '@angular/platform-browser';
import {MatIconRegistry} from '@angular/material'; import {MatIconRegistry} from '@angular/material';
import {SpinnerService} from './services/user-interface/spinner/spinner.service';
declare function require(url: string); declare function require(url: string);
@ -51,17 +52,20 @@ export class AppComponent implements OnInit {
private router: Router, private router: Router,
private iconRegistry: MatIconRegistry, private iconRegistry: MatIconRegistry,
private sanitizer: DomSanitizer, private sanitizer: DomSanitizer,
private spinnerService: SpinnerService,
@Inject(DOCUMENT) private document) { @Inject(DOCUMENT) private document) {
this.initMaterialSvgIcons(); this.initMaterialSvgIcons();
this.spinnerService.spinnerActive.subscribe(active => this.toggleSpinner(active));
router.events.subscribe(event => { router.events.subscribe(event => {
if (event instanceof NavigationStart) { if (event instanceof NavigationStart) {
this.loading = true; this.spinnerService.activate();
} }
if (event instanceof NavigationEnd) { if (event instanceof NavigationEnd) {
const currentUrl = this.router.url; const currentUrl = this.router.url;
this.loading = false; this.spinnerService.deactivate();
// scroll to top on route from army overview to user detail and back // scroll to top on route from army overview to user detail and back
if (currentUrl.includes('/overview')) { if (currentUrl.includes('/overview')) {
this.scrollToTop(); this.scrollToTop();
@ -83,6 +87,10 @@ export class AppComponent implements OnInit {
}); });
} }
toggleSpinner(active){
this.loading = active;
}
initMaterialSvgIcons() { initMaterialSvgIcons() {
Object.keys(this.svgIcons).forEach(key => { Object.keys(this.svgIcons).forEach(key => {
const fileUri = '../assets/icon/' + this.svgIcons[key] + '.svg'; const fileUri = '../assets/icon/' + this.svgIcons[key] + '.svg';
@ -113,14 +121,14 @@ export class AppComponent implements OnInit {
logout() { logout() {
this.loginService.logout(); this.loginService.logout();
this.router.navigate([RouteConfig.overviewPath]); setTimeout(() => {
return false; this.router.navigate([RouteConfig.overviewPath]);
}, 500);
} }
scrollToTop() { scrollToTop() {
this.document.body.scrollTop = 0; // For Safari this.document.body.scrollTop = 0; // For Safari
this.document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera this.document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
} }
} }

View File

@ -25,6 +25,7 @@ import {CookieService} from 'ngx-cookie-service';
import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service'; import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service';
import {MaterialComponentsModule} from './material-components.module'; import {MaterialComponentsModule} from './material-components.module';
import {HttpClientModule} from '@angular/common/http'; import {HttpClientModule} from '@angular/common/http';
import {SpinnerService} from './services/user-interface/spinner/spinner.service';
@NgModule({ @NgModule({
imports: [SharedModule, BrowserModule, BrowserAnimationsModule, appRouting, HttpModule, HttpClientModule, imports: [SharedModule, BrowserModule, BrowserAnimationsModule, appRouting, HttpModule, HttpClientModule,
@ -49,7 +50,8 @@ import {HttpClientModule} from '@angular/common/http';
AppConfig, AppConfig,
routingProviders, routingProviders,
CookieService, CookieService,
SnackBarService SnackBarService,
SpinnerService
], ],
declarations: [ declarations: [
AppComponent, AppComponent,

View File

@ -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">Auszeichnung editieren</h3>
<h3 *ngIf="!decoration._id">Neue Auszeichnung hinzufügen</h3> <h3 *ngIf="!decoration._id">Neue Auszeichnung hinzufügen</h3>
@ -70,6 +70,7 @@
</button> </button>
<button id="save" <button id="save"
type="submit"
(click)="saveDecoration(fileInput)" (click)="saveDecoration(fileInput)"
class="btn btn-default" class="btn btn-default"
[disabled]="!form.valid"> [disabled]="!form.valid">

View File

@ -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">Rang editieren</h3>
<h3 *ngIf="!rank._id">Neuen Rang hinzufügen</h3> <h3 *ngIf="!rank._id">Neuen Rang hinzufügen</h3>
@ -51,6 +51,7 @@
</button> </button>
<button id="save" <button id="save"
type="submit"
(click)="saveRank(fileInput)" (click)="saveRank(fileInput)"
class="btn btn-default" class="btn btn-default"
[disabled]="!form.valid"> [disabled]="!form.valid">

View File

@ -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)
}
}

View File

@ -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">Squad editieren</h3>
<h3 *ngIf="!squad._id">Neues Squad hinzufügen</h3> <h3 *ngIf="!squad._id">Neues Squad hinzufügen</h3>
@ -51,6 +51,7 @@
</button> </button>
<button id="save" <button id="save"
type="submit"
(click)="saveSquad(fileInput)" (click)="saveSquad(fileInput)"
class="btn btn-default" class="btn btn-default"
[disabled]="!form.valid"> [disabled]="!form.valid">

View File

@ -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">Kampagne editieren</h3>
<h3 *ngIf="!campaign._id">Neue Kampagne hinzufügen</h3> <h3 *ngIf="!campaign._id">Neue Kampagne hinzufügen</h3>
@ -20,15 +20,10 @@
</button> </button>
<button id="save" <button id="save"
type="submit"
(click)="saveCampaign()" (click)="saveCampaign()"
class="btn btn-default" class="btn btn-default"
[disabled]="!form.valid"> [disabled]="!form.valid">
Bestätigen Bestätigen
</button> </button>
<span *ngIf="showErrorLabel"
class="center-block label label-danger" style="font-size: medium; padding: 2px; margin-top: 2px">
{{error}}
</span>
</form> </form>

View File

@ -4,6 +4,8 @@ import {NgForm} from '@angular/forms';
import {Subscription} from 'rxjs/Subscription'; import {Subscription} from 'rxjs/Subscription';
import {Campaign} from '../../../models/model-interfaces'; import {Campaign} from '../../../models/model-interfaces';
import {CampaignService} from '../../../services/logs/campaign.service'; 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({ @Component({
@ -15,24 +17,21 @@ export class CampaignSubmitComponent {
campaign: Campaign = {}; campaign: Campaign = {};
showErrorLabel = false;
error;
subscription: Subscription; subscription: Subscription;
@ViewChild(NgForm) form: NgForm; @ViewChild(NgForm) form: NgForm;
constructor(private route: ActivatedRoute, constructor(private route: ActivatedRoute,
private router: Router, private router: Router,
private campaignService: CampaignService) { private campaignService: CampaignService,
private snackBarService: SnackBarService) {
this.subscription = this.route.params this.subscription = this.route.params
.map(params => params['id']) .map(params => params['id'])
.filter(id => id !== undefined) .filter(id => id !== undefined)
.flatMap(id => this.campaignService.getCampaign(id)) .flatMap(id => this.campaignService.getCampaign(id))
.subscribe(campaign => { .subscribe(campaign => {
this.campaign = campaign; this.campaign = campaign;
}); });
} }
saveCampaign() { saveCampaign() {
@ -42,12 +41,10 @@ export class CampaignSubmitComponent {
if (this.campaign._id) { if (this.campaign._id) {
redirectSuccessUrl = '../' + redirectSuccessUrl; redirectSuccessUrl = '../' + redirectSuccessUrl;
} }
this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
this.router.navigate([redirectSuccessUrl + campaign._id], {relativeTo: this.route}); this.router.navigate([redirectSuccessUrl + campaign._id], {relativeTo: this.route});
}, },
error => { error => this.snackBarService.showError(error._body.error.message, 30000));
this.error = error._body.error.message;
this.showErrorLabel = true;
});
} }
cancel() { cancel() {

View File

@ -1,4 +1,4 @@
<form #form="ngForm" class="overview"> <form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
<h3>Schlacht bearbeiten</h3> <h3>Schlacht bearbeiten</h3>
<div class="form-group"> <div class="form-group">
@ -71,15 +71,10 @@
</button> </button>
<button id="save" <button id="save"
type="submit"
(click)="updateWar()" (click)="updateWar()"
class="btn btn-default" class="btn btn-default"
[disabled]="!form.valid"> [disabled]="!form.valid">
Bestätigen Bestätigen
</button> </button>
<span *ngIf="showErrorLabel"
class="center-block label label-danger" style="font-size: medium; padding: 2px; margin-top: 2px">
{{error}}
</span>
</form> </form>

View File

@ -5,6 +5,8 @@ import {WarService} from '../../../services/logs/war.service';
import {War} from '../../../models/model-interfaces'; import {War} from '../../../models/model-interfaces';
import {CampaignService} from '../../../services/logs/campaign.service'; import {CampaignService} from '../../../services/logs/campaign.service';
import {Subscription} from 'rxjs/Subscription'; import {Subscription} from 'rxjs/Subscription';
import {SnackBarService} from '../../../services/user-interface/snack-bar/snack-bar.service';
import {Message} from '../../../i18n/de.messages';
@Component({ @Component({
@ -19,15 +21,12 @@ export class WarEditComponent {
subscription: Subscription; subscription: Subscription;
showErrorLabel = false;
error;
@ViewChild(NgForm) form: NgForm; @ViewChild(NgForm) form: NgForm;
constructor(private route: ActivatedRoute, constructor(private route: ActivatedRoute,
private router: Router, private router: Router,
private warService: WarService, private warService: WarService,
private snackBarService: SnackBarService,
public campaignService: CampaignService) { public campaignService: CampaignService) {
this.subscription = this.route.params this.subscription = this.route.params
.map(params => params['id']) .map(params => params['id'])
@ -41,12 +40,10 @@ export class WarEditComponent {
updateWar() { updateWar() {
this.warService.updateWar(this.war) this.warService.updateWar(this.war)
.subscribe(war => { .subscribe(war => {
this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
this.router.navigate(['../../war/' + war._id], {relativeTo: this.route}); this.router.navigate(['../../war/' + war._id], {relativeTo: this.route});
}, },
error => { error => this.snackBarService.showError(error._body.error.message, 30000));
this.error = error._body.error.message;
this.showErrorLabel = true;
});
} }
cancel() { cancel() {

View File

@ -1,4 +1,4 @@
<form #form="ngForm" class="overview"> <form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
<h3>Neue Schlacht hinzufügen</h3> <h3>Neue Schlacht hinzufügen</h3>
<div class="form-group"> <div class="form-group">
@ -42,6 +42,7 @@
</button> </button>
<button id="save" <button id="save"
type="submit"
*ngIf="!loading" *ngIf="!loading"
(click)="saveWar()" (click)="saveWar()"
class="btn btn-default" class="btn btn-default"

View File

@ -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">Teilnehmer editieren</h3>
<h3 *ngIf="!user._id">Neuen Teilnehmer hinzufügen</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> <option *ngFor="let rank of ranks" [value]="rank.level">{{rank.name}}</option>
</select> </select>
<show-error displayName="Squad" controlPath="squad"></show-error> <show-error displayName="Rang" controlPath="rank"></show-error>
</div> </div>
<button id="cancel" <button id="cancel"
@ -51,6 +51,7 @@
</button> </button>
<button id="save" <button id="save"
type="submit"
(click)="saveUser(rankLevel.value)" (click)="saveUser(rankLevel.value)"
class="btn btn-default" class="btn btn-default"
[disabled]="!form.valid"> [disabled]="!form.valid">