feat_api(fe): added export functions for each view and export service

frontend/src/app/config/api.config.ts

@@ -15,3 +15,14 @@ export const MY_FORMATS = {
     monthYearA11yLabel: 'MMMM YYYY',
   },
 };
+export const EXPORT_CENTER = '/v1/company/export/list';
+export const EXPORT_AVG = '/v1/company/export/mean_cost';
+export const EXPORT_EXCESS = '/v1/company/export/over_limit';
+export const EXPORT_PREDICTION = '/v1/company/export/proyection';
+export const EXPORT_EQUIPMENT = '/v1/equipment/export';
+export const EXPORT_OFFICE = '/v1/office/export';
+export const EXPORT_COMPARISON = '/v1/policy/export/comparison';
+export const EXPORT_POLICY = '/v1/policy/export/list';
+export const EXPORT_REGISTER = '/v1/register/export';
+export const EXPORT_USER = '/v1/user/export';
+export const EXPORT_ALERT = '/v1/warning/export';

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

@@ -250,7 +250,7 @@
   border-radius: 4px;
   padding: 0.8rem;
   min-width: 200px;
-  z-index: 1000;
+  z-index: 99999;
   font-family: 'Inter', 'Roboto', sans-serif;
 }
 .user-section,

frontend/src/app/modules/global/global.module.ts

@@ -16,6 +16,7 @@ import { LoginComponent } from './components/login/login.component';
 //global services
 import { WorkCenterService } from '../../services/workCenter/work-center.service';
 import { OfficeService } from '../../services/office/office.service';
+import { ExportService } from '../../services/export/export.service';
 
 //global directives
 import { PasswordValidatorDirective } from '../../directives/password/password.directive';
@@ -90,10 +91,16 @@ import { Observable } from 'rxjs';
 export class GlobalModule {
   workCenters: Item[] = [];
   offices: Item[] = [];
+  formatMapper: Map<string, string> = new Map<string, string>([
+    ["pdf", "application/pdf"],
+    ["docx", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"],
+    ["csv", "text/csv"]
+  ])
 
   constructor(
     public httpCenter: WorkCenterService,
     public httpOffice: OfficeService,
+    private httpExport: ExportService,
     public dialog: MatDialog
   ) { }
 
@@ -212,6 +219,37 @@ export class GlobalModule {
     return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}.${milliseconds}`;
   }
 
+  export(route: string, name: string, format: string): void {
+    this.httpExport.getDocument(route).subscribe({
+      next: (response) => {
+
+        if (!response) {
+          throw new Error("Descarga fallida");
+        }
+
+        const binaryString = atob(response);
+        const bytes = new Uint8Array(binaryString.length);
+        for (let i = 0; i < binaryString.length; i++) {
+          bytes[i] = binaryString.charCodeAt(i);
+        }
+
+        const blob = new Blob([bytes], { type: this.formatMapper.get(format) });
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = `${name}.${format}`;
+        document.body.appendChild(link);
+        link.click();
+
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(link);
+      },
+      error: (error) => {
+        console.error("Error durante la descarga: ", error);
+      }
+    });
+  }
+
   /**
    * This function resets all variables
    * to their initial default values. Use this function to

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

@@ -31,7 +31,11 @@
       [label]="'Consultar'"
       [function]="onConsultClick.bind(this)">
     </app-button>
-    <app-button></app-button>
+    <app-button class="export"
+      [control]="export"
+      [exportFunction]="exportFunction.bind(this)"
+      [isDisabled]="!showTable"
+    ></app-button>
   </div>
   <div class="form-table" [class.hidden]="!showTable || dataSource.data.length == 0">
     <app-table

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

@@ -8,6 +8,7 @@ import { DataService } from '../../../../../services/data/data.service';
 import { Subscription } from 'rxjs';
 import { Item } from '../../../../../shared/shared.module';
 import { SnackbarService } from '../../../../../services/snackbar/snackbar.service';
+import { API_URL, EXPORT_EQUIPMENT } from '../../../../../config/api.config';
 
 declare var bootstrap: any;
 
@@ -23,6 +24,7 @@ export class EquipmentComponent implements OnInit, OnDestroy {
   form: FormGroup;
   showTable: boolean = false;
   noResults: boolean = false;
+  export: FormControl = [][0];
   equipmentObjects: Equipment[] = [];
   equipments: string[] = [];
   useFrequency: Map<string, string> = new Map<string, string>([
@@ -184,6 +186,14 @@ export class EquipmentComponent implements OnInit, OnDestroy {
     }
   }
 
+  exportFunction(): void {
+    const userId = this.global.getUserInfo().id;
+    const officeId = this.global.getControlValue(this.form, 'office').id;
+    const format = this.export.value;
+    const route = `${API_URL}${EXPORT_EQUIPMENT}?userId=${userId}&officeId=${officeId}&format=%22${format}%22`;
+    this.global.export(route, "Exceso_de_Cosumo", format);
+  }
+
   /**
    * This function is used to handle the "Add" button click event.
    * It retrieves the values of 'workCenter' and 'office' from the form controls,

frontend/src/app/modules/office/components/manage/index/manage.component.html

@@ -22,7 +22,11 @@
       [label]="'Consultar'"
       [function]="onConsultClick.bind(this)">
     </app-button>
-    <app-button></app-button>
+    <app-button class="export"
+      [control]="export"
+      [exportFunction]="exportFunction.bind(this)"
+      [isDisabled]="!showTable"
+    ></app-button>
   </div>
   <div class="form-table" [class.hidden]="!showTable || dataSource.data.length == 0">
     <app-table

frontend/src/app/modules/office/components/manage/index/manage.component.spec.ts

@@ -9,7 +9,6 @@ import { SharedModule } from '../../../../../shared/shared.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatTableModule } from '@angular/material/table';
 import { ManageFormComponent } from '../../../components/manage/form/manage-form.component';
-import { MatNativeDateModule } from '@angular/material/core';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { OfficeService } from '../../../../../services/office/office.service';
 
@@ -57,7 +56,7 @@ describe('ManageOfficeComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [
          ManageComponent,
-         ManageFormComponent 
+         ManageFormComponent
       ],
       imports: [
         ReactiveFormsModule,

frontend/src/app/modules/office/components/manage/index/manage.component.ts

@@ -7,6 +7,7 @@ import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { Item } from '../../../../../shared/shared.module';
 import { SnackbarService } from '../../../../../services/snackbar/snackbar.service';
+import { API_URL, EXPORT_OFFICE } from '../../../../../config/api.config';
 
 declare var bootstrap: any;
 @Component({
@@ -19,6 +20,7 @@ export class ManageComponent implements OnInit, OnDestroy {
   form: FormGroup;
   showTable: boolean = false;
   noResults: boolean = false;
+  export: FormControl = [][0];
   dataSource: MatTableDataSource<any> = new MatTableDataSource();
   displayedColumns: ConfigColumn[] = [
     {
@@ -108,6 +110,14 @@ export class ManageComponent implements OnInit, OnDestroy {
     modal.show();
   }
 
+  exportFunction(): void {
+    const userId = this.global.getUserInfo().id;
+    const centerId = this.global.getControlValue(this.form, "workCenter").id;
+    const format = this.export.value;
+    const route = `${API_URL}${EXPORT_OFFICE}?userId=${userId}&companyId=${centerId}&format=%22${format}%22`;
+    this.global.export(route, "Oficinas", format);
+  }
+
    /**
    * Handles the "Consultar" button click event.
    * Checks if both center and office are selected before showing the table.

frontend/src/app/modules/policy/components/comparison/index/comparison.component.html

@@ -23,7 +23,11 @@
       >
       </app-button>
 
-      <app-button></app-button>
+      <app-button class="export"
+        [control]="export"
+        [exportFunction]="exportFunction.bind(this)"
+        [isDisabled]="!showTable"
+      ></app-button>
     </div>
   </div>
   <div class="table" [class.hidden]="!showTable">

frontend/src/app/modules/policy/components/comparison/index/comparison.component.ts

@@ -3,11 +3,12 @@ import { Component, OnInit } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
 import { ConfigColumn } from '../../../../../shared/components/table/table.component';
 import { PolicyService } from '../../../../../services/policy/policy.service';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { Item } from '../../../../../shared/shared.module';
 import { PolicyComparison } from '../../../../../models/policy.interface';
 import { RegisterByDay } from '../../../../../models/register.interface';
 import { Chart } from 'chart.js/auto';
+import { API_URL, EXPORT_COMPARISON } from '../../../../../config/api.config';
 
 @Component({
   selector: 'app-comparison',
@@ -22,6 +23,7 @@ export class ComparisonComponent implements OnInit {
   registersAfter: RegisterByDay[] = [];
   noResultsBefore: boolean = false;
   noResultsAfter: boolean = false;
+  export: FormControl = [][0];
   footerTableBefore: any[] = [];
   footerTableAfter: any[] = [];
   dataSourceBefore: MatTableDataSource<any> = new MatTableDataSource();
@@ -132,6 +134,18 @@ export class ComparisonComponent implements OnInit {
     }
   }
 
+  exportFunction(): void {
+    const userId = this.global.getUserInfo().id;
+    const centerId = this.global.getControlValue(this.form, "workCenter").id;
+    const policy = this.global.getControlValue(this.form, "policy");
+    const len = policy.name.length;
+    const date = policy.name.substring(len - 11, len - 1);
+    const format = this.export.value;
+    const params = `?userId=${userId}&companyId=${centerId}&policyId=${policy.id}&applyingDate=%22${date}%22&format=%22${format}%22`;
+    const route = `${API_URL}${EXPORT_COMPARISON}${params}`;
+    this.global.export(route, "Comparación_de_Política", format);
+  }
+
   /**
    * Retrieves policies based on the selected center ID.
    * Updates the optionsPolicy array with the names of the policies.

frontend/src/app/modules/policy/components/manage/index/manage.component.css

@@ -2,9 +2,13 @@
   padding: 1rem;
 }
 .form-buttons {
+  width: 100%;
   display: flex;
-  flex-direction: row;
-  width: 20%;
-  align-items: center;
-  align-content: left;
+  flex-wrap: wrap;
+  justify-content: right;
+  position: relative;
+  top: 3px;
+  left: 0;
+  margin-top: 5px;
+  gap: 8px;
 }

frontend/src/app/modules/policy/components/manage/index/manage.component.html

@@ -9,6 +9,10 @@
           [icon]="'add'"
         >
         </app-button>
+        <app-button class="export"
+          [control]="export"
+          [exportFunction]="exportFunction.bind(this)"
+        ></app-button>
       </div>
     </div>
     <div class="col-12">

frontend/src/app/modules/policy/components/manage/index/manage.component.ts

@@ -8,6 +8,8 @@ import { PolicyInfo } from '../../../../../models/policy.interface';
 import { Subscription } from 'rxjs';
 import { Item } from '../../../../../shared/shared.module';
 import { SnackbarService } from '../../../../../services/snackbar/snackbar.service';
+import { FormControl } from '@angular/forms';
+import { API_URL, EXPORT_POLICY } from '../../../../../config/api.config';
 
 declare var bootstrap: any;
 @Component({
@@ -18,6 +20,7 @@ declare var bootstrap: any;
 export class ManageComponent implements OnInit, OnDestroy {
   private subscriptions: Subscription = new Subscription();
   noResults: boolean = false;
+  export: FormControl = [][0];
   policyStringArray: string[] = [];
   policyArray: Item[] = [];
   policyObjectArray: PolicyInfo[] = [];
@@ -63,6 +66,13 @@ export class ManageComponent implements OnInit, OnDestroy {
     modal.show();
   }
 
+  exportFunction(): void {
+    const userId = this.global.getUserInfo().id;
+    const format = this.export.value;
+    const route = `${API_URL}${EXPORT_POLICY}?userId=${userId}&format=%22${format}%22`;
+    this.global.export(route, "Políticas_de_Eficiencia_Energética", format);
+  }
+
   /**
    * Deletes a policy from the system.
    * This function prompts the user for confirmation before deleting the selected policy.

frontend/src/app/modules/user/components/manage/index/manage.component.css

@@ -2,9 +2,13 @@
   padding: 1rem;
 }
 .form-buttons {
+  width: 100%;
   display: flex;
-  flex-direction: row;
-  width: 20%;
-  align-items: center;
-  align-content: left;
+  flex-wrap: wrap;
+  justify-content: right;
+  position: relative;
+  top: 3px;
+  left: 0;
+  margin-top: 5px;
+  gap: 8px;
 }

frontend/src/app/modules/user/components/manage/index/manage.component.html

@@ -9,6 +9,10 @@
           [icon]="'add'"
         >
       </app-button>
+      <app-button class="export"
+        [control]="export"
+        [exportFunction]="exportFunction.bind(this)"
+      ></app-button>
       </div>
     </div>
     <div class="col-12">

frontend/src/app/modules/user/components/manage/index/manage.component.ts

@@ -6,6 +6,8 @@ import { GlobalModule } from '../../../../global/global.module';
 import { DataService } from '../../../../../services/data/data.service';
 import { SnackbarService } from '../../../../../services/snackbar/snackbar.service';
 import { UserLogged } from '../../../../../models/credential.interface';
+import { FormControl } from '@angular/forms';
+import { API_URL, EXPORT_USER } from '../../../../../config/api.config';
 
 declare var bootstrap: any;
 
@@ -16,6 +18,7 @@ declare var bootstrap: any;
 })
 export class ManageComponent implements OnInit {
   noResults: boolean = false;
+  export: FormControl = [][0]
   dataSource: MatTableDataSource<any> = new MatTableDataSource([0]);
   displayedColumns: ConfigColumn[] = [
     {
@@ -62,6 +65,13 @@ export class ManageComponent implements OnInit {
     modal.show();
   }
 
+  exportFunction(): void {
+    const userId = this.global.getUserInfo().id;
+    const format = this.export.value;
+    const route = `${API_URL}${EXPORT_USER}?userId=${userId}&format=%22${format}%22`;
+    this.global.export(route, "Usuarios", format);
+  }
+
   /**
    * Initiates the deletion process for a user.
    * Opens a dialog to confirm the deletion, and if confirmed, opens another dialog to notify the user of the deletion.

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

@@ -16,7 +16,11 @@
       >
       </app-button>
 
-      <app-button></app-button>
+      <app-button class="export"
+        [control]="export"
+        [exportFunction]="exportFunction.bind(this)"
+        [isDisabled]="!showTable"
+      ></app-button>
     </div>
   </div>
   <div class="table" [class.hidden]="!showTable || dataSource.data.length == 0">