feat(tables): add sortable date columns across projects, tasks, activity, and project details

Author: Diogo-Ferraz

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

@@ -128,7 +128,10 @@ <h2>Activity Log</h2>
             </div>
           </th>
           <th style="min-width: 16rem;">Task</th>
-          <th style="min-width: 12rem;">Occurred At</th>
+          <th style="min-width: 12rem;" pSortableColumn="occurredAtDate">
+            Occurred At
+            <p-sortIcon field="occurredAtDate"></p-sortIcon>
+          </th>
         </tr>
       </ng-template>
 

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

@@ -137,8 +137,14 @@ <h2>Project Details</h2>
               <th style="min-width: 16rem;">Task</th>
               <th style="min-width: 8rem;">Status</th>
               <th style="min-width: 10rem;">Assignee</th>
-              <th style="min-width: 8rem;">Due</th>
-              <th style="min-width: 10rem;">Updated</th>
+              <th style="min-width: 8rem;" pSortableColumn="dueDate">
+                Due
+                <p-sortIcon field="dueDate"></p-sortIcon>
+              </th>
+              <th style="min-width: 10rem;" pSortableColumn="lastModifiedAt">
+                Updated
+                <p-sortIcon field="lastModifiedAt"></p-sortIcon>
+              </th>
             </tr>
           </ng-template>
 

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

@@ -106,15 +106,17 @@ <h2>All Projects</h2>
               <p-columnFilter type="text" field="createdByUserName" display="menu"></p-columnFilter>
             </div>
           </th>
-          <th style="min-width: 9rem;">
+          <th style="min-width: 9rem;" pSortableColumn="createdAt">
             <div class="column-head">
               Created
+              <p-sortIcon field="createdAt"></p-sortIcon>
               <p-columnFilter type="date" field="createdAt" display="menu"></p-columnFilter>
             </div>
           </th>
-          <th style="min-width: 9rem;">
+          <th style="min-width: 9rem;" pSortableColumn="lastModifiedAt">
             <div class="column-head">
               Last Updated
+              <p-sortIcon field="lastModifiedAt"></p-sortIcon>
               <p-columnFilter type="date" field="lastModifiedAt" display="menu"></p-columnFilter>
             </div>
           </th>

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

@@ -108,9 +108,10 @@ <h2>All Tasks</h2>
               </p-columnFilter>
             </div>
           </th>
-          <th style="min-width: 8rem;">
+          <th style="min-width: 8rem;" pSortableColumn="dueDate">
             <div class="column-head">
               Due Date
+              <p-sortIcon field="dueDate"></p-sortIcon>
               <p-columnFilter type="text" field="dueDate" display="menu"></p-columnFilter>
             </div>
           </th>
@@ -120,9 +121,10 @@ <h2>All Tasks</h2>
               <p-columnFilter type="text" field="assignedUserName" display="menu"></p-columnFilter>
             </div>
           </th>
-          <th style="min-width: 10rem;">
+          <th style="min-width: 10rem;" pSortableColumn="lastModifiedAt">
             <div class="column-head">
               Last Updated
+              <p-sortIcon field="lastModifiedAt"></p-sortIcon>
               <p-columnFilter type="text" field="lastModifiedAt" display="menu"></p-columnFilter>
             </div>
           </th>