@memberjunction/ng-query-viewer 4.0.0 → 4.2.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 +148 -0
- package/package.json +8 -8
package/README.md
ADDED
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
# @memberjunction/ng-query-viewer
|
|
2
|
+
|
|
3
|
+
Angular components for viewing and executing stored queries with parameter input, interactive AG Grid results, and entity linking. The recommended replacement for the deprecated `@memberjunction/ng-query-grid`.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @memberjunction/ng-query-viewer
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Overview
|
|
12
|
+
|
|
13
|
+
The Query Viewer provides a complete query execution experience: a parameter input form, an AG Grid results display, entity linking for clickable record IDs, and automatic state persistence to User Settings. It replaces the older Kendo-based Query Grid with a more feature-rich implementation.
|
|
14
|
+
|
|
15
|
+
```mermaid
|
|
16
|
+
flowchart TD
|
|
17
|
+
subgraph Viewer["QueryViewerComponent"]
|
|
18
|
+
A["QueryId Input"] --> B["Load Query Metadata"]
|
|
19
|
+
B --> C["QueryParameterFormComponent"]
|
|
20
|
+
C -->|Run| D["RunQuery API"]
|
|
21
|
+
D --> E["QueryDataGridComponent"]
|
|
22
|
+
end
|
|
23
|
+
subgraph Features["Key Features"]
|
|
24
|
+
F["State Persistence (User Settings)"]
|
|
25
|
+
G["Parameter Persistence"]
|
|
26
|
+
H["Entity Linking"]
|
|
27
|
+
I["Export (Excel/CSV)"]
|
|
28
|
+
end
|
|
29
|
+
subgraph Grid["QueryDataGridComponent"]
|
|
30
|
+
J["AG Grid"]
|
|
31
|
+
K["Column Config"]
|
|
32
|
+
L["Row Detail Panel"]
|
|
33
|
+
M["Query Info Panel"]
|
|
34
|
+
end
|
|
35
|
+
|
|
36
|
+
E --> J
|
|
37
|
+
E --> F
|
|
38
|
+
C --> G
|
|
39
|
+
J --> H
|
|
40
|
+
|
|
41
|
+
style Viewer fill:#2d6a9f,stroke:#1a4971,color:#fff
|
|
42
|
+
style Features fill:#7c5295,stroke:#563a6b,color:#fff
|
|
43
|
+
style Grid fill:#2d8659,stroke:#1a5c3a,color:#fff
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Usage
|
|
47
|
+
|
|
48
|
+
### Module Import
|
|
49
|
+
|
|
50
|
+
```typescript
|
|
51
|
+
import { QueryViewerModule } from '@memberjunction/ng-query-viewer';
|
|
52
|
+
|
|
53
|
+
@NgModule({
|
|
54
|
+
imports: [QueryViewerModule]
|
|
55
|
+
})
|
|
56
|
+
export class YourModule {}
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### Basic Usage
|
|
60
|
+
|
|
61
|
+
```html
|
|
62
|
+
<mj-query-viewer
|
|
63
|
+
[QueryId]="selectedQueryId"
|
|
64
|
+
[AutoRun]="true"
|
|
65
|
+
(EntityLinkClick)="openRecord($event)">
|
|
66
|
+
</mj-query-viewer>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### Full Configuration
|
|
70
|
+
|
|
71
|
+
```html
|
|
72
|
+
<mj-query-viewer
|
|
73
|
+
[QueryId]="queryId"
|
|
74
|
+
[AutoRun]="false"
|
|
75
|
+
[SelectionMode]="'multiple'"
|
|
76
|
+
[ShowInfoPanel]="true"
|
|
77
|
+
[ShowRowDetail]="true"
|
|
78
|
+
[PersistState]="true"
|
|
79
|
+
[PersistParams]="true"
|
|
80
|
+
(EntityLinkClick)="navigateToEntity($event)"
|
|
81
|
+
(SelectionChanged)="onSelectionChanged($event)"
|
|
82
|
+
(RowClick)="onRowClick($event)"
|
|
83
|
+
(GridStateChanged)="onStateChanged($event)">
|
|
84
|
+
</mj-query-viewer>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## Components
|
|
88
|
+
|
|
89
|
+
| Component | Selector | Purpose |
|
|
90
|
+
|-----------|----------|---------|
|
|
91
|
+
| `QueryViewerComponent` | `mj-query-viewer` | Top-level composite; orchestrates params, execution, and grid |
|
|
92
|
+
| `QueryDataGridComponent` | `mj-query-data-grid` | AG Grid wrapper with entity linking and export |
|
|
93
|
+
| `QueryParameterFormComponent` | `mj-query-parameter-form` | Renders input fields for query parameters |
|
|
94
|
+
| `QueryRowDetailComponent` | `mj-query-row-detail` | Expandable row detail display |
|
|
95
|
+
| `QueryInfoPanelComponent` | `mj-query-info-panel` | Query metadata and execution info panel |
|
|
96
|
+
|
|
97
|
+
## QueryViewerComponent API
|
|
98
|
+
|
|
99
|
+
### Inputs
|
|
100
|
+
|
|
101
|
+
| Property | Type | Default | Description |
|
|
102
|
+
|----------|------|---------|-------------|
|
|
103
|
+
| `QueryId` | `string \| null` | `null` | ID of the query to execute |
|
|
104
|
+
| `AutoRun` | `boolean` | `false` | Auto-run when all required params have saved values |
|
|
105
|
+
| `SelectionMode` | `QueryGridSelectionMode` | `'none'` | Row selection mode: `'none'`, `'single'`, `'multiple'` |
|
|
106
|
+
| `ShowInfoPanel` | `boolean` | `false` | Show query metadata panel |
|
|
107
|
+
| `ShowRowDetail` | `boolean` | `false` | Enable expandable row detail |
|
|
108
|
+
| `PersistState` | `boolean` | `true` | Save grid state (sort, columns) to User Settings |
|
|
109
|
+
| `PersistParams` | `boolean` | `true` | Save parameter values to User Settings |
|
|
110
|
+
|
|
111
|
+
### Outputs
|
|
112
|
+
|
|
113
|
+
| Event | Type | Description |
|
|
114
|
+
|-------|------|-------------|
|
|
115
|
+
| `EntityLinkClick` | `EventEmitter<QueryEntityLinkClickEvent>` | Clickable entity reference in a cell |
|
|
116
|
+
| `SelectionChanged` | `EventEmitter<QuerySelectionChangedEvent>` | Row selection changed |
|
|
117
|
+
| `RowClick` | `EventEmitter<QueryRowClickEvent>` | Row was clicked |
|
|
118
|
+
| `GridStateChanged` | `EventEmitter<QueryGridStateChangedEvent>` | Grid state changed (sort, filter, columns) |
|
|
119
|
+
|
|
120
|
+
## Exported Types
|
|
121
|
+
|
|
122
|
+
- `QueryGridSelectionMode` -- `'none' | 'single' | 'multiple'`
|
|
123
|
+
- `QueryGridColumnConfig` -- Column definition with entity link info
|
|
124
|
+
- `QueryGridSortState` -- Current sort column and direction
|
|
125
|
+
- `QueryGridState` -- Full persisted grid state
|
|
126
|
+
- `QueryParameterValues` -- Map of parameter names to values
|
|
127
|
+
- `QueryGridVisualConfig` -- Visual configuration options
|
|
128
|
+
- `QueryExportOptions` -- Export format and configuration
|
|
129
|
+
- `QueryRowClickEvent` -- Row click event data
|
|
130
|
+
- `QueryEntityLinkClickEvent` -- Entity link click with entity name and record ID
|
|
131
|
+
|
|
132
|
+
## Utility Functions
|
|
133
|
+
|
|
134
|
+
- `buildColumnsFromQueryFields(fields)` -- Generates column config from query field metadata
|
|
135
|
+
- `buildColumnsFromData(data)` -- Generates column config by inspecting result data
|
|
136
|
+
|
|
137
|
+
## Dependencies
|
|
138
|
+
|
|
139
|
+
- [@memberjunction/core](../../MJCore/README.md) -- Metadata, RunQuery, QueryInfo
|
|
140
|
+
- [@memberjunction/core-entities](../../MJCoreEntities/README.md) -- UserInfoEngine for state persistence
|
|
141
|
+
- [@memberjunction/ng-notifications](../notifications/README.md) -- User notifications
|
|
142
|
+
- [@memberjunction/ng-shared-generic](../shared/README.md) -- Loading component
|
|
143
|
+
- [@memberjunction/ng-export-service](../export-service/README.md) -- Export functionality
|
|
144
|
+
- `ag-grid-angular` / `ag-grid-community` -- Grid rendering
|
|
145
|
+
|
|
146
|
+
## Related Packages
|
|
147
|
+
|
|
148
|
+
- [@memberjunction/ng-query-grid](../query-grid/README.md) -- Deprecated predecessor
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-query-viewer",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.2.0",
|
|
4
4
|
"description": "MemberJunction: Angular components for viewing and executing stored queries with parameter input, interactive results grid, and entity linking",
|
|
5
5
|
"main": "./dist/public-api.js",
|
|
6
6
|
"typings": "./dist/public-api.d.ts",
|
|
@@ -35,13 +35,13 @@
|
|
|
35
35
|
"ag-grid-community": "^35.0.1"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@memberjunction/core-entities": "4.
|
|
39
|
-
"@memberjunction/export-engine": "4.
|
|
40
|
-
"@memberjunction/global": "4.
|
|
41
|
-
"@memberjunction/core": "4.
|
|
42
|
-
"@memberjunction/ng-shared-generic": "4.
|
|
43
|
-
"@memberjunction/ng-export-service": "4.
|
|
44
|
-
"@memberjunction/ng-notifications": "4.
|
|
38
|
+
"@memberjunction/core-entities": "4.2.0",
|
|
39
|
+
"@memberjunction/export-engine": "4.2.0",
|
|
40
|
+
"@memberjunction/global": "4.2.0",
|
|
41
|
+
"@memberjunction/core": "4.2.0",
|
|
42
|
+
"@memberjunction/ng-shared-generic": "4.2.0",
|
|
43
|
+
"@memberjunction/ng-export-service": "4.2.0",
|
|
44
|
+
"@memberjunction/ng-notifications": "4.2.0",
|
|
45
45
|
"rxjs": "^7.8.2",
|
|
46
46
|
"tslib": "^2.8.1"
|
|
47
47
|
},
|