refactor_api(fe):making the code more extensible

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

@@ -15,7 +15,7 @@
     <mat-form-field appearance="fill">
       <mat-label>Oficina</mat-label>
       <mat-select formControlName="secondSelect" (selectionChange)="onSelectionChange()">
-        <mat-option *ngFor="let option of officeOptions" [value]="option.value">
+        <mat-option *ngFor="let option of officeOptions" [value]="option.id">
           {{ option.label }}
         </mat-option>
       </mat-select>

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

@@ -1,15 +1,16 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
 import { FormGroup, FormBuilder } from '@angular/forms';
 import { ConfigColumn } from '../../../../shared/components/table/table.component';
 
 import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
 
 @Component({
   selector: 'app-equipment',
   templateUrl: './equipment.component.html',
   styleUrls: ['./equipment.component.css']
 })
-export class EquipmentComponent implements OnInit {
+export class EquipmentComponent implements OnInit, AfterViewInit {
 
   constructor(private fb: FormBuilder) {
     this.form = this.fb.group({
@@ -22,20 +23,11 @@ export class EquipmentComponent implements OnInit {
   showTable = false;
   isSecondSelectDisabled = true; // initially inactive
   CenterOptions: any[] = [];
-  officeOptions: { value: string; label: string; }[] = [];
+  officeOptions: { id: number; label: string; }[] = [];
   // Example data for the table
-  dataSource: MatTableDataSource<any> = new MatTableDataSource([
-    { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
-    { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
-    { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
-    { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
-    { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
-    { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
-    { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
-    { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
-    { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
-    { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
-  ]);
+  dataSource: MatTableDataSource<any> = new MatTableDataSource([0]);
+  @ViewChild(MatPaginator) paginator: MatPaginator = [][0];
+
   // Table Columns
   displayedColumns: ConfigColumn[] = [
     {
@@ -58,6 +50,10 @@ export class EquipmentComponent implements OnInit {
     this.getCenterList();
   }
 
+  ngAfterViewInit(): void {
+    this.dataSource.paginator = this.paginator;
+  }
+
   /**
    * This function subscribes to the changes of the first select control.
    * If the value is true, it enables the second select control.
@@ -79,7 +75,10 @@ export class EquipmentComponent implements OnInit {
    */
   onSelectionChange(): void {
     const { firstSelect, secondSelect } = this.form.value;
-    this.showTable = firstSelect && secondSelect;
+    if (firstSelect && secondSelect) {
+      this.getEquipmentsByOffice(secondSelect);
+      this.showTable = true;
+    }
   }
 
   /**
@@ -92,6 +91,8 @@ export class EquipmentComponent implements OnInit {
     this.form.get('secondSelect')?.reset();
     this.getOfficesByCenter(selectedCentroID);
     this.form.get('secondSelect')?.enable();
+
+    this.showTable = false;
   }
 
   /**
@@ -103,22 +104,46 @@ export class EquipmentComponent implements OnInit {
     // this is a test
     if (centerID === 1)
       this.officeOptions = [
-        { value: 'oficina1', label: 'Oficina 1.1' },
-        { value: 'oficina2', label: 'Oficina 1.2' },
+        { id: 1, label: 'Oficina 1.1' },
+        { id: 2, label: 'Oficina 1.2' },
       ];
     else if (centerID === 2)
       this.officeOptions = [
-        { value: 'oficina3', label: 'Oficina 2.1' },
-        { value: 'oficina4', label: 'Oficina 2.2' },
+        { id: 3, label: 'Oficina 2.1' },
+        { id: 4, label: 'Oficina 2.2' },
       ];
     else {
       this.officeOptions = [
-        { value: 'oficina5', label: 'Oficina 3.1' },
-        { value: 'oficina6', label: 'Oficina 3.2' },
+        { id: 5, label: 'Oficina 3.1' },
+        { id: 6, label: 'Oficina 3.2' },
       ];
     }
   }
 
+  /**
+   * This function retrieves the list of equipment based on the selected office.
+   * It updates the dataSource for the MatTable with the list of equipment.
+   * @param officeID The ID of the selected office.
+   */
+  getEquipmentsByOffice(officeID : number): void {
+    const equipments =[
+      { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
+      { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
+      { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
+      { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
+      { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
+      { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
+      { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
+      { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
+      { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
+      { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
+    ];
+
+    this.dataSource = new MatTableDataSource(equipments);
+    this.dataSource.paginator = this.paginator;
+    console.log(this.dataSource);
+  }
+
   /**
    * Retrieves the list of centers.
    * This function updates the CenterOptions array with the list of available centers.

frontend/src/app/shared/components/autocomplete/autocomplete.component.ts

@@ -24,13 +24,22 @@ export class AutocompleteComponent implements OnInit {
     );
   }
 
+  /**
+   * Emits the selected option to the parent component.
+   * @param event The event emitted by the option selection.
+   */
+  onOptionSelected(event: any) {
+    this.optionSelected.emit(event.option.value);
+  }
+
+  /**
+   * Filters the options based on the input value.
+   * @param value The input value to filter options against.
+   * @returns An array of options that match the input value.
+   */
   private _filter(value: string): string[] {
     const filterValue = value.toLowerCase();
 
     return this.options.filter(option => option.toLowerCase().startsWith(filterValue));
   }
-
-  onOptionSelected(event: any) {
-    this.optionSelected.emit(event.option.value);
-  }
 }

frontend/src/app/shared/components/datepicker/datepicker.component.ts

@@ -14,7 +14,10 @@ export class DatepickerComponent {
   @Input() label: string = 'Elige una fecha';
   @Output() dateSelected = new EventEmitter<Date>();
 
-  // Método para emitir la fecha seleccionada
+  /**
+   * Emits the selected date to the parent component.
+   * @param event The event emitted by the date picker.
+   */
   onDateChange(event: any) {
     const selectedDate = event.value;
     this.dateSelected.emit(selectedDate);

frontend/src/app/shared/components/table/table.component.ts

@@ -40,8 +40,4 @@ export class TableComponent implements OnInit, AfterViewInit {
   edit() {
     throw new Error('Method not implemented.');
   }
-
-  createNew() {
-    throw new Error('Method not implemented.');
-  }
 }