cat-documents-ng 1.0.4 → 1.0.6

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

@@ -0,0 +1,373 @@
+import { Component, Input, Output, EventEmitter, HostListener, OnChanges, SimpleChanges } from '@angular/core';
+import { DocumentHistorySection, HistoryDocument } from '../../models/document-history.model';
+import { SHARED } from '../../../../Shared/constant/SHARED';
+import { DocumentHistoryService } from '../../services/document-history.service';
+import { DocumentViewerService } from '../../services/document-viewer.service';
+import { DocumentActionsService } from '../../services/document-actions.service';
+import { ConfirmationService } from 'primeng/api';
+import { ConfirmationDialogComponent } from '../../../../Shared/components/confirmation-dialog/confirmation-dialog.component';
+import { DocumentHttpService } from '../../services/document-http.service';
+
+// Extended interface for processed items with computed properties
+interface ProcessedDocumentHistoryItem {
+  label: string;
+  dateTime: string;
+  requestDescription: string;
+  userName: string;
+  userRole: string;
+  documentUrl?: string;
+  docName?: string;
+  actionIcon: string;
+  actionColor: string;
+  actionBgColor: string;
+  actionBorderColor: string;
+  actionIconBgColor: string;
+}
+
+interface ProcessedDocumentHistorySection extends DocumentHistorySection {
+  list: ProcessedDocumentHistoryItem[];
+  accordionClass?: string;
+  hasValidContent?: boolean;
+}
+
+/**
+ * Component for displaying document history in a timeline format.
+ */
+@Component({
+  selector: 'document-history',
+  standalone: false,
+  templateUrl: './document-history.component.html',
+  styleUrls: ['./document-history.component.scss']
+})
+export class DocumentHistoryComponent implements OnChanges {
+  
+  /**
+   * Input data for document history sections
+   */
+  @Input() historyData: DocumentHistorySection[] = SHARED.EMPTY_ARRAY;
+  
+  /**
+   * Whether to show the history component
+   */
+  @Input() showHistory: boolean = false;
+
+  /**
+   * The context ID for API calls
+   */
+  @Input() contextId?: string;
+
+  /**
+   * The selected document for actions
+   */
+  @Input() selectedDocument?: any;
+
+
+
+  /**
+   * Event emitted when delete task is requested
+   */
+  @Output() deleteTaskRequested = new EventEmitter<void>();
+
+  /**
+   * Event emitted when a document from history is selected
+   */
+  @Output() documentSelected = new EventEmitter<HistoryDocument>();
+
+  /**
+   * Reference to the document actions component
+   */
+  documentActionsComponent?: any;
+
+  /**
+   * Active accordion index for controlling expand/collapse
+   */
+  activeAccordionIndex: number = 0;
+
+  /**
+   * Whether the accordion is expanded
+   */
+  isAccordionExpanded: boolean = true;
+
+  /**
+   * Whether the actions dropdown menu is visible
+   */
+  showActionsMenu: boolean = false;
+
+
+
+  constructor(
+    private documentHistoryService: DocumentHistoryService,
+    private documentViewerService: DocumentViewerService,
+    private documentActionsService: DocumentActionsService,
+    private confirmationService: ConfirmationService,
+    private documentHttpService: DocumentHttpService
+  ) {}
+
+  /**
+   * Handles changes to input properties
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['historyData'] && this.historyData) {
+      this.processHistoryData();
+    }
+  }
+
+  /**
+   * Handle accordion open event
+   */
+  onAccordionOpen(): void {
+    this.isAccordionExpanded = true;
+    this.activeAccordionIndex = 0;
+  }
+
+  /**
+   * Handle accordion close event
+   */
+  onAccordionClose(): void {
+    this.isAccordionExpanded = false;
+    this.activeAccordionIndex = -1;
+  }
+
+  /**
+   * Toggle accordion state
+   */
+  toggleAccordion(): void {
+    if (this.isAccordionExpanded) {
+      this.onAccordionClose();
+    } else {
+      this.onAccordionOpen();
+    }
+  }
+
+  /**
+   * Process history data to add computed properties
+   */
+  get processedHistoryData(): any[] {
+    return this._processedHistoryData;
+  }
+
+  /**
+   * Downloads a document when clicked
+   * @param documentUrl - The URL of the document to download
+   * @param docName - The name of the document
+   */
+  downloadDocument(documentUrl: string, docName?: string): void {
+    this.documentHistoryService.downloadDocument(documentUrl, docName);
+  }
+
+  /**
+   * Get alert count for the alerts section
+   */
+  getAlertCount(): number {
+    // This could be enhanced to get actual alert count from a service
+    return 3; // Placeholder value matching the image
+  }
+
+  /**
+   * Get CSS class for event card based on action type
+   */
+  getEventCardClass(label: string): string {
+    const lowerLabel = label.toLowerCase();
+    if (lowerLabel.includes(SHARED.REQUESTED)) {
+      return SHARED.EVENT_REQUESTED;
+    } else if (lowerLabel.includes(SHARED.ACCEPTED) || lowerLabel.includes(SHARED.UPLOADED)) {
+      return SHARED.EVENT_ACCEPTED;
+    } else if (lowerLabel.includes(SHARED.REJECTED)) {
+      return SHARED.EVENT_REJECTED;
+    }
+    return SHARED.EVENT_DEFAULT;
+  }
+
+  /**
+   * Get CSS class for event icon based on action type
+   */
+  getEventIconClass(label: string): string {
+    const lowerLabel = label.toLowerCase();
+    if (lowerLabel.includes(SHARED.REQUESTED)) {
+      return SHARED.ICON_REQUESTED;
+    } else if (lowerLabel.includes(SHARED.ACCEPTED) || lowerLabel.includes(SHARED.UPLOADED)) {
+      return SHARED.ICON_ACCEPTED;
+    } else if (lowerLabel.includes(SHARED.REJECTED)) {
+      return SHARED.ICON_REJECTED;
+    }
+    return SHARED.ICON_DEFAULT;
+  }
+
+  /**
+   * Get the appropriate icon for the event
+   * @param label - The event label
+   * @returns {string} The icon class
+   */
+  getEventIcon(label: string): string {
+    const lowerLabel = label.toLowerCase();
+    if (lowerLabel.includes(SHARED.UPLOADED)) {
+      return SHARED.ICON_CHECK_CIRCLE;
+    } else if (lowerLabel.includes(SHARED.REQUESTED)) {
+      return SHARED.ICON_FOLDER_PLUS;
+    } else if (lowerLabel.includes(SHARED.ACCEPTED) || lowerLabel.includes(SHARED.APPROVED)) {
+      return SHARED.ICON_CHECK_CIRCLE;
+    } else if (lowerLabel.includes(SHARED.REJECTED)) {
+      return SHARED.ICON_TIMES;
+    }
+    return SHARED.ICON_FILE;
+  }
+
+
+
+  /**
+   * Toggle the actions dropdown menu
+   */
+  toggleActionsMenu(): void {
+    this.showActionsMenu = !this.showActionsMenu;
+  }
+
+  /**
+   * Close the actions dropdown menu
+   */
+  closeActionsMenu(): void {
+    this.showActionsMenu = false;
+  }
+
+
+
+  /**
+   * Handle delete task action
+   */
+  onDeleteTask(): void {
+    this.closeActionsMenu();
+    if (this.selectedDocument && this.contextId) {
+      const documentName = this.selectedDocument?.docName || 'this document';
+      const documentId = this.selectedDocument?._id;
+      const documentTypeName = this.selectedDocument?.documentTypeName?.toLowerCase() || '';
+      // Check if the document is a valuation report
+      const isValuationReport = documentTypeName.includes(SHARED.VALUATION_REPORT);
+      if (isValuationReport && documentId) { // First check if valuation report data exists in the database
+        this.documentHttpService.getValuationReportByContextId(this.contextId).subscribe({
+          next: (valuationReportData) => { // Check if valuation report data exists and if the documentId matches
+            const hasValuationReportData = valuationReportData && Object.keys(valuationReportData).length > 0;
+            const documentIdMatches = valuationReportData?.documentId === documentId;
+            if (hasValuationReportData && documentIdMatches) { // Show custom confirmation message for valuation report with matching documentId
+              ConfirmationDialogComponent.confirm( this.confirmationService,
+                { message: SHARED.VALUATION_REPORT_DELETE_MESSAGE, header: SHARED.DELETE_CONFIRMATION_HEADER,
+                  acceptLabel: SHARED.DELETE, rejectLabel: SHARED.CANCEL, acceptButtonClass: SHARED.DELETE_BUTTON_STYLE_CLASS },
+                () => { this.performDelete(); },
+                () => {}
+              );
+            } else { this.showStandardDeleteConfirmation(documentName); // No valuation report data or documentId doesn't match, show standard delete confirmation
+            }
+          },
+          error: () => { this.showStandardDeleteConfirmation(documentName); // If API fails, show standard delete confirmation
+          }
+        });
+      } else { this.showStandardDeleteConfirmation(documentName); // Show standard delete confirmation for other document types
+      }
+    }
+  }
+
+  /**
+   * Shows standard delete confirmation dialog
+   * @private
+   */
+  private showStandardDeleteConfirmation(documentName: string): void {
+    ConfirmationDialogComponent.confirmDelete(
+      this.confirmationService,
+      documentName,
+      () => {
+        this.performDelete();
+      },
+      () => {}
+    );
+  }
+
+  /**
+   * Performs the actual delete operation
+   * @private
+   */
+  private performDelete(): void {
+    // Ensure the viewer service has the latest selected document (with _id from history)
+    // eslint-disable-next-line no-console
+    try {
+      (this.documentViewerService as any).updateSelectedDocument?.(this.selectedDocument, true);
+    } catch {}
+    const deleteAction = this.documentActionsService.createDeleteAction();
+    this.documentViewerService.handleDocumentAction(deleteAction, this.contextId);
+    this.deleteTaskRequested.emit();
+  }
+
+  /**
+   * Set reference to document actions component
+   */
+  setDocumentActionsComponent(component: any): void {
+    this.documentActionsComponent = component;
+  }
+
+  /**
+   * Handles document selection from history
+   * @param document - The selected document from history
+   */
+  onDocumentClick(document: HistoryDocument): void {
+    if (document && document.documentUrl && document.docName) {
+      this.documentSelected.emit(document);
+    }
+  }
+
+  /**
+   * Processed history data with document lists
+   */
+  private _processedHistoryData: any[] = [];
+
+  /**
+   * Processes history data to include document lists for each item
+   */
+  private processHistoryData(): void {
+    this._processedHistoryData = this.historyData.map(section => ({
+      ...section,
+      list: section.list.map(item => ({
+        ...item,  
+        documentList: this.getValidDocuments(item),
+        eventCardClass: this.getEventCardClass(item.label),
+        eventIconClass: this.getEventIconClass(item.label),
+        eventIcon: this.getEventIcon(item.label),
+        shouldHide: this.shouldHideItem(item)
+      }))
+    }));
+  }
+
+  /**
+   * Gets the list of valid documents for a history item
+   * @param item - The history item
+   * @returns Array of valid documents
+   */
+  private getValidDocuments(item: any): HistoryDocument[] {
+    if (item.documents && Array.isArray(item.documents)) {
+      return item.documents.filter((doc: HistoryDocument) => 
+        doc && doc.docName && doc.documentUrl && doc.contentType
+      );
+    }
+    return [];
+  }
+
+  /**
+   * Determines if a timeline item should be hidden
+   * @param item - The history item
+   * @returns True if the item should be hidden
+   */
+  private shouldHideItem(item: any): boolean {
+    return this.selectedDocument?.isUploaded && 
+           item.label.toLowerCase().includes(SHARED.REQUESTED);
+  }
+
+  /**
+   * Listen for clicks outside the dropdown to close it
+   */
+  @HostListener('document:click', ['$event'])
+  onDocumentClickOutside(event: Event): void {
+    if (this.showActionsMenu) {
+      const target = event.target as HTMLElement;
+      const actionsMenu = target.closest('.actions-menu');
+      if (!actionsMenu) {
+        this.closeActionsMenu();
+      }
+    }
+  }
+} 

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

@@ -0,0 +1,46 @@
+<div class="document-viewer">
+  <p-dialog [(visible)]="isdialogVisible" [modal]="true"
+    class="w-full h-full document-dailog-wrapper" [draggable]="false" [closable]="true" (onHide)="handleCloseModal()">
+    <p-messages [(value)]="deleteMessage" [enableService]="false" [closable]="false" />
+  
+    <document-viewer [selectedDocument]="selectedDocument" [documentList]="documentList" [contextId]="contextId" 
+      (documentStatusUpdated)="handleDocumentStatusUpdate($event)"
+      (viewerDestroyed)="handleViewerDestroyed()"
+      (deleteError)="handleDeleteError($event)"
+      (deleteSuccess)="handleDeleteSuccess()">
+      <ng-template pTemplate="header">
+        <div class="w-full flex align-items-center justify-content-between">
+          <input type="text" class="w-full border-none bg-white h-3rem file-input-wrapper" pInputText
+            [(ngModel)]="fileName" />
+
+        </div>
+      </ng-template>
+      <ng-content></ng-content>
+    </document-viewer>
+  </p-dialog>
+</div>
+
+<div class="document-categories-container" #documentCategoriesContainer>
+  <div class="category" *ngFor="let category of documentCategories; let i = index"
+    [id]="categoryIds[i]">
+    <div class="category-header" *ngIf="documentCategories[i]?.list?.length">
+      <div class="category-title">
+        <h3>{{ formattedCategoryLabels[i] }}</h3>
+        <p class="category-description">{{ category.categoryDescription }}</p>
+      </div>
+      <div class="completion-status">
+        <p-badge 
+          [severity]="categorySeverities[i]" 
+          [value]="(((categoryCompletionCounts && categoryCompletionCounts[i]) || 0) + ' Complete')"
+          class="completion-badge">
+        </p-badge>
+      </div>
+    </div>
+
+    <div class="table-container">
+      <lib-table-primary [tableData]="categoryTables[i]" [tableStyle]="{ 'min-width': '100%' }"
+        (rowClick)="handleTableRowClick($event)" (deleteAction)="handleDeleteAction($event)" (rowCtrlClick)="handleTableRowCtrlClick($event)" >
+      </lib-table-primary>
+    </div>
+  </div>
+</div>