cat-documents-ng 1.0.6 → 1.0.7

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

@@ -1,50 +0,0 @@
-<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

@@ -1,187 +0,0 @@
-// 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

@@ -1,79 +0,0 @@
-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

@@ -1,261 +0,0 @@
-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

@@ -1,48 +0,0 @@
-<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 }}
-