Dashboard

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

@@ -0,0 +1,22 @@
+
+<h2 mat-dialog-title>Manager entfernen</h2>
+<mat-dialog-content>
+    <div class="warning-message">
+        <mat-icon color="warn">warning</mat-icon>
+        <p>
+            <b>{{ manager.firstName }} {{ manager.lastName }}</b> wirklich entfernen?
+            Der Benutzer hat dann keinen Zugriff mehr auf das System mit allen seinen Daten.
+        </p>
+        <p class="additional-info">
+            <!-- Additional information -->
+            <small>Diese Aktion kann nicht rückgängig gemacht werden.</small>
+        </p>
+    </div>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+    <button mat-button [mat-dialog-close]="false">Abbrechen</button>
+    <button mat-raised-button color="warn" [mat-dialog-close]="true">
+        <mat-icon>delete</mat-icon>
+        Entfernen
+    </button>
+</mat-dialog-actions>

client/src/app/modules/system/components/remove-manager-popup/remove-manager-popup.component.scss

@@ -0,0 +1,19 @@
+.warning-message {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 1rem;
+
+    mat-icon {
+        font-size: 48px;
+        height: 48px;
+        width: 48px;
+        margin-bottom: 1rem;
+    }
+
+    .additional-info {
+        margin-top: 1rem;
+        color: rgba(0, 0, 0, 0.6);
+    }
+}

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

@@ -0,0 +1,34 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RemoveManagerPopupComponent } from './remove-manager-popup.component';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+describe('RemoveManagerPopupComponent', () => {
+  let component: RemoveManagerPopupComponent;
+  let fixture: ComponentFixture<RemoveManagerPopupComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RemoveManagerPopupComponent],
+      providers: [
+        { 
+          provide: MatDialogRef,
+          useValue: []
+        }, 
+        { 
+          provide: MAT_DIALOG_DATA, 
+          useValue: ''
+        },
+      ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RemoveManagerPopupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,18 @@
+import { Component, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { IUser } from '../../../../model/interface/user.interface';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+  selector: 'app-remove-manager-popup',
+  standalone: true,
+  imports: [MatButtonModule, MatDialogModule, MatIconModule],
+  templateUrl: './remove-manager-popup.component.html',
+  styleUrl: './remove-manager-popup.component.scss'
+})
+export class RemoveManagerPopupComponent {
+  readonly dialogRef = inject(MatDialogRef<RemoveManagerPopupComponent>);
+  readonly manager = inject<IUser>(MAT_DIALOG_DATA);
+
+}

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

@@ -11,13 +11,20 @@
   />
   </div>
   
-  <div class="flex gap-2 items-center">
+  <div class="flex gap-2 items-center p-4 bg-gray-50 rounded-md shadow-sm">
     <mat-form-field class="flex-1">
       <mat-label>Email</mat-label>
-      <input matInput [(ngModel)]="email">
+      <input matInput [(ngModel)]="email" placeholder="beispiel@email.com">
       <mat-hint>Emailadresse des neuen Users eingeben</mat-hint>
+      <mat-icon matPrefix class="text-gray-400 mr-2">email</mat-icon>
     </mat-form-field>
-    <button mat-button (click)="addManagerByEmail()" [disabled]="email == '' || email == null">Hinzufügen</button>
+    <button mat-raised-button 
+            color="primary" 
+            (click)="addManagerByEmail()" 
+            [disabled]="email == '' || email == null">
+      <mat-icon>person_add</mat-icon>
+      Hinzufügen
+    </button>
   </div>
 </div>
 </mat-dialog-content>

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

@@ -1,3 +1,31 @@
 :host {
     min-height: 500px;
+}
+::ng-deep .ag-theme-alpine {
+    --ag-row-hover-color: rgb(243 244 246);
+    --ag-selected-row-background-color: rgb(229 231 235);
+}
+
+.p-4 {
+    padding: 1rem;
+}
+
+.bg-gray-50 {
+    background-color: rgb(249 250 251);
+}
+
+.rounded-md {
+    border-radius: 0.375rem;
+}
+
+.shadow-sm {
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+.text-gray-400 {
+    color: rgb(156 163 175);
+}
+
+.mr-2 {
+    margin-right: 0.5rem;
 }

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

@@ -12,17 +12,20 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { AuthService } from '../../../../core/auth/auth.service';
 import { HttpErrorResponse } from '@angular/common/http';
+import { RemoveManagerPopupComponent } from '../remove-manager-popup/remove-manager-popup.component';
+import { IUser } from '../../../../model/interface/user.interface';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-system-manager',
   standalone: true,
-  imports: [AgGridAngular, MatDialogModule, MatButtonModule, MatInputModule, MatFormFieldModule, CommonModule, FormsModule],
+  imports: [AgGridAngular, MatDialogModule, MatButtonModule, MatInputModule, MatFormFieldModule, CommonModule, FormsModule, MatIconModule],
   templateUrl: './system-manager.component.html',
   styleUrl: './system-manager.component.scss'
 })
 export class SystemManagerComponent {
 
-   gridApi!: GridApi;
+  gridApi!: GridApi;
   
     gridOptions: GridOptions = HELPER.getGridOptions();
     readonly dialogRef = inject(MatDialogRef<SystemManagerComponent>);
@@ -51,7 +54,7 @@ export class SystemManagerComponent {
               return;
             }
             if (event.colDef.colId == 'delete') {
-              this.removeManagerByEmail(event.data.username);
+              this.removeManager(event.data);
             }
           },
           }
@@ -95,12 +98,25 @@ export class SystemManagerComponent {
     });
   }
 
-  removeManagerByEmail(username: string) {
-    const resume = confirm('Soll der Manager wirklich entfernt werden?');
-    if (!resume) return;
+  openPopup(manager: IUser): Promise<boolean> {
+    return new Promise(resolve => {
+      this.dialog.open(RemoveManagerPopupComponent, {
+        data: manager,
+        disableClose: false,
+        autoFocus: false,
+      }).afterClosed().subscribe({
+        next: (n: boolean) => resolve(n)
+      })
+    })
+  }
+
+  async removeManager(manager: IUser) {
     
+    const resume = await this.openPopup(manager);
+    if (!resume) return;
+
     this.gridApi.setGridOption("loading", true);
-    this.api.removeManager(this.system.id, username)
+    this.api.removeManager(this.system.id, manager.username)
     .pipe(
       this.toast.observe({
         loading: 'Manager entfernen',