WIP UserManagement

src/app/app.module.ts

@@ -31,7 +31,7 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
+import { MatNativeDateModule, MatOptionModule, MAT_DATE_LOCALE } from '@angular/material/core';
 import { MatChipsModule } from '@angular/material/chips';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -87,6 +87,7 @@ import { BikeEventsComponent } from './pages/tables/bike-events/bike-events.comp
 import { BikeEventTypesComponent } from './pages/tables/bike-event-types/bike-event-types.component';
 import { WorkshopTypesComponent } from './pages/tables/workshop-types/workshop-types.component';
 import { FilterRowComponent } from './components/tableComponents/filter-row/filter-row.component';
+import {FormSelectSearchComponent} from './components/from-select-search/form-select-search.component';
 import {DeleteDialogComponent} from './components/dialogs/delete/delete.dialog.component';
 import {AddDialogComponent} from './components/dialogs/add/add.dialog.component';
 import {EditDialogComponent} from './components/dialogs/edit/edit.dialog.component';
@@ -117,6 +118,7 @@ import {EditDialogComponent} from './components/dialogs/edit/edit.dialog.compone
     SelectObjectDialogComponent,
     AutocompleteSelectComponent,
     LendingStationComponent,
+    FormSelectSearchComponent,
     AddDialogComponent,
     EditDialogComponent,
     DeleteDialogComponent,
@@ -168,6 +170,7 @@ import {EditDialogComponent} from './components/dialogs/edit/edit.dialog.compone
     GraphQLModule,
     DragDropModule,
     MatTooltipModule,
+    MatOptionModule,
     MatSelectModule,
     MatPaginatorModule,
     MatSortModule,

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

@@ -15,8 +15,9 @@ import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { fromEvent } from 'rxjs';
 import { first } from 'rxjs/operators';
-import { User } from '../../models/user';
+import { Role, User } from '../../models/user';
 import {UserService} from '../../services/user.service';
+import {RoleService} from '../../services/role.service';
 import {DeleteDialogComponent} from '../../components/dialogs/delete/delete.dialog.component';
 import {AddDialogComponent} from '../../components/dialogs/add/add.dialog.component';
 import {EditDialogComponent} from '../../components/dialogs/edit/edit.dialog.component';
@@ -39,7 +40,8 @@ export class AdminDataPageComponent implements OnInit {
 
   constructor(public httpClient: HttpClient,
               public dialog: MatDialog,
-              private userService: UserService) {}
+              private userService: UserService,
+              private roleService: RoleService) {}
 
   @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
   @ViewChild(MatSort, {static: true}) sort: MatSort;
@@ -55,15 +57,19 @@ export class AdminDataPageComponent implements OnInit {
 
 
   addNew() {
+    let dialogData: any = {};
+    dialogData.rolesData = deepCopy(this.roles);
     const dialogRef = this.dialog.open(AddDialogComponent, {
-      data: {user: User }
+      data: dialogData,
     });
 
     dialogRef.afterClosed().subscribe(result => {
       if (result === 1) {
        
-
-        this.dataSource.data.push(this.userService.getDialogData());
+        let newUserData = this.userService.getDialogData();
+        console.log("add user data");
+        newUserData.rolesString = newUserData.roles.join(', ');
+        this.dataSource.data.push(newUserData);
         
         this.refreshTable();
       }
@@ -72,25 +78,27 @@ export class AdminDataPageComponent implements OnInit {
 
   startEdit(user : User) {
     let dialogData = deepCopy(user);
-    dialogData.rolesData = deepCopy(roles);
+    dialogData.rolesData = deepCopy(this.roles);
     const dialogRef = this.dialog.open(EditDialogComponent, {
-      data: deepCopy(user),
-      
+      data: dialogData,
     });
 
     dialogRef.afterClosed().subscribe(result => {
       if (result === 1) {
         console.log("editing done");
 
-        const foundIndex = this.dataSource.data.findIndex(x => x.email === this.userService.getDialogData().email);
+        let newUserData = this.userService.getDialogData();
+        const foundIndex = this.dataSource.data.findIndex(x => x.id === newUserData.id);
         
-        this.dataSource.data[foundIndex] = this.userService.getDialogData();
+        newUserData.rolesString = newUserData.roles.join(', ');
+        this.dataSource.data[foundIndex] = newUserData;
        
         this.refreshTable();
       }
     });
   }
 
+
   deleteItem(i: number, id: number, title: string, state: string, url: string) {
     this.index = i;
     this.id = id;
@@ -115,6 +123,9 @@ export class AdminDataPageComponent implements OnInit {
   }
 
   public loadData() {
+    this.roleService.getAllRoles().pipe(first()).subscribe((roles: Role[]) => {
+      this.roles = roles;
+    });
     this.userService.getAllUsers().pipe(first()).subscribe((data: User[]) => {
       for (let user of data){
         let roles = [];

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

@@ -3,6 +3,8 @@ import {Component, Inject} from '@angular/core';
 import {UserService} from '../../../services/user.service';
 import {FormControl, Validators} from '@angular/forms';
 import {User} from '../../../models/user';
+import { first } from 'rxjs/operators';
+import { SnackBarService } from 'src/app/services/snackbar.service';
 
 @Component({
   selector: 'app-add.dialog',
@@ -12,8 +14,12 @@ import {User} from '../../../models/user';
 
 export class AddDialogComponent {
   constructor(public dialogRef: MatDialogRef<AddDialogComponent>,
-              @Inject(MAT_DIALOG_DATA) public data: User,
-              public userService: UserService) { }
+              @Inject(MAT_DIALOG_DATA) public data: any,
+              public userService: UserService,
+              public snackbarService: SnackBarService) { }
+
+  hide = true;
+  selectedRoles: FormControl = new FormControl();
 
   formControl = new FormControl('', [
     Validators.required
@@ -35,7 +41,20 @@ export class AddDialogComponent {
   }
 
   public confirmAdd(): void {
-    this.userService.addUser(this.data);
-    //this.dataService.addIssue(this.data);
+    this.data.roles = [];
+    for (let role of this.selectedRoles.value){
+      this.data.roles.push(role.name);
+    }
+    this.userService.addUser(this.data).pipe(first())
+    .subscribe(
+      data => {
+        this.snackbarService.openSnackBar("Der Nutzer wurde erfolgreich hinzugefügt");
+        //this.loadAllObjects();
+      },
+      error => {
+        console.log("Eroor while editing: " + JSON.stringify(error));
+        this.snackbarService.openSnackBar(error, "Ok", true);
+      }
+    );
   }
 }

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

@@ -23,6 +23,36 @@
       </mat-form-field>
     </div>
 
+    <div class="form">
+      <select-search class="mat-form-field" label="Rollen" 
+      [formCtrl]="selectedRoles" 
+      [data]="data.rolesData" 
+      [preSelectedData]="data.roles" multiple></select-search>
+    </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 [type]="submit" [disabled]="!formControl.valid" [mat-dialog-close]="1" (click)="confirmAdd()">Save</button>
       <button mat-button (click)="onNoClick()" tabindex="-1">Cancel</button>

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

@@ -14,9 +14,10 @@ export class EditDialogComponent {
 
   hide = true;
 
+  selectedRoles: FormControl = new FormControl();
+
   constructor(public dialogRef: MatDialogRef<EditDialogComponent>,
-              @Inject(MAT_DIALOG_DATA) public data: any,
-              @Inject(MAT_DIALOG_DATA) public role: any, public userService: UserService, public snackbarService : SnackBarService) { }
+              @Inject(MAT_DIALOG_DATA) public data: any, public userService: UserService, public snackbarService : SnackBarService) { }
 
   formControl = new FormControl('', [
     Validators.required
@@ -38,7 +39,11 @@ export class EditDialogComponent {
   }
 
   stopEdit(): void {
+    console.log("Selected Role " + JSON.stringify(this.selectedRoles.value));
     this.data.roles = [];
+    for (let role of this.selectedRoles.value){
+      this.data.roles.push(role.name);
+    }
     this.userService.updateUser(this.data).pipe(first())
     .subscribe(
       data => {

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

@@ -19,19 +19,27 @@
 
     <div class="form">
       <mat-form-field color="accent">
-        <input matInput placeholder="Passwort" [(ngModel)]="data.password" name="password">
+        <input matInput placeholder="Passwort" [(ngModel)]="data.password" name="password" >
       </mat-form-field>
     </div>
 
+    <div class="form">
+      <select-search class="mat-form-field" label="Rollen" 
+      [formCtrl]="selectedRoles" 
+      [data]="data.rolesData" 
+      [preSelectedData]="data.roles" multiple></select-search>
+    </div>
+
 
     <div class="form">
       <mat-form-field>
-        <mat-label>Eigenes Passwort</mat-label>
+        <mat-label>Admin Passwort</mat-label>
         <input
           matInput
           [type]="hide ? 'password' : 'text'"
           name="ownPassword"
           [(ngModel)]="data.own_password"
+          required
         />
         <button
           mat-icon-button

src/app/components/from-select-search/form-select-search.component.html

@@ -4,6 +4,6 @@
 </mat-label>
 <mat-select [ngModel]="selectedOptions" (ngModelChange)="selectedOptions" [formControl]="formCtrl" [multiple]="multiple">
     <mat-select-search [formControl]="searchCtrl"></mat-select-search>
-    <mat-option *ngFor="let risk of filteredInterfacesBMulti | async" [value]="risk">{{risk.NAME}}</mat-option>
+    <mat-option *ngFor="let risk of filteredInterfacesBMulti | async" [value]="risk">{{risk.name}}</mat-option>
 </mat-select>
 </mat-form-field>

src/app/components/from-select-search/form-select-search.component.ts

@@ -11,6 +11,7 @@ export class FormSelectSearchComponent implements OnInit, OnDestroy, OnChanges {
   //@Input() group: FormGroup;
   //@Input() controlName: string; 
   @Input() formCtrl: FormControl;
+  //@Input() name: string;
 
   @Input() data: any[];
   @Input() preSelectedData: any[];
@@ -35,39 +36,24 @@ export class FormSelectSearchComponent implements OnInit, OnDestroy, OnChanges {
     if (changes['data']) {
       
       if (this.preSelectedData !== undefined){
-        //console.log( this.label + " is not undefined :D");
-        //console.log(this.label + " preselected: " + this.preSelectedData);
-        //console.log(JSON.stringify(this.preSelectedData))
         this.riskListGeneratorB(this.preSelectedData);
-        console.log(this.label + " selected options: "+ JSON.stringify(this.selectedOptions) + " all options: " + JSON.stringify(this.data));
       }
       
-      //this.listenInterfacesSearchable();
       this.filterInterfacesBMulti();
     }
     if (changes['preSelectedData']) {
       
       if (this.preSelectedData !== undefined){
-        /*console.log(this.label + " preselect data change");
-        console.log(this.label + " preselected: " + this.preSelectedData);
-        console.log(JSON.stringify(this.preSelectedData))*/
         this.riskListGeneratorB(this.preSelectedData);
-        console.log(this.label + " selected options: "+ JSON.stringify(this.selectedOptions) + " all options: " + JSON.stringify(this.data));
       }
       
-      //this.listenInterfacesSearchable();
       this.filterInterfacesBMulti();
     }
   }
 
   ngOnInit() {
-    //this.group.addControl('searchCtrl', this.searchCtrl);
-    //this.formCtrl = this.group[this.controlName];
     if (this.preSelectedData !== undefined){
-      /*console.log("preselected is not undefined :D");
-      console.log("preselected: " + this.preSelectedData);*/
       this.riskListGeneratorB(this.preSelectedData);
-      console.log("selected options: "+ JSON.stringify(this.selectedOptions) + " all options: " + JSON.stringify(this.data));
     }
     
     this.listenInterfacesSearchable();

src/app/models/user.ts

@@ -10,14 +10,14 @@ export class User {
     email: string;
     own_password: string;
     password: string;
-    roles: UserRole[];
+    roles: Role[];
     rolesString? : string;
     attributes : {
         profile_url?: string;
     }
 }
 
-export class UserRole {
+export class Role {
     id: number;
     name: string;
     description: string;