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

import { Component, inject } from '@angular/core';
import { GridApi, GridOptions, GridReadyEvent } from 'ag-grid-community';
import { HELPER } from '../../../../shared/helper.service';
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';
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',
    imports: [AgGridAngular, MatDialogModule, MatButtonModule, MatInputModule, MatFormFieldModule, CommonModule, FormsModule, MatIconModule],
    templateUrl: './system-manager.component.html',
    styleUrl: './system-manager.component.scss'
})
export class SystemManagerComponent {

  gridApi!: GridApi;
  
    gridOptions: GridOptions = HELPER.getGridOptions();
    readonly dialogRef = inject(MatDialogRef<SystemManagerComponent>);
    readonly system = inject<any>(MAT_DIALOG_DATA);

    private api: ApiService = inject(ApiService);
    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.removeManager(event.data);
            }
          },
          }
        ]
      }


  onGridReady(params: GridReadyEvent) {
      this.gridApi = params.api;
      this.loadManagers();
  }

  loadManagers() {
    this.api.getSystemManagers(this.system.id).subscribe({
      next: n => {
        this.gridApi.setGridOption("rowData", n);
        this.gridApi.setGridOption("loading", false);
      }
    })
  }

  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);
      }
    });
  }

  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, manager.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);
      }
    });
  }
}