cat-documents-ng 1.0.0

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,32 @@
+## Hello Developer,
+Thank you for raising the Pull Request!
+We greatly appreciate your efforts and contributions to the team. To ensure the quality and standards our team is committed to, we kindly request you to complete the checklist below before submitting the PR.
+
+## Pull Request Checklist
+
+### Code Quality
+- [Y/N] Code adheres to coding standards and style guides.
+- [Y/N] Code is properly commented and documented.
+- [Y/N] No Hard-coded values are added.
+- [Y/N] PR doesn't include more than 10 files.
+
+### Clean Coding
+- [Y/N] Classes and methods adheres to Single Responsibility Principle
+- [Y/N] Classes are not exceeding 200 lines of code
+- [Y/N] Methods are not exceeding 20 lines of code
+
+### Testing
+- [Y/N] Unit tests are written and executed.
+- [Y/N] All tests pass successfully.
+- [Y/N] Manual testing is completed and verified.
+
+### Functionality
+- [Y/N] Feature behaves as expected.
+- [Y/N] Edge cases are handled.
+
+### Documentation
+- [Y/N] Relevant documentation is updated (e.g., README, user guides, API docs).
+
+### Dependencies
+- [Y/N] No unused dependencies or imports.
+- [Y/N] Dependencies are updated and compatible.

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

package/README.md

@@ -0,0 +1,59 @@
+# CatDocumentsNg
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.5.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/angular.json

@@ -0,0 +1,119 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "cat-documents-ng": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/cat-documents-ng",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "projects/cat-document-lib/src/assets",
+                "output": "assets/cat-document-lib"
+              }
+            ],
+            "styles": [
+              "./node_modules/primeng/resources/themes/saga-blue/theme.css",
+              "./node_modules/primeng/resources/primeng.min.css",
+              "./node_modules/primeicons/primeicons.css",
+              "./node_modules/primeflex/primeflex.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "cat-documents-ng:build:production"
+            },
+            "development": {
+              "buildTarget": "cat-documents-ng:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "eslintConfig": "eslint.config.js",
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+          }
+        }
+      }
+    },
+    "cat-document-lib": {
+      "projectType": "library",
+      "root": "projects/cat-document-lib",
+      "sourceRoot": "projects/cat-document-lib/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/cat-document-lib/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/cat-document-lib/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/cat-document-lib/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": "77456047-823c-4f1a-b41d-1ddee393b72d"
+  }
+}

package/eslint.config.cjs

@@ -0,0 +1,148 @@
+// @ts-check
+const eslint = require("@eslint/js");
+const tseslint = require("@typescript-eslint/eslint-plugin");
+const tseslintParser = require("@typescript-eslint/parser");
+const angular = require("@angular-eslint/eslint-plugin");
+const jsdoc = require("eslint-plugin-jsdoc");
+const angularParser = require("@angular-eslint/template-parser");
+
+module.exports = [
+  {
+    files: ["**/*.ts"],
+    languageOptions: {
+      parser: tseslintParser, // Use TypeScript parser for .ts files
+      parserOptions: {
+        ecmaVersion: 2020,
+        sourceType: "module",
+        project: "./tsconfig.json", // Ensure this points to your tsconfig.json
+      },
+    },
+    plugins: {
+      "@typescript-eslint": tseslint,
+      "@angular-eslint": angular,
+      jsdoc,
+    },
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          style: "kebab-case",
+        },
+      ],
+      "jsdoc/check-access": 1, // Recommended
+      "jsdoc/check-alignment": 1, // Recommended
+      "jsdoc/check-param-names": 1, // Recommended
+      "jsdoc/check-property-names": 1, // Recommended
+      "jsdoc/check-tag-names": 1, // Recommended
+      "jsdoc/check-types": 1, // Recommended
+      "jsdoc/check-values": 1, // Recommended
+      "jsdoc/empty-tags": 1, // Recommended
+      "jsdoc/implements-on-classes": 1, // Recommended
+      "jsdoc/multiline-blocks": 1, // Recommended
+      "jsdoc/no-multi-asterisks": 1, // Recommended
+      "jsdoc/no-undefined-types": 1, // Recommended
+      "jsdoc/require-jsdoc": [
+        "error",
+        {
+          "contexts": [
+            "ClassDeclaration",
+            "ClassExpression",
+            "ArrowFunctionExpression",
+            "FunctionDeclaration",
+            "FunctionExpression",
+          ],
+        },
+      ],
+      'jsdoc/require-description': 'error',
+      "jsdoc/require-param": 1, // Recommended
+      "jsdoc/require-param-description": 1, // Recommended
+      "jsdoc/require-param-name": 1, // Recommended
+      "jsdoc/require-param-type": 1, // Recommended
+      "jsdoc/require-property": 1, // Recommended
+      "jsdoc/require-property-description": 1, // Recommended
+      "jsdoc/require-property-name": 1, // Recommended
+      "jsdoc/require-property-type": 1, // Recommended
+      "jsdoc/require-returns": 1, // Recommended
+      "jsdoc/require-returns-check": 1, // Recommended
+      "jsdoc/require-returns-description": 1, // Recommended
+      "jsdoc/require-returns-type": 1, // Recommended
+      "jsdoc/require-yields": 1, // Recommended
+      "jsdoc/require-yields-check": 1, // Recommended
+      "jsdoc/tag-lines": 1, // Recommended
+      "jsdoc/valid-types": 1, // Recommended
+      "max-lines": [
+        "error",
+        {
+          max: 200,
+          skipBlankLines: true,
+          skipComments: true,
+        },
+      ],
+      "max-lines-per-function": [
+        "error",
+        {
+          max: 20,
+          skipBlankLines: true,
+          skipComments: true,
+          IIFEs: true,
+        },
+      ],
+    },
+  },
+  {
+    files: ["**/*.html"],
+    languageOptions: {
+      parser: angularParser, // Use Angular template parser
+    },
+    plugins: {
+      "@angular-eslint": angular,
+    },
+    rules: {
+      // Add custom template rules here if needed
+    },
+  },
+  {
+    files: ["**/*.spec.ts"],
+    languageOptions: {
+      parser: tseslintParser, // Use TypeScript parser for .spec.ts files
+      parserOptions: {
+        ecmaVersion: 2020,
+        sourceType: "module",
+        project: "./tsconfig.json", // Ensure this points to your tsconfig.json
+      },
+    },
+    plugins: {
+      "@typescript-eslint": tseslint,
+      "@angular-eslint": angular,
+    },
+    rules: {
+      // Custom rules for spec files, e.g., allow certain things that are specific to testing
+      "max-lines": [
+        "error", // You might want to warn rather than error in test files
+        {
+          max: 500, // Allow more lines in spec files
+          skipBlankLines: true,
+          skipComments: true,
+        },
+      ],
+      "max-lines-per-function": [
+        "error", // You might want to relax this for test files as well
+        {
+          max: 50, // Allow more lines in functions in spec files
+          skipBlankLines: true,
+          skipComments: true,
+          IIFEs: true,
+        },
+      ],
+      // Add other rules specific to testing or Jest (if applicable)
+    },
+  }
+];

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "cat-documents-ng",
+  "version": "1.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "jest --config projects/cat-document-lib/jest.config.mjs",
+    "lint": "ng lint",
+    "prepare": "husky install"
+  },
+  "type": "module",
+  "dependencies": {
+    "@angular/animations": "^19.0.4",
+    "@angular/cdk": "^18.2.14",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "^19.0.0",
+    "@datorama/akita": "^8.0.1",
+    "jsdocs": "^1.0.0",
+    "primeflex": "^3.3.1",
+    "primeicons": "^7.0.0",
+    "primeng": "^17.18.10",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.0.5",
+    "@angular-eslint/eslint-plugin": "^19.0.2",
+    "@angular-eslint/eslint-plugin-template": "^19.0.2",
+    "@angular-eslint/template-parser": "^19.0.2",
+    "@angular/cli": "^19.0.5",
+    "@angular/compiler-cli": "^19.0.0",
+    "@eslint/js": "^9.17.0",
+    "@types/jest": "^29.5.14",
+    "@typescript-eslint/eslint-plugin": "^8.18.0",
+    "@typescript-eslint/parser": "^8.18.0",
+    "angular-eslint": "19.0.2",
+    "eslint": "^9.17.0",
+    "eslint-plugin-jsdoc": "^50.6.1",
+    "husky": "^9.1.7",
+    "jest": "^29.7.0",
+    "jest-preset-angular": "^14.4.2",
+    "lint-staged": "^15.2.11",
+    "ng-packagr": "^19.0.0",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "8.18.0"
+  },
+  "lint-staged": {
+    "**/*.ts": "eslint",
+    "**/*.js": "eslint --fix",
+    "**/*.html": "eslint --fix",
+    "*.js": "eslint --cache --fix"
+  }
+}

package/projects/cat-document-lib/README.md

@@ -0,0 +1,63 @@
+# CatDocumentLib
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build cat-document-lib
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/cat-document-lib
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

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

@@ -0,0 +1,12 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/cat-document-lib",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+ "assets": [
+  "src/assets",
+  "src/favicon.ico"
+]
+
+}

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

@@ -0,0 +1,12 @@
+{
+  "name": "cat-document-lib",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^19.0.0",
+    "@angular/core": "^19.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/projects/cat-document-lib/setup-jest.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

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

@@ -0,0 +1 @@
+<p>document-container works!</p>

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

@@ -0,0 +1,14 @@
+// import { Component } from '@angular/core';
+
+/**
+ *
+ */
+// @Component({
+//   selector: 'lib-document-container',
+//   standalone: false,
+//   templateUrl: './document-container.component.html',
+//   styleUrl: './document-container.component.scss'
+// })
+// export class DocumentContainerComponent {
+
+// }

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

@@ -0,0 +1 @@
+<p>document-list works!</p>

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

@@ -0,0 +1,14 @@
+// import { Component } from '@angular/core';
+
+/**
+ *
+ */
+// @Component({
+//   selector: 'lib-document-list',
+//   standalone : false,
+//   templateUrl: './document-list.component.html',
+//   styleUrl: './document-list.component.scss'
+// })
+// export class DocumentListComponent {
+
+// }

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-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-block/folder-block.component.ts

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