fix(exports): bind PrimeNG columns metadata for table CSV exports

Author: Diogo-Ferraz

src/app/features/activity/components/activity-log/activity-log.component.html

@@ -33,6 +33,8 @@ <h2>Activity Log</h2>
     <p-table
       #dt
       [value]="filteredRows"
+      [columns]="exportColumns"
+      [exportFilename]="exportFileName"
       [loading]="isLoading"
       [rowHover]="true"
       [paginator]="true"

src/app/features/activity/components/activity-log/activity-log.component.ts

@@ -57,6 +57,14 @@ export class ActivityLogComponent implements OnInit, OnDestroy {
   ];
 
   readonly feedLimit = 500;
+  readonly exportColumns = [
+    { field: 'actorDisplayName', header: 'Actor' },
+    { field: 'entityType', header: 'Entity' },
+    { field: 'typeLabel', header: 'Event Type' },
+    { field: 'projectName', header: 'Project' },
+    { field: 'taskTitle', header: 'Task' },
+    { field: 'occurredAtDate', header: 'Occurred At' }
+  ];
 
   rows: ActivityLogRow[] = [];
   filteredRows: ActivityLogRow[] = [];
@@ -93,6 +101,11 @@ export class ActivityLogComponent implements OnInit, OnDestroy {
     return this.preferencesService.preferences().defaultTablePageSize;
   }
 
+  get exportFileName(): string {
+    const date = new Date().toISOString().slice(0, 10);
+    return `activity-log-${date}`;
+  }
+
   ngOnInit(): void {
     this.loadActivityLog();
     this.subscribeToLiveActivity();

src/app/features/admin/components/admin-dashboard/admin-dashboard.component.html

@@ -39,6 +39,8 @@ <h2>Admin Dashboard</h2>
     <p-table
       #dt
       [value]="users"
+      [columns]="exportColumns"
+      [exportFilename]="exportFileName"
       [lazy]="!isPreviewMode"
       [loading]="isLoading"
       [paginator]="true"
@@ -57,11 +59,11 @@ <h2>Admin Dashboard</h2>
           <button
             pButton
             type="button"
-            [icon]="isExporting ? 'pi pi-spin pi-spinner' : 'pi pi-upload'"
+            icon="pi pi-upload"
             label="Export CSV"
             class="p-button-text"
-            (click)="exportUsersAsExcelCompatibleCsv()"
-            [disabled]="isLoading || isExporting">
+            (click)="exportCsv(dt)"
+            [disabled]="isLoading || users.length === 0">
           </button>
 
           <span class="table-search">

src/app/features/admin/components/admin-dashboard/admin-dashboard.component.ts

@@ -9,7 +9,7 @@ import { TagModule } from 'primeng/tag';
 import { ButtonModule } from 'primeng/button';
 import { CardModule } from 'primeng/card';
 import { TooltipModule } from 'primeng/tooltip';
-import { finalize, firstValueFrom } from 'rxjs';
+import { finalize } from 'rxjs';
 import { AdminUsersApiClient } from '../../../../core/api/clients/admin-users-api.client';
 import { AppRole } from '../../../../core/auth/models/app-role.model';
 import { AuthService } from '../../../../core/auth/services/auth.service';
@@ -48,7 +48,6 @@ export class AdminDashboardComponent implements OnInit {
 
   users: UserSummaryDto[] = [];
   isLoading = false;
-  isExporting = false;
   isPreviewMode = false;
   previewDetail: string | null = null;
   totalRecords = 0;
@@ -73,11 +72,13 @@ export class AdminDashboardComponent implements OnInit {
     { label: AppRole.ProjectManager, value: AppRole.ProjectManager },
     { label: AppRole.User, value: AppRole.User }
   ];
-
-  get exportFileName(): string {
-    const date = new Date().toISOString().slice(0, 10);
-    return `admin-users-${date}`;
-  }
+  readonly exportColumns = [
+    { field: 'displayName', header: 'Display Name' },
+    { field: 'userName', header: 'Username' },
+    { field: 'email', header: 'Email' },
+    { field: 'roles', header: 'Roles' },
+    { field: 'isActive', header: 'Is Active' }
+  ];
 
   get activeUsersCount(): number {
     return this.users.filter((user) => user.isActive).length;
@@ -107,6 +108,11 @@ export class AdminDashboardComponent implements OnInit {
     return this.authService.currentUserId();
   }
 
+  get exportFileName(): string {
+    const date = new Date().toISOString().slice(0, 10);
+    return `admin-users-${date}`;
+  }
+
   ngOnInit(): void {
     this.rows = this.preferencesService.preferences().defaultTablePageSize;
     this.loadUsers();
@@ -152,37 +158,8 @@ export class AdminDashboardComponent implements OnInit {
     this.loadUsers();
   }
 
-  async exportUsersAsExcelCompatibleCsv(): Promise<void> {
-    if (this.isExporting) {
-      return;
-    }
-
-    this.isExporting = true;
-    try {
-      const header = ['Display Name', 'Username', 'Email', 'Is Active', 'Roles'];
-      const usersForExport = await this.loadAllUsersForExport();
-      const lines = usersForExport.map((user) => [
-        user.displayName ?? '',
-        user.userName ?? '',
-        user.email ?? '',
-        user.isActive ? 'Yes' : 'No',
-        user.roles.join(' | ')
-      ]);
-
-      const csv = [header, ...lines]
-        .map((line) => line.map((value) => this.escapeCsv(value)).join(','))
-        .join('\n');
-
-      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement('a');
-      link.href = url;
-      link.download = `${this.exportFileName}.csv`;
-      link.click();
-      URL.revokeObjectURL(url);
-    } finally {
-      this.isExporting = false;
-    }
+  exportCsv(table: Table): void {
+    table.exportCSV();
   }
 
   isStatusUpdating(userId: string): boolean {
@@ -278,41 +255,6 @@ export class AdminDashboardComponent implements OnInit {
       });
   }
 
-  private escapeCsv(value: string): string {
-    const escaped = value.replace(/"/g, '""');
-    return `"${escaped}"`;
-  }
-
-  private async loadAllUsersForExport(): Promise<UserSummaryDto[]> {
-    if (this.isPreviewMode) {
-      return [...this.users];
-    }
-
-    const pageSize = 100;
-    let page = 1;
-    let total = 0;
-    const allUsers: UserSummaryDto[] = [];
-    const search = this.getMergedSearchTerm();
-
-    do {
-      const response = await firstValueFrom(
-        this.adminUsersApiClient.getUsers({
-          page,
-          pageSize,
-          search: search.length > 0 ? search : undefined,
-          isActive: this.selectedStatus ?? undefined,
-          role: this.selectedRole ?? undefined
-        })
-      );
-
-      total = response.total;
-      allUsers.push(...response.items);
-      page += 1;
-    } while (allUsers.length < total);
-
-    return allUsers;
-  }
-
   private shouldUsePreviewMode(): boolean {
     return this.authService.authSession()?.isDebugSession === true && this.authService.canStartDebugSession();
   }

src/app/features/projects/components/project-list/project-list.component.html

@@ -67,6 +67,8 @@ <h2>All Projects</h2>
     <p-table
       #dt
       [value]="projects"
+      [columns]="exportColumns"
+      [exportFilename]="exportFileName"
       [rowHover]="true"
       [loading]="loading"
       [tableStyle]="{ 'min-width': '72rem' }"
@@ -129,7 +131,7 @@ <h2>All Projects</h2>
           <th style="min-width: 8rem;">
             <div class="column-head">
               Tasks
-              <p-columnFilter type="numeric" field="taskItems.length" display="menu"></p-columnFilter>
+              <p-columnFilter type="numeric" field="taskCount" display="menu"></p-columnFilter>
             </div>
           </th>
           <th style="min-width: 10rem;">Actions</th>
@@ -166,7 +168,7 @@ <h2>All Projects</h2>
           </td>
 
           <td>
-            <p-chip [label]="getProjectTaskCount(project).toString()"></p-chip>
+            <p-chip [label]="project.taskCount.toString()"></p-chip>
           </td>
 
           <td>

src/app/features/projects/components/project-list/project-list.component.ts

@@ -12,6 +12,10 @@ import { AuthService } from '../../../../core/auth/services/auth.service';
 import { APP_ENVIRONMENT } from '../../../../core/config/app-environment.token';
 import { AppPreferencesService } from '../../../../core/preferences/app-preferences.service';
 
+interface ProjectListRow extends ProjectDto {
+  taskCount: number;
+}
+
 @Component({
   selector: 'app-project-list',
   standalone: true,
@@ -29,15 +33,23 @@ export class ProjectListComponent implements OnInit, OnDestroy {
   private readonly preferencesService = inject(AppPreferencesService);
   private readonly destroy$ = new Subject<void>();
 
-  projects: ProjectDto[] = [];
-  selectedProjects: ProjectDto[] = [];
+  projects: ProjectListRow[] = [];
+  selectedProjects: ProjectListRow[] = [];
   loading = true;
   searchValue: string | undefined;
   isPreviewMode = false;
   previewDetail: string | null = null;
   errors: Message[] = [];
   pendingProjectDeletionIds = new Set<string>();
-  private readonly previewTaskCounts: Record<string, number> = {};
+  readonly exportColumns = [
+    { field: 'name', header: 'Project' },
+    { field: 'description', header: 'Description' },
+    { field: 'createdByUserName', header: 'Created By' },
+    { field: 'createdAt', header: 'Created' },
+    { field: 'lastModifiedAt', header: 'Last Updated' },
+    { field: 'lastModifiedByUserName', header: 'Last Updated By' },
+    { field: 'taskCount', header: 'Tasks' }
+  ];
 
   ngOnInit(): void {
     this.loadProjects();
@@ -70,7 +82,12 @@ export class ProjectListComponent implements OnInit, OnDestroy {
     return this.authService.hasAnyRole([...MANAGEMENT_ROLES]);
   }
 
-  trackByProjectId(_: number, project: ProjectDto): string {
+  get exportFileName(): string {
+    const date = new Date().toISOString().slice(0, 10);
+    return `all-projects-${date}`;
+  }
+
+  trackByProjectId(_: number, project: ProjectListRow): string {
     return project.id;
   }
 
@@ -103,7 +120,7 @@ export class ProjectListComponent implements OnInit, OnDestroy {
     void this.router.navigate(['/projects/kanban'], { queryParams: { projectId } });
   }
 
-  canDeleteProject(project: ProjectDto): boolean {
+  canDeleteProject(project: ProjectListRow): boolean {
     if (this.authService.hasRole(AppRole.Administrator)) {
       return true;
     }
@@ -115,7 +132,7 @@ export class ProjectListComponent implements OnInit, OnDestroy {
     return this.pendingProjectDeletionIds.has(projectId);
   }
 
-  deleteProject(project: ProjectDto): void {
+  deleteProject(project: ProjectListRow): void {
     if (!this.canDeleteProject(project) || this.isProjectDeletePending(project.id)) {
       return;
     }
@@ -177,7 +194,7 @@ export class ProjectListComponent implements OnInit, OnDestroy {
       .pipe(takeUntil(this.destroy$))
       .subscribe({
         next: (projects) => {
-          this.projects = projects;
+          this.projects = this.toProjectRows(projects);
           this.selectedProjects = [];
           this.loading = false;
         },
@@ -193,30 +210,26 @@ export class ProjectListComponent implements OnInit, OnDestroy {
       });
   }
 
-  getProjectTaskCount(project: ProjectDto): number {
-    if (project.taskItems?.length) {
-      return project.taskItems.length;
-    }
-
-    return this.previewTaskCounts[project.id] ?? 0;
-  }
-
   private shouldUsePreviewMode(): boolean {
     return this.authService.authSession()?.isDebugSession === true && this.authService.canStartDebugSession();
   }
 
   private loadPreviewProjects(detail: string): void {
     this.isPreviewMode = true;
     this.previewDetail = detail;
-    this.projects = this.buildPreviewProjects();
-    this.previewTaskCounts['preview-platform-refresh'] = 3;
-    this.previewTaskCounts['preview-mobile-portal'] = 1;
-    this.previewTaskCounts['preview-security-hardening'] = 2;
+    this.projects = this.toProjectRows(this.buildPreviewProjects());
     this.selectedProjects = [];
     this.errors = [];
     this.loading = false;
   }
 
+  private toProjectRows(projects: ProjectDto[]): ProjectListRow[] {
+    return projects.map((project) => ({
+      ...project,
+      taskCount: project.taskItems?.length ?? 0
+    }));
+  }
+
   private buildPreviewProjects(): ProjectDto[] {
     const now = Date.now();
     return [

src/app/features/task-item/components/task-item-list/task-item-list.component.html

@@ -61,6 +61,8 @@ <h2>All Tasks</h2>
     <p-table
       #dt
       [value]="tasks"
+      [columns]="exportColumns"
+      [exportFilename]="exportFileName"
       dataKey="id"
       [loading]="isLoadingTasks"
       [rowHover]="true"

src/app/features/task-item/components/task-item-list/task-item-list.component.ts

@@ -60,6 +60,15 @@ export class TaskItemListComponent implements OnInit, OnDestroy {
 
   searchValue = '';
   pendingTaskIds = new Set<string>();
+  readonly exportColumns = [
+    { field: 'title', header: 'Task' },
+    { field: 'description', header: 'Description' },
+    { field: 'status', header: 'Status' },
+    { field: 'dueDate', header: 'Due Date' },
+    { field: 'assignedUserName', header: 'Assignee' },
+    { field: 'lastModifiedAt', header: 'Last Updated' },
+    { field: 'lastModifiedByUserName', header: 'Last Updated By' }
+  ];
 
   ngOnInit(): void {
     this.loadProjects();
@@ -132,6 +141,11 @@ export class TaskItemListComponent implements OnInit, OnDestroy {
     return this.preferencesService.preferences().defaultTablePageSize;
   }
 
+  get exportFileName(): string {
+    const date = new Date().toISOString().slice(0, 10);
+    return `all-tasks-${date}`;
+  }
+
   onProjectChange(): void {
     if (!this.selectedProjectId) {
       this.tasks = [];