133 lines
3.9 KiB
TypeScript
133 lines
3.9 KiB
TypeScript
import {Component, signal} from '@angular/core';
|
|
import {MatTableDataSource} from "@angular/material/table";
|
|
import {DatePipe} from "@angular/common";
|
|
import {MatDialog} from "@angular/material/dialog";
|
|
import {HttpClient} from "@angular/common/http";
|
|
import {DataService} from "../software/data.service";
|
|
import {ToastrService} from "ngx-toastr";
|
|
import {CreateSoftwareComponent} from "../software/create-software/create-software.component";
|
|
import {DeleteModalComponent} from "../../shared/delete_modal/delete-modal/delete-modal.component";
|
|
import {PageEvent} from "@angular/material/paginator";
|
|
import {CreateSoftwareProfileComponent} from "./create-software-profile/create-software-profile.component";
|
|
|
|
@Component({
|
|
selector: 'app-software-profile',
|
|
templateUrl: './software-profile.component.html',
|
|
styleUrl: './software-profile.component.css'
|
|
})
|
|
export class SoftwareProfileComponent {
|
|
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
|
|
images: { downloadUrl: string; name: string; uuid: string }[] = [];
|
|
dataSource = new MatTableDataSource<any>();
|
|
length: number = 0;
|
|
itemsPerPage: number = 10;
|
|
page: number = 0;
|
|
pageSizeOptions: number[] = [5, 10, 20, 40, 100];
|
|
loading:boolean = false;
|
|
filters: { [key: string]: string } = {};
|
|
alertMessage: string | null = null;
|
|
readonly panelOpenState = signal(false);
|
|
datePipe: DatePipe = new DatePipe('es-ES');
|
|
columns = [
|
|
{
|
|
columnDef: 'id',
|
|
header: 'ID',
|
|
cell: (software: any) => `${software.id}`,
|
|
},
|
|
{
|
|
columnDef: 'description',
|
|
header: 'Descripción',
|
|
cell: (software: any) => `${software.description}`
|
|
},
|
|
{
|
|
columnDef: 'operativeSystem',
|
|
header: 'Sistema Operativo',
|
|
cell: (software: any) => `${software.operativeSystem?.name}`
|
|
},
|
|
{
|
|
columnDef: 'createdAt',
|
|
header: 'Fecha de creación',
|
|
cell: (software: any) => `${this.datePipe.transform(software.createdAt, 'dd/MM/yyyy hh:mm:ss')}`,
|
|
}
|
|
];
|
|
displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
|
|
|
|
private apiUrl = `${this.baseUrl}/software-profiles`;
|
|
|
|
constructor(
|
|
public dialog: MatDialog,
|
|
private http: HttpClient,
|
|
private dataService: DataService,
|
|
private toastService: ToastrService
|
|
) {}
|
|
|
|
ngOnInit(): void {
|
|
this.search();
|
|
}
|
|
|
|
addSoftware(): void {
|
|
const dialogRef = this.dialog.open(CreateSoftwareProfileComponent, {
|
|
width: '600px'
|
|
});
|
|
|
|
dialogRef.afterClosed().subscribe(result => {
|
|
this.search();
|
|
});
|
|
}
|
|
|
|
search(): void {
|
|
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'];
|
|
},
|
|
(error) => {
|
|
console.error('Error fetching commands', error);
|
|
}
|
|
);
|
|
}
|
|
|
|
editSoftware(softwareProfile: any): void {
|
|
const dialogRef = this.dialog.open(CreateSoftwareProfileComponent, {
|
|
width: '600px',
|
|
data: softwareProfile['@id']
|
|
});
|
|
|
|
dialogRef.afterClosed().subscribe(result => {
|
|
this.search();
|
|
});
|
|
}
|
|
|
|
deleteSoftware(calendar: any): void {
|
|
const dialogRef = this.dialog.open(DeleteModalComponent, {
|
|
width: '400px',
|
|
data: { name: calendar.name }
|
|
});
|
|
|
|
dialogRef.afterClosed().subscribe(result => {
|
|
if (result) {
|
|
const apiUrl = `${this.baseUrl}${calendar['@id']}`;
|
|
|
|
this.http.delete(apiUrl).subscribe({
|
|
next: () => {
|
|
this.search();
|
|
this.toastService.success('Software deleted successfully');
|
|
},
|
|
error: (error) => {
|
|
this.toastService.error('Error deleting calendar');
|
|
}
|
|
});
|
|
} else {
|
|
console.log('calendar deletion cancelled');
|
|
}
|
|
});
|
|
}
|
|
|
|
onPageChange(event: PageEvent) {
|
|
this.page = event.pageIndex;
|
|
this.itemsPerPage = event.pageSize;
|
|
this.length = event.length;
|
|
this.search();
|
|
}
|
|
}
|