cat-documents-ng 1.0.5 → 1.0.6

package/src/lib/document/components/document-container/document-container.component.ts

@@ -0,0 +1,363 @@
+import { Component, Input, OnInit, OnDestroy, OnChanges, SimpleChanges, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core';
+import { SHARED } from '../../../../Shared/constant/SHARED';
+import { DocumentService } from '../../state/document.service';
+import { Subscription } from 'rxjs';
+import { ERRORS } from '../../../../Shared/constant/ERROR';
+import { DocumentHttpService } from '../../services/document-http.service';
+import { DocumentQuery } from '../../state/document.query';
+import { DocumentStore } from '../../state/document.store';
+import { DocumentCategory } from '../../models/document-category.model';
+import { UserListModel } from '../../models/user-list.model';
+import { StatusDataModel } from '../../models/status-data.model';
+import { DocumentListResponse } from '../../models/document-list-response.model';
+import { DocumentHelperService } from '../../services/document.service';
+import { DocumentMenuService } from '../../services/document-menu.service';
+
+/**
+ *This component is responsible for managing and displaying a list of documents.
+ * @class DocumentContainerComponent
+ * @typedef {DocumentContainerComponent}
+ */
+@Component({
+  selector: 'lib-document-container',
+  standalone: false,
+  templateUrl: './document-container.component.html',
+  styleUrl: './document-container.component.scss'
+})
+export class DocumentContainerComponent implements OnInit, OnDestroy, OnChanges {
+  /**
+   * The document list response data
+   * @type {DocumentListResponse[] | null}
+   */
+  documentListResponse: DocumentListResponse[] | null = null;
+
+  /**
+   * Status data for the current selection
+   * @type {StatusDataModel[]}
+   */
+  statusData: StatusDataModel[] = []
+
+  /**
+   * The currently selected menu item ID for scrolling
+   */
+  selectedMenuItemId: string | null = null;
+
+  /**
+   * Additional navigation information for better scrolling
+   */
+  navigationInfo: {
+    menuItemId: string;
+    menuItemLabel: string;
+    categoryLabel: string;
+    categoryIndex: number;
+  } | null = null;
+
+  /**
+   * Reference to the content scroll container
+   */
+  @ViewChild('contentScrollContainer', { static: false }) contentScrollContainer!: ElementRef;
+
+  @Output() selectedDocument: EventEmitter<any> = new EventEmitter<any>();
+  @Output() selectedDocumentInNewTab: EventEmitter<any> = new EventEmitter<any>();
+
+  /**
+   * Subscription to track selected menu item changes
+   */
+  private selectedMenuItemSubscription: Subscription = new Subscription();
+
+  /**
+   * Creates an instance of DocumentContainerComponent.
+   * @param {DocumentHttpService} documentHttpService - Service for HTTP operations
+   * @param {DocumentHelperService} documentHelperService - Service for document operations
+   * @param {DocumentQuery} documentQuery - Query service for document state
+   * @param {DocumentStore} documentStore - Store service for document state
+   * @param {DocumentMenuService} documentMenuService - Service for menu operations
+   */
+  constructor(
+    private documentHttpService: DocumentHttpService,
+    private documentHelperService: DocumentHelperService,
+    private documentQuery: DocumentQuery,
+    private documentStore: DocumentStore,
+    private documentMenuService: DocumentMenuService
+  ) {}
+  /**
+   * Get contextId in input.
+   * @type {string}
+   */
+  @Input() contextId: string = SHARED.EMPTY;
+  
+  
+  /**
+   * The list of folders.
+   * @type {Array}
+   */
+  applicationNumber: string = SHARED.EMPTY
+  catagories: DocumentCategory[] = SHARED.EMPTY_ARRAY
+  userList: UserListModel[] = SHARED.EMPTY_ARRAY
+  
+
+  /**
+   * Holds the subscription to manage observable cleanup.
+   * @type {Subscription}
+   */
+   subscription: Subscription = new Subscription();
+
+  /**
+   * Handles changes to input properties
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes[SHARED.CONTEXT_ID] && !changes[SHARED.CONTEXT_ID].firstChange) {
+      this.handleContextIdChange();
+    }
+  }
+
+  /**
+   * Initializes the component
+   */
+  ngOnInit(): void {
+    this.clearAllState();
+    if (this.contextId && this.contextId !== SHARED.EMPTY) {
+      this.initializeData();
+    }
+    this.setupSelectedMenuItemSubscription();
+  }
+
+  /**
+   * Sets up subscription to track selected menu item changes
+   */
+  setupSelectedMenuItemSubscription(): void {
+    this.selectedMenuItemSubscription.add(
+      this.documentQuery.selectSelectedMenuItem().subscribe(menuItemId => {
+        this.selectedMenuItemId = menuItemId;
+      })
+    );
+  }
+
+  /**
+   * Handles menu item selection events from the documents menu
+   * @param event - The menu item selection event
+   */
+  onMenuItemSelected(event: {
+    item: any;
+    category: any;
+    navigationInfo?: {
+      menuItemId: string;
+      menuItemLabel: string;
+      categoryLabel: string;
+      categoryIndex: number;
+    };
+  }): void {
+    if (event && event.navigationInfo) {
+      this.navigationInfo = event.navigationInfo;
+      // Don't set selectedMenuItemId here - let the store subscription handle it
+    } else {
+      this.navigationInfo = null;
+      // Don't set selectedMenuItemId here - let the store subscription handle it
+      this.resetContentScrollToTop();
+    }
+  }
+
+  /**
+   * Resets the content scroll container to the top
+   */
+  private resetContentScrollToTop(): void {
+    if (this.contentScrollContainer) {
+      this.contentScrollContainer.nativeElement.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      });
+    }
+  }
+
+  /**
+   * Initialize all data with proper sequencing to avoid duplicate API calls
+   */
+   initializeData(): void {
+    this.fetchDocumentCatagories();
+    this.fetchUserListWithFilters();
+    this.setupStatusDataSubscriptions();
+    this.setupFilteredDocumentSubscription();
+    this.documentHelperService.initializeSelectionWatcherWithInitialLoad(this.contextId);
+  }
+
+  /**
+   * Clears all state (store and component) comprehensively
+   */
+      clearAllState(): void {
+     this.documentStore.clearSelectionState();
+     // Don't clear document viewer state - let the viewer handle its own cleanup
+     this.documentStore.setDocumentListResponse(null);
+     this.documentStore.setDocumentList([]); 
+     this.documentStore.setDocumentCategories([]);
+     this.documentStore.setUserList([]);
+     this.documentStore.setStatusData([]);
+     this.documentStore.setCurrentDocument(null); 
+     this.documentStore.setFolders([]);
+     this.documentStore.setDocumentAlert(null);
+     this.catagories = SHARED.EMPTY_ARRAY;
+     this.userList = SHARED.EMPTY_ARRAY;
+     this.statusData = [];
+     this.documentListResponse = null;
+     this.applicationNumber = SHARED.EMPTY;
+     this.selectedMenuItemId = null;
+     this.navigationInfo = null;
+   }
+
+  /**
+   * Handles contextId change by clearing all state and refetching data
+   */
+   handleContextIdChange(): void {
+    if (this.contextId && this.contextId !== SHARED.EMPTY) {
+      this.subscription.unsubscribe();
+      this.subscription = new Subscription();
+      this.documentHelperService.cleanupSelectionWatcher();
+      this.clearAllState();
+      this.initializeData();
+    }
+  }
+
+  /**
+   * Sets up subscriptions to monitor menu item and user selection changes
+   * to trigger status data fetching and user list refreshing
+   */
+   setupStatusDataSubscriptions(): void {
+   
+    this.subscription.add(
+      this.documentQuery.selectSelectedUserId().subscribe(userId => {
+        this.fetchStatusData();
+        if (this.catagories.length > 0) {
+          this.fetchUserListWithFilters();
+        }
+      })
+    );
+    this.subscription.add(
+      this.documentQuery.selectSelectedStatus().subscribe(status => {
+        this.fetchStatusData();
+        if (this.catagories.length > 0) {
+          this.fetchUserListWithFilters();
+        }
+      })
+    );
+    this.fetchStatusData();
+  }
+
+  onDocumentSelectedInNewTab(event: {
+    selectedDocument: any;
+    contextId: string;
+    documentList: any[];
+  }): void {
+    this.selectedDocumentInNewTab.emit(event);
+  }
+  /**
+   * Fetches status data based on current selections
+   */
+   fetchStatusData(): void {
+    if (!this.contextId) {
+      console.warn(ERRORS.CONTEXT_ID_REQUIRED);
+      return;
+    }
+
+    const currentState = this.documentQuery.getSelectionState();
+    const contextId = currentState.userId || null;
+    this.documentHttpService.getStatusDocumentCount(this.contextId, contextId, null).subscribe({
+      next: (statusData) => {
+        this.statusData = statusData;
+        this.documentStore.setStatusData(statusData);
+      },
+      error: (error) => {
+        console.error(ERRORS.ERROR_FETCHING_STATUS_DATA, error);
+      }
+    });
+  }
+
+  /**
+   * Fetches userlist data with current filters applied
+   */
+  fetchUserListWithFilters(): void {
+    if (!this.contextId) {
+      console.warn(ERRORS.CONTEXT_ID_REQUIRED);
+      return;
+    }
+
+    const currentState = this.documentQuery.getSelectionState();
+    // If the API supports filtering by menu item or status, we can add those parameters
+    this.documentHttpService.getUserListByContextId(this.contextId).subscribe({
+      next: (res: UserListModel[]) => {
+        this.userList = res;
+        this.documentStore.setUserList(res);
+      },
+      error: (err: any) => {
+        console.error(ERRORS.ERROR_FETCHING_USER_LIST, err);
+      }
+    });
+  }
+
+  /**
+   * Fetches document catagory data.
+   */
+  fetchDocumentCatagories(): void {
+    const categoriesSubscription = this.documentHttpService.getDocumentCatagories(this.contextId).subscribe({
+      next: (categories: any) => {
+        if (categories) {
+          this.catagories = categories.categories;
+          this.applicationNumber = categories.applicationNumber;
+          this.documentStore.setDocumentCategories(categories.categories);
+
+        }
+      },
+      error: (err: any) => {
+        console.error(ERRORS.ERROR_FETCHING_DOCUMENT_CATEGORIES, err);
+      }
+    });
+    this.subscription.add(categoriesSubscription);
+  }
+  
+  /**
+   * Refetches all data when contextId changes
+   */
+   refetchAllDataForNewContext(): void {
+    if (this.contextId && this.contextId !== SHARED.EMPTY) {
+      this.documentStore.clearSelectionState();
+      this.documentStore.clearDocumentViewerState();
+      this.fetchDocumentCatagories();
+      this.fetchUserListWithFilters();
+      this.fetchStatusData();
+      this.documentHelperService.initializeSelectionWatcherWithInitialLoad(this.contextId);
+    }
+  }
+
+  /**
+   * Sets up subscription to listen for filtered document responses
+   */
+   setupFilteredDocumentSubscription(): void {
+    this.subscription.add(
+      this.documentQuery.selectDocumentListResponse().subscribe({
+        next: (response: any) => {
+          this.documentListResponse = response;
+        },
+        error: (error: any) => {
+          console.error(ERRORS.ERROR_RECEIVING_DOCUMENT_LIST, error);
+        }
+      })
+    );
+  }
+
+  onDocumentSelected(document: any): void {
+    console.log('Document selected:', document);
+    this.selectedDocument.emit(document);
+  }
+
+  /** 
+   * Unsubscribe subscription on destroy of component and clean up state.
+   */
+  ngOnDestroy(): void {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+    if (this.selectedMenuItemSubscription) {
+      this.selectedMenuItemSubscription.unsubscribe();
+    }
+    this.documentHelperService.cleanupSelectionWatcher();
+    this.clearAllState();
+  }
+}

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

@@ -0,0 +1,332 @@
+<div class="document-content-viewer-container">
+  @if(documentUrl && contentType){
+    <!-- Zoom Controls -->
+    <div class="zoom-controls-wrapper">
+      <document-zoom-controls 
+        [selectedDocument]="selectedDocument" 
+        [contextId]="contextId"
+        [isFormHide]="isFormHide"
+        >
+      </document-zoom-controls>
+    </div>
+    
+    <!-- PDF Viewer -->
+    @if(isPdf){
+      <div class="pdf-container">
+        <pdf-viewer
+          [src]="documentUrl"
+          [rotation]="0"
+          [original-size]="false"
+          [show-all]="true"
+          [fit-to-page]="false"
+          [zoom]="currentZoom / 100"
+          [zoom-scale]="'page-width'"
+          [stick-to-page]="false"
+          [render-text]="true"
+          [external-link-target]="'blank'"
+          [autoresize]="true"
+          [show-borders]="false"
+          style="width: 100%; height: 100%"
+        ></pdf-viewer>
+      </div>
+    }
+
+    <!-- Image Viewer -->
+    @else if(isImage){
+      <div class="image-container">
+        <img
+          [src]="documentUrl"
+          [alt]="documentName || 'Document Image'"
+          class="document-image"
+          [style.transform]="'scale(' + (currentZoom / 100) + ')'"
+          [style.transform-origin]="'center center'"
+        />
+      </div>
+    }
+
+    <!-- Excel Files -->
+    @else if(isExcel){
+      <div class="excel-container">
+        @if(isLoadingExcel){
+          <div class="loading-container">
+            <div class="loading-content">
+              <i class="pi pi-spin pi-spinner" style="font-size: 2rem; color: #3b82f6;"></i>
+              <p>Loading Excel file...</p>
+            </div>
+          </div>
+        }@else if(excelError){
+          <div class="error-container">
+            <div class="error-content">
+              <i class="pi pi-exclamation-triangle" style="font-size: 3rem; color: #ef4444;"></i>
+              <h4>Error Loading Excel File</h4>
+              <p>{{ excelError }}</p>
+              <div class="error-actions">
+                <button 
+                  type="button" 
+                  class="p-button p-button-primary p-button-sm"
+                  (click)="downloadDocument()"
+                >
+                  <i class="pi pi-download"></i>
+                  Download Instead
+                </button>
+              </div>
+            </div>
+          </div>
+        }
+        @else if(excelData){
+          <div class="excel-container">
+            <div class="excel-zoom-wrapper" 
+                 [class.zoomed]="currentZoom !== 100"
+                 (wheel)="onWheel($event)">
+              <ngx-doc-viewer
+                [url]="documentUrl"
+                viewer="office"
+                style="width:100%;height:97%;"
+              ></ngx-doc-viewer>
+              <!-- Invisible overlay to capture wheel events over document content -->
+              <div class="wheel-capture-overlay" 
+                   (wheel)="onWheel($event)"></div>
+            </div>
+          </div>
+        }
+      </div>
+    }
+
+    <!-- Word Files -->
+    @else if(isWord){
+      <div class="docx-container">
+        <div class="doc-viewer-wrapper" 
+             [class.zoomed]="currentZoom !== 100"
+             (wheel)="onWheel($event)">
+          <ngx-doc-viewer
+            [url]="documentUrl"
+            viewer="office"
+            style="width:100%;height:97%;"
+          ></ngx-doc-viewer>
+          <div class="wheel-capture-overlay" 
+               (wheel)="onWheel($event)"></div>
+        </div>
+      </div>
+    }
+
+    <!-- CSV Files -->
+    @else if(isCsv){
+      <div class="csv-container">
+        @if(isLoadingCsv){
+          <div class="loading-container">
+            <div class="loading-content">
+              <i class="pi pi-spin pi-spinner" style="font-size: 2rem; color: #3b82f6;"></i>
+              <p>Loading CSV file...</p>
+            </div>
+          </div>
+        }@else if(csvError){
+          <div class="error-container">
+            <div class="error-content">
+              <i class="pi pi-exclamation-triangle" style="font-size: 3rem; color: #ef4444;"></i>
+              <h4>Error Loading CSV File</h4>
+              <p>{{ csvError }}</p>
+              <div class="error-actions">
+                <button 
+                  type="button" 
+                  class="p-button p-button-primary p-button-sm"
+                  (click)="downloadDocument()"
+                >
+                  <i class="pi pi-download"></i>
+                  Download Instead
+                </button>
+              </div>
+            </div>
+          </div>
+        }
+        @else if(csvData){
+          <div class="csv-content">
+            <div class="csv-header">
+              <div class="csv-info">
+                <p>{{ documentName || 'CSV File' }}</p>
+                <span class="csv-stats">
+                  {{ csvData.totalRows }} rows × {{ csvData.totalColumns }} columns
+                </span>
+              </div>
+              </div>
+            
+            <div class="csv-table-container" 
+                 [style.transform-origin]="'center center'"
+                 (wheel)="onWheel($event)">
+              <p-table 
+                [value]="safeCsvStyledData" 
+                [tableStyle]="{'min-width': '100%'}"
+                [scrollable]="true"
+                scrollHeight="67vh"
+                class="csv-table"
+              >
+                <ng-template pTemplate="body" let-row>
+                  <tr>
+                    <ng-container *ngFor="let cell of row.cells; trackBy: trackByCell">
+                      <td [ngClass]="{'csv-header-cell': cell.isHeader}">
+                        {{ cell.value }}
+                      </td>
+                    </ng-container>
+                  </tr>
+                </ng-template>
+              </p-table>
+            </div>
+          </div>
+        }
+      </div>
+    }
+
+    <!-- Email Files -->
+    @else if(isEmail){
+      <div class="email-container">
+        @if(isLoadingEmail){
+          <div class="loading-container">
+            <i class="pi pi-spin pi-spinner" style="font-size: 2rem;"></i>
+            <p>Loading email...</p>
+          </div>
+        }
+        @else if(emailError){
+          <div class="error-container">
+            <div class="error-content">
+              <i class="pi pi-exclamation-circle" style="font-size: 2rem; color: #ef4444;"></i>
+              <h4>Unable to Preview Email</h4>
+              <p>{{ emailError }}</p>
+              <div class="error-actions">
+                <button 
+                  type="button" 
+                  class="p-button p-button-primary p-button-sm"
+                  (click)="downloadDocument()"
+                >
+                  <i class="pi pi-download"></i>
+                  Download
+                </button>
+              </div>
+            </div>
+          </div>
+        }
+        @else if(emailData){
+          <div class="email-viewer ml-3">
+            <div class="email-header">
+              <h3 class="email-subject">{{ emailData.subject }}</h3>
+              <div class="email-metadata">
+                <div class="email-field">
+                  <span class="field-label">From:</span>
+                  <span class="field-value">{{ emailData.from }}</span>
+                </div>
+                <div class="email-field">
+                  <span class="field-label">To:</span>
+                  <span class="field-value">{{ emailData.to }}</span>
+                </div>
+                @if(emailData.cc){
+                  <div class="email-field">
+                    <span class="field-label">CC:</span>
+                    <span class="field-value">{{ emailData.cc }}</span>
+                  </div>
+                }
+                <div class="email-field">
+                  <span class="field-label">Date:</span>
+                  <span class="field-value">{{ emailData.date }}</span>
+                </div>
+                @if(emailData.attachments && emailData.attachments.length > 0){
+                  <div class="email-field">
+                    <span class="field-label">Attachments:</span>
+                    <span class="field-value">
+                      <i class="pi pi-paperclip"></i>
+                      {{ emailData.attachments.length }} attachment(s)
+                    </span>
+                  </div>
+                }
+              </div>
+            </div>
+            <div class="email-body-container">
+          
+                <div class="email-body email-body-text">
+                  <pre>{{ emailData.body }}</pre>
+                </div>
+            </div>
+            @if(emailData.attachments && emailData.attachments.length > 0){
+              <div class="email-attachments">
+                <h4>Attachments</h4>
+                <div class="attachment-list">
+                  @for(attachment of emailData.attachments; track attachment.filename){
+                    <div class="attachment-item">
+                      <i class="pi pi-file"></i>
+                      <span>{{ attachment.filename }}</span>
+                    </div>
+                  }
+                </div>
+              </div>
+            }
+          </div>
+        }
+        @else {
+          <div class="no-email-data">
+            <i class="pi pi-envelope" style="font-size: 3rem; color: #6b7280;"></i>
+            <p>No email data available</p>
+          </div>
+        }
+      </div>
+    }
+
+    <!-- OpenDocument Files -->
+    @else if(isOpenDocument){
+      <div class="docx-container">
+        <div class="doc-viewer-wrapper" 
+             [class.zoomed]="currentZoom !== 100"
+             (wheel)="onWheel($event)">
+          <ngx-doc-viewer
+            [url]="documentUrl"
+            viewer="office"
+            style="width:100%;height:800px;"
+          ></ngx-doc-viewer>
+          <!-- Invisible overlay to capture wheel events over document content -->
+          <div class="wheel-capture-overlay" 
+               (wheel)="onWheel($event)"></div>
+        </div>
+      </div>
+    }
+
+    <!-- Unsupported Files -->
+    @else if(isUnsupported){
+      <div class="unsupported-document-container">
+        <div class="document-preview">
+          <div class="document-icon">
+            <i [class]="documentIcon"></i>
+          </div>
+          <div class="document-info">
+            <h4>Unsupported Document Type</h4>
+            <p>{{ documentName || 'Document' }}</p>
+            <p class="document-note">This document type ({{ contentType }}) is not supported for preview. Please download to view.</p>
+          </div>
+          <div class="document-actions">
+            <button 
+              type="button" 
+              class="p-button p-button-primary p-button-sm"
+              (click)="downloadDocument()"
+            >
+              <i class="pi pi-download"></i>
+              Download
+            </button>
+            <button 
+              type="button" 
+              class="p-button p-button-outlined p-button-sm"
+              (click)="openInNewTab()"
+            >
+              <i class="pi pi-external-link"></i>
+              Open
+            </button>
+          </div>
+        </div>
+      </div>
+    }
+  }
+  @else {
+    <div class="no-document-container">
+      <div class="no-document-content">
+        <i class="pi pi-file-o" style="font-size: 3rem; color: #6b7280;"></i>
+        <h4>No Document Uploaded</h4>
+        <p>Please Upload a document to view its content.</p>
+      </div>
+    </div>
+  }
+</div>
+