@memberjunction/ng-entity-form-dialog 2.32.1 → 2.33.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +129 -0
- package/package.json +7 -7
package/README.md
ADDED
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
# @memberjunction/ng-entity-form-dialog
|
|
2
|
+
|
|
3
|
+
Angular component for displaying MemberJunction entity forms in a dialog, with support for both complete forms and individual form sections.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- Display entity forms in a modal dialog
|
|
8
|
+
- Support for displaying the complete form or specific sections
|
|
9
|
+
- Configurable save and cancel behavior
|
|
10
|
+
- Automatic form component loading based on entity type
|
|
11
|
+
- Customizable dialog dimensions and appearance
|
|
12
|
+
- Integration with MemberJunction entity management
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install @memberjunction/ng-entity-form-dialog
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
Import the module in your application:
|
|
23
|
+
|
|
24
|
+
```typescript
|
|
25
|
+
import { EntityFormDialogModule } from '@memberjunction/ng-entity-form-dialog';
|
|
26
|
+
|
|
27
|
+
@NgModule({
|
|
28
|
+
imports: [
|
|
29
|
+
// ...
|
|
30
|
+
EntityFormDialogModule
|
|
31
|
+
]
|
|
32
|
+
})
|
|
33
|
+
export class YourModule { }
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Basic Usage
|
|
37
|
+
|
|
38
|
+
```html
|
|
39
|
+
<mj-entity-form-dialog
|
|
40
|
+
[Record]="myEntityRecord"
|
|
41
|
+
[Visible]="showDialog"
|
|
42
|
+
(DialogClosed)="onDialogClosed($event)">
|
|
43
|
+
</mj-entity-form-dialog>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### Complete Form Mode
|
|
47
|
+
|
|
48
|
+
Display the entire form for an entity:
|
|
49
|
+
|
|
50
|
+
```html
|
|
51
|
+
<mj-entity-form-dialog
|
|
52
|
+
Title="Edit User"
|
|
53
|
+
[Record]="userRecord"
|
|
54
|
+
Mode="complete"
|
|
55
|
+
[Visible]="showDialog"
|
|
56
|
+
[Width]="800"
|
|
57
|
+
[Height]="600"
|
|
58
|
+
[HandleSave]="true"
|
|
59
|
+
[AutoRevertOnCancel]="true"
|
|
60
|
+
(DialogClosed)="onDialogClosed($event)">
|
|
61
|
+
</mj-entity-form-dialog>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Section Mode
|
|
65
|
+
|
|
66
|
+
Display only a specific section of a form:
|
|
67
|
+
|
|
68
|
+
```html
|
|
69
|
+
<mj-entity-form-dialog
|
|
70
|
+
Title="Edit User Details"
|
|
71
|
+
[Record]="userRecord"
|
|
72
|
+
Mode="section"
|
|
73
|
+
SectionName="details"
|
|
74
|
+
[Visible]="showDialog"
|
|
75
|
+
[Width]="500"
|
|
76
|
+
[Height]="350"
|
|
77
|
+
[HandleSave]="true"
|
|
78
|
+
[AutoRevertOnCancel]="true"
|
|
79
|
+
(DialogClosed)="onDialogClosed($event)">
|
|
80
|
+
</mj-entity-form-dialog>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## Input Properties
|
|
84
|
+
|
|
85
|
+
| Property | Type | Default | Description |
|
|
86
|
+
|----------|------|---------|-------------|
|
|
87
|
+
| Title | string | '' | Dialog title |
|
|
88
|
+
| ShowSaveButton | boolean | true | Whether to show the Save button |
|
|
89
|
+
| ShowCancelButton | boolean | true | Whether to show the Cancel button |
|
|
90
|
+
| Width | number | 800 | Dialog width in pixels |
|
|
91
|
+
| Height | number | 600 | Dialog height in pixels |
|
|
92
|
+
| Mode | 'complete' \| 'section' | 'complete' | Whether to show the entire form or a specific section |
|
|
93
|
+
| SectionName | string | '' | The section name to display (when Mode is 'section') |
|
|
94
|
+
| Record | BaseEntity | null | The entity record to edit (required) |
|
|
95
|
+
| HandleSave | boolean | true | Whether to automatically save the record on Save click |
|
|
96
|
+
| AutoRevertOnCancel | boolean | true | Whether to automatically revert changes on Cancel click |
|
|
97
|
+
| Visible | boolean | false | Controls dialog visibility |
|
|
98
|
+
|
|
99
|
+
## Output Events
|
|
100
|
+
|
|
101
|
+
| Event | Type | Description |
|
|
102
|
+
|-------|------|-------------|
|
|
103
|
+
| DialogClosed | EventEmitter<'Save' \| 'Cancel'> | Emitted when the dialog is closed |
|
|
104
|
+
|
|
105
|
+
## Handling Dialog Close
|
|
106
|
+
|
|
107
|
+
```typescript
|
|
108
|
+
onDialogClosed(result: 'Save' | 'Cancel') {
|
|
109
|
+
if (result === 'Save') {
|
|
110
|
+
// Handle successful save
|
|
111
|
+
console.log('Record saved');
|
|
112
|
+
} else {
|
|
113
|
+
// Handle cancel
|
|
114
|
+
console.log('Edit cancelled');
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
// Hide the dialog
|
|
118
|
+
this.showDialog = false;
|
|
119
|
+
}
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
## Dynamic Form Loading
|
|
123
|
+
|
|
124
|
+
The component automatically loads the appropriate form component based on the entity type:
|
|
125
|
+
|
|
126
|
+
- In 'complete' mode, it loads a subclass of `BaseFormComponent` for the entity
|
|
127
|
+
- In 'section' mode, it loads a subclass of `BaseFormSectionComponent` for the entity and section
|
|
128
|
+
|
|
129
|
+
These components must be registered with the MemberJunction class factory system.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-entity-form-dialog",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.33.0",
|
|
4
4
|
"description": "MemberJunction: Dialog component that is able to display a form for display and/or editing for any record from any entity in MemberJunction.",
|
|
5
5
|
"main": "./dist/public-api.js",
|
|
6
6
|
"typings": "./dist/public-api.d.ts",
|
|
@@ -25,12 +25,12 @@
|
|
|
25
25
|
"@angular/router": "18.0.2"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@memberjunction/core-entities": "2.
|
|
29
|
-
"@memberjunction/global": "2.
|
|
30
|
-
"@memberjunction/core": "2.
|
|
31
|
-
"@memberjunction/ng-container-directives": "2.
|
|
32
|
-
"@memberjunction/ng-shared": "2.
|
|
33
|
-
"@memberjunction/ng-base-forms": "2.
|
|
28
|
+
"@memberjunction/core-entities": "2.33.0",
|
|
29
|
+
"@memberjunction/global": "2.33.0",
|
|
30
|
+
"@memberjunction/core": "2.33.0",
|
|
31
|
+
"@memberjunction/ng-container-directives": "2.33.0",
|
|
32
|
+
"@memberjunction/ng-shared": "2.33.0",
|
|
33
|
+
"@memberjunction/ng-base-forms": "2.33.0",
|
|
34
34
|
"@progress/kendo-angular-buttons": "16.2.0",
|
|
35
35
|
"@progress/kendo-angular-dialog": "16.2.0",
|
|
36
36
|
"tslib": "^2.3.0"
|