@memberjunction/ng-tasks 2.105.0

package/src/lib/components/task.component.ts

@@ -0,0 +1,175 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TaskEntity, TaskDependencyEntity } from '@memberjunction/core-entities';
+import { TaskViewMode } from '../models/task-view.models';
+import { SimpleTaskViewerComponent } from './simple-task-viewer.component';
+import { GanttTaskViewerComponent } from './gantt-task-viewer.component';
+
+/**
+ * Main task component that composes SimpleTaskViewer and GanttTaskViewer
+ * Allows switching between list and Gantt chart views
+ */
+@Component({
+  selector: 'mj-task',
+  standalone: true,
+  imports: [CommonModule, SimpleTaskViewerComponent, GanttTaskViewerComponent],
+  template: `
+    <div class="task-component">
+      <!-- Header with View Toggle -->
+      <div class="task-header" *ngIf="showHeader">
+        <div class="header-left">
+          <h2 class="task-title" *ngIf="title">{{ title }}</h2>
+          <p class="task-description" *ngIf="description">{{ description }}</p>
+        </div>
+
+        <div class="view-toggle" *ngIf="showViewToggle">
+          <button
+            class="toggle-btn"
+            [class.active]="viewMode === 'gantt'"
+            (click)="setViewMode('gantt')"
+            title="Gantt Chart">
+            <i class="fas fa-chart-gantt"></i>
+            <span>Gantt</span>
+          </button>
+          <button
+            class="toggle-btn"
+            [class.active]="viewMode === 'simple'"
+            (click)="setViewMode('simple')"
+            title="List View">
+            <i class="fas fa-list"></i>
+            <span>List</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- Task Viewer (Simple or Gantt) -->
+      <div class="task-viewer">
+        <mj-simple-task-viewer
+          *ngIf="viewMode === 'simple'"
+          [tasks]="tasks"
+          [agentRunMap]="agentRunMap"
+          (taskClicked)="onTaskClicked($event)"
+          (openEntityRecord)="onOpenEntityRecord($event)">
+        </mj-simple-task-viewer>
+
+        <mj-gantt-task-viewer
+          *ngIf="viewMode === 'gantt'"
+          [tasks]="ganttTasks || tasks"
+          [taskDependencies]="taskDependencies || []"
+          [agentRunMap]="agentRunMap"
+          (taskClicked)="onTaskClicked($event)"
+          (openEntityRecord)="onOpenEntityRecord($event)">
+        </mj-gantt-task-viewer>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .task-component {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      background: #FAFAFA;
+    }
+
+    .task-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: 20px;
+      padding: 20px 24px;
+      background: white;
+      border-bottom: 1px solid #E5E7EB;
+    }
+
+    .header-left {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .task-title {
+      margin: 0 0 8px 0;
+      font-size: 20px;
+      font-weight: 700;
+      color: #111827;
+    }
+
+    .task-description {
+      margin: 0;
+      font-size: 14px;
+      color: #6B7280;
+      line-height: 1.5;
+    }
+
+    .view-toggle {
+      display: flex;
+      gap: 8px;
+      background: #F3F4F6;
+      padding: 4px;
+      border-radius: 8px;
+    }
+
+    .toggle-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 16px;
+      border: none;
+      background: transparent;
+      color: #6B7280;
+      font-size: 13px;
+      font-weight: 600;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+
+    .toggle-btn:hover {
+      color: #111827;
+      background: rgba(255, 255, 255, 0.5);
+    }
+
+    .toggle-btn.active {
+      background: white;
+      color: #3B82F6;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    }
+
+    .toggle-btn i {
+      font-size: 14px;
+    }
+
+    .task-viewer {
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
+    }
+  `]
+})
+export class TaskComponent {
+  @Input() tasks: TaskEntity[] = [];
+  @Input() ganttTasks?: TaskEntity[]; // Optional separate task list for Gantt (includes parent)
+  @Input() taskDependencies?: TaskDependencyEntity[]; // Task dependencies for Gantt links
+  @Input() agentRunMap?: Map<string, string>; // Maps TaskID -> AgentRunID
+  @Input() title?: string;
+  @Input() description?: string;
+  @Input() showHeader: boolean = true;
+  @Input() showViewToggle: boolean = true; // Show Gantt/List toggle
+  @Input() viewMode: TaskViewMode = 'simple';
+
+  @Output() viewModeChanged = new EventEmitter<TaskViewMode>();
+  @Output() taskClicked = new EventEmitter<TaskEntity>();
+  @Output() openEntityRecord = new EventEmitter<{ entityName: string; recordId: string }>();
+
+  public setViewMode(mode: TaskViewMode): void {
+    this.viewMode = mode;
+    this.viewModeChanged.emit(mode);
+  }
+
+  public onTaskClicked(task: TaskEntity): void {
+    this.taskClicked.emit(task);
+  }
+
+  public onOpenEntityRecord(event: { entityName: string; recordId: string }): void {
+    this.openEntityRecord.emit(event);
+  }
+}

package/src/lib/models/task-view.models.ts

@@ -0,0 +1,19 @@
+import { TaskEntity } from '@memberjunction/core-entities';
+
+/**
+ * View mode for task display
+ */
+export type TaskViewMode = 'simple' | 'gantt';
+
+/**
+ * Gantt bar data for Frappe Gantt
+ */
+export interface GanttTask {
+  id: string;
+  name: string;
+  start: string;
+  end: string;
+  progress: number;
+  dependencies?: string;
+  custom_class?: string;
+}

package/src/lib/ng-tasks.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { TaskComponent } from './components/task.component';
+import { SimpleTaskViewerComponent } from './components/simple-task-viewer.component';
+import { GanttTaskViewerComponent } from './components/gantt-task-viewer.component';
+
+/**
+ * MemberJunction Tasks Module
+ * Provides task visualization components with Gantt chart support
+ */
+@NgModule({
+  imports: [
+    TaskComponent,
+    SimpleTaskViewerComponent,
+    GanttTaskViewerComponent
+  ],
+  exports: [
+    TaskComponent,
+    SimpleTaskViewerComponent,
+    GanttTaskViewerComponent
+  ]
+})
+export class NgTasksModule { }

package/src/lib/types/frappe-gantt.d.ts

@@ -0,0 +1,32 @@
+declare module 'frappe-gantt/dist/frappe-gantt.js' {
+  export interface GanttOptions {
+    view_mode?: 'Quarter Day' | 'Half Day' | 'Day' | 'Week' | 'Month' | 'Year';
+    bar_height?: number;
+    bar_corner_radius?: number;
+    arrow_curve?: number;
+    padding?: number;
+    view_modes?: string[];
+    date_format?: string;
+    custom_popup_html?: (task: any) => string;
+    on_click?: (task: any) => void;
+    on_date_change?: (task: any, start: Date, end: Date) => void;
+    on_progress_change?: (task: any, progress: number) => void;
+    on_view_change?: (mode: string) => void;
+  }
+
+  export interface GanttTask {
+    id: string;
+    name: string;
+    start: string;
+    end: string;
+    progress: number;
+    dependencies?: string;
+    custom_class?: string;
+  }
+
+  export default class Gantt {
+    constructor(element: string | HTMLElement | SVGElement, tasks: GanttTask[], options?: GanttOptions);
+    change_view_mode(mode: string): void;
+    refresh(tasks: GanttTask[]): void;
+  }
+}

package/src/public-api.ts

@@ -0,0 +1,14 @@
+/**
+ * Public API Surface of @memberjunction/ng-tasks
+ */
+
+// Module
+export * from './lib/ng-tasks.module';
+
+// Components
+export * from './lib/components/task.component';
+export * from './lib/components/simple-task-viewer.component';
+export * from './lib/components/gantt-task-viewer.component';
+
+// Models
+export * from './lib/models/task-view.models';

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+      "target": "es2022",
+      "module": "es2022",
+      "moduleResolution": "node",
+      "declaration": true,
+      "declarationMap": true,
+      "sourceMap": true,
+      "experimentalDecorators": true,
+      "outDir": "./dist",
+      "strict": true,
+      "lib": ["es2022", "dom"]
+    },
+    "angularCompilerOptions": {
+      "skipTemplateCodegen": true,
+      "strictMetadataEmit": true,
+      "enableResourceInlining": true,
+      "strictTemplates": true
+    },
+    "include": [
+      "src/**/*.ts"
+    ]
+  }
+