fix_api(fe): Fixed autocomplete and datepicker

frontend/src/app/modules/global/components/menu/menu.component.html

@@ -46,7 +46,7 @@
   </aside>
 
   <!-- Main Content Section -->
-  <main class="main-content">
+  <main class="main-content" (click)="hideSidebar()">
     <div class="content">
       <router-outlet></router-outlet> <!-- Placeholder for dynamic routing -->
     </div>

frontend/src/app/modules/global/components/menu/menu.component.ts

@@ -32,6 +32,10 @@ export class MenuComponent implements OnInit {
     this.isSidebarActive = !this.isSidebarActive;
   }
 
+  hideSidebar(): void {
+    this.isSidebarActive = false;
+  }
+
   /**
    * Sets the active option in the menu.
    * @param option The ID of the option to set as active.

frontend/src/app/modules/office/components/equipment/equipment.component.html

@@ -14,7 +14,7 @@
         [label]="'Oficinas'"
         [options]="global.officeStringArray"
         [isDisabled]="!this.global.isOptionValid(global.centerStringArray, this.centerSelected)"
-        (optionSelected)="handleOptionSelected($event)"
+        (inputModified)="onOfficeInputModified($event)"
         formControlName="office">
       </app-autocomplete>
     </div>

frontend/src/app/modules/office/components/equipment/equipment.component.ts

@@ -108,30 +108,20 @@ export class EquipmentComponent implements OnInit {
       });
   }
 
-  /**
-   * Handles the selection of an office option.
-   * Updates the officeSelected property and checks if both office and center are selected.
-   * If both are selected, it shows the table and retrieves the equipment for the selected office.
-   * @param option The selected office option.
-   */
-  handleOptionSelected(option: any) {
-    this.officeSelected = option;
-    this.findOfficeId();
-    this.getEquipmentsByOffice();
-  }
-
   /**
    * Handles the "Consultar" button click event.
    * Checks if both center and office are selected before showing the table.
    * If not, displays an alert message.
    */
   onConsultClick(): void {
-    if (this.global.isOptionValid(this.global.centerStringArray, this.centerSelected) &&
-        this.global.isOptionValid(this.global.officeStringArray, this.officeSelected)) {
-      this.showTable = true;
-    } else {
-      this.showTable = false;
-      this.global.openDialog('Por favor, selecciona un Centro de Trabajo y una Oficina.');
+    if (!this.showTable) {
+      if (this.global.isOptionValid(this.global.centerStringArray, this.centerSelected) &&
+          this.global.isOptionValid(this.global.officeStringArray, this.officeSelected)) {
+        this.showTable = true;
+      } else {
+        this.showTable = false;
+        this.global.openDialog('Por favor, selecciona un Centro de Trabajo y una Oficina.');
+      }
     }
   }
 
@@ -155,5 +145,19 @@ export class EquipmentComponent implements OnInit {
     this.officeSelected = null!;
     this.officeSelectedId = 0;
   }
+
+  /**
+   * Handles the change event of the first select control.
+   * @param event The change event of the first select control.
+   */
+  onOfficeInputModified(value: string): void {
+    this.officeSelected = value;
+    this.showTable = false;
+
+    if (this.global.isOptionValid(this.global.officeStringArray, this.officeSelected)) {
+      this.findOfficeId();
+      this.getEquipmentsByOffice();
+    }
+  }
 }
 

frontend/src/app/modules/workCenter/components/alert/alert.component.html

@@ -4,7 +4,7 @@
       <app-autocomplete
         [label]="'Centro de Trabajo'"
         [options]="this.global.centerStringArray"
-        (optionSelected)="handleOptionSelected($event)"
+        (inputModified)="onCenterInputModified($event)"
       >
       </app-autocomplete>
     </div>
@@ -20,7 +20,7 @@
     </div>
   </div>
 
-  <div class="table" [class.hidden]="!isTableActive">
+  <div class="table" [class.hidden]="!showTable">
     <app-table
       [dataSource]="dataSource"
       [displayedColumns]="displayedColumns"

frontend/src/app/modules/workCenter/components/alert/alert.component.ts

@@ -13,7 +13,7 @@ export class AlertComponent implements OnInit {
     public global: GlobalModule
   ) {}
 
-  isTableActive: boolean = false;
+  showTable: boolean = false;
   centerSelected: string = '';
   dataSource: MatTableDataSource<any> = new MatTableDataSource();
   displayedColumns: ConfigColumn[] = [
@@ -46,13 +46,15 @@ export class AlertComponent implements OnInit {
    * This method is triggered when the user clicks on the alert button.
    */
   onClick() {
-    if (this.global.isOptionValid(this.global.centerStringArray, this.centerSelected)) {
-      this.global.findCenterId(this.centerSelected);
-      this.getAlerts(this.global.centerSelectedId);
-      this.isTableActive = !this.isTableActive;
-    }
-    else {
-      this.global.openDialog('Por favor, selecciona un Centro de Trabajo.');
+    if (!this.showTable) {
+      if (this.global.isOptionValid(this.global.centerStringArray, this.centerSelected)) {
+        this.global.findCenterId(this.centerSelected);
+        this.getAlerts(this.global.centerSelectedId);
+        this.showTable = true;
+      }
+      else {
+        this.global.openDialog('Por favor, selecciona un Centro de Trabajo.');
+      }
     }
   }
 
@@ -78,4 +80,17 @@ export class AlertComponent implements OnInit {
   handleOptionSelected(option: string) {
     this.centerSelected = option;
   }
+
+  /**
+   * Handles the change event of the first select control.
+   * @param event The change event of the first select control.
+   */
+  onCenterInputModified(value: string): void {
+    this.centerSelected = value;
+    this.showTable = false;
+
+    if (this.global.isOptionValid(this.global.centerStringArray, this.centerSelected)) {
+      this.global.findCenterId(this.centerSelected);
+    }
+  }
 }

frontend/src/app/modules/workCenter/components/avg-consumption/avg-consumption.component.css

@@ -1,3 +1,6 @@
+.hidden {
+  display: none;
+}
 .form-avg-consumption {
   display: flex;
   justify-content: space-between;

frontend/src/app/modules/workCenter/components/avg-consumption/avg-consumption.component.html

@@ -22,7 +22,7 @@
 
 <table mat-table
        [dataSource]="selectedOptions" multiTemplateDataRows
-       class="mat-elevation-z8">
+       class="mat-elevation-z8" [hidden]="!showTable">
   @for (column of columnsToDisplay; track column) {
     <ng-container matColumnDef="{{column}}">
       <th mat-header-cell *matHeaderCellDef> Centro de Trabajo </th>

frontend/src/app/modules/workCenter/components/avg-consumption/avg-consumption.component.ts

@@ -95,12 +95,14 @@ export class AvgConsumptionComponent implements OnInit{
    * Called when the "Consultar" button is clicked.
    */
   onConsultClick() {
-    if (this.selectedOptions.length > 0)
-    {
-      this.showTable = true;
-      this.getAvgRegisters();
-    } else {
-      this.global.openDialog('Por favor, selecciona al menos un Centro de Trabajo.');
+    if (!this.showTable) {
+      if (this.selectedOptions.length > 0)
+      {
+        this.showTable = true;
+        this.getAvgRegisters();
+      } else {
+        this.global.openDialog('Por favor, selecciona al menos un Centro de Trabajo.');
+      }
     }
   }
 
@@ -133,15 +135,11 @@ export class AvgConsumptionComponent implements OnInit{
    * @param element The row element to be toggled.
    */
   toggleRow(element: string) {
-    if (this.showTable) {
-      const index = this.expandedElements.indexOf(element);
-      if (index >= 0) {
-        this.expandedElements.splice(index, 1);
-      } else {
-        this.expandedElements.push(element);
-      }
+    const index = this.expandedElements.indexOf(element);
+    if (index >= 0) {
+      this.expandedElements.splice(index, 1);
     } else {
-      this.global.openDialog('Presione consultar para obtener los datos deseados.');
+      this.expandedElements.push(element);
     }
   }
 

frontend/src/app/modules/workCenter/components/excess/excess.component.ts

@@ -96,10 +96,12 @@ export class ExcessComponent {
    * Displays the table if both the year and month are selected.
    */
   onClick(): void {
-    if (this.yearSelected && this.monthSelected)
-      this.showTable = true;
-    else
-      this.global.openDialog('Por favor, selecciona una fecha válida.');
+    if (!this.showTable) {
+      if (this.yearSelected && this.monthSelected)
+        this.showTable = true;
+      else
+        this.global.openDialog('Por favor, selecciona una fecha válida.');
+    }
   }
 
   /**

frontend/src/app/modules/workCenter/components/policy/policy.component.html

@@ -28,7 +28,7 @@
     </div>
   </div>
 
-  <div class="table" [class.hidden]="!isTableActive">
+  <div class="table" [class.hidden]="!showTable">
     <div>
       <h6>Antes</h6>
       <app-table class="before"

frontend/src/app/modules/workCenter/components/policy/policy.component.ts

@@ -27,7 +27,7 @@ export class PolicyComponent implements OnInit {
   optionsPolicy: string[] = [];
   objectsPolicy: Policy[] = [];
 
-  isTableActive: boolean = false;
+  showTable: boolean = false;
   dataSourceBefore: MatTableDataSource<any> = [][0];
   dataSourceAfter: MatTableDataSource<any> = [][0];
   displayedColumns: ConfigColumn[] = [
@@ -57,12 +57,14 @@ export class PolicyComponent implements OnInit {
    * If not, displays an alert message.
    */
   onClick() {
-    if (this.global.isOptionValid(this.global.centerStringArray, this.centerSelected) &&
-      this.global.isOptionValid(this.optionsPolicy, this.policySelected)) {
-      this.isTableActive = true;
-    } else {
-      this.isTableActive = false;
-      this.global.openDialog('Por favor, selecciona un Centro de Trabajo y una Política.');
+    if (!this.showTable) {
+      if (this.global.isOptionValid(this.global.centerStringArray, this.centerSelected) &&
+        this.global.isOptionValid(this.optionsPolicy, this.policySelected)) {
+        this.showTable = true;
+      } else {
+        this.showTable = false;
+        this.global.openDialog('Por favor, selecciona un Centro de Trabajo y una Política.');
+      }
     }
   }
 
@@ -85,7 +87,7 @@ export class PolicyComponent implements OnInit {
    */
   onCenterInputModified(value: string) {
     this.centerSelected = value;
-    this.isTableActive = false;
+    this.showTable = false;
     this.policySelected = null!;
     this.policySelectedId = 0;
 
@@ -107,6 +109,6 @@ export class PolicyComponent implements OnInit {
    */
   onPolicyInputModified(value: string) {
     this.policySelected = value;
-    this.isTableActive = false;
+    this.showTable = false;
   }
 }

frontend/src/app/modules/workCenter/components/total-consumption/total-consumption.component.html

@@ -1,22 +1,25 @@
 <div class="form-total-consumption">
-  <div class="form">
+  <form class="form" [formGroup]="form">
     <div class="form-inputs">
       <app-autocomplete class="autocomplete"
         [label]="'Centro de Trabajo'"
         [options]="global.centerStringArray"
-        (optionSelected)="handleOptionSelected($event)"
+        (inputModified)="onCenterInputModified($event)"
       >
       </app-autocomplete>
 
       <app-datepicker class="startDate"
         [filter]="filterStartDate"
         [label]="'Desde'"
-        (dateSelected)="handleDateSelected($event)"
+        [control]="getControl('startDateForm')"
+        (dateSelected)="handleStartDateSelected($event)"
       ></app-datepicker>
 
       <app-datepicker class="endDate"
         [filter]="filterEndDate"
         [label]="'Hasta'"
+        [control]="getControl('endDateForm')"
+        (dateSelected)="handleEndDateSelected($event)"
       ></app-datepicker>
     </div>
 
@@ -29,9 +32,9 @@
 
       <app-button class="exportPDF"></app-button>
     </div>
-  </div>
+  </form>
 
-  <div class="table" [class.hidden]="!isTableActive">
+  <div class="table" [class.hidden]="!showTable">
     <app-table
       [dataSource]="dataSource"
       [displayedColumns]="displayedColumns"