cat-documents-ng 1.0.4 → 1.0.6

package/src/lib/document/components/document-content-viewer/document-content-viewer.component.ts

@@ -0,0 +1,664 @@
+import {
+  Component,
+  Input,
+  OnChanges,
+  SimpleChanges,
+  ViewEncapsulation,
+  OnInit,
+  HostListener,
+} from '@angular/core';
+import { OPEN_DOCUMENT_EXTENSIONS, SHARED, SUPPORTED_IMAGE_TYPES } from '../../../../Shared/constant/SHARED';
+import { ExcelParserService, ExcelRowData, ParsedExcelData } from '../../services/excel-parser.service';
+import { CsvParserService, CsvRowData, ParsedCsvData } from '../../services/csv-parser.service';
+import { EmlParserService, ParsedEmailData } from '../../services/eml-parser.service';
+import { DocumentHttpService } from '../../services/document-http.service';
+import { DocumentZoomService } from '../../services/document-zoom.service';
+import { DocumentListItem } from '../../models/document-list-response.model';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+/**
+ * Component for viewing different types of document content.
+ * Supports PDF, images, and other document formats.
+ * @class DocumentContentViewerComponent
+ * @typedef {DocumentContentViewerComponent}
+ */
+@Component({
+  selector: 'document-content-viewer',
+  templateUrl: './document-content-viewer.component.html',
+  standalone: false,
+  styleUrl: './document-content-viewer.component.scss',
+  encapsulation: ViewEncapsulation.None,
+})
+export class DocumentContentViewerComponent implements OnChanges, OnInit {
+  /**
+   * The document URL to display
+   * @type {string}
+   */
+  @Input() documentUrl?: string;
+
+  /**
+   * The content type of the document
+   * @type {string}
+   */
+  @Input() contentType?: string;
+
+  /**
+   * The document name for display purposes
+   * @type {string}
+   */
+  @Input() documentName?: string;
+
+  /**
+   * The selected document for display purposes
+   * @type {DocumentListItem}
+   */
+  @Input() selectedDocument?: DocumentListItem;
+
+  /**
+   * The context ID for the document
+   * @type {string}
+   */
+  @Input() contextId?: string;
+
+  /**
+   * Flag to hide form elements
+   * @type {boolean}
+   */
+  @Input() isFormHide: boolean = false;
+  /**
+   * Excel data for display
+   * @type {any}
+   */
+  excelData: any = null;
+
+  /**
+   * Parsed Excel data as table rows
+   * @type {any[][]}
+   */
+  excelTableData: any[][] = SHARED.EMPTY_ARRAY;
+
+  /**
+   * Enhanced Excel data with styling information
+   * @type {ExcelRowData[]}
+   */
+  excelStyledData: ExcelRowData[] = SHARED.EMPTY_ARRAY;
+
+  /**
+   * Excel sheet names
+   * @type {string[]}
+   */
+  excelSheets: string[] = SHARED.EMPTY_ARRAY;
+
+  /**
+   * Current active sheet
+   * @type {string}
+   */
+  currentSheet: string = SHARED.EMPTY;
+
+  /**
+   * Loading state for Excel files
+   * @type {boolean}
+   */
+  isLoadingExcel: boolean = false;
+
+  /**
+   * Error state for Excel files
+   * @type {string | null}
+   */
+  excelError: string | null = null;
+
+  /**
+   * Loading state specifically for Word documents
+   * @type {boolean}
+   */
+  isLoadingWordDocument: boolean = false;
+
+  /**
+   * CSV data for display
+   * @type {any}
+   */
+  csvData: any = null;
+
+  /**
+   * Parsed CSV data as table rows
+   * @type {any[][]}
+   */
+  csvTableData: any[][] = SHARED.EMPTY_ARRAY;
+
+  /**
+   * Enhanced CSV data with styling information
+   * @type {CsvRowData[]}
+   */
+  csvStyledData: CsvRowData[] = SHARED.EMPTY_ARRAY;
+
+  /**
+   * Loading state for CSV files
+   * @type {boolean}
+   */
+  isLoadingCsv: boolean = false;
+
+  /**
+   * Error state for CSV files
+   * @type {string | null}
+   */
+  csvError: string | null = null;
+
+  /**
+   * Current zoom level for the document
+   * @type {number}
+   */
+  currentZoom: number = 100;
+
+  /**
+   * Email data for display
+   * @type {ParsedEmailData | null}
+   */
+  emailData: ParsedEmailData | null = null;
+
+  /**
+   * Loading state for Email files
+   * @type {boolean}
+   */
+  isLoadingEmail: boolean = false;
+
+  /**
+   * Error state for Email files
+   * @type {string | null}
+   */
+  emailError: string | null = null;
+
+
+
+  /**
+     * Constructor
+     * @param {ExcelParserService} excelParserService - Service for parsing Excel files
+     * @param {CsvParserService} csvParserService - Service for parsing CSV files
+     * @param {EmlParserService} emlParserService - Service for parsing EML files
+     * @param {DocumentHttpService} documentHttpService - Service for making HTTP requests for Excel/CSV files
+     * @param {DocumentZoomService} zoomService - Service for handling zoom functionality
+     * @param {DomSanitizer} sanitizer - Service for sanitizing HTML content
+     */
+  constructor(
+    private excelParserService: ExcelParserService,
+    private csvParserService: CsvParserService,
+    private emlParserService: EmlParserService,
+    private documentHttpService: DocumentHttpService,
+    private zoomService: DocumentZoomService,
+    private sanitizer: DomSanitizer
+  ) { }
+
+  /**
+   * Computed property to determine if the document is a PDF
+   * @type {boolean}
+   */
+  get isPdf(): boolean {
+    const ext = this.getFileExtension(this.documentName);
+    return ext === SHARED.PDF || ext === SHARED.PDF2;
+  }
+
+
+  /**
+   * Computed property to determine if the document is an Excel file
+   * @type {boolean}
+   */
+  get isExcel(): boolean {
+    const ext = this.getFileExtension(this.documentName);
+    return ext === SHARED.XLSX || ext === SHARED.XLS;
+  }
+
+  /**
+   * Computed property to determine if the document is a Word file
+   * @type {boolean}
+   */
+  get isWord(): boolean {
+    const ext = this.getFileExtension(this.documentName);
+    return ext === SHARED.DOCX || ext === SHARED.DOC;
+  }
+
+  /**
+   * Computed property to determine if the document is a CSV file
+   * @type {boolean}
+   */
+  get isCsv(): boolean {
+    const ext = this.getFileExtension(this.documentName);
+    return ext === SHARED.CSV;
+  }
+
+  /**
+   * Computed property to determine if the document is an email file
+   * @type {boolean}
+   */
+  get isEmail(): boolean {
+    return this.contentType === SHARED.EMAIL_RFC822_MIME_TYPE ||
+      this.contentType === SHARED.EMAIL_OUTLOOK_MIME_TYPE;
+  }
+
+  /**
+   * Computed property to determine if the document is an OpenDocument file
+   * @type {boolean}
+   */
+  get isOpenDocument(): boolean {
+    const ext = this.getFileExtension(this.documentName);
+    return OPEN_DOCUMENT_EXTENSIONS.includes(ext);
+  }
+
+  /**
+   * Computed property to determine if the document has an unsupported content type
+   * @type {boolean}
+   */
+  get isUnsupported(): boolean {
+    return !this.isImage && !this.isPdf && !this.isExcel && !this.isWord &&
+      !this.isCsv && !this.isEmail && !this.isOpenDocument;
+  }
+
+  /**
+   * Computed property to get the appropriate icon for the document type
+   * @type {string}
+   */
+  get documentIcon(): string {
+    if (this.isPdf) return SHARED.ICON_FILE_PDF;
+    if (this.isImage) return SHARED.ICON_IMAGE;
+    if (this.isExcel) return SHARED.ICON_FILE_EXCEL;
+    if (this.isWord) return SHARED.ICON_FILE_WORD;
+    if (this.isCsv) return SHARED.ICON_FILE;
+    if (this.isEmail) return SHARED.ICON_ENVELOPE;
+    if (this.isOpenDocument) return SHARED.ICON_FILE;
+    return SHARED.ICON_FILE;
+  }
+
+  /**
+   * Computed property to get the display text for the document type
+   * @type {string}
+   */
+  get documentTypeText(): string {
+    if (this.isPdf) return SHARED.PDF_DOCUMENT;
+    if (this.isImage) return SHARED.IMAGE;
+    if (this.isExcel) return SHARED.EXCEL_SPREADSHEET;
+    if (this.isWord) return SHARED.WORD_DOCUMENT;
+    if (this.isCsv) return SHARED.CSV_FILE;
+    if (this.isEmail) return SHARED.EMAIL_MESSAGE;
+    if (this.isOpenDocument) return SHARED.OPEN_DOCUMENT;
+    return SHARED.DOCUMENT;
+  }
+
+  /**
+   * Safely gets the styled Excel data for display
+   * @type {ExcelRowData[]}
+   */
+  get safeExcelStyledData(): ExcelRowData[] {
+    if (!this.excelStyledData || this.excelStyledData.length === 0) {
+      return [{ cells: [{ value: SHARED.NO_DATA_AVAILABLE }] }];
+    }
+    return this.excelStyledData;
+  }
+
+  /**
+   * Safely gets the styled CSV data for display
+   * @type {CsvRowData[]}
+   */
+  get safeCsvStyledData(): CsvRowData[] {
+    if (!this.isCsvDataValid()) {
+      return [{
+        cells: [{
+          value: SHARED.NO_DATA_AVAILABLE,
+          isHeader: false,
+          style: {}
+        }]
+      }];
+    }
+
+    // Ensure each row has the correct structure
+    return this.csvStyledData.map(row => {
+      if (!row || !row.cells || !Array.isArray(row.cells)) {
+        return {
+          cells: [{
+            value: SHARED.NO_DATA_AVAILABLE,
+            isHeader: false,
+            style: {}
+          }]
+        };
+      }
+      return row;
+    });
+  }
+
+  /**
+   * Handles changes to input properties
+   * @param {SimpleChanges} changes - The changes object
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes[SHARED.DOCUMENT_URL] || changes[SHARED.CONTENT_TYPE]) {
+      if (this.isWord && this.documentUrl) {
+        this.isLoadingWordDocument = true;
+      }
+
+      this.loadExcelData();
+      this.loadCsvData();
+      this.loadEmailData();
+    }
+  }
+
+  /**
+   * Initializes the component
+   */
+  ngOnInit(): void {
+    this.loadExcelData();
+    this.loadCsvData();
+    this.loadEmailData();
+    this.initializeZoom();
+  }
+
+  /**
+   * Initializes zoom functionality
+   */
+  private initializeZoom(): void {
+    this.zoomService.zoomLevel$.subscribe(zoom => {
+      this.currentZoom = zoom;
+      this.applyZoomTransform();
+    });
+  }
+
+  /**
+   * Handles mouse wheel events for zooming
+   */
+  @HostListener('wheel', ['$event'])
+  onWheel(event: WheelEvent): void {
+    this.handleWheelZoom(event);
+  }
+  /**
+   * Handles wheel zoom for document viewers
+   */
+  handleWheelZoom(event: WheelEvent): void {
+    const target = event.target as HTMLElement;
+    const isOverDocumentViewer = target.closest(SHARED.DOC_VIEWER_WRAPPER) ||
+      target.closest(SHARED.CSV_TABLE_CONTAINER) ||
+      target.closest(SHARED.DOCX_CONTAINER) ||
+      target.closest(SHARED.PDF_CONTAINER) ||
+      target.closest(SHARED.IMAGE_CONTAINER) ||
+      target.closest(SHARED.WHEEL_CAPTURE_OVERLAY) ||
+      target.closest(SHARED.DOCUMENT_CONTENT_VIEWER_CONTAINER);
+
+    if (isOverDocumentViewer) {
+      if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
+        if (event.ctrlKey || event.metaKey) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.zoomService.handleWheelZoom(event);
+        }
+      }
+      else if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
+        return;
+      }
+    }
+  }
+
+
+
+  /**
+   * Applies zoom transform to the document viewer
+   */
+  private applyZoomTransform(): void {
+    this.zoomService.applyIframeZoomBySelector(SHARED.EXCEL_ZOOM_WRAPPER);
+    this.zoomService.applyIframeZoomBySelector(SHARED.DOC_VIEWER_WRAPPER);
+    const csvContainer = document.querySelector(SHARED.CSV_ZOOM_WRAPPER) as HTMLElement;
+    if (csvContainer) {
+      const zoomScale = this.currentZoom / 100;
+      csvContainer.style.transform = `scale(${zoomScale})`;
+    }
+  }
+
+  /**
+   * Downloads the document
+   */
+  downloadDocument(): void {
+    if (this.documentUrl) {
+      const link = document.createElement('a');
+      link.href = this.documentUrl;
+      link.download = this.documentName || 'document';
+      link.target = '_blank';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  }
+
+  /**
+   * Opens the document in a new tab
+   */
+  openInNewTab(): void {
+    if (this.documentUrl) {
+      window.open(this.documentUrl, '_blank');
+    }
+  }
+
+  /**
+   * Loads Excel data for display
+   */
+  private loadExcelData(): void {
+    if (this.isExcel && this.documentUrl) {
+      this.isLoadingExcel = true;
+      this.excelError = null;
+
+      this.documentHttpService.downloadExcelFile(this.documentUrl)
+        .subscribe({
+          next: (data: ArrayBuffer) => {
+            try {
+              this.parseExcelData(data);
+            } catch (error) {
+              this.excelError = SHARED.ERROR_PARSING_EXCEL_FILE;
+            }
+            this.isLoadingExcel = false;
+          },
+          error: (error: any) => {
+            console.log(error);
+            this.isLoadingExcel = false;
+          }
+        });
+    } else {
+      this.resetExcelData();
+    }
+  }
+
+  /**
+   * Parses Excel data using the service
+   * @param {ArrayBuffer} data - Excel file data
+   */
+  private parseExcelData(data: ArrayBuffer): void {
+    const parsedData = this.excelParserService.parseExcelData(data);
+
+    if (parsedData) {
+      this.excelSheets = parsedData.sheets;
+      this.currentSheet = parsedData.currentSheet;
+      this.excelStyledData = parsedData.styledData;
+      this.excelTableData = parsedData.tableData;
+      this.excelStyledData = this.excelParserService.ensureDataConsistency(this.excelStyledData);
+      this.excelTableData = this.excelParserService.convertToLegacyFormat(this.excelStyledData);
+
+      this.excelData = {
+        type: 'excel',
+        sheets: this.excelSheets,
+        currentSheet: this.currentSheet,
+        tableData: this.excelTableData,
+        styledData: this.excelStyledData,
+        workbook: parsedData.workbook,
+        hasStyling: parsedData.hasStyling
+      };
+    } else {
+      this.excelError = SHARED.ERROR_PARSING_EXCEL_FILE_STRUCTURE;
+    }
+  }
+
+  /**
+   * Changes the active Excel sheet
+   * @param {string} sheetName - Name of the sheet to activate
+   */
+  changeSheet(sheetName: string): void {
+    this.currentSheet = sheetName;
+
+    if (this.excelData?.workbook) {
+      this.excelStyledData = this.excelParserService.parseSheetData(this.excelData.workbook, sheetName);
+      this.excelStyledData = this.excelParserService.ensureDataConsistency(this.excelStyledData);
+      this.excelTableData = this.excelParserService.convertToLegacyFormat(this.excelStyledData);
+    }
+  }
+
+  /**
+   * Resets Excel data to initial state
+   */
+  private resetExcelData(): void {
+    this.excelData = null;
+    this.excelTableData = SHARED.EMPTY_ARRAY;
+    this.excelStyledData = SHARED.EMPTY_ARRAY;
+    this.excelSheets = SHARED.EMPTY_ARRAY;
+    this.currentSheet = SHARED.EMPTY;
+    this.isLoadingExcel = false;
+    this.excelError = null;
+  }
+
+  /**
+   * Loads CSV data for display
+   */
+  private loadCsvData(): void {
+    if (this.isCsv && this.documentUrl) {
+      this.isLoadingCsv = true;
+      this.csvError = null;
+
+      this.documentHttpService.downloadCsvFile(this.documentUrl)
+        .subscribe({
+          next: (data: string) => {
+            try {
+              this.parseCsvData(data);
+            } catch (error) {
+              this.csvError = SHARED.ERROR_PARSING_CSV_FILE;
+              this.resetCsvData();
+            }
+            this.isLoadingCsv = false;
+          },
+          error: (error: any) => {
+            this.csvError = SHARED.ERROR_LOADING_CSV_FILE;
+            this.resetCsvData();
+            this.isLoadingCsv = false;
+          }
+        });
+    } else {
+      this.resetCsvData();
+    }
+  }
+
+  /**
+   * Parses CSV data using the service
+   * @param {string} data - CSV file data
+   */
+  private parseCsvData(data: string): void {
+    try {
+      const parsedData = this.csvParserService.parseCsvData(data, {
+        delimiter: SHARED.COMMA,
+        hasHeaders: true,
+        maxRows: 1000
+      });
+
+      if (parsedData && parsedData.styledData && parsedData.styledData.length > 0) {
+        this.csvStyledData = parsedData.styledData;
+        this.csvTableData = parsedData.rows;
+
+        this.csvData = {
+          type: 'csv',
+          headers: parsedData.headers,
+          rows: parsedData.rows,
+          tableData: parsedData.rows,
+          styledData: parsedData.styledData,
+          totalRows: parsedData.totalRows,
+          totalColumns: parsedData.totalColumns,
+          hasHeaders: parsedData.hasHeaders
+        };
+      } else {
+        this.csvError = SHARED.ERROR_PARSING_CSV_DATA;
+        this.resetCsvData();
+      }
+    } catch (error) {
+      this.csvError = SHARED.ERROR_PARSING_CSV_FILE;
+      this.resetCsvData();
+    }
+  }
+
+  /**
+   * Resets CSV data to initial state
+   */
+  private resetCsvData(): void {
+    this.csvData = null;
+    this.csvTableData = SHARED.EMPTY_ARRAY;
+    this.csvStyledData = SHARED.EMPTY_ARRAY;
+    this.isLoadingCsv = false;
+    this.csvError = null;
+  }
+
+  /**
+   * TrackBy function for CSV cells to improve performance
+   * @param index - Cell index
+   * @param cell - Cell object
+   * @returns Unique identifier for the cell
+   */
+  trackByCell(index: number, cell: any): any {
+    return `${index}-${cell.value}`;
+  }
+
+  /**
+   * Checks if CSV data is valid and ready for display
+   * @returns {boolean} True if CSV data is valid
+   */
+  private isCsvDataValid(): boolean {
+    return this.csvStyledData &&
+      this.csvStyledData.length > 0 &&
+      this.csvStyledData.every(row => row && row.cells && Array.isArray(row.cells));
+  }
+
+  private getFileExtension(urlOrName?: string): string {
+    if (!urlOrName) return SHARED.EMPTY;
+    const lastDot = urlOrName.lastIndexOf(SHARED.DOT);
+    if (lastDot === -1) return SHARED.EMPTY;
+    return urlOrName.substring(lastDot + 1).toLowerCase();
+  }
+
+  get isImage(): boolean {
+    const ext = this.getFileExtension(this.documentName);
+    return SUPPORTED_IMAGE_TYPES.includes(ext);
+  }
+
+  /**
+   * Loads Email data for display
+   */
+  private loadEmailData(): void {
+    if (this.isEmail && this.documentUrl) {
+      this.isLoadingEmail = true;
+      this.emailError = null;
+      this.emailData = null;
+
+      this.emlParserService.loadAndParseEmail(this.documentUrl)
+        .subscribe({
+          next: (parsedData: ParsedEmailData) => {
+            this.emailData = parsedData;
+            this.emailError = null;
+            this.isLoadingEmail = false;
+          },
+          error: (error: any) => {
+            this.emailError = error?.message || SHARED.ERROR_LOADING_EMAIL_FILE;
+            this.emailData = null;
+            this.isLoadingEmail = false;
+          }
+        });
+    } else {
+      this.resetEmailData();
+    }
+  }
+
+  /**
+   * Resets Email data to initial state
+   */
+  private resetEmailData(): void {
+    this.emailData = null;
+    this.isLoadingEmail = false;
+    this.emailError = null;
+  }
+
+
+}