cat-documents-ng 1.0.6 → 1.0.7

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

@@ -1,682 +0,0 @@
-
-import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation, OnDestroy, OnChanges, SimpleChanges, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
-import { DocumentModel } from '../../models/document.model';
-import { SHARED } from '../../../../Shared/constant/SHARED';
-import { DocumentListItem, DocumentListResponse } from '../../models/document-list-response.model';
-import { Subscription } from 'rxjs';
-import { TableData } from '../../../../Shared/components/table-primary/table-primary.model';
-import { DocumentListService } from '../../services/document-list.service';
-import { Message } from 'primeng/api';
-import { ERRORS } from '../../../../Shared/constant/ERROR';
-import { DocumentHttpService } from '../../services/document-http.service';
-import { DocumentMenuService } from '../../services/document-menu.service';
-import { DocumentStore } from '../../state/document.store';
-import { DocumentScrollService } from '../../services/document-scroll.service';
-
-
-/**
- * This component is responsible for displaying and managing a list of documents.
- * Provides functionality for file upload, document selection, and dialog management.
- * @class DocumentListComponent
- */
-@Component({
-  selector: 'lib-document-list',
-  standalone: false,
-  templateUrl: './document-list.component.html',
-  styleUrls: ['./document-list.component.scss'],
-  encapsulation: ViewEncapsulation.None
-})
-export class DocumentListComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
-
-  /**
-   * Represents the context ID for the document list.
-   * This value is passed from the parent component.
-   * @type {string}
-   * @memberof DocumentListComponent
-   */
-  @Input() contextId: string = SHARED.EMPTY;
-
-  /**
-   * The document list response data passed from the parent component.
-   * @type {DocumentListResponse[] | null}
-   * @memberof DocumentListComponent
-   */
-  @Input() documentListResponse: DocumentListResponse[] | null = null;
-
-  /**
-   * The selected menu item ID for scrolling to specific sections
-   * @type {string | null}
-   * @memberof DocumentListComponent
-   */
-  @Input() selectedMenuItemId: string | null = null;
-
-  /**
-   * Additional navigation information for precise scrolling
-   * @type {object | null}
-   * @memberof DocumentListComponent
-   */
-  @Input() navigationInfo: {
-    menuItemId: string;
-    menuItemLabel: string;
-    categoryLabel: string;
-    categoryIndex: number;
-  } | null = null;
-
-
-
-  /**
-   * Reference to the document categories container for scrolling
-   */
-  @ViewChild('documentCategoriesContainer', { static: false }) documentCategoriesContainer!: ElementRef;
-
-  /**
-   * Subscription to document list response from store
-   */
-  private documentListSubscription: Subscription = new Subscription();
-
-  @Output() handleSelectedDocumentInNewTab = new EventEmitter<{
-    selectedDocument: DocumentListItem;
-    contextId: string;
-    documentList: DocumentListItem[];
-  }>();
-
-  /**
-   * The currently selected document.
-   * @type {DocumentModel}
-   * @memberof DocumentListComponent
-   */
-  selectedDocument!: DocumentListItem;
-
-  /**
-   * Default visibility of the sidebar.
-   * @type {boolean}
-   * @memberof DocumentListComponent
-   */
-  isSidebarVisible: boolean = SHARED.FALSE;
-
-  /**
-   * Default visibility of the messages.
-   * @type {Message[]}
-   * @memberof DocumentListComponent
-   */
-  messages: Message[] = SHARED.EMPTY_ARRAY;
-
-  /**
-   * Default visibility of the dialog.
-   * @type {boolean}
-   * @memberof DocumentListComponent
-   */
-  isdialogVisible: boolean = SHARED.FALSE;
-
-  /**
-   * The list of documents to display.
-   * This value is passed from the parent component.
-   * @type {DocumentModel[]}
-   * @memberof DocumentListComponent
-   */
-  @Input() documentList: DocumentListItem[] = SHARED.EMPTY_ARRAY;
-
-  /**
-   * Available document types for selection.
-   * @type {string[]}
-   * @memberof DocumentListComponent
-   */
-  options: any[] = SHARED.EMPTY_ARRAY;
-
-  /**
-   * The selected option for the document type.
-   * @type {(string | null)}
-   * @memberof DocumentListComponent
-   */
-  selectedOption: string | null = null;
-  
-  /**
-   * The file name associated with the document.
-   * It may be undefined until a file is selected or loaded.
-   * @type {string | undefined}
-   */
-  fileName!: string | undefined;
-  
-  /**
-   * Table data for each category
-   */
-  categoryTables: TableData[] = SHARED.EMPTY_ARRAY;
-
-  /**
-   * Document categories from the response
-   */
-  documentCategories: DocumentListResponse[] = SHARED.EMPTY_ARRAY;
-
-  /**
-   * Completion counts for each category
-   */
-  categoryCompletionCounts: string[] = SHARED.EMPTY_ARRAY;
-
-  /**
-   * Severity levels for each category completion badge
-   */
-  categorySeverities: ('success' | 'info' | 'warning' | 'danger')[] = SHARED.EMPTY_ARRAY;
-
-  /**
-   * Message to display for document deletion
-   */
-  deleteMessage: Message[] = SHARED.EMPTY_ARRAY;
-
-  // Document name editing functionality moved to zoom controls component
-
-
-
-  // Alias name functionality moved to zoom controls component
-
-  @Output() handleSelectedDocument = new EventEmitter<DocumentListItem>();
-
-  // Document name validation moved to zoom controls component
-  /**
-   * Getter to return category labels as they come from the API
-   */
-  get formattedCategoryLabels(): string[] {
-    return this.documentCategories.map(category => category.label);
-  }
-
-  /**
-   * Getter to generate safe category IDs for HTML elements
-   */
-  get categoryIds(): string[] {
-    return this.documentCategories.map((category, index) => {
-      if (category?.label) {
-        return `section-${category.label.toLowerCase().replace(' ', '-')}`;
-      }
-      return `section-category-${index}`;
-    });
-  }
-
-  /**
-   * Creates an instance of DocumentListComponent.
-   * @class
-   * @param {DocumentListService} documentListService - The service responsible for document list operations.
-   */
-  constructor(
-    private documentListService: DocumentListService,
-    private documentHttpService: DocumentHttpService,
-    private documentMenuService: DocumentMenuService,
-    private documentStore: DocumentStore,
-    private documentScrollService: DocumentScrollService
-  ) {}
-
-  /**
-   * Handles changes to input properties
-   */
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes[SHARED.CONTEXT_ID] && !changes[SHARED.CONTEXT_ID].firstChange) {
-      this.documentListService.refreshDocumentListForNewContext(this.contextId);
-    }
-    
-    if (changes['selectedMenuItemId']) {
-      if (this.selectedMenuItemId) {
-        this.scrollToCategorySection(this.selectedMenuItemId);
-      } else {
-        // Reset to top when menu item is deselected
-        this.resetToTop();
-      }
-    }
-
-    if (changes['navigationInfo'] && this.navigationInfo) {
-      this.scrollToCategorySectionWithNavigationInfo(this.navigationInfo);
-    }
-
-    // Handle document list changes due to filtering
-    if (changes['documentListResponse'] && !changes['documentListResponse'].firstChange) {
-      this.handleDocumentListFilteringChange();
-    }
-  }
-
-  /**
-   * Initializes the component by setting up document list subscription.
-   */
-  ngOnInit(): void {
-    this.setupDocumentListSubscription();
-  }
-
-  /**
-   * Called after the view is initialized
-   */
-  ngAfterViewInit(): void {
-    if (this.selectedMenuItemId) {
-      setTimeout(() => {
-        this.scrollToCategorySection(this.selectedMenuItemId!);
-      }, 100);
-    }
-    this.documentScrollService.setupScrollListeners(this.documentCategoriesContainer.nativeElement);
-  }
-
-  /**
-   * Handles the visibility of the sidebar.
-   * @param {boolean} isVisible - Indicates whether the sidebar should be visible or not.
-   * @memberof DocumentListComponent
-   */
-  handleOpenSideBar(isVisible: boolean): void {
-    this.isSidebarVisible = isVisible;
-  }
-
-
-
-  /**
-   * Builds document categories from the API response
-   */
-  buildDocumentCategories(): void {
-    const result = this.documentListService.buildDocumentCategories(this.documentListResponse);
-    this.documentCategories = result.documentCategories;
-    this.categoryTables = result.categoryTables;
-    this.categoryCompletionCounts = result.categoryCompletionCounts;
-    this.categorySeverities = result.categorySeverities;
-    
-
-  }
-
-
-
-  /**
-   * Sets up subscription to document list response from store
-   */
-  setupDocumentListSubscription(): void {
-    this.documentListSubscription.add(
-      this.documentListService.setupDocumentListSubscription().subscribe({
-        next: (response: any) => {
-          this.documentListResponse = response;
-          this.buildDocumentCategories();
-        },
-        error: (error: any) => {
-          console.error(ERRORS.ERROR_FETCHING_DOCUMENTS, error);
-        }
-      })
-    );
-  }
-
-
-
-  /**
-   * Handles table row click event
-   */
-  handleTableRowClick(rowData: any): void {
-    this.isdialogVisible = SHARED.TRUE;
-    this.selectedDocument = this.documentListService.handleTableRowClick(rowData);
-    this.handleSelectedDocument.emit(this.selectedDocument);
-  }
-
-  /**
-   * Handles the delete action from the table component
-   * @param {any} rowData - The row data containing the document to delete
-   */
-  handleDeleteAction(rowData: any): void {
-    this.documentListService.handleDeleteAction(rowData, this.contextId)
-      .subscribe({
-        next: (response) => {
-          if (this.selectedDocument && this.selectedDocument._id === rowData._id) {
-            this.handleCloseModal();
-          }
-          this.documentListService.refreshAllDataWithCurrentFilters(this.contextId);
-        },
-        error: (error) => {
-          this.showDeleteErrorMessage(error);
-        }
-      });
-  }
-
-  // Document name editing methods moved to zoom controls component
-
-  /**
-   * Closes the document viewer dialog and resets the selected document
-   */
-  handleCloseModal(): void {
-    this.isdialogVisible = SHARED.FALSE;
-    this.selectedDocument = {} as DocumentListItem;
-    this.fileName = SHARED.EMPTY;
-    this.documentListService.refreshAllDataWithCurrentFilters(this.contextId);
-  }
-
-  /**
-   * Refreshes the document list after a status update
-   * @param {boolean} isDeleteAction - Optional flag indicating if this refresh is due to a delete action
-   */
-  refreshDocumentList(isDeleteAction: boolean = false): void {
-    this.documentListService.refreshDocumentList(this.contextId);
-    if (isDeleteAction) {
-      this.deleteMessage = [{severity: SHARED.SUCCESS_SEVERITY, detail: SHARED.DOCUMENT_DELETED_SUCCESSFULLY}];
-      setTimeout(() => {
-        this.deleteMessage = SHARED.EMPTY_ARRAY;
-        this.handleCloseModal();
-      }, 2000);
-    }
-  }
-
-  handleTableRowCtrlClick(rowData: any): void {
-    this.selectedDocument = this.documentListService.handleTableRowClick(rowData);
-    this.handleSelectedDocument.emit(this.selectedDocument);
-    this.handleSelectedDocumentInNewTab.emit({
-      selectedDocument: this.selectedDocument,
-      contextId: this.contextId,
-      documentList: this.documentList
-    });
-  }
-
-  /**
-   * Handles document status update events from viewer
-   * @param event - The status update event
-   */
-  handleDocumentStatusUpdate(event: { actionType?: string }): void {
-    if (event.actionType === SHARED.DELETE_ACTION) {
-      // Delete success is now handled separately via handleDeleteSuccess()
-      // Don't call refreshDocumentList here for delete actions
-    } else if (event.actionType === SHARED.NAME_UPDATE_ACTION) {
-      this.handleDocumentNameUpdate();
-    } else {
-      this.refreshDocumentList();
-    }
-  }
-
-  /**
-   * Shows delete error message for 2 seconds without closing dialog
-   * @param error - The error object from the delete operation
-   */
-  private showDeleteErrorMessage(error: any): void {
-    const errorMessage = error?.error?.message || error?.message || 'Failed to delete document. Please try again.';
-    this.deleteMessage = [{severity: 'error', detail: errorMessage}];
-    
-    // Clear error message after 2 seconds
-    setTimeout(() => {
-      this.deleteMessage = SHARED.EMPTY_ARRAY;
-    }, 2000);
-  }
-
-  /**
-   * Handles delete error events from the document viewer
-   * @param error - The error object from the delete operation
-   */
-  handleDeleteError(error: any): void {
-    this.showDeleteErrorMessage(error);
-  }
-
-  /**
-   * Handles delete success events from the document viewer
-   */
-  handleDeleteSuccess(): void {
-    this.refreshDocumentList(true);
-  }
-
-  /**
-   * Handles document name update event from viewer
-   */
-  handleDocumentNameUpdate(): void {
-    this.documentListService.refreshAllDataWithCurrentFilters(this.contextId);
-  }
-
-  /**
-   * Handles the event when the document viewer is destroyed
-   * Triggers a refresh of the document data
-   */
-  handleViewerDestroyed(): void {
-    this.documentListService.refreshDocumentList(this.contextId);
-  }
-
-  /**
-   * Scrolls to the category section that matches the selected menu item
-   * @param menuItemId - The ID of the selected menu item
-   */
-  scrollToCategorySection(menuItemId: string): void {
-    if (!this.documentCategories || !this.documentCategoriesContainer) {
-      return;
-    }
-    
-    this.documentScrollService.setScrolling();
-    let targetCategory = this.findCategoryByMenuItemId(menuItemId);
-    if (!targetCategory) {
-      targetCategory = this.findCategoryByLegacyMatching(menuItemId);
-    }
-    if (!targetCategory) {
-      targetCategory = this.documentCategories[0];
-    }
-
-    if (targetCategory) {
-      const categoryIndex = this.documentCategories.findIndex(cat => cat === targetCategory);
-      const categoryElements = this.documentCategoriesContainer.nativeElement.querySelectorAll('.category');
-      if (categoryElements[categoryIndex]) {
-        categoryElements[categoryIndex].scrollIntoView({
-          behavior: SHARED.SMOOTH_SCROLL,
-          block: 'start',
-          inline: 'nearest'
-        });
-        this.highlightCategory(categoryElements[categoryIndex]);
-        this.documentScrollService.setupSectionObserver(categoryElements[categoryIndex], this.selectedMenuItemId!);
-        this.documentScrollService.resetScrollingAfterDelay(1200);
-      }
-    } 
-  }
-
-  /**
-   * Finds category by converting menuItemId to readable format and matching exactly
-   * @param menuItemId - The menu item ID to match
-   * @returns The matching category or null
-   */
-  private findCategoryByMenuItemId(menuItemId: string): DocumentListResponse | null {
-    const readableLabel = this.convertMenuItemIdToReadableLabel(menuItemId);
-    let targetCategory = this.documentCategories.find(category => 
-      category.label.toLowerCase() === readableLabel.toLowerCase()
-    );
-    
-    if (!targetCategory) {
-      targetCategory = this.documentCategories.find(category => {
-        const categoryLabel = category.label.toLowerCase();
-        const menuLabel = readableLabel.toLowerCase();
-        return categoryLabel.includes(menuLabel) && 
-               !this.isSubstringOfLongerCategory(menuLabel, categoryLabel);
-      });
-    }
-    return targetCategory || null;
-  }
-
-  /**
-   * Converts menuItemId to readable label format
-   * @param menuItemId - The menu item ID
-   * @returns Readable label
-   */
-  private convertMenuItemIdToReadableLabel(menuItemId: string): string {
-    // Convert kebab-case or snake_case to Title Case
-    return menuItemId
-      .replace(/[-_]/g, ' ')
-      .replace(/\b\w/g, l => l.toUpperCase());
-  }
-
-  /**
-   * Checks if a menu label is a substring of a longer category name
-   * @param menuLabel - The menu label to check
-   * @param categoryLabel - The category label to check against
-   * @returns True if menuLabel is a substring of a longer category
-   */
-  private isSubstringOfLongerCategory(menuLabel: string, categoryLabel: string): boolean {
-    // If the category is significantly longer than the menu item, it's likely a substring
-    return categoryLabel.length > menuLabel.length + 3; // Allow some tolerance
-  }
-
-  /**
-   * Legacy matching for backward compatibility with existing hardcoded keywords
-   * @param menuItemId - The menu item ID
-   * @returns The matching category or null
-   */
-  private findCategoryByLegacyMatching(menuItemId: string): DocumentListResponse | null {
-    // Legacy matching for specific hardcoded keywords
-    if (menuItemId.includes(SHARED.APPLICATION_LOWERCASE)) {
-      return this.documentCategories.find(cat => 
-        cat.label.toLowerCase().includes(SHARED.APPLICATION_LOWERCASE)
-      ) || null;
-    } else if (menuItemId.includes(SHARED.APPLICANT_LOWERCASE) || menuItemId.includes(SHARED.USER_LOWERCASE)) {
-      return this.documentCategories.find(cat => 
-        cat.label.toLowerCase().includes(SHARED.APPLICANT_LOWERCASE) || 
-        cat.label.toLowerCase().includes(SHARED.USER_LOWERCASE)
-      ) || null;
-    }
-    
-    return null;
-  }
-
-  /**
-   * Scrolls to the category section using navigationInfo
-   * @param navigationInfo - The navigation info object containing menuItemId
-   */
-  scrollToCategorySectionWithNavigationInfo(navigationInfo: {
-    menuItemId: string;
-    menuItemLabel: string;
-    categoryLabel: string;
-    categoryIndex: number;
-  }): void {
-    if (!this.documentCategories || !this.documentCategoriesContainer) {
-      return;
-    }
-    
-    // Set scrolling flag
-    this.documentScrollService.setScrolling();
-    const targetCategory = this.documentCategories.find(category => 
-      category.label.toLowerCase() === navigationInfo.menuItemLabel.toLowerCase()
-    );
-    if (targetCategory) {
-      const sectionId = 'section-' + targetCategory.label.toLowerCase().replace(SHARED.EMPTY_SPACE, SHARED.HYPEN);
-      let targetElement = this.documentCategoriesContainer.nativeElement.querySelector(`#${sectionId}`);
-      if (targetElement) {
-        targetElement.scrollIntoView({
-          behavior: SHARED.SMOOTH_SCROLL,
-          block: 'start',
-          inline: 'nearest'
-        });
-        this.highlightCategory(targetElement);
-        this.documentScrollService.setupSectionObserver(targetElement, this.selectedMenuItemId!);
-        this.documentScrollService.resetScrollingAfterDelay(1200);
-      } else {
-        const categoryIndex = this.documentCategories.findIndex(cat => cat === targetCategory);
-        const categoryElements = this.documentCategoriesContainer.nativeElement.querySelectorAll('.category');
-        if (categoryElements[categoryIndex]) {
-          categoryElements[categoryIndex].scrollIntoView({
-            behavior: SHARED.SMOOTH_SCROLL,
-            block: 'start',
-            inline: 'nearest'
-          });
-          this.highlightCategory(categoryElements[categoryIndex]);
-          
-          // Setup observer to deselect menu item when section scrolls out of view
-          this.documentScrollService.setupSectionObserver(categoryElements[categoryIndex], this.selectedMenuItemId!);
-          
-          // Reset scrolling flag after smooth scroll completes
-          this.documentScrollService.resetScrollingAfterDelay(500);
-        }
-      }
-    } 
-  }
-
-  /**
-   * Adds a temporary highlight effect to the scrolled category
-   * @param categoryElement - The DOM element of the category to highlight
-   */
-  highlightCategory(categoryElement: HTMLElement): void {
-    categoryElement.classList.add('category-highlight');
-    setTimeout(() => {
-      categoryElement.classList.remove('category-highlight');
-    }, 2000);
-  }
-
-  /**
-   * Alternative scrolling method using IntersectionObserver for better performance
-   * This method can be used as a fallback or alternative to the current approach
-   * @param navigationInfo - The navigation info object
-   */
-  scrollToCategorySectionWithIntersectionObserver(navigationInfo: {
-    menuItemId: string;
-    menuItemLabel: string;
-    categoryLabel: string;
-    categoryIndex: number;
-  }): void {
-    if (!this.documentCategories || !this.documentCategoriesContainer) {
-      return;
-    }
-    const targetCategory = this.documentCategories.find(category => 
-      category.label.toLowerCase() === navigationInfo.menuItemLabel.toLowerCase()
-    );
-    if (!targetCategory) {
-      return;
-    }
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach(entry => {
-        if (entry.isIntersecting && entry.target.id === `section-${targetCategory.label.toLowerCase().replace(SHARED.EMPTY_SPACE, SHARED.HYPEN)}`) {
-          entry.target.scrollIntoView({behavior: SHARED.SMOOTH_SCROLL as ScrollBehavior,block: 'start'});
-          this.highlightCategory(entry.target as HTMLElement);
-          observer.disconnect();
-          this.documentScrollService.setupSectionObserver(entry.target, this.selectedMenuItemId!);
-        }
-      });
-    }, {threshold: 0.1,rootMargin: '0px 0px -100px 0px'});
-    const categoryElements = this.documentCategoriesContainer.nativeElement.querySelectorAll('.category');
-    categoryElements.forEach((element: Element) => {
-      observer.observe(element);
-    });
-    setTimeout(() => {
-      observer.disconnect();
-      this.scrollToCategorySectionWithNavigationInfo(navigationInfo);
-    }, 100);
-  }
-
-  /**
-   * Resets the document list to the top when menu item is deselected
-   */
-  private resetToTop(): void {
-    if (this.documentCategoriesContainer) {
-      this.documentCategoriesContainer.nativeElement.scrollTo({
-        top: 0,
-        behavior: SHARED.SMOOTH_SCROLL
-      });
-    }
-    this.documentScrollService.disconnectSectionObserver();
-  }
-
-  /**
-   * Handles changes in document list due to filtering
-   * Checks if the selected menu item's section is still visible and deselects if not
-   */
-  private handleDocumentListFilteringChange(): void {
-    if (this.selectedMenuItemId && this.documentCategories) {
-      // If no categories are available (all filtered out), deselect the menu item
-      if (this.documentCategories.length === 0) {
-        this.deselectMenuItemAndReset();
-        return;
-      }
-      
-      // Use the document menu service to check visibility
-      const isSectionVisible = this.documentMenuService.isMenuItemSectionVisible(
-        this.selectedMenuItemId, 
-        this.documentListResponse
-      );
-      
-      if (!isSectionVisible) {
-        this.deselectMenuItemAndReset();
-      }
-    }
-  }
-
-
-
-  /**
-   * Deselects the current menu item and resets the view
-   */
-  private deselectMenuItemAndReset(): void {
-    this.selectedMenuItemId = null;
-    this.documentStore.setSelectedMenuItem(null);
-    this.resetToTop();
-  }
-
-  /**
-   * Cleanup subscriptions on component destroy
-   */
-  ngOnDestroy(): void {
-    this.documentListSubscription.unsubscribe();
-    this.documentScrollService.disconnectSectionObserver();
-    if (this.documentCategoriesContainer) {
-      this.documentScrollService.cleanupScrollListeners(this.documentCategoriesContainer.nativeElement);
-    }
-  }
-}