refactor(ui-errors): standardize top-level dismissible p-messages across feature pages

Diogo-Ferraz · Diogo-Ferraz · commit da6fc0145fa8 · 2026-02-24T20:40:22.000+01:00
diff --git a/src/app/features/activity/components/activity-log/activity-log.component.html b/src/app/features/activity/components/activity-log/activity-log.component.html
@@ -1,4 +1,6 @@
 <div class="activity-log-page">
+  <p-messages *ngIf="errors.length > 0" [(value)]="errors" [enableService]="false" [closable]="true"></p-messages>
+
   <p-card class="activity-log-header-card">
     <div class="activity-log-header">
       <div class="activity-log-header__title">
@@ -28,11 +30,6 @@ <h2>Activity Log</h2>
   </div>
 
   <p-card class="activity-log-table-card">
-    <div class="activity-log-inline-error" *ngIf="errorMessage">
-      <i class="pi pi-exclamation-triangle"></i>
-      {{ errorMessage }}
-    </div>
-
     <p-table
       #dt
       [value]="filteredRows"
diff --git a/src/app/features/activity/components/activity-log/activity-log.component.ts b/src/app/features/activity/components/activity-log/activity-log.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnDestroy, OnInit, inject } from '@angular/core';
+import { Message } from 'primeng/api';
 import { Table } from 'primeng/table';
 import { Subject, takeUntil } from 'rxjs';
 import { ActivityApiClient } from '../../../../core/api/clients/activity-api.client';
@@ -63,7 +64,7 @@ export class ActivityLogComponent implements OnInit, OnDestroy {
   isPreviewMode = false;
   isLiveConnected = false;
   previewDetail: string | null = null;
-  errorMessage: string | null = null;
+  errors: Message[] = [];
 
   dateFrom: Date | null = null;
   dateTo: Date | null = null;
@@ -142,7 +143,7 @@ export class ActivityLogComponent implements OnInit, OnDestroy {
     this.isLoading = true;
     this.isPreviewMode = false;
     this.previewDetail = null;
-    this.errorMessage = null;
+    this.errors = [];
 
     if (this.shouldUsePreviewMode()) {
       this.loadPreviewData('Preview mode active. Showing local activity log.');
@@ -166,7 +167,7 @@ export class ActivityLogComponent implements OnInit, OnDestroy {
 
           this.rows = [];
           this.filteredRows = [];
-          this.errorMessage = 'Could not load activity log.';
+          this.errors = [{ severity: 'error', summary: 'Error', detail: 'Could not load activity log.' }];
           this.isLoading = false;
         }
       });
diff --git a/src/app/features/activity/components/my-activity/my-activity.component.html b/src/app/features/activity/components/my-activity/my-activity.component.html
@@ -1,4 +1,6 @@
 <div class="my-activity-page">
+  <p-messages *ngIf="errors.length > 0" [(value)]="errors" [enableService]="false" [closable]="true"></p-messages>
+
   <p-card class="my-activity-header-card">
     <div class="my-activity-header">
       <div class="my-activity-header__title">
@@ -36,11 +38,6 @@ <h3>Activity Timeline</h3>
         </div>
       </div>
 
-      <div class="activity-error" *ngIf="errorMessage">
-        <i class="pi pi-exclamation-triangle"></i>
-        {{ errorMessage }}
-      </div>
-
       <div class="activity-list" *ngIf="!isLoading; else loadingState">
         <div class="activity-row" *ngFor="let activity of filteredActivities; let isLast = last" [class.activity-row--last]="isLast">
           <div class="activity-row__icon" [ngClass]="getActivityIconChipClass(activity.rawEvent.type)">
diff --git a/src/app/features/activity/components/my-activity/my-activity.component.ts b/src/app/features/activity/components/my-activity/my-activity.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnDestroy, OnInit, inject } from '@angular/core';
+import { Message } from 'primeng/api';
 import { Router } from '@angular/router';
 import { Subject, takeUntil } from 'rxjs';
 import { ActivityApiClient } from '../../../../core/api/clients/activity-api.client';
@@ -56,7 +57,7 @@ export class MyActivityComponent implements OnInit, OnDestroy {
   isLoading = true;
   isPreviewMode = false;
   isLiveConnected = false;
-  errorMessage: string | null = null;
+  errors: Message[] = [];
   previewDetail: string | null = null;
 
   ngOnInit(): void {
@@ -165,7 +166,7 @@ export class MyActivityComponent implements OnInit, OnDestroy {
 
   private loadActivity(): void {
     this.isLoading = true;
-    this.errorMessage = null;
+    this.errors = [];
     this.previewDetail = null;
     this.isPreviewMode = false;
 
@@ -195,7 +196,7 @@ export class MyActivityComponent implements OnInit, OnDestroy {
             return;
           }
 
-          this.errorMessage = 'Could not load your activity feed.';
+          this.errors = [{ severity: 'error', summary: 'Error', detail: 'Could not load your activity feed.' }];
           this.allActivities = [];
           this.recentActivities = [];
           this.isLoading = false;
diff --git a/src/app/features/calendar/components/task-calendar/task-calendar.component.html b/src/app/features/calendar/components/task-calendar/task-calendar.component.html
@@ -1,4 +1,6 @@
 <section class="calendar-page">
+  <p-messages *ngIf="errors.length > 0" [(value)]="errors" [enableService]="false" [closable]="true"></p-messages>
+
   <p-card styleClass="calendar-hero">
     <div class="calendar-hero__content">
       <div class="calendar-hero__title">
@@ -18,8 +20,6 @@ <h2>{{ calendarTitle }}</h2>
     </div>
   </p-card>
 
-  <div *ngIf="loadError" class="calendar-warning">{{ loadError }}</div>
-
   <div class="calendar-layout">
     <p-card styleClass="calendar-main-card">
       <ng-template pTemplate="content">
diff --git a/src/app/features/calendar/components/task-calendar/task-calendar.component.ts b/src/app/features/calendar/components/task-calendar/task-calendar.component.ts
@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { Component, OnDestroy, OnInit, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
+import { Message } from 'primeng/api';
 import { Subject, takeUntil } from 'rxjs';
 import { TaskItemsApiClient } from '../../../../core/api/clients/task-items-api.client';
 import { TaskItemDto } from '../../../../core/api/models/task-item.model';
@@ -33,7 +34,7 @@ export class TaskCalendarComponent implements OnInit, OnDestroy {
   isLoading = true;
   isPreviewMode = false;
   previewDetail: string | null = null;
-  loadError: string | null = null;
+  errors: Message[] = [];
 
   tasksForSelectedDate: TaskItemDto[] = [];
   private allTasks: TaskItemDto[] = [];
@@ -115,15 +116,15 @@ export class TaskCalendarComponent implements OnInit, OnDestroy {
     this.isLoading = true;
     this.isPreviewMode = false;
     this.previewDetail = null;
-    this.loadError = null;
+    this.errors = [];
     this.clearData();
 
     const currentUserId = this.authService.currentUserId();
     if (!currentUserId) {
       if (this.shouldUsePreviewMode()) {
         this.loadPreviewData();
       } else {
-        this.loadError = 'Could not resolve current user identity.';
+        this.errors = [{ severity: 'error', summary: 'Error', detail: 'Could not resolve current user identity.' }];
         this.isLoading = false;
       }
       return;
@@ -147,7 +148,7 @@ export class TaskCalendarComponent implements OnInit, OnDestroy {
             return;
           }
 
-          this.loadError = 'Could not load task due dates right now.';
+          this.errors = [{ severity: 'error', summary: 'Error', detail: 'Could not load task due dates right now.' }];
           this.isLoading = false;
         }
       });
diff --git a/src/app/features/projects/components/project-details/project-details.component.html b/src/app/features/projects/components/project-details/project-details.component.html
@@ -1,5 +1,6 @@
 <div class="project-details-page">
   <p-confirmDialog [baseZIndex]="1300" [appendTo]="'body'"></p-confirmDialog>
+  <p-messages *ngIf="errors.length > 0" [(value)]="errors" [enableService]="false" [closable]="true"></p-messages>
 
   <p-card class="project-details-header-card">
     <div class="project-details-header">
@@ -131,12 +132,6 @@ <h2>Project Details</h2>
 
     <div class="project-details-grid__col project-details-grid__col--tasks">
       <p-card header="Recent Tasks" styleClass="details-card">
-        <div class="tasks-inline-error" *ngIf="errors.length > 0">
-          <i class="pi pi-exclamation-triangle"></i>
-          {{ errors[0].detail }}
-          <span *ngIf="previewDetail">· {{ previewDetail }}</span>
-        </div>
-
         <p-table [value]="recentTasks" [loading]="isLoadingDetails" [rowHover]="true" [tableStyle]="{ 'min-width': '42rem' }">
           <ng-template pTemplate="header">
             <tr>
diff --git a/src/app/features/projects/components/project-kanban/project-kanban.component.html b/src/app/features/projects/components/project-kanban/project-kanban.component.html
@@ -1,5 +1,6 @@
 <div class="kanban-page">
   <p-confirmDialog [baseZIndex]="1300" [appendTo]="'body'"></p-confirmDialog>
+  <p-messages *ngIf="errors.length > 0" [(value)]="errors" [enableService]="false" [closable]="true"></p-messages>
 
   <p-card class="kanban-header-card">
     <div class="kanban-toolbar">
@@ -60,8 +61,6 @@ <h2>Project Kanban Board</h2>
   </p-card>
 
   <div class="kanban-content">
-    <p-messages *ngIf="errors.length > 0" [(value)]="errors" [enableService]="false" [closable]="true"></p-messages>
-
     <div *ngIf="isLoadingProjects || isLoadingTasks" class="kanban-grid">
       <p-card class="custom-card" *ngFor="let placeholder of [1,2,3]">
         <ng-template pTemplate="header">
diff --git a/src/app/features/projects/components/project-list/project-list.component.html b/src/app/features/projects/components/project-list/project-list.component.html
@@ -1,5 +1,6 @@
 <div class="projects-page">
   <p-confirmDialog [baseZIndex]="1300" [appendTo]="'body'"></p-confirmDialog>
+  <p-messages *ngIf="errors.length > 0" [(value)]="errors" [enableService]="false" [closable]="true"></p-messages>
 
   <p-card class="projects-header-card">
     <div class="projects-header">
@@ -64,11 +65,6 @@ <h2>All Projects</h2>
   </div>
 
   <p-card class="projects-table-card">
-    <div class="projects-inline-error" *ngIf="errors.length > 0">
-      <i class="pi pi-exclamation-triangle"></i>
-      {{ errors[0].detail }}
-    </div>
-
     <p-table
       #dt
       [value]="projects"
diff --git a/src/app/features/projects/components/project-members/project-members.component.html b/src/app/features/projects/components/project-members/project-members.component.html
@@ -1,4 +1,6 @@
 <div class="project-members-page">
+  <p-messages *ngIf="errors.length > 0" [(value)]="errors" [enableService]="false" [closable]="true"></p-messages>
+
   <p-card class="members-header-card">
     <div class="members-header">
       <div class="members-header__title">
@@ -52,12 +54,6 @@ <h2>Project Members</h2>
   </div>
 
   <p-card class="members-table-card">
-    <div class="members-inline-error" *ngIf="errorMessage">
-      <i class="pi pi-exclamation-triangle"></i>
-      {{ errorMessage }}
-      <span *ngIf="previewDetail">· {{ previewDetail }}</span>
-    </div>
-
     <p-table
       #dt
       [value]="members"
diff --git a/src/app/features/projects/components/project-members/project-members.component.ts b/src/app/features/projects/components/project-members/project-members.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnDestroy, OnInit, inject } from '@angular/core';
+import { Message } from 'primeng/api';
 import { Table } from 'primeng/table';
 import { Subject, takeUntil } from 'rxjs';
 import { ProjectsApiClient } from '../../../../core/api/clients/projects-api.client';
@@ -32,7 +33,7 @@ export class ProjectMembersComponent implements OnInit, OnDestroy {
   isLoadingMembers = false;
   isPreviewMode = false;
   previewDetail: string | null = null;
-  errorMessage: string | null = null;
+  errors: Message[] = [];
 
   readonly roleFilterOptions = [
     { label: 'All Roles', value: null as boolean | null },
@@ -118,7 +119,7 @@ export class ProjectMembersComponent implements OnInit, OnDestroy {
     this.isLoadingMembers = false;
     this.isPreviewMode = false;
     this.previewDetail = null;
-    this.errorMessage = null;
+    this.errors = [];
     this.projects = [];
     this.members = [];
     this.visibleMemberCount = 0;
@@ -154,14 +155,14 @@ export class ProjectMembersComponent implements OnInit, OnDestroy {
           }
 
           this.isLoadingProjects = false;
-          this.errorMessage = 'Could not load projects.';
+          this.errors = [{ severity: 'error', summary: 'Error', detail: 'Could not load projects.' }];
         }
       });
   }
 
   private loadMembers(projectId: string): void {
     this.isLoadingMembers = true;
-    this.errorMessage = null;
+    this.errors = [];
 
     if (this.isPreviewMode) {
       this.members = this.buildPreviewMembers(projectId);
@@ -192,7 +193,7 @@ export class ProjectMembersComponent implements OnInit, OnDestroy {
           this.members = [];
           this.visibleMemberCount = 0;
           this.isLoadingMembers = false;
-          this.errorMessage = 'Could not load project members.';
+          this.errors = [{ severity: 'error', summary: 'Error', detail: 'Could not load project members.' }];
         }
       });
   }
diff --git a/src/app/features/search/components/search-filters/search-filters.component.html b/src/app/features/search/components/search-filters/search-filters.component.html
@@ -1,4 +1,6 @@
 <div class="search-page">
+  <p-messages *ngIf="errors.length > 0" [(value)]="errors" [enableService]="false" [closable]="true"></p-messages>
+
   <p-card styleClass="search-header-card">
     <div class="search-header">
       <div class="search-header__title">
@@ -18,8 +20,6 @@ <h2>Search & Filters</h2>
     </div>
   </p-card>
 
-  <p-messages *ngIf="errors.length > 0" [(value)]="errors" [enableService]="false" [closable]="true"></p-messages>
-
   <div class="search-kpis">
     <article class="kpi-card"><div class="kpi-card__shell kpi-card__shell--info"><div class="kpi-card__head"><span class="kpi-card__label">Users In Project</span><span class="kpi-card__tag">People</span></div><span class="kpi-card__value">{{ usersInProjectCount }}</span></div></article>
     <article class="kpi-card"><div class="kpi-card__shell kpi-card__shell--neutral"><div class="kpi-card__head"><span class="kpi-card__label">Projects For User</span><span class="kpi-card__tag">Scope</span></div><span class="kpi-card__value">{{ projectsForUserCount }}</span></div></article>
diff --git a/src/app/features/task-item/components/task-item-list/task-item-list.component.html b/src/app/features/task-item/components/task-item-list/task-item-list.component.html
@@ -1,5 +1,6 @@
 <div class="tasks-page">
   <p-confirmDialog [baseZIndex]="1300" [appendTo]="'body'"></p-confirmDialog>
+  <p-messages *ngIf="errors.length > 0" [(value)]="errors" [enableService]="false" [closable]="true"></p-messages>
 
   <p-card class="tasks-header-card">
     <div class="tasks-header">
@@ -58,12 +59,6 @@ <h2>All Tasks</h2>
   </div>
 
   <p-card class="tasks-table-card">
-    <div class="tasks-inline-error" *ngIf="errors.length > 0">
-      <i class="pi pi-exclamation-triangle"></i>
-      {{ errors[0].detail }}
-      <span *ngIf="previewDetail">· {{ previewDetail }}</span>
-    </div>
-
     <p-table
       #dt
       [value]="tasks"
diff --git a/src/app/features/task-item/components/user-task-items/user-task-items.component.html b/src/app/features/task-item/components/user-task-items/user-task-items.component.html
@@ -1,5 +1,6 @@
 <div class="my-tasks-page">
   <p-confirmDialog [baseZIndex]="1300" [appendTo]="'body'"></p-confirmDialog>
+  <p-messages *ngIf="errors.length > 0" [(value)]="errors" [enableService]="false" [closable]="true"></p-messages>
 
   <p-card class="my-tasks-header-card">
     <div class="my-tasks-header">
@@ -32,8 +33,6 @@ <h2>My Tasks</h2>
   </div>
 
   <p-card class="my-tasks-content-card">
-    <p-messages *ngIf="errors.length > 0" [(value)]="errors" [enableService]="false" [closable]="true"></p-messages>
-
     <div *ngIf="isLoading" class="loading-state">
       <p-progressSpinner styleClass="w-2rem h-2rem" strokeWidth="6"></p-progressSpinner>
       <span>Loading your tasks...</span>
