90 lines
2.4 KiB
TypeScript
90 lines
2.4 KiB
TypeScript
import { Component, OnInit } from '@angular/core';
|
|
import { MatDialog } from '@angular/material/dialog';
|
|
import { HttpClient } from '@angular/common/http';
|
|
import { MatTableDataSource } from '@angular/material/table';
|
|
import { ToastrService } from 'ngx-toastr';
|
|
import { DatePipe } from '@angular/common';
|
|
import { CreateImageComponent } from './create-image/create-image.component';
|
|
|
|
@Component({
|
|
selector: 'app-images',
|
|
templateUrl: './images.component.html',
|
|
styleUrls: ['./images.component.css']
|
|
})
|
|
export class ImagesComponent implements OnInit {
|
|
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
|
|
dataSource = new MatTableDataSource<any>();
|
|
length: number = 0;
|
|
itemsPerPage: number = 10;
|
|
page: number = 1;
|
|
loading: boolean = false;
|
|
filters: { [key: string]: string } = {};
|
|
datePipe: DatePipe = new DatePipe('es-ES');
|
|
columns = [
|
|
{
|
|
columnDef: 'uuid',
|
|
header: 'UUID',
|
|
cell: (image: any) => `${image.uuid}`
|
|
},
|
|
{
|
|
columnDef: 'name',
|
|
header: 'Nombre de imagen',
|
|
cell: (image: any) => `${image.name}`
|
|
},
|
|
{
|
|
columnDef: 'downloadUrl',
|
|
header: 'Url descarga',
|
|
cell: (image: any) => `${image.downloadUrl}`
|
|
},
|
|
{
|
|
columnDef: 'createdAt',
|
|
header: 'Fecha de creación',
|
|
cell: (image: any) => `${this.datePipe.transform(image.createdAt, 'dd/MM/yyyy hh:mm:ss')}`
|
|
}
|
|
];
|
|
displayedColumns = [...this.columns.map(column => column.columnDef)];
|
|
|
|
private apiUrl = `${this.baseUrl}/images`;
|
|
|
|
constructor(
|
|
public dialog: MatDialog,
|
|
private http: HttpClient,
|
|
private toastService: ToastrService
|
|
) {}
|
|
|
|
ngOnInit(): void {
|
|
this.search();
|
|
}
|
|
|
|
addImage(): void {
|
|
const dialogRef = this.dialog.open(CreateImageComponent, {
|
|
width: '400px'
|
|
});
|
|
|
|
dialogRef.afterClosed().subscribe(() => {
|
|
this.search();
|
|
});
|
|
}
|
|
|
|
search(): void {
|
|
this.loading = true;
|
|
this.http.get<any>(`${this.apiUrl}?page=${this.page}&itemsPerPage=${this.itemsPerPage}&filters=${JSON.stringify(this.filters)}`).subscribe(
|
|
data => {
|
|
this.dataSource.data = data['hydra:member'];
|
|
this.length = data['hydra:totalItems'];
|
|
this.loading = false;
|
|
},
|
|
error => {
|
|
console.error('Error fetching images', error);
|
|
this.loading = false;
|
|
}
|
|
);
|
|
}
|
|
|
|
onPageChange(event: any): void {
|
|
this.page = event.pageIndex;
|
|
this.itemsPerPage = event.pageSize;
|
|
this.search();
|
|
}
|
|
}
|