fix search in sound settings (closes #13)

dominikks · Nov 6, 2023 · 011434e · 011434e
1 parent 5f6a2bf
commit 011434e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/frontend/src/app/settings/sound-manager/sound-manager.component.html b/frontend/src/app/settings/sound-manager/sound-manager.component.html
@@ -26,10 +26,10 @@
     </div>
   </mat-toolbar>
 
-  <cdk-virtual-scroll-viewport *ngIf="sounds().length > 0; else noSounds" class="sound-scroller" itemSize="48">
+  <cdk-virtual-scroll-viewport *ngIf="filteredSounds().length > 0; else noSounds" class="sound-scroller" itemSize="48">
     <mat-accordion class="sound-list">
       <app-sound-details
-        *cdkVirtualFor="let sound of sounds(); trackBy: trackById"
+        *cdkVirtualFor="let sound of filteredSounds(); trackBy: trackById"
         [soundEntry]="sound"
         [isBusy]="isProcessing() || isSaving()"
         [isPlaying]="currentAudio() != null"
@@ -41,9 +41,9 @@
   </cdk-virtual-scroll-viewport>
 
   <ng-template #noSounds>
-    <div class="message-container">
-      <ng-container *ngIf="soundFilterString()">There are no sounds matching your filter.</ng-container>
-      <ng-container *ngIf="soundFilterString().length === 0"
+    <div class="message-container" [ngSwitch]="sounds().length === 0">
+      <ng-container *ngSwitchCase="false">There are no sounds matching your filter.</ng-container>
+      <ng-container *ngSwitchCase="true"
         >There are no sounds on this server. You can add some by pressing the add button above.</ng-container
       >
     </div>

diff --git a/frontend/src/app/settings/sound-manager/sound-manager.component.ts b/frontend/src/app/settings/sound-manager/sound-manager.component.ts
@@ -39,16 +39,29 @@ export class SoundManagerComponent {
     return sounds.filter(sound => sound.hasChanges());
   });
 
+  readonly soundsFuse = computed(() => {
+    const sounds = this.sounds();
+
+    return new Fuse(sounds, {
+      keys: ['name', 'category'],
+      getFn: (obj, path) => {
+        const sound = obj.sound();
+        if (Array.isArray(path)) return path.map(p => sound[p]);
+        else return sound[path];
+      },
+    });
+  });
+
   readonly soundFilterString = signal('');
   readonly filteredSounds = computed(() => {
     const filterText = this.soundFilterString();
-    const sounds = this.sounds();
 
     if (filterText.length > 0) {
-      const fuse = new Fuse(sounds, { keys: ['sound.name', 'sound.category'] });
-      return fuse.search(filterText).map(res => res.item);
+      return this.soundsFuse()
+        .search(filterText)
+        .map(res => res.item);
     } else {
-      return sounds;
+      return this.sounds();
     }
   });