cat-documents-ng 1.0.2 → 1.0.4

package/projects/cat-document-lib/src/lib/document/components/document-list/document-list.component.html

@@ -1,35 +0,0 @@
-<div class="document-viewer">
-  <p-dialog [(visible)]="isdialogVisible" [modal]="true" (onHide)="handleCloseModel()" [style]="{ width: '100vw' }"
-    [draggable]="false" [closable]="true">
-    <document-viewer [selectedDocument]="selectedDocument"></document-viewer>
-  </p-dialog>
-</div>
-
-<div class="col-12 p-0">
-  <div class="card p-0 document-list-wrapper">
-    <p-accordion>
-      <p-accordionTab [selected]="true" class="line-height-2 m-0">
-        <ng-template pTemplate="header" let-active="active">
-          <div class="flex  align-items-center justify-content-between w-full">
-            <span class="flex align-items-center  gap-2">
-              Documents
-            </span>
-            <button pButton pRipple class="p-button-raised" type="button" label="Upload File"
-              style="border-radius: 10px;" (click)="handleFileUploadClick($event)"></button>
-          </div>
-        </ng-template>
-        @for(document of documentList; track document){
-        <lib-document-list-item [document]="document"
-          (documentClick)="handleClickForDocument($event)"></lib-document-list-item>
-        }
-      </p-accordionTab>
-    </p-accordion>
-  </div>
-</div>
-<div class="grid">
-  <div class="col-12">
-    <p-sidebar [(visible)]="isSidebarVisible" position="right" [styleClass]="'right-sidebar'">
-      <lib-document-upload [contextId]="contextId"></lib-document-upload>
-    </p-sidebar>
-  </div>
-</div>

package/projects/cat-document-lib/src/lib/document/components/document-list/document-list.component.scss

@@ -1,12 +0,0 @@
-.document-list-wrapper{
-    .p-accordion-header-link {
-        padding: 0.5rem;
-    }
-    .p-sidebar-right{
-        width: 35%;
-    }
-}
-
-.right-sidebar{
-    width: 35%;
-}

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

@@ -1,73 +0,0 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
-import { DocumentModel } from '../../models/document.model';
-import { SHARED } from '../../../../Shared/constant/SHARED';
-
-
-/**
- * This component is responsible for displaying a list of documents.
- * @class DocumentListComponent
- * @typedef {DocumentListComponent}
- */
-@Component({
-  selector: 'lib-document-list',
-  standalone: false,
-  templateUrl: './document-list.component.html',
-  styleUrls: ['./document-list.component.scss'],
-  encapsulation: ViewEncapsulation.None
-})
-export class DocumentListComponent {
-
-  /**
-   * Represent contextId
-   * @type {string}
-   */
-  @Input() contextId : string = SHARED.EMPTY
-
-  selectedDocument !: DocumentModel
-  /**
-   * Default visbility of sidebar
-   * @type {boolean}
-   */
-  isSidebarVisible: boolean = SHARED.FALSE
-
-  /**
-   * Default visbility of dialog
-   * @type {boolean}
-   */
-  isdialogVisible: boolean = SHARED.FALSE
-
-  /**
-   * The list of documents to display.
-   * @type {DocumentModel[]}
-   */
-  @Input() documentList: DocumentModel[] = [];
-
-
-  /**
-   * Handles the click event for file upload.
-   * Prevents event propagation and displays the sidebar.
-   * @param {MouseEvent} event - The click event triggered by the user.
-   */
-  handleFileUploadClick(event: MouseEvent): void {
-    event.stopPropagation();
-    this.isSidebarVisible = SHARED.TRUE;
-  }
-
- 
-  /**
-   * Select a individual document.
-   * @param {*} docuemnt - The document that was clicked by the user.
-   */
-  handleClickForDocument(docuemnt: DocumentModel) {
-    this.isdialogVisible = SHARED.TRUE
-    this.selectedDocument = docuemnt
-  }
-
-  /** 
-   * Close dialog.
-   */
-  handleCloseModel(){
-    this.selectedDocument = {_id : SHARED.INITIAL_VALUE};
-    this.isdialogVisible = SHARED.FALSE
-  }
-}

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

@@ -1,33 +0,0 @@
-<div class="grid">
-    <div
-      class="col-12 flex align-items-center justify-content-between md:col-6 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">{{ 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() === 'sentreminder'">
-            <i class="pi pi-bell pr-1" style="font-size: 12px;"></i>
-            Sent Reminder 
-          </ng-container>
-        </span>
-      </div>
-    </div>
-  </div>
-  

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

@@ -1,22 +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-sentreminder {
-    background: #f57c00;
-    color: #ffffff;
-    border-radius: 4px;
-  }
-  .product-badge {
-    text-transform: none;
-    font-weight: 500;
-    font-size: 12px;
-
-  }
-  

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

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DocumentListItemComponent } from './document-list-item.component';
-
-describe('DocumentListItemComponent', () => {
-  let component: DocumentListItemComponent;
-  let fixture: ComponentFixture<DocumentListItemComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [DocumentListItemComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(DocumentListItemComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/projects/cat-document-lib/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/projects/cat-document-lib/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="1000000"
-      (onSelect)="onSelectedFiles($event)">
-      <ng-template pTemplate="header" let-chooseCallback="chooseCallback" let-clearCallback="clearCallback">
-        <div class="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 file 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]="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">
-                      {{ file.fileName }}
-                    </div>
-                    <i class="pi pi-times cursor-pointer" (click)="handleDocumentRemove(file,i)"></i>
-                  </div>
-                  <div class="flex justify-content-between mt-1">
-                    <div style="color: #676B89; font-size: 12px;"></div>
-                    <div class="white-space-nowrap" style="color: #0F8BFD; font-family: 14px;">{{ getProgress(file) }} %
-                    </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/projects/cat-document-lib/src/lib/document/components/document-upload/document-upload.component.scss

@@ -1,26 +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;
-  }
-}

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

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DocumentUploadComponent } from './document-upload.component';
-
-describe('DocumentUploadComponent', () => {
-  let component: DocumentUploadComponent;
-  let fixture: ComponentFixture<DocumentUploadComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [DocumentUploadComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(DocumentUploadComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-});

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

@@ -1,184 +0,0 @@
-import { ChangeDetectorRef, Component, EventEmitter, Input, input, Output, 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';
-
-/**
- * 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 {
-
-  /**
-   * Represent contextId
-   * @type {string}
-   */
-  @Input() contextId: string = SHARED.EMPTY
-
-  /**
-   * Provide id of file after upload.
-   * @type {*}
-   */
-  @Output() onInput = new EventEmitter();
-
-  /**
-   * 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: any[] = [];
-
-  /**
-   * 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 {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 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) {
-    let formData = this.handleCreateFormData(file)
-    this.uploadService.create(formData)
-      .subscribe({
-        /**
-         * Handles the successful upload event.
-         * Updates the list of uploaded files and emits the file ID.
-         * @param {any} event - The event emitted by the upload service on success.
-         */
-        next: (event) => {
-          this.uploadedFiles.push(event);
-          this.fileProgress.set(event, 100);
-          this.onInput.emit(event._id)
-          this.totalSizePercent = 100;
-        },
-        /**
-         * Handles the error event during file upload.
-         * Updates the progress of the file to indicate failure.
-         * @param {any} error - The error object returned by the upload service.
-         */
-        error: (error) => {
-          this.fileProgress.set(file, SHARED.INITIAL_COUNT);
-          this.messageService.add({
-            severity: SHARED.SEVERITY,
-            summary: SHARED.UPLOAD_SUMMERY,
-            detail: error?.message,
-          });
-        },
-      });
-  }
-
-
-  /**
-   * Handle the creation of formdata.
-   * @param {File} file  - The file to append in formdata.
-   * @returns {*}
-   */
-  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}
-  */
-  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): string {
-    return 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();
-  }
-
-}
-