cat-documents-ng 1.0.4 → 1.0.6

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/cat-document-lib",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+ "assets": [
+ "src/assets"
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cat-documents-ng",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "peerDependencies": {
     "@angular/common": "^19.0.0",
     "@angular/core": "^19.0.0"
@@ -11,15 +11,9 @@
   "typings": "index.d.ts",
   "sideEffects": false,
   "main": "bundles/cat-document-lib.umd.js",
-  "module": "fesm2022/cat-documents-ng.mjs",
+  "module": "fesm2015/cat-document-lib.js",
   "es2015": "fesm2015/cat-document-lib.js",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/cat-documents-ng.mjs"
-    }
+  "devDependencies": {
+    "@types/jest": "^29.5.14"
   }
-}
+}

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();
+  });
+});