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

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

@@ -42,27 +42,30 @@ 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>
-          <div class="loading" *ngIf="loading && activities.length === 0">
+    <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-spinner diameter="30"></mat-spinner>
           </div>
-          <div class="empty" *ngIf="!loading && activities.length === 0">
+        } @else if (activities.length === 0) {
+          <div class="empty">
             <mat-icon>inbox</mat-icon>
             <p>No activities found</p>
           </div>
-          <mat-list class="activity-list" *ngIf="activities.length > 0">
-            <ng-container *ngFor="let activity of activities; trackBy: trackByActivityId">
+        } @else {
+          <mat-list class="activity-list">
+            @for (activity of activities; track activity.id) {
               <mat-list-item>
                 <mat-icon matListItemIcon>{{ getActivityIcon(activity.action) }}</mat-icon>
                 <div matListItemTitle>
@@ -71,33 +74,38 @@ interface ActivityLogResponse {
                 <div matListItemLine>
                   <strong>{{ activity.user }}</strong> {{ getActionText(activity) }}
                   <em>{{ activity.entity_name }}</em>
-                  <span class="details" *ngIf="activity.details">• {{ activity.details }}</span>
+                  @if (activity.details) {
+                    <span class="details">• {{ activity.details }}</span>
+                  }
                 </div>
               </mat-list-item>
-              <mat-divider *ngIf="!isLast(activity)"></mat-divider>
-            </ng-container>
+              @if (!$last) {
+                <mat-divider></mat-divider>
+              }
+            }
           </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;