cat-documents-ng 1.0.4 → 1.0.6

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';
+import { DocumentListItem } from '../../models/document-list-response.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?: DocumentListItem;
+  /**
+   * Whole document list.
+   * @type {?DocumentModel[]}
+   */
+  @Input() documentList?: DocumentListItem[];
+  /**
+   * Changed selected document.
+   * @type {*}
+   */
+  @Output() selectedDocumentChange = new EventEmitter<DocumentListItem>();
+
+  /**
+   * Filtered documents.
+   * @type {DocumentModel[]}
+   */
+  filteredDocuments: DocumentModel[] = [];
+
+  /**
+   * Handle the click on the document.
+   * @param {DocumentModel} document - Clicked document.
+   */
+  handleDocumentClick(document: DocumentListItem): void {
+    this.selectedDocument = document;
+    this.selectedDocumentChange.emit(this.selectedDocument);
+  }
+
+}

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

@@ -0,0 +1,86 @@
+<div class="document-upload-container">
+  <!-- Assignment Section (same structure as upload, without files) -->
+  <div class="assignment-section">
+    <h4>Assign to Applicant(s) or Application <span class="text-red-500">*</span> </h4>
+    <div class="radio-group">
+      <div class="radio-item">
+        <p-radioButton 
+          name="assignmentType" 
+          value="Applicant" 
+          [(ngModel)]="selectedAssignmentType"
+          (onClick)="onAssignmentTypeChange()"
+          [inputId]="'req-applicant'"
+        ></p-radioButton>
+        <label [for]="'req-applicant'" class="radio-label">Applicant(s)</label>
+      </div>
+      <div class="radio-item">
+        <p-radioButton 
+          name="assignmentType" 
+          value="Application" 
+          [(ngModel)]="selectedAssignmentType"
+          (onClick)="onAssignmentTypeChange()"
+          [inputId]="'req-application'"
+        ></p-radioButton>
+        <label [for]="'req-application'" class="radio-label">Application</label>
+      </div>
+    </div>
+  </div>
+
+  <!-- Applicant Selection (only when Applicant is selected) -->
+  <div class="applicant-section" *ngIf="selectedAssignmentType === 'Applicant'">
+    <h4>Select Applicant(s) <span class="text-red-500">*</span></h4>
+    <div class="grid">
+      <div 
+        *ngFor="let applicant of filteredApplicantList" 
+        class="applicant-item col-12 md:col-6"
+      >
+        <p-radioButton 
+          name="reqSelectedApplicant"
+          [value]="applicant._id"
+          [(ngModel)]="selectedApplicant"
+          [inputId]="'req-applicant-' + applicant._id"
+          (onClick)="onApplicantSelectionChange()"
+        ></p-radioButton>
+        <label [for]="'req-applicant-' + applicant._id" class="applicant-label">
+          {{ applicant.name }}
+        </label>
+      </div>
+    </div>
+  </div>
+
+  <!-- Category Selection -->
+  <div class="category-section">
+    <h4>Category <span class="text-red-500">*</span></h4>
+    <p-dropdown
+      [options]="categoryOptions"
+      [(ngModel)]="selectedCategory"
+      placeholder="Select Category type"
+      optionLabel="label"
+      optionValue="_id"
+      (onChange)="onCategoryChange()"
+      [disabled]="!categoryOptions.length"
+      class="w-full"
+    ></p-dropdown>
+  </div>
+
+  <!-- Document Type Selection -->
+  <div class="document-type-section">
+    <h4>Document Type <span class="text-red-500">*</span></h4>
+    <p-dropdown
+      [options]="documentTypeOptions"
+      [(ngModel)]="selectedDocumentType"
+      placeholder="Select Document type"
+      optionLabel="label"
+      optionValue="_id"
+      (onChange)="onDocumentTypeChange()"
+      [disabled]="!documentTypeOptions.length || !selectedCategory"
+      class="w-full"
+    ></p-dropdown>
+  </div>
+
+  <!-- Description Field -->
+  <div class="description-section">
+    <h6>Description <span class="text-red-500">*</span></h6>
+    <textarea pInputTextarea [(ngModel)]="description" (ngModelChange)="onDescriptionChange()" rows="4" placeholder="Add description" class="w-full"></textarea>
+  </div>
+</div>

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

@@ -0,0 +1,16 @@
+.request-document-form {
+  .form-row {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 1rem;
+  }
+  label {
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+  }
+  select, textarea {
+    padding: 0.5rem;
+  }
+}
+
+

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

@@ -0,0 +1,278 @@
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output, SimpleChanges, OnChanges } from '@angular/core';
+import { SHARED } from '../../../../Shared/constant/SHARED';
+import { Subject, takeUntil } from 'rxjs';
+import { UserListModel } from '../../models/user-list.model';
+import { DocumentCategory } from '../../models/document-category.model';
+import { DocumentTypeModel } from '../../models/document-type.model';
+import { DocumentUploadService } from '../../services/document-upload.service';
+import { DocumentUploadFormService } from '../../services/document-upload-form.service';
+import { DocumentUploadDataService } from '../../services/document-upload-data.service';
+import { DocumentHttpService } from '../../services/document-http.service';
+import { SessionService } from '../../../../Shared/services/session.service';
+
+@Component({
+  selector: 'lib-request-document',
+  templateUrl: './request-document.component.html',
+  standalone: false
+})
+export class RequestDocumentComponent implements OnInit, OnChanges, OnDestroy {
+  @Input() contextId: string = SHARED.EMPTY;
+  @Input() isRequestSaveBtnClicked: boolean = false;
+  @Input() isRequestSidebarClosed: boolean = false;
+
+  @Output() onFormValidationChange = new EventEmitter<void>();
+  @Output() onRequestSuccess = new EventEmitter<void>();
+  @Output() onRequestError = new EventEmitter<any>();
+  @Output() hasUnsavedChangesChange = new EventEmitter<boolean>();
+
+  selectedAssignmentType: 'Applicant' | 'Application' | null = null;
+  selectedApplicant: string = SHARED.EMPTY;
+  selectedCategory: string = SHARED.EMPTY;
+  selectedDocumentType: string = SHARED.EMPTY;
+  description: string = SHARED.EMPTY;
+
+  applicantList: UserListModel[] = SHARED.EMPTY_ARRAY;
+  filteredApplicantList: UserListModel[] = SHARED.EMPTY_ARRAY;
+  categoryOptions: DocumentCategory[] = SHARED.EMPTY_ARRAY;
+  documentTypeOptions: DocumentTypeModel[] = SHARED.EMPTY_ARRAY;
+
+  isLoadingApplicants: boolean = false;
+  isLoadingCategories: boolean = false;
+  isLoadingDocumentTypes: boolean = false;
+  isSaving: boolean = false;
+  isFormValid: boolean = false;
+
+  private destroy$ = new Subject<void>();
+
+  constructor(
+    public documentUpload: DocumentUploadService,
+    private formService: DocumentUploadFormService,
+    private dataService: DocumentUploadDataService,
+    private cdr: ChangeDetectorRef,
+    private documentHttpService : DocumentHttpService,
+    private sessionService: SessionService
+  ) {}
+
+  ngOnInit(): void {
+    this.resetForm();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['isRequestSaveBtnClicked'] && changes['isRequestSaveBtnClicked'].currentValue) {
+      this.saveRequestDocument();
+    }
+    if (changes['isRequestSidebarClosed'] && changes['isRequestSidebarClosed'].currentValue) {
+      if (this.isRequestSidebarClosed) {
+        this.resetForm();
+      }
+    }
+  }
+
+  onAssignmentTypeChange(): void {
+    this.resetSelections();
+    this.loadCategories();
+    // Always ensure applicants are loaded; filtering will apply based on assignment type
+    this.loadApplicants();
+    this.validateAndEmit();
+    this.emitUnsavedChanges();
+  }
+
+  onCategoryChange(): void {
+    this.resetDocumentType();
+    if (this.selectedCategory) this.loadDocumentTypes();
+    this.validateAndEmit();
+    this.emitUnsavedChanges();
+  }
+
+  onDocumentTypeChange(): void { this.validateAndEmit(); this.emitUnsavedChanges(); }
+  onApplicantSelectionChange(): void { this.validateAndEmit(); this.emitUnsavedChanges(); }
+  onDescriptionChange(): void { this.validateAndEmit(); this.emitUnsavedChanges(); }
+
+  loadApplicants(): void {
+    this.isLoadingApplicants = true;
+    this.dataService.loadApplicants(
+      this.contextId,
+      (applicants) => this.handleApplicantsLoaded(applicants),
+      (error) => this.handleError('Failed to Load Applicants', error, () => this.isLoadingApplicants = false)
+    ).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (applicants) => {
+        // When assignment type is not yet selected, just cache the list
+        if (!this.selectedAssignmentType) {
+          this.applicantList = applicants;
+          this.filteredApplicantList = applicants;
+          this.isLoadingApplicants = false;
+          return;
+        }
+        this.handleApplicantsLoaded(applicants);
+      },
+      error: (error) => this.handleError('Failed to Load Applicants', error, () => this.isLoadingApplicants = false)
+    });
+  }
+
+  loadCategories(): void {
+    this.isLoadingCategories = true;
+    this.dataService.loadCategories(
+      this.selectedAssignmentType!,
+      (categories) => this.handleCategoriesLoaded(categories),
+      (error) => this.handleError('Failed to Load Categories', error, () => this.isLoadingCategories = false)
+    ).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (categories) => this.handleCategoriesLoaded(categories),
+      error: (error) => this.handleError('Failed to Load Categories', error, () => this.isLoadingCategories = false)
+    });
+  }
+
+  loadDocumentTypes(): void {
+    this.isLoadingDocumentTypes = true;
+    this.dataService.loadDocumentTypes(
+      this.selectedCategory,
+      (documentTypes) => this.handleDocumentTypesLoaded(documentTypes),
+      (error) => this.handleError('Failed to Load Document Types', error, () => this.isLoadingDocumentTypes = false)
+    ).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (documentTypes) => this.handleDocumentTypesLoaded(documentTypes),
+      error: (error) => this.handleError('Failed to Load Document Types', error, () => this.isLoadingDocumentTypes = false)
+    });
+  }
+
+  getSaveButtonDisabled(): boolean {
+    return !this.isFormValid || this.isSaving;
+  }
+
+  saveRequestDocument(): void {
+    if (!this.isFormValid) {
+      this.formService.showWarningMessage('Incomplete Form', 'Please complete all required fields.');
+      return;
+    }
+    if (!this.description || !this.description.trim()) {
+      this.formService.showWarningMessage('Description Required', 'Please add a description.');
+      return;
+    }
+    // build request payload expected by backend
+    const requestedDocumentForId = this.selectedAssignmentType === SHARED.APPLICANT
+      ? this.selectedApplicant
+      : this.contextId;
+    const requesterId = this.sessionService.getUserSession()?.accountId;
+    const requestPayload = {
+      applicationId: this.contextId,
+      requestedDocumentForId: requestedDocumentForId,
+      requestedDocumentType: this.selectedDocumentType,
+      requesterId: requesterId,
+      selectedAssignmentType: this.selectedAssignmentType,
+      description: this.description.trim()
+    };
+
+    this.isSaving = true;
+    this.documentHttpService.documentRequest(requestPayload).subscribe({
+      next: () => {
+        this.isSaving = false;
+        this.onRequestSuccess.emit();
+        this.resetForm();
+      },
+      error: (error) => {
+        this.isSaving = false;
+        this.onRequestError.emit(error);
+      }
+    });
+  }
+
+  resetForm(): void {
+    this.selectedAssignmentType = null;
+    this.selectedApplicant = SHARED.EMPTY;
+    this.selectedCategory = SHARED.EMPTY;
+    this.selectedDocumentType = SHARED.EMPTY;
+    this.description = SHARED.EMPTY;
+    this.filteredApplicantList = [];
+    this.categoryOptions = [];
+    this.documentTypeOptions = [];
+    this.isSaving = false;
+    this.isFormValid = false;
+    this.cdr.detectChanges();
+    this.hasUnsavedChangesChange.emit(false);
+  }
+
+  resetSelections(): void {
+    this.selectedApplicant = this.selectedCategory = this.selectedDocumentType = SHARED.EMPTY;
+    this.documentTypeOptions = SHARED.EMPTY_ARRAY;
+  }
+
+  resetDocumentType(): void {
+    this.selectedDocumentType = SHARED.EMPTY;
+    this.documentTypeOptions = SHARED.EMPTY_ARRAY;
+  }
+
+  handleApplicantLoading(): void {
+    if (this.selectedAssignmentType === SHARED.APPLICANT) {
+      this.loadApplicants();
+    } else {
+      this.filterApplicants();
+    }
+  }
+
+  handleApplicantsLoaded(applicants: UserListModel[]): void {
+    this.applicantList = this.documentUpload.sortListByProperty(applicants, 'name');
+    this.filterApplicants();
+    this.isLoadingApplicants = false;
+    this.validateForm();
+  }
+
+  handleCategoriesLoaded(categories: DocumentCategory[]): void {
+    this.categoryOptions = this.documentUpload.sortListByProperty(categories, 'label');
+    this.isLoadingCategories = false;
+    this.validateForm();
+  }
+
+  handleDocumentTypesLoaded(documentTypes: DocumentTypeModel[]): void {
+    this.documentTypeOptions = this.documentUpload.sortListByProperty(documentTypes, 'label', 'name');
+    this.isLoadingDocumentTypes = false;
+    this.validateForm();
+  }
+
+  filterApplicants(): void {
+    this.filteredApplicantList = this.dataService.handleApplicantsLoaded(
+      this.applicantList, this.selectedAssignmentType
+    );
+  }
+
+  validateForm(): void {
+    const baseValid = Boolean(
+      this.selectedAssignmentType &&
+      this.selectedCategory &&
+      this.selectedDocumentType &&
+      this.description && this.description.trim()
+    );
+    const needsApplicant = this.selectedAssignmentType === SHARED.APPLICANT;
+    const hasRequiredFields = needsApplicant ? (baseValid && !!this.selectedApplicant) : baseValid;
+    const previousState = this.isFormValid;
+    this.isFormValid = hasRequiredFields;
+    if (previousState !== this.isFormValid) {
+      this.onFormValidationChange.emit();
+    }
+  }
+
+  validateAndEmit(): void {
+    this.validateForm();
+    this.onFormValidationChange.emit();
+  }
+
+  /** Emits unsaved changes state based on any field being non-empty */
+  private emitUnsavedChanges(): void {
+    const hasChanges = Boolean(
+      (this.selectedAssignmentType && this.selectedAssignmentType !== SHARED.EMPTY) ||
+      (this.selectedApplicant && this.selectedApplicant !== SHARED.EMPTY) ||
+      (this.selectedCategory && this.selectedCategory !== SHARED.EMPTY) ||
+      (this.selectedDocumentType && this.selectedDocumentType !== SHARED.EMPTY) ||
+      (this.description && this.description.trim() !== SHARED.EMPTY)
+    );
+    this.hasUnsavedChangesChange.emit(hasChanges);
+  }
+
+  handleError(_title: string, _error: any, resetLoading: () => void): void {
+    resetLoading();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}
+
+

package/src/lib/document/components/sidebar/sidebar.component.html

@@ -0,0 +1,75 @@
+<!-- PrimeNG Sidebar with proper backdrop handling -->
+<div *ngIf="visible" class="backdrop-shadow" (click)="handleClose()"></div>
+
+<p-sidebar 
+  [(visible)]="visible"
+  [position]="position"
+  [style]="{width: width}"
+  [dismissible]="true"
+  [showCloseIcon]="false"
+  [appendTo]="'body'"
+  [blockScroll]="blockScroll"
+  (visibleChange)="onVisibleChange($event)"
+  (onShow)="onShow.emit()"
+  (onHide)="onSidebarHide()"
+>
+  <ng-template pTemplate="header" *ngIf="title || showCloseButton || showSaveButton">
+    <div class="sidebar-header">
+      <h3 *ngIf="title" class="sidebar-title">{{ title }}</h3>
+      <div class="header-content">
+        <ng-content select="[header]"></ng-content>
+        
+        <p-messages 
+          *ngIf="showSuccessMessage"
+          severity="success"
+          [closable]="false"
+          [style]="{'margin-bottom': '0.5rem'}"
+          class="ml-3"
+        >
+          <ng-template pTemplate="message">
+            <span>{{ successMessage }}</span>
+          </ng-template>
+        </p-messages>
+        
+        <p-messages 
+          *ngIf="showErrorMessage"
+          severity="error"
+          [closable]="false"
+          [style]="{'margin-bottom': '0.5rem'}"
+          class="ml-3"
+        >
+          <ng-template pTemplate="message">
+            <span>{{ errorMessage }}</span>
+          </ng-template>
+        </p-messages>
+
+        <div class="header-actions mr-3">
+          <button 
+            *ngIf="showSaveButton"
+            pButton 
+            type="button" 
+            [label]="saveButtonText"
+            [disabled]="saveButtonDisabled"
+            class="p-button-primary"
+            (click)="onSave.emit()"
+          ></button>
+
+          <button 
+            *ngIf="showCloseButton"
+            pButton 
+            type="button" 
+            icon="pi pi-times"
+            class="p-button-text p-button-rounded"
+            (click)="handleClose()"
+          ></button>
+        </div>
+      </div>
+    </div>
+  </ng-template>
+
+  <ng-template pTemplate="content">
+    <div class="sidebar-content">
+      <ng-content></ng-content>
+    </div>
+  </ng-template>
+</p-sidebar>