Make craftedWildCardFilter use CSV and add popup (#570)

* Make craftedWildCardFilter use CSV and add popup - Modified filterPatternName so it can accept comma separated values. This will allow the user to enter specific names such as "THE CALL" or multiple values such as "THE CALL,NO HESITATION". Note that the input is always lowercased for comparisons. - make the user interface include a popup that allows default values for the craftedWildCardFilter. Also include a button to clear the field. Make the text field a bit wider to more easily enter multiple values. - populate craftedWildCardFilter popup menu with "current seasonal" and "ghost" options. - update package.json version number * update version --------- Co-authored-by: John Hunkins <[email protected]>
dcaslin · Jul 7, 2024 · 0ac17cd · 0ac17cd
1 parent 44464bf
commit 0ac17cd
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 7 deletions.
diff --git a/src/app/player/triumphs/special-triumph-list/special-triumph-list.component.html b/src/app/player/triumphs/special-triumph-list/special-triumph-list.component.html
@@ -9,7 +9,7 @@ <h4 class="triumph-score">{{title$|async}}
                     </mat-checkbox>
                 </ng-container>
                 <ng-container *ngIf="o.showCrafted">
-                    
+
                     <mat-form-field class="margin-left-10">
                         <mat-label>Filter</mat-label>
                         <mat-select [(ngModel)]="craftedFilter">
@@ -20,9 +20,20 @@ <h4 class="triumph-score">{{title$|async}}
 
                         </mat-select>
                     </mat-form-field>
-                    <mat-form-field class="margin-left-10">
-                        <mat-label>Search Patterns By Name</mat-label>
-                        <input matInput [(ngModel)]="craftedWildCardFilter" placeholder="Search Patterns By Name">
+                    <mat-form-field class="margin-left-10" [style.width.px]=375>
+                        <mat-label>Search Patterns By Name (single or comma separated names)</mat-label>
+                        <input matInput [(ngModel)]="craftedWildCardFilter" [matAutocomplete]="auto" type="text"
+                            placeholder="Search Patterns By Name (single or comma separated names)">
+                        <button mat-button *ngIf="craftedWildCardFilter" matSuffix mat-icon-button aria-label="Clear"
+                            (click)="craftedWildCardFilter=''">
+                            <mat-icon>close</mat-icon>
+                        </button>
+                        <mat-autocomplete #auto="matAutocomplete">
+                            <mat-option *ngFor="let i of craftedWildCardFilterChoice" [value]="i.value"
+                                [disabled]="i.value==null">
+                                {{i.name}}
+                            </mat-option>
+                        </mat-autocomplete>
                     </mat-form-field>
                 </ng-container>
             </h4>
@@ -77,12 +88,12 @@ <h4 class="triumph-score">{{title$|async}}
                                                                         class="normal-weight">Level {{obj.level}}</span>:
                                                                     {{obj.percent|number : '1.0-0'}}% tnl
                                                                     <br>{{obj.date|date:'shortDate'}}</div>
-                                                            </div>                                                        
+                                                            </div>
                                                         </div>
                                                     </ng-container>
                                                 </div>
                                                 <div *ngIf="!t.complete && t.redborder.length>0">
-                                                    <span class="crafted-text">{{t.redborder.length}} Deepsight held to attune.</span>                                                    
+                                                    <span class="crafted-text">{{t.redborder.length}} Deepsight held to attune.</span>
                                                 </div>
                                             </ng-container>
                                         </div>

diff --git a/src/app/player/triumphs/special-triumph-list/special-triumph-list.component.ts b/src/app/player/triumphs/special-triumph-list/special-triumph-list.component.ts
@@ -52,6 +52,16 @@ export class SpecialTriumphListComponent extends ChildComponent {
   public showCrafted$: BehaviorSubject<boolean> = new BehaviorSubject(false);
   public craftedFilter = 'TODO';
   public craftedWildCardFilter = '';
+  public craftedWildCardFilterChoice = [
+    {
+      name: 'current seasonal',
+      value: 'LOST SIGNAL,ILL OMEN,FAITH-KEEPER,TIMEWORN WAYFARER,VEILED THREAT,SIGHTLINE SURVEY',
+    },
+    {
+      name: 'ghost',
+      value: 'THE CALL,NO HESITATION,SOMEDAY,EMBRACED IDENTITY,PRO MEMORIA,FALSE IDOLS,BOLD ENDINGS,AXIAL LACUNA',
+    }
+  ]
   public craftedFilterChoices = [
     {
       name: 'Todo (Not Crafted + Incomplete)',
@@ -120,7 +130,14 @@ export class SpecialTriumphListComponent extends ChildComponent {
     if (this.craftedWildCardFilter == '') {
       return true;
     }
-    return t.name.toLowerCase().includes(this.craftedWildCardFilter.toLowerCase());
+    var found = false
+    for (const [_, value] of this.craftedWildCardFilter.toLowerCase().split(",").entries()) {
+      if (value != '' && t.name.toLowerCase().includes(value)) {
+        found = true
+        break
+      }
+    }
+    return found
   }
 
   public shouldShow(t: TriumphRecordNode): boolean {