added parser title filter

CHANGELOG.md

@@ -13,6 +13,14 @@ All notable changes to this project will be documented in this file.
 * [x] Automatic Preset Updating.
 * [x] Make icons work for Steam parser (with the caveat that they will most likely be overwritten when a developer updates their game).
 
+## 2.3.46
+## Added 
+* Ability to filter apps by parser title in addition to steam category.
+
+### Fixed
+* Significant lag when transitioning from non parser tab to a parser tab, caused by cached controllers templates being destroyed. Fixed by moving them to service.
+* Category Filter options getting cleared after leaving the preview page.
+
 ## 2.3.45
 ### Fixed
 * Bug where controllers couldn't be fetched if user had a custom config whose title was a number (ugh). Credit to emu-deck Discord user emotion for discovering the bug.

src/lang/en-US/langStrings.json

@@ -3,7 +3,8 @@
     "component": {
       "filter": "Filter by title",
       "selectType": "Select artwork type",
-      "selectCategories": "Filter by category",
+      "selectCategories": "Filter by Steam category",
+      "selectParsers": "Filter by parser",
       "selectTypeOptions": {
         "long": "Banners",
         "tall": "Posters",

src/models/language.model.ts

@@ -9,6 +9,7 @@ export interface languageStruct {
       filter: string,
       selectType: string,
       selectCategories: string,
+      selectParsers: string,
       selectTypeOptions: {
         long: string,
         tall: string,

src/renderer/components/preview.component.ts

@@ -33,17 +33,26 @@ export class PreviewComponent implements OnDestroy {
   private filterValue: string = '';
   private categoryFilter: string[] = [];
   private allCategories: string[] = [];
-  private actualCategoryFilter: string[]=[];
+  private actualCategoryFilter: string[] = [];
+  private parserFilter: string[] = [];
+  private allParsers: string[] = [];
+  private actualParserFilter: string[] = [];
   private imageTypes: SelectItem[];
   private scrollingEntries: boolean = false;
   private fileSelector: FileSelector = new FileSelector();
 
   constructor(private previewService: PreviewService, private settingsService: SettingsService, private imageProviderService: ImageProviderService, private changeDetectionRef: ChangeDetectorRef, private renderer: Renderer2, private elementRef: ElementRef) {
     this.previewData = this.previewService.getPreviewData();
     this.previewVariables = this.previewService.getPreviewVariables();
+    if(this.previewService.getPreviewData()) {
+      this.allCategories = this.previewService.getAllCategories();
+      this.allParsers = this.previewService.getAllParsers();
+      this.previewData = this.previewService.getPreviewData();
+    }
     this.subscriptions.add(this.previewService.getPreviewDataChange().subscribe(_.debounce(() => {
 
       this.allCategories = this.previewService.getAllCategories();
+      this.allParsers = this.previewService.getAllParsers();
       this.previewData = this.previewService.getPreviewData();
       this.changeDetectionRef.detectChanges();
     }, 50)));
@@ -83,7 +92,11 @@ export class PreviewComponent implements OnDestroy {
   }
   setCategoryFilter(categories: string[]) {
     this.categoryFilter = categories;
-    this.actualCategoryFilter = categories.map(c=>c.replace(/ /g,' '))
+    this.actualCategoryFilter = categories.map(c=>c.replace(/ /g,' '));
+  }
+  setParserFilter(parsers: string[]) {
+    this.parserFilter= parsers;
+    this.actualParserFilter = parsers.map(p=>p.replace(/ /g,' '));
   }
 
   ngAfterContentInit() {
@@ -352,10 +365,10 @@ export class PreviewComponent implements OnDestroy {
   }
 
   private async exportSelection() {
-    await this.previewService.exportSelection();    
+    await this.previewService.exportSelection();
   }
 
   private async importSelection() {
-    await this.previewService.importSelection();    
+    await this.previewService.importSelection();
   }
 }

src/renderer/services/preview.service.ts

@@ -398,9 +398,16 @@ export class PreviewService {
     this.previewDataChanged.next();
   }
 
+  private union(x: string[],y: string[]) {
+    return _.union(x,y);
+  }
+
   getAllCategories() {
-    const union = (x: string[],y: string[])=>_.union(x,y);
-    return this.previewData ? Object.entries(this.previewData).map(dir=>Object.entries(dir[1]).map(user=>Object.entries(user[1].apps).map(app=>app[1].steamCategories).reduce(union,[])).reduce(union,[])).reduce(union,[]) : [];
+    return this.previewData ? Object.entries(this.previewData).map(dir=>Object.entries(dir[1]).map(user=>Object.entries(user[1].apps).map(app=>app[1].steamCategories).reduce(this.union,[])).reduce(this.union,[])).reduce(this.union,[]) : [];
+  }
+
+  getAllParsers() {
+    return this.previewData ? Object.entries(this.previewData).map(dir=>Object.entries(dir[1]).map(user=>Object.entries(user[1].apps).map(app=>app[1].configurationTitle)).reduce(this.union,[])).reduce(this.union,[]) : [];
   }
 
   // If settingsOnly is true then api filters are not applied

src/renderer/styles/preview.component.scss

@@ -49,12 +49,20 @@
       color: var(--color-preview-text);
     }
     .selectCategories {
+      grid-column: 2;
+      width: 14em;
+      font-size: 1em;
+      margin-right: .75em;
+      color: var(--color-preview-text);
+    }
+    .selectParsers {
       grid-column: 2;
       width: 12em;
       font-size: 1em;
       margin-right: .75em;
       color: var(--color-preview-text);
     }
+
     .slider {
       display: flex;
       align-items: center;

src/renderer/templates/preview.component.html

@@ -7,6 +7,8 @@
     <div>{{appSettings.previewSettings.imageZoomPercentage | number : '1.0-2'}}%</div>
     <ng-select class="selectCategories" [(ngModel)]="categoryFilter" [placeholder]="lang.selectCategories" (ngModelChange)="setCategoryFilter($event);" multiple="true" allowEmpty="true" [values]="allCategories">
     </ng-select>
+    <ng-select class="selectParsers" [(ngModel)]="parserFilter" [placeholder]="lang.selectParsers" (ngModelChange)="setParserFilter($event);" multiple="true" allowEmpty="true" [values]="allParsers">
+    </ng-select>
     <ng-select class="selectType" [(ngModel)]="appSettings.previewSettings.imageTypes" [placeholder]="lang.selectType" (ngModelChange)="appSettings.previewSettings.imageTypes = $event; setImageType($event);" [values]="imageTypes">
     </ng-select>
   </div>
@@ -30,13 +32,13 @@
             <div class="apps">
               <ng-container *ngFor="let appId of previewData[steamDir][steamUser].apps | keys">
                 <ng-container *ngVar="previewData[steamDir][steamUser].apps[appId] as app">
-                  <div class="title" *ngIf="(app.title | fuzzyTest: filterValue) && (app.steamCategories | intersectionTest: actualCategoryFilter)">
+                  <div class="title" *ngIf="(app.title | fuzzyTest: filterValue) && (app.steamCategories | intersectionTest: actualCategoryFilter) &&([app.configurationTitle] | intersectionTest: actualParserFilter)">
                     <span>{{app.title}}</span>
                   </div>
                   <ng-container *ngFor="let imagetype of ['long','tall','hero','logo','icon']">
                     <ng-container *ngVar="getBackgroundImage(app, imagetype) as image">
                       <ng-container *ngVar="getAppImages(app, imagetype) as appimages">
-                        <div class="app" *ngIf="(app.title | fuzzyTest: filterValue) && (app.steamCategories | intersectionTest: actualCategoryFilter)" [style.backgroundImage]="setBackgroundImage(app, image, imagetype) | cssUrl | safeStyle"
+                        <div class="app" *ngIf="(app.title | fuzzyTest: filterValue) && (app.steamCategories | intersectionTest: actualCategoryFilter) && ([app.configurationTitle] | intersectionTest: actualParserFilter)" [style.backgroundImage]="setBackgroundImage(app, image, imagetype) | cssUrl | safeStyle"
                              [class.retrieving]="getImagePool(appimages.imagePool, imagetype).retrieving" [class.noImages]="!getImagePool(appimages.imagePool, imagetype).retrieving && image == undefined"
                              [class.downloading]="image != undefined && image.loadStatus === 'downloading'" [class.failed]="image != undefined && image.loadStatus === 'failed'"
                              [class.imageLoaded]="image != undefined && image.loadStatus === 'done'" (mouseenter)="entries.hoverIndex = app.entryId; entries.hoverType = imagetype;"
@@ -92,7 +94,7 @@
                 <ng-container *ngVar="previewData[steamDir][steamUser].apps[appID] as app">
                   <ng-container *ngVar="getBackgroundImage(app) as image">
                     <ng-container *ngVar="getAppImages(app) as appimages">
-                      <div class="app" *ngIf="(app.title | fuzzyTest: filterValue) && (app.steamCategories | intersectionTest: actualCategoryFilter)" [style.backgroundImage]="setBackgroundImage(app, image) | cssUrl | safeStyle"
+                      <div class="app" *ngIf="(app.title | fuzzyTest: filterValue) && (app.steamCategories | intersectionTest: actualCategoryFilter) && ([app.configurationTitle] | intersectionTest: actualParserFilter)" [style.backgroundImage]="setBackgroundImage(app, image) | cssUrl | safeStyle"
                            [class.retrieving]="getImagePool(appimages.imagePool).retrieving" [class.noImages]="!getImagePool(appimages.imagePool).retrieving && image == undefined"
                            [class.downloading]="image != undefined && image.loadStatus === 'downloading'" [class.failed]="image != undefined && image.loadStatus === 'failed'"
                            [class.imageLoaded]="image != undefined && image.loadStatus === 'done'" (mouseenter)="entries.hoverIndex = app.entryId"