cat-documents-ng 1.0.5 → 1.0.6

package/src/Shared/components/confirmation-dialog/confirmation-dialog.component.html

@@ -0,0 +1,3 @@
+<!-- This component no longer renders a p-confirmDialog element -->
+<!-- The p-confirmDialog should be placed only once in the main app component -->
+<!-- This component now only provides methods to trigger confirmations via ConfirmationService -->

package/src/Shared/components/confirmation-dialog/confirmation-dialog.component.scss

@@ -0,0 +1,13 @@
+// PrimeNG ConfirmDialog component handles all styling
+// Custom styles are no longer needed
+.btn-danger{
+    background-color: #ef4444;
+    color: #ffffff;
+    border-color: #e53e3e;
+    max-width: 100px;
+}
+.btn-secondary{
+    background-color: #f3f4f6;
+    color: black;
+    max-width: 100px;
+}

package/src/Shared/components/confirmation-dialog/confirmation-dialog.component.spec.ts

@@ -0,0 +1,70 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ConfirmationDialogComponent } from './confirmation-dialog.component';
+import { ConfirmationService } from 'primeng/api';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+
+describe('ConfirmationDialogComponent', () => {
+  let component: ConfirmationDialogComponent;
+  let fixture: ComponentFixture<ConfirmationDialogComponent>;
+  let confirmationService: jasmine.SpyObj<ConfirmationService>;
+
+  beforeEach(async () => {
+    const confirmationServiceSpy = jasmine.createSpyObj('ConfirmationService', ['confirm']);
+
+    await TestBed.configureTestingModule({
+      declarations: [ ConfirmationDialogComponent ],
+      imports: [ ConfirmDialogModule ],
+      providers: [
+        { provide: ConfirmationService, useValue: confirmationServiceSpy }
+      ]
+    })
+    .compileComponents();
+
+    confirmationService = TestBed.inject(ConfirmationService) as jasmine.SpyObj<ConfirmationService>;
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfirmationDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should call confirmationService.confirm when confirm method is called', () => {
+    const options = { message: 'Test message' };
+    const acceptCallback = () => {};
+    const rejectCallback = () => {};
+
+    component.confirm(options, acceptCallback, rejectCallback);
+
+    expect(confirmationService.confirm).toHaveBeenCalledWith(
+      jasmine.objectContaining({
+        message: 'Test message',
+        accept: acceptCallback,
+        reject: rejectCallback
+      })
+    );
+  });
+
+  it('should call confirmationService.confirm with delete options when confirmDelete is called', () => {
+    const itemName = 'Test Document';
+    const acceptCallback = () => {};
+    const rejectCallback = () => {};
+
+    component.confirmDelete(itemName, acceptCallback, rejectCallback);
+
+    expect(confirmationService.confirm).toHaveBeenCalledWith(
+      jasmine.objectContaining({
+        message: `Are you sure you want to delete "${itemName}"?`,
+        header: 'Delete Confirmation',
+        acceptLabel: 'Delete',
+        rejectLabel: 'Cancel',
+        accept: acceptCallback,
+        reject: rejectCallback
+      })
+    );
+  });
+});

package/src/Shared/components/confirmation-dialog/confirmation-dialog.component.ts

@@ -0,0 +1,133 @@
+import { Component, Input, Injectable } from '@angular/core';
+import { ConfirmationService, Confirmation } from 'primeng/api';
+
+export interface ConfirmationOptions {
+  message: string;
+  header?: string;
+  icon?: string;
+  acceptLabel?: string;
+  rejectLabel?: string;
+  acceptIcon?: string;
+  rejectIcon?: string;
+  acceptButtonClass?: string;
+  rejectButtonClass?: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+@Component({
+  selector: 'app-confirmation-dialog',
+  templateUrl: './confirmation-dialog.component.html',
+  standalone: false,
+  styleUrls: ['./confirmation-dialog.component.scss']
+})
+export class ConfirmationDialogComponent {
+  @Input() confirmationOptions: ConfirmationOptions = {
+    message: 'Are you sure that you want to proceed?',
+    header: '',
+    icon: '',
+    acceptLabel: 'Yes',
+    rejectLabel: 'No',
+    acceptIcon: 'pi pi-check',
+    rejectIcon: 'pi pi-times',
+    acceptButtonClass: 'btn-danger',
+    rejectButtonClass: 'btn-secondary'
+  };
+
+  constructor(private confirmationService: ConfirmationService) {}
+
+  /**
+   * Shows the confirmation dialog with the specified options
+   * @param options - Configuration options for the confirmation dialog
+   * @param acceptCallback - Function to execute when user accepts
+   * @param rejectCallback - Function to execute when user rejects
+   */
+  confirm(
+    options: Partial<ConfirmationOptions>,
+    acceptCallback: () => void,
+    rejectCallback?: () => void
+  ): void {
+    const confirmation: Confirmation = {
+      message: options.message || this.confirmationOptions.message,
+      header: options.header || this.confirmationOptions.header,
+      icon: options.icon || this.confirmationOptions.icon,
+      acceptLabel: options.acceptLabel || this.confirmationOptions.acceptLabel,
+      rejectLabel: options.rejectLabel || this.confirmationOptions.rejectLabel,
+      acceptIcon: options.acceptIcon || this.confirmationOptions.acceptIcon,
+      rejectIcon: options.rejectIcon || this.confirmationOptions.rejectIcon,
+      accept: acceptCallback,
+      reject: rejectCallback
+    };
+
+    this.confirmationService.confirm(confirmation);
+  }
+
+
+  /**
+   * Static method to show a confirmation dialog (for components that don't want to inject this component)
+   * @param confirmationService - The ConfirmationService instance
+   * @param options - Configuration options for the confirmation dialog
+   * @param acceptCallback - Function to execute when user accepts
+   * @param rejectCallback - Function to execute when user rejects
+   */
+  static confirm(
+    confirmationService: ConfirmationService,
+    options: Partial<ConfirmationOptions>,
+    acceptCallback: () => void,
+    rejectCallback?: () => void
+  ): void {
+    const defaultOptions: ConfirmationOptions = {
+      message: 'Are you sure that you want to proceed?',
+      header: '',
+      icon: '',
+      acceptLabel: 'Yes',
+      rejectLabel: 'No',
+      acceptIcon: 'pi pi-check',
+      rejectIcon: 'pi pi-times',
+      acceptButtonClass: 'btn-success',
+      rejectButtonClass: 'btn-secondary'
+    };
+
+    const confirmation: Confirmation = {
+      message: options.message || defaultOptions.message,
+      header: options.header || defaultOptions.header,
+      icon: options.icon || defaultOptions.icon,
+      acceptLabel: options.acceptLabel || defaultOptions.acceptLabel,
+      rejectLabel: options.rejectLabel || defaultOptions.rejectLabel,
+      acceptIcon: options.acceptIcon || defaultOptions.acceptIcon,
+      rejectIcon: options.rejectIcon || defaultOptions.rejectIcon,
+      accept: acceptCallback,
+      reject: rejectCallback
+    };
+
+    confirmationService.confirm(confirmation);
+  }
+
+  /**
+   * Static method to show a delete confirmation dialog
+   * @param confirmationService - The ConfirmationService instance
+   * @param itemName - Name of the item to be deleted
+   * @param acceptCallback - Function to execute when user accepts deletion
+   * @param rejectCallback - Function to execute when user rejects deletion
+   */
+  static confirmDelete(
+    confirmationService: ConfirmationService,
+    itemName: string,
+    acceptCallback: () => void,
+    rejectCallback?: () => void
+  ): void {
+    ConfirmationDialogComponent.confirm(
+      confirmationService,
+      {
+        message: `Are you sure you want to delete "${itemName}"?`,
+        header: 'Delete Confirmation',
+        acceptLabel: 'Delete',
+        rejectLabel: 'Cancel',
+        acceptButtonClass: 'btn-danger'
+      },
+      acceptCallback,
+      rejectCallback
+    );
+  }
+}

package/src/Shared/components/table-primary/table-primary.component.html

@@ -0,0 +1,66 @@
+<div class="table-primary">
+    <p-table [value]="processedData" [tableStyle]="tableStyle">
+        <ng-template pTemplate="header" *ngIf="showHeader">
+            <tr>
+                <ng-container *ngFor="let col of visibleColumns">
+                    <th [style.width]="col.width">
+                        {{ col.header }}
+                    </th>
+                </ng-container>
+            </tr>
+        </ng-template>
+        <ng-template pTemplate="body" let-rowData>
+            <tr (click)="onRowClick($event, rowData)" class="clickable-row">
+                <ng-container *ngFor="let col of visibleColumns">
+                    <td [style.width]="col.width">
+                        <!-- Document Cell -->
+                        <div *ngIf="col.type === SHARED.CELL_TYPE_DOCUMENT" class="document-cell">
+                            <div class="document-info">
+                                <div class="document-icon">
+                                    <i [class]="SHARED.ICON_FILE_PDF" *ngIf="rowData._isPdfFile"></i>
+                                    <i [class]="SHARED.ICON_IMAGE" *ngIf="rowData._isImageFile"></i>
+                                    <i [class]="SHARED.ICON_FILE_EXCEL" *ngIf="rowData._isExcelFile"></i>
+                                    <i [class]="SHARED.ICON_FILE" *ngIf="rowData._isOtherFile"></i>
+                                </div>
+                                <div class="document-details">
+                                    <div class="document-name" [innerHTML]="formatDocumentDisplayName(rowData)"></div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Status Cell -->
+                        
+                        <div *ngIf="col.type === SHARED.CELL_TYPE_STATUS" class="status-cell">
+                            <span class="status-pill" [ngClass]="rowData._statusClass">
+                                <i [class]="rowData._statusIcon"></i>
+                                {{ rowData[col.field] }}
+                            </span>
+                        </div>
+
+                        <!-- Actions Cell -->
+                        <div *ngIf="col.type === SHARED.CELL_TYPE_ACTIONS" class="actions-cell">
+                            <!-- Actions content can be added here if needed -->
+                        </div>
+
+                        <!-- Default Text Cell -->
+                        <div *ngIf="!col.type || col.type === SHARED.CELL_TYPE_TEXT" class="text-cell">
+                            {{ rowData[col.field] }}
+                        </div>
+                    </td>
+                </ng-container>
+            </tr>
+        </ng-template>
+        
+        <!-- No Records Template -->
+        <ng-template pTemplate="emptymessage">
+            <tr>
+                <td [attr.colspan]="getVisibleColumnCount()" class="no-records-cell">
+                    <div class="no-records-content">
+                        <i class="pi pi-inbox" style="font-size: 2rem; color: #6c757d;"></i>
+                        <p class="no-records-text">No records found</p>
+                    </div>
+                </td>
+            </tr>
+        </ng-template>
+    </p-table>
+</div>

package/src/Shared/components/table-primary/table-primary.component.scss

@@ -0,0 +1,227 @@
+// Document table styles
+.document-cell {
+  .document-info {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    text-align: left; // Ensure left alignment
+
+    .document-icon {
+      width: 40px;
+      height: 40px;
+      background-color: #e3f2fd;
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #1976d2;
+      font-size: 1.25rem;
+      flex-shrink: 0; // Prevent icon from shrinking
+    }
+
+    .document-details {
+      flex: 1; // Take remaining space
+      min-width: 0; // Allow text to wrap if needed
+      
+      .document-name {
+        font-weight: 400;
+        color: #334155;
+        line-height: 18px;
+        font-size: 14px;
+        text-align: left;
+        word-break: break-word;
+        
+        // Style for multi-line document names
+        br {
+          margin-bottom: 0.125rem;
+        }
+        
+        // Alias name styling (first line)
+        .alias-name {
+          font-weight: 500;
+          color: #1e40af;
+          font-size: 13px;
+          line-height: 16px;
+        }
+        
+        // Document info styling (second line)
+        .document-info {
+          font-weight: 400;
+          color: #334155;
+          font-size: 14px;
+          line-height: 18px;
+        }
+      }
+    }
+  }
+}
+
+.status-cell {
+  .status-pill {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center; // Center content within the pill
+    gap: 0.375rem;
+    padding: 0.375rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    white-space: nowrap;
+    min-width: 80px; // Ensure consistent pill width
+
+    i {
+      font-size: 0.875rem;
+    }
+
+    &.status-pending {
+      background-color: #f3f4f6;
+      color: #6b7280;
+    }
+
+    &.status-approved {
+      background-color: #d1fae5;
+      color: #065f46;
+    }
+
+    &.status-alert {
+      background-color: #fee2e2;
+      color: #dc2626;
+    }
+
+    &.status-uploaded {
+      background-color: #d1fae5;
+      color: #065f46;
+    }
+
+    &.status-reviewing {
+      background-color: #fef3c7;
+      color: #d97706;
+    }
+
+    &.status-rejected {
+      background-color: #fee2e2;
+      color: #dc2626;
+    }
+  }
+}
+
+.actions-cell {
+  text-align: left; // Changed from center to left to match design
+
+  .p-button {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background-color: transparent;
+    border: none;
+    color: #6c757d;
+
+    &:hover {
+      background-color: #f8f9fa;
+      color: #495057;
+    }
+  }
+}
+
+.text-cell {
+  font-weight: 500;
+  color: #475569;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: left; // Ensure left alignment
+}
+
+// Clickable row styles
+.clickable-row {
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: #f8f9fa !important;
+  }
+
+  &:active {
+    background-color: #e9ecef !important;
+  }
+}
+
+// Table styling
+::ng-deep .p-datatable {
+
+  .p-datatable-wrapper {
+    // border: none;
+    border: 1px solid #E2E8F0;
+    border-radius: 10px;
+  }
+
+  .p-datatable-thead > tr > th {
+    background-color: #f8f9fa;
+    border: none;
+    border-bottom: 1px solid #dee2e6;
+    padding: 1rem 1.5rem;
+    font-weight: 600;
+    color: #64748B;
+    font-size: 0.875rem;
+    text-transform: capitalize;
+    letter-spacing: 0.5px;
+    text-align: left; // Ensure headers are left-aligned
+    border-radius: 8px 8px 0 0; // Rounded top corners for header
+  }
+
+  // First column header - left rounded corner
+  .p-datatable-thead > tr > th:first-child {
+    border-top-left-radius: 8px;
+  }
+
+  // Last column header - right rounded corner
+  .p-datatable-thead > tr > th:last-child {
+    border-top-right-radius: 8px;
+  }
+
+  .p-datatable-tbody > tr {
+    border-bottom: 1px solid #f1f3f4;
+
+    &:hover {
+      background-color: #f8f9fa;
+    }
+
+    // Last row - bottom rounded corners
+    &:last-child {
+      > td:first-child {
+        border-bottom-left-radius: 8px;
+      }
+      > td:last-child {
+        border-bottom-right-radius: 8px;
+      }
+    }
+
+    > td {
+      border: none;
+      padding: 1rem 1.5rem;
+      vertical-align: middle;
+      text-align: left; // Ensure all cells are left-aligned
+    }
+  }
+}
+
+// No records found styling
+.no-records-cell {
+  text-align: center;
+  padding: 3rem 1.5rem !important;
+  border: none;
+  
+  .no-records-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    
+    .no-records-text {
+      margin: 0;
+      color: #6c757d;
+      font-size: 1rem;
+      font-weight: 500;
+    }
+  }
+}

package/src/Shared/components/table-primary/table-primary.component.spec.ts

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

package/src/Shared/components/table-primary/table-primary.component.ts

@@ -0,0 +1,143 @@
+import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { SHARED } from '../../constant/SHARED';
+import { ProcessedRowData, TableData } from './table-primary.model';
+
+@Component({
+  selector: 'lib-table-primary',
+  standalone: false,
+  templateUrl: './table-primary.component.html',
+  styleUrl: './table-primary.component.scss'
+})
+export class TablePrimaryComponent implements OnChanges {
+  @Input() tableData: TableData = { columns: [], data: [] };
+  @Input() showHeader: boolean = true;
+  @Input() tableStyle: any = { 'min-width': '100%' };
+  @Output() rowClick = new EventEmitter<any>();
+  @Output() rowCtrlClick = new EventEmitter<any>();
+  processedData: ProcessedRowData[] = [];
+  
+  // Expose SHARED constants for template use
+  readonly SHARED = SHARED;
+
+  // Computed property for visible columns (excluding actions)
+  get visibleColumns() {
+    return this.tableData.columns.filter(col => col.type !== SHARED.CELL_TYPE_ACTIONS);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['tableData'] && this.tableData) {
+      this.processTableData();
+    }
+  }
+
+  private processTableData(): void {
+    this.processedData = this.tableData.data.map((rowData, index) => {
+      const processedRow: ProcessedRowData = { ...rowData };
+      if (rowData.fileName) {
+        processedRow._fileExtension = this.getFileExtension(rowData.fileName);
+        processedRow._isPdfFile = processedRow._fileExtension === SHARED.PDF;
+        processedRow._isImageFile = processedRow._fileExtension === SHARED.JPG || processedRow._fileExtension === SHARED.PNG;
+        processedRow._isExcelFile = processedRow._fileExtension === SHARED.XLSX;
+        processedRow._isOtherFile = !processedRow._isPdfFile && !processedRow._isImageFile && !processedRow._isExcelFile;
+      }
+
+      this.tableData.columns.forEach(col => {
+        if (col.type === SHARED.STATUS_PARAM && rowData[col.field]) {
+          const status = rowData[col.field];
+          processedRow._statusClass = this.getStatusClass(status);
+          processedRow._statusIcon = this.getStatusIcon(status);
+        }
+      });
+
+      return processedRow;
+    });
+  }
+
+  getStatusClass(status: string): string {
+    switch (status.toLowerCase()) {
+      case SHARED.PENDING_STATUS:
+        return SHARED.STATUS_PENDING_CLASS;
+      case SHARED.APPROVED_STATUS:
+        return SHARED.STATUS_APPROVED_CLASS;
+      case SHARED.ALERT_STATUS:
+        return SHARED.STATUS_ALERT_CLASS;
+      case SHARED.UPLOADED_STATUS:
+        return SHARED.STATUS_UPLOADED_CLASS;
+      case SHARED.REVIEWING_STATUS:
+        return SHARED.STATUS_REVIEWING_CLASS;
+      case SHARED.REJECTED_STATUS:
+        return SHARED.STATUS_REJECTED_CLASS;
+      default:
+        return SHARED.STATUS_PENDING_CLASS;
+    }
+  }
+
+  getStatusIcon(status: string): string {
+    switch (status.toLowerCase()) {
+      case SHARED.PENDING_STATUS:
+        return SHARED.ICON_CLOCK;
+      case SHARED.APPROVED_STATUS:
+        return SHARED.ICON_CHECK;
+      case SHARED.ALERT_STATUS:
+        return SHARED.ICON_EXCLAMATION_TRIANGLE;
+      case SHARED.UPLOADED_STATUS:
+        return SHARED.ICON_CLOUD_UPLOAD;
+      case SHARED.REVIEWING_STATUS:
+        return SHARED.ICON_EYE;
+      case SHARED.REJECTED_STATUS:
+        return SHARED.ICON_TIMES;
+      default:
+        return SHARED.ICON_CLOCK;
+    }
+  }
+
+  getFileExtension(fileName: string): string {
+    return fileName.split(SHARED.DOT).pop()?.toUpperCase() || SHARED.PDF;
+  }
+
+  onRowClick(event: MouseEvent, rowData: any): void {
+    if (event.ctrlKey || event.metaKey) {
+      this.rowCtrlClick.emit(rowData);
+    } else {
+      this.rowClick.emit(rowData);
+    }
+  }
+
+  getVisibleColumnCount(): number {
+    return this.visibleColumns.length;
+  }
+
+  /**
+   * Formats document display name based on whether aliasName exists:
+   * - Without aliasName: fileName on top, docName below
+   * - With aliasName: aliasName on top, docName - fileName below
+   * @param rowData The row data containing docName, aliasName, and fileName
+   * @returns HTML string with proper formatting
+   */
+  formatDocumentDisplayName(rowData: any): string {
+    let displayName = '';
+    
+    if (rowData.aliasName && rowData.aliasName.trim() !== '') {
+      // With aliasName: aliasName on top, docName - fileName below
+      displayName += `<span class="alias-name">${rowData.aliasName}</span><br>`;
+      
+      if (rowData.docName && rowData.fileName) {
+        displayName += `<span class="document-info">${rowData.docName} - ${rowData.fileName}</span>`;
+      } else if (rowData.docName) {
+        displayName += `<span class="document-info">${rowData.docName}</span>`;
+      }
+    } else {
+      // Without aliasName: fileName on top, docName below
+      if (rowData.fileName) {
+        displayName += `<span class="document-info">${rowData.fileName}</span>`;
+      }
+      
+      if (rowData.docName) {
+        if (displayName) displayName += '<br>';
+        displayName += `<span class="document-info">${rowData.docName}</span>`;
+      }
+    }
+    
+    return displayName;
+  }
+}