cat-documents-ng 1.0.6 → 1.0.7

package/src/lib/document/components/document-list-item/document-list-item.component.html

@@ -1,36 +0,0 @@
-<div class="grid m-0">
-    <div
-      class="col-12 flex align-items-center justify-content-between md:col-12 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 file-name-wrapper document-text-wrapper">{{ 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() === 'alert'">
-            <i class="pi pi-bell pr-1" style="font-size: 12px;"></i>
-            Alert
-          </ng-container>
-        </span>
-      </div>
-      <div class="document-type file-name-wrapper document-text-wrapper">
-        {{document.documentTypeName}}
-    </div>
-    </div>
-  </div>
-  

package/src/lib/document/components/document-list-item/document-list-item.component.scss

@@ -1,34 +0,0 @@
-.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-alert {
-    background: #f57c00;
-    color: #ffffff;
-    border-radius: 4px;
-  }
-  .product-badge {
-    text-transform: none;
-    font-weight: 500;
-    font-size: 12px;
-
-  }
-  
-  .file-name-wrapper{
-    font-size: 15px;
-    font-weight: 500;
-  }
-
-  .document-text-wrapper{
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }

package/src/lib/document/components/document-list-item/document-list-item.component.spec.ts

@@ -1,75 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DocumentListItemComponent } from './document-list-item.component';
-import { CommonModule } from '@angular/common';
-import { By } from '@angular/platform-browser';
-import { DocumentModel } from '../../models/document.model';
-
-describe('DocumentListItemComponent', () => {
-  let component: DocumentListItemComponent;
-  let fixture: ComponentFixture<DocumentListItemComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [DocumentListItemComponent],
-      imports: [CommonModule],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(DocumentListItemComponent);
-    component = fixture.componentInstance;
-    component.document = {
-      _id : "1",
-      fileName : 'test',
-    }
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should emit the selected document when handleOpenDocument is called', () => {
-    spyOn(component.documentClick, 'emit');
-    const mockDocument = { _id: "1", fileName: 'test' } as DocumentModel;
-    component.handleOpenDocument(mockDocument);
-    expect(component.documentClick.emit).toHaveBeenCalledWith(mockDocument);
-  });
-
-  it('should log an error when handleOpenDocument is called with null', () => {
-    spyOn(console, 'error');
-    component.handleOpenDocument(null as unknown as DocumentModel);
-
-    expect(console.error).toHaveBeenCalledWith('Error: Document is null or undefined:', null);
-  });
-
-  it('should emit documentClick event when document is clicked', () => {
-    spyOn(component.documentClick, 'emit');
-    const clickableElement = fixture.debugElement.query(By.css('.cursor-pointer'));
-    clickableElement.triggerEventHandler('click', null);
-
-    expect(component.documentClick.emit).toHaveBeenCalledWith(component.document);
-  });
-
-  it('should display Pending status with the correct icon', () => {
-    component.document.status = 'Pending';
-    fixture.detectChanges();
-
-    const statusElement = fixture.debugElement.query(By.css('.status-pending')).nativeElement;
-    const iconElement = fixture.debugElement.query(By.css('.pi-clock')).nativeElement;
-
-    expect(statusElement.textContent).toContain('Pending');
-    expect(iconElement).toBeTruthy();
-  });
-
-  it('should display Verified status with the correct icon', () => {
-    component.document.status = 'Verified';
-    fixture.detectChanges();
-
-    const statusElement = fixture.debugElement.query(By.css('.status-verified')).nativeElement;
-    const iconElement = fixture.debugElement.query(By.css('.pi-check-circle')).nativeElement;
-
-    expect(statusElement.textContent).toContain('Verified');
-    expect(iconElement).toBeTruthy();
-  });
-
- 
-});

package/src/lib/document/components/document-list-item/document-list-item.component.ts

@@ -1,40 +0,0 @@
-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/src/lib/document/components/document-search/document-search.component.html

@@ -1,64 +0,0 @@
-<div class="search-container">
-  <div class="search-header">
-    <h2 class="ml-3 document-heading">Documents</h2>  
-  </div>
-  <div class="search-input-wrapper">
-    <i class="pi pi-search search-icon"></i>
-    <input 
-      type="text" 
-      [(ngModel)]="searchTerm"
-      (ngModelChange)="onSearchInputChange($event)"
-      class="search-input"
-      placeholder="Search by document name, category, type, status or applicant name..."
-      [attr.aria-label]="'Search documents'"
-    />
-    <button 
-      *ngIf="searchTerm"
-      type="button"
-      class="clear-button"
-      (click)="onClearSearch()"
-      [attr.aria-label]="'Clear search'"
-    >
-      <i class="pi pi-times"></i>
-    </button>
-  </div>
-
-  <button 
-    *ngIf="shouldShowClearAll"
-    type="button"
-    class="clear-all-filters-link"
-    (click)="onClearAllFilters()"
-    [attr.aria-label]="'Clear all'"
-  >
-  Clear All
-  <i class="pi pi-times"></i>
-  </button>
-
-  <div class="filters-section">
-    <div class="actions-menu">
-      <button 
-        type="button"
-        class="actions-btn" 
-        (click)="toggleActionsMenu()" 
-        [class.active]="showActionsMenu"
-        [attr.aria-label]="'Open actions menu'"
-        [attr.aria-expanded]="showActionsMenu"
-      >
-        Actions
-        <i class="pi pi-chevron-down" [class.rotated]="showActionsMenu"></i>
-      </button>
-
-      <!-- Actions Dropdown Menu -->
-      <div class="actions-dropdown" *ngIf="showActionsMenu">
-        <div class="dropdown-item" (click)="handleUploadDocument()">
-          <i class="pi pi-upload"></i>
-          <span>Upload Document</span>
-        </div>
-        <div class="dropdown-item" (click)="handleRequestDocument()">
-          <i class="pi pi-file"></i>
-          <span>Request Document</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div> 

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

@@ -1,206 +0,0 @@
-.search-container {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  width: 100%;
-  justify-content: flex-start;
-  padding: 10px;
-}
-
-.search-input-wrapper {
-  position: relative;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  max-width: 50%;
-  min-width: 300px;
-}
-
-.clear-all-filters-link {
-  background: none;
-  border: none;
-  color: #0F8BFD;
-  cursor: pointer;
-  padding: 8px 12px;
-  border-radius: 4px;
-  font-size: 16px;
-  font-weight: 500;
-  text-decoration: none !important;
-  transition: background-color 0.2s ease, color 0.2s ease;
-  white-space: nowrap;
-  flex-shrink: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-}
-
-.filters-section {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  flex-shrink: 0;
-  margin-left: auto;
-
-  .actions-menu {
-    position: relative;
-
-    .actions-btn {
-      background: #0F8BFD;
-      border: none;
-      border-radius: 8px;
-      padding: 8px 10px;
-      color: white;
-      font-size: 12px;
-      font-weight: bold;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      transition: all 0.2s ease;
-      white-space: nowrap;
-
-      &:hover {
-        background: #0d7ae6;
-        transform: translateY(-1px);
-      }
-
-      &:active {
-        transform: translateY(0);
-      }
-
-      &.active {
-        background: #0d7ae6;
-      }
-
-      &:focus {
-        outline: none;
-        box-shadow: 0 0 0 3px rgba(15, 139, 253, 0.3);
-      }
-
-      i {
-        font-size: 0.75rem;
-        transition: transform 0.2s;
-
-        &.rotated {
-          transform: rotate(180deg);
-        }
-      }
-    }
-
-    .actions-dropdown {
-      position: absolute;
-      top: calc(100% + 0.5rem);
-      right: 0;
-      background: #ffffff;
-      border: 1px solid #d1d5db;
-      border-radius: 8px;
-      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-      z-index: 1000;
-      min-width: 200px;
-      overflow: hidden;
-
-      .dropdown-item {
-        padding: 0.75rem 1rem;
-        cursor: pointer;
-        color: #374151;
-        font-size: 0.875rem;
-        transition: background-color 0.2s;
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-
-        i {
-          font-size: 1rem;
-          color: #6b7280;
-        }
-
-        &:hover {
-          background-color: #f3f4f6;
-        }
-
-        &:not(:last-child) {
-          border-bottom: 1px solid #f3f4f6;
-        }
-
-        &:active {
-          background-color: #e5e7eb;
-        }
-      }
-    }
-  }
-}
-
-.search-icon {
-  position: absolute;
-  left: 12px;
-  color: #6c757d;
-  z-index: 1;
-}
-
-.search-input {
-  width: 100%;
-  padding: 12px 40px 12px 40px;
-  border: 1px solid #dee2e6;
-  border-radius: 8px;
-  font-size: 14px;
-  outline: none;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-
-  &:focus {
-    border-color: #0F8BFD;
-    box-shadow: 0 0 0 3px rgba(15, 139, 253, 0.1);
-  }
-
-  &::placeholder {
-    color: #6c757d;
-  }
-}
-
-.clear-button {
-  position: absolute;
-  right: 12px;
-  background: none;
-  border: none;
-  color: #6c757d;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  transition: background-color 0.2s ease, color 0.2s ease;
-
-  &:hover {
-    background-color: #f8f9fa;
-    color: #495057;
-  }
-}
-
-// Responsive Design
-@media (max-width: 768px) {
-  .search-container {
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-
-  .search-input-wrapper {
-    max-width: 100%;
-  }
-
-  .filters-section {
-    width: 100%;
-    justify-content: center;
-    gap: 0.5rem;
-
-    .actions-menu {
-      .actions-btn {
-        width: auto;
-        justify-content: center;
-      }
-
-      .actions-dropdown {
-        left: 50%;
-        transform: translateX(-50%);
-        right: auto;
-      }
-    }
-  }
-} 

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

@@ -1,82 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
-import { DocumentSearchComponent } from './document-search.component';
-import { DocumentHelperService } from '../../services/document.service';
-
-describe('DocumentSearchComponent', () => {
-  let component: DocumentSearchComponent;
-  let fixture: ComponentFixture<DocumentSearchComponent>;
-  let mockDocumentHelperService: jasmine.SpyObj<DocumentHelperService>;
-
-  beforeEach(async () => {
-    const spy = jasmine.createSpyObj('DocumentHelperService', ['setSearchKey']);
-    
-    await TestBed.configureTestingModule({
-      declarations: [ DocumentSearchComponent ],
-      imports: [ FormsModule ],
-      providers: [
-        { provide: DocumentHelperService, useValue: spy }
-      ]
-    })
-    .compileComponents();
-
-    mockDocumentHelperService = TestBed.inject(DocumentHelperService) as jasmine.SpyObj<DocumentHelperService>;
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DocumentSearchComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should initialize with empty search term', () => {
-    expect(component.searchTerm).toBe('');
-  });
-
-  it('should call setSearchKey when search term changes', (done) => {
-    component.onSearchInputChange('test search');
-    
-    setTimeout(() => {
-      expect(mockDocumentHelperService.setSearchKey).toHaveBeenCalledWith('test search');
-      done();
-    }, 600); // Wait for debounce time
-  });
-
-  it('should clear search when clear button is clicked', () => {
-    component.searchTerm = 'test';
-    component.onClearSearch();
-    
-    expect(component.searchTerm).toBe('');
-    expect(mockDocumentHelperService.setSearchKey).toHaveBeenCalledWith(null);
-  });
-
-  it('should normalize search term by trimming whitespace', (done) => {
-    component.onSearchInputChange('  test search  ');
-    
-    setTimeout(() => {
-      expect(mockDocumentHelperService.setSearchKey).toHaveBeenCalledWith('test search');
-      done();
-    }, 600);
-  });
-
-  it('should set search key to null for empty search term', (done) => {
-    component.onSearchInputChange('');
-    
-    setTimeout(() => {
-      expect(mockDocumentHelperService.setSearchKey).toHaveBeenCalledWith(null);
-      done();
-    }, 600);
-  });
-
-  it('should clear all filters when clear all filters button is clicked', () => {
-    component.searchTerm = 'test';
-    component.onClearAllFilters();
-    
-    expect(component.searchTerm).toBe('');
-    expect(mockDocumentHelperService.clearSelectionState).toHaveBeenCalled();
-  });
-}); 

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

@@ -1,163 +0,0 @@
-import { Component, Input, OnInit, OnDestroy, Output, EventEmitter } from '@angular/core';
-import { Subject, takeUntil, debounceTime, distinctUntilChanged } from 'rxjs';
-import { SHARED } from '../../../../Shared/constant/SHARED';
-import { DocumentHelperService } from '../../services/document.service';
-import { DocumentQuery } from '../../state/document.query';
-
-@Component({
-  selector: 'document-search',
-  templateUrl: './document-search.component.html',
-  styleUrls: ['./document-search.component.scss'],
-  standalone: false
-})
-export class DocumentSearchComponent implements OnInit, OnDestroy {
-  readonly SHARED = SHARED;
-  
-  @Input() contextId: string = SHARED.EMPTY;
-  @Output() onActionClick = new EventEmitter<void>();
-  @Output() onRequestClick = new EventEmitter<void>();
-  
-  searchTerm: string = SHARED.EMPTY;
-  showActionsMenu: boolean = false;
-  private destroy$ = new Subject<void>();
-  private searchSubject = new Subject<string>();
-  private hasActiveFilters: boolean = false;
-
-  constructor(
-    private documentHelperService: DocumentHelperService,
-    private documentQuery: DocumentQuery
-  ) {}
-
-  ngOnInit(): void {
-    this.setupSearchSubscription();
-    this.setupFilterSubscription();
-    this.setupClickOutsideListener();
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-    this.removeClickOutsideListener();
-  }
-
-  /**
-   * Sets up the search input subscription with debouncing
-   */
-  private setupSearchSubscription(): void {
-    const searchSubject = new Subject<string>();
-    searchSubject.pipe(
-      takeUntil(this.destroy$),
-      debounceTime(500),
-      distinctUntilChanged()
-    ).subscribe(searchTerm => {
-      this.onSearchChange(searchTerm);
-    });
-
-    this.searchSubject = searchSubject;
-  }
-
-  /**
-   * Sets up subscription to monitor all filter states
-   */
-  private setupFilterSubscription(): void {
-    this.documentQuery.selectSelectionState().pipe(
-      takeUntil(this.destroy$)
-    ).subscribe(selectionState => {
-      this.hasActiveFilters = Boolean(
-        selectionState.searchKey ||
-        selectionState.userId ||
-        selectionState.status ||
-        selectionState.menuItem
-      );
-    });
-  }
-
-  /**
-   * Handles search term changes from ngModel
-   * @param searchTerm - The search term entered by the user
-   */
-  onSearchInputChange(searchTerm: string): void {
-    this.searchSubject.next(searchTerm);
-  }
-
-  /**
-   * Handles search term changes
-   * @param searchTerm - The search term entered by the user
-   */
-  private onSearchChange(searchTerm: string): void {
-    const normalizedSearchTerm = searchTerm?.trim() || null;
-    this.documentHelperService.setSearchKey(normalizedSearchTerm);
-  }
-
-  /**
-   * Clears the search input
-   */
-  onClearSearch(): void {
-    this.searchTerm = SHARED.EMPTY;
-    this.documentHelperService.setSearchKey(null);
-  }
-
-  /**
-   * Clears all filters including search, menu item, user, and status selections
-   */
-  onClearAllFilters(): void {
-    this.searchTerm = SHARED.EMPTY;
-    this.documentHelperService.clearSelectionState();
-  }
-
-  /**
-   * Determines if the Clear All button should be visible
-   */
-  get shouldShowClearAll(): boolean {
-    return this.hasActiveFilters;
-  }
-
-  /**
-   * Toggles the actions dropdown menu
-   */
-  toggleActionsMenu(): void {
-    this.showActionsMenu = !this.showActionsMenu;
-  }
-
-  /**
-   * Handles upload document action
-   */
-  handleUploadDocument(): void {
-    this.showActionsMenu = false;
-    this.onActionClick.emit();
-  }
-
-  /**
-   * Handles request document action
-   */
-  handleRequestDocument(): void {
-    this.showActionsMenu = false;
-    this.onRequestClick.emit();
-  }
-
-  /**
-   * Sets up click outside listener to close dropdown
-   */
-  private setupClickOutsideListener(): void {
-    document.addEventListener('click', this.handleClickOutside);
-  }
-
-  /**
-   * Removes click outside listener
-   */
-  private removeClickOutsideListener(): void {
-    document.removeEventListener('click', this.handleClickOutside);
-  }
-
-  /**
-   * Handles clicks outside the dropdown to close it
-   */
-  private handleClickOutside = (event: MouseEvent): void => {
-    const target = event.target as HTMLElement;
-    const actionsMenu = target.closest('.actions-menu');
-    
-    if (!actionsMenu && this.showActionsMenu) {
-      this.showActionsMenu = false;
-    }
-  }
-}