@memberjunction/ng-tasks 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.
Files changed (4) hide show
  1. package/.turbo/turbo-build.log +4 -6
  2. package/CHANGELOG.md +21 -0
  3. package/README.md +85 -198
  4. package/package.json +5 -5
package/.turbo/turbo-build.log CHANGED
@@ -1,6 +1,4 @@
1
-
2
- 
3
- > @memberjunction/ng-tasks@4.0.0 build
4
- > ngc
5
-
6
- ⠙
1
+
2
+ > @memberjunction/ng-tasks@4.2.0 build
3
+ > ngc
4
+
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @memberjunction/ng-tasks
2
2
 
3
+ ## 4.2.0
4
+
5
+ ### Patch Changes
6
+
7
+ - @memberjunction/ai-engine-base@4.2.0
8
+ - @memberjunction/ai-core-plus@4.2.0
9
+ - @memberjunction/core@4.2.0
10
+ - @memberjunction/core-entities@4.2.0
11
+
12
+ ## 4.1.0
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies [77839a9]
17
+ - Updated dependencies [2ea241f]
18
+ - Updated dependencies [5af036f]
19
+ - @memberjunction/core@4.1.0
20
+ - @memberjunction/core-entities@4.1.0
21
+ - @memberjunction/ai-engine-base@4.1.0
22
+ - @memberjunction/ai-core-plus@4.1.0
23
+
3
24
  ## 4.0.0
4
25
 
5
26
  ### Major Changes
package/README.md CHANGED
@@ -1,233 +1,120 @@
1
1
  # @memberjunction/ng-tasks
2
2
 
3
- Angular components for task visualization and management with Gantt chart support.
4
-
5
- ## Features
6
-
7
- - 📋 **Simple List View** - Clean hierarchical task list with indentation for subtasks
8
- - 📊 **Gantt Chart View** - Timeline visualization using Frappe Gantt
9
- - 🔄 **View Toggle** - Easy switching between list and Gantt views
10
- - 🎨 **Clean Design** - Modern, minimal UI that matches MemberJunction aesthetics
11
- - 📦 **Standalone Components** - Can be used independently or together
12
- - 🔗 **Dependency Support** - Visualizes task dependencies and relationships
3
+ Angular components for task visualization and management with Gantt chart support. Provides a simple hierarchical list view and a Gantt timeline view with dependency arrows, both working with MemberJunction `TaskEntity` data.
13
4
 
14
5
  ## Installation
15
6
 
16
- This package is part of the MemberJunction monorepo. Install from the repository root:
17
-
18
7
  ```bash
19
- npm install
8
+ npm install @memberjunction/ng-tasks
20
9
  ```
21
10
 
22
- ## Components
23
-
24
- ### TaskComponent
25
-
26
- Main component that composes SimpleTaskViewer and GanttTaskViewer with view toggle.
27
-
28
- ```typescript
29
- import { TaskComponent } from '@memberjunction/ng-tasks';
30
-
31
- @Component({
32
- template: `
33
- <mj-task
34
- [tasks]="myTasks"
35
- [title]="'Project Tasks'"
36
- [description]="'Tasks for the current project'"
37
- [viewMode]="'simple'"
38
- (taskClicked)="onTaskClick($event)"
39
- (viewModeChanged)="onViewModeChange($event)">
40
- </mj-task>
41
- `
42
- })
43
- export class MyComponent {
44
- myTasks: TaskEntity[] = [...];
45
-
46
- onTaskClick(task: TaskEntity) {
47
- console.log('Task clicked:', task);
48
- }
49
-
50
- onViewModeChange(mode: TaskViewMode) {
51
- console.log('View mode changed to:', mode);
52
- }
53
- }
11
+ ## Overview
12
+
13
+ The tasks package provides two interchangeable visualization modes for task data: a clean hierarchical list and a Gantt chart timeline. A wrapper component provides a toggle to switch between views. Tasks support dependencies via `DependsOnTaskID`, displayed as indentation in list view and dependency arrows in Gantt view.
14
+
15
+ ```mermaid
16
+ flowchart TD
17
+ subgraph Container["TaskComponent"]
18
+ A["View Toggle"]
19
+ A -->|simple| B["SimpleTaskViewerComponent"]
20
+ A -->|gantt| C["GanttTaskViewerComponent"]
21
+ end
22
+ subgraph List["Simple View"]
23
+ D["Hierarchical list with indentation"]
24
+ E["Status icons and color coding"]
25
+ F["Expand/collapse subtasks"]
26
+ end
27
+ subgraph Gantt["Gantt View"]
28
+ G["Timeline bars"]
29
+ H["Dependency arrows"]
30
+ I["Progress indicators"]
31
+ end
32
+
33
+ B --> List
34
+ C --> Gantt
35
+
36
+ style Container fill:#2d6a9f,stroke:#1a4971,color:#fff
37
+ style List fill:#2d8659,stroke:#1a5c3a,color:#fff
38
+ style Gantt fill:#7c5295,stroke:#563a6b,color:#fff
54
39
  ```
55
40
 
56
- **Inputs:**
57
- - `tasks: TaskEntity[]` - Array of tasks to display
58
- - `title?: string` - Optional header title
59
- - `description?: string` - Optional header description
60
- - `showHeader: boolean` - Whether to show the header (default: true)
61
- - `viewMode: TaskViewMode` - Initial view mode: 'simple' or 'gantt' (default: 'simple')
62
-
63
- **Outputs:**
64
- - `taskClicked: EventEmitter<TaskEntity>` - Emitted when a task is clicked
65
- - `viewModeChanged: EventEmitter<TaskViewMode>` - Emitted when view mode changes
41
+ ## Usage
66
42
 
67
- ### SimpleTaskViewerComponent
68
-
69
- Displays tasks in a clean, hierarchical list format.
43
+ ### Standalone Component Import
70
44
 
71
45
  ```typescript
72
- import { SimpleTaskViewerComponent } from '@memberjunction/ng-tasks';
73
-
74
- @Component({
75
- template: `
76
- <mj-simple-task-viewer
77
- [tasks]="myTasks"
78
- (taskClicked)="onTaskClick($event)">
79
- </mj-simple-task-viewer>
80
- `
81
- })
82
- export class MyComponent {
83
- myTasks: TaskEntity[] = [...];
84
- }
85
- ```
86
-
87
- **Features:**
88
- - Hierarchical display with indentation
89
- - Expand/collapse for tasks with subtasks
90
- - Status icons with color coding
91
- - Due dates and assignee information
92
- - Click to interact with tasks
93
-
94
- ### GanttTaskViewerComponent
95
-
96
- Displays tasks in a Gantt chart timeline using Frappe Gantt.
97
-
98
- ```typescript
99
- import { GanttTaskViewerComponent } from '@memberjunction/ng-tasks';
46
+ import { TaskComponent } from '@memberjunction/ng-tasks';
100
47
 
101
48
  @Component({
102
- template: `
103
- <mj-gantt-task-viewer
104
- [tasks]="myTasks"
105
- (taskClicked)="onTaskClick($event)">
106
- </mj-gantt-task-viewer>
107
- `
49
+ imports: [TaskComponent],
50
+ // ...
108
51
  })
109
- export class MyComponent {
110
- myTasks: TaskEntity[] = [...];
111
- }
52
+ export class YourComponent {}
112
53
  ```
113
54
 
114
- **Features:**
115
- - Timeline-based visualization
116
- - Task dependencies with arrows
117
- - Progress indicators
118
- - Interactive task bars
119
- - Hover tooltips with task details
120
- - Multiple view modes (Day, Week, Month)
121
-
122
- ## Task Data Structure
123
-
124
- Tasks must be `TaskEntity` objects from `@memberjunction/core-entities`. Key fields:
125
-
126
- ```typescript
127
- interface TaskEntity {
128
- ID: string;
129
- Title: string;
130
- Description?: string;
131
- Status: 'Pending' | 'In Progress' | 'Complete';
132
- StartDate?: Date;
133
- DueDate?: Date;
134
- DependsOnTaskID?: string; // For task dependencies
135
- AssignedTo?: string;
136
- // ... other MJ entity fields
137
- }
55
+ ### Basic Usage
56
+
57
+ ```html
58
+ <mj-task
59
+ [tasks]="projectTasks"
60
+ [title]="'Project Tasks'"
61
+ [description]="'Active tasks for Q1'"
62
+ [viewMode]="'simple'"
63
+ (taskClicked)="onTaskClick($event)"
64
+ (viewModeChanged)="onViewModeChange($event)">
65
+ </mj-task>
138
66
  ```
139
67
 
140
- ## Task Dependencies
68
+ ### Individual Sub-Components
141
69
 
142
- Tasks can have dependencies using the `DependsOnTaskID` field:
70
+ ```html
71
+ <!-- List view only -->
72
+ <mj-simple-task-viewer
73
+ [tasks]="tasks"
74
+ (taskClicked)="onTaskClick($event)">
75
+ </mj-simple-task-viewer>
143
76
 
144
- ```typescript
145
- const tasks = [
146
- {
147
- ID: 'task-1',
148
- Title: 'Design Database Schema',
149
- Status: 'Complete',
150
- StartDate: new Date('2025-01-01'),
151
- DueDate: new Date('2025-01-05')
152
- },
153
- {
154
- ID: 'task-2',
155
- Title: 'Implement Backend API',
156
- Status: 'In Progress',
157
- StartDate: new Date('2025-01-06'),
158
- DueDate: new Date('2025-01-15'),
159
- DependsOnTaskID: 'task-1' // Depends on task-1
160
- },
161
- {
162
- ID: 'task-3',
163
- Title: 'Build Frontend UI',
164
- Status: 'Pending',
165
- StartDate: new Date('2025-01-16'),
166
- DueDate: new Date('2025-01-25'),
167
- DependsOnTaskID: 'task-2' // Depends on task-2
168
- }
169
- ];
77
+ <!-- Gantt view only -->
78
+ <mj-gantt-task-viewer
79
+ [tasks]="tasks"
80
+ (taskClicked)="onTaskClick($event)">
81
+ </mj-gantt-task-viewer>
170
82
  ```
171
83
 
172
- In **Simple View**, dependent tasks are indented under their parent tasks.
173
- In **Gantt View**, dependency arrows connect the tasks.
84
+ ## Components
174
85
 
175
- ## Styling
86
+ | Component | Selector | Purpose |
87
+ |-----------|----------|---------|
88
+ | `TaskComponent` | `mj-task` | Composite wrapper with view toggle |
89
+ | `SimpleTaskViewerComponent` | `mj-simple-task-viewer` | Hierarchical list view |
90
+ | `GanttTaskViewerComponent` | `mj-gantt-task-viewer` | Gantt chart timeline |
176
91
 
177
- The components use a clean, modern design that matches MemberJunction's aesthetic:
92
+ ## TaskComponent API
178
93
 
179
- - **Colors:** Blue (#3B82F6) for primary actions, gray scale for text
180
- - **Typography:** System fonts with consistent sizing
181
- - **Spacing:** Comfortable padding and margins
182
- - **Icons:** Font Awesome icons throughout
94
+ ### Inputs
183
95
 
184
- You can customize styles by targeting the component classes or using Angular's view encapsulation.
96
+ | Property | Type | Default | Description |
97
+ |----------|------|---------|-------------|
98
+ | `tasks` | `TaskEntity[]` | `[]` | Array of task entities |
99
+ | `title` | `string` | `undefined` | Optional header title |
100
+ | `description` | `string` | `undefined` | Optional header description |
101
+ | `showHeader` | `boolean` | `true` | Show the header area |
102
+ | `viewMode` | `TaskViewMode` | `'simple'` | Initial view mode: `'simple'` or `'gantt'` |
185
103
 
186
- ## Integration with Conversations
104
+ ### Outputs
187
105
 
188
- The ng-tasks package is designed to work seamlessly with the conversations package:
106
+ | Event | Type | Description |
107
+ |-------|------|-------------|
108
+ | `taskClicked` | `EventEmitter<TaskEntity>` | Task was clicked |
109
+ | `viewModeChanged` | `EventEmitter<TaskViewMode>` | View mode toggled |
189
110
 
190
- ```typescript
191
- import { TaskComponent } from '@memberjunction/ng-tasks';
111
+ ## Exported Types
192
112
 
193
- @Component({
194
- selector: 'mj-tasks-full-view',
195
- imports: [TaskComponent],
196
- template: `
197
- <mj-task
198
- [tasks]="allTasks"
199
- [title]="'All Tasks'"
200
- [viewMode]="'simple'"
201
- (taskClicked)="navigateToTask($event)">
202
- </mj-task>
203
- `
204
- })
205
- export class TasksFullViewComponent {
206
- // ... component implementation
207
- }
208
- ```
209
-
210
- ## Browser Support
211
-
212
- - Chrome/Edge (latest)
213
- - Firefox (latest)
214
- - Safari (latest)
113
+ - `TaskViewMode` -- `'simple' | 'gantt'`
114
+ - `GanttTask` -- Interface for Gantt chart task data
215
115
 
216
116
  ## Dependencies
217
117
 
218
- - **Angular:** ^18.0.0
219
- - **Frappe Gantt:** ^0.6.1 (for Gantt view)
220
- - **@memberjunction/core:** ^2.104.0
221
- - **@memberjunction/core-entities:** ^2.104.0
222
-
223
- ## License
224
-
225
- MIT
226
-
227
- ## Contributing
228
-
229
- This package is part of the MemberJunction open-source project. Contributions are welcome!
230
-
231
- ## Support
232
-
233
- For issues or questions, please file an issue on the [MemberJunction GitHub repository](https://github.com/MemberJunction/MJ).
118
+ - [@memberjunction/core](../../MJCore/README.md) -- Core framework
119
+ - [@memberjunction/core-entities](../../MJCoreEntities/README.md) -- TaskEntity
120
+ - `frappe-gantt` -- Gantt chart rendering (peer dependency)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@memberjunction/ng-tasks",
3
- "version": "4.0.0",
3
+ "version": "4.2.0",
4
4
  "description": "MemberJunction: Angular components for task visualization and management with Gantt chart support",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -13,10 +13,10 @@
13
13
  "@angular/common": "21.1.3",
14
14
  "@angular/core": "21.1.3",
15
15
  "@angular/platform-browser": "21.1.3",
16
- "@memberjunction/core": "4.0.0",
17
- "@memberjunction/core-entities": "4.0.0",
18
- "@memberjunction/ai-core-plus": "4.0.0",
19
- "@memberjunction/ai-engine-base": "4.0.0",
16
+ "@memberjunction/core": "4.2.0",
17
+ "@memberjunction/core-entities": "4.2.0",
18
+ "@memberjunction/ai-core-plus": "4.2.0",
19
+ "@memberjunction/ai-engine-base": "4.2.0",
20
20
  "dhtmlx-gantt": "^9.1.1",
21
21
  "rxjs": "^7.8.2"
22
22
  },