refs #1069 Move comands ond drop

ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.css

@@ -1,8 +1,8 @@
 .create-command-group-container {
   padding: 20px;
-  max-width: 800px; /* Ancho máximo del contenedor */
+  max-width: 800px;
-  margin: auto; /* Centra el contenedor en la pantalla */
+  margin: auto;
-  background-color: #fff; /* Fondo blanco para el contenedor */
+  background-color: #fff;
 }
 
 .form-container {
@@ -24,14 +24,14 @@
   width: 48%;
   display: flex;
   flex-direction: column;
-  max-height: 200px; /* Limita la altura máxima para evitar desbordamiento */
+  max-height: 200px;
 }
 
 .table-wrapper {
   flex: 1;
-  overflow-y: auto; /* Scroll para la tabla si hay demasiados comandos */
+  overflow-y: auto;
-  border: 1px solid #ccc; /* Borde para la tabla */
+  border: 1px solid #ccc;
-  border-radius: 4px; /* Bordes redondeados */
+  border-radius: 4px;
 }
 
 .selected-commands-list {
@@ -40,7 +40,7 @@
   padding: 10px;
   background-color: #f9f9f9;
   flex: 1;
-  overflow-y: auto; /* Scroll para los comandos seleccionados */
+  overflow-y: auto;
 }
 
 .commands-container {
@@ -60,7 +60,7 @@
 
 .remove-icon {
   cursor: pointer;
-  color: #f44336; /* Rojo para eliminar */
+  color: #f44336;
 }
 
 .chevron-icon {
@@ -74,29 +74,27 @@
   justify-content: space-between;
 }
 
-
 .available-commands, .selected-commands {
   width: 48%;
   display: flex;
   flex-direction: column;
-  max-height: 500px; /* Limita la altura máxima para evitar desbordamiento */
+  max-height: 500px;
 }
 
 .table-wrapper {
   flex: 1;
-  overflow-y: auto; /* Scroll para la tabla si hay demasiados comandos */
+  overflow-y: auto;
-  border: 1px solid #ccc; /* Borde para la tabla */
+  border: 1px solid #ccc;
-  border-radius: 4px; /* Bordes redondeados */
+  border-radius: 4px;
-  max-height: 400px; /* Establece la altura máxima */
+  max-height: 400px;
 }
 
-/* Para asegurar que el componente sea responsivo en pantallas pequeñas */
 @media (max-width: 600px) {
   .command-selection {
-    flex-direction: column; /* Cambia a columna en pantallas pequeñas */
+    flex-direction: column;
   }
   .available-commands, .selected-commands {
-    width: 100%; /* Ocupa el ancho completo */
+    width: 100%;
-    margin-bottom: 20px; /* Espacio entre elementos */
+    margin-bottom: 20px;
   }
 }

ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.html

@@ -39,17 +39,15 @@
 
       <div class="selected-commands">
         <h3>Comandos Seleccionados</h3>
-        <div class="selected-commands-list">
+        <div class="selected-commands-list" cdkDropList (cdkDropListDropped)="drop($event)">
           <div class="commands-container">
-            <ng-container *ngFor="let command of selectedCommands; let last = last">
+            <div *ngFor="let command of selectedCommands" cdkDrag>
               <div class="command-item">
+                <mat-icon class="drag-handle" cdkDragHandle>drag_indicator</mat-icon>
                 {{ command.name }}
                 <mat-icon class="remove-icon" (click)="removeCommand(command)">close</mat-icon>
               </div>
-              <ng-container *ngIf="!last">
+            </div>
-                <mat-icon class="chevron-icon">chevron_right</mat-icon>
-              </ng-container>
-            </ng-container>
           </div>
         </div>
       </div>

ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.ts

@@ -2,6 +2,7 @@ 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';
 
 @Component({
   selector: 'app-create-command-group',
@@ -55,8 +56,10 @@ export class CreateCommandGroupComponent implements OnInit {
   }
 
   addCommand(command: any): void {
+    if (!this.selectedCommands.includes(command)) {
       this.selectedCommands.push(command);
     }
+  }
 
   removeCommand(command: any): void {
     const index = this.selectedCommands.indexOf(command);
@@ -65,6 +68,10 @@ export class CreateCommandGroupComponent implements OnInit {
     }
   }
 
+  drop(event: CdkDragDrop<any[]>): void {
+    moveItemInArray(this.selectedCommands, event.previousIndex, event.currentIndex);
+  }
+
   onSubmit(): void {
     const payload = {
       name: this.groupName,
@@ -81,6 +88,7 @@ export class CreateCommandGroupComponent implements OnInit {
         },
         error: (error) => {
           console.error('Error actualizando el grupo de comandos', error);
+          this.toastService.error('Error al actualizar el grupo de comandos');
         }
       });
     } else {
@@ -91,6 +99,7 @@ export class CreateCommandGroupComponent implements OnInit {
         },
         error: (error) => {
           console.error('Error creando el grupo de comandos', error);
+          this.toastService.error('Error al crear el grupo de comandos');
         }
       });
     }