Add sort by control to filters side panel

SteamGridDB · Jun 14, 2024 · 7d9ac35 · 7d9ac35
1 parent c7992ee
commit 7d9ac35
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 18 deletions.
diff --git a/src/renderer/components/preview.component.ts b/src/renderer/components/preview.component.ts
@@ -38,6 +38,7 @@ export class PreviewComponent implements OnDestroy {
   allParsers: string[] = [];
   actualParserFilter: string[] = [];
   artworkSelectTypes: SelectItem[];
+  sortBySelectTypes: SelectItem[];
   scrollingEntries: boolean = false;
   fileSelector: FileSelector = new FileSelector();
   CLI_MESSAGE: BehaviorSubject<string> = new BehaviorSubject("");
@@ -95,6 +96,11 @@ export class PreviewComponent implements OnDestroy {
     this.artworkSelectTypes = artworkViewTypes.map((artworkViewType: ArtworkViewType) => {
       return {value: artworkViewType, displayValue: artworkViewNames[artworkViewType]}
     });
+    this.sortBySelectTypes = [
+      {value: 'extractedTitle', displayValue: 'Extracted Title'},
+      {value: 'title', displayValue: 'Final Title'},
+      {value: 'configurationTitle', displayValue: 'Parser'}
+    ];
     this.activatedRoute.queryParamMap.subscribe((paramContainer: any)=> {
       let params = ({...paramContainer} as any).params;
       if(params['cliMessage']) {

diff --git a/src/renderer/templates/preview.component.html b/src/renderer/templates/preview.component.html
@@ -22,7 +22,7 @@ <h1>Add your games to Steam</h1>
     <div class="fake-btn" (click)="generatePreviewData()">Parse</div>
   </div>
   <div class="upperMenu" *ngIf="previewVariables.numberOfListItems > 0">
-    <div class="filtersButton" (click)="toggleFilters()">Filters</div>
+    <div class="filtersButton" (click)="toggleFilters()">View Options</div>
     <div class="title" *ngIf="showDetails">
       <span>Fix Match</span>
     </div>
@@ -73,6 +73,22 @@ <h1>Add your games to Steam</h1>
       </div>
     </div>
   </div>
+  <div class="upper detailsUpper" *ngIf="showDetails">
+    <div class="upperTitle">
+      <span>{{ detailsApp ? niceAppTitle(detailsApp.app) : "" }}</span>
+    </div>
+    <div class="buttonGroup">
+      <div class="upperButton dangerousButton" (click)="closeDetails()">
+        <span>Cancel</span>
+      </div>
+      <div class="upperButton dangerousButton" (click)="deleteExceptionDetails()">
+        <span>Reset</span>
+      </div>
+      <div class="upperButton" (click)="saveDetails()">
+        <span>Save and close</span>
+      </div>
+    </div>
+  </div>
   <div class="detailsLower">
     <div class="loadingSpinner" *ngIf="detailsLoading"></div>
     <ng-container *ngIf="!detailsLoading">
@@ -158,22 +174,6 @@ <h1>Add your games to Steam</h1>
       </ng-container>
     </ng-container>
   </div>
-  <div class="upper detailsUpper" *ngIf="showDetails">
-    <div class="upperTitle">
-      <span>{{ detailsApp ? niceAppTitle(detailsApp.app) : "" }}</span>
-    </div>
-    <div class="buttonGroup">
-      <div class="upperButton dangerousButton" (click)="closeDetails()">
-        <span>Cancel</span>
-      </div>
-      <div class="upperButton dangerousButton" (click)="deleteExceptionDetails()">
-        <span>Reset</span>
-      </div>
-      <div class="upperButton" (click)="saveDetails()">
-        <span>Save and close</span>
-      </div>
-    </div>
-  </div>
   <div class="upper listImagesUpper" *ngIf="getCurrentViewType()=='list' && currentApp && showListImages">
     <div class="upperTitle">
       <span>{{currentApp ? niceAppTitle(currentApp.app) : ""}}</span>
@@ -248,12 +248,23 @@ <h1>Add your games to Steam</h1>
       </ng-container>
     </div>
   </div>
-
   <div class="urls" *ngIf="previewVariables.numberOfQueriedImages">
     <div class="stopButton" (click)="stopImageRetrieving()">{{ lang.stopUrlRetrieving }}</div>
     <div class="imageCounter">{{ lang.remainingImages }} {{ previewVariables.numberOfQueriedImages }}</div>
   </div>
   <div class="filters" *ngIf="showFilters">
+    <div class="filtergroup">
+      <div class="filterLabel">
+        <span>Sort games by</span>
+      </div>
+      <ng-select
+        class="selectSortBy"
+        [(ngModel)]="listSortBy"
+        [multiple]="false"
+        [allowEmpty]="false"
+        [values]="sortBySelectTypes"
+      ></ng-select>
+    </div>
     <div class="filtergroup">
       <div class="filterLabel">
         <span>Filter by Steam category</span>