cat-documents-ng 1.0.0 → 1.0.1

package/angular.json

@@ -28,8 +28,8 @@
               "src/assets",
               {
                 "glob": "**/*",
-                "input": "projects/cat-document-lib/src/assets",
-                "output": "assets/cat-document-lib"
+                "input": "dist/cat-document-lib/src/assets",
+                "output": "assets"
               }
             ],
             "styles": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cat-documents-ng",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -23,6 +23,8 @@
     "@angular/router": "^19.0.0",
     "@datorama/akita": "^8.0.1",
     "jsdocs": "^1.0.0",
+    "moment": "^2.30.1",
+    "ng2-pdf-viewer": "^9.1.5",
     "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
     "primeng": "^17.18.10",

package/projects/cat-document-lib/ng-package.json

@@ -5,8 +5,7 @@
     "entryFile": "src/public-api.ts"
   },
  "assets": [
-  "src/assets",
-  "src/favicon.ico"
-]
+ "src/assets"
+  ]
 
 }

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

@@ -1 +1,6 @@
-<p>document-container works!</p>
+<div class="grid m-0">
+    <div class="col-12 md:col-12 lg:col-12 overflow-y-scroll py-0 pl-0" >
+      <lib-folder-container [documentList]="documentList"></lib-folder-container>
+      <lib-document-list [documentList]="documentList"></lib-document-list>
+    </div>
+</div>

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

@@ -1,14 +1,82 @@
-// import { Component } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { SHARED } from '../../../../Shared/constant/SHARED';
+import { DocumentService } from '../../state/document.service';
+import { DocumentModel } from '../../models/document.model';
+import { URLS } from '../../../../Shared/constant/URLS';
+import { Subscription } from 'rxjs';
+
 
 /**
- *
+ *This component is responsible for managing and displaying a list of documents.
+ * @class DocumentContainerComponent
+ * @typedef {DocumentContainerComponent}
  */
-// @Component({
-//   selector: 'lib-document-container',
-//   standalone: false,
-//   templateUrl: './document-container.component.html',
-//   styleUrl: './document-container.component.scss'
-// })
-// export class DocumentContainerComponent {
-
-// }
+@Component({
+  selector: 'lib-document-container',
+  standalone: false,
+  templateUrl: './document-container.component.html',
+  styleUrl: './document-container.component.scss'
+})
+export class DocumentContainerComponent implements OnInit{
+
+  /**
+   * Creates an instance of DocumentContainerComponent.
+   * @class
+   * @param {DocumentService} documentService - Service to manage document-related operations.
+   */
+  constructor(public documentService : DocumentService){
+
+  }
+  /**
+   * Get contextId in input.
+   * @type {number}
+   */
+  @Input() contextId : number = SHARED.INITIAL_VALUE;
+  /**
+   * The list of dummy documents.
+   * @type {Array}
+   */
+  documentList : DocumentModel[] = []
+
+  /**
+   * Holds the subscription to manage observable cleanup.
+   * @private
+   * @type {Subscription}
+   */
+  private subscription: Subscription = new Subscription();
+
+  /** 
+   * Call document service method to get the document by contextId.
+   */
+  ngOnInit(): void {
+    const documentSubscription = this.documentService
+      .getById(`${URLS.CONTEXT}${this.contextId}`)
+      .subscribe({
+        /**
+         * Handles the successful API response.
+         * @param {DocumentModel[]} res - The list of documents returned by the API.
+         */
+        next: (res: DocumentModel[]) => {
+          if (res) {
+            this.documentList = res;
+          }
+        },
+        /**
+         * Handles errors that occur during the API call.
+         * Logs the error to the console.
+         * @param {any} err - The error object returned from the API.
+         */
+        error: (err) => {
+          throw new Error(err)
+        }
+      });
+    this.subscription.add(documentSubscription);
+  }
+
+  /** 
+   * Unsubscribe subscription on destroy of component .
+   */
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+}

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

@@ -1 +1,35 @@
-<p>document-list works!</p>
+<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></lib-document-upload>
+    </p-sidebar>
+  </div>
+</div>

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

@@ -0,0 +1,12 @@
+.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,14 +1,66 @@
-// import { Component } from '@angular/core';
+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',
-//   styleUrl: './document-list.component.scss'
-// })
-// export 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 {
+  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

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

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

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

@@ -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/projects/cat-document-lib/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="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

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

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