Create AchievementsList and use it within browser and web

apps/browser/src/tools/popup/achievements/achievements.component.html

@@ -4,7 +4,7 @@
       <app-pop-out></app-pop-out>
     </ng-container>
   </popup-header>
-
+  <achievements-list></achievements-list>
   <popup-footer slot="footer">
     <button bitButton type="button" bitFormButton buttonType="primary" (click)="testAchievement()">
       Test achievements

apps/browser/src/tools/popup/achievements/achievements.component.ts

@@ -3,6 +3,7 @@ import { Component, OnInit } from "@angular/core";
 import { firstValueFrom } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { AchievementsListComponent } from "@bitwarden/angular/tools/achievements/achievements-list.component";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { EventStoreAbstraction } from "@bitwarden/common/tools/achievements/event-store.abstraction.service";
 import { VaultItems_10_Added_Achievement } from "@bitwarden/common/tools/achievements/examples/achievements";
@@ -27,6 +28,7 @@ import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.co
     PopOutComponent,
     ButtonModule,
     IconModule,
+    AchievementsListComponent,
   ],
 })
 export class AchievementsComponent implements OnInit {

apps/web/src/app/tools/achievements/achievements.component.html

@@ -1,6 +1,7 @@
 <app-header></app-header>
 
 <bit-container>
+  <achievements-list></achievements-list>
   <button bitButton type="button" bitFormButton buttonType="primary" (click)="testAchievement()">
     Test achievements
   </button>

apps/web/src/app/tools/achievements/achievements.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from "@angular/core";
 import { firstValueFrom } from "rxjs";
 
 import { AchievementNotifierService } from "@bitwarden/angular/tools/achievements/achievement-notifier.abstraction";
+import { AchievementsListComponent } from "@bitwarden/angular/tools/achievements/achievements-list.component";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { EventStoreAbstraction } from "@bitwarden/common/tools/achievements/event-store.abstraction.service";
 import { VaultItems_10_Added_Achievement } from "@bitwarden/common/tools/achievements/examples/achievements";
@@ -14,7 +15,7 @@ import { SharedModule } from "../../shared";
 @Component({
   templateUrl: "achievements.component.html",
   standalone: true,
-  imports: [SharedModule, HeaderModule],
+  imports: [SharedModule, HeaderModule, AchievementsListComponent],
 })
 export class AchievementsComponent implements OnInit {
   private currentUserId: UserId;

libs/angular/src/tools/achievements/achievements-list.component.html

@@ -0,0 +1,20 @@
+<bit-section *ngIf="allAchievementCards?.length > 0">
+  <bit-section-header>
+    <h2 class="tw-font-bold" bitTypography="h6">
+      {{ "achievements" | i18n }}
+    </h2>
+    <span bitTypography="body1" slot="end">{{ allAchievementCards.length }}</span>
+  </bit-section-header>
+
+  @for (achievement of allAchievementCards; track achievement.name) {
+    <div class="tw-mb-3">
+      <achievement-card
+        [title]="achievement.name"
+        [description]="achievement.description"
+        [earned]="achievement.earned"
+        [date]="achievement.date"
+        [progress]="achievement.progress"
+      ></achievement-card>
+    </div>
+  }
+</bit-section>

libs/angular/src/tools/achievements/achievements-list.component.ts

@@ -0,0 +1,89 @@
+import { CommonModule } from "@angular/common";
+import { Component, OnInit } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { firstValueFrom } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { AchievementService } from "@bitwarden/common/tools/achievements/achievement.service.abstraction";
+import {
+  LoginItems_1_Added_Achievement,
+  VaultItems_10_Added_Achievement,
+  VaultItems_1_Added_Achievement,
+  VaultItems_50_Added_Achievement,
+} from "@bitwarden/common/tools/achievements/examples/achievements";
+import { UserId } from "@bitwarden/common/types/guid";
+import {
+  ButtonModule,
+  IconButtonModule,
+  ItemModule,
+  SectionComponent,
+  SectionHeaderComponent,
+  TypographyModule,
+} from "@bitwarden/components";
+
+import { AchievementCard } from "./achievement-card.component";
+
+@Component({
+  selector: "achievements-list",
+  templateUrl: "achievements-list.component.html",
+  standalone: true,
+  imports: [
+    CommonModule,
+    ItemModule,
+    ButtonModule,
+    IconButtonModule,
+    SectionComponent,
+    TypographyModule,
+    JslibModule,
+    SectionHeaderComponent,
+    AchievementCard,
+  ],
+})
+export class AchievementsListComponent implements OnInit {
+  private currentUserId: UserId;
+
+  //FIXME Should be retrieved from achievementService or possibly AchievementManager
+  private allAchievements = [
+    VaultItems_1_Added_Achievement,
+    VaultItems_10_Added_Achievement,
+    VaultItems_50_Added_Achievement,
+    LoginItems_1_Added_Achievement,
+  ];
+
+  mockAchievements = [
+    { ...VaultItems_1_Added_Achievement, earned: false, progress: 0, date: new Date(0) },
+    { ...VaultItems_10_Added_Achievement, earned: false, progress: 1, date: new Date(0) },
+    { ...VaultItems_50_Added_Achievement, earned: true, progress: 0, date: new Date(0) },
+  ];
+  //FIXME uses mockedData for AchievmentsList
+  allAchievementCards = this.mockAchievements;
+  // allAchievementCards = this.allAchievements.map(achievement => { return { ...achievement, earned: true, progress: 0, date: new Date(0) } });
+
+  constructor(
+    private achievementService: AchievementService,
+    private accountService: AccountService,
+  ) {
+    //FIXME AchievementProgressEvent is missing an identifier for a specific achievement
+    this.achievementService
+      .achievementsInProgress$(this.currentUserId)
+      .pipe(takeUntilDestroyed())
+      .subscribe((event) => {
+        this.allAchievementCards.find((a) => a.name === event.achievement.name);
+        const index = this.allAchievementCards.findIndex((a) => a.name === event.achievement.name);
+        this.allAchievementCards[index].progress = event.achievement.value;
+      });
+    this.achievementService
+      .achievementsEarned$(this.currentUserId)
+      .pipe(takeUntilDestroyed())
+      .subscribe((event) => {
+        const index = this.allAchievementCards.findIndex((a) => a.name === event.achievement.name);
+        this.allAchievementCards[index].earned = true;
+        this.allAchievementCards[index].date = new Date(event["@timestamp"]);
+      });
+  }
+
+  async ngOnInit() {
+    this.currentUserId = (await firstValueFrom(this.accountService.activeAccount$)).id;
+  }
+}