cat-documents-ng 1.0.4 → 1.0.6

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

@@ -0,0 +1,96 @@
+<div class="document-review-container" *ngIf="showHistory && historyData.length > 0">
+  <!-- Header Section -->
+  <div class="review-header">
+    <h2 class="review-title">Document Review</h2>
+    <!-- <div class="actions-menu" *ngIf="selectedDocument?.isUploaded || selectedDocument?.status == 'Approved'"> -->
+      <!-- <div class="actions-menu" *ngIf="(selectedDocument?.isUploaded || selectedDocument?.status == 'Approved') && !selectedDocument?.isSystemDocument"> -->
+        <div class="actions-menu" *ngIf="(selectedDocument?.status !== 'Approved') && (!selectedDocument?.isSystemDocument)">
+        <button class="actions-btn" (click)="toggleActionsMenu()" [class.active]="showActionsMenu">
+        Actions
+        <i class="pi pi-chevron-down" [class.rotated]="showActionsMenu"></i>
+      </button>
+
+      <!-- Actions Dropdown Menu -->
+      <div class="actions-dropdown" *ngIf="showActionsMenu" (click)="$event.stopPropagation()">
+        <div class="dropdown-item" *ngIf="selectedDocument?.status == 'Approved' || selectedDocument?.isUploaded || selectedDocument?.status == 'Uploaded'">
+          <ng-content [select]="'action-launcher'"></ng-content>
+        </div>
+        <div *ngIf="selectedDocument?.isUploaded || selectedDocument?.status === 'Rejected' || selectedDocument?.status === 'Reviewing'" [permission]="'documents-deleteDocumentByDocumentId'" class="dropdown-item" (click)="onDeleteTask()">
+          <span>Delete task</span>
+        </div>
+      </div>
+      
+    </div>
+  </div>
+
+  <!-- Document Actions Component - Below Header -->
+  <div class="document-actions-section">
+    <ng-content select="[actions-component]"></ng-content>
+  </div>
+
+
+  <!-- Alerts Section -->
+  <!-- <div class="alerts-section">
+    <div class="alert-card">
+      <div class="alert-header">
+        <i class="pi pi-exclamation-triangle alert-icon"></i>
+        <span class="alert-text">Alerts</span>
+        <div class="alert-badge">
+          <span class="alert-count">{{ getAlertCount() }}</span>
+          <i class="pi pi-chevron-right"></i>
+        </div>
+      </div>
+    </div>
+  </div> -->
+
+  <!-- Timeline Section -->
+  <div class="timeline-section">
+    <h3 class="timeline-title">Timeline</h3>
+    <div class="timeline-container">
+      <div class="timeline-item" *ngFor="let section of processedHistoryData">
+        <ng-container *ngFor="let item of section.list; let i = index">
+          <div class="timeline-event mb-2" *ngIf="!item.shouldHide">
+          <div class="event-card" [ngClass]="item.eventCardClass">
+            <!-- Event Header -->
+            <div class="event-header">
+              <div class="event-info">
+                  <i [class]="item.eventIcon"></i>
+                <span class="event-label">{{ item.label }}</span>
+              </div>
+              <div class="event-timestamp">{{ item.dateTime }}</div>
+            </div>
+            <!-- User Information -->
+            <div class="event-user mb-2">
+              <span class="user-name">{{ item.userName }}</span>
+              <span class="user-role">({{ item.userRole }})</span>
+            </div>
+            <!-- Event Description -->
+            <div class="event-description" *ngIf="item.requestDescription">
+              <ul class="event-description-list" *ngIf="item.label.toLowerCase().includes('requested')">
+                <li class="event-description-item">{{ item.requestDescription }}</li>
+              </ul>
+              <p *ngIf="!item.label.toLowerCase().includes('requested')">{{ item.requestDescription }}</p>
+            </div>
+
+            <!-- Document Upload Cards -->
+            <div class="document-uploads" *ngIf="item.documentList && item.documentList.length > 0">
+              <div class="uploaded-documents">
+                <div class="document-card" *ngFor="let doc of item.documentList" (click)="onDocumentClick(doc)">
+                  <div class="document-icon">
+                    <i class="pi pi-file"></i>
+                  </div>
+                  <span class="document-name">{{ doc.docName }}</span>
+                </div>
+              </div>
+            </div>
+
+
+          </div>
+        </div>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+
+  <!-- <ng-content [select]="'actions-component'"></ng-content> -->
+</div>

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

@@ -0,0 +1,392 @@
+.document-review-container {
+  border-radius: 8px;
+  max-height: 100%;
+  overflow-y: auto;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+  // Header Section
+  .review-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #e5e7eb;
+
+    .review-title {
+      font-size: 1.5rem;
+      font-weight: 600;
+      color: #1f2937;
+      margin: 0;
+    }
+
+         .actions-menu {
+       position: relative;
+
+       .actions-btn {
+         background: #ffffff;
+         border: 1px solid #d1d5db;
+         border-radius: 6px;
+         padding: 0.5rem 1rem;
+         color: #374151;
+         font-size: 0.875rem;
+         cursor: pointer;
+         display: flex;
+         align-items: center;
+         gap: 0.5rem;
+         transition: all 0.2s;
+
+         &:hover {
+           background: #f9fafb;
+         }
+
+         &.active {
+           background: #f3f4f6;
+           border-color: #9ca3af;
+         }
+
+         i {
+           font-size: 0.75rem;
+           transition: transform 0.2s;
+
+           &.rotated {
+             transform: rotate(180deg);
+           }
+         }
+       }
+
+       .actions-dropdown {
+         position: absolute;
+         top: 100%;
+         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: 180px;
+         margin-top: 0.25rem;
+
+         .dropdown-item {
+           padding: 0.75rem 1rem;
+           cursor: pointer;
+           color: #374151;
+           font-size: 0.875rem;
+           border-bottom: 1px solid #f3f4f6;
+           transition: background-color 0.2s;
+
+           &:last-child {
+             border-bottom: none;
+             border-radius: 0 0 8px 8px;
+           }
+
+           &:first-child {
+             border-radius: 8px 8px 0 0;
+           }
+
+           &:hover {
+             background: #f9fafb;
+           }
+
+           span {
+             display: block;
+           }
+         }
+       }
+     }
+  }
+
+  // Document Actions Section (Accept/Reject buttons)
+  ::ng-deep document-actions {
+    margin-bottom: 1.5rem;
+    
+    .actions-card {
+      margin: 0;
+      width: 100%;
+    }
+  }
+
+  // Document Actions Section
+  .document-actions-section {
+    padding: 1rem 0;
+  }
+
+  // Alerts Section
+  .alerts-section {
+    margin-bottom: 2rem;
+
+    .alert-card {
+      background: #ffffff;
+      border: 1px solid #e5e7eb;
+      border-radius: 8px;
+      padding: 1rem;
+
+      .alert-header {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+
+        .alert-icon {
+          color: #ef4444;
+          font-size: 1.25rem;
+        }
+
+        .alert-text {
+                      font-weight: 500;
+          color: #1f2937;
+          font-size: 1rem;
+        }
+
+        .alert-badge {
+          margin-left: auto;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          background: #ef4444;
+          color: #ffffff;
+          border-radius: 50%;
+          width: 24px;
+          height: 24px;
+          justify-content: center;
+          position: relative;
+
+          .alert-count {
+            font-size: 0.75rem;
+            font-weight: 600;
+          }
+
+          i {
+            position: absolute;
+            right: -8px;
+            font-size: 0.75rem;
+            color: #ef4444;
+            background: #ffffff;
+            border-radius: 50%;
+            width: 16px;
+            height: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+                }
+              }
+            }
+          }
+        }
+
+  // Timeline Section
+  .timeline-section {
+    .timeline-title {
+            font-size: 1.25rem;
+      font-weight: 600;
+      color: #1f2937;
+      margin: 0 0 1.5rem 0;
+    }
+
+    .timeline-container {
+        .timeline-item {
+        margin-bottom: 1.5rem;
+
+        .timeline-event {
+          .event-card {
+            background: #ffffff;
+            border: 1px solid #e5e7eb;
+            border-radius: 8px;
+            padding: 1.25rem;
+            position: relative;
+
+            // Event Header
+            .event-header {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin-bottom: 1rem;
+
+              .event-info {
+                display: flex;
+                align-items: center;
+                gap: 0.75rem;
+
+                .event-icon {
+                  width: 25px;
+                  height: 25px;
+                  border-radius: 50%;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  color: #ffffff;
+
+                  i {
+                    font-size: 1rem;
+                  }
+
+                  &.icon-requested {
+                    background: #3b82f6;
+                  }
+
+                  &.icon-accepted {
+                    background: #10b981;
+                  }
+
+                  &.icon-rejected {
+                    background: #ef4444;
+                  }
+
+                  &.icon-default {
+                    background: #6b7280;
+                  }
+                }
+
+                .event-label {
+                  font-weight: 600;
+                  color: #1f2937;
+                  font-size: 1rem;
+                }
+              }
+
+              .event-timestamp {
+                color: #6b7280;
+                font-size: 0.875rem;
+                font-weight: 500;
+              }
+            }
+
+            // Event Description
+            .event-description {
+              margin-bottom: 1rem;
+
+              p {
+                color: #374151;
+                line-height: 1.5;
+                margin: 0;
+                font-size: 0.875rem;
+              }
+            }
+
+            // Document Upload Cards
+            .document-uploads {
+              margin-bottom: 1rem;
+
+              .uploaded-documents {
+                display: flex;
+                flex-direction: column;
+                gap: 0.75rem;
+
+              .document-card {
+                  background: #f8fafc;
+                  border: 1px solid #e2e8f0;
+                border-radius: 8px;
+                padding: 0.5rem;
+                display: flex;
+                align-items: center;
+                  gap: 0.75rem;
+                  cursor: pointer;
+                  transition: all 0.2s ease;
+
+                  &:hover {
+                    background: #e2e8f0;
+                    border-color: #3b82f6;
+                    transform: translateY(-1px);
+                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+                  }
+
+                  &:active {
+                    transform: translateY(0);
+                    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+                  }
+
+                  .document-icon {
+                    color: #3b82f6;
+                    font-size: 1.25rem;
+                  }
+
+                  .document-name {
+                    color: #1f2937;
+                      font-size: 0.875rem;
+                  }
+                }
+              }
+            }
+
+            // User Information
+            .event-user {
+              font-size: 0.875rem;
+              .user-name {
+                color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+                font-weight: 500;
+              }
+
+              .user-role {
+                color: #6b7280;
+                margin-left: 0.25rem;
+              }
+            }
+
+            // Event-specific styling
+            &.event-requested {
+              background: #DBEAFE;
+              border-radius: 16px;
+              font-size: 0.875rem;
+    line-height: 1.25rem;
+            }
+
+            &.event-accepted {
+              background: #DCFCE7;
+              border-radius: 16px;
+              font-size: 0.875rem;
+    line-height: 1.25rem;
+            }
+
+            &.event-rejected {
+              background: #FEE2E2;
+              border-radius: 16px;
+              font-size: 0.875rem;
+    line-height: 1.25rem;
+            }
+
+            &.event-default {
+              border-left: 4px solid #6b7280;
+            }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+
+// Responsive design
+@media (max-width: 768px) {
+  .document-review-container {
+    padding: 1rem;
+
+    .review-header {
+      flex-direction: column;
+      gap: 1rem;
+      align-items: flex-start;
+
+      .actions-menu {
+        align-self: flex-end;
+      }
+    }
+
+
+
+    .timeline-section {
+      .timeline-container {
+        .timeline-item {
+          .timeline-event {
+            .event-card {
+              .event-header {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 0.5rem;
+
+                .event-timestamp {
+                  align-self: flex-end;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  }
+} 

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

@@ -0,0 +1,93 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DocumentHistoryComponent } from './document-history.component';
+import { DocumentHistoryItem, DocumentHistorySection } from '../../models/document-history.model';
+
+describe('DocumentHistoryComponent', () => {
+  let component: DocumentHistoryComponent;
+  let fixture: ComponentFixture<DocumentHistoryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DocumentHistoryComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DocumentHistoryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should not show history when showHistory is false', () => {
+    component.showHistory = false;
+    component.historyData = [];
+    fixture.detectChanges();
+    
+    const container = fixture.nativeElement.querySelector('.document-history-container');
+    expect(container).toBeNull();
+  });
+
+  it('should show history when showHistory is true and data exists', () => {
+    const mockData: DocumentHistorySection[] = [
+      {
+        header: 'Document History',
+        list: [
+          {
+            label: 'Document Uploaded',
+            dateTime: '29 Jul 2025, 17:59:03',
+            requestDescription: 'Test upload',
+            userName: 'Test User',
+            userRole: 'Broker'
+          }
+        ]
+      }
+    ];
+
+    component.showHistory = true;
+    component.historyData = mockData;
+    fixture.detectChanges();
+    
+    const container = fixture.nativeElement.querySelector('.document-history-container');
+    expect(container).toBeTruthy();
+  });
+
+  it('should return correct icon for document uploaded', () => {
+    const icon = component.getActionIcon('Document Uploaded');
+    expect(icon).toBe('pi pi-upload');
+  });
+
+  it('should return correct icon for document rejected', () => {
+    const icon = component.getActionIcon('Document Rejected');
+    expect(icon).toBe('pi pi-times');
+  });
+
+  it('should return correct icon for document accepted', () => {
+    const icon = component.getActionIcon('Document Accepted');
+    expect(icon).toBe('pi pi-check');
+  });
+
+  it('should return correct color for document uploaded', () => {
+    const color = component.getActionColor('Document Uploaded');
+    expect(color).toBe('text-green-600');
+  });
+
+  it('should return correct color for document rejected', () => {
+    const color = component.getActionColor('Document Rejected');
+    expect(color).toBe('text-red-600');
+  });
+
+  it('should return correct background color for document uploaded', () => {
+    const bgColor = component.getActionBgColor('Document Uploaded');
+    expect(bgColor).toBe('bg-green-50');
+  });
+
+  it('should return correct background color for document rejected', () => {
+    const bgColor = component.getActionBgColor('Document Rejected');
+    expect(bgColor).toBe('bg-red-50');
+  });
+});