From 536f689ae521628fc15f9aa564d60e7a4d6373ad Mon Sep 17 00:00:00 2001 From: Joel0347 <127158086+Joel0347@users.noreply.github.com> Date: Sat, 23 Nov 2024 00:48:13 -0500 Subject: [PATCH] refactor_api(fe):making the code more extensible --- .../equipment/equipment.component.html | 2 +- .../equipment/equipment.component.ts | 69 +++++++++++++------ .../autocomplete/autocomplete.component.ts | 17 +++-- .../datepicker/datepicker.component.ts | 5 +- .../components/table/table.component.ts | 4 -- 5 files changed, 65 insertions(+), 32 deletions(-) diff --git a/frontend/src/app/modules/office/components/equipment/equipment.component.html b/frontend/src/app/modules/office/components/equipment/equipment.component.html index 2f75a423..23442e92 100644 --- a/frontend/src/app/modules/office/components/equipment/equipment.component.html +++ b/frontend/src/app/modules/office/components/equipment/equipment.component.html @@ -15,7 +15,7 @@ Oficina - + {{ option.label }} diff --git a/frontend/src/app/modules/office/components/equipment/equipment.component.ts b/frontend/src/app/modules/office/components/equipment/equipment.component.ts index b0498ea8..9fa6d4bf 100644 --- a/frontend/src/app/modules/office/components/equipment/equipment.component.ts +++ b/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 = 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 = 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. diff --git a/frontend/src/app/shared/components/autocomplete/autocomplete.component.ts b/frontend/src/app/shared/components/autocomplete/autocomplete.component.ts index 6d5db5cb..d3f77db9 100644 --- a/frontend/src/app/shared/components/autocomplete/autocomplete.component.ts +++ b/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); - } } diff --git a/frontend/src/app/shared/components/datepicker/datepicker.component.ts b/frontend/src/app/shared/components/datepicker/datepicker.component.ts index dabf7be6..ac7590d1 100644 --- a/frontend/src/app/shared/components/datepicker/datepicker.component.ts +++ b/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(); - // 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); diff --git a/frontend/src/app/shared/components/table/table.component.ts b/frontend/src/app/shared/components/table/table.component.ts index 24104985..aeadbade 100644 --- a/frontend/src/app/shared/components/table/table.component.ts +++ b/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.'); - } }