oggui/ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.compon...

117 lines
3.4 KiB
TypeScript

import { Component, OnInit, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { ToastrService } from 'ngx-toastr';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { ConfigService } from '@services/config.service';
@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;
availableCommands: any[] = [];
selectedCommands: any[] = [];
groupName: string = '';
enabled: boolean = true;
editing: boolean = false;
loading: boolean = false;
private apiUrl: string;
constructor(
private http: HttpClient,
private dialogRef: MatDialogRef<CreateCommandGroupComponent>,
private toastService: ToastrService,
private configService: ConfigService,
@Inject(MAT_DIALOG_DATA) public data: any
) {
this.baseUrl = this.configService.apiUrl;
this.apiUrl = `${this.baseUrl}/commands`;
}
ngOnInit(): void {
this.loadAvailableCommands();
if (this.data && this.data.group) {
this.editing = true;
this.loadGroupData(this.data.group);
}
}
loadAvailableCommands(): void {
this.loading = true;
this.http.get<any>(this.apiUrl).subscribe(
(data) => {
this.availableCommands = data['hydra:member'];
this.loading = false;
},
(error) => {
console.error('Error fetching available commands', error);
this.loading = false;
}
);
}
loadGroupData(group: any): void {
this.groupName = group.name;
this.enabled = group.enabled;
this.selectedCommands = group.commands;
}
addCommand(command: any): void {
if (!this.selectedCommands.includes(command)) {
this.selectedCommands.push(command);
}
}
removeCommand(command: any): void {
const index = this.selectedCommands.indexOf(command);
if (index >= 0) {
this.selectedCommands.splice(index, 1);
}
}
drop(event: CdkDragDrop<any[]>): void {
moveItemInArray(this.selectedCommands, event.previousIndex, event.currentIndex);
}
onSubmit(): void {
const payload = {
name: this.groupName,
commands: this.selectedCommands.map(cmd => cmd['@id']),
enabled: this.enabled
};
if (this.editing) {
const groupId = this.data.group.uuid;
this.http.patch(`${this.baseUrl}/command-groups/${groupId}`, payload).subscribe({
next: () => {
this.toastService.success('Grupo de comandos actualizado con éxito');
this.dialogRef.close();
},
error: (error) => {
console.error('Error actualizando el grupo de comandos', error);
this.toastService.error('Error al actualizar el grupo de comandos');
}
});
} else {
this.http.post(`${this.baseUrl}/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);
this.toastService.error('Error al crear el grupo de comandos');
}
});
}
}
close(): void {
this.dialogRef.close();
}
}