@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 features an interactive timeline view with advanced filtering, search capabilities, and visual diff comparison for text changes.

Features

• 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

1npm install @memberjunction/ng-record-changes

Requirements

• Angular 18+
• @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

Basic Setup

First, import the RecordChangesModule in your module:

1import { RecordChangesModule } from '@memberjunction/ng-record-changes';
2
3@NgModule({
4  imports: [
5    // other imports...
6    RecordChangesModule
7  ],
8})
9export class YourModule { }

Basic Usage

Use the component in your template to show the change history for a record:

1<button (click)="showChanges()">View History</button>
2
3<mj-record-changes
4  *ngIf="isHistoryDialogOpen"
5  [record]="entityRecord"
6  (dialogClosed)="closeChangesDialog()">
7</mj-record-changes>

In your component:

1import { Component } from '@angular/core';
2import { BaseEntity, Metadata } from '@memberjunction/core';
3
4@Component({
5  selector: 'app-record-detail',
6  templateUrl: './record-detail.component.html',
7})
8export class RecordDetailComponent {
9  entityRecord!: BaseEntity;
10  isHistoryDialogOpen: boolean = false;
11  
12  constructor(private metadata: Metadata) {}
13  
14  async ngOnInit() {
15    // Load your entity record using MemberJunction pattern
16    const md = new Metadata();
17    this.entityRecord = await md.GetEntityObject<BaseEntity>('Customer');
18    await this.entityRecord.Load(1); // Load by ID
19  }
20  
21  showChanges() {
22    this.isHistoryDialogOpen = true;
23  }
24  
25  closeChangesDialog() {
26    this.isHistoryDialogOpen = false;
27  }
28}

API Reference

RecordChangesComponent

Inputs

Name	Type	Description
record	BaseEntity	The entity record whose change history to display

Outputs

Name	Type	Description
dialogClosed	EventEmitter<void>	Emitted when the dialog is closed

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:

1// The component automatically filters based on:
2// - Search term (across description, user, comments)
3// - Change type (Create, Update, Delete)
4// - Source (Internal, External)

Visual Diff Display

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

Field Change Display

Different field types are handled intelligently:

1// Boolean fields - show only new value
2{ field: 'IsActive', newValue: true } // Displays as "true"
3
4// Text fields - show diff view with highlighting
5{ field: 'Description', oldValue: 'Old text', newValue: 'New text' }
6
7// Date fields - formatted display
8{ field: 'CreatedAt', newValue: '2024-01-15T10:30:00Z' } 
9// Displays as "January 15, 2024, 10:30 AM EST"
10
11// Empty values
12{ field: 'Notes', oldValue: null, newValue: 'New note' }
13// Displays as "(empty) → New note"

Styling and Customization

CSS Classes

The component uses these main CSS classes for customization:

1/* Main container classes */
2.kendo-window-custom     /* Dialog window wrapper */
3.record-changes-container /* Main content container */
4.timeline-container      /* Timeline wrapper */
5
6/* Timeline item classes */
7.timeline-item          /* Individual change item */
8.timeline-item.expanded /* Expanded state */
9.timeline-marker        /* Visual marker/icon */
10.timeline-content       /* Content area */
11
12/* Change type classes */
13.change-create    /* Create changes (green) */
14.change-update    /* Update changes (blue) */
15.change-delete    /* Delete changes (red) */
16
17/* Status and badge classes */
18.badge-create     /* Create type badge */
19.badge-update     /* Update type badge */
20.badge-delete     /* Delete type badge */
21.status-complete  /* Completed status */
22.status-pending   /* Pending status */
23.status-error     /* Error status */
24
25/* Diff view classes */
26.diff-container   /* Diff display wrapper */
27.diff-added       /* Added text (green) */
28.diff-removed     /* Removed text (red) */
29.diff-unchanged   /* Unchanged text */

Dialog Configuration

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 Configuration

Show the history button only for entities with change tracking enabled:

1<button *ngIf="entityRecord?.EntityInfo?.TrackRecordChanges" 
2        (click)="showChanges()"
3        class="btn btn-secondary">
4  <i class="fa-solid fa-history"></i> View History
5</button>

Integration with Form Components

Integrate with MemberJunction form components for a complete solution:

1import { Component } from '@angular/core';
2import { BaseFormComponent } from '@memberjunction/ng-base-forms';
3
4@Component({
5  selector: 'app-customer-form',
6  templateUrl: './customer-form.component.html',
7})
8export class CustomerFormComponent extends BaseFormComponent {
9  isHistoryDialogOpen: boolean = false;
10  
11  showHistory() {
12    if (this.record?.EntityInfo?.TrackRecordChanges) {
13      this.isHistoryDialogOpen = true;
14    }
15  }
16  
17  onHistoryDialogClosed() {
18    this.isHistoryDialogOpen = false;
19  }
20}

Handling Different Change Types

The component automatically handles different change scenarios:

1// Record Creation - shows all initial field values
2{
3  Type: 'Create',
4  FullRecordJSON: '{"Name": "John Doe", "Email": "john@example.com"}'
5}
6
7// Record Update - shows field-by-field changes
8{
9  Type: 'Update',
10  ChangesJSON: '{"Name": {"field": "Name", "oldValue": "John", "newValue": "John Doe"}}'
11}
12
13// Record Deletion - shows deletion message
14{
15  Type: 'Delete',
16  ChangesDescription: 'Record deleted'
17}

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:

1cd packages/Angular/Explorer/record-changes
2npm run build

The package uses Angular's ng-packagr for building the library.