cat-documents-ng 1.0.4 → 1.0.6

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

@@ -0,0 +1,31 @@
+<div class="status-summary-container">
+  <div class="status-cards">
+    
+    <div 
+      *ngFor="let status of statusDataWithPercentages" 
+      class="status-card {{ status.statusClass }}"
+      [class.selected]="status.isSelected"
+      (click)="selectStatus(status.status || '')"
+    >
+      <div class="status-icon {{ status.iconClass }}">
+        <i [class]="status.icon"></i>
+      </div>
+      <div class="status-info">
+          <div class="status-count">{{ status.count }}</div>
+          <div class="status-name">{{ status.status }}</div>
+          
+      </div>
+    </div>
+  </div>
+  
+  <div class="progress-bar-container">
+    <div class="progress-bar">
+      <div 
+        *ngFor="let status of statusDataWithPercentages" 
+        class="progress-segment"
+        [style.width.%]="status.percentage"
+        [style.background-color]="status.color"
+      ></div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,192 @@
+.status-summary-container {
+  padding: 1rem;
+  padding-top: 0px;
+}
+
+.status-cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.status-card {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.7rem;
+  border-radius: 8px;
+  background: white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  min-width: 150px;
+  flex: 1;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 2px solid transparent;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  }
+
+  &.selected {
+    border-width: 3px !important;
+    border-style: solid !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  }
+
+  // Selection border colors based on status
+  &.selected.status-approved {
+    border-color: #10b981 !important;
+    background: #ECFDF5 !important;
+  }
+
+  &.selected.status-uploaded {
+    border-color: #10b981 !important;
+    background: #ECFDF5 !important;
+  }
+
+  &.selected.status-pending {
+    border-color: #6b7280 !important;
+    background: #F8FAFC !important;
+  }
+
+  &.selected.status-reviewing {
+    border-color: #f59e0b !important;
+    background: #FFFBEB !important;
+  }
+
+  &.selected.status-rejected {
+    border-color: #ef4444 !important;
+    background: #FFF1F2 !important;
+  }
+
+  &.selected.status-alert {
+    border-color: #dc2626 !important;
+    background: #EF4444 !important;
+  }
+
+  // Default background colors for each status
+  &.status-approved {
+    background: #ECFDF5;
+    
+    .status-name {
+      color: #065f46;
+    }
+    
+    .status-count {
+      color: #047857;
+    }
+  }
+
+  &.status-uploaded {
+    background: #ECFDF5;
+    
+    .status-name {
+      color: #065f46;
+    }
+    
+    .status-count {
+      color: #047857;
+    }
+  }
+
+  &.status-pending {
+    background: #F8FAFC;
+    
+    .status-name {
+      color: #475569;
+    }
+    
+    .status-count {
+      color: #334155;
+    }
+  }
+
+  &.status-reviewing {
+    background: #FFFBEB;
+    
+    .status-name {
+      color: #92400e;
+    }
+    
+    .status-count {
+      color: #a16207;
+    }
+  }
+
+  &.status-rejected {
+    background: #FFF1F2;
+    
+    .status-name {
+      color: #be123c;
+    }
+    
+    .status-count {
+      color: #e11d48;
+    }
+  }
+
+  &.status-alert {
+    background: #EF4444;
+    
+    .status-name {
+      color: white;
+    }
+    
+    .status-count {
+      color: white;
+    }
+  }
+}
+
+.status-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: white;
+}
+
+.icon-approved { background-color: #10b981; }
+.icon-uploaded { background-color: #10b981; }
+.icon-pending { background-color: #6b7280; }
+.icon-reviewing { background-color: #f59e0b; }
+.icon-rejected { background-color: #ef4444; }
+.icon-alert { background-color: #dc2626; }
+
+.status-info {
+  flex: 1;
+}
+
+.status-name {
+  font-weight: 600;
+  color: #1f2937;
+  margin-bottom: 0.25rem;
+}
+
+.status-count {
+  font-size: 1.2rem;
+  font-weight: bold;
+  color: #374151;
+}
+
+.progress-bar-container {
+  margin-top: 1rem;
+}
+
+.progress-bar {
+  height: 8px;
+  background-color: #e5e7eb;
+  border-radius: 4px;
+  overflow: hidden;
+  display: flex;
+}
+
+.progress-segment {
+  height: 100%;
+  transition: width 0.3s ease;
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DocumentStatusComponent } from './document-status.component';
+
+describe('DocumentStatusComponent', () => {
+  let component: DocumentStatusComponent;
+  let fixture: ComponentFixture<DocumentStatusComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DocumentStatusComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DocumentStatusComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,87 @@
+import { Component, OnInit, OnDestroy, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { StatusDataModel } from '../../models/status-data.model';
+import { DocumentQuery } from '../../state/document.query';
+import { StatusCalculatorService, CalculatedStatusData } from '../../services/status-calculator.service';
+import { Subscription } from 'rxjs';
+import { SHARED } from '../../../../Shared/constant/SHARED';
+import { DocumentHelperService } from '../../services/document.service';
+
+@Component({
+  selector: 'lib-document-status',
+  standalone: false,
+  templateUrl: './document-status.component.html',
+  styleUrl: './document-status.component.scss'
+})
+export class DocumentStatusComponent implements OnInit, OnDestroy, OnChanges {
+  @Input() contextId: string = SHARED.EMPTY;
+  @Input() statusData: any;
+  
+  selectedStatus: string | null = null;
+  statusDataWithPercentages: CalculatedStatusData[] = [];
+
+  
+  private subscription = new Subscription();
+
+  constructor(
+    private documentQuery: DocumentQuery,
+    private documentService: DocumentHelperService,
+    private statusCalculatorService: StatusCalculatorService
+  ) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['contextId'] && !changes['contextId'].firstChange) {
+      // When contextId changes, refetch status data for the new context
+      this.refetchStatusData();
+    }
+  }
+
+  ngOnInit(): void {
+    this.subscription.add(
+      this.documentQuery.selectSelectedStatus().subscribe(status => {
+        this.selectedStatus= status;
+        this.updateCalculatedStatusData();
+      })
+    );
+
+    this.subscription.add(
+      this.documentQuery.selectStatusData().subscribe(statusData => {
+        if (statusData && statusData.length > 0) {
+          this.statusData = statusData;
+          this.updateCalculatedStatusData();
+        }
+      })
+    );
+
+    if (this.contextId && this.contextId !== SHARED.EMPTY) {
+      this.refetchStatusData();
+    }
+  }
+
+  private refetchStatusData(): void {
+    if (this.contextId && this.contextId !== SHARED.EMPTY) {
+      const currentState = this.documentQuery.getSelectionState();
+      const statusContextId = currentState.userId || null;
+      const categoryId = currentState.menuItem || null;
+      
+      // Use the document service to refresh status data for the new context
+      this.documentService.refreshStatusData(this.contextId, statusContextId, categoryId);
+    }
+  }
+
+  
+  selectStatus(status: string): void {
+    const newStatus = this.selectedStatus === status ? null : status;
+    this.documentService.setSelectedStatus(newStatus);
+  }
+
+  private updateCalculatedStatusData(): void {
+    this.statusDataWithPercentages = this.statusCalculatorService.calculateStatusDataWithPercentages(
+      this.statusData,
+      this.selectedStatus
+    );
+  }
+  
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+}

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

@@ -0,0 +1,160 @@
+<div class="document-upload-container">
+  <!-- Assignment Section -->
+  <div class="assignment-section" *ngIf="!isFormHide">
+    <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]="'applicant'"
+        ></p-radioButton>
+        <label [for]="'applicant'" class="radio-label">Applicant(s) </label>
+      </div>
+      <div class="radio-item">
+        <p-radioButton 
+          name="assignmentType" 
+          value="Application" 
+          [(ngModel)]="selectedAssignmentType"
+          (onClick)="onAssignmentTypeChange()"
+          [inputId]="'application'"
+        ></p-radioButton>
+        <label [for]="'application'" class="radio-label">Application</label>
+      </div>
+    </div>
+  </div>
+
+  <!-- Applicant Selection (only shown when Applicant is selected) -->
+  <div class="applicant-section" *ngIf="!isFormHide && 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="selectedApplicant"
+          [value]="applicant._id"
+          [(ngModel)]="selectedApplicant"
+          [inputId]="'applicant-' + applicant._id"
+          (onClick)="onApplicantSelectionChange()"
+        ></p-radioButton>
+        <label [for]="'applicant-' + applicant._id" class="applicant-label">
+          {{ applicant.name }}
+        </label>
+      </div>
+    </div>
+  </div>
+
+  <!-- Category Selection -->
+  <div class="category-section" *ngIf="!isFormHide">
+    <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" *ngIf="!isFormHide">
+    <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>
+
+  <!-- File Upload Section -->
+  <div class="file-upload-section">
+    <h4>Upload Documents <span class="text-red-500" *ngIf="!isFormHide">*</span></h4>
+    <div class="grid">
+      <div class="col-12 md:col-12">
+        <p-fileUpload 
+          #fileUploader 
+          [multiple]="true" 
+          auto="true" 
+          [accept]="getFileUploadAcceptString()" 
+          maxFileSize="27295616"
+          (onSelect)="onSelectedFiles($event)"
+        >
+          <ng-template pTemplate="header" let-chooseCallback="chooseCallback" let-clearCallback="clearCallback">
+            <div class="docHeader p-2 flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
+              <div class="flex gap-2">
+                <p-button 
+                  *ngIf="!isMultiAttachmentHidden"
+                  (onClick)="choose($event, chooseCallback)" 
+                  icon="pi pi-images" 
+                  [rounded]="true"
+                  [outlined]="true" 
+                />
+              </div>
+            </div>
+          </ng-template>
+          <ng-template pTemplate="content" let-removeFileCallback="removeFileCallback"
+            let-removeUploadedFileCallback="removeUploadedFileCallback">
+            <div class="col-12 md:col-12 p-0">
+              <div class="col-12 md:col-12 p-0" *ngIf="uploadedFiles.length > 0">
+                <div *ngFor="let uploadedFile of uploadedFiles; let i = index"
+                  class="m-0 flex flex-column align-items-center gap-1 mt-3">
+                  <div class="col-12 md:col-12 p-0 flex documentInfo">
+                    <div class="documentImage">
+                      <img src="../../../../assets/images/document.png" [alt]="uploadedFile.file.name" width="45" height="50"
+                        class="object-contain" />
+                    </div>
+                    <div class="flex w-full flex-column mt-2 ml-2">
+                      <div class="flex justify-content-between">
+                        <div style="font-weight: bold;font-size: 14px">
+                          {{ uploadedFile.file.name }}
+                        </div>
+                        <i class="pi pi-times cursor-pointer" (click)="handleDocumentRemove(uploadedFile.file,i)"></i>
+                      </div>
+                      <div class="flex justify-content-between mt-1">
+                        <div style="color: #676B89; font-size: 12px; color: green;" class="pi pi-verified"> 
+                          {{ uploadedFile.formattedSize }}
+                        </div>
+                        <div class="white-space-nowrap" style="color: #0F8BFD; font-family: 14px;"> 
+                          {{ uploadedFile.progress }} % 
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12 md:col-12 p-0">
+                    <p-progressBar 
+                      [value]="uploadedFile.progress ?? 0" 
+                      [showValue]="false" 
+                      styleClass="h-1/2rem md:ml-auto relative"
+                      [ngClass]="{ 'exceeded-progress-bar': (uploadedFile.progress ?? 0) > 100 }"
+                    >
+                    </p-progressBar>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </ng-template>
+          <ng-template pTemplate="empty" let-chooseCallback="chooseCallback">
+            <div *ngIf="!uploadedFiles.length" class="flex align-items-center justify-content-center flex-column"
+              (click)="triggerFileUpload()">
+              <i class="pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400"></i>
+              <p class="mt-4 mb-0">Drag and drop files here to upload.</p>
+            </div>
+          </ng-template>
+          <ng-template pTemplate="file"> </ng-template>
+        </p-fileUpload>
+      </div>
+    </div>
+  </div>
+</div>