fix(checklist): fixed hidden characters display

Supamiu · Dec 11, 2023 · 20fb44e · 20fb44e
1 parent c2e5600
commit 20fb44e
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 53 deletions.
diff --git a/apps/client/src/app/pages/checklist/checklist/checklist.component.html b/apps/client/src/app/pages/checklist/checklist/checklist.component.html
@@ -3,8 +3,8 @@
   <ng-template #subtitle>
     Track your daily and weekly tasks with automated resets and rest bonus support <i nz-icon nzType="info-circle" nzTheme="outline" nz-tooltip nzTooltipTitle="Ctrl + Click a task to mark it as entirely done in a single click"></i>
     <br>
-    <label nz-checkbox [(ngModel)]="forceShowHiddenCharacter"></label>
-    Show your hidden's characters
+    <label nz-checkbox [ngModel]="forceShowHiddenCharacter$ | async" (ngModelChange)="forceShowHiddenCharacter$.next($event)"></label>
+    Show your hidden characters
     <i nz-icon nzType="info-circle" nzTheme="outline" nz-tooltip nzTooltipTitle="Only resets after 3 days"></i>
   </ng-template>
 
@@ -18,31 +18,33 @@
 </nz-page-header>
 
 <nz-collapse *ngIf="rawRoster$ | async as roster">
-  <nz-collapse-panel nzHeader="Tickets tracking" class="tickets-tracker" [(nzActive)]="ticketsTrackingOpened"
-                     (nzActiveChange)="ticketsTrackingOpenedChange($event)" *ngIf="getCharactersList(roster.characters).length > 0">
-    <nz-table [nzPageSize]="99" nzHideOnSinglePage nzBordered nzOuterBordered nzSize="middle" [nzData]="[{}]">
-      <thead>
-      <tr>
-        <th>Ticket</th>
-        <th *ngFor="let character of getCharactersList(roster.characters); trackBy: trackByCharacter">
-          <div class="character-title">
-            <img src="./assets/icons/classes/class_{{character.class?.toString()?.padStart(2,'0')}}.png" alt=""
-                class="class-icon" *ngIf="character.class !== null">
-            {{character.name}} [{{character.ilvl}}]
-          </div>
-        </th>
-      </tr>
-      </thead>
-      <tbody *ngIf="tickets$ | async as tickets">
-      <tr *ngFor="let ticket of tickets">
-        <td><img src="./assets/icons/{{ticket.icon}}" class="ticket-icon icon-rarity icon-rarity-{{ticket.rarity}}" alt="">{{ticket.name}}</td>
-        <td *ngFor="let character of getCharactersList(roster.characters); trackBy: trackByCharacter" class="ticket-cell">
-          <nz-input-number [(ngModel)]="character.tickets[ticket.key]" (ngModelChange)="saveRoster(roster)"></nz-input-number>
-        </td>
-      </tr>
-      </tbody>
-    </nz-table>
-  </nz-collapse-panel>
+  <ng-container *ngIf="characters$ | async as characters">
+    <nz-collapse-panel nzHeader="Tickets tracking" class="tickets-tracker" [(nzActive)]="ticketsTrackingOpened"
+                       (nzActiveChange)="ticketsTrackingOpenedChange($event)" *ngIf="characters.length > 0">
+      <nz-table [nzPageSize]="99" nzHideOnSinglePage nzBordered nzOuterBordered nzSize="middle" [nzData]="[{}]">
+        <thead>
+        <tr>
+          <th>Ticket</th>
+          <th *ngFor="let character of characters; trackBy: trackByCharacter">
+            <div class="character-title">
+              <img src="./assets/icons/classes/class_{{character.class?.toString()?.padStart(2,'0')}}.png" alt=""
+                   class="class-icon" *ngIf="character.class !== null">
+              {{character.name}} [{{character.ilvl}}]
+            </div>
+          </th>
+        </tr>
+        </thead>
+        <tbody *ngIf="tickets$ | async as tickets">
+        <tr *ngFor="let ticket of tickets">
+          <td><img src="./assets/icons/{{ticket.icon}}" class="ticket-icon icon-rarity icon-rarity-{{ticket.rarity}}" alt="">{{ticket.name}}</td>
+          <td *ngFor="let character of characters; trackBy: trackByCharacter" class="ticket-cell">
+            <nz-input-number [(ngModel)]="character.tickets[ticket.key]" (ngModelChange)="saveRoster(roster)"></nz-input-number>
+          </td>
+        </tr>
+        </tbody>
+      </nz-table>
+    </nz-collapse-panel>
+  </ng-container>
 </nz-collapse>
 
 <ng-container *ngIf="rawRoster$ | async as roster">
@@ -75,7 +77,7 @@
               <thead>
               <tr>
                 <th>Task</th>
-                <th *ngFor="let character of getCharactersList(display.roster)">
+                <th *ngFor="let character of charactersDisplay$ | async">
                   <div class="character-title">
                     <img src="./assets/icons/classes/class_{{character.class?.toString()?.padStart(2,'0')}}.png" alt=""
                          class="class-icon" *ngIf="character.class !== null">

diff --git a/apps/client/src/app/pages/checklist/checklist/checklist.component.ts b/apps/client/src/app/pages/checklist/checklist/checklist.component.ts
@@ -1,5 +1,5 @@
 import { Component, HostListener } from "@angular/core";
-import { BehaviorSubject, combineLatest, map, Observable, pluck, startWith, tap } from "rxjs";
+import { BehaviorSubject, combineLatest, map, Observable, pluck, startWith } from "rxjs";
 import { LostarkTask } from "../../../model/lostark-task";
 import { TaskFrequency } from "../../../model/task-frequency";
 import { TaskScope } from "../../../model/task-scope";
@@ -34,7 +34,7 @@ export class ChecklistComponent {
   public TaskScope = TaskScope;
 
   public rawRoster$ = this.rosterService.roster$;
-  public forceShowHiddenCharacter = false;
+  public forceShowHiddenCharacter$ = new BehaviorSubject(false);
 
   public categoriesDisplay$ = new LocalStorageBehaviorSubject<{
     dailyCharacter: boolean,
@@ -114,9 +114,10 @@ export class ChecklistComponent {
         hiddenOnCompletion: settings.hiddenOnCompletion
       }))
     ),
-    this.energy$
+    this.energy$,
+    this.forceShowHiddenCharacter$
   ]).pipe(
-    map(([roster, tasks, completion, dailyReset, weeklyReset, biWeeklyReset, settings, energy]) => {
+    map(([roster, tasks, completion, dailyReset, weeklyReset, biWeeklyReset, settings, energy, showHidden]) => {
       const data = tasks
         .map(task => {
           const lazyTracking = settings.lazytracking;
@@ -125,7 +126,9 @@ export class ChecklistComponent {
           const visible = available || editDisabled; // We always display tasks that can't be edited with "Not available today" flag
           const forceDone = (!available && visible); // If task is not available but is visible, we marked it as done
 
-          const completionData = roster.characters.map(character => {
+          const completionData = roster.characters
+            .filter(c => showHidden || !c.isHide)
+            .map(character => {
             return {
               done: Math.min(isTaskDone(
                 task,
@@ -192,17 +195,19 @@ export class ChecklistComponent {
         });
 
       return {
-        roster: roster.characters.map((c, i) => {
-          const done = [...data.dailyCharacter.data, ...data.weeklyCharacter.data].every(
-            (row: { completionData: { doable: boolean, done: number, tracked: boolean }[], task: LostarkTask }) => {
-              const completion = row.completionData[i];
-              return !completion.tracked || !completion.doable || !row.task.enabled || completion.done >= row.task.amount;
-            });
-          return {
-            ...c,
-            done
-          };
-        }),
+        roster: roster.characters
+          .filter(c => showHidden || !c.isHide)
+          .map((c, i) => {
+            const done = [...data.dailyCharacter.data, ...data.weeklyCharacter.data].every(
+              (row: { completionData: { doable: boolean, done: number, tracked: boolean }[], task: LostarkTask }) => {
+                const completion = row.completionData[i];
+                return !completion.tracked || !completion.doable || !row.task.enabled || completion.done >= row.task.amount;
+              });
+            return {
+              ...c,
+              done
+            };
+          }),
         dailyReset,
         weeklyReset,
         biWeeklyReset,
@@ -226,21 +231,34 @@ export class ChecklistComponent {
     startWith({ x: null, y: null })
   );
 
+  public characters$ = combineLatest([this.roster$, this.forceShowHiddenCharacter$]).pipe(
+    map(([roster, forceShowHiddenCharacter]) => {
+      if (forceShowHiddenCharacter) {
+        return roster;
+      }
+      return roster.filter((character) => {
+        return !character.isHide;
+      });
+    })
+  );
+
+  public charactersDisplay$ = combineLatest([this.tableDisplay$, this.forceShowHiddenCharacter$]).pipe(
+    map(([display, forceShowHiddenCharacter]) => {
+      if (forceShowHiddenCharacter) {
+        return display.roster;
+      }
+      return display.roster.filter((character) => {
+        return !character.isHide;
+      });
+    })
+  );
+
   constructor(private rosterService: RosterService, private tasksService: TasksService,
               private settings: SettingsService, private energyService: EnergyService,
               private timeService: TimeService, private completionService: CompletionService) {
     this.setTableHeight();
   }
 
-  public getCharactersList(characters: TaskCharacter[]): TaskCharacter[] {
-    if (this.forceShowHiddenCharacter) {
-      return characters;
-    }
-    return characters.filter((character) => {
-      return !character.isHide && true;
-    });
-  }
-
   @HostListener("window:resize")
   setTableHeight(): void {
     this.windowResize$.next();