cat-documents-ng 0.0.11 → 0.0.13

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();
-  }
-
-}
-

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

@@ -1,244 +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-between">
-        <div class="action col-12 p-0 md:col-2 no-grow-no-shrink">
-          <p-listbox
-            [options]="countries"
-            [filter]="true"
-            [(ngModel)]="selectedCountry"
-            optionLabel="name"
-            [style]="{ width: '15rem' }"
-            [listStyle]="{ 'max-height': '250px' }"
-          >
-            <ng-template let-country pTemplate="item">
-              <div class="flex align-items-center gap-2">
-                <p-checkbox
-                  [(ngModel)]="country.checked"
-                  [binary]="true"
-                  [inputId]="country.code"
-                ></p-checkbox>
-                <div>{{ country.name }}</div>
-              </div>
-            </ng-template>
-          </p-listbox>
-        </div>
-        @if(selectedDocument){
-
-        <div id="outerContainer col-12 md:col-7">
-          <div
-            *ngIf="isImage(selectedDocument.contentType)"
-            class="img-container"
-          >
-            <img
-              [src]="selectedDocument.documentUrl"
-              width="500"
-              height="500"
-              alt="Document Image"
-            />
-          </div>
-          @if(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: 55vw; height: 100vh"
-            ></pdf-viewer>
-          </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" >
-                <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>
-          <div class="summery mb-4 pb-1">
-            <div class="card p-0 mb-0" style="border-bottom: 1px solid;border-color: rgba(68, 72, 109, 0.2); border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;">
-              <div class="p-0" >
-                <h4 class="m-0 pt-3 pl-3 mb-3" style="font-size: 21px; font-weight: bold; ">Summary</h4>
-              </div>
-            </div>
-            <div class="card mb-0" style="border-top-right-radius: 0px;border-top-left-radius: 0px;" >
-              <p-timeline [value]="events">
-                <ng-template pTemplate="content" let-event>
-                  {{ event.status }}
-                </ng-template>
-              </p-timeline>
-            </div>
-          </div>
-          <div *ngIf="propertyDetails" class="property-details mb-4 pb-1">
-            <div class="card mb-0">
-              <h4 class="bold" style="font-size: 21px; font-weight: bold;">Property Details</h4>
-              <hr />
-              <div class="grid">
-                <div class="col-12 md:col-12">
-                  <div class="feild flex">
-                    <div class="col-12 flex md:col-7">
-                      <div class="img mr-2">
-                        <img
-                          src="../../../../assets/icons/building-icon.png"
-                          alt=""
-                        />
-                      </div>
-                      <div class="title">
-                        <div class="title font-bold" style="font-size: 21px; font-weight: bold;">Detached House</div>
-                        <div class="decription">
-                          {{ propertyDetails?.PropertyType }}
-                        </div>
-                      </div>
-                    </div>
-                    <div class="col-12 flex md:col-5">
-                      <div class="img mr-2">
-                        <img
-                          src="../../../../assets/icons/building-icon.png"
-                          alt=""
-                        />
-                      </div>
-                      <div class="title">
-                        <div class="title font-bold">
-                          {{ propertyDetails?.Floors }}
-                        </div>
-                        <div class="decription" style="font-size: 21px; font-weight: bold;">Floors</div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="feild flex">
-                    <div class="col-12 flex md:col-7">
-                      <div class="img mr-2">
-                        <img
-                          src="../../../../assets/icons/badroom.png"
-                          alt=""
-                        />
-                      </div>
-                      <div class="title">
-                        <div class="title font-bold">
-                          {{ propertyDetails?.Bedrooms }}
-                        </div>
-                        <div class="decription" style="font-size: 21px; font-weight: bold;">Bedrooms</div>
-                      </div>
-                    </div>
-                    <div class="col-12 flex md:col-5">
-                      <div class="img mr-2">
-                        <img
-                          src="../../../../assets/icons/building-icon.png"
-                          alt=""
-                        />
-                      </div>
-                      <div class="title">
-                        <div class="title font-bold">
-                          {{ propertyDetails?.Kitchen }}
-                        </div>
-                        <div class="decription" style="font-size: 21px; font-weight: bold;">Kitchen</div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-12 flex ml-2 md:col-12">
-                  <div class="img mr-2">
-                    <img src="../../../../assets/icons/location.png" alt="" />
-                  </div>
-                  <div class="title">
-                    <div class="title font-bold">
-                      {{ propertyDetails?.Address }}
-                    </div>
-                    <div class="decription" style="font-size: 21px; font-weight: bold;">Address</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="notes card pl-0 pr-0 pt-0">
-            <div class="card p-0" style="border-bottom: 1px solid;border-color: rgba(68, 72, 109, 0.2); border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;">
-              <div class="p-0" >
-                <h4 class="m-0 pt-3 pl-3 mb-3" style="font-size: 21px; font-weight: bold; ">Notes</h4>
-              </div>
-            </div>
-            <div class="card mb-0 pt-0">
-              <div class="textAreaControl mt-3">
-                <textarea
-                  rows="5"
-                  cols="30"
-                  pInputTextarea
-                  #textArea
-                  [(ngModel)]="notes"
-                >
-                </textarea>
-              </div>
-              <div class="buttons document-btn-wrapper flex mt-2">
-                <button
-                  pButton
-                  pRipple
-                  type="button"
-                  label="Resubmission"
-                  class="p-button-outlined mr-2"
-                ></button>
-                <button
-                  pButton
-                  pRipple
-                  type="button"
-                  label="Accept"
-                ></button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

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

@@ -1,36 +0,0 @@
-.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-header{
-    background-color:#ececf9;
-  }
-  .p-dialog-content{
-    background-color:#ececf9;
-  }
-}

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

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