cat-documents-ng 1.0.4 → 1.0.6

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

@@ -0,0 +1,36 @@
+<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

@@ -0,0 +1,34 @@
+.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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,64 @@
+<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

@@ -0,0 +1,206 @@
+.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

@@ -0,0 +1,82 @@
+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

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