cat-documents-ng 0.1.28 → 0.1.30

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

@@ -0,0 +1,96 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DocumentListComponent } from './document-list.component';
+import { DocumentUploadService } from '../../services/document-upload.service';
+import { DocumentHttpService } from '../../services/document-http.service';
+import { of } from 'rxjs';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { DocumentTypeModel } from '../../models/document-type.model';
+import { DocumentModel } from '../../models/document.model';
+import { SHARED } from '../../../../Shared/constant/SHARED';
+
+describe('DocumentListComponent', () => {
+  let component: DocumentListComponent;
+  let fixture: ComponentFixture<DocumentListComponent>;
+  let documentUploadService: jasmine.SpyObj<DocumentUploadService>;
+  let documentHttpService: jasmine.SpyObj<DocumentHttpService>;
+
+  beforeEach(async () => {
+    // Mock services
+    documentUploadService = jasmine.createSpyObj('DocumentUploadService', [
+      'getDocumentNameAndType',
+      'handleTemplatedUpload'
+    ]);
+    documentHttpService = jasmine.createSpyObj('DocumentHttpService', ['getDocumentTypes', 'updateDocumentName']);
+
+    // Mock `getDocumentTypes` to return valid `DocumentTypeModel` objects
+    documentHttpService.getDocumentTypes.and.returnValue(
+      of([
+          { _id: 1, label: 'Type 1', matchRules: [], name: 'Type 1', parentDocumentTypeId: null },
+          { _id: 2, label: 'Type 2', matchRules: [], name: 'Type 2', parentDocumentTypeId: null }
+        ] as unknown as DocumentTypeModel[])
+    );
+
+    await TestBed.configureTestingModule({
+      declarations: [DocumentListComponent],
+      providers: [
+        { provide: DocumentUploadService, useValue: documentUploadService },
+        { provide: DocumentHttpService, useValue: documentHttpService }
+      ],
+      schemas: [NO_ERRORS_SCHEMA] // To suppress schema-related errors
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DocumentListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges(); // Trigger lifecycle hooks and initial data binding
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should fetch document types on initialization', () => {
+    expect(component.options).toEqual([
+      { label: 'Type 1', value: 1 },
+      { label: 'Type 2', value: 2 }
+    ]);
+  });
+
+  it('should handle file upload click', () => {
+    const event = new MouseEvent('click');
+    spyOn(event, 'stopPropagation');
+    component.handleFileUploadClick(event);
+    expect(event.stopPropagation).toHaveBeenCalled();
+    expect(component.isSidebarVisible).toBeTrue();
+  });
+
+  it('should handle document click and open dialog', () => {
+    const mockDocument = { _id: "1", documentUrl: 'http://example.com/doc.pdf' } as DocumentModel;
+
+    component.handleClickForDocument(mockDocument);
+    expect(component.isdialogVisible).toBeTrue();
+    expect(component.selectedDocument).toBe(mockDocument);
+  });
+
+  it('should handle dialog close and reset selected document', () => {
+    component.selectedDocument = { _id: "1" };
+    component.handleCloseModal();
+    expect(component.selectedDocument).toEqual({ _id: "" });
+
+
+    expect(component.isdialogVisible).toBeFalse();
+  });
+
+  it('should update document name on handleSaveClick', () => {
+    component.fileName = 'New Document';
+    component.selectedDocument = { _id: '1' } as DocumentModel;
+  
+    spyOn(console, 'log');
+  
+    documentHttpService.updateDocumentName.and.returnValue(of({} as DocumentModel));
+  
+    component.handleSaveClick();
+    expect(documentHttpService.updateDocumentName).toHaveBeenCalledWith('1', { fileName: 'New Document' });
+    expect(console.log).toHaveBeenCalledWith(`${SHARED.UPDATE_DOCUMENT_NAME} 1`);
+  });
+  
+});

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

@@ -0,0 +1,244 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { DocumentModel } from '../../models/document.model';
+import { SHARED } from '../../../../Shared/constant/SHARED';
+import { ERRORS } from '../../../../Shared/constant/ERROR';
+import { DocumentHttpService } from '../../services/document-http.service';
+import { DocumentTypeModel } from '../../models/document-type.model';
+import { DocumentUploadService } from '../../services/document-upload.service';
+import { Message } from 'primeng/api';
+import { DocumentQuery } from '../../state/document.query';
+import { DocumentStore } from '../../state/document.store';
+import { PERMISSIONS } from '../../../../Shared/constant/PERMISSIONS';
+
+/**
+ * This component is responsible for displaying and managing a list of documents.
+ * Provides functionality for file upload, document selection, and dialog management.
+ * @class DocumentListComponent
+ */
+@Component({
+  selector: 'lib-document-list',
+  standalone: false,
+  templateUrl: './document-list.component.html',
+  styleUrls: ['./document-list.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class DocumentListComponent implements OnInit{
+
+  @Output() onRefresh = new EventEmitter();
+  /**
+   * Represents the context ID for the document list.
+   * This value is passed from the parent component.
+   * @type {string}
+   * @memberof DocumentListComponent
+   */
+  @Input() contextId: string = SHARED.EMPTY;
+  
+  /**
+   * Default visibility of the upload button.
+   * @type {boolean}
+   * @memberof DocumentListComponent
+   */
+  @Input() isUploadButtonVisible:boolean = SHARED.TRUE;
+
+  /**
+   * The currently selected document.
+   * @type {DocumentModel}
+   * @memberof DocumentListComponent
+   */
+  selectedDocument!: DocumentModel;
+
+  /**
+   * Default visibility of the sidebar.
+   * @type {boolean}
+   * @memberof DocumentListComponent
+   */
+  isSidebarVisible: boolean = SHARED.FALSE;
+
+  /**
+   * Default visibility of the Accordion.
+   * @type {boolean}
+   * @memberof DocumentListComponent
+   */
+  @Input() isCollapsed: boolean = SHARED.FALSE;
+
+  /**
+   * Default visibility of the messages.
+   * @type {Message[]}
+   * @memberof DocumentListComponent
+   */
+    messages: Message[] = SHARED.EMPTY_ARRAY;
+
+  /**
+   * Default visibility of the dialog.
+   * @type {boolean}
+   * @memberof DocumentListComponent
+   */
+  isdialogVisible: boolean = SHARED.FALSE;
+
+  /**
+   * The list of documents to display.
+   * This value is passed from the parent component.
+   * @type {DocumentModel[]}
+   * @memberof DocumentListComponent
+   */
+  @Input() documentList: DocumentModel[] = SHARED.EMPTY_ARRAY;
+
+  /**
+   * The name of the document being uploaded or managed.
+   * @type {string}
+   * @memberof DocumentListComponent
+   */
+  documentName: string = SHARED.EMPTY;
+
+  /**
+   * Available document types for selection.
+   * @type {string[]}
+   * @memberof DocumentListComponent
+   */
+  options : any[] = SHARED.EMPTY_ARRAY;
+
+  /**
+   * The selected option for the document type.
+   * @type {(string | null)}
+   * @memberof DocumentListComponent
+   */
+  selectedOption: string | null = null;
+
+  /**
+   * The set of permissions available for this component.
+   */
+  PERMISSION = PERMISSIONS;
+  /**
+   * The file name associated with the document.
+   * It may be undefined until a file is selected or loaded.
+   * @type {string | undefined}
+   */
+  fileName!: string | undefined;
+  /**
+   * Creates an instance of DocumentListComponent.
+   * @class
+   * @param {DocumentUploadService} documentUploadService - The service responsible for uploading documents.
+   * @param {DocumentHttpService} documentHttpService - The service responsible for fetching documents from the server.
+   * @param {DocumentQuery} documentQuery - The service responsible for geting stored documents.
+   * @param {DocumentStore} documentStore - The service responsible for storing documents.
+   */
+  constructor(public documentUploadService : DocumentUploadService ,public documentHttpService : DocumentHttpService, public documentQuery : DocumentQuery, public documentStore : DocumentStore) {
+    
+   }
+
+  /** 
+   * Initializes the component by fetching the document type list.
+   */
+  ngOnInit(): void {
+      this.getDocumentTypeList();
+  }
+
+  /**
+   * Handles the click event for file upload.
+   * Prevents event propagation and displays the sidebar.
+   * @param {MouseEvent} event - The click event triggered by the user.
+   * @memberof DocumentListComponent
+   */
+  handleFileUploadClick(event: MouseEvent): void {
+    event.stopPropagation();
+    this.documentStore.setMessage(SHARED.EMPTY_ARRAY)
+    this.isSidebarVisible = SHARED.TRUE;
+  }
+
+  /**
+   * Handles the selection of an individual document.
+   * Opens a dialog to display or manage the selected document.
+   * @param {DocumentModel} document - The document that was clicked by the user.
+   * @memberof DocumentListComponent
+   */
+  handleClickForDocument(document: DocumentModel): void {
+    this.isdialogVisible = SHARED.TRUE;
+    this.selectedDocument = document;
+    this.fileName = document.fileName;
+  }
+
+  /**
+   * Handles the save click event to update the document's file name.
+   * This method creates a payload with the updated file name and calls the
+   * updateDocumentName() method from the documentHttpService. On a successful update,
+   * it logs a message with the document's ID.
+   * @returns {void}
+   */
+  handleSaveClick() {
+    const payload = { fileName: this.fileName };
+    this.documentHttpService.updateDocumentName(this.selectedDocument._id, payload)
+    .subscribe((res) => {
+      console.log(`${SHARED.UPDATE_DOCUMENT_NAME} ${this.selectedDocument._id}`);
+    })
+  }
+  /**
+   * Closes the dialog and resets the selected document.
+   * @memberof DocumentListComponent
+   */
+  handleCloseModal(): void {
+    this.selectedDocument = { _id: SHARED.EMPTY };
+    this.isdialogVisible = SHARED.FALSE;
+    this.onRefresh.emit();
+  }
+
+  /**
+   * Handles the upload action for a document.
+   * Validates if a document type is selected and logs the result.
+   * @memberof DocumentListComponent
+   */
+  handleUploadDocument(): void {
+    if (this.selectedOption) {
+      this.documentUploadService.getDocumentNameAndType(this.selectedOption);
+      this.documentUploadService.handleTemplatedUpload();
+      this.documentQuery.selectMessages().subscribe((message:Message[])=>{
+       if(message.length > 0){
+         this.messages = message;
+         this.onRefresh.emit();
+         this.selectedOption = null;
+         setTimeout(() => {
+          this.messages = SHARED.EMPTY_ARRAY
+           this.handleOpenSideBar(false);
+          }, 1000);
+        }
+      })
+    } else {
+      console.error(ERRORS.INVALID_RECIPIENT);
+    }
+  }
+
+  /** 
+   * Fetches the list of document types from the server.
+   * Updates the options array with the available document types.
+   * @memberof DocumentListComponent
+   * @returns {void}
+   */
+  getDocumentTypeList() {
+    this.documentHttpService.getDocumentTypes().subscribe({
+      /**
+       * Handles the successful API response.
+       * @param {DocumentTypeModel[]} documentTypes - The list of document types returned by the API.
+       */
+      next: (documentTypes: DocumentTypeModel[]) => {
+        if (documentTypes) {
+          this.options = documentTypes.map((doc) => ({
+            label: doc.label,
+            value: doc._id
+          }));
+        } else {
+          console.error(ERRORS.ERROR_ALLDOCUMENT_MISSING, documentTypes);
+        }
+      },
+      /**
+       * Handles errors if the request fails.
+       * @param {any} err - The error object returned by the server.
+       */
+      error: (err: any) => {
+        console.error(ERRORS.ERROR_DOCUMENT_TYPES, err);
+      }
+    });
+  }
+  
+  handleOpenSideBar(isVisible : boolean){
+    this.isSidebarVisible = isVisible
+  }
+}

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

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

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

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

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

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

@@ -0,0 +1,32 @@
+.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;
+  }
+}