cat-documents-ng 1.0.6 → 1.0.7

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

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

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

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

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

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