cat-documents-ng 0.1.28 → 0.1.30

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

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

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

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

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

@@ -0,0 +1,54 @@
+.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{
+  .p-dialog{
+    width: 100%;
+    height: 100%;
+    max-height: 100% !important;
+    box-shadow: none !important;
+  }
+  .p-dialog-header-close-icon{
+    height: 20px;
+    width: 20px;
+  }
+  .p-dialog-header{
+    background-color:#FFF;
+    border-radius: 0;
+  }
+  .p-dialog-content{
+    background-color:#FFF;
+    border-radius: 0;
+  }
+}
+
+.uploadedImages{
+  width: 95%;
+  height: 100%;
+  object-fit: contain;
+}

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,106 @@
+import {
+  Component,
+  Input,
+  OnChanges,
+  OnDestroy,
+  SimpleChanges,
+  ViewEncapsulation,
+} from '@angular/core';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
+import { DocumentAlertList, DUMMYSUMMARY, 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 { DocumentService } from '../../services/document.service';
+
+/**
+ * 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?: DocumentModel;  // <-- Made optional to prevent undefined issues
+  /**
+   * Get the selected document by user.
+   * @type {*}
+   */
+  @Input() documentList?: DocumentModel[];  // <-- Made optional to prevent undefined issues
+
+  /**
+   * 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;
+
+  /**
+   * Data used for displaying alert messages.
+   * @type {any}
+   */
+  alertData!: any;
+  
+  /**
+   * 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.
+   */
+  constructor(public documentHttpService : DocumentHttpService, private documentService: DocumentService) {}
+
+  /**
+   * Fetches the alerts for the selected document.
+   * @returns {void}
+   */
+  ngOnChanges() {
+    if (this.selectedDocument)  {
+      this.documentService.set(this.selectedDocument);
+      this.alertData = DocumentAlertList.find((res: any) => res.status === this.selectedDocument?.status);
+    }
+  }
+
+  handleSelectedDocument(document:DocumentModel){
+    this.selectedDocument = document
+    this.documentService.set(this.selectedDocument);
+  }
+
+  /**
+   * Determines if the given content type is an image.
+   * @param {string | undefined} contentType - The MIME type of the content.
+   * @returns {boolean} `true` if the content type is an image; otherwise, `false`.
+   */
+  isImage(contentType?: string): boolean {
+    return contentType ? SUPPORTED_IMAGE_TYPES.includes(contentType) : false;
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+
+}

package/src/lib/document/components/folder-block/folder-block.component.html

@@ -0,0 +1,46 @@
+<div class="card p-0 folder-info">
+  <div class="text-900 text-xl font-semibold ml-2 mb-1">Folders</div>
+  <div class="grid m-0">
+    <div *ngFor="let folder of folderList" class="col-12 md:col-6 xl:col-4 container-wrapper">
+      <div
+        class="p-3 border-1 h-full surface-border flex flex-column justify-content-between hover:surface-100 cursor-pointer border-round"
+        (click)="handleClickForFilter(folder._id)"
+      >
+        <div class="icon">
+          <img src="../../../../assets/images/FolderImg.png" alt="" />
+        </div>
+        <div class="flex flex-column">
+          <span class="text-600 mt-2"> {{ folder.documentCount }} Files </span>
+          <span class="text-900 text-lg mt-2 mb-2 font-semibold font-medium">
+            {{ folder.folderName }}
+          </span>
+        </div>
+        <hr />
+        <div class="flex justify-content-between">
+          <div class="flex flex-column">
+            <span>Missing</span>
+            <span
+              [ngClass]="{
+                'text-pink-500': missingFileCount > 0,
+                'text-green-500': missingFileCount === 0
+              }"
+            >
+              {{ missingFileCount }}
+            </span>
+          </div>
+          <div class="flex flex-column">
+            <span>Pending</span>
+            <span
+              [ngClass]="{
+                'text-yellow-500': pendingFileCount > 0,
+                'text-green-500': pendingFileCount === 0
+              }"
+            >
+              {{ pendingFileCount }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/lib/document/components/folder-block/folder-block.component.scss

@@ -0,0 +1,9 @@
+.container-wrapper{
+    &:nth-child(3n + 1) {
+        padding-left: 0;
+    }
+
+    &:nth-child(3n) {
+        padding-right: 0;
+    }
+}