Combine user add- and edit-form

api/routes/users.js

@@ -91,8 +91,11 @@ users.route('/')
         return next(err);
       }
       res.status(codes.created);
-      res.locals.items = user;
-      next();
+      getExtendedUser(user, next, (extUser) => {
+        res.locals.items = extUser;
+        res.locals.processed = true;
+        return next();
+      })
     });
   })
 

static/src/app/army/army.component.ts

@@ -15,12 +15,10 @@ export class ArmyComponent {
   constructor(private armyService: ArmyService) {
   }
 
-
   ngOnInit() {
     this.armyService.getArmy()
       .subscribe(army => {
         this.army = army;
-        console.log(army)
       });
   };
 }

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/new-user/new-user.component.html

@@ -1,27 +0,0 @@
-<form #form="ngForm" class="overview">
-  <h3>Neuen Teilnehmer hinzufügen</h3>
-
-  <div class="form-group">
-    <label for="title">Name</label>
-    <input type="text" class="form-control"
-           [(ngModel)]="user.username"
-           name="title"
-           id="title"
-           required maxlength="50"/>
-
-    <show-error text="Name" path="title"></show-error>
-  </div>
-
-  <button id="cancel"
-          (click)="cancel()"
-          class="btn btn-default">
-    Abbrechen
-  </button>
-
-  <button id="save"
-          (click)="saveUser()"
-          class="btn btn-default"
-          [disabled]="!form.valid">
-    Teilnehmer hinzufügen
-  </button>
-</form>

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

@@ -1,50 +0,0 @@
-import {Component, ViewChild} from "@angular/core";
-import {ActivatedRoute, Router} from "@angular/router";
-import {NgForm} from "@angular/forms";
-import {User} from "../../models/model-interfaces";
-import {UserService} from "../../services/user-service/user.service";
-
-
-@Component({
-  templateUrl: './new-user.component.html',
-  styleUrls: ['./new-user.component.css', '../../style/new-entry-form.css']
-})
-export class CreateUserComponent {
-
-  user: User = {};
-
-  saved = false;
-
-  @ViewChild(NgForm) form: NgForm;
-
-  constructor(private route: ActivatedRoute,
-              private router: Router,
-              private userService: UserService) {
-  }
-
-  ngOnInit() {
-
-  }
-
-  saveUser() {
-    this.userService.submitUser(this.user)
-      .subscribe(user => {
-        this.saved = true;
-        this.router.navigate(['../overview', user._id], {relativeTo: this.route});
-      })
-  }
-
-  cancel() {
-    //this.location.back();
-    this.router.navigate(['/cc-users']);
-    return false;
-  }
-
-  canDeactivate(): boolean {
-    if (this.saved || !this.form.dirty) {
-      return true;
-    }
-    return window.confirm(`Ihr Formular besitzt ungespeicherte Änderungen, möchten Sie die Seite wirklich verlassen?`);
-  }
-
-}

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-list/user-list.component.ts

@@ -48,7 +48,8 @@ export class UserListComponent implements OnInit {
   }
 
   openNewUserForm() {
-    this.router.navigate([{outlets: {'right': ['new']}}], {relativeTo: this.route});
+    this.selectedUserId = null;
+    this.router.navigate([{outlets: {'right': ['overview']}}], {relativeTo: this.route});
   }
 
   selectUser(userId: string) {
@@ -62,11 +63,12 @@ export class UserListComponent implements OnInit {
   }
 
   deleteUser(user: User) {
+    if (confirm('Soll der Teilnehmer ' + user.username + ' wirklich gelöscht werden?')) {
       this.userService.deleteUser(user)
         .subscribe((res) => {
-
         })
     }
+  }
 
   filterUsersByFraction(query = '', fractionFilter) {
     this.users$ = this.userService.findUsers(query, fractionFilter);

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.html

@@ -1,5 +1,6 @@
 <form #form="ngForm" class="overview">
-  <h3>Teilnehmer editieren</h3>
+  <h3 *ngIf="user._id">Teilnehmer editieren</h3>
+  <h3 *ngIf="!user._id">Neuen Teilnehmer hinzufügen</h3>
 
   <div class="form-group">
     <label for="title">Name</label>

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

@@ -1,6 +1,5 @@
 import {Component, ViewChild} from "@angular/core";
 import {ActivatedRoute, Router} from "@angular/router";
-import * as model from "../../models/model-interfaces";
 import {Rank, Squad, User} from "../../models/model-interfaces";
 import {UserService} from "../../services/user-service/user.service";
 import {SquadService} from "../../services/squad-service/squad.service";
@@ -19,15 +18,11 @@ export class UserOverviewComponent {
 
   subscription: Subscription;
 
-  id: string;
-
-  model = model;
-
   showSuccessLabel = false;
 
   ranksDisplay = 'none';
 
-  user: User = {squad: {}};
+  user: User = {username: '', squad: '0', rank: {level: 0}};
 
   squads: Squad[] = [];
 
@@ -49,7 +44,6 @@ export class UserOverviewComponent {
       .filter(id => id != undefined)
       .flatMap(id => this.userService.getUser(id))
       .subscribe(user => {
-        console.log(user.squad)
         if (!user.squad) {
           user.squad = "0";
           this.ranksDisplay = 'none';
@@ -94,6 +88,8 @@ export class UserOverviewComponent {
     if (this.user.squad._id !== '0') {
       updateObject.squadId = this.user.squad._id
     }
+
+    if (this.user._id) {
       this.userService.updateUser(updateObject)
         .subscribe(user => {
           if (!user.squad) {
@@ -105,11 +101,18 @@ export class UserOverviewComponent {
             this.showSuccessLabel = false;
           }, 2000)
         })
+    } else {
+      this.userService.submitUser(updateObject)
+        .subscribe(user => {
+          this.router.navigate(['..'], {relativeTo: this.route});
+          return true;
+        })
+    }
   }
 
 
   cancel() {
-    this.router.navigate(['../..'], {relativeTo: this.route});
+    this.router.navigate([this.user._id ? '../..' : '..'], {relativeTo: this.route});
     return false;
   }
 
@@ -122,15 +125,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;

static/src/app/users/users.routing.ts

@@ -2,7 +2,6 @@ import {Routes} from "@angular/router";
 import {UsersComponent} from "./users.component";
 import {UserOverviewComponent} from "./user-overview/user-overview.component";
 import {UserListComponent} from "./user-list/user-list.component";
-import {CreateUserComponent} from "./new-user/new-user.component";
 import {UserAwardComponent} from "./user-award/user-award.component";
 
 export const usersRoutes: Routes = [{
@@ -15,8 +14,8 @@ export const usersRoutes: Routes = [{
   ]
 },
   {
-    path: 'new',
-    component: CreateUserComponent,
+    path: 'overview',
+    component: UserOverviewComponent,
     outlet: 'right'
   },
   {
@@ -31,4 +30,4 @@ export const usersRoutes: Routes = [{
   }
 ];
 
-export const usersRoutingComponents = [UsersComponent, UserListComponent, UserOverviewComponent, CreateUserComponent, UserAwardComponent];
+export const usersRoutingComponents = [UsersComponent, UserListComponent, UserOverviewComponent, UserAwardComponent];