2.48.0 • Published 4 months ago

@memberjunction/ng-entity-form-dialog v2.48.0

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

@memberjunction/ng-entity-form-dialog

Angular component for displaying MemberJunction entity forms in a modal dialog, with support for both complete forms and individual form sections. This component provides a reusable dialog wrapper that dynamically loads the appropriate form component based on the entity type and configuration.

Features

  • Display entity forms in a modal dialog powered by Kendo UI
  • Support for displaying complete forms or specific form sections
  • Automatic save functionality with error handling
  • Configurable cancel behavior with automatic change reversion
  • Dynamic form component loading using MemberJunction's class factory system
  • Customizable dialog dimensions and appearance
  • TypeScript support with full type safety
  • Integration with MemberJunction entity management system

Installation

npm install @memberjunction/ng-entity-form-dialog

Dependencies

This package requires the following peer dependencies:

  • @angular/common: ^18.0.2
  • @angular/core: ^18.0.2
  • @angular/forms: ^18.0.2
  • @angular/router: ^18.0.2

The package also depends on:

  • @memberjunction/core: For BaseEntity support
  • @memberjunction/ng-base-forms: For form components
  • @memberjunction/ng-shared: For shared services
  • @progress/kendo-angular-dialog: For dialog UI
  • @progress/kendo-angular-buttons: For button UI

Module Setup

Import the module in your Angular application:

import { EntityFormDialogModule } from '@memberjunction/ng-entity-form-dialog';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    EntityFormDialogModule
  ]
})
export class YourModule { }

Usage Examples

Basic Usage

<mj-entity-form-dialog
  [Record]="myEntityRecord"
  [Visible]="showDialog"
  (DialogClosed)="onDialogClosed($event)">
</mj-entity-form-dialog>

Complete Form Mode

Display the entire form for an entity:

<mj-entity-form-dialog
  Title="Edit User"
  [Record]="userRecord"
  Mode="complete"
  [Visible]="showDialog"
  [Width]="800"
  [Height]="600"
  [HandleSave]="true"
  [AutoRevertOnCancel]="true"
  (DialogClosed)="onDialogClosed($event)">
</mj-entity-form-dialog>

Section Mode

Display only a specific section of a form:

<mj-entity-form-dialog
  Title="Edit User Details"
  [Record]="userRecord"
  Mode="section"
  SectionName="details"
  [Visible]="showDialog"
  [Width]="500"
  [Height]="350"
  [HandleSave]="true"
  [AutoRevertOnCancel]="true"
  (DialogClosed)="onDialogClosed($event)">
</mj-entity-form-dialog>

Component Implementation

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

@Component({
  selector: 'app-user-management',
  template: `
    <button (click)="editUser()">Edit User</button>
    
    <mj-entity-form-dialog
      Title="Edit User"
      [Record]="userRecord"
      [Visible]="showDialog"
      [HandleSave]="true"
      [AutoRevertOnCancel]="true"
      (DialogClosed)="onDialogClosed($event)">
    </mj-entity-form-dialog>
  `
})
export class UserManagementComponent {
  userRecord: BaseEntity | null = null;
  showDialog = false;

  async editUser() {
    // Load user record using MemberJunction metadata system
    const md = new Metadata();
    this.userRecord = await md.GetEntityObject('Users');
    await this.userRecord.Load(userId);
    
    // Show the dialog
    this.showDialog = true;
  }

  onDialogClosed(result: 'Save' | 'Cancel') {
    if (result === 'Save') {
      // Handle successful save
      console.log('User saved successfully');
      // Refresh your UI or perform other actions
    } else {
      // Handle cancel - changes are automatically reverted if AutoRevertOnCancel is true
      console.log('Edit cancelled');
    }
    
    // Hide the dialog
    this.showDialog = false;
  }
}

API Reference

Input Properties

PropertyTypeDefaultDescription
Titlestring''The title displayed in the dialog header
ShowSaveButtonbooleantrueWhether to display the Save button
ShowCancelButtonbooleantrueWhether to display the Cancel button
Widthnumber800Initial dialog width in pixels
Heightnumber600Initial dialog height in pixels
Mode'complete' \| 'section''complete'Display mode - entire form or specific section
SectionNamestring''The section name to display (required when Mode is 'section')
RecordBaseEntity \| nullnullThe entity record to edit (required)
HandleSavebooleantrueAutomatically save the record when Save is clicked
AutoRevertOnCancelbooleantrueAutomatically revert changes when Cancel is clicked
VisiblebooleanfalseControls dialog visibility

Output Events

EventTypeDescription
DialogClosedEventEmitter<'Save' \| 'Cancel'>Emitted when the dialog is closed with the action taken

Public Methods

ShowForm()

Programmatically shows the form. This is automatically called when the Visible property is set to true.

@ViewChild(EntityFormDialogComponent) formDialog!: EntityFormDialogComponent;

showFormProgrammatically() {
  this.formDialog.ShowForm();
}

CloseWindow(status: 'Save' | 'Cancel')

Programmatically closes the dialog with the specified status.

closeDialogProgrammatically() {
  this.formDialog.CloseWindow('Cancel');
}

Form Component Registration

The dialog dynamically loads form components based on the entity type and mode. These components must be registered with MemberJunction's class factory system:

For Complete Mode

Register a subclass of BaseFormComponent with the entity name:

import { RegisterClass } from '@memberjunction/global';
import { BaseFormComponent } from '@memberjunction/ng-base-forms';

@RegisterClass(BaseFormComponent, 'Users')
export class UserFormComponent extends BaseFormComponent {
  // Your form implementation
}

For Section Mode

Register a subclass of BaseFormSectionComponent with the pattern EntityName.SectionName:

import { RegisterClass } from '@memberjunction/global';
import { BaseFormSectionComponent } from '@memberjunction/ng-base-forms';

@RegisterClass(BaseFormSectionComponent, 'Users.details')
export class UserDetailsSectionComponent extends BaseFormSectionComponent {
  // Your section implementation
}

Error Handling

The component includes built-in error handling for save operations:

  • If HandleSave is true and the save operation fails, the component will:
    1. Display an error notification using SharedService
    2. Automatically revert the changes to prevent data corruption
    3. Still emit the DialogClosed event with 'Save' status

Best Practices

  1. Always provide a Record: The Record property is required and must be a valid BaseEntity instance
  2. Handle the DialogClosed event: Always implement a handler to manage dialog visibility
  3. Use proper entity loading: Load entities using MemberJunction's Metadata system
  4. Register form components: Ensure your custom form components are properly registered
  5. Consider dialog dimensions: Adjust Width and Height based on your form complexity

Integration with Other MemberJunction Packages

This package integrates seamlessly with:

  • @memberjunction/core: For entity management
  • @memberjunction/ng-base-forms: For form component base classes
  • @memberjunction/ng-shared: For notification services
  • @memberjunction/global: For class factory registration

Building

To build the package:

npm run build

The package uses Angular's ngc compiler and outputs to the dist directory.

2.27.1

8 months ago

2.23.2

8 months ago

2.46.0

4 months ago

2.23.1

8 months ago

2.27.0

8 months ago

2.34.0

6 months ago

2.30.0

7 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.15.2

9 months ago

2.34.2

6 months ago

2.34.1

6 months ago

2.15.1

9 months ago

2.38.0

5 months ago

2.45.0

5 months ago

2.22.1

8 months ago

2.22.0

8 months ago

2.41.0

5 months ago

2.22.2

8 months ago

2.26.1

8 months ago

2.26.0

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.37.1

5 months ago

2.37.0

5 months ago

2.14.0

9 months ago

2.21.0

9 months ago

2.44.0

5 months ago

2.40.0

5 months ago

2.29.0

7 months ago

2.29.2

7 months ago

2.29.1

7 months ago

2.25.0

8 months ago

2.48.0

4 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.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.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.47.0

4 months ago

2.24.1

8 months ago

2.24.0

8 months ago

2.31.0

7 months ago

2.12.0

12 months ago

2.39.0

5 months ago

2.16.1

9 months ago

2.35.1

6 months ago

2.35.0

6 months ago

2.16.0

9 months ago

2.42.1

5 months ago

2.42.0

5 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.6.1

1 year ago

2.6.0

1 year ago

2.7.0

1 year ago

2.5.2

1 year ago

2.7.1

1 year ago

1.8.1

1 year ago

1.8.0

1 year ago

1.6.1

1 year ago

1.6.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

2.4.1

1 year ago

2.4.0

1 year ago

2.0.0

1 year ago

1.7.1

1 year ago

1.5.3

1 year ago

1.7.0

1 year ago

1.5.2

1 year ago

1.5.1

1 year ago

1.3.3

1 year ago

1.5.0

1 year ago

1.3.2

1 year ago

1.3.1

1 year ago

1.3.0

1 year ago

2.3.0

1 year ago

2.1.2

1 year ago

2.1.1

1 year ago

2.5.0

1 year ago

2.3.2

1 year ago

2.1.4

1 year ago

2.3.1

1 year ago

2.1.3

1 year ago

2.5.1

1 year ago

2.3.3

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-beta.0

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.6

2 years ago

1.0.4

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

0.9.25

2 years ago

0.9.23

2 years ago

0.9.24

2 years ago

0.9.21

2 years ago

0.9.22

2 years ago

0.9.18

2 years ago

0.9.15

2 years ago

0.9.16

2 years ago

0.9.17

2 years ago

0.9.14

2 years ago

0.9.12

2 years ago

0.9.13

2 years ago

0.9.10

2 years ago

0.9.11

2 years ago

0.9.8

2 years ago

0.9.9

2 years ago

0.9.7

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