excludes in list view and sorting in list view

SteamGridDB · May 25, 2024 · 5def46b · 5def46b
1 parent 1a4d1ac
commit 5def46b
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 39 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,7 +1,16 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
-## 2.5.0
+## 2.5.3
+### Added
+* Ability to sort by each column in list view
+* Excludes working from list view.
+
+## 2.5.2
+### Fixed
+* Reduce empty list without intializer bug
+
+## 2.5.1
 ### Added
 * Ability to set Proton version per parser [TODO]
 * Ability to prioritize artwork by certain authors [TODO]

diff --git a/src/lang/en-US/langStrings.json b/src/lang/en-US/langStrings.json
@@ -18,13 +18,13 @@
       "saveImage": "Save image to file",
       "addLocalImages": "Add local images",
       "retryDownload": "Retry download",
-      "generateAppList": "Parse",
+      "generateAppList": "Refresh",
       "saveAppList": "Save to Steam",
       "removeAppList": "Remove from Steam",
       "remainingImages": "Retrieving urls:",
       "stopUrlRetrieving": "Stop",
-      "exportSelections": "Export settings",
-      "importSelections": "Import settings",
+      "exportSelections": "Export art",
+      "importSelections": "Import art",
       "backButton": "Back",
       "logButton": "Log"
     },

diff --git a/src/renderer/components/preview.component.ts b/src/renderer/components/preview.component.ts
@@ -46,6 +46,7 @@ export class PreviewComponent implements OnDestroy {
     appId: string
   }
   listImagesArtworkType: ArtworkType = 'tall';
+  listSortBy: string = 'extractedTitle';
   showListImages: boolean = false;
   detailsApp: {
     app: PreviewDataApp,
@@ -373,6 +374,7 @@ export class PreviewComponent implements OnDestroy {
     }
   }
   changeAppDetails(app: PreviewDataApp, steamDirectory: string, userId: string, appId: string) {
+    this.cancelExcludes();
     this.closeListImages();
     this.detailsLoading = true;
     this.showDetails= true;
@@ -406,6 +408,7 @@ export class PreviewComponent implements OnDestroy {
 
   openListImages(app: PreviewDataApp, steamDir: string, userId: string, appId: string) {
     this.closeDetails();
+    this.cancelExcludes();
     this.showListImages = true;
     this.renderer.setStyle(this.elementRef.nativeElement, '--list-images-width', '50%', RendererStyleFlags2.DashCase);
     this.currentApp={
@@ -534,6 +537,8 @@ export class PreviewComponent implements OnDestroy {
   }
 
   showExclusions() {
+    this.closeDetails();
+    this.closeListImages();
     this.showExcludes = true;
   }
 
@@ -639,7 +644,13 @@ export class PreviewComponent implements OnDestroy {
   }
 
   sortedAppIds(apps: PreviewDataApps) {
-    return Object.keys(apps).sort((a,b)=>apps[a].title.localeCompare(apps[b].title))
+    if(this.listSortBy=='extractedTitle') {
+      return Object.keys(apps).sort((a,b)=>apps[a].extractedTitle.localeCompare(apps[b].title))
+    } else if(this.listSortBy=='finalTitle') {
+      return Object.keys(apps).sort((a,b)=>apps[a].title.localeCompare(apps[b].title))
+    } else if(this.listSortBy=='configurationTitle') {
+      return Object.keys(apps).sort((a,b)=>apps[a].configurationTitle.localeCompare(apps[b].title))
+    }
   }
 
   async exportSelection() {

diff --git a/src/renderer/services/preview.service.ts b/src/renderer/services/preview.service.ts
@@ -698,7 +698,7 @@ export class PreviewService {
         const parserEnabledProviders = imageByPool.parserEnabledProviders;
         const imageProvidersForKey: OnlineProviderType[] = _.intersection(parserEnabledProviders, this.appSettings.enabledProviders);
         this.previewVariables.numberOfQueriedImages += imageProvidersForKey.map((provider)=> imageByProvider[provider].searchQueries.length).reduce((x,y)=>x+y);
-        let retrievingByProvider = {sgdb: true, steamCDN: true}
+        let retrievingByProvider = {sgdb: imageByPool.parserEnabledProviders.includes('sgdb'), steamCDN: imageByPool.parserEnabledProviders.includes('steamCDN')}
         for(let provider of imageProvidersForKey) {
           const image = imageByProvider[provider];
           if (image !== undefined && image.searchQueries.length) {

diff --git a/src/renderer/styles/ng-select.component.scss b/src/renderer/styles/ng-select.component.scss
@@ -77,7 +77,7 @@
       border-style: solid;
       border-color: inherit;
 
-      max-height: 274px;
+      max-height: 300px;
 
       @include webkitScrollbar(ng-select-scrollbar);
     }

diff --git a/src/renderer/styles/preview.component.scss b/src/renderer/styles/preview.component.scss
@@ -130,6 +130,7 @@
       font-size: 1em;
       margin-right: 0.75em;
       color: var(--color-preview-text);
+
     }
 
     .slider {
@@ -159,15 +160,21 @@
   }
 
   .lowerMenu {
-    display: flex;
+    display: grid;
     overflow-y: auto;
     border: 0.5em solid transparent;
     background-color: var(--color-preview-menu-background);
-
     align-items: center;
     grid-area: lowerMenu;
-
-    > div {
+    grid-template-areas: "lowerLeft . lowerRight";
+    grid-template-columns: auto 1fr auto;
+    .lowerLeft {
+      grid-area: lowerLeft;
+    }
+    .lowerRight {
+      grid-area: lowerRight;
+    }
+    .button {
       @include button();
       @include clickButtonColor(click-button);
       margin: 0 0.25em;
@@ -482,14 +489,29 @@
             color: var(--color-preview-text);
             border-top: solid 1px var(--color-preview-user-background);      
             border-bottom: solid 1px var(--color-preview-user-background);
-
+            &.showExcludes {
+              background-color: var(--color-ng-select-option-background-hover);
+              color: var(--color-ng-select-option-text-hover);
+            }
+            &.showExcludes.isExcluded {
+              opacity: 0.3;
+            }
             > .infoField {
               height: 50px;
               display: flex;
               align-items: center;
               padding-left: 1em;
               border-left: solid 1px var(--color-preview-user-background);
               border-right: solid 1px var(--color-preview-user-background);
+              ng-toggle-button {
+                @include ngToggleButtonColor(ng-toggle-button);
+                font-size: 1em;
+                margin: 0.25em 0 0.25em 0;
+              }
+              &.sortBy {
+                background-color: var(--color-ng-select-option-background-hover);
+                color: var(--color-ng-select-option-text-hover);
+              }
             }
             &:hover:not(.header), &.current {
               background-color: var(--color-ng-select-option-background-hover);

diff --git a/src/renderer/templates/preview.component.html b/src/renderer/templates/preview.component.html
@@ -232,9 +232,9 @@ <h1>Add your games to Steam</h1>
             <div class="apps">
               <ng-container *ngIf="getCurrentViewType()==='list'">
               <div class="listItem header">
-                <div class="infoField"><span>Extracted Title</span></div>
-                <div class="infoField"><span>Final Title</span></div>
-                <div class="infoField"><span>Parser</span></div>
+                <div class="infoField" (click)="listSortBy='extractedTitle'" [class.sortBy]="listSortBy=='extractedTitle'"><span>Extracted Title</span></div>
+                <div class="infoField" (click)="listSortBy='finalTitle'" [class.sortBy]="listSortBy=='finalTitle'"><span>Final Title</span></div>
+                <div class="infoField" (click)="listSortBy='configurationTitle'" [class.sortBy]="listSortBy=='configurationTitle'"><span>Parser</span></div>
               </div>
               </ng-container>
               <ng-container *ngFor="let appId of sortedAppIds(previewData[steamDir][steamUser].apps)">
@@ -429,7 +429,13 @@ <h1>Add your games to Steam</h1>
                     <div class="listItem"
                     *ngIf="isAppVisible(app)"
                     [class.current]="currentApp && currentApp.appId==appId"
-                    (click)="openListImages(app, steamDir, steamUser,appId)"
+                    [class.showExcludes]="showExcludes"
+                    [class.isExcluded]="
+                          !!excludedAppIds[steamDir] &&
+                          !!excludedAppIds[steamDir][steamUser] &&
+                          !!excludedAppIds[steamDir][steamUser][appId]
+                    "
+                    (click)="showExcludes ? excludeAppId(steamDir, steamUser, appId) : openListImages(app, steamDir, steamUser,appId)"
                     >
                       <div class="infoField">
                         <span>{{app.extractedTitle}}</span>
@@ -621,13 +627,18 @@ <h1>Add your games to Steam</h1>
     class="lowerMenu not-emudeck"
     *ngIf="previewVariables.listHasGenerated && previewVariables.numberOfListItems !== 0"
   >
-    <div (click)="generatePreviewData()">{{ lang.generateAppList }}</div>
+
     <ng-container *ngIf="previewVariables.numberOfListItems !== 0">
-      <div (click)="save()">{{ lang.saveAppList }}</div>
-      <div class="dangerousButton" (click)="remove()">{{ lang.removeAppList }}</div>
-      <div (click)="exportSelection()" [attr.title]="'Export image choices'">{{ lang.exportSelections }}</div>
-      <div (click)="importSelection()" [attr.title]="'Import image choices'">{{ lang.importSelections }}</div>
-      <div (click)="showExclusions()" *ngIf="!this.detailsApp">{{ "Exclude" }}</div>
+      <div class="lowerLeft">
+        <div class="button" (click)="generatePreviewData()">{{ lang.generateAppList }}</div>
+        <div class="button" (click)="save()">{{ lang.saveAppList }}</div>
+        <div class="button dangerousButton" (click)="remove()">{{ lang.removeAppList }}</div>
+      </div>
+      <div class="lowerRight">
+        <div class="button" (click)="exportSelection()" [attr.title]="'Export image choices'">{{ lang.exportSelections }}</div>
+        <div class="button" (click)="importSelection()" [attr.title]="'Import image choices'">{{ lang.importSelections }}</div>
+        <div class="button" (click)="showExclusions()">{{ "Exclude Games" }}</div>
+      </div>
     </ng-container>
     <div
       class="only-emudeck"
@@ -649,25 +660,25 @@ <h1>Add your games to Steam</h1>
   </div>
   <div class="lowerMenu only-emudeck" *ngIf="!showExcludes">
     <ng-container *ngIf="previewVariables.listHasGenerated && previewVariables.numberOfListItems !== 0">
-      <div class="only-emudeck" (click)="generatePreviewData()">Refresh</div>
-      <div (click)="save()">{{ lang.saveAppList }}</div>
-      <div class="dangerousButton" (click)="remove()">{{ lang.removeAppList }}</div>
-      <div class="not-emudeck" (click)="exportSelection()" [attr.title]="'Export image choices'">
-        {{ lang.exportSelections }}
+      <div class="lowerLeft">
+        <div class="button" (click)="generatePreviewData()">{{lang.generateAppList}}</div>
+        <div class="button" (click)="save()">{{ lang.saveAppList }}</div>
+        <div class="button dangerousButton" (click)="remove()">{{ lang.removeAppList }}</div>
       </div>
-      <div class="not-emudeck" (click)="importSelection()" [attr.title]="'Import image choices'">
-        {{ lang.importSelections }}
+      <div class="lowerRight">
+        <div class="button" (click)="showExclusions()">{{ "Exclude Games" }}</div>
+        <div
+        class="button"
+        routerLink="/logger"
+        routerLinkActive="active"
+        [routerLinkActiveOptions]="{ exact: true }"
+        *ngIf="previewVariables.numberOfListItems !== 0"
+      >
+        Log
+      </div>
+      <div class="button" routerLink="/parsers-list" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Back</div>
       </div>
-      <div (click)="showExclusions()" *ngIf="!this.detailsApp">{{ "Exclude Games" }}</div>
     </ng-container>
-    <div
-      routerLink="/logger"
-      routerLinkActive="active"
-      [routerLinkActiveOptions]="{ exact: true }"
-      *ngIf="previewVariables.numberOfListItems !== 0"
-    >
-      Log
-    </div>
-    <div routerLink="/parsers-list" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Back</div>
+
   </div>
 </ng-container>