cat-documents-ng 1.0.0 → 1.0.1

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

@@ -0,0 +1,175 @@
+import { ChangeDetectorRef, Component, EventEmitter, 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 {
+  /**
+   * 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[] = [];
+
+  /**
+   * Total size of the uploaded files in bytes.
+   * @type {number}
+   */
+  totalSize: number = SHARED.INITIAL_COUNT;
+
+  /**
+   * 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) {
+    const formData = new FormData();
+    formData.append(SHARED.FILE, file, file.name);
+    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)
+        },
+      /**
+       * 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,
+          });
+        },
+      });
+  }
+
+ /**
+ * Handles the event when new files are selected.
+ * Updates the uploaded files list and calculates the total file size and progress.
+ * @param { { currentFiles: File[] } } event - The event containing the newly selected files.
+ * @returns {void}
+ */
+ onSelectedFiles(event: { currentFiles: File[] }): void {
+  event.currentFiles.forEach((file: File) => {
+    this.totalSize += file.size;
+    this.handleTemplatedUpload(file);
+  });
+  this.totalSizePercent = this.totalSize / SHARED.TEN;
+  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.
+   * Resets the total size and upload progress after removing the file.
+   * @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.totalSize -= file.size;
+    this.totalSizePercent = this.totalSize / SHARED.TEN;
+    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

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

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

@@ -0,0 +1,21 @@
+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();
+  });
+});

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

@@ -0,0 +1,125 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  ViewEncapsulation,
+} from '@angular/core';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
+import { COUNTRIES, DUMMYSUMMARY, SUPPORTED_IMAGE_TYPES } from '../../../../Shared/constant/SHARED';
+/**
+ * For list box data.
+ * @interface Country
+ * @typedef {Country}
+ */
+interface Country {
+  /**
+   * For the name of the property.
+   * @type {string}
+   */
+  name: string;
+  /**
+   * For the unique code of country.
+   * @type {string}
+   */
+  code: string;
+  /**
+   * Mark check or unchecked.
+   * @type {?boolean}
+   */
+  checked?: boolean;
+}
+
+/**
+ * Component for viewing and managing document details.
+ * @class DocumentViewerComponent
+ * @typedef {DocumentViewerComponent}
+ * @implements {OnInit}
+ */
+@Component({
+  selector: 'document-viewer',
+  templateUrl: './document-viewer.component.html',
+  standalone : false,
+  styleUrl: './document-viewer.component.scss',
+  encapsulation: ViewEncapsulation.None,
+})
+export class DocumentViewerComponent implements OnInit {
+  /**
+   * Get the selected document by user.
+   * @type {*}
+   */
+  @Input() selectedDocument: any;
+  /**
+   * Handle notes data.
+   * @type {!string}
+   */
+  notes!: string;
+  /**
+   * Country data according to Country model.
+   * @type {!Country[]}
+   */
+  countries!: Country[];
+  /**
+   * Indicates whether a checkbox is selected.
+   * @type {boolean}
+   */
+  checked: boolean = false;
+
+  /**
+   * The currently selected country.
+   * @type {Country}
+   */
+  selectedCountry!: Country;
+
+  /**
+   * 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;
+
+  /**
+   * Additional property details related to the document.
+   * @type {any}
+   */
+  propertyDetails: any;
+
+  /**
+   * List of predefined events used for summaries or alerts.
+   * @type {*}
+   */
+  events = DUMMYSUMMARY;
+
+  /**
+   * Data used for displaying alert messages.
+   * @type {any}
+   */
+  alertData!: any;
+
+  /**
+   * Initializes a new instance of the DocumentViewerComponent.
+   */
+  constructor() {}
+
+  /**
+   * Lifecycle hook that is called after data-bound properties are initialized.
+   * Initializes the list of countries.
+   */
+  ngOnInit() {
+    this.countries = COUNTRIES;
+  }
+
+
+  /**
+   * Determines if the given content type is an image.
+   * @param {string} contentType - The MIME type of the content.
+   * @returns {boolean} `true` if the content type is an image; otherwise, `false`.
+   */
+  isImage(contentType: string): boolean {
+    return SUPPORTED_IMAGE_TYPES.includes(contentType);
+  }
+}