118 lines
3.7 KiB
TypeScript
118 lines
3.7 KiB
TypeScript
import { Component, OnInit } from '@angular/core';
|
|
import { HttpClient } from '@angular/common/http';
|
|
import { MatDialog } from '@angular/material/dialog';
|
|
import { ToastrService } from 'ngx-toastr';
|
|
import { CreateCommandGroupComponent } from './create-command-group/create-command-group.component';
|
|
import { DetailCommandGroupComponent } from './detail-command-group/detail-command-group.component';
|
|
import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component';
|
|
import { MatTableDataSource } from "@angular/material/table";
|
|
import { DatePipe } from "@angular/common";
|
|
|
|
@Component({
|
|
selector: 'app-commands-groups',
|
|
templateUrl: './commands-groups.component.html',
|
|
styleUrls: ['./commands-groups.component.css']
|
|
})
|
|
export class CommandsGroupsComponent implements OnInit {
|
|
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
|
|
dataSource = new MatTableDataSource<any>();
|
|
filters: { [key: string]: string | boolean } = {};
|
|
length: number = 0;
|
|
itemsPerPage: number = 20;
|
|
page: number = 0;
|
|
pageSizeOptions: number[] = [10, 20, 40, 100];
|
|
datePipe: DatePipe = new DatePipe('es-ES');
|
|
loading: boolean = false;
|
|
columns = [
|
|
{
|
|
columnDef: 'id',
|
|
header: 'ID',
|
|
cell: (group: any) => `${group.id}`,
|
|
},
|
|
{
|
|
columnDef: 'name',
|
|
header: 'Nombre',
|
|
cell: (group: any) => `${group.name}`
|
|
},
|
|
{
|
|
columnDef: 'commands',
|
|
header: 'Lista de comandos',
|
|
cell: (group: any) => `${group.commands}`
|
|
},
|
|
{
|
|
columnDef: 'createdAt',
|
|
header: 'Fecha de creación',
|
|
cell: (group: any) => `${this.datePipe.transform(group.createdAt, 'dd/MM/yyyy hh:mm:ss')}`,
|
|
}
|
|
];
|
|
displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
|
|
private apiUrl = `${this.baseUrl}/command-groups`;
|
|
|
|
constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService) {}
|
|
|
|
ngOnInit(): void {
|
|
this.search();
|
|
}
|
|
|
|
search(): void {
|
|
this.loading = true;
|
|
this.http.get<any>(`${this.apiUrl}?page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`, { params: this.filters }).subscribe(
|
|
(data) => {
|
|
this.dataSource.data = data['hydra:member'];
|
|
this.length = data['hydra:totalItems'];
|
|
this.loading = false;
|
|
},
|
|
(error) => {
|
|
console.error('Error fetching command groups', error);
|
|
this.loading = false;
|
|
}
|
|
);
|
|
}
|
|
|
|
viewGroupDetails(group: any): void {
|
|
this.dialog.open(DetailCommandGroupComponent, {
|
|
width: '800px',
|
|
data: group,
|
|
}).afterClosed().subscribe(() => this.search());
|
|
}
|
|
|
|
openCreateCommandGroupModal(): void {
|
|
this.dialog.open(CreateCommandGroupComponent, {
|
|
width: '700px',
|
|
}).afterClosed().subscribe(() => this.search());
|
|
}
|
|
|
|
editCommandGroup(group: any): void {
|
|
this.dialog.open(CreateCommandGroupComponent, {
|
|
width: '700px',
|
|
data: { group },
|
|
}).afterClosed().subscribe(() => this.search());
|
|
}
|
|
|
|
deleteCommandGroup(group: any): void {
|
|
this.dialog.open(DeleteModalComponent, {
|
|
width: '300px',
|
|
data: { name: group.name },
|
|
}).afterClosed().subscribe((result) => {
|
|
if (result) {
|
|
this.http.delete(`${this.apiUrl}/${group.uuid}`).subscribe({
|
|
next: () => {
|
|
this.toastService.success('Grupo de comandos eliminado con éxito');
|
|
this.search();
|
|
},
|
|
error: (error) => {
|
|
console.error('Error al eliminar el grupo de comandos:', error);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
onPageChange(event: any): void {
|
|
this.page = event.pageIndex;
|
|
this.itemsPerPage = event.pageSize;
|
|
this.length = event.length;
|
|
this.search();
|
|
}
|
|
}
|