Cambios en gestión de submodulos

sistema-mantenimiento-front/src/app/components/getb/getbsb/getbsb-consultar-modulos/getbsb-consultar-modulos.component.html

@@ -1,12 +1,12 @@
 <h2 mat-dialog-title style="text-align: center"> Consulta de Submódulos por Módulo </h2>
 <mat-dialog-content class="mat-typography " style="text-align: center; width: 400px;">
 
-    <form [formGroup]="formGroup" >
+    <form [formGroup]="formGroup">
         <mat-grid-list cols="1" rowHeight="80px">
             <mat-grid-tile colspan="1">
                 <mat-form-field appearance="standard">
                     <mat-label> Módulo </mat-label>
-                    <input matInput placeholder="Ej: COD123" formControlName="modulo"/>
+                    <input matInput placeholder="Ej: COD123" formControlName="modulo" />
                 </mat-form-field>
             </mat-grid-tile>
         </mat-grid-list>

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

@@ -1,11 +1,11 @@
-<h2 mat-dialog-title > {{ title }} </h2>
+<h2 mat-dialog-title> {{ title }} </h2>
 <mat-dialog-content class="mat-typography" style="text-align: center">
     <form [formGroup]="formGroup">
         <mat-grid-list cols="1" rowHeight="60px">
             <mat-grid-tile colspan="1">
                 <mat-form-field appearance="standard">
                     <mat-label>Ingrese el código de identificación </mat-label>
-                    <input matInput placeholder="Ej: COD123" formControlName="codigo" (keyup)="mayus()" maxlength="5"/>
+                    <input matInput placeholder="Ej: COD123" formControlName="codigo" (keyup)="mayus()" maxlength="5" />
                 </mat-form-field>
             </mat-grid-tile>
             <mat-grid-tile colspan="1">
@@ -29,7 +29,8 @@
 </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]="true" (click)="registar()">
+    <button mat-raised-button color="primary" [mat-dialog-close]="true" (click)="registar()"
+        [disabled]="formGroup.invalid">
         Aceptar
     </button>
 </mat-dialog-actions>

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

@@ -18,7 +18,7 @@ export class GetbsbFormComponent implements OnInit {
   public formGroup: FormGroup;
   public isLoadingComponent: boolean = false;
   public title: string;
-  public modulos: ModuloResponse[] = [];
+  public modulos: ModuloResponse[] = []
 
   constructor(
     private _moduloService: GETBGMService,
@@ -36,13 +36,13 @@ export class GetbsbFormComponent implements OnInit {
     this.obtenerModulos();
   }
 
-  ngOnInit(): void {}
+  ngOnInit(): void { }
 
   public async obtenerModulos() {
     await lastValueFrom(this._moduloService.getModuleAviable()).then(
       (data: ResponseData) => {
         if (!data.error) {
-          this.modulos = data.response;
+          this.modulos = data.response
         }
       },
       (error: HttpErrorResponse) => this._resourceService.checkErrors(error)
@@ -71,17 +71,29 @@ export class GetbsbFormComponent implements OnInit {
   }
 
   public async registar() {
-    let idEnc = localStorage.getItem('idusuario');
-    if (!idEnc) {
-      this._resourceService.openSnackBar(
-        'Ocurrio un error al momento de obtener el usuario.'
-      );
+    let datos: any = {
+      linea: 1,
+      codigo: this.codigo?.value,
+      submodulo: this.submodulo?.value,
+      id_modulo_codigo: this.id_modulo_codigo?.value.CODIGO_MODULO,
+      user: this._resourceService.getUser(),
+    }
+
+    if (this.data.action == 'registro') {
+      await lastValueFrom(this._submoduleService.postSubmodules(datos)).then(
+        (data: ResponseData) => {
+          if (!data.error) {
+            this._resourceService.openSnackBar("¡Registro Exitoso!");
+            this.obtenerModulos();
+          }
+        }, (error: HttpErrorResponse) => this._resourceService.checkErrors(error)
+      )
     } else {
       let datos: any = {
         codigo: this.codigo?.value,
         submodulo: this.submodulo?.value,
         id_modulo_codigo: this.id_modulo_codigo?.value.CODIGO_MODULO,
-        user: idEnc,
+        user: this._resourceService.getUser()
       };
 
       if (this.data.action == 'registro') {
@@ -112,7 +124,7 @@ export class GetbsbFormComponent implements OnInit {
 
   // Coloca en mayuscula las letras colocadas en el campo Código
   public mayus() {
-    this.codigo?.setValue(this.codigo?.value.toUpperCase());
+    this.codigo?.setValue(this.codigo?.value.toUpperCase())
   }
 
   get codigo() {

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

@@ -5,6 +5,12 @@
         <!-- BUSCADOR Y BOTÓN DE REGISTRO -->
         <div align="center" style="width: 100%; margin-bottom: 10px;">
             <div style="display: inline-block; width: 80%">
+
+                <button mat-mini-fab color="info" style="margin-right: 30px;box-shadow: none;"
+                    matTooltip="Actualizar Datos" (click)="consultarSubmodulos()">
+                    <mat-icon>refresh</mat-icon>
+                </button>
+
                 <!-- PAGINADOR -->
                 <mat-form-field appearance="standard">
                     <mat-label>Buscador</mat-label>
@@ -30,29 +36,34 @@
             <h3>Cargando datos ...</h3>
         </div>
 
-        <!-- ALERTA - CARGANDO FORMULARIOS -->
+        <!-- ALERTA - CARGANDO FORMULARIOS (en caso de que el formulario necesite consultar datos) -->
         <mat-progress-bar mode="indeterminate" *ngIf="isLoadingComponent"></mat-progress-bar>
 
         <!-- TABLA -->
-        <table mat-table [dataSource]="dataSource" matSort class="animated fadeIn" *ngIf="!isLoading">
-            <ng-container matColumnDef="codigo">
-                <th mat-header-cell *matHeaderCellDef>Código del Submódulo</th>
+        <table mat-table [dataSource]="dataSource" matSort class="animated fadeIn"
+            [style.display]="isLoading ? 'none' : 'revert'">
+            <ng-container matColumnDef="CODIGO_SUBMODULO">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header>Código del Submódulo</th>
                 <td mat-cell *matCellDef="let element">{{ element.CODIGO_SUBMODULO }}</td>
             </ng-container>
-
-            <ng-container matColumnDef="submodulo">
-                <th mat-header-cell *matHeaderCellDef>Submódulo</th>
+            <ng-container matColumnDef="SUBMODULO">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header>Submódulo</th>
                 <td mat-cell *matCellDef="let element">{{ element.SUBMODULO }}</td>
             </ng-container>
-
-            <ng-container matColumnDef="modulo">
-                <th mat-header-cell *matHeaderCellDef>Módulo</th>
+            <ng-container matColumnDef="MODULO">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header>Módulo</th>
                 <td mat-cell *matCellDef="let element">{{ element.MODULO }}</td>
             </ng-container>
-
-            <ng-container matColumnDef="estado">
-                <th mat-header-cell *matHeaderCellDef style="text-align: center">Estado</th>
-                <td mat-cell *matCellDef="let element" style="text-align: center">
+            <ng-container matColumnDef="FECHA_MOD">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header mat-sort-header>Última Modificación</th>
+                <td mat-cell *matCellDef="let element">
+                    {{ element.FECHA_MOD !== null ? dateTimeFormart(element.FECHA_MOD) :
+                    dateTimeFormart(element.FECHA_REG) }}
+                </td>
+            </ng-container>
+            <ng-container matColumnDef="ESTADO">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header>Estado</th>
+                <td mat-cell *matCellDef="let element">
                     <mat-chip-list>
                         <mat-chip color="success" selected *ngIf="element.ESTADO === 'Activo'"> {{ element.ESTADO }}
                         </mat-chip>
@@ -61,13 +72,12 @@
                     </mat-chip-list>
                 </td>
             </ng-container>
-
             <ng-container matColumnDef="acciones">
                 <th mat-header-cell *matHeaderCellDef style="text-align: center">
                     Acciones
                 </th>
                 <td mat-cell *matCellDef="let element" style="text-align: center">
-
+                    <!-- Botón de acciones cuando la pantalla se encuentre en modo movil -->
                     <div *ngIf="btnSmall">
                         <button mat-mini-fab color="accent" [matMenuTriggerFor]="menu" #menuTrigger
                             style="box-shadow: none;">
@@ -82,10 +92,10 @@
                                 <mat-icon>delete</mat-icon>
                                 Eliminar
                             </button>
-                            <button mat-menu-item (click)="openDialogVerModulos(element)">
+                            <!-- <button mat-menu-item (click)="openDialogVerModulos(element)">
                                 <mat-icon>dashboard</mat-icon>
                                 Ver menus de {{element.CODIGO_SUBMODULO}}
-                            </button>
+                            </button> -->
                         </mat-menu>
                     </div>
                     <div *ngIf="!btnSmall">
@@ -99,11 +109,11 @@
                             (click)="alert('ELM', element)">
                             <mat-icon>delete</mat-icon>
                         </button>
-                        <button mat-mini-fab color="success"
+                        <!-- <button mat-mini-fab color="success"
                             [disabled]="element.ESTADO == 'Eliminado' || isLoadingComponent" class="button-accion"
                             matTooltip="Ver Menus" (click)="openDialogVerModulos(element)">
                             <mat-icon>web_stories</mat-icon>
-                        </button>
+                        </button> -->
                     </div>
                 </td>
             </ng-container>

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

@@ -2,6 +2,7 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { Component, AfterViewInit, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { lastValueFrom } from 'rxjs';
 import { AlertData } from 'src/app/interfaces/alert.interface';
@@ -17,7 +18,13 @@ import { GetbsbFormComponent } from './getbsb-form/getbsb-form.component';
   styleUrls: ['./getbsb.component.css']
 })
 export class GETBSBComponent implements AfterViewInit {
-  displayedColumns: string[] = ['codigo', 'submodulo', 'modulo', 'estado', 'acciones'];
+  displayedColumns: string[] = [
+    'CODIGO_SUBMODULO',
+    'SUBMODULO',
+    'MODULO',
+    'FECHA_MOD',
+    'ESTADO',
+    'acciones'];
 
   public dataSource: MatTableDataSource<any> = new MatTableDataSource<any>([]);
 
@@ -31,17 +38,20 @@ export class GETBSBComponent implements AfterViewInit {
   public card_size = 'card-size-normal mat-elevation-z8';
 
   @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
 
   constructor(
     public dialog: MatDialog,
     private _getbsmService: GETBSMService,
-    private _resourceService:ResourcesService
-  ) { 
-    this.consultarModulos();
+    private _resourceService: ResourcesService
+  ) {
+    this.consultarSubmodulos();
   }
 
   ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+
     if (window.innerWidth <= 721) {
       this.btnSmall = true;
       this.card_size = 'card-size-small';
@@ -69,11 +79,11 @@ export class GETBSBComponent implements AfterViewInit {
     }
   }
 
-  private async consultarModulos() {
+  public async consultarSubmodulos() {
     this.isLoading = true;
     await lastValueFrom(this._getbsmService.getSubmodules()).then(
       (data: ResponseData) => {
-        if (!data.error) {          
+        if (!data.error) {
           this.dataSource.data = data.response;
         }
       },
@@ -82,7 +92,7 @@ export class GETBSBComponent implements AfterViewInit {
     this.isLoading = false;
   }
 
-  openDialogVerModulos (data: any) {
+  public openDialogVerModulos(data: any) {
     this.dialog.open(GetbsbConsultarModulosComponent, {
       data: data,
     });
@@ -90,19 +100,19 @@ export class GETBSBComponent implements AfterViewInit {
 
   public async registro(data: any, action: string) {
     this.isLoadingComponent = true;
-    await this.consultarModulos();
+    await this.consultarSubmodulos();
     let dataAction = {
       data: data,
       action: action
     }
     const dialogRef = this.dialog.open(GetbsbFormComponent, {
       data: dataAction,
-      width: '350px',
+      width: '500px',
       disableClose: true,
     });
 
-    dialogRef.afterClosed().subscribe(result => {      
-      if (result) this.consultarModulos();
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) this.consultarSubmodulos();
     })
     this.isLoadingComponent = false;
   }
@@ -140,15 +150,23 @@ export class GETBSBComponent implements AfterViewInit {
     await lastValueFrom(
       this._getbsmService.deleteSubmodule({ codigo: codigo })
     ).then(
-      (data:ResponseData) => {
+      (data: ResponseData) => {
         if (!data.error) {
           this._resourceService.openSnackBar("¡Eliminación exitosa!");
-          this.consultarModulos();
+          this.consultarSubmodulos();
         }
       },
       (error: HttpErrorResponse) => this._resourceService.checkErrors(error)
     );
-    
+
+  }
+
+  // Método para dar formato a las fechas y horas
+  public dateTimeFormart(date: string): string {
+    let arrDateTime: Array<string> = date.split(' ');
+    let arrDate: Array<string> = arrDateTime[0].split('-');
+    let strDate: string = `${arrDate[2]}/${arrDate[1]}/${arrDate[0]} T${arrDateTime[1]}`;
+    return strDate;
   }
 }