@memberjunction/ng-record-changes 2.43.0 → 2.45.0

package/README.md

@@ -1,17 +1,19 @@
 # @memberjunction/ng-record-changes
 
-The `@memberjunction/ng-record-changes` package provides an Angular dialog component that displays a chronological history of changes made to a MemberJunction entity record. It shows field-by-field changes with before and after values in an easy-to-read format.
+The `@memberjunction/ng-record-changes` package provides an Angular dialog component that displays a chronological history of changes made to a MemberJunction entity record. It features an interactive timeline view with advanced filtering, search capabilities, and visual diff comparison for text changes.
 
 ## Features
 
-- Modal dialog interface for viewing record change history
-- Chronological display of changes with timestamps
-- Field-by-field change tracking with before and after values
-- Color-coded presentation for easy comparison
-- Sortable grid interface
-- Formatted display of different field types
-- Integration with MemberJunction's audit trail system
-- Support for any entity type with change tracking enabled
+- **Interactive Timeline View**: Modern timeline interface showing chronological change history
+- **Advanced Filtering**: Filter by change type (Create/Update/Delete) and source (Internal/External)
+- **Search Functionality**: Full-text search across changes, users, and comments
+- **Visual Diff Comparison**: Character-by-character or word-by-word diff highlighting for text changes
+- **Expandable Details**: Click to expand/collapse detailed change information
+- **Field-Level Changes**: Detailed tracking of individual field modifications
+- **Smart Formatting**: Intelligent display of different data types (dates, booleans, numbers)
+- **Accessibility**: Full keyboard navigation and ARIA support
+- **Responsive Design**: Resizable dialog window with minimum dimensions
+- **Status Indicators**: Visual badges for change types, sources, and statuses
 
 ## Installation
 
@@ -22,10 +24,15 @@ npm install @memberjunction/ng-record-changes
 ## Requirements
 
 - Angular 18+
-- @memberjunction/core
-- @memberjunction/global
-- @progress/kendo-angular-grid
-- @progress/kendo-angular-indicators
+- @memberjunction/core (^2.43.0)
+- @memberjunction/global (^2.43.0)
+- @memberjunction/core-entities
+- @memberjunction/ng-notifications
+- @progress/kendo-angular-grid (^16.2.0)
+- @progress/kendo-angular-indicators (^16.2.0)
+- @progress/kendo-angular-dialog
+- @progress/kendo-angular-buttons
+- diff (^8.0.2)
 
 ## Usage
 
@@ -76,9 +83,10 @@ export class RecordDetailComponent {
   constructor(private metadata: Metadata) {}
   
   async ngOnInit() {
-    // Load your entity record
-    this.entityRecord = await this.metadata.GetEntityObject('Customer', 1);
-    await this.entityRecord.Load();
+    // Load your entity record using MemberJunction pattern
+    const md = new Metadata();
+    this.entityRecord = await md.GetEntityObject<BaseEntity>('Customer');
+    await this.entityRecord.Load(1); // Load by ID
   }
   
   showChanges() {
@@ -107,47 +115,134 @@ export class RecordDetailComponent {
 |------|------|-------------|
 | `dialogClosed` | `EventEmitter<void>` | Emitted when the dialog is closed |
 
-## How It Works
+#### Component Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `showloader` | `boolean` | Loading state indicator |
+| `viewData` | `RecordChangeEntity[]` | All change records |
+| `filteredData` | `RecordChangeEntity[]` | Filtered change records |
+| `expandedItems` | `Set<string>` | IDs of expanded timeline items |
+| `searchTerm` | `string` | Current search filter |
+| `selectedType` | `string` | Selected change type filter |
+| `selectedSource` | `string` | Selected source filter |
+
+## Features in Detail
+
+### Timeline Interface
+
+The component displays changes in an interactive timeline format:
+- **Visual Markers**: Icons indicate change type (Create/Update/Delete)
+- **Connecting Lines**: Visual connection between sequential changes
+- **Expandable Items**: Click or use keyboard to expand/collapse details
+- **Relative Time**: Shows "2 hours ago", "3 days ago", etc.
+- **Full Timestamps**: Hover or expand to see complete date/time
+
+### Filtering and Search
+
+The component includes powerful filtering capabilities:
+
+```typescript
+// The component automatically filters based on:
+// - Search term (across description, user, comments)
+// - Change type (Create, Update, Delete)
+// - Source (Internal, External)
+```
+
+### Visual Diff Display
 
-1. When the component is initialized, it makes a query to the `Record Changes` entity in MemberJunction, filtering by the entity name and record ID provided.
+For text field changes, the component provides visual diff highlighting:
+- **Character Diff**: For short text, codes, IDs
+- **Word Diff**: For longer text with multiple words
+- **Color Coding**: 
+  - Green background for additions
+  - Red background with strikethrough for deletions
+  - No highlighting for unchanged text
 
-2. The changes are displayed in reverse chronological order (newest first) with timestamps.
+### Field Change Display
 
-3. For each change, the component shows:
-   - The field name that was changed
-   - The old value (in gray)
-   - The new value (in blue)
+Different field types are handled intelligently:
 
-4. For boolean fields, only the new value is shown as the old value is implied.
+```typescript
+// Boolean fields - show only new value
+{ field: 'IsActive', newValue: true } // Displays as "true"
+
+// Text fields - show diff view with highlighting
+{ field: 'Description', oldValue: 'Old text', newValue: 'New text' }
+
+// Date fields - formatted display
+{ field: 'CreatedAt', newValue: '2024-01-15T10:30:00Z' } 
+// Displays as "January 15, 2024, 10:30 AM EST"
 
-5. The component handles formatting of different field types appropriately:
-   - Dates are formatted in a user-friendly way
-   - Booleans show clear true/false values
-   - Numbers are formatted with appropriate separators
+// Empty values
+{ field: 'Notes', oldValue: null, newValue: 'New note' }
+// Displays as "(empty) → New note"
+```
 
-## Styling
+## Styling and Customization
+
+### CSS Classes
+
+The component uses these main CSS classes for customization:
+
+```css
+/* Main container classes */
+.kendo-window-custom     /* Dialog window wrapper */
+.record-changes-container /* Main content container */
+.timeline-container      /* Timeline wrapper */
+
+/* Timeline item classes */
+.timeline-item          /* Individual change item */
+.timeline-item.expanded /* Expanded state */
+.timeline-marker        /* Visual marker/icon */
+.timeline-content       /* Content area */
+
+/* Change type classes */
+.change-create    /* Create changes (green) */
+.change-update    /* Update changes (blue) */
+.change-delete    /* Delete changes (red) */
+
+/* Status and badge classes */
+.badge-create     /* Create type badge */
+.badge-update     /* Update type badge */
+.badge-delete     /* Delete type badge */
+.status-complete  /* Completed status */
+.status-pending   /* Pending status */
+.status-error     /* Error status */
+
+/* Diff view classes */
+.diff-container   /* Diff display wrapper */
+.diff-added       /* Added text (green) */
+.diff-removed     /* Removed text (red) */
+.diff-unchanged   /* Unchanged text */
+```
 
-The component uses the following CSS classes that can be customized:
+### Dialog Configuration
 
-- `.kendo-window-custom`: Applied to the main dialog window
-- `.kendo-grid-container`: Container for the changes grid
+The dialog window is configured with:
+- **Width**: 800px (resizable)
+- **Height**: 650px (resizable)
+- **Min Width**: 600px
+- **Min Height**: 400px
+- **Position**: Top: 50px, Left: 50px
 
 ## Advanced Usage
 
-### Conditional Display Based on Entity Type
+### Conditional Display Based on Entity Configuration
 
-You can conditionally show the history button based on whether the entity tracks changes:
+Show the history button only for entities with change tracking enabled:
 
 ```html
 <button *ngIf="entityRecord?.EntityInfo?.TrackRecordChanges" 
-        (click)="showChanges()">
-  View History
+        (click)="showChanges()"
+        class="btn btn-secondary">
+  <i class="fa-solid fa-history"></i> View History
 </button>
 ```
 
 ### Integration with Form Components
 
-The record changes component can be integrated with form components to provide a complete editing and auditing solution:
+Integrate with MemberJunction form components for a complete solution:
 
 ```typescript
 import { Component } from '@angular/core';
@@ -160,35 +255,80 @@ import { BaseFormComponent } from '@memberjunction/ng-base-forms';
 export class CustomerFormComponent extends BaseFormComponent {
   isHistoryDialogOpen: boolean = false;
   
-  handleHistoryDialog() {
-    this.isHistoryDialogOpen = !this.isHistoryDialogOpen;
+  showHistory() {
+    if (this.record?.EntityInfo?.TrackRecordChanges) {
+      this.isHistoryDialogOpen = true;
+    }
+  }
+  
+  onHistoryDialogClosed() {
+    this.isHistoryDialogOpen = false;
   }
 }
 ```
 
-```html
-<div class="form-actions">
-  <button (click)="handleHistoryDialog()">View History</button>
-</div>
-
-<mj-record-changes 
-  *ngIf="isHistoryDialogOpen" 
-  [record]="record" 
-  (dialogClosed)="handleHistoryDialog()">
-</mj-record-changes>
+### Handling Different Change Types
+
+The component automatically handles different change scenarios:
+
+```typescript
+// Record Creation - shows all initial field values
+{
+  Type: 'Create',
+  FullRecordJSON: '{"Name": "John Doe", "Email": "john@example.com"}'
+}
+
+// Record Update - shows field-by-field changes
+{
+  Type: 'Update',
+  ChangesJSON: '{"Name": {"field": "Name", "oldValue": "John", "newValue": "John Doe"}}'
+}
+
+// Record Deletion - shows deletion message
+{
+  Type: 'Delete',
+  ChangesDescription: 'Record deleted'
+}
 ```
 
-## Dependencies
-
-- @angular/common
-- @angular/core
-- @angular/forms
-- @angular/router
-- @memberjunction/core
-- @memberjunction/global
-- @memberjunction/ng-compare-records
-- @memberjunction/ng-container-directives
-- @progress/kendo-angular-grid
-- @progress/kendo-angular-indicators
-- @progress/kendo-angular-dialog
-- @progress/kendo-angular-buttons
+## Integration with MemberJunction
+
+The component integrates seamlessly with MemberJunction's audit system:
+
+1. **Automatic Loading**: Uses `Metadata.GetRecordChanges()` to fetch history
+2. **Entity Awareness**: Respects entity field metadata for display names
+3. **Type Safety**: Full TypeScript support with `RecordChangeEntity` type
+4. **Performance**: Efficient loading with built-in pagination support
+
+## Accessibility
+
+The component includes comprehensive accessibility features:
+- **ARIA Labels**: Descriptive labels for all interactive elements
+- **Keyboard Navigation**: Full keyboard support (Enter/Space to expand)
+- **Screen Reader Support**: Meaningful announcements for all changes
+- **Focus Management**: Proper focus handling in the dialog
+
+## Performance Considerations
+
+- **Lazy Loading**: Details are only rendered when expanded
+- **Virtual Scrolling**: Ready for integration with Kendo's virtual scrolling
+- **Efficient Diff**: Smart algorithm selection based on content type
+- **Minimal Re-renders**: Optimized change detection strategy
+
+## Error Handling
+
+The component includes built-in error handling:
+- Displays notification toast on load failure
+- Gracefully handles missing or invalid data
+- Shows error logs when available in change records
+
+## Build and Development
+
+To build the package locally:
+
+```bash
+cd packages/Angular/Explorer/record-changes
+npm run build
+```
+
+The package uses Angular's ng-packagr for building the library.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-record-changes",
-  "version": "2.43.0",
+  "version": "2.45.0",
   "description": "MemberJunction: Angular pop-up window and grid to show changes made to a specific individual record",
   "main": "./dist/public-api.js",
   "typings": "./dist/public-api.d.ts",
@@ -27,11 +27,11 @@
     "@progress/kendo-angular-indicators": "16.2.0"
   },
   "dependencies": {
-    "@memberjunction/core": "2.43.0",
-    "@memberjunction/global": "2.43.0",
-    "@memberjunction/ng-compare-records": "2.43.0",
-    "@memberjunction/ng-container-directives": "2.43.0",
-    "@memberjunction/ng-notifications": "2.43.0",
+    "@memberjunction/core": "2.45.0",
+    "@memberjunction/global": "2.45.0",
+    "@memberjunction/ng-compare-records": "2.45.0",
+    "@memberjunction/ng-container-directives": "2.45.0",
+    "@memberjunction/ng-notifications": "2.45.0",
     "diff": "8.0.2",
     "tslib": "^2.3.0"
   },