feat(shared): add reusable expandable-text component and apply to task description tables

Author: Diogo-Ferraz

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

@@ -130,7 +130,7 @@ <h2>Project Details</h2>
     </div>
 
     <div class="project-details-grid__col project-details-grid__col--tasks">
-      <p-card header="Recent Tasks" styleClass="details-card">
+      <p-card header="Recent Tasks" styleClass="details-card details-card--tasks">
         <p-table [value]="recentTasks" [loading]="isLoadingDetails" [rowHover]="true" [tableStyle]="{ 'min-width': '42rem' }">
           <ng-template pTemplate="header">
             <tr>
@@ -147,7 +147,7 @@ <h2>Project Details</h2>
               <td>
                 <div class="task-cell">
                   <span class="task-cell__title">{{ task.title }}</span>
-                  <span class="task-cell__description">{{ task.description || 'No description.' }}</span>
+                  <app-expandable-text [text]="task.description" [maxLength]="110"></app-expandable-text>
                 </div>
               </td>
               <td>

src/app/features/projects/components/project-details/project-details.component.scss

@@ -184,6 +184,15 @@
   min-height: 0;
 }
 
+:host ::ng-deep .details-card--tasks .p-card-content {
+  overflow: auto;
+  min-height: 0;
+}
+
+:host ::ng-deep .details-card--tasks .p-datatable-wrapper {
+  overflow: auto;
+}
+
 .project-overview {
   display: flex;
   flex-direction: column;

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

@@ -135,7 +135,7 @@ <h2>All Tasks</h2>
           <td>
             <div class="task-cell">
               <span class="task-cell__title">{{ task.title }}</span>
-              <span class="task-cell__description">{{ task.description || 'No description provided.' }}</span>
+              <app-expandable-text [text]="task.description" [maxLength]="120"></app-expandable-text>
             </div>
           </td>
 

src/app/shared/components/expandable-text/expandable-text.component.html

@@ -0,0 +1,14 @@
+<div class="expandable-text" *ngIf="normalizedText.length > 0; else emptyText">
+  <span class="expandable-text__content">{{ displayText }}</span>
+  <button
+    *ngIf="canExpand"
+    type="button"
+    class="expandable-text__toggle"
+    (click)="toggle()">
+    {{ expanded ? 'Show less' : 'Show more' }}
+  </button>
+</div>
+
+<ng-template #emptyText>
+  <span class="expandable-text__empty">No description provided.</span>
+</ng-template>

src/app/shared/components/expandable-text/expandable-text.component.scss

@@ -0,0 +1,31 @@
+.expandable-text {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.2rem;
+}
+
+.expandable-text__content {
+  color: var(--text-color-secondary);
+  line-height: 1.35;
+  word-break: break-word;
+}
+
+.expandable-text__toggle {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  color: var(--primary-color);
+  font-size: 0.78rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.expandable-text__toggle:hover {
+  text-decoration: underline;
+}
+
+.expandable-text__empty {
+  color: var(--text-color-secondary);
+}

src/app/shared/components/expandable-text/expandable-text.component.ts

@@ -0,0 +1,36 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-expandable-text',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './expandable-text.component.html',
+  styleUrl: './expandable-text.component.scss'
+})
+export class ExpandableTextComponent {
+  @Input() text: string | null | undefined = '';
+  @Input() maxLength = 120;
+
+  expanded = false;
+
+  get normalizedText(): string {
+    return (this.text ?? '').trim();
+  }
+
+  get canExpand(): boolean {
+    return this.normalizedText.length > this.maxLength;
+  }
+
+  get displayText(): string {
+    if (!this.canExpand || this.expanded) {
+      return this.normalizedText;
+    }
+
+    return `${this.normalizedText.slice(0, this.maxLength).trimEnd()}...`;
+  }
+
+  toggle(): void {
+    this.expanded = !this.expanded;
+  }
+}

src/app/shared/shared.module.ts

@@ -29,9 +29,12 @@ import { CalendarModule } from 'primeng/calendar';
 import { StepsModule } from 'primeng/steps';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { MessagesModule } from 'primeng/messages';
+import { ExpandableTextComponent } from './components/expandable-text/expandable-text.component';
 
 @NgModule({
+  imports: [ExpandableTextComponent],
   exports: [
+    ExpandableTextComponent,
     CommonModule,
     CardModule,
     InputTextModule,