Manage SystemManagers

client/src/app/modules/system/components/system-manager/system-manager.component.html

@@ -1,13 +1,25 @@
 
 
-<h2 mat-dialog-title>Manager</h2>
+<h2 mat-dialog-title>{{ system?.name }} - Manager</h2>
 <mat-dialog-content>
+<div style="display: flex; flex-direction: column; height: calc(100% - 4px);" class="gap-2">
+  <div class="flex-auto">
     <ag-grid-angular
     style="width: 100%; height: 100%;"
     (gridReady)="onGridReady($event)"
     [gridOptions]="gridOptions!"
-/>
-
+  />
+  </div>
+  
+  <div class="flex gap-2 items-center">
+    <mat-form-field class="flex-1">
+      <mat-label>Email</mat-label>
+      <input matInput [(ngModel)]="email">
+      <mat-hint>Emailadresse des neuen Users eingeben</mat-hint>
+    </mat-form-field>
+    <button mat-button (click)="addManagerByEmail()" [disabled]="email == '' || email == null">Hinzufügen</button>
+  </div>
+</div>
 </mat-dialog-content>
 <mat-dialog-actions>
   <button mat-button [mat-dialog-close]="true">Schließen</button>

client/src/app/modules/system/components/system-manager/system-manager.component.spec.ts

@@ -7,6 +7,9 @@ import { ApiService } from '../../../../shared/api.service';
 import { HotToastService } from '@ngxpert/hot-toast';
 import { MockApiService } from '../../../../../../mocks/services/mock.api.service';
 import { GridReadyEvent } from 'ag-grid-community';
+import { AuthService } from '../../../../core/auth/auth.service';
+import { MockAuthService } from '../../../../../../mocks/services/mock.auth.service';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 
 
@@ -18,7 +21,7 @@ describe('SystemManagerComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [SystemManagerComponent, AgGridAngular, MatDialogModule],
+      imports: [SystemManagerComponent, AgGridAngular, MatDialogModule, NoopAnimationsModule],
       providers: [ 
         HotToastService,
         { provide: ApiService, useClass: MockApiService },
@@ -29,7 +32,8 @@ describe('SystemManagerComponent', () => {
           { 
           provide: MAT_DIALOG_DATA, 
           useValue: [] 
-          }
+          },
+          { provide: AuthService, useClass: MockAuthService }
       ]
     })
     .compileComponents();

client/src/app/modules/system/components/system-manager/system-manager.component.ts

@@ -5,11 +5,18 @@ import { AgGridAngular } from 'ag-grid-angular';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { HotToastService } from '@ngxpert/hot-toast';
 import { ApiService } from '../../../../shared/api.service';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AuthService } from '../../../../core/auth/auth.service';
+import { HttpErrorResponse } from '@angular/common/http';
 
 @Component({
   selector: 'app-system-manager',
   standalone: true,
-  imports: [AgGridAngular, MatDialogModule],
+  imports: [AgGridAngular, MatDialogModule, MatButtonModule, MatInputModule, MatFormFieldModule, CommonModule, FormsModule],
   templateUrl: './system-manager.component.html',
   styleUrl: './system-manager.component.scss'
 })
@@ -22,14 +29,32 @@ export class SystemManagerComponent {
     readonly system = inject<any>(MAT_DIALOG_DATA);
 
     private api: ApiService = inject(ApiService);
-      private dialog: MatDialog = inject(MatDialog);
-      private toast = inject(HotToastService);
+    private dialog: MatDialog = inject(MatDialog);
+    private toast = inject(HotToastService);
+    private authService = inject(AuthService);
+
+    email = null;
 
 
     constructor() {
         this.gridOptions.columnDefs = [
           { colId: 'name', field: 'firstName', headerName: 'Name', sort: 'asc', flex: 1, cellRenderer: (data: any) => data.data.firstName + ' ' + data.data.lastName, sortable: true, filter: true},
           { colId: 'mail', field: 'username', headerName: 'E-Mail', flex: 1},
+          { colId: 'delete', headerName: '', width: 50, 
+            cellRenderer: (params: any) => {
+              if (this.authService.user.username == params.data.username) return '';
+              return `<div class="delete icon icon-btn-xs"></div>`;
+          },
+          onCellClicked: (event: any) => {
+            if (this.authService.user.username == event.data.username) {
+              this.toast.error('Du kannst dich nicht selbst entfernen');
+              return;
+            }
+            if (event.colDef.colId == 'delete') {
+              this.removeManagerByEmail(event.data.username);
+            }
+          },
+          }
         ]
       }
 
@@ -47,4 +72,49 @@ export class SystemManagerComponent {
       }
     })
   }
+
+  addManagerByEmail() {
+    if (this.email == null) return;
+    this.gridApi.setGridOption("loading", true);
+    this.api.addManager(this.system.id, this.email)
+    .pipe(
+      this.toast.observe({
+        loading: 'Füge Manager hinzu',
+        success: 'Manager hinzugefügt',
+        error: (x: any) => x.error.message || 'Fehler beim Hinzufügen des Managers'
+      })
+    ).subscribe({
+      next: n => {
+        this.gridApi.setGridOption("rowData", n);
+        this.email = null;
+        this.gridApi.setGridOption("loading", false);
+      },
+      error: () => {
+        this.gridApi.setGridOption("loading", false);
+      }
+    });
+  }
+
+  removeManagerByEmail(username: string) {
+    const resume = confirm('Soll der Manager wirklich entfernt werden?');
+    if (!resume) return;
+    
+    this.gridApi.setGridOption("loading", true);
+    this.api.removeManager(this.system.id, username)
+    .pipe(
+      this.toast.observe({
+        loading: 'Manager entfernen',
+        success: 'Manager entfernt',
+        error: (x: any) => x.error.message || 'Fehler beim Entfgernen des Managers'
+      })
+    ).subscribe({
+      next: (n: any[]) => {
+        this.gridApi.setGridOption("rowData", n);
+        this.gridApi.setGridOption("loading", false);
+      },
+      error: () => {
+        this.gridApi.setGridOption("loading", false);
+      }
+    });
+  }
 }