cat-documents-ng 1.0.4 → 1.0.6

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

@@ -0,0 +1,235 @@
+.flex {
+  display: flex;
+}
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.flex-col {
+  flex-direction: column;
+}
+.text-muted-color {
+  color: #6c757d; // Adjust to match your theme
+}
+.p-fileupload-buttonbar {
+  padding: 0px;
+}
+.p-fileupload-content {
+  background-color: #0f8bfd1a;
+}
+.p-fileupload {
+  .p-fileupload-content {
+    padding: 1rem 1rem;
+  }
+  
+}
+.docHeader{
+  .p-button-icon{
+    padding: 0.5rem;
+  }
+}
+
+.document-upload-container {
+  padding: 1rem;
+  max-height: 90vh;
+}
+
+.assignment-section,
+.applicant-section,
+.category-section,
+.document-type-section,
+.file-upload-section {
+  margin-bottom: 1.5rem;
+}
+
+.assignment-section h4,
+.applicant-section h4,
+.category-section h4,
+.document-type-section h4,
+.file-upload-section h4 {
+  margin: 0 0 0.75rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #212529;
+}
+
+.radio-group {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.radio-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  
+  // Style for selected state - just change text color, no box styling
+  &:has(.p-radiobutton-box.p-highlight) {
+    .radio-label {
+      color: #0F8BFD;
+      font-weight: 600;
+    }
+  }
+}
+
+.radio-label {
+  font-size: 0.9rem;
+  color: #495057;
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.2s ease;
+}
+
+// PrimeNG Dropdown styling
+::ng-deep {
+  .p-dropdown {
+    width: 100%;
+    
+    .p-dropdown-label {
+      font-size: 0.9rem;
+      color: #495057;
+    }
+    
+    .p-dropdown-trigger {
+      color: #6c757d;
+    }
+  }
+  
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #0F8BFD;
+  }
+  
+  .p-dropdown:not(.p-disabled).p-focus {
+    border-color: #0F8BFD;
+    box-shadow: 0 0 0 2px rgba(15, 139, 253, 0.2);
+  }
+}
+
+// PrimeNG RadioButton styling
+::ng-deep {
+  .p-radiobutton {
+    .p-radiobutton-box {
+      border-color: #ced4da;
+      border-radius: 4px;
+      width: 18px;
+      height: 18px;
+      
+      &:hover {
+        border-color: #0F8BFD;
+      }
+      
+      &.p-highlight {
+        border-color: #0F8BFD;
+        background-color: transparent; // Remove blue background
+      }
+    }
+    
+    .p-radiobutton-icon {
+      background-color: #0F8BFD; // Keep the blue dot for selected state
+      width: 8px;
+      height: 8px;
+      border-radius: 2px;
+    }
+  }
+}
+
+// Applicant list styling improvements for grid-like layout
+.applicant-section {
+  .grid {
+    margin: 0;
+    padding: 0;
+  }
+  
+  .applicant-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    border-radius: 0.5rem;
+    background-color: #ffffff;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    margin-bottom: 0.75rem;
+    
+    // Style for selected state - just change text color, no box styling
+    &:has(.p-radiobutton-box.p-highlight) {
+      .applicant-label {
+        color: #0F8BFD;
+        font-weight: 600;
+      }
+    }
+  }
+  
+  .applicant-label {
+    font-size: 0.95rem;
+    color: #495057;
+    cursor: pointer;
+    user-select: none;
+    flex: 1;
+    font-weight: 500;
+    margin: 0;
+    transition: color 0.2s ease;
+  }
+}
+
+// Responsive grid adjustments
+@media (max-width: 768px) {
+  .applicant-section {
+    .applicant-item {
+      margin-bottom: 0.5rem;
+      padding: 0.75rem;
+      min-height: 50px;
+    }
+    
+    .applicant-label {
+      font-size: 0.9rem;
+    }
+  }
+  
+  .document-upload-container {
+    padding: 0.75rem;
+  }
+  
+  .assignment-section,
+  .applicant-section,
+  .category-section,
+  .document-type-section,
+  .file-upload-section {
+    margin-bottom: 1rem;
+  }
+}
+// ... existing code ...
+
+// Fix dropdown width issues
+.category-section,
+.document-type-section {
+  .p-dropdown {
+    width: 100% !important;
+    min-width: 100% !important;
+  }
+  
+  // Ensure the dropdown container takes full width
+  .p-dropdown-panel {
+    width: 100% !important;
+  }
+}
+
+// Alternative approach - target the dropdown wrapper
+:host ::ng-deep {
+  .p-dropdown {
+    width: 100% !important;
+  }
+  
+  .p-dropdown-panel {
+    width: 100% !important;
+  }
+}
+
+// ... existing code ...
+// Remove the old applicant-list styling since we're using grid now
+.applicant-list {
+  display: none;
+}

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

@@ -0,0 +1,95 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DocumentUploadComponent } from './document-upload.component';
+import { FileUploadModule } from 'primeng/fileupload';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { MessageService, PrimeNGConfig } from 'primeng/api';
+import { ChangeDetectorRef } from '@angular/core';
+import { FileFormatService } from '../../services/file-format.service';
+import { DocumentService } from '../../state/document.service';
+import { DocumentUploadService } from '../../services/document-upload.service';
+
+describe('DocumentUploadComponent', () => {
+  let component: DocumentUploadComponent;
+  let fixture: ComponentFixture<DocumentUploadComponent>;
+  let mockFileFormatService: jasmine.SpyObj<FileFormatService>;
+  let mockDocumentService: jasmine.SpyObj<DocumentService>;
+  let mockDocumentUploadService: jasmine.SpyObj<DocumentUploadService>;
+
+  beforeEach(async () => {
+    mockFileFormatService = jasmine.createSpyObj('FileFormatService', ['formatFileSize']);
+    mockDocumentService = jasmine.createSpyObj('DocumentService', ['uploadDocument']);
+    mockDocumentUploadService = jasmine.createSpyObj('DocumentUploadService', ['getUploadFileData']);
+
+    await TestBed.configureTestingModule({
+      declarations: [DocumentUploadComponent],
+      imports: [FileUploadModule, HttpClientTestingModule],
+      providers: [
+        MessageService,
+        PrimeNGConfig,
+        ChangeDetectorRef,
+        { provide: FileFormatService, useValue: mockFileFormatService },
+        { provide: DocumentService, useValue: mockDocumentService },
+        { provide: DocumentUploadService, useValue: mockDocumentUploadService },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DocumentUploadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should trigger file upload dialog when triggerFileUpload is called', () => {
+    spyOn(component.fileUploader, 'choose');
+    component.triggerFileUpload();
+    expect(component.fileUploader.choose).toHaveBeenCalled();
+  });
+
+  it('should handle file selection and upload', () => {
+    const mockFile = new File(['content'], 'test.pdf', { type: 'application/pdf' });
+    const event = { currentFiles: [mockFile] };
+    mockFileFormatService.formatFileSize.and.returnValue('10 KB');
+    component.onSelectedFiles(event);
+    expect(mockDocumentUploadService.getUploadFileData).toHaveBeenCalledWith(mockFile, component.contextId);
+    expect(component.uploadedFiles.length).toBe(1);
+    expect(component.uploadedFiles[0].file).toBe(mockFile);
+    expect(component.uploadedFiles[0].formattedSize).toBe('10 KB');
+    expect(component.uploadedFiles[0].progress).toBe(100);
+  });
+
+  it('should remove a file from the uploaded files list', () => {
+    const mockFile = new File(['content'], 'test.pdf', { type: 'application/pdf' });
+    component.uploadedFiles = [
+      { file: mockFile, formattedSize: '10 KB', progress: 100, uploadResponse: null, url: undefined, contentType: undefined },
+    ];
+    const fileProgressSpy = spyOn(component.fileProgress, 'delete');
+    component.handleDocumentRemove(mockFile, 0);
+    expect(component.uploadedFiles.length).toBe(0);
+    expect(fileProgressSpy).toHaveBeenCalledWith(mockFile);
+  });
+
+  it('should calculate and return file progress', () => {
+    const mockFile = new File(['content'], 'test.pdf', { type: 'application/pdf' });
+    component.fileProgress.set(mockFile, 75);
+    const progress = component.getProgress(mockFile);
+    expect(progress).toBe(75);
+  });
+
+  it('should format file size correctly', () => {
+    mockFileFormatService.formatFileSize.and.returnValue('10 KB');
+    component.formatSize(10240);
+    expect(component.fileSize).toBe('10 KB');
+    expect(mockFileFormatService.formatFileSize).toHaveBeenCalledWith(10240, jasmine.any(PrimeNGConfig));
+  });
+
+  it('should clear files after selection', () => {
+    spyOn(component.fileUploader, 'clear');
+    const mockFile = new File(['content'], 'test.pdf', { type: 'application/pdf' });
+    const event = { currentFiles: [mockFile] };
+    component.onSelectedFiles(event);
+    expect(component.fileUploader.clear).toHaveBeenCalled();
+  });
+});