Update dependencies to fix vulnerabilities and migrate xlsx to exceljs

Co-authored-by: granatonatalia <[email protected]>

Author: Copilot

package.json

@@ -28,22 +28,22 @@
     "@grafana/faro-web-tracing": "^1.12.2",
     "@ngneat/until-destroy": "^10.0.0-beta.0",
     "d3": "^7.5.0",
+    "exceljs": "^4.4.0",
     "js-yaml": "^4.1.1",
     "markdown-it": "^13.0.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.8.1",
-    "xlsx": "^0.18.5",
     "yaml": "^2.8.1",
     "yamljs": "^0.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^21.0.5",
-    "@angular-eslint/builder": "^13.0.0",
-    "@angular-eslint/eslint-plugin": "^13.0.0",
-    "@angular-eslint/eslint-plugin-template": "^13.0.0",
+    "@angular-eslint/builder": "^18.4.2",
+    "@angular-eslint/eslint-plugin": "^18.4.2",
+    "@angular-eslint/eslint-plugin-template": "^18.4.2",
     "@angular-eslint/schematics": "^21.1.0",
-    "@angular-eslint/template-parser": "^13.0.0",
+    "@angular-eslint/template-parser": "^18.4.2",
     "@angular/compiler-cli": "^13.0.0",
     "@grafana/faro-webpack-plugin": "^0.1.1",
     "@types/d3": "^7.4.0",

src/app/pages/mapping/mapping.component.ts

@@ -3,7 +3,7 @@ import { MatTableDataSource } from '@angular/material/table';
 import { MatSort } from '@angular/material/sort';
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { FormControl } from '@angular/forms';
-import * as XLSX from 'xlsx';
+import * as ExcelJS from 'exceljs';
 import { LoaderService } from 'src/app/service/loader/data-loader.service';
 import {
   DialogInfo,
@@ -157,12 +157,50 @@ export class MappingComponent implements OnInit, AfterViewInit {
     });
   }
 
-  exportToExcel() {
-    let element = document.getElementById('excel-table');
-    const ws: XLSX.WorkSheet = XLSX.utils.table_to_sheet(element, { raw: true });
-    const wb: XLSX.WorkBook = XLSX.utils.book_new();
-    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
-    XLSX.writeFile(wb, 'DSOMM - Activities.xlsx');
+  async exportToExcel() {
+    const element = document.getElementById('excel-table');
+    if (!element) {
+      console.error('Excel table element not found');
+      return;
+    }
+
+    const workbook = new ExcelJS.Workbook();
+    const worksheet = workbook.addWorksheet('Sheet1');
+
+    // Extract table data from HTML table
+    const table = element as HTMLTableElement;
+    const rows = Array.from(table.querySelectorAll('tr'));
+
+    rows.forEach((row) => {
+      const cells = Array.from(row.querySelectorAll('th, td'));
+      const rowData = cells.map(cell => cell.textContent?.trim() || '');
+      worksheet.addRow(rowData);
+    });
+
+    // Auto-fit columns for better readability
+    worksheet.columns.forEach(column => {
+      let maxLength = 0;
+      column.eachCell?.({ includeEmpty: true }, (cell) => {
+        const cellLength = cell.value ? cell.value.toString().length : 10;
+        if (cellLength > maxLength) {
+          maxLength = cellLength;
+        }
+      });
+      column.width = Math.min(maxLength + 2, 50); // Max width of 50
+    });
+
+    // Generate and download the Excel file
+    const buffer = await workbook.xlsx.writeBuffer();
+    const blob = new Blob([buffer], { 
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
+    });
+    const url = window.URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = 'DSOMM - Activities.xlsx';
+    anchor.click();
+    window.URL.revokeObjectURL(url);
+
     console.log(`${perfNow()}: Mapping: Exported to Excel`);
   }