Add angular material and use snackbar for user edit success msg

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",

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",

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';

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 {}

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 {Fraction} from '../../utils/fraction.enum';
-import {CSSHelpers} from "../../global.helpers";
+import {CSSHelpers} from '../../global.helpers';
-import {RouteConfig} from "../../app.config";
+import {RouteConfig} from '../../app.config';
-import {Decoration} from "../../models/model-interfaces";
+import {Decoration} from '../../models/model-interfaces';
-import {DecorationService} from "../../services/army-management/decoration.service";
+import {DecorationService} from '../../services/army-management/decoration.service';
 
 
 @Component({

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 {pubRouterModule, pubRoutingComponents} from './public.routing';
-import {DecorationService} from "../services/army-management/decoration.service";
+import {DecorationService} from '../services/army-management/decoration.service';
 
 @NgModule({
   declarations: pubRoutingComponents,

static/src/app/pub/public.routing.ts

@@ -1,8 +1,8 @@
-import {RouterModule, Routes} from "@angular/router";
+import {RouterModule, Routes} from '@angular/router';
-import {RankOverviewComponent} from "./rank-overview/rank-overview.component";
+import {RankOverviewComponent} from './rank-overview/rank-overview.component';
-import {ModuleWithProviders} from "@angular/core";
+import {ModuleWithProviders} from '@angular/core';
-import {DecorationOverviewComponent} from "./decoration-overview/decoration-overview.component";
+import {DecorationOverviewComponent} from './decoration-overview/decoration-overview.component';
-import {PublicComponent} from "./public.component";
+import {PublicComponent} from './public.component';
 
 export const publicRoutes: Routes = [
   {

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 {Fraction} from '../../utils/fraction.enum';
-import {CSSHelpers} from "../../global.helpers";
+import {CSSHelpers} from '../../global.helpers';
-import {RouteConfig} from "../../app.config";
+import {RouteConfig} from '../../app.config';
-import {Rank} from "../../models/model-interfaces";
+import {Rank} from '../../models/model-interfaces';
-import {RankService} from "../../services/army-management/rank.service";
+import {RankService} from '../../services/army-management/rank.service';
 
 
 @Component({

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],
+  declarations: [ShowErrorComponent, SnackBarComponent],
-  imports: [CommonModule, FormsModule, ReactiveFormsModule],
+  imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialComponentsModule],
-  exports: [FormsModule, ReactiveFormsModule, ShowErrorComponent]
+  exports: [FormsModule, ReactiveFormsModule, ShowErrorComponent],
+  entryComponents: [SnackBarComponent]
 })
 export class SharedModule {
 }

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;
+}

static/src/app/user-interface/snack-bar/snack-bar-message.html

@@ -0,0 +1,3 @@
+<div class="snack-bar-span">
+  Success!!!
+</div>

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 {}

static/src/app/users/edit-user/edit-user.component.html

@@ -62,10 +62,4 @@
     {{error}}
   </span>
 
-  <span *ngIf="showSuccessLabel"
-        class="label label-success label-small"
-        style="margin-left: inherit">
-    Erfolgreich gespeichert
-  </span>
-
 </form>

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;
+            this.snackBar.openFromComponent(SnackBarComponent, {duration: 2000});
-            setTimeout(() => {
-              this.showSuccessLabel = false;
-            }, 2000);
           });
     } else {
       this.userService.submitUser(updateObject)

static/src/styles.css

@@ -1,3 +1,5 @@
+@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";
+
 body {
   padding-top: 50px;
 }