implemented a working user management

src/app/components/admin-data-page/admin-data-page.component.html

@@ -1,18 +1,18 @@
 
-<mat-toolbar color="primary">
-  <span>Admin Table</span>
-  <span class="spacer"></span>
-  Reload data:
+
+<h1>Benutzerverwaltung
   <button mat-icon-button (click)="refresh()">
     <mat-icon>refresh</mat-icon>
   </button>
-</mat-toolbar>
+</h1>
+<span class="spacer"></span>
+  
 
 <div class="container mat-elevation-z8">
 
   <div class="form">
     <mat-form-field floatPlaceholder="never" color="accent">
-      <input matInput #filter placeholder="Filter issues">
+      <input matInput #filter placeholder="Nutzerfilter">
     </mat-form-field>
   </div>
 
@@ -52,7 +52,7 @@
           <mat-icon aria-label="Edit">edit</mat-icon>
         </button>
 
-        <button mat-icon-button color="accent" (click)="deleteItem(i, row.id, row.title, row.state, row.url)">
+        <button mat-icon-button color="accent" (click)="deleteItem(row)">
           <mat-icon aria-label="Delete">delete</mat-icon>
         </button>
       </mat-cell>

src/app/components/admin-data-page/admin-data-page.component.ts

@@ -68,6 +68,7 @@ export class AdminDataPageComponent implements OnInit {
        
         let newUserData = this.userService.getDialogData();
         console.log("add user data");
+        newUserData.password = '';
         newUserData.rolesString = newUserData.roles.join(', ');
         this.dataSource.data.push(newUserData);
         
@@ -90,6 +91,7 @@ export class AdminDataPageComponent implements OnInit {
         let newUserData = this.userService.getDialogData();
         const foundIndex = this.dataSource.data.findIndex(x => x.id === newUserData.id);
         
+        newUserData.password = '';
         newUserData.rolesString = newUserData.roles.join(', ');
         this.dataSource.data[foundIndex] = newUserData;
        
@@ -99,16 +101,15 @@ export class AdminDataPageComponent implements OnInit {
   }
 
 
-  deleteItem(i: number, id: number, title: string, state: string, url: string) {
-    this.index = i;
-    this.id = id;
+  deleteItem(user : User) {
     const dialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: {id: id, title: title, state: state, url: url}
+      data: user
     });
 
     dialogRef.afterClosed().subscribe(result => {
       if (result === 1) {
-        const foundIndex = this.dataSource.data.findIndex(x => x.id === this.id);
+        let newUserData = this.userService.getDialogData();
+        const foundIndex = this.dataSource.data.findIndex(x => x.id === newUserData.id);
 
         this.dataSource.data.splice(foundIndex, 1);
         this.refreshTable();
@@ -133,6 +134,7 @@ export class AdminDataPageComponent implements OnInit {
           roles.push(role.name);
         }
         user.rolesString = roles.join(', ');
+        user.email_old = user.email;
       }
       this.dataSource = new MatTableDataSource(data);
     });
@@ -161,48 +163,7 @@ export class AdminDataPageComponent implements OnInit {
 
     this.dataSource.sort = this.sort;
   }
-
-
-  private load() {
-    console.log("trying to load");
-    
-  }
-
-  delete(user: User) {
-    let ownPassword : string;
-    this.userService.deleteUser(user.email, ownPassword)
-    .pipe(first())
-    .subscribe(
-      data => {
-        //this.loadAllObjects();
-      },
-      error => {
-        
-      }
-    );
-  }
-
-  edit(user: User) {
-    let ownPassword : string;
-    this.userService.updateUser(user, ownPassword)
-    .pipe(first())
-    .subscribe(
-      data => {
-        //this.loadAllObjects();
-      },
-      error => {
-        
-      }
-    );
-  }
-
-  /*findActualData(_id: string) {
-    for (let data of this.actualData) {
-      if (data._id === _id) {
-        return data;
-      }
-    }
-  } */ 
+  
 }
 
 

src/app/components/dialogs/delete/delete.dialog.component.ts

@@ -1,6 +1,9 @@
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import {Component, Inject} from '@angular/core';
 import {UserService} from '../../../services/user.service';
+import { SnackBarService } from 'src/app/services/snackbar.service';
+import { first } from 'rxjs/operators';
+import { FormControl } from '@angular/forms';
 
 
 @Component({
@@ -11,14 +14,29 @@ import {UserService} from '../../../services/user.service';
 export class DeleteDialogComponent {
 
   constructor(public dialogRef: MatDialogRef<DeleteDialogComponent>,
-              @Inject(MAT_DIALOG_DATA) public data: any, public userService: UserService) { }
+              @Inject(MAT_DIALOG_DATA) public data: any, public userService: UserService,
+              public snackbarService: SnackBarService) { }
 
+  hide = true;
+  selectedRoles: FormControl = new FormControl();
+
+  
   onNoClick(): void {
     this.dialogRef.close();
   }
 
   confirmDelete(): void {
-    this.userService.deleteUser(this.data.mail, this.data.ownPassword);
+    console.log("delete data " + JSON.stringify(this.data));
+    this.userService.deleteUser(this.data).pipe(first())
+    .subscribe(
+      data => {
+        this.snackbarService.openSnackBar("Erfolgreich: " + data.success);
+        //this.loadAllObjects();
+      },
+      error => {
+        this.snackbarService.openSnackBar(error, "Ok", true);
+      }
+    );
     //this.dataService.deleteIssue(this.data.id);
   }
 }

src/app/components/dialogs/delete/delete.dialog.css

@@ -6,3 +6,14 @@
 .container > * {
   width: 100%;
 }
+
+
+.form {
+  display: flex;
+  padding-top: 6px;
+}
+
+.mat-form-field {
+  font-size: 16px;
+  flex-grow: 1;
+}

src/app/components/dialogs/delete/delete.dialog.html

@@ -7,6 +7,29 @@
     <p></p>
   </div>
 
+
+  <div class="form">
+    <mat-form-field>
+      <mat-label>Admin Passwort</mat-label>
+      <input
+        matInput
+        [type]="hide ? 'password' : 'text'"
+        name="ownPassword"
+        [(ngModel)]="data.own_password"
+        required
+      />
+      <button
+        mat-icon-button
+        matSuffix
+        (click)="hide = !hide"
+        [attr.aria-label]="'Hide password'"
+        [attr.aria-pressed]="hide"
+      >
+        <mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
+      </button>
+    </mat-form-field>
+  </div>
+
   <div mat-dialog-actions>
     <button mat-button [mat-dialog-close]="1" (click)="confirmDelete()">Delete</button>
     <button mat-button (click)="onNoClick()" tabindex="-1">Cancel</button>

src/app/models/user.ts

@@ -8,6 +8,7 @@ export class User {
     id: number;
     name: string;
     email: string;
+    email_old?: string;
     own_password: string;
     password: string;
     roles: Role[];

src/app/pages/profile/profile.component.html

@@ -89,7 +89,9 @@
 
 <!--<app-admin-data-page *ngIf="this.authService.getCurrentUserValue.user.roles.includes('admin')"></app-admin-data-page> 
 -->
-<app-admin-data-page></app-admin-data-page> 
+<div id="usermanagement">
+  <app-admin-data-page></app-admin-data-page> 
+</div>
 
 
 <!--<app-table

src/app/pages/profile/profile.component.scss

@@ -17,6 +17,15 @@
     }
 }
 
+#usermanagement{
+    display: flex;
+    flex-direction: column;
+    max-width: 80em;
+    min-width: 5em;
+    margin: auto;
+    margin-top: 3em;
+}
+
 hr {
     color: #7fc600;
     width: 100%;

src/app/services/user.service.ts

@@ -40,16 +40,20 @@ export class UserService {
         user.own_password = own_password;
     }
 
-    console.log("Users update: " + JSON.stringify(user));
+    //console.log("Users update: " + JSON.stringify(user));
     return this.http.post<User>(
-      `${environment.authUrl}/users/${user.email}/update`,
+      `${environment.authUrl}/users/${user.email_old}/update`,
       user
     );
   }
 
-  public deleteUser(email: string, own_password? : string): Observable<any> {
+  public deleteUser(user: User, own_password? : string): Observable<any> {
+    if (own_password !== undefined){
+      user.own_password = own_password;
+    }
+    this.dialogData = user;
     return this.http.post<any>(
-      `${environment.authUrl}/users/` + email + '/delete', {"own_password" : own_password}
+      `${environment.authUrl}/users/${user.email}/delete`, {"own_password" : user.own_password}
     );
   }