keyvault/client/src/app/modules/admin/all-users/all-users.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, inject } from '@angular/core';
import { ApiService } from '../../../shared/api.service';
import { AgGridAngular } from 'ag-grid-angular';
import { GridOptions,GridApi, GridReadyEvent, CellEditingStoppedEvent } from 'ag-grid-community';
import { HotToastService } from '@ngxpert/hot-toast';
import { AuthService } from '../../../core/auth/auth.service';
import { DatePipe } from '@angular/common';
import { AG_GRID_LOCALE_DE } from '@ag-grid-community/locale';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'app-all-users',
  standalone: true,
  imports: [AgGridAngular, MatButtonModule],
  providers: [DatePipe],
  templateUrl: './all-users.component.html',
  styleUrl: './all-users.component.scss'
})
export class AllUsersComponent {

  private toast: HotToastService = inject(HotToastService);
  private api: ApiService = inject(ApiService);
  private authService = inject(AuthService);
  private datePipe = inject(DatePipe);

  gridApi!: GridApi;

  gridOptions: GridOptions = {
    localeText: AG_GRID_LOCALE_DE,
    rowData: [],
    columnDefs: [
      { field: 'username' , headerName: 'User', flex: 1, editable: this.authService.isAdmin, sort: 'asc', filter: true },
      { field: 'firstName', headerName: 'Vorname', flex: 1, editable: this.authService.isAdmin, filter: true},
      { field: 'lastName', headerName: 'Nachname', flex: 1, editable: this.authService.isAdmin, filter: true},
      { field: 'isActive', headerName: 'Aktiv', width: 70, editable: (params) => params.data.id != this.authService.user.id && this.authService.isAdmin, },
      { field: 'role', headerName: 'Rolle', width: 100 ,editable: this.authService.isAdmin, cellEditor: 'agSelectCellEditor',
        cellEditorParams: {
          values: ['user', 'develop', 'admin'],
      },
      singleClickEdit: true,
      cellEditorPopup: false
       },
       {
        field: 'createdAt'
        , headerName: 'Erstellt'
        , width: 120
        , type: 'date'
        , cellRenderer: (data: any) => this.datePipe.transform(new Date(data.value))
        , tooltipValueGetter: (data: any) => this.datePipe.transform(new Date(data.value), 'medium')
      },
      {
        field: 'lastLogin'
        , headerName: 'Letzter Login'
        , width: 170
        , type: 'date'
        , cellRenderer: (data: any) => data.value ? this.datePipe.transform(new Date(data.value), 'medium') : '-'
      },
      {
        field: 'delete',
        headerName: '',
        width: 50,
        cellRenderer: (params: any) => {
          if (params.data.id == this.authService.user.id || !this.authService.isAdmin) {
            return '';
          }
          return `<div class="delete icon icon-btn-xs" (click)="deleteUser(${params.data.id})"></div>`;
      },
      onCellClicked: (event: any) => {
        if (event.data.id == this.authService.user.id || !this.authService.isAdmin) {
          return;
        }
        if (event.colDef.field == 'delete') {
          this.deleteUser(event.data.id);
        }
      },
    },
    {
      headerName: 'Benachrichtigungen',
      children: [
        { columnGroupShow: "closed", width: 180 , cellRenderer: 'agCheckboxCellRenderer', valueGetter: (data: any) => { return Object.values(data.data.settings).filter(v => typeof v == 'boolean').some((x: any) => x)}, type: 'boolean' },
        { field: 'settings.sendSystemAccessMails', headerName: 'Schlüssesystemzugriff', editable: true, columnGroupShow: "open" },
        { field: 'settings.sendSystemUpdateMails', headerName: 'Schließsystemupdates', editable: true, columnGroupShow: "open" },
        { field: 'settings.sendUserDisabledMails', headerName: 'User deaktiviert', editable: true, columnGroupShow: "open" }
      ]
    },
    ],
    loading: true,
    overlayLoadingTemplate: 'Lade Daten...'
  }

  ngOnInit(): void {
    
  }

  deleteUser(id: string) {
    if ( confirm('Soll der Benutzer wirklich gelöscht werden?')) {
      this.api.deleteUser(id)
      .pipe(
        this.toast.observe({
          loading: 'löschen...',
          success: 'Benutzer gelöscht',
          error: 'Benutzer konnte nicht gelöscht werden!'
        })
      )
      .subscribe({
        next: () => {
          this.loadUsers();
        }
      })

    }
  }


  loadUsers() {
    this.gridApi.setGridOption("loading", true);
    this.api.getAllUsers().subscribe({
      next: n => {
        this.gridApi.setGridOption("rowData", n)
        this.gridApi.setGridOption("loading", false);
      },
      error: () => {
        this.toast.error('Benutzer konnten nicht geladen werden!')
        this.gridApi.setGridOption("loading", false);
      }
    })
  }

  cellEditEnd(params: CellEditingStoppedEvent, self: AllUsersComponent) {
    if (!params.valueChanged) { return; }

    self.api.saveUser(params.data)
    .pipe(
      self.toast.observe({
        loading: 'speichern...',
        success: 'Änderungen gespeichert',
        error: 'Änderungen konnten nicht gespeichert werden!'
      })
    ).subscribe({
      error: () => {
        const data = self.gridApi.getRowNode(params.node.id as string);
        data?.setDataValue(params.colDef.field as string, params.oldValue)
      }
    });
  }

  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api;
    const self = this;
    this.gridApi.addEventListener("cellEditingStopped", evt => this.cellEditEnd(evt, self))
    this.loadUsers();
  }

}