103 lines
3.4 KiB
TypeScript
103 lines
3.4 KiB
TypeScript
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';
|
|
|
|
@Component({
|
|
selector: 'app-all-users',
|
|
standalone: true,
|
|
imports: [AgGridAngular],
|
|
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') : '-'
|
|
}
|
|
],
|
|
loading: true,
|
|
overlayLoadingTemplate: 'Lade Daten...'
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
}
|
|
|
|
|
|
loadUsers() {
|
|
this.api.getAllUsers().subscribe({
|
|
next: n => {
|
|
this.gridApi.setGridOption("rowData", n)
|
|
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();
|
|
console.log(params)
|
|
}
|
|
|
|
}
|