cat-documents-ng 1.0.2 → 1.0.4

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

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

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

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

@@ -1,46 +0,0 @@
-<div class="card folder-info my-4">
-  <div class="text-900 text-xl font-semibold mb-3">Folders</div>
-  <div class="grid">
-    <div *ngFor="let folder of folderBlocks" class="col-12 md:col-6 xl:col-3">
-      <div
-        class="p-3 border-1 h-full surface-border flex flex-column justify-content-between surface-100 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.fileCount }} Files </span>
-          <span class="text-900 text-lg mt-2 mb-2 font-semibold font-medium">
-            {{ folder.text }}
-          </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/projects/cat-document-lib/src/lib/document/components/folder-container/folder-container.component.html

@@ -1,2 +0,0 @@
-
-<lib-folder-block [folderBlocks]="folderBlocks"></lib-folder-block>

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

@@ -1,29 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { FOLDERPANEL } from '../../../../Shared/constant/SHARED';
-import { DocumentModel } from '../../models/document.model';
-
-/**
- * The `FolderContainerComponent` is responsible for rendering a container 
- * that displays a list of documents and associated folder panel data.
- *
- * This component utilizes the `FOLDERPANEL` constant for folder panel data
- * and accepts a document list input of type `DocumentModel`.
- */
-@Component({
-  selector: 'lib-folder-container',
-  standalone: false,
-  templateUrl: './folder-container.component.html',
-  styleUrl: './folder-container.component.scss'
-})
-export class FolderContainerComponent {
-  /**
-   * A list of documents passed as input to the component.
-   * Represents the document data to be displayed in the folder container.
-   */
-  @Input() documentList?: DocumentModel[];
-
-  /**
-   * Folder blocks data, sourced from the `SHARED` constants.
-   */
-  folderBlocks = FOLDERPANEL;
-}