cat-qw-lib 1.0.0 → 1.0.2

package/src/lib/queue/ASSIGNMENT_FUNCTIONALITY.md

@@ -1,114 +0,0 @@
-# Application Assignment Functionality
-
-## Overview
-This module provides functionality to assign applications from the queue to users (underwriters). Users can select multiple applications from the queue table and assign them to a specific user through a dropdown interface.
-
-## Components
-
-### UserDropdownComponent
-- **Location**: `src/app/queue/components/user-dropdown/`
-- **Purpose**: Provides a dropdown interface for selecting users and assigning applications
-- **Features**:
-  - Search users by name
-  - Display user initials as avatars
-  - Handle multiple application assignments
-  - Loading states for better UX
-
-### ApplicationAssignmentService
-- **Location**: `src/app/queue/services/application-assignment.service.ts`
-- **Purpose**: Handles API calls for application assignment
-- **API Endpoint**: `POST http://localhost:3300/api/ApplicationAssignments/assignApplication/:applicationId/:underWriterId`
-
-## Usage
-
-### Input Properties
-- `selectedRows`: Array of selected table rows (applications) to assign
-- `disabled`: Boolean to disable the assign button
-
-### Output Events
-- `userAssigned`: Emitted when a user is selected (before API call)
-- `assignmentComplete`: Emitted after assignment API call completes
-
-### Example Usage
-```html
-<app-user-dropdown
-  [selectedRows]="selectedRows"
-  [disabled]="!isAssignButtonEnabled()"
-  (userAssigned)="onUserAssigned($event)"
-  (assignmentComplete)="onAssignmentComplete($event)">
-</app-user-dropdown>
-```
-
-## API Integration
-
-### Assignment API
-- **Method**: POST
-- **URL**: `http://localhost:3300/api/ApplicationAssignments/assignApplication/:applicationId/:underWriterId`
-- **Parameters**:
-  - `applicationId`: The `_id` of the application to assign
-  - `underWriterId`: The `_id` of the user to assign the application to
-
-### User Search API
-- **Method**: GET
-- **URL**: `http://localhost:3300/api/Applications/getAllUsers?searchKey=:searchKey`
-- **Parameters**:
-  - `searchKey`: Search term for filtering users
-
-## User Feedback
-
-### Toast Notifications
-- **Success**: Green toast with assignment confirmation
-- **Error**: Red toast with error message and retry suggestion
-
-### Loading States
-- **Button**: Shows spinner and "Assigning..." text during assignment
-- **Dropdown**: Disabled during assignment process
-- **Search**: Disabled during assignment process
-
-## Error Handling
-
-### Common Error Scenarios
-1. **No Application ID**: When selected row doesn't have a valid `_id`
-2. **API Failure**: When the assignment API call fails
-3. **Network Issues**: When there are connectivity problems
-
-### Error Recovery
-- Users can retry the assignment operation
-- Clear error messages are displayed
-- Application state is preserved for retry
-
-## State Management
-
-### Queue Refresh
-After successful assignment, the queue data is automatically refreshed to reflect the changes in the UI.
-
-### Selection Clearing
-The table selection is cleared after successful assignment to prevent duplicate assignments.
-
-## Dependencies
-
-### PrimeNG Components
-- `ButtonModule`: For the assign button
-- `ToastModule`: For success/error notifications
-
-### Angular Modules
-- `FormsModule`: For search input binding
-- `CommonModule`: For common directives
-- `HttpClientModule`: For API calls
-
-## Testing
-
-### Manual Testing Steps
-1. Select one or more applications from the queue table
-2. Click the "Assign" button
-3. Search for a user in the dropdown
-4. Click on a user to assign the applications
-5. Verify success/error toast messages
-6. Check that queue data refreshes after successful assignment
-
-### Key Test Cases
-- Single application assignment
-- Multiple application assignment
-- User search functionality
-- Error handling scenarios
-- Loading state verification 

package/src/lib/queue/CHECKBOX_SELECTION_EXAMPLE.md

@@ -1,240 +0,0 @@
-# Checkbox Selection Events Example
-
-## Overview
-This document shows how the checkbox selection events work in the queue table and how gb-ng can handle them for assignment logic.
-
-## Event Flow
-
-### 1. User clicks checkbox in table row
-
-```typescript
-// When user clicks checkbox on a row with data:
-{
-  _id: "app_123",
-  applicationNumber: "APP-2024-001",
-  applicationType: "Loan",
-  status: "Pending",
-  customerName: "John Doe",
-  // ... other row data
-}
-```
-
-### 2. Events emitted in sequence
-
-#### Event 1: `rowSelected`
-```typescript
-// Emitted immediately when checkbox is clicked
-{
-  row: {
-    _id: "app_123",
-    applicationNumber: "APP-2024-001",
-    applicationType: "Loan",
-    status: "Pending",
-    customerName: "John Doe"
-  },
-  isSelected: true  // or false if deselected
-}
-```
-
-#### Event 2: `selectedRowsData`
-```typescript
-// Emitted after selection state is updated
-[
-  {
-    _id: "app_123",
-    applicationNumber: "APP-2024-001",
-    applicationType: "Loan",
-    status: "Pending",
-    customerName: "John Doe"
-  },
-  {
-    _id: "app_124",
-    applicationNumber: "APP-2024-001",
-    applicationType: "Credit Card",
-    status: "Pending",
-    customerName: "Jane Smith"
-  }
-  // ... all currently selected rows
-]
-```
-
-#### Event 3: `assignmentDataReady`
-```typescript
-// Emitted with complete context for assignment
-{
-  selectedRows: [
-    {
-      _id: "app_123",
-      applicationNumber: "APP-2024-001",
-      applicationType: "Loan",
-      status: "Pending",
-      customerName: "John Doe"
-    },
-    {
-      _id: "app_124",
-      applicationNumber: "APP-2024-001",
-      applicationType: "Credit Card",
-      status: "Pending",
-      customerName: "Jane Smith"
-    }
-  ],
-  queueData: {
-    _id: "queue_456",
-    name: "Loan Applications",
-    apiConfig: {
-      // ... queue configuration
-    },
-    // ... other queue data
-  }
-}
-```
-
-## Implementation in gb-ng
-
-```typescript
-export class QueueAssignmentComponent {
-  selectedRows: any[] = [];
-  currentQueueData: any;
-  assignmentReady = false;
-
-  // Handle individual row selection
-  handleRowSelected(event: { row: any, isSelected: boolean }) {
-    console.log(`${event.isSelected ? 'Selected' : 'Deselected'}:`, event.row);
-    
-    // You can perform immediate actions based on individual selections
-    if (event.isSelected) {
-      // Row was selected - maybe show a quick action
-      this.showQuickAssignButton(event.row);
-    } else {
-      // Row was deselected - maybe hide quick action
-      this.hideQuickAssignButton(event.row);
-    }
-  }
-
-  // Handle selection change
-  handleSelectedRowsData(selectedRows: any[]) {
-    this.selectedRows = selectedRows;
-    console.log(`Total selected: ${selectedRows.length} rows`);
-    
-    // Update UI based on selection count
-    this.updateAssignButtonState();
-    
-    // Maybe show selection summary
-    if (selectedRows.length > 0) {
-      this.showSelectionSummary(selectedRows);
-    } else {
-      this.hideSelectionSummary();
-    }
-  }
-
-  // Handle assignment data ready
-  handleAssignmentDataReady(event: { selectedRows: any[], queueData: any }) {
-    this.selectedRows = event.selectedRows;
-    this.currentQueueData = event.queueData;
-    this.assignmentReady = true;
-    
-    console.log('Assignment data ready!');
-    console.log(`- Queue: ${event.queueData.name}`);
-    console.log(`- Selected applications: ${event.selectedRows.length}`);
-    
-    // This is the perfect place to prepare your assignment logic
-    this.prepareAssignmentLogic();
-  }
-
-  // Example assignment logic preparation
-  private prepareAssignmentLogic() {
-    if (this.selectedRows.length === 0) {
-      this.disableAssignButton();
-      return;
-    }
-
-    // Check if all selected applications are assignable
-    const assignableApps = this.selectedRows.filter(row => 
-      row.status === 'Pending' || row.status === 'Under Review'
-    );
-
-    if (assignableApps.length !== this.selectedRows.length) {
-      this.showWarning('Some applications cannot be assigned');
-    }
-
-    // Enable assign button
-    this.enableAssignButton();
-    
-    // Prepare assignment data
-    const assignmentData = {
-      applicationIds: this.selectedRows.map(row => row._id),
-      queueId: this.currentQueueData._id,
-      totalApplications: this.selectedRows.length
-    };
-    
-    // Pass to your user dropdown component
-    this.updateUserDropdownData(assignmentData);
-  }
-
-  // Example methods (implement as needed)
-  private showQuickAssignButton(row: any) {
-    // Show quick assign button for individual row
-  }
-
-  private hideQuickAssignButton(row: any) {
-    // Hide quick assign button for individual row
-  }
-
-  private updateAssignButtonState() {
-    // Update assign button enabled/disabled state
-  }
-
-  private showSelectionSummary(rows: any[]) {
-    // Show summary of selected applications
-  }
-
-  private hideSelectionSummary() {
-    // Hide selection summary
-  }
-
-  private disableAssignButton() {
-    // Disable assign button
-  }
-
-  private enableAssignButton() {
-    // Enable assign button
-  }
-
-  private showWarning(message: string) {
-    // Show warning message
-  }
-
-  private updateUserDropdownData(data: any) {
-    // Update user dropdown with assignment data
-  }
-}
-```
-
-## Key Benefits
-
-1. **Real-time Feedback**: Get immediate notification when rows are selected/deselected
-2. **Complete Context**: Have access to both selected rows and queue data for assignment logic
-3. **Flexible UI Updates**: Can update UI elements based on selection state
-4. **Rich Data**: Full row data available for assignment operations
-5. **Queue Context**: Know which queue the assignments are for
-
-## Usage in Template
-
-```html
-<app-queue-container
-  (rowSelected)="handleRowSelected($event)"
-  (selectedRowsData)="handleSelectedRowsData($event)"
-  (assignmentDataReady)="handleAssignmentDataReady($event)">
-  
-  <div user-dropdown>
-    <app-user-dropdown
-      [selectedRows]="selectedRows"
-      [disabled]="!assignmentReady || selectedRows.length === 0"
-      [assignmentData]="assignmentData">
-    </app-user-dropdown>
-  </div>
-  
-</app-queue-container>
-```
-
-This approach provides gb-ng with comprehensive data about checkbox selections, enabling rich assignment logic while keeping the core queue functionality in cat-qw-ng. 

package/src/lib/queue/CONTENT_PROJECTION_GUIDE.md

@@ -1,163 +0,0 @@
-# Content Projection Guide for Queue Container
-
-## Overview
-The `QueueContainerComponent` now uses content projection to allow the user-dropdown component to be provided by the consuming application (gb-ng). This separation allows the queue logic to remain in cat-qw-ng while the project-specific user assignment logic stays in gb-ng.
-
-## How to Use Content Projection
-
-### 1. In the gb-ng project, use the queue-container like this:
-
-```html
-<app-queue-container
-  (assignmentComplete)="handleAssignmentComplete($event)"
-  (userAssigned)="handleUserAssigned($event)"
-  (rowSelected)="handleRowSelected($event)"
-  (selectedRowsData)="handleSelectedRowsData($event)"
-  (assignmentDataReady)="handleAssignmentDataReady($event)">
-  
-  <!-- Content projection slot for user dropdown -->
-  <div user-dropdown>
-    <app-user-dropdown
-      [selectedRows]="selectedRows"
-      [disabled]="!isAssignButtonEnabled()"
-      (assignmentComplete)="onAssignmentComplete($event)"
-      (userAssigned)="onUserAssigned($event)">
-    </app-user-dropdown>
-  </div>
-  
-</app-queue-container>
-```
-
-### 2. Available Input Properties
-
-The queue-container exposes these properties for the projected content:
-
-- `selectedRowsInput`: Array of selected rows from the queue table
-- `isAssignButtonEnabled()`: Method to check if assignment button should be enabled
-
-### 3. Available Output Events
-
-The queue-container emits these events:
-
-- `assignmentComplete`: Emitted when assignment operation completes
-  ```typescript
-  { success: boolean, message: string }
-  ```
-- `userAssigned`: Emitted when a user is assigned
-  ```typescript
-  { user: any, selectedRows: any[] }
-  ```
-- `rowSelected`: Emitted when individual rows are selected/deselected via checkbox
-  ```typescript
-  { row: any, isSelected: boolean }
-  ```
-- `selectedRowsData`: Emitted when the selection changes (array of selected rows)
-  ```typescript
-  any[] // Array of selected row data
-  ```
-- `assignmentDataReady`: Emitted when assignment data is ready (contains both selected rows and queue data)
-  ```typescript
-  { selectedRows: any[], queueData: QueueModel }
-  ```
-
-### 4. Implementation in gb-ng
-
-In your gb-ng component that uses the queue-container:
-
-```typescript
-export class YourGbNgComponent {
-  selectedRows: any[] = [];
-  currentQueueData: any;
-
-  handleAssignmentComplete(event: { success: boolean, message: string }) {
-    if (event.success) {
-      // Handle successful assignment
-      console.log(event.message);
-      // Refresh data if needed
-    } else {
-      // Handle assignment failure
-      console.error(event.message);
-    }
-  }
-
-  handleUserAssigned(event: { user: any, selectedRows: any[] }) {
-    // Handle user assignment event
-    console.log(`User ${event.user.fullName} assigned to ${event.selectedRows.length} applications`);
-  }
-
-  handleRowSelected(event: { row: any, isSelected: boolean }) {
-    // Handle individual row selection
-    if (event.isSelected) {
-      console.log(`Row selected:`, event.row);
-      // You can access the full row data here for assignment logic
-      // event.row contains: _id, applicationNumber, applicationType, etc.
-    } else {
-      console.log(`Row deselected:`, event.row);
-    }
-  }
-
-  handleSelectedRowsData(selectedRows: any[]) {
-    // Handle selection change
-    this.selectedRows = selectedRows;
-    console.log(`Total selected rows: ${selectedRows.length}`);
-    
-    // Update your user dropdown component with the selected rows
-    // This is perfect for enabling/disabling the assign button
-  }
-
-  handleAssignmentDataReady(event: { selectedRows: any[], queueData: any }) {
-    // Handle assignment data ready event
-    this.selectedRows = event.selectedRows;
-    this.currentQueueData = event.queueData;
-    
-    console.log(`Assignment data ready:`);
-    console.log(`- Selected rows: ${event.selectedRows.length}`);
-    console.log(`- Queue data:`, event.queueData);
-    
-    // This is the perfect place to prepare your assignment logic
-    // You have both the selected rows and the queue context
-  }
-
-  isAssignButtonEnabled(): boolean {
-    return this.selectedRows && this.selectedRows.length > 0;
-  }
-
-  onAssignmentComplete(event: { success: boolean, message: string }) {
-    // Forward the event to the queue-container
-    this.handleAssignmentComplete(event);
-  }
-
-  onUserAssigned(event: { user: any, selectedRows: any[] }) {
-    // Forward the event to the queue-container
-    this.handleUserAssigned(event);
-  }
-}
-```
-
-### 5. Checkbox Selection Flow
-
-When a user clicks on a checkbox in the table:
-
-1. **Individual Row Selection**: `rowSelected` event is emitted with the row data and selection state
-2. **Selection Change**: `selectedRowsData` event is emitted with the updated array of selected rows
-3. **Assignment Data Ready**: `assignmentDataReady` event is emitted with both selected rows and queue context
-
-This flow allows gb-ng to:
-- Track individual row selections for detailed assignment logic
-- Maintain the current selection state
-- Have access to both selected rows and queue context for assignment operations
-
-## Benefits of This Approach
-
-1. **Separation of Concerns**: Queue logic stays in cat-qw-ng, project-specific logic stays in gb-ng
-2. **Reusability**: The queue-container can be used in different projects with different user assignment implementations
-3. **Flexibility**: Each project can implement its own user dropdown with project-specific requirements
-4. **Maintainability**: Changes to user assignment logic in gb-ng don't affect the core queue functionality
-5. **Rich Data Flow**: gb-ng receives comprehensive data about selections and queue context for assignment logic
-
-## Migration Notes
-
-- The `UserDropdownComponent` has been removed from cat-qw-ng
-- The `ApplicationAssignmentService` remains in cat-qw-ng as it's part of the core queue functionality
-- All user assignment logic should be moved to gb-ng
-- The content projection slot uses the selector `[user-dropdown]` for easy identification 

package/src/lib/queue/components/queue-container/queue-container.component.html

@@ -1,37 +0,0 @@
-<div class="container grid m-0 h-full">
-    <div class="col-12 xl:col-2 md:col-12 py-0 h-full">
-      <app-queue-list
-        [queueData]="queueList"
-        (queueDataById)="handleQueueId($event)"
-      ></app-queue-list>
-    </div>
-    <div class="col-12 xl:col-10 md:col-12 py-0 h-full">
-    
-      @if(selectedQueue){
-      <div class="flex justify-content-between align-items-center mb-3">
-          <div class="col-6 p-0">
-            <div class="searchbar-wrapper">
-              <queue-search (queueFilteredData)="onQueueFiltered($event)"></queue-search>
-            </div>
-          </div>
-          <div class="d-flex justify-content-end">
-            <ng-content select="[user-dropdown]"></ng-content>
-          </div>
-      </div>
-
-      <div class="animation-duration-500 associated-list h-full card mb-0 p-0">
-        <app-queue-record-table
-          [queueData]="selectedQueue"
-          [filteredSearchResult]="filteredResult"
-          (selectionChange)="onSelectionChange($event)"
-          (rowSelected)="onRowSelected($event)"
-          (selectedRowsData)="onSelectedRowsData($event)"
-          (assignmentDataReady)="onAssignmentDataReady($event)"
-          (rowClick)="onRowClick($event)">
-        </app-queue-record-table>
-    </div>
-
-      }
-    </div>
-
-  </div>

package/src/lib/queue/components/queue-container/queue-container.component.scss

@@ -1,7 +0,0 @@
-.custom-scroll{
-    overflow-y: hidden;
-  }
-  
-  .custom-scroll:hover {
-    overflow-y: auto;
-  }