cat-documents-ng 0.1.28 → 0.1.30

package/src/lib/document/components/folder-block/folder-block.component.spec.ts

@@ -0,0 +1,70 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FolderBlockComponent } from './folder-block.component';
+import { SHARED } from '../../../../Shared/constant/SHARED';
+import { DocumentStore } from '../../state/document.store';
+import { FolderBlockModel } from '../../models/folder.model';
+
+describe('FolderBlockComponent', () => {
+  let component: FolderBlockComponent;
+  let fixture: ComponentFixture<FolderBlockComponent>;
+  let mockDocumentStore: jasmine.SpyObj<DocumentStore>;
+
+  beforeEach(async () => {
+    mockDocumentStore = jasmine.createSpyObj('DocumentStore', ['setParentDocumentTypeId']); // Include the method here
+
+    await TestBed.configureTestingModule({
+        declarations: [FolderBlockComponent],
+        providers: [
+            { provide: DocumentStore, useValue: mockDocumentStore }
+        ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FolderBlockComponent);
+    component = fixture.componentInstance;
+
+    // Mock folder blocks input
+    component.folderList = [
+        { _id: '1', folderName: 'Folder 1', documentCount: 5 },
+        { _id: '2', folderName: 'Folder 2', documentCount: 3 },
+    ] as FolderBlockModel[];
+
+    fixture.detectChanges();
+});
+
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render the folder blocks correctly', () => {
+    const folderElements = fixture.debugElement.nativeElement.querySelectorAll('.grid .col-12');
+    expect(folderElements.length).toBe(2); // Should match the length of folderBlocks input
+  });
+
+  it('should display the correct file count for each folder', () => {
+    const folderTextElements = fixture.debugElement.nativeElement.querySelectorAll('.text-600');
+    expect(folderTextElements[0].textContent).toContain('5 Files');
+    expect(folderTextElements[1].textContent).toContain('3 Files');
+  });
+
+  it('should return correct folderBlockId from handleClickForFilter', () => {
+    const validFolderBlockId = '1';
+    const invalidFolderBlockId = '';
+
+    expect(component.handleClickForFilter(validFolderBlockId)).toBe(validFolderBlockId);
+    expect(component.handleClickForFilter(invalidFolderBlockId)).toBe(SHARED.EMPTY);
+  });
+
+  it('should display the missing and pending file counts correctly', () => {
+    const missingFileCountElements = fixture.debugElement.nativeElement.querySelectorAll('.text-pink-500');
+    const pendingFileCountElements = fixture.debugElement.nativeElement.querySelectorAll('.text-yellow-500');
+
+    expect(missingFileCountElements.length).toBeGreaterThan(0); // Check if any element with `text-pink-500` class is present
+    expect(pendingFileCountElements.length).toBeGreaterThan(0); // Check if any element with `text-yellow-500` class is present
+  });
+
+  it('should set the missingFileCount and pendingFileCount to SHARED constants', () => {
+    expect(component.missingFileCount).toBe(SHARED.MISSINGCOUNT);
+    expect(component.pendingFileCount).toBe(SHARED.PENDINGCOUNT);
+  });
+});

package/{lib/document/components/folder-block/folder-block.component.d.ts → src/lib/document/components/folder-block/folder-block.component.ts}

@@ -1,37 +1,53 @@
-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`.
-     */
-    folderList: 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: any): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FolderBlockComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FolderBlockComponent, "lib-folder-block", never, { "folderList": { "alias": "folderList"; "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() folderList : FolderBlockModel[] = SHARED.EMPTY_ARRAY;
+    
+    /** 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;
+        }
+        this.documentStore.setParentDocumentTypeId(folderBlockId);
+        return folderBlockId;
+    }
+    
+}

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

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

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

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Listbox, ListboxModule } from 'primeng/listbox';
+import { TimelineModule } from 'primeng/timeline';
+import { FormsModule } from '@angular/forms';
+import { CheckboxModule } from 'primeng/checkbox';
+import { FolderContainerComponent } from './folder-container.component';
+import { FolderBlockComponent } from '../folder-block/folder-block.component';
+
+describe('FolderContainerComponent', () => {
+  let component: FolderContainerComponent;
+  let fixture: ComponentFixture<FolderContainerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FolderContainerComponent , FolderBlockComponent],
+      imports : [ListboxModule, TimelineModule, FormsModule, CheckboxModule]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FolderContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,37 @@
+import { Component, Input } from '@angular/core';
+import { FOLDERPANEL, SHARED } from '../../../../Shared/constant/SHARED';
+import { DocumentModel } from '../../models/document.model';
+import { FolderBlockModel } from '../../models/folder.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[];
+  /**
+   * A list of documents passed as input to the component.
+   * Represents the document data to be displayed in the folder container.
+   */
+  @Input() folderList: FolderBlockModel[] = SHARED.EMPTY_ARRAY;
+
+  /**
+   * The context ID for the folder container.
+   * @type {string}
+   */
+  @Input() contextId: string = SHARED.EMPTY;
+  
+}

package/src/lib/document/components/linked-document/linked-document.component.html

@@ -0,0 +1,23 @@
+<div class="summary-card 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; background-color: #F9fafb;">
+      <div class="p-0">
+        <h4 class="m-0 pt-3 pl-3 mb-3" style="font-size: 21px; font-weight: bold; ">Linked Documents</h4>
+      </div>
+    </div>
+    <div class="card mb-0" style="border-top-right-radius: 0px;border-top-left-radius: 0px;">
+      @for(document of documentList; track document){
+        <div class="linkedDocument documentName m-2">
+          <div class="documentName"         [class.selected]="document._id === selectedDocument?._id"
+          (click)="handleDocumentClick(document)">
+            <span class="pi pi-link"></span>
+            {{document.fileName}}
+          </div>
+        </div>
+      }
+
+    </div>
+  
+  
+  </div>
+  

package/src/lib/document/components/linked-document/linked-document.component.scss

@@ -0,0 +1,10 @@
+.documentName{
+    font-family: inherit;
+    text-decoration: underline;
+    cursor: pointer;
+    width: max-content;
+}
+.selected{
+    color: var(--primary-color);
+
+}

package/src/lib/document/components/linked-document/linked-document.component.spec.ts

@@ -0,0 +1,61 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { LinkedDocumentComponent } from './linked-document.component';
+import { DocumentModel } from '../../models/document.model';
+import { Component, Input } from '@angular/core';
+
+/**
+ * A mock child component used for testing the LinkedDocumentComponent.
+ * It mimics a real child component that receives document-related inputs.
+ */
+@Component({
+  selector: 'app-mock-child',
+  template: ''
+})
+class MockChildComponent {
+  /**
+   * Represents the currently selected document.
+   */
+  @Input() selectedDocument?: DocumentModel;
+
+  /**
+   * A list of available documents.
+   */
+  @Input() documentList?: DocumentModel[];
+}
+
+describe('LinkedDocumentComponent', () => {
+  let component: LinkedDocumentComponent;
+  let fixture: ComponentFixture<LinkedDocumentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [LinkedDocumentComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LinkedDocumentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  /**
+   * Ensures that the component is created successfully.
+   */
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  /**
+   * Tests whether the `handleDocumentClick` method correctly emits 
+   * the `selectedDocumentChange` event with the expected document data.
+   */
+  it('should emit selectedDocumentChange event when handleDocumentClick is called', () => {
+    spyOn(component.selectedDocumentChange, 'emit');
+    const document: DocumentModel = { _id: '1', fileName: 'Doc1' };
+    
+    component.handleDocumentClick(document);
+    
+    expect(component.selectedDocumentChange.emit).toHaveBeenCalledWith(document);
+  });
+});

package/src/lib/document/components/linked-document/linked-document.component.ts

@@ -0,0 +1,49 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
+import { DocumentQuery } from '../../state/document.query';
+import { DocumentModel } from '../../models/document.model';
+
+/**
+ * Description placeholder
+ * @class LinkedDocumentComponent
+ * @typedef {LinkedDocumentComponent}
+ * @implements {OnChanges}
+ */
+@Component({
+  selector: 'app-linked-document',
+  templateUrl: './linked-document.component.html',
+  styleUrl: './linked-document.component.scss',
+  standalone : false
+})
+export class LinkedDocumentComponent {
+  /**
+   * Selected document for view.
+   * @type {?DocumentModel}
+   */
+  @Input() selectedDocument?: DocumentModel;
+  /**
+   * Whole document list.
+   * @type {?DocumentModel[]}
+   */
+  @Input() documentList?: DocumentModel[];
+  /**
+   * Changed selected document.
+   * @type {*}
+   */
+  @Output() selectedDocumentChange = new EventEmitter<DocumentModel>();
+
+  /**
+   * Filtered documents.
+   * @type {DocumentModel[]}
+   */
+  filteredDocuments: DocumentModel[] = [];
+
+  /**
+   * Handle the click on the document.
+   * @param {DocumentModel} document - Clicked document.
+   */
+  handleDocumentClick(document: DocumentModel): void {
+    this.selectedDocument = document;
+    this.selectedDocumentChange.emit(this.selectedDocument);
+  }
+
+}

package/src/lib/document/directives/document.directive.ts

@@ -0,0 +1,32 @@
+import { Directive, TemplateRef, ViewContainerRef } from "@angular/core";
+import { DocumentService } from "../services/document.service";
+import { DocumentModel } from "../models/document.model";
+
+/**
+ * Directive to display the document data
+ */
+@Directive({
+    selector: '[doc]',
+    standalone: false
+})
+export class DocumentDirective {
+
+    /**
+     * Creates an instance of DocumentDirective.
+     * @param documentService Service to get the document data.
+     * @param templateRef Reference to the template.
+     * @param vcr View container reference to manage the view.
+     */
+    constructor(
+        private documentService: DocumentService,
+        private templateRef: TemplateRef<any>,
+        private vcr: ViewContainerRef
+    ) {
+        this.documentService.get().subscribe((document: DocumentModel | null) => {
+            this.vcr.clear();
+            if (document) {
+                this.vcr.createEmbeddedView(this.templateRef, { $implicit: document });
+            }
+        });
+    }
+}

package/src/lib/document/directives/permission.directive.ts

@@ -0,0 +1,66 @@
+import { Directive, Input, ElementRef, Renderer2, SimpleChanges, OnChanges } from '@angular/core';
+import { SessionService } from '../../../Shared/services/session.service';
+
+/**
+ * Directive to conditionally show or hide elements based on user permissions.
+ * @class HasPermissionDirective
+ * @typedef {HasPermissionDirective}
+ */
+@Directive({
+  selector: '[permission]',
+  standalone: false
+})
+export class HasPermissionDirective implements OnChanges {
+  
+  /**
+   * The required permission(s) to display the element.
+   * Accepts a single string or an array of strings.
+   * @type {string | string[]}
+   */
+  @Input() permission?: string | string[];
+
+  /**
+   * Creates an instance of HasPermissionDirective.
+   * @param {ElementRef} el - Reference to the host element.
+   * @param {Renderer2} renderer - Angular Renderer for DOM manipulation.
+   * @param {SessionService} sessionService - Service to retrieve user permissions.
+   */
+  constructor(
+    private el: ElementRef,
+    private renderer: Renderer2,
+    public sessionService: SessionService
+  ) {}
+
+  /**
+   * Lifecycle hook that is called when input properties change.
+   * @param {SimpleChanges} changes - The changes in input properties.
+   */
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['permission']) {
+      this.checkPermission();
+    }
+  }
+
+  /**
+   * Checks if the user has the required permission(s).
+   * Hides the element if the permission is not found.
+   */
+  private checkPermission() {
+    const userPermissionsObjects = this.sessionService.getUserPermissions();
+    const userPermissionNames = userPermissionsObjects?.map((perm: any) => perm.name) || [];
+
+    const requiredPermissions = Array.isArray(this.permission)
+      ? this.permission
+      : [this.permission];
+
+    const hasPermission = requiredPermissions.some(permission =>
+      userPermissionNames.includes(permission)
+    );
+
+    if (!hasPermission) {
+      this.renderer.setStyle(this.el.nativeElement, 'display', 'none');
+    } else {
+      this.renderer.removeStyle(this.el.nativeElement, 'display');
+    }
+  }
+}