Modificación del responsive

sistema-mantenimiento-front/src/app/components/acquisition-management/acquisition/purchase-line/purchase-line.component.html

@@ -100,53 +100,27 @@
                                 }
                                 @if (column === 'ACCIONES') {
                                     <span>
-
-                                        @if (!resourcesService.onResize()) {
-                                            <div>
-                                                <button mat-mini-fab (click)="alert('CANCEL', element)" color="warn" 
-                                                    class="override_no_shadow mr-4" matTooltip="Cancelar Solicitud"
-                                                    [disabled]="element.ESTADO === 'En OC' || element.ESTADO === 'Cancelado' || element.ESTADO === 'Rechazado' || element.ESTADO === 'Terminado '">
-                                                    <mat-icon>block</mat-icon>
-                                                </button>
-                                                @if (sendDocumentEnabled) {
-                                                    <button mat-mini-fab (click)="openDialogInvoice(element)"
-                                                        class="teal_dark_background white_font override_no_shadow mr-4"
-                                                        matTooltip="Subir Factura"
-                                                        [disabled]="element.ESTADO === 'Cancelado' || element.ESTADO === 'Terminado' || element.ESTADO === 'En OC'">
-                                                        <mat-icon>document_scanner</mat-icon>
-                                                    </button>
-                                                }
-                                                @if (configOrderEnabled) {
-                                                    <button mat-mini-fab (click)="openDialogRegisterOrder(element)" color="primary"
-                                                        class="override_no_shadow mr-4" matTooltip="Registrar Orden de Compra"
-                                                        [disabled]="element.ESTADO === 'Cancelado' || element.ESTADO === 'Terminado' || element.ESTADO === 'En OC'">
-                                                        <mat-icon>local_shipping</mat-icon>
-                                                    </button>
-                                                }
-                                            </div>
-                                        } @else {
-                                            <button mat-mini-fab color="primary" class="override_no_shadow" [matMenuTriggerFor]="menu" matTooltip="Abrir Acciones">
-                                                <mat-icon>more_vert</mat-icon>
+                                        <button mat-mini-fab color="primary" class="override_no_shadow" [matMenuTriggerFor]="menu" matTooltip="Abrir Acciones">
+                                            <mat-icon>more_vert</mat-icon>
+                                        </button>
+                                        <mat-menu #menu="matMenu">
+                                            <button mat-menu-item (click)="alert('CANCEL', element)" [disabled]="element.ESTADO === 'En OC' || element.ESTADO === 'Cancelado' || element.ESTADO === 'Rechazado' || element.ESTADO === 'Terminado '">
+                                                <mat-icon>block</mat-icon>
+                                                <span>Cancelar Solicitud</span>
                                             </button>
-                                            <mat-menu #menu="matMenu">
-                                                <button mat-menu-item (click)="alert('CANCEL', element)" [disabled]="element.ESTADO === 'En OC' || element.ESTADO === 'Cancelado' || element.ESTADO === 'Rechazado' || element.ESTADO === 'Terminado '">
-                                                    <mat-icon>block</mat-icon>
-                                                    <span>Cancelar Solicitud</span>
+                                            @if (sendDocumentEnabled) {
+                                                <button mat-menu-item (click)="openDialogInvoice(element)" [disabled]="element.ESTADO === 'Cancelado' || element.ESTADO === 'Terminado' || element.ESTADO === 'En OC'">
+                                                    <mat-icon>document_scanner</mat-icon>
+                                                    <span>Subir Factura</span>
                                                 </button>
-                                                @if (sendDocumentEnabled) {
-                                                    <button mat-menu-item (click)="openDialogInvoice(element)" [disabled]="element.ESTADO === 'Cancelado' || element.ESTADO === 'Terminado' || element.ESTADO === 'En OC'">
-                                                        <mat-icon>document_scanner</mat-icon>
-                                                        <span>Subir Factura</span>
-                                                    </button>
-                                                }
-                                                @if (configOrderEnabled) {
-                                                    <button mat-menu-item (click)="openDialogRegisterOrder(element)" [disabled]="element.ESTADO === 'Cancelado' || element.ESTADO === 'Terminado' || element.ESTADO === 'En OC'">
-                                                        <mat-icon>local_shipping</mat-icon>
-                                                        <span>Registrar Orden de Compra</span>
-                                                    </button>
-                                                }
-                                            </mat-menu>
-                                        }
+                                            }
+                                            @if (configOrderEnabled) {
+                                                <button mat-menu-item (click)="openDialogRegisterOrder(element)" [disabled]="element.ESTADO === 'Cancelado' || element.ESTADO === 'Terminado' || element.ESTADO === 'En OC'">
+                                                    <mat-icon>local_shipping</mat-icon>
+                                                    <span>Registrar Orden de Compra</span>
+                                                </button>
+                                            }
+                                        </mat-menu>
                                     </span>
                                 }
                             </td>

sistema-mantenimiento-front/src/app/components/forms-management/form-dyn-management/form-dyn-management-form/form-dyn-management-form.component.css

@@ -66,69 +66,6 @@ mat-form-field {
   vertical-align: top;
 }
 
-/*
-.example-list {
-  width: 100%;
-  border: solid 1px #ccc;
-  min-height: 60px;
-  background-color: white;
-  border-radius: 4px;
-  overflow: hidden;
-  display: block;
-}
-
-.example-box2 {
-  padding: 10px 10px;
-  border-bottom: solid 1px #ccc;
-  color: rgba(0, 0, 0, 0.87);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  cursor: move;
-  background: transparent;
-  font-size: 14px;
-}
-
-.example-box {
-  padding: 20px 10px;
-  border-bottom: solid 1px #ccc;
-  color: rgba(0, 0, 0, 0.87);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  cursor: move;
-  background: transparent;
-  font-size: 14px;
-}
-
-.cdk-drag-preview {
-  box-sizing: border-box;
-  border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-
-.cdk-drag-placeholder {
-  opacity: 0;
-}
-
-.cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.example-box:last-child {
-  border: none;
-}
-
-.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-*/
-
 mat-expansion-panel-header {
   padding: 0 15px;
 }
@@ -231,3 +168,21 @@ mat-expansion-panel {
   min-height: 60px;
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
+
+
+
+.main_container_form {
+  width: 100%; 
+  height: 100vh; 
+  display: flex; 
+  flex-direction: column;
+}
+
+.container_header_title {
+  display: flex; 
+  align-items: center;
+}
+
+.item_header_title {
+  width: calc(100% / 3);
+}

sistema-mantenimiento-front/src/app/components/forms-management/form-dyn-management/form-dyn-management-form/form-dyn-management-form.component.html

@@ -1,18 +1,18 @@
-<div style="width: 100%; height: 100vh; display: flex; flex-direction: column">
-  <div style="display: flex; align-items: center;">
-    <app-btn-navigate (click)="alert('exit')" nameButton="Regresar" style="width: calc(100% / 3);" />
-
-    <mat-card-title class="override-main-title align-center" style="width: calc(100% / 3);">
+<div class="main_container_form">
+  <div class="container_header_title">
+    <app-btn-navigate (click)="alert('exit')" nameButton="Regresar" class="item_header_title"/>
+    <mat-card-title class="override-main-title align-center item_header_title">
       {{ idForm == 0 ? 'Creación de Formulario' : 'Modificación de Formulario' }}
     </mat-card-title>
-
-    <div style="width: calc(100% / 3);"></div>
+    <div class="item_header_title"></div>
   </div>
-  <mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
+  @if (isLoading) {
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  }
   <div class="container">
-    <div class="toolbar-container ">
+    <div class="toolbar-container">
       <mat-accordion>
-        <!-- Ubicación de la tabla -->
+
         <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" hideToggle>
           <mat-expansion-panel-header>
             <mat-panel-title>Ubicación</mat-panel-title>
@@ -23,16 +23,18 @@
               <mat-grid-tile colspan="1">
                 <h1>Seleccione la ubicación de la tabla</h1>
               </mat-grid-tile>
-              <mat-grid-tile colspan="1" *ngIf="idForm == 0">
-                <mat-form-field appearance="outline">
-                  <mat-label>Módulo</mat-label>
-                  <mat-select formControlName="MODULO_DATA" matNativeControl>
-                    <mat-option *ngFor="let modulo of arrModules" [value]="modulo">
-                      {{ modulo.MODULO }}
-                    </mat-option>
-                  </mat-select>
-                </mat-form-field>
-              </mat-grid-tile>
+              @if (idForm == 0) {
+                <mat-grid-tile colspan="1">
+                  <mat-form-field appearance="outline">
+                    <mat-label>Módulo</mat-label>
+                    <mat-select formControlName="MODULO_DATA" matNativeControl>
+                      @for (module of arrModules; track module) {
+                        <mat-option [value]="module"> {{ module.MODULO }} </mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+                </mat-grid-tile>
+              }
               <mat-grid-tile colspan="1">
                 <mat-form-field appearance="outline">
                   <mat-label>Nombre del Registro del Formulario</mat-label>
@@ -58,8 +60,7 @@
           </form>
         </mat-expansion-panel>
 
-        <!-- Selección de tablas -->
-        <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle [disabled]="!formGroupUbication.valid">
+        <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle>
           <mat-expansion-panel-header>
             <mat-panel-title> Tablas BD </mat-panel-title>
             <mat-panel-description>Selección de tablas de la base de datos</mat-panel-description>
@@ -74,7 +75,9 @@
                 <mat-form-field appearance="outline">
                   <mat-label>Tabla principal</mat-label>
                   <mat-select formControlName="MAIN_TABLE" (selectionChange)="setColumns()">
-                    <mat-option *ngFor="let table of arrTables" [value]="table.NOMBRE_TABLA">{{ table.NOMBRE_TABLA.toUpperCase() }}</mat-option>
+                    @for (table of arrTables; track table) {
+                      <mat-option [value]="table.NOMBRE_TABLA">{{ table.NOMBRE_TABLA.toUpperCase() }}</mat-option>
+                    }
                   </mat-select>
                 </mat-form-field>
               </mat-grid-tile>
@@ -83,7 +86,9 @@
                 <mat-form-field appearance="outline">
                   <mat-label>Tablas relacionales</mat-label>
                   <mat-select formControlName="RELATION_TABLE" multiple (selectionChange)="dataColumns()">
-                    <mat-option *ngFor="let data_relation of arr_relationship" [value]="data_relation.NOMBRE_TABLA">{{ data_relation.NOMBRE_TABLA.toUpperCase() }}</mat-option>
+                    @for (relationship of arrRelationship; track $index) {
+                      <mat-option [value]="relationship.NOMBRE_TABLA">{{ relationship.NOMBRE_TABLA.toUpperCase() }}</mat-option>
+                    }
                   </mat-select>
                 </mat-form-field>
               </mat-grid-tile>
@@ -92,11 +97,13 @@
                 <mat-form-field appearance="outline">
                   <mat-label>Columnas</mat-label>
                   <mat-select formControlName="COLUMNS" multiple (selectionChange)="generateModel()">
-                    <mat-optgroup *ngFor="let data of arr_columns" [label]="data.table">
-                      <mat-option *ngFor="let column of data.columns" [value]="column.column" [disabled]="column.disable">
-                        {{ column.column }}
-                      </mat-option>
-                    </mat-optgroup>
+                    @for (infoColumns of arrColumns; track infoColumns) {
+                      <mat-optgroup [label]="infoColumns.table">
+                        @for (column of infoColumns.columns; track column) {
+                          <mat-option [value]="column.column" [disabled]="column.disable">{{ column.column }}</mat-option>
+                        }
+                      </mat-optgroup>
+                    }
                   </mat-select>
                 </mat-form-field>
               </mat-grid-tile>
@@ -106,7 +113,7 @@
             <mat-checkbox [(ngModel)]="isWithoutTable" [disabled]="formGroupTableDB.controls['MAIN_TABLE'].value === ''">Hábilitar columnas sin tabla</mat-checkbox>
           </div>
           <form>
-            <div *ngIf="isWithoutTable">
+            @if (isWithoutTable) {
               <mat-form-field appearance="outline" class="w-100">
                 <mat-label>Nueva Columna</mat-label>
                 <input matInput [(ngModel)]="newInput" maxlength="4" name="newInput" placeholder="Ingrese el nombre de la nueva columna" oninput="this.value = this.value.toUpperCase()" />
@@ -116,18 +123,19 @@
                 </button>
               </mat-form-field>
 
-              <div>
-                <mat-list *ngIf="arrNewColumns.length > 0">
-                  <mat-list-item *ngFor="let column of arrNewColumns; let i = index">
-                    <div style="display: flex;">
-                      <mat-icon mat-list-icon (click)="deleteNewColumn(column)" style="color: red; cursor:pointer;">close</mat-icon>
-                      <div>{{ column.toUpperCase() }}</div>
-                    </div>
-                  </mat-list-item>
+              @if (arrNewColumns.length > 0) {
+                <mat-list>
+                  @for (column of arrNewColumns; track column) {
+                    <mat-list-item>
+                      <div style="display: flex;">
+                        <mat-icon mat-list-icon (click)="deleteNewColumn(column)" style="color: red; cursor:pointer;">close</mat-icon>
+                        <div>{{ column.toUpperCase() }}</div>
+                      </div>
+                    </mat-list-item>
+                  }
                 </mat-list>
-              </div>
-
-            </div>
+              }
+            }
           </form>
           <div align="end">
             <button mat-raised-button color="warn" (click)="prevStep()" class="override_no_shadow">
@@ -141,7 +149,6 @@
           </div>
         </mat-expansion-panel>
 
-        <!-- Creación de formulario [disabled]="aux_columns.length === 0" -->
         <mat-expansion-panel [expanded]="step === 2" (opened)="setStep(2)" hideToggle (click)="validateDataColumns()" >
           <mat-expansion-panel-header>
             <mat-panel-title> Formulario </mat-panel-title>
@@ -160,12 +167,14 @@
 
           <div class="drag-container">
             <div cdkDropList #pendingList="cdkDropList" [cdkDropListData]="opciones" [cdkDropListConnectedTo]="connectedTo" class="example-list" (cdkDropListDropped)="drop($event)">
-              <div class="example-box" *ngFor="let item of opciones" cdkDrag [cdkDragDisabled]="aux_columns.length === 0">
-                <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
-                <mat-icon *ngIf="aux_columns.length === 0">block</mat-icon>
-                <mat-icon *ngIf="aux_columns.length > 0">add</mat-icon>
-                {{ item }}
-              </div>
+              @for (option of opciones; track option) {
+                <div class="example-box" cdkDrag [cdkDragDisabled]="aux_columns.length === 0">
+                  <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
+                  <mat-icon *ngIf="aux_columns.length === 0">block</mat-icon>
+                  <mat-icon *ngIf="aux_columns.length > 0">add</mat-icon>
+                  {{ option }}
+                </div>
+              }
             </div>
           </div>
           <div align="end" class="mt-16">
@@ -180,7 +189,6 @@
           </div>
         </mat-expansion-panel>
 
-        <!-- Asignación de Usuarios y Fechas -->
         <mat-expansion-panel [expanded]="step === 3" (opened)="setStep(3)" hideToggle>
           <mat-expansion-panel-header>
             <mat-panel-title> Usuarios y Fechas </mat-panel-title>
@@ -215,7 +223,6 @@
           </div>
         </mat-expansion-panel>
 
-        <!-- Generación de datos de la tabla -->
         <mat-expansion-panel [expanded]="step === 4" (opened)="setStep(4)" hideToggle hideToggle>
           <mat-expansion-panel-header>
             <mat-panel-title> Generar </mat-panel-title>
@@ -257,7 +264,6 @@
             <div style="float: left; width: 50%">
               <span class="white_font">
                 {{ idForm == 0 ? formGroupUbication.controls['MODULO_DATA'].value.MODULO : '' }} |
-                <!-- {{ idForm == 0 && formGroupUbication.controls['SUBMODULO_DATA'].value == 'undefined' ? formGroupUbication.controls['SUBMODULO_DATA'].value.SUBMODULO + ' | ' : ''}} -->
                 {{ formGroupUbication.controls['FORM_NAME_REGISTER'].value }} | {{ formGroupUbication.controls['FORM_NAME_UPDATE'].value }} - {{ field.step }}
               </span>
             </div>

sistema-mantenimiento-front/src/app/components/forms-management/form-dyn-management/form-dyn-management-form/form-dyn-management-form.component.ts

@@ -29,7 +29,7 @@ import { GetModules, ResponseDataGetModule } from 'src/app/interfaces/forms-mana
 })
 export class FormDynManagementFormComponent implements OnInit {
   public step = 0;
-
+  
   public opciones: Array<string> = ['input', 'select', 'checkbox', 'radio', 'textarea'];
   private auxiliar: Array<string> = ['input', 'select', 'checkbox', 'radio', 'textarea'];
 
@@ -46,8 +46,8 @@ export class FormDynManagementFormComponent implements OnInit {
   public arr_menu: MenuResponse[] = [];
 
   public arrTables: Array<GetTables> = [];
-  public arr_relationship: Array<any> = [];
-  public arr_columns: Array<InformationTable> = [];
+  public arrRelationship: Array<any> = [];
+  public arrColumns: Array<InformationTable> = [];
 
   public data_table: Array<any> = [];
   public model: Array<any> = [];
@@ -167,8 +167,8 @@ export class FormDynManagementFormComponent implements OnInit {
     await this._encService.decrypt(table_relationship).then((data: string) => (table_relationship = data));
 
     let arrOtherTables: Array<GetTables> = this.arrTables.filter((element: GetTables) => element.NOMBRE_TABLA !== this.formGroupTableDB.controls['MAIN_TABLE'].value);
-    this.arr_relationship = arrOtherTables;
-    this.arr_relationship.length === 0 ? this.formGroupTableDB.controls['RELATION_TABLE'].disable() : this.formGroupTableDB.controls['RELATION_TABLE'].enable();
+    this.arrRelationship = arrOtherTables;
+    this.arrRelationship.length === 0 ? this.formGroupTableDB.controls['RELATION_TABLE'].disable() : this.formGroupTableDB.controls['RELATION_TABLE'].enable();
 
     table_relationship = JSON.parse(table_relationship);
 
@@ -203,8 +203,8 @@ export class FormDynManagementFormComponent implements OnInit {
   public setColumns() {
     let arrOtherTables: Array<GetTables> = this.arrTables.filter((element:GetTables) => element.NOMBRE_TABLA !== this.formGroupTableDB.controls['MAIN_TABLE'].value);
 
-    this.arr_relationship = arrOtherTables;
-    this.arr_relationship.length === 0 ? this.formGroupTableDB.controls['RELATION_TABLE'].disable() : this.formGroupTableDB.controls['RELATION_TABLE'].enable();
+    this.arrRelationship = arrOtherTables;
+    this.arrRelationship.length === 0 ? this.formGroupTableDB.controls['RELATION_TABLE'].disable() : this.formGroupTableDB.controls['RELATION_TABLE'].enable();
     this.dataColumns();
 
     this.formGroupTableDB.controls['COLUMNS'].enable();
@@ -236,13 +236,12 @@ export class FormDynManagementFormComponent implements OnInit {
       (data: any) => {
         console.log(data);
         if (!data.error) {
-          this.arr_columns = data.response;
+          this.arrColumns = data.response;
 
-          if (this.arr_columns.length > 0) {
+          if (this.arrColumns.length > 0) {
 
-            // Se deshabilitan las opciones seleccionadas
             let new_cols: any = []
-            this.arr_columns.map((data_columns: any) => {
+            this.arrColumns.map((data_columns: any) => {
               let new_columns: any = [];
               data_columns.columns.map((column: any) => {
                 let obj = { column: column, disable: true };
@@ -253,7 +252,7 @@ export class FormDynManagementFormComponent implements OnInit {
               data_columns.columns = new_columns;
               new_cols.push(data_columns);
             });
-            this.arr_columns = new_cols;
+            this.arrColumns = new_cols;
             data.response.length > 0 ? this.formGroupTableDB.controls['COLUMNS'].enable() : this.formGroupTableDB.controls['COLUMNS'].disable();
           }
 
@@ -286,7 +285,7 @@ export class FormDynManagementFormComponent implements OnInit {
           });
           responseData.response.columns = dataColumns;
           let arrColumnExtra = responseData.response;
-          this.arr_columns.push(arrColumnExtra);
+          this.arrColumns.push(arrColumnExtra);
         }
       }, (error:HttpErrorResponse) => this._resourceService.checkErrors(error)
     );
@@ -297,7 +296,7 @@ export class FormDynManagementFormComponent implements OnInit {
 
     this.model = [];
     this.formGroupTableDB.controls['COLUMNS'].value.map((colum: string) => {
-      this.arr_columns.map((data: any) => {
+      this.arrColumns.map((data: any) => {
         if (data !== 'Acciones') {
           data.columns.map((item: string) => {
             if (colum !== 'Acciones' && item === colum)
@@ -350,14 +349,14 @@ export class FormDynManagementFormComponent implements OnInit {
             });
             break;
           case 'select':
-            let filter_columns = this.arr_columns.filter((element: any) => element.table !== this.formGroupUbication.controls['MAIN_TABLE'].value && element !== 'Acciones');
+            let filter_columns = this.arrColumns.filter((element: any) => element.table !== this.formGroupUbication.controls['MAIN_TABLE'].value && element !== 'Acciones');
             dialogRef = this.dialog.open(ConfigureSelectComponent, {
               disableClose: true,
               data: {
                 num_cols: this.fields[findIndexField].num_cols,
                 column: this.aux_columns,
                 table_main: this.formGroupUbication.controls['MAIN_TABLE'].value,
-                tables_rel: this.arr_relationship,
+                tables_rel: this.arrRelationship,
                 columns: filter_columns,
               },
               width: '1000px',
@@ -472,7 +471,7 @@ export class FormDynManagementFormComponent implements OnInit {
 
         let data_table = itmForm.data_table;
 
-        this.arr_columns.map((itmColumns: any) => {
+        this.arrColumns.map((itmColumns: any) => {
           if (itmColumns.columns.some((item: any) => item.column == itmForm.column)) {
 
             if (itmForm.tag == 'select' && itmForm.columnMMtoMain != null && itmForm.columnMMtoMain != undefined) {
@@ -710,17 +709,17 @@ export class FormDynManagementFormComponent implements OnInit {
     // Se eliminan elementos duplicados
     let arrData: any = [];
     let arrDataElement: any = [];
-    this.arr_columns.map((element: any) => {
+    this.arrColumns.map((element: any) => {
       if (!arrData.includes(element.table)) {
         arrData.push(element.table);
         arrDataElement.push(element);
       }
     });
-    this.arr_columns = arrDataElement;
+    this.arrColumns = arrDataElement;
 
     let dialogRef = this.dialog.open(SelectedUsersAndDates, {
       disableClose: true,
-      data: { data_table: this.arr_columns },
+      data: { data_table: this.arrColumns },
       width: '400px',
     });
 
@@ -760,7 +759,7 @@ export class FormDynManagementFormComponent implements OnInit {
     let codeTable: string = this.formGroupTableDB.controls['MAIN_TABLE'].value.substring(8, this.formGroupTableDB.controls['MAIN_TABLE'].value.length).toUpperCase() + '_';
 
     let isAddedColumnTable:boolean = false;
-    this.arr_columns.map((element:InformationTable) => {
+    this.arrColumns.map((element:InformationTable) => {
       element.columns.map((column:DataColumn) => {
         if (column.column.includes(codeTable + this.newInput)) {
           isAddedColumnTable = true;
@@ -774,7 +773,7 @@ export class FormDynManagementFormComponent implements OnInit {
 
       this.arrNewColumns.push(codeTable + this.newInput.toUpperCase());
       if (this.arrNewColumns.length > 1) {
-        this.arr_columns = this.arr_columns.map((element:InformationTable) => {
+        this.arrColumns = this.arrColumns.map((element:InformationTable) => {
           if (element.table === 'NA' && element.type === 'JSON') {
             element.columns.push({
               column: codeTable + this.newInput.toUpperCase(),
@@ -785,7 +784,7 @@ export class FormDynManagementFormComponent implements OnInit {
         })
       }else{
 
-        this.arr_columns.push({
+        this.arrColumns.push({
           table: 'NA',
           type: 'JSON',
           columns: [{
@@ -820,14 +819,14 @@ export class FormDynManagementFormComponent implements OnInit {
       return fields;
     });
     
-    this.arr_columns = this.arr_columns.map((element:InformationTable) => {
+    this.arrColumns = this.arrColumns.map((element:InformationTable) => {
       if (element.table === 'NA' && element.type === 'JSON') {
         element.columns = element.columns.filter((columns:DataColumn) => columns.column !== column.toUpperCase());
       }
       return element;
     });
 
-    this.arr_columns = this.arr_columns.filter((element:InformationTable) => element.columns.length !== 0);
+    this.arrColumns = this.arrColumns.filter((element:InformationTable) => element.columns.length !== 0);
   }
 
   // Formulario 1