cat-documents-ng 1.0.6 → 1.0.8

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

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

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

@@ -1,93 +0,0 @@
-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');
-  });
-});