@sachin9822/reports-lib 0.0.211 → 0.0.212

package/src/lib/shared/export.service.ts

@@ -0,0 +1,457 @@
+import { Injectable } from '@angular/core';
+import jsPDF from 'jspdf';
+import 'jspdf-autotable';
+import * as ExcelJS from 'exceljs';
+import * as FileSaver from 'file-saver';
+import { formatDate } from '@angular/common';
+
+declare module 'jspdf' {
+  interface jsPDF {
+    autoTable: (options: any) => jsPDF;
+  }
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ExportService {
+
+  private readonly pdfFontSize = 10;
+  private readonly pdfLineHeight = 7;
+  private readonly pdfLeftMargin = 15;
+  public logoBase64: string | undefined;
+
+  constructor() {
+    this.loadImageAsBase64('assets/reports-lib/assets/images/XMLogo.png').then(base64 => {
+      this.logoBase64 = base64;
+    });
+  }
+
+  // ------------------------ Utility ------------------------
+  private loadImageAsBase64(imagePath: string): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.crossOrigin = 'anonymous';
+      img.src = imagePath;
+
+      img.onload = () => {
+        const scale = 6;
+        const canvas = document.createElement('canvas');
+        canvas.width = img.width * scale;
+        canvas.height = img.height * scale;
+
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+          ctx.scale(scale, scale);
+          ctx.drawImage(img, 0, 0);
+          const base64 = canvas.toDataURL('image/png', 1.0); // 1.0 = highest quality
+          resolve(base64);
+        } else {
+          reject('Failed to get canvas context.');
+        }
+      };
+
+      img.onerror = () => reject('Failed to load image: ' + imagePath);
+    });
+  }
+
+  formatDate(value: any): string {
+    const date = new Date(value);
+    return isNaN(date.getTime()) ? '' :
+      `${date.getDate().toString().padStart(2, '0')}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getFullYear()}`;
+  }
+
+  formatDateTime(date: Date): string {
+    const day = date.getDate().toString().padStart(2, '0');
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const year = date.getFullYear();
+
+    // 12-hour format
+    let hours = date.getHours();
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    const ampm = hours >= 12 ? 'PM' : 'AM';
+    hours = hours % 12;
+    hours = hours ? hours : 12; // the hour '0' should be '12'
+    const hoursStr = hours.toString().padStart(2, '0');
+
+    return `${day}/${month}/${year} ${hoursStr}:${minutes} ${ampm}`;
+  }
+
+  generateReportMetadata(metadata: [string, string][]): [string, string][] {
+    return metadata.filter(([_, value]) => value !== undefined && value !== null);
+  }
+
+  prepareExportTable(data: any[], columnDefs: any[], options: {
+    excludeFields?: string[],
+    currencyFields?: string[],
+    rateFields?: string[],
+  } = {}): { headers: string[], rows: any[][] } {
+    const { excludeFields = ['srno'], currencyFields = [], rateFields = [] } = options;
+
+    const filteredColumns = columnDefs.filter(col =>
+      col.field &&
+      !excludeFields.some(ex => col.field.toLowerCase().includes(ex)) &&
+      !excludeFields.some(ex => col.headerName?.toLowerCase().includes(ex))
+    );
+
+    const headers = ['Sr No', ...filteredColumns.map(col => col.headerName || col.field)];
+
+    const rows = data.map((row, index) => {
+      const rowData = filteredColumns.map(col => {
+        let value = row[col.field];
+        const fieldName = col.field?.toLowerCase() || '';
+
+        // Handle various date field names
+        if (fieldName.includes('transactiondateandtime') && value) {
+          value = formatDate(value, 'dd/MM/yyyy hh:mm a', 'en-US');
+        } else if ((fieldName.includes('date') || fieldName.includes('businessdate')) && value) {
+          // value = this.formatDate(value);
+          if (value instanceof Date || !/^\d{2}\/\d{2}\/\d{4}/.test(value)) {
+            value = this.formatDate(value);
+          }
+        }
+
+        // Format currency fields
+        if (currencyFields.includes(col.field) && value != null) {
+          value = parseFloat(value).toFixed(3);
+        }
+
+        if (rateFields.includes(col.field) && value != null) {
+          value = parseFloat(value).toFixed(8);
+        }
+
+        return value ?? '';
+      });
+      return [index + 1, ...rowData];
+    });
+    return { headers, rows };
+  }
+
+  // ------------------------ PDF Universal ------------------------
+  async exportToPdfUniversal(title: string, metadata: [string, string][], searchCriteria: [string, string][], headers: string[], rows: any[][], fileName: string): Promise<void> {
+    let doc;
+    doc = new jsPDF({ orientation: 'landscape', unit: 'mm', format: [400, 210] });
+
+    const logoWidth = 38.4, logoHeight = 17.5, logoX = 15, logoY = 10;
+    const pageWidth = doc.internal.pageSize.width;
+    const titleY = 18;
+    const marginLeft = 15;
+
+    if (this.logoBase64) {
+      doc.addImage(this.logoBase64, 'PNG', logoX, logoY, logoWidth, logoHeight);
+    }
+
+    doc.setFontSize(15);
+    doc.setFont('helvetica', 'bold');
+    doc.text(title, pageWidth / 2, titleY, { align: 'center' });
+
+    let currentY = titleY + 14;
+    doc.setFontSize(this.pdfFontSize);
+    metadata.forEach(([label, value], i) => {
+      const y = currentY + i * this.pdfLineHeight;
+      doc.setFont('helvetica', 'bold');
+      doc.text(label, this.pdfLeftMargin, y);
+      const labelWidth = doc.getTextWidth(label + ' ');
+      doc.setFont('helvetica', 'normal');
+      doc.text(value, this.pdfLeftMargin + labelWidth, y);
+    });
+    currentY += metadata.length * this.pdfLineHeight + 5;
+
+    // --- draw search criteria heading ---
+    doc.setFont('helvetica', 'bold');
+    doc.text('Search Criteria:-', marginLeft, currentY);
+    currentY += 8;
+
+    const rowHeightPerLine = 6;
+    const minGap = 2; // gap between key and value
+    const betweenColumnsGap = 15; // gap between left and right columns (you can tune this)
+    const pageContentWidth = doc.internal.pageSize.width - 2 * marginLeft;
+
+    // --- helper function to measure total width of a key-value pair ---
+    const measurePairWidth = (key: string, value: string): number => {
+      doc.setFont('helvetica', 'bold');
+      const keyWidth = doc.getTextWidth(key + ' ');
+      doc.setFont('helvetica', 'normal');
+      const valueWidth = doc.getTextWidth(value);
+      return keyWidth + minGap + valueWidth;
+    };
+
+    // --- calculate max width of left column pairs dynamically ---
+    let maxLeftPairWidth = 0;
+    for (let i = 0; i < searchCriteria.length; i += 2) {
+      if (searchCriteria[i]) {
+        const [key, value] = searchCriteria[i];
+        const width = measurePairWidth(key, value);
+        if (width > maxLeftPairWidth) maxLeftPairWidth = width;
+      }
+    }
+
+    // --- compute where right column should start ---
+    const leftColumnStart = marginLeft;
+    const rightColumnStart = leftColumnStart + maxLeftPairWidth + betweenColumnsGap;
+
+    // --- print search criteria dynamically ---
+    for (let i = 0; i < searchCriteria.length; i += 2) {
+      let maxLineCount = 1;
+
+      // Left column
+      if (searchCriteria[i]) {
+        const [key, value] = searchCriteria[i];
+        doc.setFont('helvetica', 'bold');
+        doc.text(key, leftColumnStart, currentY);
+
+        doc.setFont('helvetica', 'normal');
+        const keyWidth = doc.getTextWidth(key + ' ');
+        const valueX = leftColumnStart + keyWidth + minGap;
+        doc.text(value, valueX, currentY);
+      }
+
+      // Right column
+      if (searchCriteria[i + 1]) {
+        const [key, value] = searchCriteria[i + 1];
+        doc.setFont('helvetica', 'bold');
+        doc.text(key, rightColumnStart, currentY);
+
+        doc.setFont('helvetica', 'normal');
+        const keyWidth = doc.getTextWidth(key + ' ');
+        const valueX = rightColumnStart + keyWidth + minGap;
+        doc.text(value, valueX, currentY);
+      }
+
+      currentY += rowHeightPerLine;
+    }
+
+    const columnCount = headers.length;
+    const tableWidth = pageWidth - (this.pdfLeftMargin * 2);
+    const equalWidth = tableWidth / columnCount;
+
+    const columnStyles: { [key: number]: any } = {};
+    headers.forEach((_, i) => {
+      columnStyles[i] = { cellWidth: equalWidth };
+    });
+
+    doc.autoTable({
+      head: [headers],
+      body: rows,
+      startY: currentY,
+      theme: 'grid',
+      headStyles: {
+        fillColor: [220, 220, 220], textColor: 0,
+        fontStyle: 'bold', fontSize: 9, halign: 'center',
+      },
+      bodyStyles: { fontSize: 8, fillColor: [255, 255, 255], textColor: [0, 0, 0] },
+      styles: { cellPadding: 2, overflow: 'linebreak', minCellHeight: 6 },
+      columnStyles
+    });
+
+    const pageCount = doc.internal.getNumberOfPages();
+    for (let i = 1; i <= pageCount; i++) {
+      doc.setFont("helvetica", "bold");
+      doc.setPage(i);
+      doc.setFontSize(9);
+      doc.setTextColor(100);
+
+      const footerY = doc.internal.pageSize.height - 6;
+
+      doc.text(
+        `Page ${i} of ${pageCount}`,
+        pageWidth - 15,
+        footerY,
+        { align: 'right' }
+      );
+    }
+
+    doc.save(fileName);
+  }
+
+  // ------------------------ Excel Universal ------------------------
+  exportToExcelUniversal(title: string, metadata: [string, string][], searchCriteria: [string, string][], headers: string[], rows: any[][], fileName: string): void {
+    const workbook = new ExcelJS.Workbook();
+    const worksheet = workbook.addWorksheet(title);
+
+    let currentRow = 1;
+
+    // Add image if available
+    if (this.logoBase64) {
+      const base64Data = this.logoBase64.replace(/^data:image\/\w+;base64,/, '');
+      const imageId = workbook.addImage({
+        base64: base64Data,
+        extension: 'png',
+      });
+
+      // Place image at top-left (e.g., A1:C4)
+      worksheet.addImage(imageId, {
+        tl: { col: 0, row: 0 },
+        ext: { width: 145, height: 66 },
+        editAs: 'oneCell'
+      });
+    }
+
+    // Add title aligned in middle horizontally (merged across all columns)
+    const titleRow = worksheet.getRow(currentRow);
+    titleRow.getCell(4).value = title;
+    titleRow.getCell(4).font = { bold: true, size: 16 };
+    titleRow.getCell(4).alignment = { vertical: 'middle', horizontal: 'left' };
+
+    const titleMergeEnd = String.fromCharCode(64 + headers.length);
+    worksheet.mergeCells(`D${currentRow}:${titleMergeEnd}${currentRow}`);
+    currentRow += 3; // Move past image space
+
+    // Add metadata
+    metadata.forEach(([label, value]) => {
+      const row = worksheet.getRow(currentRow++);
+      const cell = row.getCell(1);
+      cell.value = {
+        richText: [
+          { text: `${label}: `, font: { bold: true } },
+          { text: value ?? '', font: { bold: false } }
+        ]
+      };
+      worksheet.mergeCells(`A${row.number}:${String.fromCharCode(64 + headers.length)}${row.number}`);
+    });
+
+    worksheet.addRow([]);
+    currentRow++;
+    //=========================================================
+    // --- search criteria heading ---
+    worksheet.mergeCells(currentRow, 1, currentRow, 6);
+    worksheet.getCell(currentRow, 1).value = 'Search Criteria:-';
+    worksheet.getCell(currentRow, 1).font = { bold: true };
+    currentRow += 2;
+
+    for (let i = 0; i < searchCriteria.length; i += 2) {
+      const left = searchCriteria[i];
+      const right = searchCriteria[i + 1]; // may be undefined
+      const row = worksheet.getRow(currentRow++);
+
+      // Left cell
+      worksheet.mergeCells(row.number, 1, row.number, 3);
+      row.getCell(1).value = {
+        richText: [
+          { text: (left?.[0] ?? '') + ' ', font: { bold: true } },
+          { text: left?.[1] ?? '' }
+        ]
+      };
+      row.getCell(1).alignment = { wrapText: true, vertical: 'middle' };
+
+      // Right cell (only if present)
+      if (right) {
+        worksheet.mergeCells(row.number, 4, row.number, 6);
+        row.getCell(4).value = {
+          richText: [
+            { text: (right?.[0] ?? '') + ' ', font: { bold: true } },
+            { text: right?.[1] ?? '' }
+          ]
+        };
+        row.getCell(4).alignment = { wrapText: true, vertical: 'middle' };
+      }
+    }
+    currentRow++;
+    //============================================================
+
+    // Add table header row
+    const headerRow = worksheet.getRow(currentRow++);
+    headers.forEach((header, i) => {
+      const cell = headerRow.getCell(i + 1);
+      cell.value = header;
+      cell.font = { bold: true };
+      cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'D9D9D9' } };
+      cell.alignment = { vertical: 'middle', horizontal: 'center' };
+      cell.border = {
+        top: { style: 'thin' },
+        bottom: { style: 'thin' },
+        left: { style: 'thin' },
+        right: { style: 'thin' }
+      };
+    });
+
+    const dataStartRow = currentRow;
+    rows.forEach(rowData => {
+      const row = worksheet.getRow(currentRow++);
+      rowData.forEach((value, i) => {
+        const cell = row.getCell(i + 1);
+        cell.value = value;
+        cell.border = {
+          top: { style: 'thin' },
+          bottom: { style: 'thin' },
+          left: { style: 'thin' },
+          right: { style: 'thin' }
+        };
+      });
+    });
+
+    // Auto column widths
+    for (let i = 1; i <= headers.length; i++) {
+      let maxLength = headers[i - 1].length;
+      for (let rowNum = dataStartRow; rowNum <= worksheet.lastRow!.number; rowNum++) {
+        const val = worksheet.getRow(rowNum).getCell(i).value?.toString() || '';
+        maxLength = Math.max(maxLength, val.length);
+      }
+      worksheet.getColumn(i).width = maxLength + 2;
+    }
+
+    workbook.xlsx.writeBuffer().then(buffer => {
+      const blob = new Blob([buffer], {
+        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+      });
+      FileSaver.saveAs(blob, fileName);
+    });
+  }
+
+
+  // ------------------------ CSV Universal ------------------------
+  exportToCsvUniversal(title: string, metadata: [string, string][], searchCriteria: [string, string][], headers: string[], rows: any[][], fileName: string): void {
+    const escapeCsv = (value: any) => {
+      if (value === null || value === undefined) return '';
+      const str = value.toString();
+      return str.includes(',') || str.includes('"') || str.includes('\n')
+        ? `"${str.replace(/"/g, '""')}"`
+        : str;
+    };
+
+    const metaRows = metadata.map(([k, v]) => [`${k} ${v}`]);
+
+    // --- Build search criteria section ---
+    const searchLines: string[] = [];
+    if (searchCriteria?.length) {
+      searchLines.push('Search Criteria:-');
+
+      const maxLeftLength = Math.max(...searchCriteria.map(([k, v]) => (k + ' ' + v).length));
+
+      for (let i = 0; i < searchCriteria.length; i += 2) {
+        const left = searchCriteria[i];
+        const right = searchCriteria[i + 1];
+
+        const leftText = left ? `${left[0]} ${left[1]}`.padEnd(maxLeftLength + 5, ' ') : '';
+        const rightText = right ? `${right[0]} ${right[1]}` : '';
+
+        searchLines.push(`"${leftText}${rightText}"`); // wrap in quotes for single CSV cell
+      }
+      searchLines.push(''); // blank line after criteria
+    }
+
+    // --- Combine all parts ---
+    const csvContent = [
+      [title].join(','),
+      ...metaRows.map(e => e.join(',')),
+      '',
+      ...searchLines, // ✅ this block is column-independent
+      headers.join(','),
+      ...rows.map(row => row.map(value => escapeCsv(value)).join(','))
+    ].join('\n');
+
+    this.downloadFile(csvContent, fileName, 'text/csv');
+  }
+
+  private downloadFile(data: string, filename: string, type: string): void {
+    const blob = new Blob([data], { type });
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.setAttribute('download', filename);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+
+}
+

package/src/lib/shared/loader/loader.component.html

@@ -0,0 +1,8 @@
+<div class="loaderContainer">
+    <div class="loading">
+        <div class="loading-bar"></div>
+        <div class="loading-bar"></div>
+        <div class="loading-bar"></div>
+        <div class="loading-bar"></div>
+    </div>
+</div>

package/src/lib/shared/loader/loader.component.scss

@@ -0,0 +1,52 @@
+$Grey: #8091a5;
+.loaderContainer {
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: absolute;
+    background: rgba(255, 255, 255, 0.75);
+    top: 0;
+    left: 0;
+    z-index: 10;
+    .loading {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 30px;
+        .loading-bar {
+            display: inline-block;
+            width: 3px;
+            margin-right:2px;
+            height: 18px;
+            animation: loading 1s ease-in-out infinite;
+            &:nth-child(1) {
+                background-color: $Grey;
+                animation-delay: 0;
+            }
+            &:nth-child(2) {
+                background-color: $Grey;
+                animation-delay: 0.09s;
+            }
+            &:nth-child(3) {
+                background-color: $Grey;
+                animation-delay: 0.18s;
+            }
+            &:nth-child(4) {
+                background-color: $Grey;
+                animation-delay: 0.27s;
+            }
+        }
+    }
+}
+
+@keyframes loading {
+    0% {
+        transform: scale(1);
+    }
+    20% {
+        transform: scale(1, 2.2);
+    }
+    40% {
+        transform: scale(1);
+    }
+}

package/src/lib/shared/loader/loader.component.ts

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'app-loader',
+    templateUrl: './loader.component.html',
+    styleUrls: ['./loader.component.scss']
+})
+
+export class LoaderComponent {
+}

package/src/lib/shared/metadata/metadata.component.html

@@ -0,0 +1,42 @@
+<section class="my-2">
+    <div class="title mb-3">
+        {{reportName}}
+    </div>
+    <div class="meta mb-2">
+        <div *ngIf="showmetaDataOne" class="data-holder">
+            <tbody>
+                <tr *ngFor="let item of metaDataOne | keyvalue:preserveOrder">
+                    <td class="labl meta-td">{{item.key}}</td>
+                    <td class="px-3 meta-td"><span class="info">: {{item.value}}</span></td>
+                </tr>
+            </tbody>
+        </div>
+        <div *ngIf="showmetaDataTwo" class="data-holder">
+            <tbody>
+                <tr *ngFor="let item of metaDataTwo | keyvalue:preserveOrder">
+                    <td class="labl meta-td">{{item.key}}</td>
+                    <td class="px-3 meta-td"><span class="info">: {{item.value}}</span></td>
+                </tr>
+            </tbody>
+        </div>
+    </div>
+    <div class="search-export">
+        <div class="searchBox">
+            <input type="text" [(ngModel)]="searchText" name="searchText" class="search-input"
+                (ngModelChange)="onSearch()" placeholder="Search..." autocomplete="off" />
+
+            <button type="button" class="btn btn-sm search-btn" (click)="onSearch()">
+                <img src="assets/images/Search.svg" alt="Search" class="search-icon" />
+            </button>
+        </div>
+
+        <div class="export">
+            <div class="exp-options">
+                <ng-select [items]="exportFormats" bindLabel="formatName" bindValue="code" placeholder="Select Format"
+                    [(ngModel)]="selectedExportOption" [clearable]="false" class="export-selector" required>
+                </ng-select>
+            </div>
+            <button class="btn btn-report" (click)="handleExport()">Export</button>
+        </div>
+    </div>
+</section>

package/src/lib/shared/metadata/metadata.component.scss

@@ -0,0 +1,95 @@
+.title {
+  text-align: center;
+  font-size: 18px;
+  font-weight: bold !important;
+}
+
+.meta{
+    position:relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.labl {
+  font-size: 11.2px;
+  font-weight: bold !important;
+}
+ 
+.info {
+  font-size: 12px !important;
+  font-weight: 400;
+  padding-left: 0.5rem;
+}
+.meta-td{
+  padding: 0 !important;
+}
+
+.search-export{
+  position: relative;
+    display: flex;
+    justify-content: space-between;
+}
+
+.searchBox{
+  display: inline-flex;
+}
+
+ .search-btn {
+  height: 32px;
+  width: 36px;
+  background-color: #8091a5;
+  border: none;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.search-input {
+  outline: none !important;
+  border: 1px solid #ccc !important;
+  width: 190px;
+  height: 32px !important;
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  text-transform: uppercase;
+}
+.search-input:focus{
+  box-shadow: 0 0 5px 3px rgba(24,119,242,1.000) !important;
+}
+
+.export{
+  display: flex;
+}
+
+.exp-options{
+  display: inline-flex;
+  font-size: 0.75rem;
+  height: 2rem !important;
+  width: 5rem !important;
+}
+:host ::ng-deep .exp-options .ng-select {
+  width: 100%;
+}
+
+.btn-report{
+    border-radius: 3px;
+    background-color: #8091a5;
+    color: #fff !important;
+    font-size: 14px !important;
+    height: 32px !important;
+    height: 32px;
+    min-width: 103px;
+    margin: 0 0 0 20px !important;
+    padding: 4px 15px !important;
+}
+
+

package/src/lib/shared/metadata/metadata.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MetadataComponent } from './metadata.component';
+
+describe('MetadataComponent', () => {
+  let component: MetadataComponent;
+  let fixture: ComponentFixture<MetadataComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MetadataComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MetadataComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});