Finish user awarding

static/src/app/services/awarding-service/awarding.service.ts

@@ -20,6 +20,7 @@ export class AwardingService {
    */
   getUserAwardings(userId: string) {
     return this.http.get(this.config.apiUrl + this.config.apiAwardPath + '?userId=' + userId)
+      .map(res => res.json())
   }
 
   addAwarding(award) {

static/src/app/users/user-award/user-award.component.css

@@ -13,11 +13,32 @@
 }
 
 .table-container {
+  margin-top: 40px;
   overflow-x: auto;
-  width: 250%;
-  margin-top: 50px
+  width: 50%;
+}
+
+.overview {
+  position: fixed;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  width: 100%;
+  border-left: thin solid lightgrey;
+  padding-left: 50px;
+  padding-top: 20px;
+  margin-left: 10px;
+  height: 100vh;
+}
+
+.form-group {
+  width: 25%;
 }
 
 h3 {
   margin-bottom: 20px;
+  margin-left: -20px;
+}
+
+label {
+  display: block;
 }

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

@@ -56,18 +56,24 @@
     Bestätigen
   </button>
 
+  <span *ngIf="showSuccessLabel"
+        class="label label-success label-small"
+        style="margin-left: inherit">
+        Erfolgreich gespeichert
+  </span>
+
   <div class="table-container">
-    <table class="table table-hover table-striped">
+    <table class="table table-hover">
       <thead>
       <tr>
-        <th class="col-sm-1">Bild</th>
+        <th class="col-sm-1" style="width: 60px;">Bild</th>
         <th class="col-sm-2">Bezeichnung</th>
-        <th class="col-sm-3">Begründung</th>
-        <th class="col-sm-1 text-right">Datum</th>
+        <th class="col-sm-2">Begründung</th>
+        <th class="col-sm-1 text-right" style="width: 65px;">Datum</th>
         <th class="col-sm-1 text-center" style="width: 45px;"></th>
       </tr>
       </thead>
-      <tbody *ngFor="let award of user.awards">
+      <tbody *ngFor="let award of awards">
       <tr>
         <td class="table-cell-id" *ngIf="award.decorationId.isMedal">
           <img height="40px" src="resource/decoration/{{award.decorationId._id}}.png">

static/src/app/users/user-award/user-award.component.ts

@@ -1,9 +1,6 @@
 import {Component, ViewChild} from "@angular/core";
 import {ActivatedRoute, Router} from "@angular/router";
-import * as model from "../../models/model-interfaces";
-import {Decoration, Squad, User} from "../../models/model-interfaces";
-import {UserService} from "../../services/user-service/user.service";
-import {Subscription} from "rxjs";
+import {Award, Decoration} from "../../models/model-interfaces";
 import {NgForm} from "@angular/forms";
 import {AwardingService} from "../../services/awarding-service/awarding.service";
 import {DecorationService} from "../../services/decoration-service/decoration.service";
@@ -11,91 +8,44 @@ import {DecorationService} from "../../services/decoration-service/decoration.se
 
 @Component({
   templateUrl: './user-award.component.html',
-  styleUrls: ['./user-award.component.css', '../../style/new-entry-form.css'],
+  styleUrls: ['./user-award.component.css'],
 })
 export class UserAwardComponent {
 
   @ViewChild(NgForm) form: NgForm;
 
-  subscription: Subscription;
-
   showSuccessLabel = false;
 
-  user: User = {};
+  userId: string;
 
   decorations: Decoration[];
 
-  award: { decorationId: '', reason: '' };
-
-  saved = false;
+  awards: Award[];
 
   decoPreviewDisplay = 'none';
 
   constructor(private router: Router,
               private route: ActivatedRoute,
-              private userService: UserService,
               private awardingService: AwardingService,
               private decorationService: DecorationService) {
   }
 
   ngOnInit() {
 
-    this.subscription = this.route.params
-      .map(params => params['id'])
-      .filter(id => id != undefined)
-      .flatMap(id => this.userService.getUser(id))
-      .subscribe(user => {
-        this.user = user;
-      });
-
     this.decorationService.findDecorations().subscribe(decorations => {
       this.decorations = decorations;
     });
-  }
 
-  ngOnDestroy() {
-    this.subscription.unsubscribe();
-  }
+    this.route.params
+      .map(params => params['id'])
+      .flatMap(id => this.awardingService.getUserAwardings(id))
+      .subscribe(awards => {
+        this.awards = awards;
+      });
 
-  saveUser(rankLevel) {
-    const updateObject = {
-      _id: this.user._id,
-      username: this.user.username,
-      squadId: this.user.squad._id,
-      rankLvl: rankLevel
-    };
-    this.userService.updateUser(updateObject)
-      .subscribe(user => {
-        this.user = user;
-        this.showSuccessLabel = true;
-        setTimeout(() => {
-          this.showSuccessLabel = false;
-        }, 2000)
-      })
-  }
-
-
-  cancel() {
-    this.router.navigate(['../..'], {relativeTo: this.route});
-    return false;
-  }
-
-  /**
-   * compare ngValue with ngModel to assign selected element
-   */
-  equals(o1: Squad, o2: Squad) {
-    if (o1 && o2) {
-      return o1._id === o2._id;
-    }
-  }
-
-  deleteUser(confirm) {
-    if (confirm.toLowerCase() === this.user.username.toLocaleLowerCase()) {
-      this.userService.deleteUser(this.user)
-        .subscribe((res) => {
-          this.router.navigate(['../..'], {relativeTo: this.route});
-        })
-    }
+    this.route.params
+      .map(params => params['id'])
+      .subscribe(id => this.userId = id)
   }
 
 
@@ -111,40 +61,23 @@ export class UserAwardComponent {
 
   }
 
-  deleteAwarding(awardingId) {
-    this.awardingService.deleteAwarding(awardingId).subscribe((res) => {
-      this.awardingService.getUserAwardings(this.user._id)
-        .map((res) => res.json())
-        .subscribe((awards) => {
-          this.user.awards = awards;
-          this.showSuccessLabel = true;
-          setTimeout(() => {
-            this.showSuccessLabel = false;
-          }, 2000)
-        })
-    })
-  }
-
   addAwarding(decorationField, reasonField, previewImage, descriptionField) {
     const decorationId = decorationField.value;
     const reason = reasonField.value;
     if (decorationId && reason.length > 0) {
       const award = {
-        "userId": this.user._id,
+        "userId": this.userId,
         "decorationId": decorationId,
         "reason": reason,
         "date": Date.now()
       };
       this.awardingService.addAwarding(award).subscribe(() => {
-        this.awardingService.getUserAwardings(this.user._id)
-          .map((res) => res.json())
+        this.awardingService.getUserAwardings(this.userId)
           .subscribe(awards => {
-            this.user.awards = awards;
+            this.awards = awards;
             this.decoPreviewDisplay = 'none';
             decorationField.value = undefined;
-            reasonField.value = '';
-            previewImage.src = '';
-            descriptionField.innerHTML = '';
+            reasonField.value = previewImage.src = descriptionField.innerHTML = '';
             this.showSuccessLabel = true;
             setTimeout(() => {
               this.showSuccessLabel = false;
@@ -154,12 +87,22 @@ export class UserAwardComponent {
     }
   }
 
-
-  canDeactivate(): boolean {
-    if (this.saved || !this.form.dirty) {
-      return true;
+  deleteAwarding(awardingId) {
+    this.awardingService.deleteAwarding(awardingId).subscribe((res) => {
+      this.awardingService.getUserAwardings(this.userId)
+        .subscribe((awards) => {
+          this.awards = awards;
+          this.showSuccessLabel = true;
+          setTimeout(() => {
+            this.showSuccessLabel = false;
+          }, 2000)
+        })
+    })
   }
-    return window.confirm(`Ihr Formular besitzt ungespeicherte Änderungen, möchten Sie die Seite wirklich verlassen?`);
+
+  cancel() {
+    this.router.navigate(['../..'], {relativeTo: this.route});
+    return false;
   }
 
 }

static/src/app/users/user-overview/user-overview.component.css

@@ -1,4 +0,0 @@
-.decoration-preview {
-  background-color: white;
-  padding: 5px;
-}

static/src/app/users/user-overview/user-overview.component.ts

@@ -19,10 +19,6 @@ export class UserOverviewComponent {
 
   subscription: Subscription;
 
-  id: string;
-
-  model = model;
-
   showSuccessLabel = false;
 
   ranksDisplay = 'none';
@@ -122,15 +118,6 @@ export class UserOverviewComponent {
     }
   }
 
-  deleteUser(confirm) {
-    if (confirm.toLowerCase() === this.user.username.toLocaleLowerCase()) {
-      this.userService.deleteUser(this.user)
-        .subscribe((res) => {
-          this.router.navigate(['../..'], {relativeTo: this.route});
-        })
-    }
-  }
-
   canDeactivate(): boolean {
     if (this.saved || !this.form.dirty) {
       return true;