Update flare-ui/src/app/components/activity-log/activity-log.component.ts

flare-ui/src/app/components/activity-log/activity-log.component.ts

@@ -42,30 +42,27 @@ interface ActivityLogResponse {
     MatDividerModule
   ],
   template: `
-    <mat-card class="activity-log-dropdown" (click)="$event.stopPropagation()">
-      <mat-card-header>
-        <mat-card-title>
-          <mat-icon>notifications</mat-icon>
-          Recent Activities
-        </mat-card-title>
-        <button mat-icon-button (click)="close.emit()">
-          <mat-icon>close</mat-icon>
-        </button>
-      </mat-card-header>
-      
-      <mat-card-content>
-        @if (loading && activities.length === 0) {
-          <div class="loading">
+      <mat-card class="activity-log-dropdown" (click)="$event.stopPropagation()">
+        <mat-card-header>
+          <mat-card-title>
+            <mat-icon>notifications</mat-icon>
+            Recent Activities
+          </mat-card-title>
+          <button mat-icon-button (click)="close.emit()">
+            <mat-icon>close</mat-icon>
+          </button>
+        </mat-card-header>
+        
+        <mat-card-content>
+          <div class="loading" *ngIf="loading && activities.length === 0">
             <mat-spinner diameter="30"></mat-spinner>
           </div>
-        } @else if (activities.length === 0) {
-          <div class="empty">
+          <div class="empty" *ngIf="!loading && activities.length === 0">
             <mat-icon>inbox</mat-icon>
             <p>No activities found</p>
           </div>
-        } @else {
-          <mat-list class="activity-list">
-            @for (activity of activities; track activity.id) {
+          <mat-list class="activity-list" *ngIf="activities.length > 0">
+            <ng-container *ngFor="let activity of activities; trackBy: trackByActivityId">
               <mat-list-item>
                 <mat-icon matListItemIcon>{{ getActivityIcon(activity.action) }}</mat-icon>
                 <div matListItemTitle>
@@ -74,38 +71,33 @@ interface ActivityLogResponse {
                 <div matListItemLine>
                   <strong>{{ activity.user }}</strong> {{ getActionText(activity) }}
                   <em>{{ activity.entity_name }}</em>
-                  @if (activity.details) {
-                    <span class="details">• {{ activity.details }}</span>
-                  }
+                  <span class="details" *ngIf="activity.details">• {{ activity.details }}</span>
                 </div>
               </mat-list-item>
-              @if (!$last) {
-                <mat-divider></mat-divider>
-              }
-            }
+              <mat-divider *ngIf="!isLast(activity)"></mat-divider>
+            </ng-container>
           </mat-list>
-        }
-      </mat-card-content>
-      
-      <mat-card-actions *ngIf="totalItems > pageSize">
-        <mat-paginator
-          [length]="totalItems"
-          [pageSize]="pageSize"
-          [pageIndex]="currentPage - 1"
-          [pageSizeOptions]="[10, 25, 50]"
-          (page)="onPageChange($event)"
-          showFirstLastButtons>
-        </mat-paginator>
-      </mat-card-actions>
-      
-      <mat-card-actions *ngIf="totalItems <= pageSize && activities.length > 0">
-        <button mat-button (click)="openFullView()" class="full-width">
-          <mat-icon>open_in_new</mat-icon>
-          View All Activities
-        </button>
-      </mat-card-actions>
-    </mat-card>
-  `,
+        </mat-card-content>
+        
+        <mat-card-actions *ngIf="totalItems > pageSize">
+          <mat-paginator
+            [length]="totalItems"
+            [pageSize]="pageSize"
+            [pageIndex]="currentPage - 1"
+            [pageSizeOptions]="[10, 25, 50]"
+            (page)="onPageChange($event)"
+            showFirstLastButtons>
+          </mat-paginator>
+        </mat-card-actions>
+        
+        <mat-card-actions *ngIf="totalItems <= pageSize && activities.length > 0">
+          <button mat-button (click)="openFullView()" class="full-width">
+            <mat-icon>open_in_new</mat-icon>
+            View All Activities
+          </button>
+        </mat-card-actions>
+      </mat-card>
+    `,
   styles: [`
     .activity-log-dropdown {
       width: 450px;