Added task and commandGroup components
parent
30cd43ff0f
commit
8f49e39bd5
|
|
@ -90,6 +90,10 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
|
|||
import { MatNativeDateModule } from '@angular/material/core';
|
||||
import { CommandsGroupsComponent } from './components/commands/commands-groups/commands-groups.component';
|
||||
import { CommandsTaskComponent } from './components/commands/commands-task/commands-task.component';
|
||||
import { CreateCommandGroupComponent } from './components/commands/commands-groups/create-command-group/create-command-group.component';
|
||||
import { DetailCommandGroupComponent } from './components/commands/commands-groups/detail-command-group/detail-command-group.component';
|
||||
import { CreateTaskComponent } from './components/commands/commands-task/create-task/create-task.component';
|
||||
import { DetailTaskComponent } from './components/commands/commands-task/detail-task/detail-task.component';
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
|
|
@ -136,7 +140,11 @@ import { CommandsTaskComponent } from './components/commands/commands-task/comma
|
|||
CommandDetailComponent,
|
||||
CreateCommandComponent,
|
||||
CommandsGroupsComponent,
|
||||
CommandsTaskComponent
|
||||
CommandsTaskComponent,
|
||||
CreateCommandGroupComponent,
|
||||
DetailCommandGroupComponent,
|
||||
CreateTaskComponent,
|
||||
DetailTaskComponent
|
||||
],
|
||||
bootstrap: [AppComponent],
|
||||
imports: [BrowserModule,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
.commands-list {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.command-item {
|
||||
cursor: pointer;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.command-item:hover {
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
|
||||
.command-details {
|
||||
padding: 20px;
|
||||
border: 1px solid #ddd;
|
||||
background-color: #f4f4f4;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.script-display {
|
||||
margin-top: 20px;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
.mat-elevation-z8{
|
||||
margin-top: 20px;
|
||||
}
|
||||
tr:hover {
|
||||
background-color: rgba(219, 219, 219, 0.219);
|
||||
}
|
||||
|
||||
.detailBtn{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-string {
|
||||
flex: 2;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.search-boolean {
|
||||
flex: 1;
|
||||
padding: 5px;
|
||||
}
|
||||
|
|
@ -1 +1,72 @@
|
|||
<p>commands-groups works!</p>
|
||||
<div class="header-container">
|
||||
<h2 class="title" i18n="@@adminCommandGroupsTitle">Administrar Grupos de Comandos</h2>
|
||||
<div class="command-groups-button-row">
|
||||
<button mat-flat-button color="primary" (click)="openCreateCommandGroupModal()">Añadir Grupo de Comandos</button>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider class="divider"></mat-divider>
|
||||
<div class="search-container">
|
||||
<mat-form-field appearance="fill" class="search-string">
|
||||
<mat-label i18n="@@searchLabel">Buscar nombre de grupo</mat-label>
|
||||
<input matInput placeholder="Búsqueda" [(ngModel)]="filters['name']" (keyup.enter)="search()" i18n-placeholder="@@searchPlaceholder">
|
||||
<mat-icon matSuffix>search</mat-icon>
|
||||
<mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<table mat-table [dataSource]="commandGroups" class="mat-elevation-z8">
|
||||
<!-- Nombre del grupo columna -->
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef> Nombre del grupo </th>
|
||||
<td mat-cell *matCellDef="let group"> {{ group.name }} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Creado por columna -->
|
||||
<ng-container matColumnDef="createdBy">
|
||||
<th mat-header-cell *matHeaderCellDef> Creado por </th>
|
||||
<td mat-cell *matCellDef="let group"> {{ group.createdBy }} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Fecha de creación columna -->
|
||||
<ng-container matColumnDef="createdAt">
|
||||
<th mat-header-cell *matHeaderCellDef> Fecha de creación </th>
|
||||
<td mat-cell *matCellDef="let group"> {{ group.createdAt | date:'short' }} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Columna para el menú de acciones -->
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef> Acciones </th>
|
||||
<td mat-cell *matCellDef="let group">
|
||||
<button mat-icon-button [matMenuTriggerFor]="menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<mat-menu #menu="matMenu">
|
||||
<button mat-menu-item (click)="viewGroupDetails(group)">
|
||||
<mat-icon>info</mat-icon>
|
||||
<span>Detalles</span>
|
||||
</button>
|
||||
<button mat-menu-item (click)="editCommandGroup(group)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
<span>Editar</span>
|
||||
</button>
|
||||
<button mat-menu-item (click)="deleteCommandGroup(group)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
<span>Eliminar</span>
|
||||
</button>
|
||||
</mat-menu>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
|
||||
<div class="paginator-container">
|
||||
<mat-paginator [length]="length"
|
||||
[pageSize]="itemsPerPage"
|
||||
[pageIndex]="page"
|
||||
[pageSizeOptions]="pageSizeOptions"
|
||||
(page)="onPageChange($event)">
|
||||
</mat-paginator>
|
||||
</div>
|
||||
|
||||
|
|
@ -1,10 +1,87 @@
|
|||
import { Component } from '@angular/core';
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector: 'app-commands-groups',
|
||||
templateUrl: './commands-groups.component.html',
|
||||
styleUrl: './commands-groups.component.css'
|
||||
styleUrls: ['./commands-groups.component.css']
|
||||
})
|
||||
export class CommandsGroupsComponent {
|
||||
export class CommandsGroupsComponent implements OnInit {
|
||||
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
|
||||
commandGroups: any[] = [];
|
||||
filters: { [key: string]: string | boolean } = {};
|
||||
length: number = 0;
|
||||
itemsPerPage: number = 10;
|
||||
page: number = 1;
|
||||
pageSizeOptions: number[] = [5, 10, 20, 40, 100];
|
||||
displayedColumns: string[] = ['name', 'createdBy', 'createdAt', 'actions'];
|
||||
private apiUrl = `${this.baseUrl}/command-groups`;
|
||||
|
||||
constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.search();
|
||||
}
|
||||
|
||||
search(): void {
|
||||
this.http.get<any>(`${this.apiUrl}?page=${this.page}&itemsPerPage=${this.itemsPerPage}`, { params: this.filters }).subscribe(
|
||||
(data) => {
|
||||
this.commandGroups = data['hydra:member'];
|
||||
this.length = data['hydra:totalItems'];
|
||||
},
|
||||
(error) => {
|
||||
console.error('Error fetching command groups', error);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
viewGroupDetails(group: any): void {
|
||||
this.dialog.open(DetailCommandGroupComponent, {
|
||||
width: '800px',
|
||||
data: group,
|
||||
}).afterClosed().subscribe(() => this.search());
|
||||
}
|
||||
|
||||
openCreateCommandGroupModal(): void {
|
||||
this.dialog.open(CreateCommandGroupComponent, {
|
||||
width: '600px',
|
||||
}).afterClosed().subscribe(() => this.search());
|
||||
}
|
||||
|
||||
editCommandGroup(group: any): void {
|
||||
this.dialog.open(CreateCommandGroupComponent, {
|
||||
width: '600px',
|
||||
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.search();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
.create-command-group-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.command-group-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.command-selection {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.available-commands, .selected-commands {
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.selected-commands-list {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.commands-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.command-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.remove-icon {
|
||||
cursor: pointer;
|
||||
color: #f44336; /* Rojo para eliminar */
|
||||
}
|
||||
|
||||
.chevron-icon {
|
||||
margin: 0 10px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.command-group-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<div class="create-command-group-container">
|
||||
<h2>Crear Grupo de Comandos</h2>
|
||||
|
||||
<form class="command-group-form" (ngSubmit)="onSubmit()">
|
||||
<mat-form-field>
|
||||
<mat-label>Nombre del Grupo</mat-label>
|
||||
<input matInput [(ngModel)]="groupName" name="groupName" required />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Posición</mat-label>
|
||||
<input matInput type="number" [(ngModel)]="position" name="position" required min="1" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-slide-toggle [(ngModel)]="enabled" name="enabled">Habilitado</mat-slide-toggle>
|
||||
|
||||
<div class="command-selection">
|
||||
<div class="available-commands">
|
||||
<h3>Comandos Disponibles</h3>
|
||||
<table mat-table [dataSource]="availableCommands" class="mat-elevation-z8">
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef> Nombre </th>
|
||||
<td mat-cell *matCellDef="let command"> {{ command.name }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef> Acciones </th>
|
||||
<td mat-cell *matCellDef="let command">
|
||||
<button mat-icon-button type="button" (click)="addCommand(command)">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="['name', 'actions']"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: ['name', 'actions'];"></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="selected-commands">
|
||||
<h3>Comandos Seleccionados</h3>
|
||||
<div class="selected-commands-list">
|
||||
<div class="commands-container">
|
||||
<ng-container *ngFor="let command of selectedCommands; let last = last">
|
||||
<div class="command-item">
|
||||
{{ command.name }}
|
||||
<mat-icon class="remove-icon" (click)="removeCommand(command)">close</mat-icon>
|
||||
</div>
|
||||
<ng-container *ngIf="!last">
|
||||
<mat-icon class="chevron-icon">chevron_right</mat-icon>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="command-group-actions">
|
||||
<button mat-flat-button color="primary" type="submit">Crear Grupo</button>
|
||||
<button mat-flat-button color="warn" (click)="close()">Cancelar</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { CreateCommandGroupComponent } from './create-command-group.component';
|
||||
|
||||
describe('CreateCommandGroupComponent', () => {
|
||||
let component: CreateCommandGroupComponent;
|
||||
let fixture: ComponentFixture<CreateCommandGroupComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [CreateCommandGroupComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(CreateCommandGroupComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { MatDialogRef } from '@angular/material/dialog';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
|
||||
@Component({
|
||||
selector: 'app-create-command-group',
|
||||
templateUrl: './create-command-group.component.html',
|
||||
styleUrls: ['./create-command-group.component.css']
|
||||
})
|
||||
export class CreateCommandGroupComponent implements OnInit {
|
||||
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
|
||||
availableCommands: any[] = [];
|
||||
selectedCommands: any[] = [];
|
||||
groupName: string = '';
|
||||
position: number = 1;
|
||||
enabled: boolean = true;
|
||||
|
||||
private apiUrl = 'http://127.0.0.1:8001/commands';
|
||||
|
||||
constructor(
|
||||
private http: HttpClient,
|
||||
private dialogRef: MatDialogRef<CreateCommandGroupComponent>,
|
||||
private toastService: ToastrService
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadAvailableCommands();
|
||||
}
|
||||
|
||||
loadAvailableCommands(): void {
|
||||
this.http.get<any>(this.apiUrl).subscribe(
|
||||
(data) => {
|
||||
this.availableCommands = data['hydra:member'];
|
||||
},
|
||||
(error) => {
|
||||
console.error('Error fetching available commands', error);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
addCommand(command: any): void {
|
||||
this.selectedCommands.push(command);
|
||||
}
|
||||
|
||||
removeCommand(command: any): void {
|
||||
const index = this.selectedCommands.indexOf(command);
|
||||
if (index >= 0) {
|
||||
this.selectedCommands.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
onSubmit(): void {
|
||||
const payload = {
|
||||
name: this.groupName,
|
||||
commands: this.selectedCommands.map(cmd => cmd['@id']),
|
||||
position: this.position,
|
||||
enabled: this.enabled
|
||||
};
|
||||
|
||||
console.log('Payload', payload);
|
||||
this.http.post('http://127.0.0.1:8001/command-groups', payload).subscribe({
|
||||
next: () => {
|
||||
this.toastService.success('Grupo de comandos creado con éxito');
|
||||
this.dialogRef.close();
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error creando el grupo de comandos', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
close(): void {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
.detail-command-group-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.mat-card {
|
||||
margin: 20px 0;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.mat-card-header {
|
||||
background-color: #f5f5f5;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.mat-card-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mat-card-subtitle {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.mat-card-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
th.mat-header-cell {
|
||||
background-color: #f5f5f5;
|
||||
font-weight: bold;
|
||||
border-bottom: 2px solid #ccc;
|
||||
}
|
||||
|
||||
td.mat-cell {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background-color: rgba(219, 219, 219, 0.5);
|
||||
}
|
||||
|
||||
.mat-card-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #3f51b5; /* Color primario */
|
||||
color: white;
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #2c387e; /* Color primario oscuro */
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.mat-card {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.cancel-button:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.create-command-group-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.command-group-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.command-selection {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.available-commands, .selected-commands {
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.selected-commands-list {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.commands-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.command-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.remove-icon {
|
||||
cursor: pointer;
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.chevron-icon {
|
||||
margin: 0 10px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.command-group-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<div class="detail-command-group-container">
|
||||
<h2>Detalles del Grupo de Comandos</h2>
|
||||
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>{{ data.name }}</mat-card-title>
|
||||
<mat-card-subtitle>Creado por: {{ data.createdBy }}</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
|
||||
<mat-card-content>
|
||||
<p><strong>ID del Grupo:</strong> {{ data.uuid }}</p>
|
||||
<p><strong>Posición:</strong> {{ data.position }}</p>
|
||||
<p><strong>Fecha de Creación:</strong> {{ data.createdAt | date:'short' }}</p>
|
||||
|
||||
<h3>Comandos Incluidos:</h3>
|
||||
<table mat-table [dataSource]="data.commands" class="mat-elevation-z8">
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef> Nombre </th>
|
||||
<td mat-cell *matCellDef="let command"> {{ command.name }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="uuid">
|
||||
<th mat-header-cell *matHeaderCellDef> UUID </th>
|
||||
<td mat-cell *matCellDef="let command"> {{ command.uuid }} </td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="['name', 'uuid']"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: ['name', 'uuid'];"></tr>
|
||||
</table>
|
||||
</mat-card-content>
|
||||
|
||||
</mat-card>
|
||||
<div class="command-group-actions">
|
||||
<button mat-flat-button color="warn" (click)="close()">Cancelar</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DetailCommandGroupComponent } from './detail-command-group.component';
|
||||
|
||||
describe('DetailCommandGroupComponent', () => {
|
||||
let component: DetailCommandGroupComponent;
|
||||
let fixture: ComponentFixture<DetailCommandGroupComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [DetailCommandGroupComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(DetailCommandGroupComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import { Component, Inject } from '@angular/core';
|
||||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
||||
|
||||
@Component({
|
||||
selector: 'app-detail-command-group',
|
||||
templateUrl: './detail-command-group.component.html',
|
||||
styleUrls: ['./detail-command-group.component.css']
|
||||
})
|
||||
export class DetailCommandGroupComponent {
|
||||
constructor(
|
||||
@Inject(MAT_DIALOG_DATA) public data: any,
|
||||
private dialogRef: MatDialogRef<DetailCommandGroupComponent>
|
||||
) {}
|
||||
|
||||
close(): void {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +1,66 @@
|
|||
<p>commands-task works!</p>
|
||||
<div class="header-container">
|
||||
<h2 class="title">Administrar Tareas</h2>
|
||||
<div class="task-button-row">
|
||||
<button mat-flat-button color="primary" (click)="openCreateTaskModal()">Añadir Tarea</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table mat-table [dataSource]="tasks" class="mat-elevation-z8">
|
||||
<!-- Nombre de la tarea -->
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef> Nombre </th>
|
||||
<td mat-cell *matCellDef="let task"> {{ task.name }} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Grupo de comandos -->
|
||||
<ng-container matColumnDef="commandGroup">
|
||||
<th mat-header-cell *matHeaderCellDef> Grupo de Comandos </th>
|
||||
<td mat-cell *matCellDef="let task"> {{ task.commandGroup.name }} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Fecha de ejecución -->
|
||||
<ng-container matColumnDef="scheduledDate">
|
||||
<th mat-header-cell *matHeaderCellDef> Fecha de Ejecución </th>
|
||||
<td mat-cell *matCellDef="let task"> {{ task.scheduledDate | date:'short' }} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Estado -->
|
||||
<ng-container matColumnDef="enabled">
|
||||
<th mat-header-cell *matHeaderCellDef> Estado </th>
|
||||
<td mat-cell *matCellDef="let task"> {{ task.enabled ? 'Habilitado' : 'Deshabilitado' }} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Acciones -->
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef> Acciones </th>
|
||||
<td mat-cell *matCellDef="let task">
|
||||
<button mat-icon-button [matMenuTriggerFor]="menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<mat-menu #menu="matMenu">
|
||||
<button mat-menu-item (click)="viewTaskDetails(task)">
|
||||
<mat-icon>info</mat-icon>
|
||||
<span>Detalles</span>
|
||||
</button>
|
||||
<button mat-menu-item (click)="editTask(task)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
<span>Editar</span>
|
||||
</button>
|
||||
<button mat-menu-item (click)="deleteTask(task)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
<span>Eliminar</span>
|
||||
</button>
|
||||
</mat-menu>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator [length]="length"
|
||||
[pageSize]="itemsPerPage"
|
||||
[pageSizeOptions]="pageSizeOptions"
|
||||
(page)="onPageChange($event)">
|
||||
</mat-paginator>
|
||||
|
||||
|
|
@ -1,10 +1,87 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
import { CreateTaskComponent } from './create-task/create-task.component';
|
||||
import { DetailTaskComponent } from './detail-task/detail-task.component';
|
||||
import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-commands-task',
|
||||
templateUrl: './commands-task.component.html',
|
||||
styleUrl: './commands-task.component.css'
|
||||
styleUrls: ['./commands-task.component.css']
|
||||
})
|
||||
export class CommandsTaskComponent {
|
||||
export class CommandsTaskComponent implements OnInit {
|
||||
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
|
||||
tasks: any[] = [];
|
||||
filters: { [key: string]: string | boolean } = {};
|
||||
length: number = 0;
|
||||
itemsPerPage: number = 10;
|
||||
page: number = 1;
|
||||
pageSizeOptions: number[] = [5, 10, 20, 40, 100];
|
||||
displayedColumns: string[] = ['name', 'commandGroup', 'scheduledDate', 'enabled', 'actions'];
|
||||
private apiUrl = `${this.baseUrl}/tasks`;
|
||||
|
||||
constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadTasks();
|
||||
}
|
||||
|
||||
loadTasks(): void {
|
||||
this.http.get<any>(`${this.apiUrl}?page=${this.page}&itemsPerPage=${this.itemsPerPage}`, { params: this.filters }).subscribe(
|
||||
(data) => {
|
||||
this.tasks = data['hydra:member'];
|
||||
this.length = data['hydra:totalItems'];
|
||||
},
|
||||
(error) => {
|
||||
console.error('Error fetching tasks', error);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
viewTaskDetails(task: any): void {
|
||||
this.dialog.open(DetailTaskComponent, {
|
||||
width: '800px',
|
||||
data: task,
|
||||
}).afterClosed().subscribe(() => this.loadTasks());
|
||||
}
|
||||
|
||||
openCreateTaskModal(): void {
|
||||
this.dialog.open(CreateTaskComponent, {
|
||||
width: '600px',
|
||||
}).afterClosed().subscribe(() => this.loadTasks());
|
||||
}
|
||||
|
||||
editTask(task: any): void {
|
||||
this.dialog.open(CreateTaskComponent, {
|
||||
width: '600px',
|
||||
data: { task },
|
||||
}).afterClosed().subscribe(() => this.loadTasks());
|
||||
}
|
||||
|
||||
deleteTask(task: any): void {
|
||||
this.dialog.open(DeleteModalComponent, {
|
||||
width: '300px',
|
||||
data: { name: task.name },
|
||||
}).afterClosed().subscribe((result) => {
|
||||
if (result) {
|
||||
this.http.delete(`${this.apiUrl}/${task.uuid}`).subscribe({
|
||||
next: () => {
|
||||
this.toastService.success('Tarea eliminada con éxito');
|
||||
this.loadTasks();
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error al eliminar la tarea:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onPageChange(event: any): void {
|
||||
this.page = event.pageIndex;
|
||||
this.itemsPerPage = event.pageSize;
|
||||
this.loadTasks();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.commands-list {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.command-item {
|
||||
padding: 10px;
|
||||
background-color: #f4f4f4;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.command-item:hover {
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<h2 mat-dialog-title>Crear Tarea</h2>
|
||||
|
||||
<mat-dialog-content [formGroup]="taskForm">
|
||||
<mat-form-field appearance="fill" class="full-width">
|
||||
<mat-label>Selecciona un Grupo de Comandos</mat-label>
|
||||
<mat-select formControlName="commandGroup" (selectionChange)="onCommandGroupChange()">
|
||||
<mat-option *ngFor="let group of availableCommandGroups" [value]="group.uuid">
|
||||
{{ group.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="taskForm.get('commandGroup')?.invalid">Este campo es obligatorio</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<div *ngIf="selectedGroupCommands.length > 0" class="commands-list">
|
||||
<h3>Comandos del Grupo Seleccionado</h3>
|
||||
<div *ngFor="let command of selectedGroupCommands" class="command-item">
|
||||
{{ command.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-form-field appearance="fill" class="full-width">
|
||||
<mat-label>Fecha de Ejecución</mat-label>
|
||||
<input matInput [matDatepicker]="picker" formControlName="date" placeholder="Selecciona una fecha">
|
||||
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker></mat-datepicker>
|
||||
<mat-error *ngIf="taskForm.get('date')?.invalid">Este campo es obligatorio</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="fill" class="full-width">
|
||||
<mat-label>Hora de Ejecución</mat-label>
|
||||
<input matInput type="time" formControlName="time" placeholder="Selecciona una hora">
|
||||
<mat-error *ngIf="taskForm.get('time')?.invalid">Este campo es obligatorio</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="fill" class="full-width">
|
||||
<mat-label>Notas</mat-label>
|
||||
<textarea matInput formControlName="notes" placeholder="Opcional"></textarea>
|
||||
</mat-form-field>
|
||||
</mat-dialog-content>
|
||||
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button (click)="close()">Cancelar</button>
|
||||
<button mat-flat-button color="primary" (click)="saveTask()">Guardar</button>
|
||||
</mat-dialog-actions>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { CreateTaskComponent } from './create-task.component';
|
||||
|
||||
describe('CreateTaskComponent', () => {
|
||||
let component: CreateTaskComponent;
|
||||
let fixture: ComponentFixture<CreateTaskComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [CreateTaskComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(CreateTaskComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
import { Component, OnInit, Inject } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-create-task',
|
||||
templateUrl: './create-task.component.html',
|
||||
styleUrls: ['./create-task.component.css']
|
||||
})
|
||||
export class CreateTaskComponent implements OnInit {
|
||||
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
|
||||
taskForm: FormGroup;
|
||||
availableCommandGroups: any[] = [];
|
||||
selectedGroupCommands: any[] = [];
|
||||
apiUrl = `${this.baseUrl}/command-tasks`;
|
||||
|
||||
constructor(
|
||||
private fb: FormBuilder,
|
||||
private http: HttpClient,
|
||||
private toastr: ToastrService,
|
||||
public dialogRef: MatDialogRef<CreateTaskComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: any
|
||||
) {
|
||||
this.taskForm = this.fb.group({
|
||||
commandGroup: ['', Validators.required],
|
||||
date: ['', Validators.required],
|
||||
time: ['', Validators.required],
|
||||
notes: ['']
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadCommandGroups();
|
||||
}
|
||||
|
||||
loadCommandGroups(): void {
|
||||
this.http.get<any>(`${this.baseUrl}/command-groups`).subscribe(
|
||||
(data) => {
|
||||
this.availableCommandGroups = data['hydra:member'];
|
||||
},
|
||||
(error) => {
|
||||
this.toastr.error('Error al cargar los grupos de comandos');
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
onCommandGroupChange(): void {
|
||||
const selectedGroupId = this.taskForm.get('commandGroup')?.value;
|
||||
this.http.get<any>(`${this.baseUrl}/command-groups/${selectedGroupId}`).subscribe(
|
||||
(data) => {
|
||||
this.selectedGroupCommands = data.commands;
|
||||
},
|
||||
(error) => {
|
||||
this.toastr.error('Error al cargar los comandos del grupo seleccionado');
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
saveTask(): void {
|
||||
if (this.taskForm.invalid) {
|
||||
this.toastr.error('Por favor, rellene todos los campos obligatorios');
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = this.taskForm.value;
|
||||
const dateTime = this.combineDateAndTime(formData.date, formData.time);
|
||||
|
||||
const payload = {
|
||||
commandGroups: '/command-groups/'+formData.commandGroup,
|
||||
commands: this.selectedGroupCommands.map(cmd => cmd['@id']),
|
||||
dateTime: dateTime,
|
||||
notes: formData.notes || ''
|
||||
};
|
||||
console.log(payload);
|
||||
stop;
|
||||
this.http.post<any>(this.apiUrl, payload).subscribe({
|
||||
next: () => {
|
||||
this.toastr.success('Tarea creada con éxito');
|
||||
this.dialogRef.close(true);
|
||||
},
|
||||
error: () => {
|
||||
this.toastr.error('Error al crear la tarea');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
combineDateAndTime(date: string, time: string): string {
|
||||
const dateObj = new Date(date);
|
||||
const [hours, minutes] = time.split(':').map(Number);
|
||||
|
||||
dateObj.setHours(hours, minutes, 0);
|
||||
return dateObj.toISOString(); // Return in ISO format (e.g., 2021-10-01T00:00:00+00:00)
|
||||
}
|
||||
|
||||
close(): void {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<p>detail-task works!</p>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DetailTaskComponent } from './detail-task.component';
|
||||
|
||||
describe('DetailTaskComponent', () => {
|
||||
let component: DetailTaskComponent;
|
||||
let fixture: ComponentFixture<DetailTaskComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [DetailTaskComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(DetailTaskComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-detail-task',
|
||||
templateUrl: './detail-task.component.html',
|
||||
styleUrl: './detail-task.component.css'
|
||||
})
|
||||
export class DetailTaskComponent {
|
||||
|
||||
}
|
||||
|
|
@ -44,4 +44,23 @@ tr:hover {
|
|||
|
||||
.detailBtn{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-string {
|
||||
flex: 2;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.search-boolean {
|
||||
flex: 1;
|
||||
padding: 5px;
|
||||
}
|
||||
|
|
@ -1,9 +1,18 @@
|
|||
<div class="header-container">
|
||||
<h2 class="title" i18n="@@subnetsTitle">Administrar comandos</h2>
|
||||
<div class="subnets-button-row">
|
||||
<h2 class="title" i18n="@@adminCommandsTitle">Administrar comandos</h2>
|
||||
<div class="command-button-row">
|
||||
<button mat-flat-button color="primary" (click)="openCreateCommandModal()">Añadir Comando</button>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider class="divider"></mat-divider>
|
||||
<div class="search-container">
|
||||
<mat-form-field appearance="fill" class="search-string">
|
||||
<mat-label i18n="@@searchLabel">Buscar nombre de comando</mat-label>
|
||||
<input matInput placeholder="Búsqueda" [(ngModel)]="filters['name']" (keyup.enter)="search()" i18n-placeholder="@@searchPlaceholder">
|
||||
<mat-icon matSuffix>search</mat-icon>
|
||||
<mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<table mat-table [dataSource]="commands" class="mat-elevation-z8">
|
||||
<!-- Nombre columna -->
|
||||
|
|
@ -51,3 +60,12 @@
|
|||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
|
||||
<div class="paginator-container">
|
||||
<mat-paginator [length]="length"
|
||||
[pageSize]="itemsPerPage"
|
||||
[pageIndex]="page"
|
||||
[pageSizeOptions]="pageSizeOptions"
|
||||
(page)="onPageChange($event)">
|
||||
</mat-paginator>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
import { CommandDetailComponent } from './detail-command/command-detail.component';
|
||||
import { CreateCommandComponent } from './create-command/create-command.component';
|
||||
import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
|
||||
@Component({
|
||||
selector: 'app-commands',
|
||||
|
|
@ -14,19 +14,25 @@ import { ToastrService } from 'ngx-toastr';
|
|||
export class CommandsComponent implements OnInit {
|
||||
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
|
||||
commands: any[] = [];
|
||||
displayedColumns: string[] = ['name', 'createdBy', 'createdAt', 'actions'];
|
||||
private apiUrl = 'http://127.0.0.1:8001/commands?page=1&itemsPerPage=30';
|
||||
filters: { [key: string]: string | boolean } = {};
|
||||
length: number = 0;
|
||||
itemsPerPage: number = 10;
|
||||
page: number = 1;
|
||||
pageSizeOptions: number[] = [5, 10, 20, 40, 100];
|
||||
displayedColumns: string[] = ['name', 'createdBy', 'createdAt', 'actions'];
|
||||
private apiUrl = `${this.baseUrl}/commands`;
|
||||
|
||||
constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService) { }
|
||||
constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadCommands();
|
||||
this.search();
|
||||
}
|
||||
|
||||
loadCommands(): void {
|
||||
this.http.get<any>(this.apiUrl).subscribe(
|
||||
search(): void {
|
||||
this.http.get<any>(`${this.apiUrl}?page=${this.page}&itemsPerPage=${this.itemsPerPage}`, { params: this.filters }).subscribe(
|
||||
(data) => {
|
||||
this.commands = data['hydra:member'];
|
||||
this.length = data['hydra:totalItems'];
|
||||
},
|
||||
(error) => {
|
||||
console.error('Error fetching commands', error);
|
||||
|
|
@ -34,66 +40,48 @@ export class CommandsComponent implements OnInit {
|
|||
);
|
||||
}
|
||||
|
||||
openCreateCommandModal(): void {
|
||||
const dialogRef = this.dialog.open(CreateCommandComponent, {
|
||||
width: '600px'
|
||||
});
|
||||
viewDetails(command: any): void {
|
||||
this.dialog.open(CommandDetailComponent, {
|
||||
width: '800px',
|
||||
data: command,
|
||||
}).afterClosed().subscribe(() => this.search());
|
||||
}
|
||||
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
this.loadCommands();
|
||||
});
|
||||
openCreateCommandModal(): void {
|
||||
this.dialog.open(CreateCommandComponent, {
|
||||
width: '600px',
|
||||
}).afterClosed().subscribe(() => this.search());
|
||||
}
|
||||
|
||||
editCommand(command: any): void {
|
||||
const dialogRef = this.dialog.open(CreateCommandComponent, {
|
||||
this.dialog.open(CreateCommandComponent, {
|
||||
width: '600px',
|
||||
data: { command: command }
|
||||
});
|
||||
data: { command },
|
||||
}).afterClosed().subscribe(() => this.search());
|
||||
}
|
||||
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
deleteCommand(command: any): void {
|
||||
this.dialog.open(DeleteModalComponent, {
|
||||
width: '300px',
|
||||
data: { name: command.name },
|
||||
}).afterClosed().subscribe((result) => {
|
||||
if (result) {
|
||||
console.log('Comando editado:', result);
|
||||
this.loadCommands();
|
||||
this.http.delete(`${this.apiUrl}/${command.uuid}`).subscribe({
|
||||
next: () => {
|
||||
this.toastService.success('Comando eliminado con éxito');
|
||||
this.search();
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error al eliminar el comando:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
viewDetails(command: any): void {
|
||||
const dialogRef = this.dialog.open(CommandDetailComponent, {
|
||||
width: '800px',
|
||||
data: command
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
this.loadCommands();
|
||||
});
|
||||
onPageChange(event: any): void {
|
||||
this.page = event.pageIndex;
|
||||
this.itemsPerPage = event.pageSize;
|
||||
this.search();
|
||||
}
|
||||
|
||||
deleteCommand(command: any): void {
|
||||
const dialogRef = this.dialog.open(DeleteModalComponent,
|
||||
{
|
||||
width: '300px',
|
||||
data: { name: command.name }
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
if (result) {
|
||||
const apiUrl = `${this.baseUrl}/commands/${command.uuid}`;
|
||||
|
||||
this.http.delete(apiUrl).subscribe({
|
||||
next: () => {
|
||||
console.log('Role deleted successfully');
|
||||
this.loadCommands();
|
||||
this.toastService.success('Role deleted successfully');
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error deleting role:', error);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log('Role deletion cancelled');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
mat-nav-list {
|
||||
width: auto;
|
||||
margin-right: 3px;
|
||||
margin-right: 5px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -18,7 +18,7 @@ mat-list-item {
|
|||
}
|
||||
|
||||
mat-icon {
|
||||
margin-right: 8px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.user-logged {
|
||||
|
|
|
|||
|
|
@ -31,13 +31,13 @@
|
|||
</mat-list-item>
|
||||
<mat-list-item routerLink="/commands-groups">
|
||||
<span class="entry">
|
||||
<mat-icon class="icon">splitscreen_add </mat-icon>
|
||||
<span i18n="@@gallery">Grupo de comandos</span>
|
||||
<mat-icon class="icon">chevron_right</mat-icon>
|
||||
<span i18n="@@gallery">Grupos</span>
|
||||
</span>
|
||||
</mat-list-item>
|
||||
<mat-list-item routerLink="/commands-task">
|
||||
<span class="entry">
|
||||
<mat-icon class="icon">task</mat-icon>
|
||||
<mat-icon class="icon">chevron_right</mat-icon>
|
||||
<span i18n="@@gallery">Tareas</span>
|
||||
</span>
|
||||
</mat-list-item>
|
||||
|
|
|
|||
Loading…
Reference in New Issue