From 10784f55f4c39175816db4572e04616c1443f5be Mon Sep 17 00:00:00 2001 From: HardiReady Date: Fri, 29 Jun 2018 22:20:30 +0200 Subject: [PATCH] Add angular material and use snackbar for user edit success msg --- static/package-lock.json | 16 ++++++ static/package.json | 2 + static/src/app/app.module.ts | 2 +- .../modules/material-components.module.ts | 52 +++++++++++++++++++ .../decoration-overview.component.ts | 10 ++-- static/src/app/pub/public.module.ts | 4 +- static/src/app/pub/public.routing.ts | 10 ++-- .../rank-overview/rank-overview.component.ts | 10 ++-- static/src/app/shared.module.ts | 9 ++-- .../snack-bar/snack-bar-message.css | 5 ++ .../snack-bar/snack-bar-message.html | 3 ++ .../snack-bar/snack-bar.component.ts | 8 +++ .../users/edit-user/edit-user.component.html | 6 --- .../users/edit-user/edit-user.component.ts | 10 ++-- static/src/styles.css | 2 + 15 files changed, 117 insertions(+), 32 deletions(-) create mode 100644 static/src/app/common/modules/material-components.module.ts create mode 100644 static/src/app/user-interface/snack-bar/snack-bar-message.css create mode 100644 static/src/app/user-interface/snack-bar/snack-bar-message.html create mode 100644 static/src/app/user-interface/snack-bar/snack-bar.component.ts diff --git a/static/package-lock.json b/static/package-lock.json index 04bda7c..eabdd52 100644 --- a/static/package-lock.json +++ b/static/package-lock.json @@ -41,6 +41,14 @@ "tslib": "1.8.0" } }, + "@angular/cdk": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-5.0.0.tgz", + "integrity": "sha512-+u67Bns23tuCUGUCWhqkR/+onCwB4ObRURUv7ar2+BHw5VIvzML+IOCi1BJRF7gqvL+IVYQpLuY2cQh0J2SbBQ==", + "requires": { + "tslib": "1.8.0" + } + }, "@angular/cli": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-1.5.0.tgz", @@ -156,6 +164,14 @@ "tslib": "1.8.0" } }, + "@angular/material": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-5.0.0.tgz", + "integrity": "sha512-rzF061r4aYgaf2WI12Jk0+Rd4c1VBObdeMDFWRa3XKIcvETtkz+DXFH1n+vIC4YabfPgrdJRPrzdrZ7fKhRz6g==", + "requires": { + "tslib": "1.8.0" + } + }, "@angular/platform-browser": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.0.1.tgz", diff --git a/static/package.json b/static/package.json index 3470c14..1c31f5a 100644 --- a/static/package.json +++ b/static/package.json @@ -16,6 +16,7 @@ }, "dependencies": { "@angular/animations": "^5.0.0", + "@angular/cdk": "^5.0.0", "@angular/cli": "^1.5.0", "@angular/common": "^5.0.0", "@angular/compiler": "^5.0.0", @@ -23,6 +24,7 @@ "@angular/core": "^5.0.0", "@angular/forms": "^5.0.0", "@angular/http": "^5.0.0", + "@angular/material": "^5.0.0", "@angular/platform-browser": "^5.0.0", "@angular/platform-browser-dynamic": "^5.0.0", "@angular/router": "^5.0.0", diff --git a/static/src/app/app.module.ts b/static/src/app/app.module.ts index e8cfb5d..63d8a32 100644 --- a/static/src/app/app.module.ts +++ b/static/src/app/app.module.ts @@ -11,7 +11,7 @@ import {DecorationService} from './services/army-management/decoration.service'; import {RankStore} from './services/stores/rank.store'; import {RankService} from './services/army-management/rank.service'; import {AppConfig} from './app.config'; -import {LoginGuardAdmin, LoginGuardHL, LoginGuardSQL} from './login/login.guard'; +import {LoginGuardAdmin, LoginGuardHL, LoginGuardSQL} from './login'; import {AwardingService} from './services/army-management/awarding.service'; import {HttpClient} from './services/http-client'; import {ArmyService} from './services/army-service/army.service'; diff --git a/static/src/app/common/modules/material-components.module.ts b/static/src/app/common/modules/material-components.module.ts new file mode 100644 index 0000000..3ace341 --- /dev/null +++ b/static/src/app/common/modules/material-components.module.ts @@ -0,0 +1,52 @@ +/** + * Angular material imports + */ + +import { NgModule } from '@angular/core'; +import { + MatSidenavModule, + MatFormFieldModule, + MatInputModule, + MatButtonModule, + MatCheckboxModule, + MatTableModule, + MatPaginatorModule, + MatSortModule, + MatIconModule, + MatSnackBarModule, + MatToolbarModule, + MatExpansionModule +} from '@angular/material'; + +@NgModule({ + imports: [ + MatSidenavModule, + MatFormFieldModule, + MatInputModule, + MatButtonModule, + MatCheckboxModule, + MatTableModule, + MatPaginatorModule, + MatSortModule, + MatIconModule, + MatSnackBarModule, + MatToolbarModule, + MatExpansionModule + ], + exports: [ + MatSidenavModule, + MatFormFieldModule, + MatInputModule, + MatButtonModule, + MatCheckboxModule, + MatTableModule, + MatPaginatorModule, + MatSortModule, + MatIconModule, + MatSnackBarModule, + MatToolbarModule, + MatExpansionModule + ] +}) + +export class MaterialComponentsModule {} diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.ts b/static/src/app/pub/decoration-overview/decoration-overview.component.ts index 053f97e..2c546dc 100644 --- a/static/src/app/pub/decoration-overview/decoration-overview.component.ts +++ b/static/src/app/pub/decoration-overview/decoration-overview.component.ts @@ -2,11 +2,11 @@ import {Component, Inject, OnDestroy, OnInit} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; import {DOCUMENT} from '@angular/common'; -import {Fraction} from "../../utils/fraction.enum"; -import {CSSHelpers} from "../../global.helpers"; -import {RouteConfig} from "../../app.config"; -import {Decoration} from "../../models/model-interfaces"; -import {DecorationService} from "../../services/army-management/decoration.service"; +import {Fraction} from '../../utils/fraction.enum'; +import {CSSHelpers} from '../../global.helpers'; +import {RouteConfig} from '../../app.config'; +import {Decoration} from '../../models/model-interfaces'; +import {DecorationService} from '../../services/army-management/decoration.service'; @Component({ diff --git a/static/src/app/pub/public.module.ts b/static/src/app/pub/public.module.ts index 8cdfa5c..284b0ec 100644 --- a/static/src/app/pub/public.module.ts +++ b/static/src/app/pub/public.module.ts @@ -3,8 +3,8 @@ import {SharedModule} from '../shared.module'; import {CommonModule} from '@angular/common'; import {RankService} from '../services/army-management/rank.service'; import {ButtonsModule} from 'ngx-bootstrap'; -import {pubRouterModule, pubRoutingComponents} from "./public.routing"; -import {DecorationService} from "../services/army-management/decoration.service"; +import {pubRouterModule, pubRoutingComponents} from './public.routing'; +import {DecorationService} from '../services/army-management/decoration.service'; @NgModule({ declarations: pubRoutingComponents, diff --git a/static/src/app/pub/public.routing.ts b/static/src/app/pub/public.routing.ts index 119f0f6..60d6853 100644 --- a/static/src/app/pub/public.routing.ts +++ b/static/src/app/pub/public.routing.ts @@ -1,8 +1,8 @@ -import {RouterModule, Routes} from "@angular/router"; -import {RankOverviewComponent} from "./rank-overview/rank-overview.component"; -import {ModuleWithProviders} from "@angular/core"; -import {DecorationOverviewComponent} from "./decoration-overview/decoration-overview.component"; -import {PublicComponent} from "./public.component"; +import {RouterModule, Routes} from '@angular/router'; +import {RankOverviewComponent} from './rank-overview/rank-overview.component'; +import {ModuleWithProviders} from '@angular/core'; +import {DecorationOverviewComponent} from './decoration-overview/decoration-overview.component'; +import {PublicComponent} from './public.component'; export const publicRoutes: Routes = [ { diff --git a/static/src/app/pub/rank-overview/rank-overview.component.ts b/static/src/app/pub/rank-overview/rank-overview.component.ts index 96e2b5e..26c39cd 100644 --- a/static/src/app/pub/rank-overview/rank-overview.component.ts +++ b/static/src/app/pub/rank-overview/rank-overview.component.ts @@ -2,11 +2,11 @@ import {Component, Inject, OnDestroy, OnInit} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; import {DOCUMENT} from '@angular/common'; -import {Fraction} from "../../utils/fraction.enum"; -import {CSSHelpers} from "../../global.helpers"; -import {RouteConfig} from "../../app.config"; -import {Rank} from "../../models/model-interfaces"; -import {RankService} from "../../services/army-management/rank.service"; +import {Fraction} from '../../utils/fraction.enum'; +import {CSSHelpers} from '../../global.helpers'; +import {RouteConfig} from '../../app.config'; +import {Rank} from '../../models/model-interfaces'; +import {RankService} from '../../services/army-management/rank.service'; @Component({ diff --git a/static/src/app/shared.module.ts b/static/src/app/shared.module.ts index 81f00d7..f9788b6 100644 --- a/static/src/app/shared.module.ts +++ b/static/src/app/shared.module.ts @@ -2,11 +2,14 @@ import {NgModule} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {ShowErrorComponent} from './common/show-error/show-error.component'; import {CommonModule} from '@angular/common'; +import {MaterialComponentsModule} from './common/modules/material-components.module'; +import {SnackBarComponent} from './user-interface/snack-bar/snack-bar.component'; @NgModule({ - declarations: [ShowErrorComponent], - imports: [CommonModule, FormsModule, ReactiveFormsModule], - exports: [FormsModule, ReactiveFormsModule, ShowErrorComponent] + declarations: [ShowErrorComponent, SnackBarComponent], + imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialComponentsModule], + exports: [FormsModule, ReactiveFormsModule, ShowErrorComponent], + entryComponents: [SnackBarComponent] }) export class SharedModule { } diff --git a/static/src/app/user-interface/snack-bar/snack-bar-message.css b/static/src/app/user-interface/snack-bar/snack-bar-message.css new file mode 100644 index 0000000..0d38150 --- /dev/null +++ b/static/src/app/user-interface/snack-bar/snack-bar-message.css @@ -0,0 +1,5 @@ +.snack-bar-span { + text-align: center; + font-weight: 700; + color: #00d100; +} diff --git a/static/src/app/user-interface/snack-bar/snack-bar-message.html b/static/src/app/user-interface/snack-bar/snack-bar-message.html new file mode 100644 index 0000000..b0b9536 --- /dev/null +++ b/static/src/app/user-interface/snack-bar/snack-bar-message.html @@ -0,0 +1,3 @@ +
+ Success!!! +
diff --git a/static/src/app/user-interface/snack-bar/snack-bar.component.ts b/static/src/app/user-interface/snack-bar/snack-bar.component.ts new file mode 100644 index 0000000..3728f57 --- /dev/null +++ b/static/src/app/user-interface/snack-bar/snack-bar.component.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + +@Component({ + selector: 'snack-bar-message', + templateUrl: 'snack-bar-message.html', + styleUrls: ['snack-bar-message.css'], +}) +export class SnackBarComponent {} 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 e787a4f..0186196 100644 --- a/static/src/app/users/edit-user/edit-user.component.html +++ b/static/src/app/users/edit-user/edit-user.component.html @@ -62,10 +62,4 @@ {{error}} - - Erfolgreich gespeichert - - diff --git a/static/src/app/users/edit-user/edit-user.component.ts b/static/src/app/users/edit-user/edit-user.component.ts index 1cad7ae..f12aec0 100644 --- a/static/src/app/users/edit-user/edit-user.component.ts +++ b/static/src/app/users/edit-user/edit-user.component.ts @@ -7,6 +7,8 @@ import {RankService} from '../../services/army-management/rank.service'; import {Subscription} from 'rxjs/Subscription'; import {NgForm} from '@angular/forms'; import {Fraction} from '../../utils/fraction.enum'; +import {MatSnackBar} from '@angular/material/snack-bar'; +import {SnackBarComponent} from '../../user-interface/snack-bar/snack-bar.component'; @Component({ @@ -39,7 +41,8 @@ export class EditUserComponent implements OnInit { private route: ActivatedRoute, private userService: UserService, private squadService: SquadService, - private rankService: RankService) { + private rankService: RankService, + private snackBar: MatSnackBar) { } ngOnInit() { @@ -101,10 +104,7 @@ export class EditUserComponent implements OnInit { user.squad = '0'; } this.user = user; - this.showSuccessLabel = true; - setTimeout(() => { - this.showSuccessLabel = false; - }, 2000); + this.snackBar.openFromComponent(SnackBarComponent, {duration: 2000}); }); } else { this.userService.submitUser(updateObject) diff --git a/static/src/styles.css b/static/src/styles.css index ab03687..b52b6f0 100644 --- a/static/src/styles.css +++ b/static/src/styles.css @@ -1,3 +1,5 @@ +@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"; + body { padding-top: 50px; }