@memberjunction/ng-entity-viewer 3.4.0 → 4.1.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 +173 -212
- package/dist/lib/aggregate-panel/aggregate-panel.component.d.ts.map +1 -1
- package/dist/lib/aggregate-panel/aggregate-panel.component.js +36 -35
- package/dist/lib/aggregate-panel/aggregate-panel.component.js.map +1 -1
- package/dist/lib/aggregate-setup-dialog/aggregate-setup-dialog.component.d.ts.map +1 -1
- package/dist/lib/aggregate-setup-dialog/aggregate-setup-dialog.component.js +15 -12
- package/dist/lib/aggregate-setup-dialog/aggregate-setup-dialog.component.js.map +1 -1
- package/dist/lib/entity-cards/entity-cards.component.d.ts.map +1 -1
- package/dist/lib/entity-cards/entity-cards.component.js +14 -13
- package/dist/lib/entity-cards/entity-cards.component.js.map +1 -1
- package/dist/lib/entity-data-grid/entity-data-grid.component.d.ts +1 -1
- package/dist/lib/entity-data-grid/entity-data-grid.component.d.ts.map +1 -1
- package/dist/lib/entity-data-grid/entity-data-grid.component.js +280 -266
- package/dist/lib/entity-data-grid/entity-data-grid.component.js.map +1 -1
- package/dist/lib/entity-record-detail-panel/entity-record-detail-panel.component.d.ts.map +1 -1
- package/dist/lib/entity-record-detail-panel/entity-record-detail-panel.component.js +16 -15
- package/dist/lib/entity-record-detail-panel/entity-record-detail-panel.component.js.map +1 -1
- package/dist/lib/entity-viewer/entity-viewer.component.d.ts +1 -1
- package/dist/lib/entity-viewer/entity-viewer.component.d.ts.map +1 -1
- package/dist/lib/entity-viewer/entity-viewer.component.js +13 -10
- package/dist/lib/entity-viewer/entity-viewer.component.js.map +1 -1
- package/dist/lib/pagination/pagination.component.d.ts.map +1 -1
- package/dist/lib/pagination/pagination.component.js +8 -6
- package/dist/lib/pagination/pagination.component.js.map +1 -1
- package/dist/lib/pill/pill.component.d.ts.map +1 -1
- package/dist/lib/pill/pill.component.js +3 -3
- package/dist/lib/pill/pill.component.js.map +1 -1
- package/dist/lib/view-config-panel/view-config-panel.component.d.ts.map +1 -1
- package/dist/lib/view-config-panel/view-config-panel.component.js +56 -43
- package/dist/lib/view-config-panel/view-config-panel.component.js.map +1 -1
- package/package.json +19 -19
package/README.md
CHANGED
|
@@ -1,18 +1,39 @@
|
|
|
1
1
|
# @memberjunction/ng-entity-viewer
|
|
2
2
|
|
|
3
|
-
Angular components for viewing MemberJunction entity data in multiple formats
|
|
4
|
-
|
|
5
|
-
##
|
|
6
|
-
|
|
7
|
-
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
3
|
+
Angular components for viewing MemberJunction entity data in multiple formats -- grid, card, and timeline views -- with filtering, selection, toolbar actions, and a comprehensive Before/After cancelable event system.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
The `@memberjunction/ng-entity-viewer` package provides a suite of data presentation components built on AG Grid. The primary component, `EntityDataGridComponent`, offers infinite scroll, configurable toolbars with custom buttons, server-side sorting, grid state persistence, and a rich event system where "before" events can be canceled. The `EntityViewerComponent` wraps the grid alongside card and timeline views with a view-mode toggle.
|
|
8
|
+
|
|
9
|
+
```mermaid
|
|
10
|
+
flowchart TD
|
|
11
|
+
subgraph Composite["EntityViewerComponent"]
|
|
12
|
+
TOGGLE[View Mode Toggle] --> GRID[Grid View]
|
|
13
|
+
TOGGLE --> CARDS[Card View]
|
|
14
|
+
TOGGLE --> TIMELINE[Timeline View]
|
|
15
|
+
end
|
|
16
|
+
|
|
17
|
+
subgraph Grid["EntityDataGridComponent"]
|
|
18
|
+
TB[Configurable Toolbar] --> AG[AG Grid]
|
|
19
|
+
AG --> INF[Infinite Scroll]
|
|
20
|
+
AG --> SEL[Selection Modes]
|
|
21
|
+
AG --> STATE[State Persistence]
|
|
22
|
+
AG --> EVENTS[Before/After Events]
|
|
23
|
+
end
|
|
24
|
+
|
|
25
|
+
subgraph Data["Data Sources"]
|
|
26
|
+
RV[RunView Params] --> Grid
|
|
27
|
+
PRE[Pre-loaded Data] --> Grid
|
|
28
|
+
ENT[Entity Name + Filter] --> Grid
|
|
29
|
+
end
|
|
30
|
+
|
|
31
|
+
GRID --> Grid
|
|
32
|
+
|
|
33
|
+
style Composite fill:#2d6a9f,stroke:#1a4971,color:#fff
|
|
34
|
+
style Grid fill:#7c5295,stroke:#563a6b,color:#fff
|
|
35
|
+
style Data fill:#2d8659,stroke:#1a5c3a,color:#fff
|
|
36
|
+
```
|
|
16
37
|
|
|
17
38
|
## Installation
|
|
18
39
|
|
|
@@ -20,7 +41,7 @@ Angular components for viewing MemberJunction entity data in multiple formats -
|
|
|
20
41
|
npm install @memberjunction/ng-entity-viewer ag-grid-angular ag-grid-community
|
|
21
42
|
```
|
|
22
43
|
|
|
23
|
-
##
|
|
44
|
+
## Usage
|
|
24
45
|
|
|
25
46
|
### Import the Module
|
|
26
47
|
|
|
@@ -33,32 +54,23 @@ import { EntityViewerModule } from '@memberjunction/ng-entity-viewer';
|
|
|
33
54
|
export class MyModule { }
|
|
34
55
|
```
|
|
35
56
|
|
|
36
|
-
###
|
|
57
|
+
### Composite Viewer
|
|
37
58
|
|
|
38
59
|
```html
|
|
39
|
-
<!-- Composite viewer with grid/cards/timeline toggle -->
|
|
40
60
|
<mj-entity-viewer
|
|
41
61
|
[entity]="selectedEntity"
|
|
62
|
+
[viewEntity]="myUserView"
|
|
63
|
+
[showGridToolbar]="true"
|
|
64
|
+
[gridToolbarConfig]="toolbarConfig"
|
|
65
|
+
[gridSelectionMode]="'multiple'"
|
|
42
66
|
(recordSelected)="onRecordSelected($event)"
|
|
43
|
-
(recordOpened)="onRecordOpened($event)"
|
|
67
|
+
(recordOpened)="onRecordOpened($event)"
|
|
68
|
+
(addRequested)="onAddNew()"
|
|
69
|
+
(exportRequested)="onExport($event)">
|
|
44
70
|
</mj-entity-viewer>
|
|
45
|
-
|
|
46
|
-
<!-- Standalone data grid with toolbar -->
|
|
47
|
-
<mj-entity-data-grid
|
|
48
|
-
[entityName]="'Contacts'"
|
|
49
|
-
[showToolbar]="true"
|
|
50
|
-
[selectionMode]="'multiple'"
|
|
51
|
-
(afterRowDoubleClick)="onRowDoubleClick($event)">
|
|
52
|
-
</mj-entity-data-grid>
|
|
53
71
|
```
|
|
54
72
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
## Components
|
|
58
|
-
|
|
59
|
-
### EntityDataGridComponent (`mj-entity-data-grid`)
|
|
60
|
-
|
|
61
|
-
Modern AG Grid-based data grid with rich event system and configurable toolbar.
|
|
73
|
+
### Standalone Data Grid
|
|
62
74
|
|
|
63
75
|
```html
|
|
64
76
|
<mj-entity-data-grid
|
|
@@ -76,121 +88,133 @@ Modern AG Grid-based data grid with rich event system and configurable toolbar.
|
|
|
76
88
|
</mj-entity-data-grid>
|
|
77
89
|
```
|
|
78
90
|
|
|
91
|
+
### Cancelable Events
|
|
92
|
+
|
|
93
|
+
```typescript
|
|
94
|
+
onBeforeRowSelect(event: BeforeRowSelectEventArgs) {
|
|
95
|
+
// Prevent selecting locked records
|
|
96
|
+
if (event.row.Get('Status') === 'Locked') {
|
|
97
|
+
event.cancel = true;
|
|
98
|
+
event.cancelReason = 'Cannot select locked records';
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## API Reference
|
|
104
|
+
|
|
105
|
+
### EntityDataGridComponent (`mj-entity-data-grid`)
|
|
106
|
+
|
|
107
|
+
AG Grid-based data grid with rich event system and configurable toolbar.
|
|
108
|
+
|
|
79
109
|
#### Data Source Inputs
|
|
80
110
|
|
|
81
111
|
| Input | Type | Default | Description |
|
|
82
112
|
|-------|------|---------|-------------|
|
|
83
|
-
| `Params` | RunViewParams | - | Primary data source (
|
|
84
|
-
| `entityName` | string | - | Entity name for dynamic views |
|
|
85
|
-
| `extraFilter` | string | - | Additional WHERE clause filter |
|
|
86
|
-
| `searchString` | string | - | User search string |
|
|
87
|
-
| `orderBy` | string | - | ORDER BY clause |
|
|
88
|
-
| `maxRows` | number | 0 | Max rows to fetch (0 = no limit) |
|
|
89
|
-
| `data` | BaseEntity[] | - | Pre-loaded data (bypasses RunView) |
|
|
90
|
-
| `AllowLoad` | boolean | true | Enable/disable data loading |
|
|
91
|
-
| `AutoRefreshOnParamsChange` | boolean | true | Auto-refresh when Params changes |
|
|
113
|
+
| `Params` | `RunViewParams` | - | Primary data source (stored views + dynamic views) |
|
|
114
|
+
| `entityName` | `string` | - | Entity name for dynamic views |
|
|
115
|
+
| `extraFilter` | `string` | - | Additional WHERE clause filter |
|
|
116
|
+
| `searchString` | `string` | - | User search string |
|
|
117
|
+
| `orderBy` | `string` | - | ORDER BY clause |
|
|
118
|
+
| `maxRows` | `number` | `0` | Max rows to fetch (0 = no limit) |
|
|
119
|
+
| `data` | `BaseEntity[]` | - | Pre-loaded data (bypasses RunView) |
|
|
120
|
+
| `AllowLoad` | `boolean` | `true` | Enable/disable data loading |
|
|
121
|
+
| `AutoRefreshOnParamsChange` | `boolean` | `true` | Auto-refresh when Params changes |
|
|
92
122
|
|
|
93
123
|
#### Pagination Inputs
|
|
94
124
|
|
|
95
125
|
| Input | Type | Default | Description |
|
|
96
126
|
|-------|------|---------|-------------|
|
|
97
|
-
| `PaginationMode` | 'client' \| 'infinite' | 'client' | Pagination strategy |
|
|
98
|
-
| `PageSize` | number | 100 | Rows per page (infinite mode) |
|
|
99
|
-
| `CacheBlockSize` | number | 100 | Cache block size (infinite mode) |
|
|
100
|
-
| `MaxBlocksInCache` | number | 10 | Max cached blocks |
|
|
127
|
+
| `PaginationMode` | `'client' \| 'infinite'` | `'client'` | Pagination strategy |
|
|
128
|
+
| `PageSize` | `number` | `100` | Rows per page (infinite mode) |
|
|
129
|
+
| `CacheBlockSize` | `number` | `100` | Cache block size (infinite mode) |
|
|
130
|
+
| `MaxBlocksInCache` | `number` | `10` | Max cached blocks |
|
|
101
131
|
|
|
102
132
|
#### Display Inputs
|
|
103
133
|
|
|
104
134
|
| Input | Type | Default | Description |
|
|
105
135
|
|-------|------|---------|-------------|
|
|
106
|
-
| `showToolbar` | boolean | true | Show the toolbar |
|
|
107
|
-
| `toolbarConfig` | GridToolbarConfig | - | Toolbar configuration |
|
|
108
|
-
| `selectionMode` | 'none' \| 'single' \| 'multiple' \| 'checkbox' | 'single' | Row selection mode |
|
|
109
|
-
| `height` | number \| 'auto' \| 'fit-content' | 'auto' | Grid height |
|
|
110
|
-
| `gridState` | ViewGridStateConfig | - | Column/sort state from User View |
|
|
111
|
-
| `allowSorting` | boolean | true | Enable column sorting |
|
|
112
|
-
| `allowColumnReorder` | boolean | true | Enable column reordering |
|
|
113
|
-
| `allowColumnResize` | boolean | true | Enable column resizing |
|
|
114
|
-
| `serverSideSorting` | boolean | true | Sort triggers server reload |
|
|
136
|
+
| `showToolbar` | `boolean` | `true` | Show the toolbar |
|
|
137
|
+
| `toolbarConfig` | `GridToolbarConfig` | - | Toolbar configuration |
|
|
138
|
+
| `selectionMode` | `'none' \| 'single' \| 'multiple' \| 'checkbox'` | `'single'` | Row selection mode |
|
|
139
|
+
| `height` | `number \| 'auto' \| 'fit-content'` | `'auto'` | Grid height |
|
|
140
|
+
| `gridState` | `ViewGridStateConfig` | - | Column/sort state from User View |
|
|
141
|
+
| `allowSorting` | `boolean` | `true` | Enable column sorting |
|
|
142
|
+
| `allowColumnReorder` | `boolean` | `true` | Enable column reordering |
|
|
143
|
+
| `allowColumnResize` | `boolean` | `true` | Enable column resizing |
|
|
144
|
+
| `serverSideSorting` | `boolean` | `true` | Sort triggers server reload |
|
|
115
145
|
|
|
116
146
|
#### Before/After Events
|
|
117
147
|
|
|
118
148
|
The grid uses a cancelable event pattern. Before events can be canceled by setting `event.cancel = true`.
|
|
119
149
|
|
|
120
150
|
**Row Selection Events:**
|
|
151
|
+
|
|
121
152
|
| Event | Args Type | Description |
|
|
122
153
|
|-------|-----------|-------------|
|
|
123
|
-
| `beforeRowSelect` | BeforeRowSelectEventArgs | Before row is selected |
|
|
124
|
-
| `afterRowSelect` | AfterRowSelectEventArgs | After row is selected |
|
|
125
|
-
| `beforeRowDeselect` | BeforeRowDeselectEventArgs | Before row is deselected |
|
|
126
|
-
| `afterRowDeselect` | AfterRowDeselectEventArgs | After row is deselected |
|
|
154
|
+
| `beforeRowSelect` | `BeforeRowSelectEventArgs` | Before row is selected |
|
|
155
|
+
| `afterRowSelect` | `AfterRowSelectEventArgs` | After row is selected |
|
|
156
|
+
| `beforeRowDeselect` | `BeforeRowDeselectEventArgs` | Before row is deselected |
|
|
157
|
+
| `afterRowDeselect` | `AfterRowDeselectEventArgs` | After row is deselected |
|
|
127
158
|
|
|
128
159
|
**Row Click Events:**
|
|
160
|
+
|
|
129
161
|
| Event | Args Type | Description |
|
|
130
162
|
|-------|-----------|-------------|
|
|
131
|
-
| `beforeRowClick` | BeforeRowClickEventArgs | Before row click processes |
|
|
132
|
-
| `afterRowClick` | AfterRowClickEventArgs | After row click |
|
|
133
|
-
| `beforeRowDoubleClick` | BeforeRowDoubleClickEventArgs | Before double-click |
|
|
134
|
-
| `afterRowDoubleClick` | AfterRowDoubleClickEventArgs | After double-click |
|
|
163
|
+
| `beforeRowClick` | `BeforeRowClickEventArgs` | Before row click processes |
|
|
164
|
+
| `afterRowClick` | `AfterRowClickEventArgs` | After row click |
|
|
165
|
+
| `beforeRowDoubleClick` | `BeforeRowDoubleClickEventArgs` | Before double-click |
|
|
166
|
+
| `afterRowDoubleClick` | `AfterRowDoubleClickEventArgs` | After double-click |
|
|
135
167
|
|
|
136
168
|
**Data Events:**
|
|
169
|
+
|
|
137
170
|
| Event | Args Type | Description |
|
|
138
171
|
|-------|-----------|-------------|
|
|
139
|
-
| `beforeDataLoad` | BeforeDataLoadEventArgs | Before data loads |
|
|
140
|
-
| `afterDataLoad` | AfterDataLoadEventArgs | After data loads |
|
|
141
|
-
| `beforeDataRefresh` | BeforeDataRefreshEventArgs | Before refresh |
|
|
142
|
-
| `afterDataRefresh` | AfterDataRefreshEventArgs | After refresh |
|
|
172
|
+
| `beforeDataLoad` | `BeforeDataLoadEventArgs` | Before data loads |
|
|
173
|
+
| `afterDataLoad` | `AfterDataLoadEventArgs` | After data loads |
|
|
174
|
+
| `beforeDataRefresh` | `BeforeDataRefreshEventArgs` | Before refresh |
|
|
175
|
+
| `afterDataRefresh` | `AfterDataRefreshEventArgs` | After refresh |
|
|
143
176
|
|
|
144
177
|
**Sorting/Column Events:**
|
|
178
|
+
|
|
145
179
|
| Event | Args Type | Description |
|
|
146
180
|
|-------|-----------|-------------|
|
|
147
|
-
| `beforeSort` | BeforeSortEventArgs | Before sort changes |
|
|
148
|
-
| `afterSort` | AfterSortEventArgs | After sort changes |
|
|
149
|
-
| `beforeColumnReorder` | BeforeColumnReorderEventArgs | Before column move |
|
|
150
|
-
| `afterColumnReorder` | AfterColumnReorderEventArgs | After column move |
|
|
151
|
-
| `gridStateChanged` | GridStateChangedEvent | Column state changed |
|
|
181
|
+
| `beforeSort` | `BeforeSortEventArgs` | Before sort changes |
|
|
182
|
+
| `afterSort` | `AfterSortEventArgs` | After sort changes |
|
|
183
|
+
| `beforeColumnReorder` | `BeforeColumnReorderEventArgs` | Before column move |
|
|
184
|
+
| `afterColumnReorder` | `AfterColumnReorderEventArgs` | After column move |
|
|
185
|
+
| `gridStateChanged` | `GridStateChangedEvent` | Column state changed |
|
|
152
186
|
|
|
153
187
|
**Toolbar Button Events:**
|
|
188
|
+
|
|
154
189
|
| Event | Args Type | Description |
|
|
155
190
|
|-------|-----------|-------------|
|
|
156
|
-
| `newButtonClick` | void | Add/New button clicked |
|
|
157
|
-
| `refreshButtonClick` | void | Refresh button clicked |
|
|
158
|
-
| `deleteButtonClick` | BaseEntity[] | Delete button clicked |
|
|
159
|
-
| `exportButtonClick` | void | Export button clicked |
|
|
160
|
-
| `compareButtonClick` | BaseEntity[] | Compare button clicked |
|
|
161
|
-
| `mergeButtonClick` | BaseEntity[] | Merge button clicked |
|
|
162
|
-
| `addToListButtonClick` | BaseEntity[] | Add to List clicked |
|
|
163
|
-
|
|
164
|
-
---
|
|
191
|
+
| `newButtonClick` | `void` | Add/New button clicked |
|
|
192
|
+
| `refreshButtonClick` | `void` | Refresh button clicked |
|
|
193
|
+
| `deleteButtonClick` | `BaseEntity[]` | Delete button clicked |
|
|
194
|
+
| `exportButtonClick` | `void` | Export button clicked |
|
|
195
|
+
| `compareButtonClick` | `BaseEntity[]` | Compare button clicked |
|
|
196
|
+
| `mergeButtonClick` | `BaseEntity[]` | Merge button clicked |
|
|
197
|
+
| `addToListButtonClick` | `BaseEntity[]` | Add to List clicked |
|
|
165
198
|
|
|
166
199
|
### GridToolbarConfig
|
|
167
200
|
|
|
168
|
-
Configure
|
|
201
|
+
Configure toolbar buttons and behavior:
|
|
169
202
|
|
|
170
203
|
```typescript
|
|
171
204
|
const toolbarConfig: GridToolbarConfig = {
|
|
172
|
-
// Search
|
|
173
205
|
showSearch: true,
|
|
174
206
|
searchPlaceholder: 'Search records...',
|
|
175
207
|
searchDebounce: 300,
|
|
176
|
-
|
|
177
|
-
// Buttons
|
|
178
208
|
showRefresh: true,
|
|
179
209
|
showAdd: true,
|
|
180
210
|
showDelete: true,
|
|
181
211
|
showExport: true,
|
|
182
212
|
showColumnChooser: true,
|
|
183
213
|
showFilterToggle: false,
|
|
184
|
-
|
|
185
|
-
// Export options
|
|
186
214
|
exportFormats: ['excel', 'csv', 'json'],
|
|
187
|
-
|
|
188
|
-
// Display
|
|
189
215
|
showRowCount: true,
|
|
190
216
|
showSelectionCount: true,
|
|
191
217
|
position: 'top',
|
|
192
|
-
|
|
193
|
-
// Custom buttons
|
|
194
218
|
customButtons: [
|
|
195
219
|
{
|
|
196
220
|
id: 'myButton',
|
|
@@ -204,92 +228,40 @@ const toolbarConfig: GridToolbarConfig = {
|
|
|
204
228
|
};
|
|
205
229
|
```
|
|
206
230
|
|
|
207
|
-
#### GridToolbarConfig Options
|
|
208
|
-
|
|
209
|
-
| Option | Type | Default | Description |
|
|
210
|
-
|--------|------|---------|-------------|
|
|
211
|
-
| `showSearch` | boolean | true | Show search input |
|
|
212
|
-
| `searchPlaceholder` | string | 'Search...' | Search placeholder text |
|
|
213
|
-
| `searchDebounce` | number | 300 | Search debounce (ms) |
|
|
214
|
-
| `showRefresh` | boolean | true | Show refresh button |
|
|
215
|
-
| `showAdd` | boolean | true | Show add/new button |
|
|
216
|
-
| `showDelete` | boolean | true | Show delete button |
|
|
217
|
-
| `showExport` | boolean | true | Show export button |
|
|
218
|
-
| `exportFormats` | Array | ['excel'] | Available export formats |
|
|
219
|
-
| `showColumnChooser` | boolean | true | Show column chooser |
|
|
220
|
-
| `showFilterToggle` | boolean | false | Show filter toggle |
|
|
221
|
-
| `showRowCount` | boolean | true | Show total row count |
|
|
222
|
-
| `showSelectionCount` | boolean | true | Show selected count |
|
|
223
|
-
| `position` | string | 'top' | Toolbar position |
|
|
224
|
-
| `customButtons` | GridToolbarButton[] | [] | Custom buttons |
|
|
225
|
-
|
|
226
|
-
#### GridToolbarButton
|
|
227
|
-
|
|
228
|
-
| Property | Type | Description |
|
|
229
|
-
|----------|------|-------------|
|
|
230
|
-
| `id` | string | Unique button identifier |
|
|
231
|
-
| `text` | string | Button text |
|
|
232
|
-
| `icon` | string | Font Awesome icon class |
|
|
233
|
-
| `tooltip` | string | Hover tooltip |
|
|
234
|
-
| `disabled` | boolean \| () => boolean | Disabled state |
|
|
235
|
-
| `visible` | boolean \| () => boolean | Visibility |
|
|
236
|
-
| `cssClass` | string | Custom CSS class |
|
|
237
|
-
| `position` | 'left' \| 'right' | Button position |
|
|
238
|
-
| `onClick` | () => void | Click handler |
|
|
239
|
-
|
|
240
|
-
---
|
|
241
|
-
|
|
242
231
|
### EntityViewerComponent (`mj-entity-viewer`)
|
|
243
232
|
|
|
244
|
-
Composite component combining grid, cards, and timeline views
|
|
245
|
-
|
|
246
|
-
```html
|
|
247
|
-
<mj-entity-viewer
|
|
248
|
-
[entity]="selectedEntity"
|
|
249
|
-
[viewEntity]="myUserView"
|
|
250
|
-
[showGridToolbar]="true"
|
|
251
|
-
[gridToolbarConfig]="toolbarConfig"
|
|
252
|
-
[gridSelectionMode]="'multiple'"
|
|
253
|
-
(recordSelected)="onRecordSelected($event)"
|
|
254
|
-
(recordOpened)="onRecordOpened($event)"
|
|
255
|
-
(addRequested)="onAddNew()"
|
|
256
|
-
(exportRequested)="onExport($event)">
|
|
257
|
-
</mj-entity-viewer>
|
|
258
|
-
```
|
|
233
|
+
Composite component combining grid, cards, and timeline views.
|
|
259
234
|
|
|
260
235
|
#### Inputs
|
|
261
236
|
|
|
262
237
|
| Input | Type | Default | Description |
|
|
263
238
|
|-------|------|---------|-------------|
|
|
264
|
-
| `entity` | EntityInfo | - | Entity metadata |
|
|
265
|
-
| `records` | BaseEntity[] | - | Pre-loaded records |
|
|
266
|
-
| `viewEntity` | UserViewEntityExtended | - | User View for filtering/sorting |
|
|
267
|
-
| `viewMode` | 'grid' \| 'cards' \| 'timeline' | 'grid' | Current view mode |
|
|
268
|
-
| `filterText` | string | - | Filter text |
|
|
269
|
-
| `sortState` | SortState | - | Sort state |
|
|
270
|
-
| `gridState` | ViewGridStateConfig | - | Grid column state |
|
|
271
|
-
| `showGridToolbar` | boolean | true | Show grid toolbar |
|
|
272
|
-
| `gridToolbarConfig` | GridToolbarConfig | - | Toolbar configuration |
|
|
273
|
-
| `gridSelectionMode` | GridSelectionMode | 'single' | Selection mode |
|
|
274
|
-
| `config` | EntityViewerConfig | - | Viewer configuration |
|
|
239
|
+
| `entity` | `EntityInfo` | - | Entity metadata |
|
|
240
|
+
| `records` | `BaseEntity[]` | - | Pre-loaded records |
|
|
241
|
+
| `viewEntity` | `UserViewEntityExtended` | - | User View for filtering/sorting |
|
|
242
|
+
| `viewMode` | `'grid' \| 'cards' \| 'timeline'` | `'grid'` | Current view mode |
|
|
243
|
+
| `filterText` | `string` | - | Filter text |
|
|
244
|
+
| `sortState` | `SortState` | - | Sort state |
|
|
245
|
+
| `gridState` | `ViewGridStateConfig` | - | Grid column state |
|
|
246
|
+
| `showGridToolbar` | `boolean` | `true` | Show grid toolbar |
|
|
247
|
+
| `gridToolbarConfig` | `GridToolbarConfig` | - | Toolbar configuration |
|
|
248
|
+
| `gridSelectionMode` | `GridSelectionMode` | `'single'` | Selection mode |
|
|
275
249
|
|
|
276
250
|
#### Outputs
|
|
277
251
|
|
|
278
252
|
| Output | Event Type | Description |
|
|
279
253
|
|--------|------------|-------------|
|
|
280
|
-
| `recordSelected` | RecordSelectedEvent | Record clicked |
|
|
281
|
-
| `recordOpened` | RecordOpenedEvent | Record double-clicked |
|
|
282
|
-
| `dataLoaded` | DataLoadedEvent | Data finished loading |
|
|
283
|
-
| `viewModeChange` | EntityViewMode | View mode changed |
|
|
284
|
-
| `filterTextChange` | string | Filter text changed |
|
|
285
|
-
| `sortChanged` | SortChangedEvent | Sort changed |
|
|
286
|
-
| `gridStateChanged` | GridStateChangedEvent | Grid state changed |
|
|
287
|
-
| `addRequested` | void | Add button clicked |
|
|
288
|
-
| `deleteRequested` | { records } | Delete button clicked |
|
|
289
|
-
| `refreshRequested` | void | Refresh button clicked |
|
|
290
|
-
| `exportRequested` | { format } | Export button clicked |
|
|
291
|
-
|
|
292
|
-
---
|
|
254
|
+
| `recordSelected` | `RecordSelectedEvent` | Record clicked |
|
|
255
|
+
| `recordOpened` | `RecordOpenedEvent` | Record double-clicked |
|
|
256
|
+
| `dataLoaded` | `DataLoadedEvent` | Data finished loading |
|
|
257
|
+
| `viewModeChange` | `EntityViewMode` | View mode changed |
|
|
258
|
+
| `filterTextChange` | `string` | Filter text changed |
|
|
259
|
+
| `sortChanged` | `SortChangedEvent` | Sort changed |
|
|
260
|
+
| `gridStateChanged` | `GridStateChangedEvent` | Grid state changed |
|
|
261
|
+
| `addRequested` | `void` | Add button clicked |
|
|
262
|
+
| `deleteRequested` | `{ records }` | Delete button clicked |
|
|
263
|
+
| `refreshRequested` | `void` | Refresh button clicked |
|
|
264
|
+
| `exportRequested` | `{ format }` | Export button clicked |
|
|
293
265
|
|
|
294
266
|
### EntityCardsComponent (`mj-entity-cards`)
|
|
295
267
|
|
|
@@ -300,32 +272,27 @@ Card-based view with auto-generated layout.
|
|
|
300
272
|
[entity]="selectedEntity"
|
|
301
273
|
[records]="records"
|
|
302
274
|
[filterText]="searchFilter"
|
|
303
|
-
[cardTemplate]="customTemplate"
|
|
304
275
|
(recordSelected)="onSelected($event)"
|
|
305
276
|
(recordOpened)="onOpened($event)">
|
|
306
277
|
</mj-entity-cards>
|
|
307
278
|
```
|
|
308
279
|
|
|
309
|
-
---
|
|
310
|
-
|
|
311
280
|
### PillComponent (`mj-pill`)
|
|
312
281
|
|
|
313
|
-
Semantic color pill for categorical values.
|
|
282
|
+
Semantic color pill for categorical values. Colors are auto-detected based on value:
|
|
283
|
+
|
|
284
|
+
| Color | Values |
|
|
285
|
+
|-------|--------|
|
|
286
|
+
| success (green) | active, approved, complete, success |
|
|
287
|
+
| warning (yellow) | pending, in progress, draft, waiting |
|
|
288
|
+
| danger (red) | failed, error, rejected, cancelled |
|
|
289
|
+
| info (blue) | new, info, created, open |
|
|
290
|
+
| neutral (gray) | default |
|
|
314
291
|
|
|
315
292
|
```html
|
|
316
293
|
<mj-pill [value]="record.Status"></mj-pill>
|
|
317
|
-
<mj-pill [value]="record.Type" color="info"></mj-pill>
|
|
318
294
|
```
|
|
319
295
|
|
|
320
|
-
Auto-detected colors:
|
|
321
|
-
- **success** (green): active, approved, complete, success
|
|
322
|
-
- **warning** (yellow): pending, in progress, draft, waiting
|
|
323
|
-
- **danger** (red): failed, error, rejected, cancelled
|
|
324
|
-
- **info** (blue): new, info, created, open
|
|
325
|
-
- **neutral** (gray): default
|
|
326
|
-
|
|
327
|
-
---
|
|
328
|
-
|
|
329
296
|
## Advanced Usage
|
|
330
297
|
|
|
331
298
|
### Infinite Scroll Pagination
|
|
@@ -350,31 +317,6 @@ Auto-detected colors:
|
|
|
350
317
|
</mj-entity-data-grid>
|
|
351
318
|
```
|
|
352
319
|
|
|
353
|
-
### Cancelable Events
|
|
354
|
-
|
|
355
|
-
```typescript
|
|
356
|
-
onBeforeRowSelect(event: BeforeRowSelectEventArgs) {
|
|
357
|
-
// Prevent selecting certain rows
|
|
358
|
-
if (event.row.Get('Status') === 'Locked') {
|
|
359
|
-
event.cancel = true;
|
|
360
|
-
event.cancelReason = 'Cannot select locked records';
|
|
361
|
-
}
|
|
362
|
-
}
|
|
363
|
-
```
|
|
364
|
-
|
|
365
|
-
### Custom Export Handler
|
|
366
|
-
|
|
367
|
-
```typescript
|
|
368
|
-
onExportRequested(event: { format: 'excel' | 'csv' | 'json' }) {
|
|
369
|
-
// Custom export logic
|
|
370
|
-
if (event.format === 'excel') {
|
|
371
|
-
this.exportService.exportToExcel(this.records);
|
|
372
|
-
}
|
|
373
|
-
}
|
|
374
|
-
```
|
|
375
|
-
|
|
376
|
-
---
|
|
377
|
-
|
|
378
320
|
## Type Exports
|
|
379
321
|
|
|
380
322
|
```typescript
|
|
@@ -402,17 +344,36 @@ import {
|
|
|
402
344
|
} from '@memberjunction/ng-entity-viewer';
|
|
403
345
|
```
|
|
404
346
|
|
|
405
|
-
---
|
|
406
|
-
|
|
407
347
|
## Dependencies
|
|
408
348
|
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
349
|
+
### Runtime Dependencies
|
|
350
|
+
|
|
351
|
+
| Package | Description |
|
|
352
|
+
|---------|-------------|
|
|
353
|
+
| `@memberjunction/core` | Core framework |
|
|
354
|
+
| `@memberjunction/core-entities` | Entity type definitions |
|
|
355
|
+
| `@memberjunction/global` | Global utilities |
|
|
356
|
+
| `@memberjunction/export-engine` | Data export engine |
|
|
357
|
+
| `@memberjunction/ng-shared-generic` | Shared generic components |
|
|
358
|
+
| `@memberjunction/ng-timeline` | Timeline view component |
|
|
359
|
+
| `@memberjunction/ng-filter-builder` | Filter builder component |
|
|
360
|
+
| `@memberjunction/ng-export-service` | Export service and dialog |
|
|
361
|
+
|
|
362
|
+
### Peer Dependencies
|
|
363
|
+
|
|
364
|
+
- `@angular/common` ^21.x
|
|
365
|
+
- `@angular/core` ^21.x
|
|
366
|
+
- `@angular/forms` ^21.x
|
|
367
|
+
- `@angular/animations` ^21.x
|
|
368
|
+
- `ag-grid-angular` ^35.x
|
|
369
|
+
- `ag-grid-community` ^35.x
|
|
370
|
+
|
|
371
|
+
## Build
|
|
372
|
+
|
|
373
|
+
```bash
|
|
374
|
+
cd packages/Angular/Generic/entity-viewer
|
|
375
|
+
npm run build
|
|
376
|
+
```
|
|
416
377
|
|
|
417
378
|
## License
|
|
418
379
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"aggregate-panel.component.d.ts","sourceRoot":"","sources":["../../../src/lib/aggregate-panel/aggregate-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,YAAY,EACZ,MAAM,EACP,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,iBAAiB,EAGlB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;;AAEtD;;;;;;;;;;GAUG;AACH,
|
|
1
|
+
{"version":3,"file":"aggregate-panel.component.d.ts","sourceRoot":"","sources":["../../../src/lib/aggregate-panel/aggregate-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,YAAY,EACZ,MAAM,EACP,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,iBAAiB,EAGlB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;;AAEtD;;;;;;;;;;GAUG;AACH,qBAMa,uBAAwB,YAAW,MAAM;IACpD;;OAEG;IACM,UAAU,EAAE,iBAAiB,EAAE,CAAM;IAE9C;;OAEG;IACM,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,cAAc,CAAC,CAAa;IAEzD;;OAEG;IACM,QAAQ,EAAE,OAAO,GAAG,QAAQ,CAAW;IAEhD;;OAEG;IACM,KAAK,EAAE,MAAM,CAAO;IAE7B;;OAEG;IACM,MAAM,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAc;IAEjE;;OAEG;IACM,WAAW,EAAE,MAAM,CAAK;IAEjC;;OAEG;IACM,KAAK,EAAE,MAAM,CAAa;IAEnC;;OAEG;IACM,WAAW,EAAE,OAAO,CAAQ;IAErC;;OAEG;IACM,cAAc,EAAE,OAAO,CAAS;IAEzC;;OAEG;IACM,OAAO,EAAE,OAAO,CAAS;IAElC;;OAEG;IACO,eAAe,wBAA+B;IAExD;;OAEG;IACO,cAAc,kCAAyC;IAEjE,WAAW,UAAS;IAEpB,QAAQ,IAAI,IAAI;IAIhB;;OAEG;IACH,cAAc,IAAI,IAAI;IAOtB;;OAEG;IACH,gBAAgB,CAAC,GAAG,EAAE,iBAAiB,GAAG,IAAI;IAI9C;;OAEG;IACH,WAAW,CAAC,GAAG,EAAE,iBAAiB,GAAG,MAAM;IAU3C;;OAEG;IACH,aAAa,CAAC,GAAG,EAAE,iBAAiB,GAAG,MAAM;IAc7C;;OAEG;IACH,IAAI,iBAAiB,IAAI,iBAAiB,EAAE,CAE3C;IAED;;OAEG;IACH,IAAI,cAAc,IAAI,iBAAiB,EAAE,CAIxC;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAQvC;IAED;;OAEG;IACH,IAAI,mBAAmB,IAAI,MAAM,CAKhC;IAED;;OAEG;IACH,OAAO,CAAC,YAAY;IAyBpB;;OAEG;IACH,OAAO,CAAC,YAAY;IAoBpB;;OAEG;IACH,OAAO,CAAC,UAAU;IAyBlB;;OAEG;IACH,OAAO,CAAC,iBAAiB;yCA3Od,uBAAuB;2CAAvB,uBAAuB;CAiQnC"}
|