2.48.0 • Published 4 months ago

@memberjunction/ng-record-changes v2.48.0

Weekly downloads
-
License
ISC
Repository
-
Last release
4 months ago

@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

npm 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:

import { RecordChangesModule } from '@memberjunction/ng-record-changes';

@NgModule({
  imports: [
    // other imports...
    RecordChangesModule
  ],
})
export class YourModule { }

Basic Usage

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

<button (click)="showChanges()">View History</button>

<mj-record-changes
  *ngIf="isHistoryDialogOpen"
  [record]="entityRecord"
  (dialogClosed)="closeChangesDialog()">
</mj-record-changes>

In your component:

import { Component } from '@angular/core';
import { BaseEntity, Metadata } from '@memberjunction/core';

@Component({
  selector: 'app-record-detail',
  templateUrl: './record-detail.component.html',
})
export class RecordDetailComponent {
  entityRecord!: BaseEntity;
  isHistoryDialogOpen: boolean = false;
  
  constructor(private metadata: Metadata) {}
  
  async ngOnInit() {
    // 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() {
    this.isHistoryDialogOpen = true;
  }
  
  closeChangesDialog() {
    this.isHistoryDialogOpen = false;
  }
}

API Reference

RecordChangesComponent

Inputs

NameTypeDescription
recordBaseEntityThe entity record whose change history to display

Outputs

NameTypeDescription
dialogClosedEventEmitter<void>Emitted when the dialog is closed

Component Properties

PropertyTypeDescription
showloaderbooleanLoading state indicator
viewDataRecordChangeEntity[]All change records
filteredDataRecordChangeEntity[]Filtered change records
expandedItemsSet<string>IDs of expanded timeline items
searchTermstringCurrent search filter
selectedTypestringSelected change type filter
selectedSourcestringSelected 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:

// The component automatically filters based on:
// - Search term (across description, user, comments)
// - Change type (Create, Update, Delete)
// - 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:

// 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"

// Empty values
{ field: 'Notes', oldValue: null, newValue: 'New note' }
// Displays as "(empty) → New note"

Styling and Customization

CSS Classes

The component uses these main CSS classes for customization:

/* 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 */

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:

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

Integration with Form Components

Integrate with MemberJunction form components for a complete solution:

import { Component } from '@angular/core';
import { BaseFormComponent } from '@memberjunction/ng-base-forms';

@Component({
  selector: 'app-customer-form',
  templateUrl: './customer-form.component.html',
})
export class CustomerFormComponent extends BaseFormComponent {
  isHistoryDialogOpen: boolean = false;
  
  showHistory() {
    if (this.record?.EntityInfo?.TrackRecordChanges) {
      this.isHistoryDialogOpen = true;
    }
  }
  
  onHistoryDialogClosed() {
    this.isHistoryDialogOpen = false;
  }
}

Handling Different Change Types

The component automatically handles different change scenarios:

// 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'
}

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:

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

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

2.23.2

8 months ago

2.46.0

5 months ago

2.23.1

8 months ago

2.34.0

6 months ago

2.19.4

9 months ago

2.19.5

9 months ago

2.19.2

9 months ago

2.19.3

9 months ago

2.19.0

9 months ago

2.19.1

9 months ago

2.34.2

6 months ago

2.34.1

6 months ago

2.45.0

5 months ago

2.22.1

8 months ago

2.22.0

8 months ago

2.22.2

8 months ago

2.33.0

6 months ago

2.18.3

9 months ago

2.18.1

9 months ago

2.18.2

9 months ago

2.18.0

9 months ago

2.21.0

9 months ago

2.44.0

5 months ago

2.29.0

7 months ago

2.29.2

7 months ago

2.29.1

7 months ago

2.32.0

7 months ago

2.32.2

7 months ago

2.32.1

7 months ago

2.17.0

9 months ago

2.43.0

5 months ago

2.20.2

9 months ago

2.20.3

9 months ago

2.20.0

9 months ago

2.20.1

9 months ago

2.28.0

8 months ago

2.31.0

7 months ago

2.39.0

5 months ago

2.16.1

9 months ago

2.16.0

9 months ago

2.42.1

5 months ago

2.42.0

5 months ago

2.27.1

8 months ago

2.27.0

8 months ago

2.30.0

7 months ago

2.15.2

9 months ago

2.15.1

9 months ago

2.38.0

5 months ago

2.41.0

5 months ago

2.26.1

8 months ago

2.26.0

8 months ago

2.37.1

5 months ago

2.37.0

6 months ago

2.14.0

10 months ago

2.40.0

5 months ago

2.25.0

8 months ago

2.48.0

4 months ago

2.13.4

10 months ago

2.36.0

6 months ago

2.13.2

11 months ago

2.13.3

10 months ago

2.13.0

11 months ago

2.36.1

6 months ago

2.13.1

11 months ago

2.47.0

4 months ago

2.24.1

8 months ago

2.24.0

8 months ago

2.12.0

12 months ago

2.35.1

6 months ago

2.35.0

6 months ago

2.23.0

8 months ago

2.11.0

12 months ago

2.10.0

12 months ago

2.9.0

12 months ago

2.8.0

1 year ago

2.7.0

1 year ago

2.7.1

1 year ago

2.6.1

1 year ago

2.6.0

1 year ago

2.5.2

1 year ago

1.6.1

1 year ago

1.6.0

1 year ago

2.4.1

1 year ago

2.4.0

1 year ago

2.0.0

1 year ago

1.5.3

1 year ago

1.5.2

1 year ago

1.5.1

1 year ago

1.5.0

1 year ago

2.3.0

1 year ago

2.3.2

1 year ago

2.3.1

1 year ago

2.3.3

1 year ago

1.8.1

1 year ago

1.8.0

1 year ago

1.4.1

1 year ago

1.4.0

1 year ago

2.2.1

1 year ago

2.2.0

1 year ago

1.7.1

1 year ago

1.7.0

1 year ago

1.3.3

1 year ago

1.3.2

1 year ago

1.3.1

1 year ago

1.3.0

1 year ago

2.1.2

1 year ago

2.1.1

1 year ago

2.5.0

1 year ago

2.1.4

1 year ago

2.1.3

1 year ago

2.5.1

1 year ago

2.1.5

1 year ago

1.2.2

1 year ago

1.2.1

1 year ago

1.2.0

1 year ago

1.1.1

1 year ago

1.1.0

1 year ago

1.1.3

1 year ago

1.1.2

1 year ago

1.0.11

1 year ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.8-next.6

2 years ago

1.0.8-next.5

2 years ago

1.0.8-next.4

2 years ago

1.0.8-next.3

2 years ago

1.0.8-next.2

2 years ago

1.0.8-next.1

2 years ago

1.0.8-next.0

2 years ago

1.0.7-next.0

2 years ago

1.0.8-beta.0

2 years ago

1.0.6

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

0.9.131

2 years ago

0.9.134

2 years ago

0.9.133

2 years ago

0.9.135

2 years ago

0.9.130

2 years ago

0.9.129

2 years ago

0.9.128

2 years ago

0.9.125

2 years ago

0.9.124

2 years ago

0.9.127

2 years ago

0.9.126

2 years ago

0.9.121

2 years ago

0.9.123

2 years ago

0.9.122

2 years ago

0.9.120

2 years ago

0.9.118

2 years ago

0.9.117

2 years ago

0.9.116

2 years ago

0.9.114

2 years ago

0.9.113

2 years ago

0.9.115

2 years ago

0.9.110

2 years ago

0.9.111

2 years ago

0.9.112

2 years ago

0.9.108

2 years ago

0.9.107

2 years ago

0.9.106

2 years ago

0.9.105

2 years ago

0.9.103

2 years ago

0.9.104

2 years ago

0.9.102

2 years ago

0.9.101

2 years ago

0.9.100

2 years ago

0.9.99

2 years ago

0.9.98

2 years ago

0.9.96

2 years ago

0.9.97

2 years ago

0.9.93

2 years ago

0.9.94

2 years ago

0.9.95

2 years ago

0.9.90

2 years ago

0.9.91

2 years ago

0.9.89

2 years ago

0.9.85

2 years ago

0.9.86

2 years ago

0.9.87

2 years ago

0.9.88

2 years ago

0.9.81

2 years ago

0.9.82

2 years ago

0.9.83

2 years ago

0.9.84

2 years ago

0.9.80

2 years ago

0.9.79

2 years ago

0.9.78

2 years ago

0.9.76

2 years ago

0.9.77

2 years ago

0.9.75

2 years ago

0.9.74

2 years ago

0.9.73

2 years ago

0.9.72

2 years ago

0.9.71

2 years ago

0.9.64

2 years ago

0.9.58

2 years ago

0.9.52

2 years ago

0.9.53

2 years ago

0.9.54

2 years ago

0.9.50

2 years ago

0.9.51

2 years ago

0.9.45

2 years ago

0.9.46

2 years ago

0.9.47

2 years ago

0.9.48

2 years ago

0.9.42

2 years ago

0.9.43

2 years ago

0.9.44

2 years ago

0.9.49

2 years ago

0.9.37

2 years ago

0.9.34

2 years ago

0.9.36

2 years ago

0.9.30

2 years ago

0.9.31

2 years ago

0.9.32

2 years ago

0.9.33

2 years ago

0.9.27

2 years ago

0.9.28

2 years ago

0.9.29

2 years ago

0.9.26

2 years ago

0.9.24

2 years ago

0.9.25

2 years ago

0.9.19

2 years ago

0.9.23

2 years ago

0.9.20

2 years ago

0.9.21

2 years ago

0.9.22

2 years ago

0.9.18

2 years ago

0.9.17

2 years ago

0.9.15

2 years ago

0.9.16

2 years ago

0.9.13

2 years ago

0.9.14

2 years ago

0.9.12

2 years ago

0.9.11

2 years ago

0.9.10

2 years ago

0.9.9

2 years ago

0.9.8

2 years ago

0.9.7

2 years ago

0.9.6

2 years ago

0.9.5

2 years ago

0.9.4

2 years ago

0.9.3

2 years ago

0.9.2

2 years ago

0.9.1

2 years ago