Improvements. UX styles and api calls updated

oggui/calendar
Manuel Aranda Rosales 2024-10-04 10:32:03 +02:00
parent 664091136d
commit 275064d8f5
18 changed files with 59 additions and 36 deletions

View File

@ -1,5 +1,8 @@
<div class="header-container">
<h2 class="title" i18n="@@adminCommandsTitle">Trazas de comandos y procedimientos</h2>
<div class="images-button-row">
<button mat-flat-button color="primary" (click)="resetFilters()">Reiniciar filtros</button>
</div>
</div>
<mat-divider class="divider"></mat-divider>
<div class="search-container">

View File

@ -149,6 +149,12 @@ export class TaskLogsComponent implements OnInit {
);
}
resetFilters() {
this.loading = true;
this.filters = {};
this.loadTraces();
}
groupByCommandId(traces: any[]): any[] {
const grouped: { [key: string]: any[] } = {};
@ -167,8 +173,9 @@ export class TaskLogsComponent implements OnInit {
}
onPageChange(event: any): void {
this.page = event.pageIndex + 1;
this.page = event.pageIndex;
this.itemsPerPage = event.pageSize;
this.length = event.length;
this.loadTraces();
}
}

View File

@ -25,10 +25,6 @@
<input matInput placeholder="Unidad organizativa" (input)="applyFilter()" [(ngModel)]="filterName" i18n-placeholder="@@namePlaceholder">
</mat-form-field>
<!-- FILTROS UNIDAD ORGANIZATIVA-->
<ng-container *ngIf="selectedFilter1 === 'ou'">
<mat-form-field [disabled]="selectedFilter1 === 'ou'">

View File

@ -50,7 +50,7 @@ export class AdvancedSearchComponent {
savedFilterNames: any[] = [];
length: number = 0;
itemsPerPage: number = 10;
page: number = 1;
page: number = 0;
pageSizeOptions: number[] = [5, 10, 25, 100];
selectedElements: any[] = [];
isAllSelected: boolean = false;
@ -301,7 +301,7 @@ export class AdvancedSearchComponent {
}
applyFilter() {
this.dataService.getFilteredResults(this.selectedFilter1, this.selectedFilter2, this.filterName, this.filterIP, this.filterMAC, this.page, this.itemsPerPage)
this.dataService.getFilteredResults(this.selectedFilter1, this.selectedFilter2, this.filterName, this.filterIP, this.filterMAC, this.page + 1, this.itemsPerPage)
.subscribe(
response => {
this.filteredResults = response.results;
@ -317,6 +317,7 @@ export class AdvancedSearchComponent {
onPageChange(event: PageEvent) {
this.page = event.pageIndex;
this.itemsPerPage = event.pageSize;
this.length = event.length;
this.applyFilter();
}

View File

@ -12,15 +12,23 @@
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 5px;
box-sizing: border-box;
}
.search-string {
flex: 1;
padding: 5px;
}
.divider {
margin: 20px 0;
}
.mat-elevation-z8 {
box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
}
.search-boolean {
flex: 1;
padding: 5px;

View File

@ -34,7 +34,7 @@
</mat-select>
</mat-form-field>
</div>
<table mat-table [dataSource]="dataSource">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let image" >

View File

@ -142,7 +142,7 @@ export class ClientTabViewComponent {
loadOrganizationalUnits() {
this.loading = true;
this.http.get<any>( `${this.baseUrl}/organizational-units?&page=1&itemsPerPage=10000`).subscribe(
this.http.get<any>( `${this.baseUrl}/organizational-units?&page=1&itemsPerPage=10`).subscribe(
response => {
this.organizationalUnits = response['hydra:member'];
this.loading = false;

View File

@ -12,6 +12,7 @@
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 5px;
box-sizing: border-box;
}
@ -26,6 +27,10 @@
padding: 5px;
}
.mat-elevation-z8 {
box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
}
.search-select {
flex: 2;
padding: 5px;

View File

@ -24,7 +24,7 @@
</mat-select>
</mat-form-field>
</div>
<table mat-table [dataSource]="dataSource">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let ou" >

View File

@ -91,7 +91,7 @@ export class OrganizationalUnitTabViewComponent {
this.length = data['hydra:totalItems'];
},
(error) => {
console.error('Error fetching commands', error);
console.error('Error fetching ou', error);
}
);
}

View File

@ -161,7 +161,7 @@ export class GroupsComponent implements OnInit {
this.dataService.getOrganizationalUnits().subscribe(
data => {
this.organizationalUnits = data
this.loadChildrenAndClients(parent.id);
this.loadChildrenAndClients(parent?.id);
},
error => console.error('Error fetching unidades organizativas', error)
);

View File

@ -1,10 +1,10 @@
<h1 mat-dialog-title i18n="@@actions-modal-title">Acciones</h1>
<div class="button-container">
<div *ngFor="let row of chunkArray(commands, 4)" class="button-row">
<button
*ngFor="let command of row"
mat-flat-button
color="primary"
<button
*ngFor="let command of row"
mat-flat-button
color="primary"
class="button-action"
(click)="onCommandClick(command)">
{{ command.name }}

View File

@ -65,7 +65,7 @@ export class CreateImageComponent implements OnInit {
},
error: (error) => {
console.error('Error:', error);
this.toastService.error('Error updating image');
this.toastService.error(error.error['hydra:description'] || 'Error updating image');
}
});
} else {
@ -77,7 +77,7 @@ export class CreateImageComponent implements OnInit {
},
error: (error) => {
console.error('Error:', error);
this.toastService.error('Error creating image');
this.toastService.error(error.error['hydra:description'] || 'Error creating image');
}
});
}

View File

@ -162,14 +162,14 @@ export class ImagesComponent implements OnInit {
width: '700px',
data: image
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
this.search();
}
});
}
applyFilter() {
this.http.get<any>(`${this.apiUrl}?page=${this.page}&itemsPerPage=${this.itemsPerPage}`).subscribe({
@ -200,10 +200,10 @@ export class ImagesComponent implements OnInit {
}
getIcon(): { name: string, color: string } {
if (Number(this.alertMessage) === this.length) {
return { name: 'check_circle', color: 'green' }; // Icono de check verde
if (this.alertMessage) {
return { name: 'check_circle', color: 'green' };
} else {
return { name: 'cancel', color: 'red' }; // Icono de cruz roja
return { name: 'cancel', color: 'red' };
}
}

View File

@ -1,6 +1,5 @@
form {
max-width: 600px;
margin: 20px auto;
padding: 20px;
}
@ -49,4 +48,4 @@ h3 {
margin-top: 30px;
font-size: 1.2rem;
color: #000000;
}
}

View File

@ -2,23 +2,23 @@
<mat-dialog-content>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Nombre</mat-label>
<input matInput [(ngModel)]="name" placeholder="Nombre de la subred">
<input matInput [(ngModel)]="name" placeholder="Nombre de la subred" required>
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Netmask</mat-label>
<input matInput [(ngModel)]="netmask" placeholder="Netmask">
<input matInput [(ngModel)]="netmask" placeholder="Netmask" required>
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Dirección IP</mat-label>
<input matInput [(ngModel)]="ipAddress" placeholder="Dirección IP">
<input matInput [(ngModel)]="ipAddress" placeholder="Dirección IP" required>
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Next Server</mat-label>
<input matInput [(ngModel)]="nextServer" placeholder="Next Server">
<input matInput [(ngModel)]="nextServer" placeholder="Next Server" required>
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Boot File Name</mat-label>
<input matInput [(ngModel)]="bootFileName" placeholder="Boot File Name">
<input matInput [(ngModel)]="bootFileName" placeholder="Boot File Name" required>
</mat-form-field>
</mat-dialog-content>
<mat-dialog-actions align="end">

View File

@ -24,7 +24,7 @@ export class CreateSubnetComponent implements OnInit {
) { }
ngOnInit(): void {
}
onNoClick(): void {
@ -45,11 +45,11 @@ export class CreateSubnetComponent implements OnInit {
next: (response) => {
console.log('Success:', response);
this.toastService.success('Configuración de red añadida exitosamente');
this.dialogRef.close();
this.dialogRef.close();
},
error: (error) => {
console.error('Error:', error);
this.toastService.error('Error al añadir la configuración de red');
this.toastService.error(error.error['hydra:description']);
}
});
}

View File

@ -150,7 +150,11 @@ export class OgDhcpSubnetsComponent {
this.itemsPerPage = event.pageSize;
}
getIcon() {
return { name: 'info', color: 'blue' };
getIcon(): { name: string, color: string } {
if (this.alertMessage) {
return { name: 'check_circle', color: 'green' };
} else {
return { name: 'cancel', color: 'red' };
}
}
}