cat-documents-ng 0.0.4 → 0.0.6

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

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

@@ -0,0 +1,46 @@
+<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-4">
+      <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/{lib/document/components/folder-block/folder-block.component.d.ts → projects/cat-document-lib/src/lib/document/components/folder-block/folder-block.component.ts}

@@ -1,37 +1,51 @@
-import { DocumentStore } from '../../state/document.store';
-import { FolderBlockModel } from '../../models/folder.model';
-import * as i0 from "@angular/core";
-/**
- * The `FolderBlockComponent` is responsible for displaying a block of folders and
- * providing filtering functionality based on folder IDs.
- *
- * It uses data from the `DocumentStore` and constants from the `SHARED` configuration
- * to display missing and pending file counts.
- */
-export declare class FolderBlockComponent {
-    documentStore: DocumentStore;
-    /**
-     * Array of folder blocks data to display.
-     * Each folder is represented as a `FolderBlockModel`.
-     */
-    folderBlocks: FolderBlockModel[];
-    /** Number of missing files, sourced from the `SHARED` constants. */
-    missingFileCount: number;
-    /** Number of pending files, sourced from the `SHARED` constants. */
-    pendingFileCount: number;
-    /**
-     * Injects the `DocumentStore` service to manage and access document-related state.
-     * @param {DocumentStore} documentStore - The state management store for documents.
-     */
-    constructor(documentStore: DocumentStore);
-    /**
-     * Handles the click event for filtering based on the provided folder ID.
-     * This method validates the folder ID and returns it for further processing.
-     * If the folder ID is not provided, an empty string is returned.
-     * @param {string} folderBlockId - The unique identifier of the folder to filter by.
-     * @returns {string} The validated folder ID, or an empty string if the input is invalid.
-     */
-    handleClickForFilter(folderBlockId: string): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FolderBlockComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FolderBlockComponent, "lib-folder-block", never, { "folderBlocks": { "alias": "folderBlocks"; "required": false; }; }, {}, never, never, false, never>;
-}
+import { Component, Input } from '@angular/core';
+import { DocumentStore } from '../../state/document.store';
+import { FolderBlockModel } from '../../models/folder.model';
+import { SHARED } from '../../../../Shared/constant/SHARED';
+
+/**
+ * The `FolderBlockComponent` is responsible for displaying a block of folders and
+ * providing filtering functionality based on folder IDs.
+ *
+ * It uses data from the `DocumentStore` and constants from the `SHARED` configuration 
+ * to display missing and pending file counts.
+ */
+@Component({
+    selector: 'lib-folder-block',
+    standalone: false,
+    templateUrl: './folder-block.component.html',
+    styleUrl: './folder-block.component.scss'
+})
+export class FolderBlockComponent {
+    /**
+     * Array of folder blocks data to display.
+     * Each folder is represented as a `FolderBlockModel`.
+     */
+    @Input() folderBlocks: FolderBlockModel[] = [];
+    
+    /** Number of missing files, sourced from the `SHARED` constants. */
+    missingFileCount = SHARED.MISSINGCOUNT;
+
+    /** Number of pending files, sourced from the `SHARED` constants. */
+    pendingFileCount = SHARED.PENDINGCOUNT;
+
+    /**
+     * Injects the `DocumentStore` service to manage and access document-related state.
+     * @param {DocumentStore} documentStore - The state management store for documents.
+     */
+    constructor(public documentStore: DocumentStore) {}
+
+    /**
+     * Handles the click event for filtering based on the provided folder ID.
+     * This method validates the folder ID and returns it for further processing. 
+     * If the folder ID is not provided, an empty string is returned.
+     * @param {string} folderBlockId - The unique identifier of the folder to filter by.
+     * @returns {string} The validated folder ID, or an empty string if the input is invalid.
+     */
+    handleClickForFilter(folderBlockId: string): string {
+        if (!folderBlockId) {
+            return SHARED.EMPTY;
+        }
+        return folderBlockId;
+    }
+}

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

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

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

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

package/projects/cat-document-lib/src/lib/document/document.module.ts

@@ -0,0 +1,191 @@
+import { APP_INITIALIZER, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DocumentContainerComponent } from './components/document-container/document-container.component';
+import { FolderContainerComponent } from './components/folder-container/folder-container.component';
+import { FolderBlockComponent } from './components/folder-block/folder-block.component';
+import { DocumentListComponent } from './components/document-list/document-list.component';
+import { AccordionModule } from 'primeng/accordion';
+import { DocumentListItemComponent } from './components/document-list-item/document-list-item.component';
+import { ButtonModule } from 'primeng/button';
+import { SidebarModule } from 'primeng/sidebar';
+import { FileUploadModule } from 'primeng/fileupload';
+import { DocumentUploadComponent } from './components/document-upload/document-upload.component';
+import { MessageService } from 'primeng/api';
+import { HttpClientModule } from '@angular/common/http';
+import { ProgressBarModule } from 'primeng/progressbar';
+import { BadgeModule } from 'primeng/badge';
+import { ListboxModule } from 'primeng/listbox';
+import { TimelineModule } from 'primeng/timeline';
+import { CheckboxModule } from 'primeng/checkbox';
+import { InputTextareaModule } from 'primeng/inputtextarea';
+import { FormsModule } from '@angular/forms';
+import { DocumentViewerComponent } from './components/document-viewer/document-viewer.component';
+import { PdfViewerModule } from 'ng2-pdf-viewer';
+import { DialogModule } from 'primeng/dialog';
+import { AppConfigService } from '../../Shared/services/app-config.service';
+import { GlobalErrorHandler } from '../../Shared/services/global-error.handler';
+
+/**
+ * @module DocumentModule
+ * 
+ * The `DocumentModule` handles the organization and display of document and folder components 
+ * in the application. This module is designed to support features like folder containers, 
+ * document lists, and individual document items.
+ */
+@NgModule({
+  declarations: [
+    /**
+     * The main container for managing documents.
+     * DocumentContainerComponent
+     */
+    DocumentContainerComponent,
+
+    /**
+     * A container component to manage folders.
+     * FolderContainerComponent
+     */
+    FolderContainerComponent,
+
+    /**
+     * A block component that represents an individual folder.
+     * FolderBlockComponent
+     */
+    FolderBlockComponent,
+
+    /**
+     * A component to display a list of documents.
+     * DocumentListComponent
+     */
+    DocumentListComponent,
+
+    /**
+     * A component representing an individual item in the document list.
+     * DocumentListItemComponent
+     */
+    DocumentListItemComponent,
+
+    /** 
+     * A component representing to upload a file.
+     */
+    DocumentUploadComponent,
+
+    /**
+     * A component representing and allow you to view the document.
+     */
+    DocumentViewerComponent,
+
+  ],
+  imports: [
+    /**
+     * Angular's CommonModule is imported to access common directives like `ngIf` and `ngFor`.
+     */
+    CommonModule,
+
+    /**
+     * PrimeNG AccordionModule is used for creating collapsible sections in the UI.
+     */
+    AccordionModule,
+
+    /**
+     * HttpClienModule for the http calls
+     */
+    HttpClientModule,
+
+    /**
+     * PrimeNG ButtonModule is used for creating buttons in the UI.
+     */
+    ButtonModule,
+
+    /**
+     * PrimeNG SidebarModule is used for creating sidebar in the UI.
+     */
+    SidebarModule,
+
+    /**
+     * PrimeNG FileUploadModule is used for uploading file.
+     */
+    FileUploadModule,
+
+    /**
+     * PrimeNG ProgressBarModule is used for showing progress.
+     */
+    ProgressBarModule,
+
+    /**
+     * PrimeNG BadgeModule is used for showing badge value.
+     */
+    BadgeModule,
+
+    /**
+     * PrimeNG ListboxModule is used for showing listbox value.
+     */
+    ListboxModule,
+
+    /**
+     * PrimeNG CheckboxModule is used for showing checkbox value.
+     */
+    CheckboxModule,
+
+    /**
+     * PrimeNG TimelineModule is used for showing timeline value.
+     */
+    TimelineModule,
+    /**
+     * PrimeNG InputTextareaModule is used for showing textarea value.
+     */
+    InputTextareaModule,
+    /**
+     * FormsModule to handle the forms.
+     */
+    FormsModule,
+    /**
+     *  PdfViewerModule to handle and make visible the pdf.
+     */
+    PdfViewerModule,
+    /**
+     * PrimeNG DialogModule is used for showing dialog.
+     */
+    DialogModule
+  ],
+  exports: [
+    /**
+     * Exports the `DocumentContainerComponent` to be used in other modules.
+     */
+    DocumentContainerComponent,
+    /**
+     * Exports the `DocumentViewerComponent` to be used in other modules.
+     */
+    DocumentViewerComponent
+  ],
+  providers: [
+    /**
+     * Provide the messageservice to be used in other components.
+     */
+    MessageService,
+
+    /**
+     * Provide the messageservice to be used in other components.
+     */
+    { provide: GlobalErrorHandler, useClass: GlobalErrorHandler },
+    /**
+     * Initializes the application configuration by loading it from the AppConfigService
+     * before the application starts.
+     * This ensures that the configuration is available for the rest of the app when needed.
+     * The configuration is loaded asynchronously using the APP_INITIALIZER.
+     * @returns {Function} - A function that loads the configuration from the AppConfigService.
+     */
+    {
+      provide: APP_INITIALIZER,
+    /**
+     * This useFactory is executed when the app initializes.
+     */
+      useFactory: (configService: AppConfigService) => () =>
+        configService.loadAppConfig().catch((error) => {
+          throw new Error(error);
+        }),
+      deps: [AppConfigService],
+      multi: true,
+    }
+  ]
+})
+export class DocumentModule { }

package/projects/cat-document-lib/src/lib/document/models/document.model.ts

@@ -0,0 +1,39 @@
+import { SHARED } from "../../../Shared/constant/SHARED";
+
+/**
+ * Represents a document model.
+ * 
+ * This class contains the structure for document-related data, including file name, 
+ * status, and document URL.
+ */
+export class DocumentModel {
+  /**
+   * The unique identifier for the document.
+   * @type {number}
+   */
+  _id: number = SHARED.INITIAL_COUNT;
+
+  /**
+   * The name of the document file.
+   * @type {?string}
+   */
+  fileName?: string;
+
+  /**
+   * The current status of the document.
+   * @type {?string}
+   */
+  status?: string;
+
+  /**
+   * The URL where the document is hosted or stored.
+   * @type {?string}
+   */
+  documentUrl?: string;
+
+  /**
+   * Date of document get uploaded
+   * @type {?Date}
+   */
+  createdAt?: Date
+}

package/{lib/document/models/folder.model.d.ts → projects/cat-document-lib/src/lib/document/models/folder.model.ts}

@@ -1,29 +1,35 @@
-/**
- * Represents the model for a folder block.
- *
- * This class provides the structure for folder block data, including properties
- * for ID, file counts, descriptive text, and counts for missing and pending files.
- */
-export declare class FolderBlockModel {
-    /**
-     * Unique identifier for the folder block.
-     * Defaults to an empty string sourced from `SHARED.EMPTY`.
-     */
-    _id: string;
-    /**
-     * Total number of files within the folder block.
-     */
-    fileCount?: number;
-    /**
-     * Descriptive text associated with the folder block.
-     */
-    text?: string;
-    /**
-     * Number of files marked as missing in the folder block.
-     */
-    missingFiles?: number;
-    /**
-     * Number of files marked as pending in the folder block.
-     */
-    pendingFiles?: number;
-}
+import { SHARED } from "../../../Shared/constant/SHARED";
+
+/**
+ * Represents the model for a folder block.
+ * 
+ * This class provides the structure for folder block data, including properties 
+ * for ID, file counts, descriptive text, and counts for missing and pending files.
+ */
+export class FolderBlockModel {
+    /**
+     * Unique identifier for the folder block.
+     * Defaults to an empty string sourced from `SHARED.EMPTY`.
+     */
+    _id: string = SHARED.EMPTY;
+
+    /**
+     * Total number of files within the folder block.
+     */
+    fileCount?: number;
+
+    /**
+     * Descriptive text associated with the folder block.
+     */
+    text?: string;
+
+    /**
+     * Number of files marked as missing in the folder block.
+     */
+    missingFiles?: number;
+
+    /**
+     * Number of files marked as pending in the folder block.
+     */
+    pendingFiles?: number;
+}

package/projects/cat-document-lib/src/lib/document/services/file-format.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FileFormatService } from './file-format.service';
+
+describe('FileFormatService', () => {
+  let service: FileFormatService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(FileFormatService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});