refs #1558. Add client/subnet new UX modal

ogWebconsole/src/app/components/ogdhcp/operation-result-dialog/operation-result-dialog.component.html

@@ -0,0 +1 @@
+<p>operation-result-dialog works!</p>

ogWebconsole/src/app/components/ogdhcp/operation-result-dialog/operation-result-dialog.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OperationResultDialogComponent } from './operation-result-dialog.component';
+
+describe('OperationResultDialogComponent', () => {
+  let component: OperationResultDialogComponent;
+  let fixture: ComponentFixture<OperationResultDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [OperationResultDialogComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(OperationResultDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ogWebconsole/src/app/components/ogdhcp/operation-result-dialog/operation-result-dialog.component.ts

@@ -0,0 +1,62 @@
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+
+
+@Component({
+  selector: 'app-operation-result-dialog',
+  template: `
+    <h2 mat-dialog-title>Resultado de la operación</h2>
+    <mat-dialog-content>
+      <div class="success-box" *ngIf="data.success.length > 0">
+        <h3>Éxitos</h3>
+        <ul>
+          <li *ngFor="let success of data.success">{{ success.client }} ✅</li>
+        </ul>
+      </div>
+
+      <div class="error-box" *ngIf="data.errors.length > 0">
+        <h3>Errores</h3>
+        <ul>
+          <li *ngFor="let error of data.errors">
+            {{ error.client }} ❌ - {{ error.error }}
+          </li>
+        </ul>
+      </div>
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+      <button mat-button color="primary" (click)="close()">Cerrar</button>
+    </mat-dialog-actions>
+  `,
+  styles: [`
+    mat-dialog-content { max-height: 400px; overflow-y: auto; }
+    h3 { margin-bottom: 5px; }
+
+    .success-box {
+      background-color: #d4edda;
+      color: #155724;
+      border: 1px solid #c3e6cb;
+      padding: 10px;
+      border-radius: 5px;
+      margin-bottom: 10px;
+    }
+
+    .error-box {
+      background-color: #f8d7da;
+      color: #721c24;
+      border: 1px solid #f5c6cb;
+      padding: 10px;
+      border-radius: 5px;
+      margin-bottom: 10px;
+    }
+  `]
+})
+export class OperationResultDialogComponent {
+  constructor(
+    public dialogRef: MatDialogRef<OperationResultDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { success: any[], errors: any[] }
+  ) {}
+
+  close() {
+    this.dialogRef.close();
+  }
+}