@memberjunction/ng-join-grid 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 +176 -0
- package/package.json +7 -7
package/README.md
ADDED
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
# Join Grid
|
|
2
|
+
|
|
3
|
+
The Join Grid component is a powerful Angular grid that allows you to display and edit relationships between two entities, typically in a many-to-many relationship. It provides a checkbox-based interface for mapping relationships between records.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Two Operation Modes**:
|
|
8
|
+
- **Entity Mode**: Creates/deletes records in a junction entity
|
|
9
|
+
- **Fields Mode**: Updates fields in related records
|
|
10
|
+
- **Flexible Data Sources**: Load data from full entities, views, or arrays
|
|
11
|
+
- **Automatic Grid Generation**: Builds grid structure based on provided entity relationships
|
|
12
|
+
- **Integrated with MemberJunction**: Works with the MJ metadata system and BaseEntity objects
|
|
13
|
+
- **Transaction Support**: Manages pending changes with transaction groups
|
|
14
|
+
- **Form Integration**: Can be integrated with parent form components and respond to form events
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @memberjunction/ng-join-grid
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Usage
|
|
23
|
+
|
|
24
|
+
### Import the Module
|
|
25
|
+
|
|
26
|
+
```typescript
|
|
27
|
+
import { JoinGridModule } from '@memberjunction/ng-join-grid';
|
|
28
|
+
|
|
29
|
+
@NgModule({
|
|
30
|
+
imports: [
|
|
31
|
+
JoinGridModule,
|
|
32
|
+
// other imports
|
|
33
|
+
],
|
|
34
|
+
// ...
|
|
35
|
+
})
|
|
36
|
+
export class YourModule { }
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### Basic Component Usage (Entity Mode)
|
|
40
|
+
|
|
41
|
+
Use this mode when you want to manage relationships between two entities by creating or deleting records in a junction entity.
|
|
42
|
+
|
|
43
|
+
```html
|
|
44
|
+
<mj-join-grid
|
|
45
|
+
[RowsEntityName]="'Users'"
|
|
46
|
+
[RowsEntityDisplayField]="'UserName'"
|
|
47
|
+
[ColumnsEntityName]="'Roles'"
|
|
48
|
+
[ColumnsEntityDisplayField]="'RoleName'"
|
|
49
|
+
[JoinEntityName]="'UserRoles'"
|
|
50
|
+
[JoinEntityRowForeignKey]="'UserID'"
|
|
51
|
+
[JoinEntityColumnForeignKey]="'RoleID'"
|
|
52
|
+
[CheckBoxValueMode]="'RecordExists'"
|
|
53
|
+
[ShowSaveButton]="true"
|
|
54
|
+
[ShowCancelButton]="true">
|
|
55
|
+
</mj-join-grid>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Fields Mode
|
|
59
|
+
|
|
60
|
+
Used when you want to edit fields in a related entity:
|
|
61
|
+
|
|
62
|
+
```html
|
|
63
|
+
<mj-join-grid
|
|
64
|
+
[RowsEntityName]="'Users'"
|
|
65
|
+
[RowsEntityDisplayField]="'UserName'"
|
|
66
|
+
[ColumnsMode]="'Fields'"
|
|
67
|
+
[JoinEntityName]="'UserPreferences'"
|
|
68
|
+
[JoinEntityRowForeignKey]="'UserID'"
|
|
69
|
+
[JoinEntityDisplayColumns]="['PreferenceType', 'PreferenceValue']"
|
|
70
|
+
[ShowSaveButton]="true"
|
|
71
|
+
[ShowCancelButton]="true">
|
|
72
|
+
</mj-join-grid>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## API Reference
|
|
76
|
+
|
|
77
|
+
### Inputs
|
|
78
|
+
|
|
79
|
+
#### General Configuration
|
|
80
|
+
- `ShowSaveButton`: boolean - Show/hide the save button
|
|
81
|
+
- `ShowCancelButton`: boolean - Show/hide the cancel button
|
|
82
|
+
- `EditMode`: 'None' | 'Save' | 'Queue' - Control editing mode
|
|
83
|
+
- `NewRecordDefaultValues`: { [key: string]: any } - Default values for new records
|
|
84
|
+
|
|
85
|
+
#### Row Configuration
|
|
86
|
+
- `RowsEntityName`: string - Name of the entity for rows
|
|
87
|
+
- `RowsEntityDisplayName`: string - (Optional) Display name instead of entity name
|
|
88
|
+
- `RowsEntityDisplayField`: string - Field to display in the first column
|
|
89
|
+
- `RowsEntityDataSource`: 'FullEntity' | 'ViewName' | 'Array' - Data source for rows
|
|
90
|
+
- `RowsEntityViewName`: string - View name when datasource is 'ViewName'
|
|
91
|
+
- `RowsExtraFilter`: string - Additional filter for rows
|
|
92
|
+
- `RowsOrderBy`: string - Order by clause for rows
|
|
93
|
+
- `RowsEntityArray`: BaseEntity[] - Array of entities when datasource is 'Array'
|
|
94
|
+
|
|
95
|
+
#### Column Configuration
|
|
96
|
+
- `ColumnsMode`: 'Entity' | 'Fields' - Mode for column generation
|
|
97
|
+
- `ColumnsEntityName`: string - Name of entity for columns (Entity mode)
|
|
98
|
+
- `ColumnsEntityDisplayField`: string - Field to display as column headers (Entity mode)
|
|
99
|
+
- `ColumnsEntityDataSource`: 'FullEntity' | 'ViewName' | 'Array' - Data source for columns
|
|
100
|
+
- `ColumnsEntityViewName`: string - View name when datasource is 'ViewName'
|
|
101
|
+
- `ColumnsExtraFilter`: string - Additional filter for columns
|
|
102
|
+
- `ColumnsOrderBy`: string - Order by clause for columns
|
|
103
|
+
- `ColumnsEntityArray`: BaseEntity[] - Array of entities when datasource is 'Array'
|
|
104
|
+
|
|
105
|
+
#### Join Entity Configuration
|
|
106
|
+
- `JoinEntityName`: string - Name of junction entity
|
|
107
|
+
- `JoinEntityRowForeignKey`: string - Foreign key field for rows
|
|
108
|
+
- `JoinEntityColumnForeignKey`: string - Foreign key field for columns
|
|
109
|
+
- `JoinEntityDisplayColumns`: string[] - Columns to display (Fields mode)
|
|
110
|
+
- `JoinEntityExtraFilter`: string - Additional filter for junction entity
|
|
111
|
+
- `CheckBoxValueMode`: 'RecordExists' | 'ColumnValue' - How checkbox values are stored
|
|
112
|
+
- `CheckBoxValueField`: string - Field for checkbox values when mode is 'ColumnValue'
|
|
113
|
+
|
|
114
|
+
### Methods
|
|
115
|
+
|
|
116
|
+
- `Refresh()`: Load/reload grid data
|
|
117
|
+
- `Save()`: Save all pending changes
|
|
118
|
+
- `CancelEdit()`: Cancel pending changes
|
|
119
|
+
- `UpdateCellValueDirect(row, colIndex, newValue)`: Update a cell value (Fields mode)
|
|
120
|
+
- `AddJoinEntityRecord(row)`: Add a new junction record (Fields mode)
|
|
121
|
+
- `RemoveJoinEntityRecord(row)`: Remove a junction record (Fields mode)
|
|
122
|
+
|
|
123
|
+
## Examples
|
|
124
|
+
|
|
125
|
+
### User-Role Assignment Grid
|
|
126
|
+
|
|
127
|
+
```typescript
|
|
128
|
+
// Component
|
|
129
|
+
@Component({
|
|
130
|
+
selector: 'app-user-roles',
|
|
131
|
+
template: `
|
|
132
|
+
<mj-join-grid
|
|
133
|
+
[RowsEntityName]="'Users'"
|
|
134
|
+
[RowsEntityDisplayField]="'UserName'"
|
|
135
|
+
[ColumnsEntityName]="'Roles'"
|
|
136
|
+
[ColumnsEntityDisplayField]="'RoleName'"
|
|
137
|
+
[JoinEntityName]="'UserRoles'"
|
|
138
|
+
[JoinEntityRowForeignKey]="'UserID'"
|
|
139
|
+
[JoinEntityColumnForeignKey]="'RoleID'"
|
|
140
|
+
[RowsExtraFilter]="'IsActive = 1'"
|
|
141
|
+
[ColumnsExtraFilter]="'IsActive = 1'"
|
|
142
|
+
[RowsOrderBy]="'UserName ASC'"
|
|
143
|
+
[ColumnsOrderBy]="'RoleName ASC'"
|
|
144
|
+
[ShowSaveButton]="true"
|
|
145
|
+
[ShowCancelButton]="true">
|
|
146
|
+
</mj-join-grid>
|
|
147
|
+
`
|
|
148
|
+
})
|
|
149
|
+
export class UserRolesComponent { }
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
### Product Category Assignment with Custom Values
|
|
153
|
+
|
|
154
|
+
```typescript
|
|
155
|
+
// Component with defaults for new junction records
|
|
156
|
+
@Component({
|
|
157
|
+
selector: 'app-product-categories',
|
|
158
|
+
template: `
|
|
159
|
+
<mj-join-grid
|
|
160
|
+
[RowsEntityName]="'Products'"
|
|
161
|
+
[RowsEntityDisplayField]="'ProductName'"
|
|
162
|
+
[ColumnsEntityName]="'Categories'"
|
|
163
|
+
[ColumnsEntityDisplayField]="'CategoryName'"
|
|
164
|
+
[JoinEntityName]="'ProductCategories'"
|
|
165
|
+
[JoinEntityRowForeignKey]="'ProductID'"
|
|
166
|
+
[JoinEntityColumnForeignKey]="'CategoryID'"
|
|
167
|
+
[NewRecordDefaultValues]="{'IsPrimary': false}"
|
|
168
|
+
[ShowSaveButton]="true"
|
|
169
|
+
[ShowCancelButton]="true">
|
|
170
|
+
</mj-join-grid>
|
|
171
|
+
`
|
|
172
|
+
})
|
|
173
|
+
export class ProductCategoriesComponent {
|
|
174
|
+
// Additional component logic
|
|
175
|
+
}
|
|
176
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-join-grid",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.33.0",
|
|
4
4
|
"description": "MemberJunction: Grid component that is able to display/edit the relationship between two entities. For example being able to edit Users + Roles in a single grid.",
|
|
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-base-types": "2.
|
|
32
|
-
"@memberjunction/ng-container-directives": "2.
|
|
33
|
-
"@memberjunction/ng-shared": "2.
|
|
28
|
+
"@memberjunction/core-entities": "2.33.0",
|
|
29
|
+
"@memberjunction/global": "2.33.0",
|
|
30
|
+
"@memberjunction/core": "2.33.0",
|
|
31
|
+
"@memberjunction/ng-base-types": "2.33.0",
|
|
32
|
+
"@memberjunction/ng-container-directives": "2.33.0",
|
|
33
|
+
"@memberjunction/ng-shared": "2.33.0",
|
|
34
34
|
"@progress/kendo-angular-buttons": "16.2.0",
|
|
35
35
|
"@progress/kendo-angular-dialog": "16.2.0",
|
|
36
36
|
"@progress/kendo-angular-layout": "16.2.0",
|