refs #1288. Added Menu CRUD

ogWebconsole/src/app/app-routing.module.ts

@@ -43,9 +43,7 @@ import {EnvVarsComponent} from "./components/admin/env-vars/env-vars.component";
 import {MenusComponent} from "./components/menus/menus.component";
 const routes: Routes = [
   { path: '', redirectTo: 'auth/login', pathMatch: 'full' },
-{
+  { path: '', component: MainLayoutComponent,
-  path: '',
-  component: MainLayoutComponent,
     children: [
       { path: 'dashboard', component: DashboardComponent },
       { path: 'admin', component: AdminComponent },

ogWebconsole/src/app/components/menus/create-menu/create-menu.component.css

@@ -2,42 +2,40 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
+  padding: 16px;
+}
+
+.form-container {
+  display: flex;
+  flex-direction: row; /* Alinear elementos horizontalmente */
+  justify-content: space-between;
+  gap: 24px;
+  align-items: flex-start; /* Para alinear superiormente */
+}
+
+.menu-form {
+  flex: 1; /* El formulario ocupa el espacio restante */
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
-.menu-form {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.form-field {
-  width: 100%;
-  margin-bottom: 16px;
-}
-
-.dialog-actions {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 24px;
-}
-
-button {
-  margin-left: 8px;
-}
-
-@media (max-width: 600px) {
 .form-field {
   width: 100%;
 }
 
-  .dialog-actions {
+.iframe-container {
-    flex-direction: column;
+  flex: 1; /* El iframe ocupa la otra mitad del espacio */
-    align-items: stretch;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  max-width: 50%; /* Limitar ancho máximo */
 }
 
-  button {
+.iframe {
   width: 100%;
-    margin-left: 0;
+  height: 600px;
-    margin-bottom: 8px;
+  border: 1px solid #ddd;
-  }
+  border-radius: 8px;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 }

ogWebconsole/src/app/components/menus/create-menu/create-menu.component.html

@@ -1,6 +1,8 @@
 <h2 mat-dialog-title>{{ menuId ? 'Editar' : 'Añadir' }} menú</h2>
 
 <mat-dialog-content class="dialog-content">
+  <div class="form-container">
+    <!-- Formulario -->
     <form [formGroup]="menuForm" (ngSubmit)="save()" class="menu-form">
       <mat-form-field appearance="fill" class="form-field">
         <mat-label>Nombre del menú</mat-label>
@@ -8,13 +10,14 @@
       </mat-form-field>
 
       <mat-form-field appearance="fill" class="form-field">
+        <span matPrefix>{{baseUrl}}/menu/</span>
         <mat-label>Url pública</mat-label>
         <input matInput formControlName="publicUrl" name="description">
       </mat-form-field>
 
       <mat-form-field appearance="fill" class="form-field">
         <mat-label>Resolución</mat-label>
-      <input matInput formControlName="resolution" name="comments">
+        <input matInput formControlName="resolution" name="resolution">
       </mat-form-field>
 
       <mat-form-field appearance="fill" class="form-field">
@@ -22,6 +25,12 @@
         <input matInput formControlName="comments" name="comments">
       </mat-form-field>
     </form>
+
+    <!-- Iframe -->
+    <div class="iframe-container" *ngIf="safeUrl">
+      <iframe [src]="safeUrl" class="iframe"></iframe>
+    </div>
+  </div>
 </mat-dialog-content>
 
 <mat-dialog-actions align="end" class="dialog-actions">

ogWebconsole/src/app/components/menus/create-menu/create-menu.component.ts

@@ -4,6 +4,7 @@ import {HttpClient} from "@angular/common/http";
 import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
 import {ToastrService} from "ngx-toastr";
 import {DataService} from "../../images/data.service";
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-create-menu',
@@ -15,6 +16,7 @@ export class CreateMenuComponent {
   menuForm: FormGroup<any>;
   menuId: string | null = null;
   softwareProfiles: any[] = [];
+  safeUrl: SafeResourceUrl | null = null;
 
   constructor(
     private fb: FormBuilder,
@@ -22,6 +24,7 @@ export class CreateMenuComponent {
     public dialogRef: MatDialogRef<CreateMenuComponent>,
     private toastService: ToastrService,
     private dataService: DataService,
+    private sanitizer: DomSanitizer,
     @Inject(MAT_DIALOG_DATA) public data: any
   ) {
     this.menuForm = this.fb.group({
@@ -32,6 +35,15 @@ export class CreateMenuComponent {
     });
   }
 
+  updateSafeUrl(): void {
+    const url = `${this.baseUrl}/menu/${this.menuForm.get('publicUrl')?.value}`;
+    if (url) {
+      this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
+    } else {
+      this.safeUrl = null;
+    }
+  }
+
   ngOnInit() {
     if (this.data) {
       this.load()
@@ -48,6 +60,7 @@ export class CreateMenuComponent {
           comments: [response.comments],
         });
         this.menuId = response['@id'];
+        this.updateSafeUrl()
       },
       error: (err) => {
         console.error('Error fetching remote calendar:', err);

ogWebconsole/src/app/components/menus/menus.component.ts

@@ -37,7 +37,7 @@ export class MenusComponent {
     {
       columnDef: 'publicUrl',
       header: 'Url pública',
-      cell: (repository: any) => `${repository.publicUrl}`
+      cell: (repository: any) => `${this.baseUrl}/menu/${repository.publicUrl}`
     },
     {
       columnDef: 'resolution',
@@ -68,7 +68,7 @@ export class MenusComponent {
 
   addMenu(): void {
     const dialogRef = this.dialog.open(CreateMenuComponent, {
-      width: '600px'
+      width: '1000px'
     });
 
     dialogRef.afterClosed().subscribe(() => {
@@ -94,7 +94,7 @@ export class MenusComponent {
   editMenu(event: MouseEvent, menu: any): void {
     event.stopPropagation();
     this.dialog.open(CreateMenuComponent, {
-      width: '800px',
+      width: '1200px',
       data: menu['@id']
     }).afterClosed().subscribe(() => this.search());
   }