@memberjunction/ng-form-toolbar 2.32.2 → 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 +162 -0
- package/package.json +8 -8
package/README.md
ADDED
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
# @memberjunction/ng-form-toolbar
|
|
2
|
+
|
|
3
|
+
The `@memberjunction/ng-form-toolbar` package provides a consistent toolbar component for forms in MemberJunction Explorer applications. It handles standard form operations like editing, saving, deleting records, and provides additional functionality such as favoriting, viewing history, and adding records to lists.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- Context-aware button display based on form state (view/edit mode)
|
|
8
|
+
- Save functionality with visual feedback during save operations
|
|
9
|
+
- Delete confirmation with dependency checking
|
|
10
|
+
- Record history viewing (for trackable entities)
|
|
11
|
+
- Ability to add records to lists
|
|
12
|
+
- Skip AI chat integration for record-based conversations
|
|
13
|
+
- Favorite toggling for quick access to frequently used records
|
|
14
|
+
- Consistent UI across all MemberJunction forms
|
|
15
|
+
- Permission-based button visibility
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install @memberjunction/ng-form-toolbar
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Requirements
|
|
24
|
+
|
|
25
|
+
- Angular 18+
|
|
26
|
+
- @memberjunction/core
|
|
27
|
+
- @memberjunction/ng-base-forms
|
|
28
|
+
- @memberjunction/ng-shared
|
|
29
|
+
- @memberjunction/ng-ask-skip
|
|
30
|
+
- @memberjunction/ng-record-changes
|
|
31
|
+
- @progress/kendo-angular-buttons
|
|
32
|
+
- @progress/kendo-angular-dialog
|
|
33
|
+
|
|
34
|
+
## Usage
|
|
35
|
+
|
|
36
|
+
### Basic Setup
|
|
37
|
+
|
|
38
|
+
First, import the FormToolbarModule in your module:
|
|
39
|
+
|
|
40
|
+
```typescript
|
|
41
|
+
import { FormToolbarModule } from '@memberjunction/ng-form-toolbar';
|
|
42
|
+
|
|
43
|
+
@NgModule({
|
|
44
|
+
imports: [
|
|
45
|
+
// other imports...
|
|
46
|
+
FormToolbarModule
|
|
47
|
+
],
|
|
48
|
+
})
|
|
49
|
+
export class YourModule { }
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Adding the Toolbar to a Form
|
|
53
|
+
|
|
54
|
+
The toolbar is designed to work with forms that extend `BaseFormComponent`. Simply add it to your form template:
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
<mj-form-toolbar [form]="this"></mj-form-toolbar>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
In your component class:
|
|
61
|
+
|
|
62
|
+
```typescript
|
|
63
|
+
import { Component } from '@angular/core';
|
|
64
|
+
import { BaseFormComponent } from '@memberjunction/ng-base-forms';
|
|
65
|
+
import { MyEntityEntity } from '@memberjunction/core-entities';
|
|
66
|
+
|
|
67
|
+
@Component({
|
|
68
|
+
selector: 'app-my-entity-form',
|
|
69
|
+
templateUrl: './my-entity-form.component.html',
|
|
70
|
+
})
|
|
71
|
+
export class MyEntityFormComponent extends BaseFormComponent {
|
|
72
|
+
public record!: MyEntityEntity;
|
|
73
|
+
|
|
74
|
+
// Your form implementation...
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Customizing the Toolbar
|
|
79
|
+
|
|
80
|
+
You can control whether certain features are displayed:
|
|
81
|
+
|
|
82
|
+
```html
|
|
83
|
+
<mj-form-toolbar
|
|
84
|
+
[form]="this"
|
|
85
|
+
[ShowSkipChatButton]="false">
|
|
86
|
+
</mj-form-toolbar>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## API Reference
|
|
90
|
+
|
|
91
|
+
### FormToolbarComponent
|
|
92
|
+
|
|
93
|
+
#### Inputs
|
|
94
|
+
|
|
95
|
+
| Name | Type | Default | Description |
|
|
96
|
+
|------|------|---------|-------------|
|
|
97
|
+
| `form` | `BaseFormComponent` | (required) | The form component that this toolbar controls |
|
|
98
|
+
| `ShowSkipChatButton` | `boolean` | `true` | Whether to show the Skip chat button |
|
|
99
|
+
|
|
100
|
+
#### Properties
|
|
101
|
+
|
|
102
|
+
| Name | Type | Description |
|
|
103
|
+
|------|------|-------------|
|
|
104
|
+
| `Disabled` | `boolean` | Global setting to disable the toolbar |
|
|
105
|
+
| `CurrentlyDisabled` | `boolean` | Whether the toolbar is currently disabled |
|
|
106
|
+
|
|
107
|
+
#### Methods
|
|
108
|
+
|
|
109
|
+
| Name | Parameters | Return Type | Description |
|
|
110
|
+
|------|------------|-------------|-------------|
|
|
111
|
+
| `saveExistingRecord` | `event: MouseEvent` | `Promise<void>` | Saves the current record with visual feedback |
|
|
112
|
+
| `ShowSkipChat` | None | `void` | Opens the Skip chat dialog for the current record |
|
|
113
|
+
| `toggleDeleteDialog` | `show: boolean` | `void` | Shows or hides the delete confirmation dialog |
|
|
114
|
+
| `toggleListDialog` | `show: boolean` | `Promise<void>` | Shows or hides the add to list dialog |
|
|
115
|
+
| `addRecordToList` | `list: ListEntity` | `Promise<void>` | Adds the current record to the specified list |
|
|
116
|
+
| `deleteRecord` | None | `Promise<void>` | Deletes the current record after confirmation |
|
|
117
|
+
|
|
118
|
+
## Toolbar States
|
|
119
|
+
|
|
120
|
+
The toolbar adapts to different form states:
|
|
121
|
+
|
|
122
|
+
### View Mode
|
|
123
|
+
When the form is in view mode, the toolbar displays:
|
|
124
|
+
- Edit button (if user has edit permission)
|
|
125
|
+
- Delete button (if user has delete permission)
|
|
126
|
+
- Favorite/Unfavorite toggle
|
|
127
|
+
- Record history button (if entity tracks changes)
|
|
128
|
+
- Skip chat button (if enabled)
|
|
129
|
+
- Add to list button
|
|
130
|
+
|
|
131
|
+
### Edit Mode
|
|
132
|
+
When the form is in edit mode, the toolbar displays:
|
|
133
|
+
- Save button
|
|
134
|
+
- Cancel button (for existing records)
|
|
135
|
+
- Changes button (when there are unsaved changes)
|
|
136
|
+
|
|
137
|
+
## Styling
|
|
138
|
+
|
|
139
|
+
The toolbar uses the following CSS classes that can be customized:
|
|
140
|
+
|
|
141
|
+
- `.toolbar-container`: Main container for the toolbar
|
|
142
|
+
- `.disabled`: Applied when the toolbar is disabled
|
|
143
|
+
- `.button-text`: Text labels in buttons
|
|
144
|
+
- `.btn-no-border`: Button style without border
|
|
145
|
+
- `.list-item`, `.list-text`: Styles for list dialog items
|
|
146
|
+
- `.form-toolbar-status-message`: Style for the save status message
|
|
147
|
+
|
|
148
|
+
## Dependencies
|
|
149
|
+
|
|
150
|
+
- @angular/common
|
|
151
|
+
- @angular/core
|
|
152
|
+
- @angular/forms
|
|
153
|
+
- @angular/router
|
|
154
|
+
- @memberjunction/global
|
|
155
|
+
- @memberjunction/core
|
|
156
|
+
- @memberjunction/ng-shared
|
|
157
|
+
- @memberjunction/ng-base-forms
|
|
158
|
+
- @memberjunction/ng-ask-skip
|
|
159
|
+
- @memberjunction/ng-record-changes
|
|
160
|
+
- @progress/kendo-angular-buttons
|
|
161
|
+
- @progress/kendo-angular-dialog
|
|
162
|
+
- ngx-markdown
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-form-toolbar",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.33.0",
|
|
4
4
|
"description": "MemberJunction: Angular Form Toolbar",
|
|
5
5
|
"main": "./dist/public-api.js",
|
|
6
6
|
"typings": "./dist/public-api.d.ts",
|
|
@@ -25,13 +25,13 @@
|
|
|
25
25
|
"@angular/router": "18.0.2"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@memberjunction/global": "2.
|
|
29
|
-
"@memberjunction/core": "2.
|
|
30
|
-
"@memberjunction/ng-shared": "2.
|
|
31
|
-
"@memberjunction/ng-base-forms": "2.
|
|
32
|
-
"@memberjunction/ng-ask-skip": "2.
|
|
33
|
-
"@memberjunction/ng-record-changes": "2.
|
|
34
|
-
"@memberjunction/ng-container-directives": "2.
|
|
28
|
+
"@memberjunction/global": "2.33.0",
|
|
29
|
+
"@memberjunction/core": "2.33.0",
|
|
30
|
+
"@memberjunction/ng-shared": "2.33.0",
|
|
31
|
+
"@memberjunction/ng-base-forms": "2.33.0",
|
|
32
|
+
"@memberjunction/ng-ask-skip": "2.33.0",
|
|
33
|
+
"@memberjunction/ng-record-changes": "2.33.0",
|
|
34
|
+
"@memberjunction/ng-container-directives": "2.33.0",
|
|
35
35
|
"@progress/kendo-angular-buttons": "16.2.0",
|
|
36
36
|
"@progress/kendo-angular-dialog": "16.2.0",
|
|
37
37
|
"ngx-markdown": "^18.0.0",
|