modulo de menus

sistema-mantenimiento-front/src/app/app.module.ts

@@ -78,6 +78,7 @@ import { GetbreConsultarTablasComponent } from './components/getb/getbre/getbre-
 import { Plantilla1Component } from './components/test/plantilla1/plantilla1.component';
 import { Plantilla2Component } from './components/test/plantilla2/plantilla2.component';
 import { Plantilla3Component } from './components/test/plantilla3/plantilla3.component';
+import { GetbmeSubirImagenComponent } from './components/getb/getbme/getbme-subir-imagen/getbme-subir-imagen.component';
 /* Angular Material Imports Ends*/
 
 @NgModule({
@@ -120,6 +121,7 @@ import { Plantilla3Component } from './components/test/plantilla3/plantilla3.com
     Plantilla1Component,
     Plantilla2Component,
     Plantilla3Component,
+    GetbmeSubirImagenComponent,
   ],
   imports: [
     BrowserModule,

sistema-mantenimiento-front/src/app/components/getb/getbme/getbme-form/getbme-form.component.html

@@ -1,23 +1,17 @@
 <h2 mat-dialog-title style="text-align: center"> Registro de Submódulos </h2>
 <mat-dialog-content class="mat-typography" style="text-align: center">
-    <form>
+    <form [formGroup]="formGroup">
         <mat-grid-list cols="1" rowHeight="80px">
             <mat-grid-tile colspan="1">
                 <mat-form-field appearance="standard">
-                    <mat-label>Nombre del Menú </mat-label>
-                    <input matInput placeholder="Ej: Menu Administrador" [(ngModel)]="name_menu" />
-                </mat-form-field>
-            </mat-grid-tile>
-            <mat-grid-tile colspan="1">
-                <mat-form-field appearance="standard">
-                    <mat-label>Imagen</mat-label>
-                    <input #foto required id="fotos" multiple type="file" [(ngModel)]="img_menu" name="img_menu">
+                    <mat-label>Nombre del menu </mat-label>
+                    <input matInput placeholder="Ej: COD123" formControlName="name_menu" />
                 </mat-form-field>
             </mat-grid-tile>
             <mat-grid-tile colspan="1">
                 <mat-form-field appearance="standard">
                     <mat-label>Submódulo</mat-label>
-                    <mat-select [(ngModel)]="submodule">
+                    <mat-select formControlName="submodule">
                         <mat-option *ngFor="let submodulo of submodulos" [value]="submodulo">{{
                             submodulo.SUBMODULO
                             }}</mat-option>
@@ -26,11 +20,10 @@
             </mat-grid-tile>
         </mat-grid-list>
     </form>
-
 </mat-dialog-content>
 <mat-dialog-actions align="end">
     <button mat-raised-button color="warn" [mat-dialog-close]="false">Cancelar</button>
-    <button mat-raised-button color="primary" [mat-dialog-close]="false" (click)="registar()">
-        Aceptar
+    <button mat-raised-button color="primary" [mat-dialog-close]="false" (click)="openDialogSubirImagen()">
+        Siguiente
     </button>
 </mat-dialog-actions>

sistema-mantenimiento-front/src/app/components/getb/getbme/getbme-form/getbme-form.component.ts

@@ -1,12 +1,13 @@
 import { Component, ElementRef, Inject, Input, OnInit, ViewChild } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { lastValueFrom, Subscription } from 'rxjs';
 import { GETBGMService } from 'src/app/services/getb/getbgm/getbgm.service';
 import { GetbmeService } from 'src/app/services/getb/getbme/getbme.service';
 import { GETBSMService } from 'src/app/services/getb/getbsm/getbsm.service';
 import { ValidationsService } from 'src/app/services/validations.service';
+import { GetbmeSubirImagenComponent } from '../getbme-subir-imagen/getbme-subir-imagen.component';
 
 @Component({
   selector: 'app-getbme-form',
@@ -18,26 +19,33 @@ export class GetbmeFormComponent implements OnInit {
   public isLoadingComponent: boolean = false;
 
   submodulos: SubmoduloResponse[] = []
- 
+
   @ViewChild("foto", {
     read: ElementRef
   }) foto!: ElementRef;
 
-  name_menu: string = ''
-  img_menu: string = ''
-  submodule: string = ''
+  // name_menu: string = ''
+  // img_menu: string = ''
+  // submodule: string = ''
 
   constructor(
     private _moduloService: GETBGMService,
     private _submoduleService: GETBSMService,
     private _router: Router,
+    public dialog: MatDialog,
     private _validations: ValidationsService,
     private _menu: GetbmeService,
+
     public dialogRef: MatDialogRef<any>,
     @Inject(MAT_DIALOG_DATA) public data: any
   ) {
     this.formGroup = this.createFromGroup();
     this.obtenerSubmodulos()
+
+    console.log("Data del formulario principal");
+    
+    console.log(data);
+    
   }
 
   ngOnInit(): void { }
@@ -66,37 +74,32 @@ export class GetbmeFormComponent implements OnInit {
     }
   }
 
-  async registar() {
-    let datos: any = {
-      name_menu: this.name_menu,
-      img_menu: this.img_menu,
-      submodule: this.submodule
+  openDialogSubirImagen(){
+    let dataAction = {
+      name_menu: this.name_menu?.value,
+      submodule: this.submodule?.value,
+      action: this.data.action,
+      menu_code: this.data.data.CODIGO_MENU
     }
-    console.log(datos);
+    const dialogRef = this.dialog.open(GetbmeSubirImagenComponent, {
+      data: dataAction,
+      width: '350px',
+      disableClose: true,
 
-    if (this.data.action == 'registro') {
-      await lastValueFrom(this._menu.postMenu(datos)).then(
-        (value: any) => {
-          if (value.error == false) {
-            this._router.navigate(['sam/getbme'])
-          }
-        }, (error: any) =>
-        this._validations.verificarErrores(error)
-      )
-      this._router.navigate(['sam/getbme'])
-    } else {
-      await lastValueFrom(this._menu.updateMenu(datos)).then(
-        (value: any) => {
-          if (value.error == false) {
-            this._router.navigate(['sam/getbme'])
-          }
-        }, (error: any) =>
-        this._validations.verificarErrores(error)
-      )
-      this._router.navigate(['sam/getbme'])
-    }
+    });
   }
 
+  get name_menu() {
+    return this.formGroup.get('name_menu')
+  }
+
+  get img_menu() {
+    return this.formGroup.get('img_menu')
+  }
+
+  get submodule() {
+    return this.formGroup.get('submodule')
+  }
 }
 
 export interface ModuloResponse {

sistema-mantenimiento-front/src/app/components/getb/getbme/getbme-subir-imagen/getbme-subir-imagen.component.css

@@ -0,0 +1,3 @@
+.input_file{
+    
+}

sistema-mantenimiento-front/src/app/components/getb/getbme/getbme-subir-imagen/getbme-subir-imagen.component.html

@@ -0,0 +1,16 @@
+<h2 mat-dialog-title style="text-align: center"> Agregar Imagen al Menu </h2>
+<mat-dialog-content class="mat-typography" style="text-align: center;">
+    <div *ngIf="img_base">
+       <img [src]="img_base" width="300px">
+    </div>
+    <br>
+    <div>
+        <input type="file" id="img_menu" class="input_file" (change)="obtenerImagen($event)" />
+    </div>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+    <button mat-raised-button color="warn" [mat-dialog-close]="false">Cancelar</button>
+    <button mat-raised-button color="primary" [mat-dialog-close]="false" (click)="registrar()">
+        Registrar
+    </button>
+</mat-dialog-actions>

sistema-mantenimiento-front/src/app/components/getb/getbme/getbme-subir-imagen/getbme-subir-imagen.component.spec.ts

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

sistema-mantenimiento-front/src/app/components/getb/getbme/getbme-subir-imagen/getbme-subir-imagen.component.ts

@@ -0,0 +1,114 @@
+import { Component, Inject, OnInit, SecurityContext } from '@angular/core';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { DomSanitizer } from '@angular/platform-browser';
+import { Router } from '@angular/router';
+import { lastValueFrom } from 'rxjs';
+import { GetbmeService } from 'src/app/services/getb/getbme/getbme.service';
+import { ValidationsService } from 'src/app/services/validations.service';
+
+@Component({
+  selector: 'app-getbme-subir-imagen',
+  templateUrl: './getbme-subir-imagen.component.html',
+  styleUrls: ['./getbme-subir-imagen.component.css']
+})
+export class GetbmeSubirImagenComponent implements OnInit {
+
+  imagen: any
+  imagenes: any[] = []
+  img_base: string | null
+
+  constructor(
+    private _router: Router,
+    public dialog: MatDialog,
+    private _validations: ValidationsService,
+    private _menu: GetbmeService,
+    private sanitizer: DomSanitizer,
+
+    public dialogRef: MatDialogRef<any>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {
+    this.img_base = ''
+    console.log("Datos del data / subir-imagen");
+    
+    console.log(data);
+    
+  }
+
+  ngOnInit(): void {
+  }
+
+  obtenerImagen(event: any) {
+    this.imagen = event.target.files[0]
+    this.convertisBase64(this.imagen).then((image: any) => {
+      this.img_base = image.base
+      console.log(image);
+
+    })
+  }
+
+  convertisBase64 = async ($event: any) => new Promise((resolve) => {
+    try {
+      let unsafeImg = window.URL.createObjectURL($event)
+      let image = this.sanitizer.bypassSecurityTrustUrl(unsafeImg)
+      let reader = new FileReader()
+      reader.readAsDataURL($event)
+      reader.onload = () => {
+        resolve({
+          base: reader.result
+        });
+
+      };
+      reader.onerror = error => {
+        resolve({
+          base: null
+        });
+      };
+
+    } catch (error) {
+      return null
+    }
+    return resolve
+  });
+
+
+  async registrar() {
+    let datos = {
+      menu_name: this.data.name_menu,
+      img_menu: this.imagen,
+      submodule: this.data.submodule.CODIGO_SUBMODULO
+    }
+
+    let datosModificar = {
+      menu_name: this.data.name_menu,
+      img_menu: this.imagen,
+      menu_code: this.data.menu_code
+    }
+
+    console.log("Datos a modificar: ");
+    
+    console.log(datosModificar);
+    
+
+    if (this.data.action == 'registro') {
+      await lastValueFrom(this._menu.postMenu(datos)).then(
+        (value: any) => {
+          if (value.error == false) {
+            this._router.navigate(['sam/getbme'])
+          }
+        }, (error: any) =>
+        this._validations.verificarErrores(error)
+      )
+      this._router.navigate(['sam/getbme'])
+    } else {
+      await lastValueFrom(this._menu.updateMenu(datosModificar)).then(
+        (value: any) => {
+          if (value.error == false) {
+            this._router.navigate(['sam/getbme'])
+          }
+        }, (error: any) =>
+        this._validations.verificarErrores(error)
+      )
+      this._router.navigate(['sam/getbme'])
+    }
+  }
+}

sistema-mantenimiento-front/src/app/components/getb/getbme/getbme.component.ts

@@ -26,8 +26,6 @@ export class GETBMEComponent implements AfterViewInit {
   public isLoadingComponent: boolean = false;
   public isEmpty: boolean = false;
 
-  @ViewChild(MatPaginator) paginator!: MatPaginator;
-
   constructor(
     private _snackBar: MatSnackBar,
     public dialog: MatDialog,
@@ -37,8 +35,17 @@ export class GETBMEComponent implements AfterViewInit {
     private _menu: GetbmeService
   ) { }
 
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+
   ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;
+
+    // this.paginator._intl.itemsPerPageLabel = 'Datos por página';
+    // this.paginator._intl.firstPageLabel = 'Primera Página';
+    // this.paginator._intl.lastPageLabel = 'Últmina Página';
+    // this.paginator._intl.nextPageLabel = 'Siguiente Página';
+    // this.paginator._intl.previousPageLabel = 'Anterior Página';
+
     this.consultarMenus();
   }
 

sistema-mantenimiento-front/src/app/components/getb/getbre/getbre-consultar-tablas/getbre-consultar-tablas.component.ts

@@ -29,9 +29,8 @@ export class GetbreConsultarTablasComponent implements AfterViewInit {
 
     public dialogRef: MatDialogRef<any>,
     @Inject(MAT_DIALOG_DATA) public data: any
-  ) { 
-    console.log(data);
-    
+  ) {
+
   }
 
   ngAfterViewInit() {
@@ -54,12 +53,10 @@ export class GetbreConsultarTablasComponent implements AfterViewInit {
   }
 
   public async alert(type: string, data: any = null) {
-    console.log(data);
-
     let datos: any = {
-      table_main: data.table_main,
-      table_second: data.table_second,
-      type: data.type
+      table_main: this.data.CODIGO_TABLA,
+      table_second: data.TABLA_RELACION,
+      type: data.TIPO_RELACION
     }
 
     console.log(datos);
@@ -84,7 +81,7 @@ export class GetbreConsultarTablasComponent implements AfterViewInit {
       if (result) {
         switch (type) {
           case "ELM":
-            this.eliminar(data);
+            this.eliminar(datos);
             break;
         }
       }
@@ -92,9 +89,11 @@ export class GetbreConsultarTablasComponent implements AfterViewInit {
     });
   }
 
-  public async eliminar(datos: string) {
+  public async eliminar(data: any) {
+    console.log("++++++++++++++++++++++");
+
     await lastValueFrom(
-      this._relacionTblasService.deleteRelationship({ datos: datos })
+      this._relacionTblasService.deleteRelationship(data)
     ).then(
       (data: ResponseData) => {
         this.dataSource.data = data.response;
@@ -102,9 +101,10 @@ export class GetbreConsultarTablasComponent implements AfterViewInit {
       (error: any) => console.log(error)
     );
     this.consultarTablas();
+    console.log(data);
   }
 
-  public openDialogRelaciones(data: any){
+  public openDialogRelaciones(data: any) {
     this.dialog.open(GetbreConsultarTablasComponent, {
       data: data,
     });

sistema-mantenimiento-front/src/app/components/getb/getbre/getbre-form/getbre-form.component.ts

@@ -19,8 +19,7 @@ export class GetbreFormComponent implements OnInit {
   tipos: any[] = [
     { id: 1, tipo: "M:M" },
     { id: 2, tipo: "1:M" },
-    { id: 3, tipo: "1:1" },
-    { id: 4, tipo: "M:1" }
+    { id: 3, tipo: "1:1" }
   ]
 
   tablas: any[] = []

sistema-mantenimiento-front/src/app/services/getb/getbme/getbme.service.ts

@@ -20,11 +20,25 @@ export class GetbmeService {
   }
 
   public postMenu(data: any) {
-    return this.postQuery("registra", data).pipe(map((data: any) => data))
+    const formData = new FormData()
+    formData.append('img_menu', data.img_menu)
+    formData.append('menu_name', data.menu_name)
+    formData.append('submodule', data.submodule)
+    
+    return this.postQuery("registra", formData).pipe(map((data: any) => data))
   }
 
   public updateMenu(data: any) {
-    return this.postQuery("modifica", data).pipe(map((data: any) => data))
+    const formDataUnpdate = new FormData()
+    formDataUnpdate.append('img_menu', data.img_menu)
+    formDataUnpdate.append('menu_name', data.menu_name)
+    formDataUnpdate.append('menu_code', data.menu_code)
+    console.log("Desde el servicio");
+    
+    console.log(formDataUnpdate);
+    
+
+    return this.postQuery("modifica", formDataUnpdate).pipe(map((data: any) => data))
   }
 
   public deleteMenu(menu_code: any) {
@@ -45,6 +59,7 @@ export class GetbmeService {
     return this.http.post(URL, body, {
       headers: new HttpHeaders({
         Authorization: this._token
+        
       })
     });
   }