fix(attendance): attendance overview tab lists archived activities separately (#2616)

closes #2587

Author: Abhinegi2

src/app/child-dev-project/attendance/activity-attendance-section/activity-attendance-section.component.ts

@@ -1,4 +1,12 @@
-import { Component, Inject, Input, LOCALE_ID, OnInit } from "@angular/core";
+import {
+  Component,
+  Inject,
+  Input,
+  LOCALE_ID,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from "@angular/core";
 import { RecurringActivity } from "../model/recurring-activity";
 import { AttendanceDetailsComponent } from "../attendance-details/attendance-details.component";
 import { AttendanceService } from "../attendance.service";
@@ -32,7 +40,7 @@ import { EntitiesTableComponent } from "../../../core/common-components/entities
   ],
   standalone: true,
 })
-export class ActivityAttendanceSectionComponent implements OnInit {
+export class ActivityAttendanceSectionComponent implements OnInit, OnChanges {
   @Input() entity: RecurringActivity;
   @Input() forChild?: string;
 
@@ -88,6 +96,12 @@ export class ActivityAttendanceSectionComponent implements OnInit {
     return this.init();
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.entity) {
+      this.init();
+    }
+  }
+
   async init(loadAll: boolean = false) {
     this.loading = true;
     if (loadAll) {

src/app/child-dev-project/children/child-details/grouped-child-attendance/grouped-child-attendance.component.html

@@ -10,4 +10,29 @@
     >
     </app-activity-attendance-section>
   </mat-tab>
+
+  <mat-tab *ngIf="archivedActivities.length > 0" label="Previous Activities">
+    <p i18n>
+      This section displays historical activities that have been archived.
+    </p>
+
+    <mat-form-field>
+      <mat-label i18n>Select activity</mat-label>
+      <mat-select (selectionChange)="onActivityChange($event.value)">
+        <mat-option
+          *ngFor="let archivedActivity of archivedActivities"
+          [value]="archivedActivity"
+        >
+          {{ archivedActivity.title }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+    <div *ngIf="selectedActivity">
+      <app-activity-attendance-section
+        [entity]="selectedActivity"
+        [forChild]="entity.getId()"
+      >
+      </app-activity-attendance-section>
+    </div>
+  </mat-tab>
 </mat-tab-group>

src/app/child-dev-project/children/child-details/grouped-child-attendance/grouped-child-attendance.component.ts

@@ -8,6 +8,7 @@ import { MatProgressBarModule } from "@angular/material/progress-bar";
 import { MatTabsModule } from "@angular/material/tabs";
 import { TabStateModule } from "../../../../utils/tab-state/tab-state.module";
 import { ActivityAttendanceSectionComponent } from "../../../attendance/activity-attendance-section/activity-attendance-section.component";
+import { MatSelectModule } from "@angular/material/select";
 
 @DynamicComponent("GroupedChildAttendance")
 @Component({
@@ -22,14 +23,17 @@ import { ActivityAttendanceSectionComponent } from "../../../attendance/activity
     TabStateModule,
     ActivityAttendanceSectionComponent,
     NgForOf,
+    MatSelectModule,
   ],
   standalone: true,
 })
 export class GroupedChildAttendanceComponent implements OnInit {
   @Input() entity: Entity;
 
   loading: boolean = true;
+  selectedActivity: RecurringActivity;
   activities: RecurringActivity[] = [];
+  archivedActivities: RecurringActivity[] = [];
 
   constructor(private attendanceService: AttendanceService) {}
 
@@ -39,9 +43,26 @@ export class GroupedChildAttendanceComponent implements OnInit {
 
   private async loadActivities() {
     this.loading = true;
-    this.activities = (
-      await this.attendanceService.getActivitiesForChild(this.entity.getId())
-    ).filter((a) => !a.excludedParticipants.includes(this.entity.getId()));
+    const allActivities = await this.attendanceService.getActivitiesForChild(
+      this.entity.getId(),
+    );
+
+    this.activities = allActivities.filter(
+      (a) =>
+        !a.excludedParticipants.includes(this.entity.getId()) &&
+        a.isActive == true,
+    );
+
+    this.archivedActivities = allActivities.filter(
+      (a) =>
+        !a.excludedParticipants.includes(this.entity.getId()) &&
+        a.isActive == false,
+    );
+
     this.loading = false;
   }
+
+  onActivityChange(selectedArchivedActivity: RecurringActivity) {
+    this.selectedActivity = selectedArchivedActivity;
+  }
 }