cat-documents-ng 0.1.30 → 0.1.32

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

@@ -1,36 +0,0 @@
-<div class="grid m-0">
-    <div
-      class="col-12 flex align-items-center justify-content-between md:col-12 xl:col-12"
-    >
-      <div
-        class="col-5 flex cursor-pointer align-items-center pl-0"
-        (click)="handleOpenDocument(document)"
-      >
-        <img src="../../../../assets/images/Frame.png" alt="" />
-        <span class="ml-4 file-name-wrapper document-text-wrapper">{{ document.fileName }}</span>
-      </div>
-      <div class="col-4 flex align-items-center justify-content-center">
-        <span
-          [class]="'product-badge status-' + document.status?.toLowerCase()"
-          class="flex align-items-center justify-content-center pl-2 pr-2 pt-1 pb-1"
-        >
-          <ng-container *ngIf="document.status?.toLowerCase() === 'pending'">
-            <i class="pi pi-clock pr-1" style="font-size: 12px;"></i>
-            Pending
-          </ng-container>
-          <ng-container *ngIf="document.status?.toLowerCase() === 'verified'">
-            <i class="pi pi-check-circle pr-1" style="font-size: 12px;"></i>
-            Verified
-          </ng-container>
-          <ng-container *ngIf="document.status?.toLowerCase() === 'alert'">
-            <i class="pi pi-bell pr-1" style="font-size: 12px;"></i>
-            Alert
-          </ng-container>
-        </span>
-      </div>
-      <div class="document-type file-name-wrapper document-text-wrapper">
-        {{document.documentTypeName}}
-    </div>
-    </div>
-  </div>
-  

package/src/lib/document/components/document-list-item/document-list-item.component.scss

@@ -1,34 +0,0 @@
-.product-badge.status-pending {
-    background: #e9b127;
-    color: #ffffff;
-    border-radius: 4px;
-  }
-  .product-badge.status-verified {
-    background: #4caf50;
-    color: #ffffff;
-    border-radius: 4px;
-  }
-  .product-badge.status-alert {
-    background: #f57c00;
-    color: #ffffff;
-    border-radius: 4px;
-  }
-  .product-badge {
-    text-transform: none;
-    font-weight: 500;
-    font-size: 12px;
-
-  }
-  
-  .file-name-wrapper{
-    font-size: 15px;
-    font-weight: 500;
-  }
-
-  .document-text-wrapper{
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }

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

@@ -1,75 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DocumentListItemComponent } from './document-list-item.component';
-import { CommonModule } from '@angular/common';
-import { By } from '@angular/platform-browser';
-import { DocumentModel } from '../../models/document.model';
-
-describe('DocumentListItemComponent', () => {
-  let component: DocumentListItemComponent;
-  let fixture: ComponentFixture<DocumentListItemComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [DocumentListItemComponent],
-      imports: [CommonModule],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(DocumentListItemComponent);
-    component = fixture.componentInstance;
-    component.document = {
-      _id : "1",
-      fileName : 'test',
-    }
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should emit the selected document when handleOpenDocument is called', () => {
-    spyOn(component.documentClick, 'emit');
-    const mockDocument = { _id: "1", fileName: 'test' } as DocumentModel;
-    component.handleOpenDocument(mockDocument);
-    expect(component.documentClick.emit).toHaveBeenCalledWith(mockDocument);
-  });
-
-  it('should log an error when handleOpenDocument is called with null', () => {
-    spyOn(console, 'error');
-    component.handleOpenDocument(null as unknown as DocumentModel);
-
-    expect(console.error).toHaveBeenCalledWith('Error: Document is null or undefined:', null);
-  });
-
-  it('should emit documentClick event when document is clicked', () => {
-    spyOn(component.documentClick, 'emit');
-    const clickableElement = fixture.debugElement.query(By.css('.cursor-pointer'));
-    clickableElement.triggerEventHandler('click', null);
-
-    expect(component.documentClick.emit).toHaveBeenCalledWith(component.document);
-  });
-
-  it('should display Pending status with the correct icon', () => {
-    component.document.status = 'Pending';
-    fixture.detectChanges();
-
-    const statusElement = fixture.debugElement.query(By.css('.status-pending')).nativeElement;
-    const iconElement = fixture.debugElement.query(By.css('.pi-clock')).nativeElement;
-
-    expect(statusElement.textContent).toContain('Pending');
-    expect(iconElement).toBeTruthy();
-  });
-
-  it('should display Verified status with the correct icon', () => {
-    component.document.status = 'Verified';
-    fixture.detectChanges();
-
-    const statusElement = fixture.debugElement.query(By.css('.status-verified')).nativeElement;
-    const iconElement = fixture.debugElement.query(By.css('.pi-check-circle')).nativeElement;
-
-    expect(statusElement.textContent).toContain('Verified');
-    expect(iconElement).toBeTruthy();
-  });
-
- 
-});

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

@@ -1,40 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { DocumentModel } from '../../models/document.model';
-
-/**
- * DocumentListItemComponent
- *
- * This component displays individual document items within a list. 
- * It accepts a list of documents as input and handles interactions with documents.
- */
-@Component({
-  selector: 'lib-document-list-item',
-  standalone: false,
-  templateUrl: './document-list-item.component.html',
-  styleUrls: ['./document-list-item.component.scss']
-})
-export class DocumentListItemComponent {
- /**
-  * Emit the selected document.
-  * @type {EventEmitter<DocumentModel>}
-  */
-  @Output() documentClick = new EventEmitter<DocumentModel>();
-  
-  /**
-   * The document to display.
-   * @type {DocumentModel[]}
-   */
-  @Input() document!: DocumentModel;
-
-  /**
-   * Handles interactions with a document.
-   * @param {DocumentModel} document - The document to be opened or interacted with.
-   */
-    handleOpenDocument(document: DocumentModel): void {
-      if (!document) {
-        console.error('Error: Document is null or undefined:', document);
-        return;
-      }
-      this.documentClick.emit(document);
-    }
-}

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

@@ -1,56 +0,0 @@
-<div class="grid">
-  <div class="col-12 md:col-12">
-    <p-fileUpload #fileUploader [multiple]="true" auto="true" accept="image/png,application/pdf" maxFileSize="26214400"
-      (onSelect)="onSelectedFiles($event)">
-      <ng-template pTemplate="header" let-chooseCallback="chooseCallback" let-clearCallback="clearCallback">
-        <div class="docHeader p-2 flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
-          <div class="flex gap-2">
-            <p-button (onClick)="choose($event, chooseCallback)" icon="pi pi-images" [rounded]="true"
-              [outlined]="true" />
-          </div>
-        </div>
-      </ng-template>
-      <ng-template pTemplate="content" let-removeFileCallback="removeFileCallback"
-        let-removeUploadedFileCallback="removeUploadedFileCallback">
-        <div class="col-12 md:col-12 p-0">
-          <div class="col-12 md:col-12 p-0" *ngIf="uploadedFiles.length > 0">
-            <div *ngFor="let uploadedFile of uploadedFiles; let i = index"
-              class="m-0 flex flex-column align-items-center gap-1 mt-3">
-              <div class="col-12 md:col-12 p-0 flex documentInfo">
-                <div class="documentImage">
-                  <img src="../../../../assets/images/document.png" [alt]="uploadedFile.file.name" width="45" height="50"
-                    class="object-contain" />
-                </div>
-                <div class="flex w-full flex-column mt-2 ml-2">
-                  <div class="flex justify-content-between">
-                    <div style=" font-weight: bold;font-size: 14px">
-                      {{ uploadedFile.file.name }}
-                    </div>
-                    <i class="pi pi-times cursor-pointer" (click)="handleDocumentRemove(uploadedFile.file,i)"></i>
-                  </div>
-                  <div class="flex justify-content-between mt-1">
-                    <div style="color: #676B89; font-size: 12px; color: green;" class="pi pi-verified "> {{ uploadedFile.formattedSize }}</div>
-                    <div class="white-space-nowrap" style="color: #0F8BFD; font-family: 14px;"> {{ uploadedFile.progress }} %</div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-12 md:col-12 p-0">
-                <p-progressBar [value]="totalSizePercent" [showValue]="false" styleClass="h-1/2rem md:ml-auto relative"
-                  [ngClass]="{ 'exceeded-progress-bar': totalSizePercent > 100 }">
-                </p-progressBar>
-              </div>
-            </div>
-          </div>
-        </div>
-      </ng-template>
-      <ng-template pTemplate="empty" let-chooseCallback="chooseCallback">
-        <div *ngIf="!uploadedFiles.length" class="flex align-items-center justify-content-center flex-column"
-          (click)="triggerFileUpload()">
-          <i class="pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400"></i>
-          <p class="mt-4 mb-0">Drag and drop files here to upload.</p>
-        </div>
-      </ng-template>
-      <ng-template pTemplate="file"> </ng-template>
-    </p-fileUpload>
-  </div>
-</div>

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

@@ -1,32 +0,0 @@
-.flex {
-  display: flex;
-}
-.items-center {
-  align-items: center;
-}
-.justify-center {
-  justify-content: center;
-}
-.flex-col {
-  flex-direction: column;
-}
-.text-muted-color {
-  color: #6c757d; // Adjust to match your theme
-}
-.p-fileupload-buttonbar {
-  padding: 0px;
-}
-.p-fileupload-content {
-  background-color: #0f8bfd1a;
-}
-.p-fileupload {
-  .p-fileupload-content {
-    padding: 1rem 1rem;
-  }
-  
-}
-.docHeader{
-  .p-button-icon{
-    padding: 0.5rem;
-  }
-}

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

@@ -1,95 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DocumentUploadComponent } from './document-upload.component';
-import { FileUploadModule } from 'primeng/fileupload';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { MessageService, PrimeNGConfig } from 'primeng/api';
-import { ChangeDetectorRef } from '@angular/core';
-import { FileFormatService } from '../../services/file-format.service';
-import { DocumentService } from '../../state/document.service';
-import { DocumentUploadService } from '../../services/document-upload.service';
-
-describe('DocumentUploadComponent', () => {
-  let component: DocumentUploadComponent;
-  let fixture: ComponentFixture<DocumentUploadComponent>;
-  let mockFileFormatService: jasmine.SpyObj<FileFormatService>;
-  let mockDocumentService: jasmine.SpyObj<DocumentService>;
-  let mockDocumentUploadService: jasmine.SpyObj<DocumentUploadService>;
-
-  beforeEach(async () => {
-    mockFileFormatService = jasmine.createSpyObj('FileFormatService', ['formatFileSize']);
-    mockDocumentService = jasmine.createSpyObj('DocumentService', ['uploadDocument']);
-    mockDocumentUploadService = jasmine.createSpyObj('DocumentUploadService', ['getUploadFileData']);
-
-    await TestBed.configureTestingModule({
-      declarations: [DocumentUploadComponent],
-      imports: [FileUploadModule, HttpClientTestingModule],
-      providers: [
-        MessageService,
-        PrimeNGConfig,
-        ChangeDetectorRef,
-        { provide: FileFormatService, useValue: mockFileFormatService },
-        { provide: DocumentService, useValue: mockDocumentService },
-        { provide: DocumentUploadService, useValue: mockDocumentUploadService },
-      ],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(DocumentUploadComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should trigger file upload dialog when triggerFileUpload is called', () => {
-    spyOn(component.fileUploader, 'choose');
-    component.triggerFileUpload();
-    expect(component.fileUploader.choose).toHaveBeenCalled();
-  });
-
-  it('should handle file selection and upload', () => {
-    const mockFile = new File(['content'], 'test.pdf', { type: 'application/pdf' });
-    const event = { currentFiles: [mockFile] };
-    mockFileFormatService.formatFileSize.and.returnValue('10 KB');
-    component.onSelectedFiles(event);
-    expect(mockDocumentUploadService.getUploadFileData).toHaveBeenCalledWith(mockFile, component.contextId);
-    expect(component.uploadedFiles.length).toBe(1);
-    expect(component.uploadedFiles[0].file).toBe(mockFile);
-    expect(component.uploadedFiles[0].formattedSize).toBe('10 KB');
-    expect(component.uploadedFiles[0].progress).toBe(100);
-  });
-
-  it('should remove a file from the uploaded files list', () => {
-    const mockFile = new File(['content'], 'test.pdf', { type: 'application/pdf' });
-    component.uploadedFiles = [
-      { file: mockFile, formattedSize: '10 KB', progress: 100 },
-    ];
-    const fileProgressSpy = spyOn(component.fileProgress, 'delete');
-    component.handleDocumentRemove(mockFile, 0);
-    expect(component.uploadedFiles.length).toBe(0);
-    expect(fileProgressSpy).toHaveBeenCalledWith(mockFile);
-  });
-
-  it('should calculate and return file progress', () => {
-    const mockFile = new File(['content'], 'test.pdf', { type: 'application/pdf' });
-    component.fileProgress.set(mockFile, 75);
-    const progress = component.getProgress(mockFile);
-    expect(progress).toBe(75);
-  });
-
-  it('should format file size correctly', () => {
-    mockFileFormatService.formatFileSize.and.returnValue('10 KB');
-    component.formatSize(10240);
-    expect(component.fileSize).toBe('10 KB');
-    expect(mockFileFormatService.formatFileSize).toHaveBeenCalledWith(10240, jasmine.any(PrimeNGConfig));
-  });
-
-  it('should clear files after selection', () => {
-    spyOn(component.fileUploader, 'clear');
-    const mockFile = new File(['content'], 'test.pdf', { type: 'application/pdf' });
-    const event = { currentFiles: [mockFile] };
-    component.onSelectedFiles(event);
-    expect(component.fileUploader.clear).toHaveBeenCalled();
-  });
-});

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

@@ -1,162 +0,0 @@
-import { ChangeDetectorRef, Component, Input, ViewChild, ViewEncapsulation } from '@angular/core';
-import { FileUpload } from 'primeng/fileupload';
-import { MessageService } from 'primeng/api';
-import { PrimeNGConfig } from 'primeng/api';
-import { SHARED } from '../../../../Shared/constant/SHARED';
-import { FileFormatService } from '../../services/file-format.service';
-import { DocumentService } from '../../state/document.service';
-import { DocumentUploadService } from '../../services/document-upload.service';
-
-/**
- * A component for handling document uploads, including file selection, removal, and progress tracking.
- * @class DocumentUploadComponent
- */
-@Component({
-  selector: 'lib-document-upload',
-  templateUrl: './document-upload.component.html',
-  styleUrls: ['./document-upload.component.scss'],
-  standalone: false,
-  encapsulation: ViewEncapsulation.None
-})
-export class DocumentUploadComponent {
-
-  
-  /**
-   * Represents the file size.
-   * @type {number}
-   */
-  fileSize: string = SHARED.EMPTY;
-  /**
-   * Represent contextId
-   * @type {string}
-   */
-  @Input() contextId: string = SHARED.EMPTY
-
-  /**
-   * To make file explorer visible.
-   * @type {!FileUpload}
-   */
-  @ViewChild('fileUploader') fileUploader!: FileUpload;
-
-  fileProgress: Map<File, number> = new Map();
-
-  /**
-   * List of files selected for upload.
-   * @type {File[]}
-   */
-  uploadedFiles: { file: File; formattedSize: string; progress: number }[] = [];
-
-
-  /**
-   * Percentage of the total size calculated for displaying upload progress.
-   * @type {number}
-   */
-  totalSizePercent: number = SHARED.INITIAL_COUNT;
-
-  /**
-   * The current upload progress percentage (SHARED.INITIAL_VALUE-100).
-   * @type {number}
-   */
-  uploadProgress: number = SHARED.INITIAL_COUNT;
-
-
-  /**
-   * Creates an instance of DocumentUploadComponent.
-   * @class
-   * @param {DocumentUploadService} documentUpload - Service for handling document upload.
-   * @param {DocumentService} uploadService - Service for handling document upload.
-   * @param {PrimeNGConfig} config - PrimeNG configuration.
-   * @param {FileFormatService} fileFormatService - Service for formatting file sizes.
-   * @param {MessageService} messageService - Service for displaying messages.
-   * @param {ChangeDetectorRef} cdr - Service for detecting changes.
-   */
-  constructor(public documentUpload : DocumentUploadService,public uploadService: DocumentService, private config: PrimeNGConfig, public fileFormatService: FileFormatService, public messageService: MessageService, public cdr: ChangeDetectorRef) { }
-
-  /**
-   * Open the file explorer.
-   * @param {*} event - The triggering event.
-   * @param {() => void} callback - A callback function to execute.
-   * @returns {void} - No return value.
-   */
-  choose(event: any, callback: () => void) {
-    callback();
-  }
-
-  /**
-   * Prepares the files for upload by creating a FormData object.
-   * This method appends each file to the FormData for submission.
-   * @param {File} file - The file to upload.
-   * @returns {void}
-   */
-  handleTemplatedUpload(file: File) {
-    this.documentUpload.getUploadFileData(file, this.contextId)
-    const formattedSize = this.fileFormatService.formatFileSize(file.size, this.config);
-    const progress = 100;
-    this.uploadedFiles.push({ file, formattedSize, progress });
-    this.fileProgress.set(file, progress);
-    this.totalSizePercent = 100;
-  }
-
-  /**
-   * Handle the creation of formdata.
-   * @param {File} file  - The file to append in formdata.
-   * @returns {*} - The formdata object.
-   */
-  handleCreateFormData(file: File) {
-    const formData = new FormData();
-    formData.append(SHARED.FILE, file, file.name);
-    formData.append(SHARED.CONTEXT_ID, this.contextId)
-    return formData;
-  }
-  /**
-   * Handles the event when new files are selected.
-   * @param { { currentFiles: File[] } } event - The event containing the newly selected files.
-   * @returns {void} - No return value.
-   */
-  onSelectedFiles(event: { currentFiles: File[] }): void {
-    event.currentFiles.forEach((file: File) => {
-      this.handleTemplatedUpload(file);
-    });
-    this.fileUploader.clear();
-  }
-
-  /**
-   * Formats the given file size in bytes into a readable format (e.g., KB, MB).
-   * @param {number} bytes - The size of the file in bytes.
-   * @returns {string} The formatted file size (e.g., '1.2 KB', '2.3 MB').
-   */
-  formatSize(bytes: number) {
-    this.fileSize = this.fileFormatService.formatFileSize(bytes, this.config)
-  }
-
-  /**
-   * Handles the removal of a file from the uploaded files list.
-   * @param {File} file - The file to be removed.
-   * @param {number} index - The index of the file in the uploaded files list.
-   */
-  handleDocumentRemove(file: File, index: number): void {
-    this.uploadedFiles.splice(index, 1);
-    this.fileProgress.delete(file);
-    this.cdr.detectChanges();
-  }
-
-  /**
-   * Major progress for the progress bar.
-   * @param {File} file - File to check progress for.
-   * @returns {number} - The progress percentage for the file.
-   */
-  getProgress(file: File): number {
-    return this.fileProgress.get(file) || SHARED.INITIAL_COUNT;
-  }
-
-  /**
-   * Triggers the file upload dialog.
-   * Opens the file explorer for selecting files.
-   * @returns {void}
-   */
-  triggerFileUpload() {
-    this.fileUploader.choose();
-  }
-
-}
-

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

@@ -1,98 +0,0 @@
-<div class="grid">
-  <div class="col-12">
-    <div class="p-fluid p-formgrid grid m-0">
-      <div class="col-12 md:col-12 md:flex justify-content-evenly">
-        @if(selectedDocument){
-        <div id="outerContainer col-12 md:col-7">
-          <div
-           *ngIf="isImage(selectedDocument?.contentType)"
-            class="img-container"
-          >
-            <img
-              [src]="selectedDocument?.documentUrl || ''"
-              class="uploadedImages"
-              alt="Document Image"
-            />
-          </div>
-          @if(selectedDocument?.contentType && selectedDocument?.contentType === "application/pdf"){
-          <div class="pdf-container">
-            <pdf-viewer
-              [src]="selectedDocument?.documentUrl || ''"
-              [rotation]="0"
-              [original-size]="false"
-              [show-all]="true"
-              [fit-to-page]="false"
-              [zoom]="1"
-              [zoom-scale]="'page-width'"
-              [stick-to-page]="false"
-              [render-text]="true"
-              [external-link-target]="'blank'"
-              [autoresize]="true"
-              [show-borders]="false"
-              style="width: 50vw; height: 75vh"
-            ></pdf-viewer>
-          </div>
-          }@else{
-            <div class="incorrect-docType">
-              ContentType is incorrect.
-            </div>
-          }
-        </div>
-        }
-
-        <div class="left-part col-12 md:col-3 pt-0">
-          <div class="alerts mb-4 pb-1">
-            <button
-              type="button"
-              *ngIf="
-                (alertData?.status !== 'Pending' && !!alertData?.status) ||
-                alertData?.isAlert === false
-              "
-              class="bg-green-500 border-none border-round-md flex align-items-center mb-3 p-2 px-3"
-            >
-              <i
-                class="pi pi-verified mr-2 cursor-pointer"
-                [ngStyle]="{
-                  color:
-                    alertData?.status === 'Pending' &&
-                    alertData?.isAlert !== false
-                      ? '#FFFFFF'
-                      : '#8A8EA6'
-                }"
-                style="font-size: 20px"
-              ></i>
-              <span class="font-semibold text-white">Verified</span>
-            </button>
-            <div
-              class="card mb-0"
-              [ngClass]="
-                (alertData?.status === 'Pending' || !alertData?.status) &&
-                alertData?.isAlert !== false
-                  ? 'alert-card'
-                  : 'success-alert'
-              "
-            >
-              <div class="flex align-items-center mb-2 pb-1" *ngIf="alertData?.status !== 'Verified'">
-                <h4 class="mr-3 mt-0 mb-0 text-color font-bold" style="font-size: 21px; font-weight: bold; border-color: rgba(68, 72, 109, 0.2) ;" >Alerts</h4>
-                <i
-                  class="pi pi-exclamation-triangle"
-                  style="font-size: 20px"
-                  [ngStyle]="{
-                    color:
-                      (alertData?.status === 'Pending' || !alertData?.status) &&
-                      alertData?.isAlert !== false
-                        ? '#FB392D'
-                        : '#8A8EA6'
-                  }"
-                ></i>
-              </div>
-              <p class="text-color mb-0">{{ alertData?.alertMessage }}</p>
-            </div>
-          </div>
-        <ng-content></ng-content>
-        <app-linked-document (selectedDocumentChange)="handleSelectedDocument($event)" [selectedDocument]="selectedDocument" [documentList]="documentList"></app-linked-document>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>