@memberjunction/ng-tasks 2.105.0

package/src/lib/components/simple-task-viewer.component.ts

@@ -0,0 +1,356 @@
+import { Component, Input, Output, EventEmitter, OnChanges, HostListener } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TaskEntity } from '@memberjunction/core-entities';
+import { TaskDetailPanelComponent } from './task-detail-panel.component';
+
+/**
+ * Simple list view for tasks
+ */
+@Component({
+  selector: 'mj-simple-task-viewer',
+  standalone: true,
+  imports: [CommonModule, TaskDetailPanelComponent],
+  template: `
+    <div class="simple-task-viewer">
+      <div class="list-layout">
+        <div class="task-list" [class.with-detail]="selectedTask">
+        <div *ngFor="let task of tasks"
+             class="task-item"
+             [class.completed]="task.Status === 'Complete'"
+             [class.selected]="selectedTask?.ID === task.ID"
+             (click)="onTaskClick(task)">
+
+          <!-- Status Icon -->
+          <div class="status-icon" [class.complete]="task.Status === 'Complete'">
+            <i class="fas" [ngClass]="getStatusIcon(task.Status)"></i>
+          </div>
+
+          <!-- Task Content -->
+          <div class="task-content">
+            <div class="task-header">
+              <div class="task-title-row">
+                <span class="task-title" [class.completed-text]="task.Status === 'Complete'">
+                  {{ task.Name }}
+                  <i *ngIf="task.Status === 'Complete'" class="fas fa-check completed-check"></i>
+                </span>
+                <!-- Compact progress indicator for all tasks -->
+                <div *ngIf="task.PercentComplete != null" class="task-progress-compact">
+                  <div class="progress-bar-compact">
+                    <div class="progress-fill-compact"
+                         [style.width.%]="task.PercentComplete"
+                         [class.complete]="task.Status === 'Complete'"></div>
+                  </div>
+                  <span class="progress-text-compact">{{ task.PercentComplete }}%</span>
+                </div>
+              </div>
+              <span class="task-meta">
+                <span *ngIf="task.DueAt" class="due-date">
+                  <i class="far fa-calendar"></i>
+                  {{ formatDate(task.DueAt) }}
+                </span>
+                <span *ngIf="task.User" class="assigned-to">
+                  <i class="far fa-user"></i>
+                  {{ task.User }}
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div *ngIf="!tasks || tasks.length === 0" class="no-tasks">
+          <i class="fas fa-tasks"></i>
+          <p>No tasks to display</p>
+        </div>
+        </div>
+
+        <div *ngIf="selectedTask" class="list-resizer"
+             (mousedown)="startResize($event)"></div>
+
+        <div *ngIf="selectedTask" class="task-detail-panel" [style.width.px]="detailPanelWidth">
+          <mj-task-detail-panel
+            [task]="selectedTask"
+            [agentRunId]="getAgentRunId(selectedTask)"
+            (closePanel)="closeDetailPanel()"
+            (openEntityRecord)="onOpenEntityRecord($event)">
+          </mj-task-detail-panel>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .simple-task-viewer {
+      height: 100%;
+      background: #FAFAFA;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .list-layout {
+      display: flex;
+      height: 100%;
+      position: relative;
+    }
+
+    .task-list {
+      flex: 1;
+      min-width: 400px;
+      padding: 16px;
+      overflow-y: auto;
+    }
+
+    .task-list.with-detail {
+      border-right: 1px solid #E5E7EB;
+    }
+
+    .list-resizer {
+      width: 4px;
+      background: #E5E7EB;
+      cursor: col-resize;
+      flex-shrink: 0;
+      transition: background 0.2s;
+    }
+
+    .list-resizer:hover {
+      background: #3B82F6;
+    }
+
+    .task-detail-panel {
+      min-width: 300px;
+      max-width: 600px;
+      height: 100%;
+      flex-shrink: 0;
+    }
+
+    .task-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      padding: 16px;
+      background: white;
+      border: 1px solid #E5E7EB;
+      border-radius: 8px;
+      margin-bottom: 8px;
+      transition: all 0.2s;
+      cursor: pointer;
+    }
+
+    .task-item:hover {
+      border-color: #3B82F6;
+      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
+      transform: translateY(-1px);
+    }
+
+    .task-item.selected {
+      border-color: #3B82F6;
+      background: #EFF6FF;
+      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
+    }
+
+    .task-item.completed {
+      background: #F9FAFB;
+      border-color: #D1D5DB;
+    }
+
+    .status-icon {
+      width: 32px;
+      height: 32px;
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #FEF3C7;
+      color: #F59E0B;
+      flex-shrink: 0;
+    }
+
+    .status-icon.complete {
+      background: #D1FAE5;
+      color: #10B981;
+    }
+
+    .task-content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .task-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: 12px;
+      margin-bottom: 6px;
+    }
+
+    .task-title-row {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .task-title {
+      font-weight: 600;
+      color: #111827;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .task-title.completed-text {
+      color: #6B7280;
+      text-decoration: line-through;
+      text-decoration-thickness: 1.5px;
+    }
+
+    .completed-check {
+      color: #10B981;
+      font-size: 12px;
+    }
+
+    .task-meta {
+      display: flex;
+      gap: 12px;
+      font-size: 12px;
+      color: #6B7280;
+      white-space: nowrap;
+    }
+
+    .task-meta i {
+      margin-right: 4px;
+    }
+
+    .task-description {
+      font-size: 13px;
+      color: #6B7280;
+      margin-bottom: 8px;
+      line-height: 1.5;
+    }
+
+    .task-progress-compact {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex-shrink: 0;
+    }
+
+    .progress-bar-compact {
+      width: 80px;
+      height: 4px;
+      background: #E5E7EB;
+      border-radius: 2px;
+      overflow: hidden;
+    }
+
+    .progress-fill-compact {
+      height: 100%;
+      background: #3B82F6;
+      transition: width 0.3s ease;
+    }
+
+    .progress-fill-compact.complete {
+      background: #10B981;
+    }
+
+    .progress-text-compact {
+      font-size: 10px;
+      font-weight: 600;
+      color: #6B7280;
+      min-width: 30px;
+      text-align: right;
+    }
+
+    .no-tasks {
+      text-align: center;
+      padding: 60px 20px;
+      color: #9CA3AF;
+    }
+
+    .no-tasks i {
+      font-size: 48px;
+      opacity: 0.3;
+      margin-bottom: 12px;
+    }
+
+    .no-tasks p {
+      margin: 0;
+      font-size: 14px;
+    }
+  `]
+})
+export class SimpleTaskViewerComponent implements OnChanges {
+  @Input() tasks: TaskEntity[] = [];
+  @Input() agentRunMap?: Map<string, string>; // Maps TaskID -> AgentRunID
+  @Output() taskClicked = new EventEmitter<TaskEntity>();
+  @Output() openEntityRecord = new EventEmitter<{ entityName: string; recordId: string }>();
+
+  public selectedTask: TaskEntity | null = null;
+  public detailPanelWidth: number = 400;
+
+  private isResizing = false;
+  private resizeStartX = 0;
+  private resizeStartWidth = 0;
+
+  ngOnChanges() {
+    // Tasks are already loaded
+  }
+
+  public onTaskClick(task: TaskEntity): void {
+    this.selectedTask = task;
+    this.taskClicked.emit(task);
+  }
+
+  public getAgentRunId(task: TaskEntity): string | null {
+    return this.agentRunMap?.get(task.ID) || null;
+  }
+
+  public closeDetailPanel(): void {
+    this.selectedTask = null;
+  }
+
+  public onOpenEntityRecord(event: { entityName: string; recordId: string }): void {
+    this.openEntityRecord.emit(event);
+  }
+
+  public startResize(event: MouseEvent): void {
+    this.isResizing = true;
+    this.resizeStartX = event.clientX;
+    this.resizeStartWidth = this.detailPanelWidth;
+    event.preventDefault();
+  }
+
+  @HostListener('document:mousemove', ['$event'])
+  handleResize(event: MouseEvent): void {
+    if (!this.isResizing) return;
+
+    const delta = this.resizeStartX - event.clientX;
+    const newWidth = this.resizeStartWidth + delta;
+
+    // Constrain width between min and max
+    this.detailPanelWidth = Math.max(300, Math.min(600, newWidth));
+  }
+
+  @HostListener('document:mouseup')
+  stopResize(): void {
+    this.isResizing = false;
+  }
+
+  public getStatusIcon(status: string): string {
+    switch (status) {
+      case 'Complete': return 'fa-check-circle';
+      case 'In Progress': return 'fa-spinner';
+      case 'Pending': return 'fa-clock';
+      case 'Blocked': return 'fa-ban';
+      case 'Failed': return 'fa-times-circle';
+      default: return 'fa-circle';
+    }
+  }
+
+  public formatDate(date: Date | null): string {
+    if (!date) return '';
+    const d = new Date(date);
+    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+  }
+}

package/src/lib/components/task-detail-panel.component.ts

@@ -0,0 +1,304 @@
+import { Component, Input, Output, EventEmitter, OnInit, OnChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TaskEntity, AIAgentEntityExtended } from '@memberjunction/core-entities';
+import { AIEngineBase } from '@memberjunction/ai-engine-base';
+
+/**
+ * Task detail panel showing task information, agent details, and agent run
+ * Reusable across list and Gantt views
+ */
+@Component({
+  selector: 'mj-task-detail-panel',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="task-detail-panel">
+      <div class="detail-header">
+        <h3>{{ task.Name }}</h3>
+        <button class="close-detail-btn" (click)="closePanel.emit()">
+          <i class="fas fa-times"></i>
+        </button>
+      </div>
+
+      <div class="detail-content">
+        <div class="detail-field" *ngIf="task.Description">
+          <label>Description</label>
+          <p>{{ task.Description }}</p>
+        </div>
+
+        <div class="detail-field">
+          <label>Status</label>
+          <p>{{ task.Status }}</p>
+        </div>
+
+        <div class="detail-field" *ngIf="task.PercentComplete != null">
+          <label>Progress</label>
+          <div class="detail-progress">
+            <div class="progress-bar-detail">
+              <div class="progress-fill-detail" [style.width.%]="task.PercentComplete"></div>
+            </div>
+            <span>{{ task.PercentComplete }}%</span>
+          </div>
+        </div>
+
+        <div class="detail-field" *ngIf="task.StartedAt">
+          <label>Started</label>
+          <p>{{ formatDateTime(task.StartedAt) }}</p>
+        </div>
+
+        <div class="detail-field" *ngIf="task.DueAt">
+          <label>Due</label>
+          <p>{{ formatDateTime(task.DueAt) }}</p>
+        </div>
+
+        <div class="detail-field" *ngIf="task.CompletedAt">
+          <label>Completed</label>
+          <p>{{ formatDateTime(task.CompletedAt) }}</p>
+        </div>
+
+        <div class="detail-field" *ngIf="task.User">
+          <label>Assigned User</label>
+          <p>{{ task.User }}</p>
+        </div>
+
+        <!-- Agent Information -->
+        <div class="detail-field" *ngIf="agent">
+          <label>Agent</label>
+          <div class="agent-info" (click)="openAgent()">
+            <i [class]="'fas fa-' + ('robot')" class="agent-icon"></i>
+            <span class="agent-name">{{ agent.Name }}</span>
+            <i class="fas fa-external-link-alt link-icon"></i>
+          </div>
+        </div>
+
+        <!-- Agent Run Information -->
+        <div class="detail-field" *ngIf="agentRunId">
+          <label>Agent Run</label>
+          <div class="agent-run-link" (click)="openAgentRun()">
+            <span>View Run Details</span>
+            <i class="fas fa-external-link-alt link-icon"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .task-detail-panel {
+      width: 100%;
+      height: calc(100% - 45px);
+      background: white;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .detail-header {
+      padding: 20px;
+      border-bottom: 1px solid #E5E7EB;
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      background: #F9FAFB;
+      flex-shrink: 0;
+    }
+
+    .detail-header h3 {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: #111827;
+      flex: 1;
+      padding-right: 12px;
+    }
+
+    .close-detail-btn {
+      background: none;
+      border: none;
+      color: #6B7280;
+      cursor: pointer;
+      padding: 4px;
+      width: 28px;
+      height: 28px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .close-detail-btn:hover {
+      background: #E5E7EB;
+      color: #111827;
+    }
+
+    .detail-content {
+      padding: 20px;
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+    }
+
+    .detail-field {
+      margin-bottom: 20px;
+    }
+
+    .detail-field:last-child {
+      margin-bottom: 0;
+    }
+
+    .detail-field label {
+      display: block;
+      font-size: 12px;
+      font-weight: 600;
+      color: #6B7280;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 6px;
+    }
+
+    .detail-field p {
+      margin: 0;
+      font-size: 14px;
+      color: #111827;
+      line-height: 1.5;
+    }
+
+    .detail-progress {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .progress-bar-detail {
+      flex: 1;
+      height: 8px;
+      background: #E5E7EB;
+      border-radius: 4px;
+      overflow: hidden;
+    }
+
+    .progress-fill-detail {
+      height: calc(100% - 69px);
+      background: #3B82F6;
+      transition: width 0.3s ease;
+    }
+
+    .detail-progress span {
+      font-size: 13px;
+      font-weight: 600;
+      color: #6B7280;
+      min-width: 40px;
+    }
+
+    .agent-info {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 12px;
+      background: #F3F4F6;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+
+    .agent-info:hover {
+      background: #E5E7EB;
+    }
+
+    .agent-icon {
+      font-size: 18px;
+      color: #3B82F6;
+    }
+
+    .agent-name {
+      flex: 1;
+      font-size: 14px;
+      font-weight: 500;
+      color: #111827;
+    }
+
+    .link-icon {
+      font-size: 12px;
+      color: #6B7280;
+    }
+
+    .agent-run-link {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 12px;
+      background: #F3F4F6;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+
+    .agent-run-link:hover {
+      background: #E5E7EB;
+    }
+
+    .agent-run-link span {
+      flex: 1;
+      font-size: 14px;
+      font-weight: 500;
+      color: #111827;
+    }
+  `]
+})
+export class TaskDetailPanelComponent implements OnInit, OnChanges {
+  @Input() task!: TaskEntity;
+  @Input() agentRunId: string | null = null;
+  @Output() closePanel = new EventEmitter<void>();
+  @Output() openEntityRecord = new EventEmitter<{ entityName: string; recordId: string }>();
+
+  public agent: AIAgentEntityExtended | null = null;
+
+  ngOnInit(): void {
+    this.loadAgentInfo();
+  }
+
+  ngOnChanges(): void {
+    this.loadAgentInfo();
+  }
+
+  private loadAgentInfo(): void {
+    if (!this.task?.AgentID) {
+      this.agent = null;
+      return;
+    }
+
+    // Get agent from AIEngineBase
+    const agents = AIEngineBase.Instance.Agents;
+    this.agent = agents.find((a: AIAgentEntityExtended) => a.ID === this.task.AgentID) || null;
+  }
+
+  public formatDateTime(date: Date | null): string {
+    if (!date) return '';
+    const d = new Date(date);
+    return d.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  }
+
+  public openAgent(): void {
+    if (this.task.AgentID) {
+      this.openEntityRecord.emit({
+        entityName: 'AI Agents',
+        recordId: this.task.AgentID
+      });
+    }
+  }
+
+  public openAgentRun(): void {
+    if (this.agentRunId) {
+      this.openEntityRecord.emit({
+        entityName: 'MJ: AI Agent Runs',
+        recordId: this.agentRunId
+      });
+    }
+  }
+}