cat-documents-ng 1.0.0

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,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DocumentContainerComponent } from './components/document-container/document-container.component';
+import { DocumentListComponent } from './components/document-list/document-list.component';
+import { FolderBlockComponent } from './components/folder-block/folder-block.component';
+import { FolderContainerComponent } from './components/folder-container/folder-container.component';
+
+
+/**
+ *
+ */
+@NgModule({
+  declarations: [
+    DocumentContainerComponent,
+    DocumentListComponent,
+    FolderBlockComponent,
+    FolderContainerComponent
+  ],
+  imports: [
+    CommonModule,
+  ],
+  exports : [DocumentContainerComponent]
+})
+export class DocumentModule { }

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

@@ -0,0 +1,3 @@
+export class DocumentModel{
+    
+}

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

@@ -0,0 +1,35 @@
+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/state/document.query.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { QueryEntity } from '@datorama/akita';
+import { DocumentStore } from './document.store';
+import { DocumentState } from './document.state';
+
+/**
+ * Service that provides querying capabilities for the `DocumentStore`.
+ * 
+ * The `DocumentQuery` class extends Akita's `QueryEntity`, allowing consumers
+ * to retrieve, observe, and filter data from the `DocumentStore` in a reactive manner.
+ * 
+ * @extends QueryEntity<DocumentState>
+ * * Creates an instance of `DocumentQuery`.
+   * 
+   * @param {DocumentStore} store - The underlying store that holds the document state.
+*/
+
+@Injectable({ providedIn: 'root' })
+export class DocumentQuery extends QueryEntity<DocumentState> {
+  constructor(protected override store: DocumentStore) {
+    super(store);
+  }
+}

package/projects/cat-document-lib/src/lib/document/state/document.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { DocumentStore } from './document.store';
+
+/**
+ * Service for managing document-related operations.
+ * 
+ * The `DocumentService` acts as a bridge between the application and the backend API for handling document-related data.
+ * It interacts with the `DocumentStore` for state management and uses `HttpClient` for making HTTP requests.
+ 
+   * Creates an instance of `DocumentService`.
+   * 
+   * @param {DocumentStore} doumentStore - The store that manages the state of documents.
+   * @param {HttpClient} http - The Angular HTTP client for making API requests.
+   */
+@Injectable({ providedIn: 'root' })
+export class DocumentService {
+
+  constructor(
+    public documentStore: DocumentStore,
+    private http: HttpClient, // Changed to private for better encapsulation
+  ) { }
+}

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

@@ -0,0 +1,39 @@
+import { EntityState } from '@datorama/akita';
+import { DocumentModel } from '../models/document.model';
+
+/**
+ * Represents the state of the documents in the application.
+ * 
+ * This interface extends Akita's `EntityState` to include additional properties
+ * for managing document-specific data, such as `records`, `filteredRecords` and `folderId`.
+ * 
+ * @extends EntityState<DocumentModel, string>
+ * 
+ * @property {any[]} records - A collection of records related to documents.
+ * @property {any[]} filteredRecords - A collection of filteredRecords related to documents.
+ * @property {string | null} folderId - The ID of the currently selected folder, or `null` if no folder is selected.
+ * @property {boolean} isDialogOpen - A flag indicating whether a dialog is open.
+ */
+export interface DocumentState extends EntityState<DocumentModel, string> {
+  records: DocumentModel[];
+  folderId: string | null;
+  isDialogOpen: boolean;
+  filteredRecords:DocumentModel[]
+}
+
+/**
+ * Creates the initial state for the `DocumentState` store.
+ * 
+ * This function provides default values for all properties in the `DocumentState` interface,
+ * ensuring the store starts with a consistent initial structure.
+ * 
+ * @returns {DocumentState} The initial state of the document store.
+ */
+export function createInitialState(): DocumentState {
+  return {
+    records: [],
+    filteredRecords: [],
+    folderId: null,
+    isDialogOpen: false,
+  };
+}

package/projects/cat-document-lib/src/lib/document/state/document.store.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { EntityStore, StoreConfig } from '@datorama/akita';
+import { createInitialState, DocumentState } from './document.state';
+
+/**
+ * Store that manages the state of documents in the application.
+ * 
+ * The `DocumentStore` class extends Akita's `EntityStore` to manage the entity state for documents.
+ * It uses the `createInitialState` function to initialize the store with default values and 
+ * is configured with the name `'documents'`.
+ * 
+ * @extends EntityStore<DocumentState>
+ */
+@Injectable({ providedIn: 'root' })
+@StoreConfig({ name: 'documents' })
+export class DocumentStore extends EntityStore<DocumentState> {
+  /**
+   * Creates an instance of `DocumentStore` with the initial state of the documents.
+   */
+  constructor() {
+    super(createInitialState());
+  }
+}

package/projects/cat-document-lib/src/public-api.ts

@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of cat-document-lib
+ */
+
+export * from './lib/document/document.module';
+export * from './lib/document/components/document-container/document-container.component';
+

package/projects/cat-document-lib/src/shared/constant/SHARED.ts

@@ -0,0 +1,93 @@
+/**
+ * The `SHARED` class contains shared constants used across the application.
+ * These constants are related to document statuses and other shared data.
+ */
+export class SHARED {
+  /**
+   * Represents the count of missing files.
+   */
+  static MISSINGCOUNT = 2;
+
+  /**
+   * Represents the count of pending files.
+   */
+  static PENDINGCOUNT = 3;
+
+  /**
+   * Represents an empty string.
+   */
+  static EMPTY = "";
+}
+
+/**
+ * `DUMMYDOCUMENTLIST` is a mock list of document objects used for testing and development purposes.
+ * Each document includes an ID, file name, status, and document URL.
+ */
+export const DUMMYDOCUMENTLIST = [
+  {
+    _id: 1,
+    fileName: 'Document 1',
+    status: 'pending',
+    documentUrl: 'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf',
+  },
+  {
+    _id: 2,
+    fileName: 'Document 2',
+    status: 'verified',
+    documentUrl: 'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf',
+  },
+  {
+    _id: 3,
+    fileName: 'Document 3',
+    status: 'sentReminder',
+    documentUrl: 'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf',
+  },
+  {
+    _id: 4,
+    fileName: 'Document 4',
+    status: 'pending',
+    documentUrl: 'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf',
+  },
+];
+
+/**
+ * `FOLDERPANEL` is a mock list of folder data representing various folders in the application.
+ * Each folder contains an ID, file count, text description, missing files count, and pending files count.
+ */
+export const FOLDERPANEL = [
+  {
+    _id: 'folder1',
+    fileCount: 10,
+    text: 'Documents',
+    missingFiles: 3,
+    pendingFiles: 2,
+  },
+  {
+    _id: 'folder2',
+    fileCount: 5,
+    text: 'Images',
+    missingFiles: 0,
+    pendingFiles: 1,
+  },
+  {
+    _id: 'folder3',
+    fileCount: 20,
+    text: 'Reports',
+    missingFiles: 5,
+    pendingFiles: 0,
+  },
+  {
+    _id: 'folder4',
+    fileCount: 8,
+    text: 'Videos',
+    missingFiles: 0,
+    pendingFiles: 0,
+  },
+  {
+    _id: 'folder5',
+    fileCount: 15,
+    text: 'Archives',
+    missingFiles: 1,
+    pendingFiles: 3,
+  }
+];

package/projects/cat-document-lib/src/shared/services/global-error.handler.ts

@@ -0,0 +1,29 @@
+import { ErrorHandler, Injectable, Injector } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+
+/**
+ * GlobalErrorHandler is a custom error handler that implements the ErrorHandler interface.
+ * It is used to handle both HTTP errors and other types of errors globally in the application.
+ * @class
+ * @implements {ErrorHandler}
+ * @decorator {Injectable}
+ */
+@Injectable()
+export class GlobalErrorHandler implements ErrorHandler {
+    /**
+     * Creates an instance of GlobalErrorHandler.
+     * @constructor
+     * @param {Injector} injector - The Angular injector used to get instances of services.
+     */
+    constructor(private injector: Injector) { }
+
+    /**
+     * Handles errors globally in the application.
+     * 
+     * @param {any} error - The error object that needs to be handled.
+     * @returns {void}
+     */
+    handleError(error: any): void {
+        console.error('GlobalErrorHandler:', error);
+    }
+}

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

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/projects/cat-document-lib/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/projects/cat-document-lib/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/src/app/app.component.html

@@ -0,0 +1 @@
+<lib-document-container></lib-document-container>

package/src/app/app.component.spec.ts

@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'cat-documents-ng' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('cat-documents-ng');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, cat-documents-ng');
+  });
+});

package/src/app/app.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+/**
+ *
+ */
+@Component({
+  selector: 'app-root',
+  standalone : false,
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss'
+})
+export class AppComponent {
+  title = 'cat-documents-ng';
+}

package/src/app/app.module.ts

@@ -0,0 +1,59 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppRoutingModule } from './app.routing.module';
+import { AppComponent } from './app.component';
+import { BrowserModule } from '@angular/platform-browser';
+import { DocumentModule } from '../../projects/cat-document-lib/src/public-api';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { GlobalErrorHandler } from '../../projects/cat-document-lib/src/shared/services/global-error.handler';
+
+/**
+ * The root module of the Angular application.
+ *
+ * The `AppModule` is the starting point of the application, declaring the main application component,
+ * importing necessary Angular modules, and bootstrapping the root component.
+ */
+@NgModule({
+  declarations: [
+    /**
+     * Declares the main application component.
+     */
+    AppComponent
+  ],
+  imports: [
+    /**
+     * Provides Angular's commonly needed directives and pipes.
+     */
+    CommonModule,
+    /**
+     * Handles routing configuration for the application.
+     */
+    AppRoutingModule,
+    /**
+     * Provides essential Angular services for browser-based applications.
+     */
+    BrowserModule,
+    /**
+     * Imports the custom DocumentModule, which contains document-related features.
+     */
+    DocumentModule,
+    /**
+     * Enables animations for Angular components in the application.
+     */
+    BrowserAnimationsModule
+  ],
+  bootstrap: [
+    /**
+     * Specifies the root component to bootstrap the application.
+     */
+    AppComponent
+  ],
+  providers: [
+    /**
+     * Registers the global error handler for the application.
+     */
+    {provide: GlobalErrorHandler, useClass: GlobalErrorHandler}
+  ]
+  
+})
+export class AppModule {}

package/src/app/app.routing.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AppComponent } from './app.component';
+
+const routes: Routes = [
+  {
+    path : "",
+    component : AppComponent
+  }
+];
+
+/**
+ *
+ */
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

package/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>CatDocumentsNg</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

package/src/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

package/src/styles.scss

@@ -0,0 +1,5 @@
+/* You can add global styles to this file, and also import other style files */
+@import '../node_modules/primeng/resources/themes/saga-blue/theme.css';
+@import '../node_modules/primeng/resources/primeng.min.css';
+@import '../node_modules/primeflex/primeflex.min.css';
+@import '../node_modules/primeicons/primeicons.css';

package/tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,32 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "paths": {
+      "cat-document-lib": [
+        "./dist/cat-document-lib"
+      ]
+    },
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}