cat-documents-ng 1.0.4 → 1.0.6

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

@@ -0,0 +1,50 @@
+<div class="document-viewer-container grid p-formgrid">
+  <div class="main-content col-12 md:col-12">
+    @if(messages.length > 0) {
+    <p-messages [(value)]="messages" [enableService]="false"></p-messages>
+    }
+    
+    <div class="content-grid col-12 md:col-12">
+      @if(selectedDocument){
+      <div class="document-preview p-0 col-12 md:col-9">
+        <document-content-viewer
+          [documentUrl]="selectedDocument?.documentUrl"
+          [contentType]="selectedDocument?.contentType"
+          [documentName]="selectedDocument?.docName"
+          [selectedDocument]="selectedDocument"
+          [contextId]="contextId"
+          [isFormHide]="isFormHide"
+          (documentNameUpdated)="onDocumentNameUpdated()"
+        ></document-content-viewer>
+      </div>
+      }
+
+      <div class="sidebar col-12 md:col-3 pt-0">
+        <div class="sidebar card">
+          <document-history 
+          [historyData]="currentState.documentHistory" 
+          [showHistory]="currentState.showDocumentHistory"
+          [contextId]="contextId"
+          [selectedDocument]="selectedDocument"
+          (deleteTaskRequested)="onDeleteTaskRequested()"
+          (documentSelected)="onDocumentSelected($event)">
+          
+          <!-- Document Actions Component inside the history component -->
+           <div actions-component *ngIf="selectedDocument?.status !=='Pending' && !selectedDocument?.isUploaded && selectedDocument?.status === 'Reviewing'">
+          <document-actions
+            [document]="selectedDocument"
+            [documentId]="selectedDocument?._id"
+            [currentStatus]="currentState.documentStatus"
+            [isLoading]="currentState.isActionLoading"
+            [isUploaded]="currentState.documentIsUploaded"
+            [statusId]="selectedDocument?.statusId"
+            (actionPerformed)="handleDocumentAction($event)">
+          </document-actions>
+          </div>
+          <ng-content [select]="'action-launcher'"></ng-content>
+        </document-history>
+        
+      </div>
+    </div>
+  </div>
+</div>

package/src/lib/document/components/document-viewer/document-viewer.component.scss

@@ -0,0 +1,187 @@
+// Global overflow prevention
+:host {
+  display: block;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+// Ensure the component is properly constrained in its parent
+.document-viewer-container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  
+  .main-content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    min-height: 0; // Important for flexbox sizing
+    
+    .p-messages {
+      margin-bottom: 0.5rem;
+      flex-shrink: 0;
+    }
+    
+    .content-grid {
+      display: grid;
+      grid-template-columns: 1fr 400px;
+      gap: 1rem;
+      height: 0; // Let flexbox handle height
+      min-height: 0;
+      overflow: hidden;
+      flex: 1;
+      
+      .document-preview {
+        background: transparent;
+        border-radius: 8px;
+        height: 100%;
+        width: 100%;
+        min-width: 0;
+        overflow: auto;
+        border-radius: 10px;
+        // Hide scroll bars
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+      
+      .sidebar {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+        height: 100%;
+        overflow-y: auto;
+        min-width: 0;
+        width: 100%;
+        
+        // Hide scroll bars
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        
+        &::-webkit-scrollbar {
+          display: none;
+        }
+        
+        // Reduce spacing in child components
+        ::ng-deep {
+          .document-actions-container {
+            margin: 0;
+          }
+          
+          .document-history-container {
+            padding: 0.75rem;
+            max-height: none;
+            
+            // Hide scroll bars in document history
+            scrollbar-width: none;
+            -ms-overflow-style: none;
+            
+            &::-webkit-scrollbar {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// Handle potential parent container issues
+::ng-deep {
+  .p-dialog-content {
+    overflow: hidden !important;
+    height: 100% !important;
+  }
+  
+  .p-dialog {
+    overflow: hidden !important;
+  }
+}
+
+// Responsive design
+@media (max-width: 1200px) {
+  .document-viewer-container .main-content .content-grid {
+    grid-template-columns: 1fr 380px;
+    gap: 0.75rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .document-viewer-container .main-content .content-grid {
+    grid-template-columns: 1fr;
+    gap: 0.5rem;
+    
+    .sidebar {
+      order: -1; // Move sidebar above content on mobile
+    }
+  }
+}
+
+// Legacy styles for backward compatibility
+.alert-card {
+  background-color: #fb392d1a;
+}
+
+.success-alert {
+  border-radius: 10px;
+  border: 1px solid rgba(251, 57, 45, 0.1);
+  background: linear-gradient(0deg, #dedede 0%, #dedede 100%), #fff;
+}
+
+.p-timeline-event-opposite {
+  display: none;
+}
+
+.decription {
+  color: #676b89;
+}
+
+.textAreaControl textarea {
+  width: 100%;
+  resize: vertical;
+  max-width: 100%;
+}
+
+.document-btn-wrapper {
+  .p-button-outlined {
+    color: #f57c00;
+  }
+}
+
+.document-viewer{
+  // Ensure dialogs are properly positioned
+  position: relative;
+  z-index: 1;
+  
+  .p-dialog{
+    width: 100%;
+    height: 100%;
+    max-height: 100% !important;
+    box-shadow: none !important;
+    z-index: 9999 !important; // Ensure dialog appears above everything
+  }
+  .p-dialog-header-close-icon{
+    height: 20px;
+    width: 20px;
+  }
+  .p-dialog-header{
+    background-color:#FFF;
+    border-radius: 0;
+    padding: 0.5rem;
+  }
+  .p-dialog-content{
+    background-color:#FFF;
+    border-radius: 0;
+    overflow: hidden;
+  }
+}

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

@@ -0,0 +1,79 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DocumentViewerComponent } from './document-viewer.component';
+import { TimelineModule } from 'primeng/timeline';
+import { FormsModule } from '@angular/forms';
+import { CheckboxModule } from 'primeng/checkbox';
+import { HttpClientModule } from '@angular/common/http';
+import { DocumentService } from '../../services/document.service';
+import { DocumentHttpService } from '../../services/document-http.service';
+import { of } from 'rxjs';
+import { DocumentModel } from '../../models/document.model';
+import { LinkedDocumentComponent } from '../linked-document/linked-document.component';
+
+describe('DocumentViewerComponent', () => {
+  let component: DocumentViewerComponent;
+  let fixture: ComponentFixture<DocumentViewerComponent>;
+  let documentService: jasmine.SpyObj<DocumentService>;
+
+  beforeEach(async () => {
+    const documentServiceSpy = jasmine.createSpyObj('DocumentService', ['set']);
+    
+    await TestBed.configureTestingModule({
+      declarations: [DocumentViewerComponent, LinkedDocumentComponent],
+      imports: [TimelineModule, FormsModule, CheckboxModule, HttpClientModule],
+      providers: [
+        { provide: DocumentService, useValue: documentServiceSpy },
+        DocumentHttpService,
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DocumentViewerComponent);
+    component = fixture.componentInstance;
+    documentService = TestBed.inject(DocumentService) as jasmine.SpyObj<DocumentService>;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should call set method of documentService on ngOnChanges when selectedDocument is set', () => {
+    const document: DocumentModel = { _id: '22', contentType: 'image/png', documentUrl: 'http://example.com/image.png', status: 'approved' };
+    component.selectedDocument = document;
+    component.ngOnChanges();
+    expect(documentService.set).toHaveBeenCalledWith(document);
+  });
+
+  it('should determine if content type is an image', () => {
+    const validImageType = 'image/png';
+    const invalidImageType = 'application/pdf';
+    expect(component.isImage(validImageType)).toBeTrue();
+    expect(component.isImage(invalidImageType)).toBeFalse();
+  });
+
+  it('should set selectedDocument correctly when handleSelectedDocument is called', () => {
+    const document: DocumentModel = { _id: '22', contentType: 'image/png', documentUrl: 'http://example.com/image.png' };
+    component.handleSelectedDocument(document);
+    expect(component.selectedDocument).toEqual(document);
+    expect(documentService.set).toHaveBeenCalledWith(document);
+  });
+
+  it('should display the document image if selectedDocument is an image', () => {
+    const imageDocument: DocumentModel = {
+      _id : "122",
+      contentType: 'image/png',
+      documentUrl: 'http://example.com/image.png',
+    };
+    component.selectedDocument = imageDocument;
+    fixture.detectChanges();
+    const imgElement = fixture.debugElement.nativeElement.querySelector('.img-container img');
+    expect(imgElement).toBeTruthy();
+    expect(imgElement.src).toContain('http://example.com/image.png');
+  });
+
+  it('should update isVerified flag', () => {
+    component.isVerified = true;
+    fixture.detectChanges();
+    expect(component.isVerified).toBeTrue();
+  });
+});

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

@@ -0,0 +1,261 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  OnDestroy,
+  SimpleChanges,
+  ViewEncapsulation,
+} from '@angular/core';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
+import { SHARED, SUPPORTED_IMAGE_TYPES } from '../../../../Shared/constant/SHARED';
+import { DocumentHttpService } from '../../services/document-http.service';
+import { Subscription } from 'rxjs';
+import { DocumentModel } from '../../models/document.model';
+import { DocumentHelperService } from '../../services/document.service';
+import { DocumentListItem } from '../../models/document-list-response.model';
+import { DocumentHistorySection } from '../../models/document-history.model';
+import { DocumentAction } from '../../services/document-actions.service';
+import { MessageService } from 'primeng/api';
+import { DocumentViewerService, DocumentViewerState } from '../../services/document-viewer.service';
+import { DocumentStore } from '../../state/document.store';
+
+/**
+ * Component for viewing and managing document details.
+ * @class DocumentViewerComponent
+ * @typedef {DocumentViewerComponent}
+ */
+@Component({
+  selector: 'document-viewer',
+  templateUrl: './document-viewer.component.html',
+  standalone : false,
+  styleUrl: './document-viewer.component.scss',
+  encapsulation: ViewEncapsulation.None,
+})
+export class DocumentViewerComponent implements OnChanges, OnDestroy {
+  /**
+   * Get the selected document by user.
+   * @type {*}
+   */
+  @Input() selectedDocument?: DocumentListItem;  // <-- Made optional to prevent undefined issues
+  /**
+   * Get the selected document by user.
+   * @type {*}
+   */
+  @Input() documentList?: DocumentListItem[];  // <-- Made optional to prevent undefined issues
+  /**
+   * The context ID for API calls
+   * @type {string}
+   */
+  @Input() contextId?: string;
+
+  /**
+   * Flag to hide form elements
+   * @type {boolean}
+   */
+  @Input() isFormHide: boolean = false;
+
+  /**
+   * Event emitted when document status is updated to refresh the document list
+   * @type {EventEmitter<void>}
+   */
+  @Output() documentStatusUpdated = new EventEmitter<{ actionType?: string }>();
+
+  /**
+   * Event emitted when a delete error occurs
+   * @type {EventEmitter<any>}
+   */
+  @Output() deleteError = new EventEmitter<any>();
+
+  /**
+   * Event emitted when a delete operation succeeds
+   * @type {EventEmitter<void>}
+   */
+  @Output() deleteSuccess = new EventEmitter<void>();
+
+  /**
+   * Event emitted when the document viewer is destroyed to trigger refresh
+   * @type {EventEmitter<void>}
+   */
+  @Output() viewerDestroyed = new EventEmitter<void>();
+
+  /**
+   * Indicates whether a checkbox is selected.
+   * @type {boolean}
+   */
+  checked: boolean = false;
+
+  /**
+   * Reference to the dynamic dialog used for displaying additional details.
+   * @type {(DynamicDialogRef | undefined)}
+   */
+  ref: DynamicDialogRef | undefined;
+
+  /**
+   * Indicates whether the document has been verified.
+   * @type {boolean}
+   */
+  isVerified: boolean = false;
+
+  /**
+   * Messages for user feedback
+   * @type {any[]}
+   */
+  messages: any[] = [];
+
+  /**
+   * Current state from the service
+   * @type {DocumentViewerState}
+   */
+  currentState: DocumentViewerState = {
+    documentHistory: [],
+    showDocumentHistory: false,
+    isActionLoading: false,
+    documentStatus: SHARED.STATUS_PENDING as 'pending',
+    documentIsUploaded: false,
+    alertData: null,
+    deleteError: null,
+    deleteSuccess: false
+  };
+
+
+
+  /**
+   * Holds the subscription to manage observable cleanup.
+   * @private
+   * @type {Subscription}
+   */
+  private subscription: Subscription = new Subscription();
+
+  /**
+   * Initializes a new instance of the DocumentViewerComponent.
+   * @param {DocumentHttpService} documentHttpService - Handle the http service.
+   * @param {DocumentService} documentService - Handle the states.
+   * @param {DocumentViewerService} documentViewerService - Handle the viewer business logic.
+   */
+  constructor(
+    public documentHttpService : DocumentHttpService, 
+    private documentService: DocumentHelperService,
+    private messageService: MessageService,
+    private documentViewerService: DocumentViewerService,
+    public documentStore: DocumentStore
+  ) {
+    // Subscribe to state changes from the service
+    this.subscription.add(
+      this.documentViewerService.state$.subscribe(state => {
+        this.currentState = state;
+        
+        // Check for delete errors and emit them to parent
+        if (state.deleteError) {
+          this.deleteError.emit(state.deleteError);
+          // Clear the error from state after emitting
+          this.documentStore.setDeleteError(null);
+        }
+        
+        // Check for delete success and emit to parent
+        if (state.deleteSuccess) {
+          this.deleteSuccess.emit();
+          // Clear the success flag from state after emitting
+          this.documentStore.setDeleteSuccess(false);
+        }
+      })
+    );
+  }
+
+  /**
+   * Fetches the alerts for the selected document.
+   * @returns {void}
+   */
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['selectedDocument'] && this.selectedDocument) {
+      this.documentViewerService.updateSelectedDocument(this.selectedDocument);
+    }
+  }
+
+  /**
+   * Handles document selection from template
+   * @param document The selected document
+   */
+  handleSelectedDocument(document: DocumentListItem): void {
+    this.selectedDocument = document;
+    this.documentViewerService.updateSelectedDocument(document);
+  }
+
+
+
+  /**
+   * Handles document actions from the actions component
+   * @param {DocumentAction} action - The action performed
+   */
+  handleDocumentAction(action: DocumentAction): void {
+    this.documentViewerService.handleDocumentAction(action, this.contextId);
+    this.documentStatusUpdated.emit({ actionType: action.type });
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+    if (this.contextId) {
+      this.refreshDocumentData();
+    }
+    this.viewerDestroyed.emit();
+  }
+
+  /**
+   * Handles document name update event from content viewer
+   */
+  onDocumentNameUpdated(): void {
+    this.documentStatusUpdated.emit({ actionType: SHARED.NAME_UPDATE_ACTION });
+  }
+
+  /**
+   * Handles delete task request from history component
+   */
+  onDeleteTaskRequested(): void {
+    this.documentStatusUpdated.emit({ actionType: 'delete' });
+  }
+
+  /**
+   * Handles document selection from history component
+   * @param document - The selected document from history
+   */
+  onDocumentSelected(document: any): void {
+    if (document && document.documentUrl && document.docName) {
+      const tempDocument: DocumentListItem = {
+        _id: document._id,
+        docName: document.docName,
+        fileName: document.docName,
+        documentUrl: document.documentUrl,
+        contentType: document.contentType,
+        status: this.selectedDocument?.status || '',
+        documentTypeName:document.documentTypeName,
+        isUploaded: this.selectedDocument?.isUploaded || false,
+        isAliasEditable: document.isAliasEditable,
+        parentDocumentId: document.parentDocumentId,
+        aliasName: document.aliasName,
+        isSystemDocument: document.isSystemDocument || false,
+        fileSize: '0',
+        uploadedOn: new Date().toISOString(),
+        ownerName: 'History Document'
+      };
+      this.selectedDocument = tempDocument;
+    }
+  }
+
+  /**
+   * Refreshes document data when the viewer is closed
+   */
+  private refreshDocumentData(): void {
+    this.documentStore.clearSelectionState();
+    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);
+    // Clear document viewer state including history data
+    this.documentStore.clearDocumentViewerState();
+  }
+}

package/src/lib/document/components/document-zoom-controls/document-zoom-controls.component.html

@@ -0,0 +1,48 @@
+<div class="control-container">
+  <div class="inline-flex align-items-center justify-content-center gap-2">
+    <!-- Document name display with hover edit icon -->
+    <div *ngIf="!isEditingDocumentName" class="document-name-display" 
+      [class.clickable-doc-name]="selectedDocument?.isAliasEditable" 
+      [class.non-clickable-doc-name]="!selectedDocument?.isAliasEditable"
+      (click)="selectedDocument?.isAliasEditable ? onDocumentNameClick() : null"
+      [title]="selectedDocument?.isAliasEditable ? 'Click to edit document name' : 'Document name is not editable'">
+      <div class="alias-name">
+        {{ selectedDocument?.aliasName || selectedDocument?.docName }}
+        <i *ngIf="selectedDocument?.isAliasEditable && !isFormHide" class="pi pi-pencil edit-icon-small"></i> 
+      </div>
+      <!-- Subline: show `ownerName documentTypeName` (falls back to just type if no owner) -->
+      <div class="document-name">
+        <ng-container [ngTemplateOutlet]="ownerTypeDisplay"></ng-container>
+      </div>
+    </div>
+    <div *ngIf="isEditingDocumentName" class="document-edit-container">
+      <input #fileInput type="text" class="h-3rem file-input-wrapper document-name-input" pInputText
+        [(ngModel)]="documentName" (input)="onDocumentNameChange($event)" (keydown.escape)="cancelDocumentNameEdit()"
+        (keydown.enter)="handleSaveClick()" (blur)="handleSaveClick()" />
+      <div class="document-name-subline">
+        <ng-container [ngTemplateOutlet]="ownerTypeDisplay"></ng-container>
+      </div>
+    </div>
+    <div *ngIf="fileNameError" class="error-message-wrapper">
+      {{ fileNameError }}
+    </div>
+  </div>
+  <div class="zoom-controls">
+    <p-button type="button" icon="pi pi-minus" [rounded]="true" severity="secondary" [outlined]="true" (click)="zoomOut()" [disabled]="isZoomOutDisabled" title="Zoom Out">
+    </p-button>
+    <p-button type="button" icon="pi pi-plus" [rounded]="true" severity="secondary" [outlined]="true" (click)="zoomIn()" [disabled]="isZoomInDisabled" title="Zoom In">
+    </p-button>
+   
+  </div>
+
+</div>
+
+<!-- Shared template for displaying Owner + Type -->
+<ng-template #ownerTypeDisplay>
+  <ng-container *ngIf="((selectedDocument?.ownerName || '').trim()).length > 0; else onlyTypeTpl">
+    {{ selectedDocument?.ownerName }}<ng-container *ngIf="selectedDocument?.documentTypeName"> {{ selectedDocument?.documentTypeName }}</ng-container>
+  </ng-container>
+</ng-template>
+<ng-template #onlyTypeTpl>
+  {{ selectedDocument?.documentTypeName }}
+