IsEmpty Filter and other small fixes (#3142)

Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>

UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html

@@ -712,12 +712,16 @@
             <li [ngbNavItem]="tabs[TabID.Tasks]">
               <a ngbNavLink>{{t(tabs[TabID.Tasks])}}</a>
               <ng-template ngbNavContent>
-                @for(task of tasks; track task.action) {
-                  <div class="mt-3 mb-3">
-                    <app-setting-button [subtitle]="task.description">
-                      <button class="btn btn-{{task.action === Action.Delete ? 'danger' : 'secondary'}} btn-sm mb-2" (click)="runTask(task)">{{task.title}}</button>
-                    </app-setting-button>
-                  </div>
+                @if (accountService.currentUser$ | async; as user) {
+                  @for(task of tasks; track task.action) {
+                    @if (accountService.canInvokeAction(user, task.action)) {
+                      <div class="mt-3 mb-3">
+                        <app-setting-button [subtitle]="task.description">
+                          <button class="btn btn-{{task.action === Action.Delete ? 'danger' : 'secondary'}} btn-sm mb-2" (click)="runTask(task)">{{task.title}}</button>
+                        </app-setting-button>
+                      </div>
+                    }
+                  }
                 }
               </ng-template>
             </li>

UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts

@@ -12,7 +12,7 @@ import {
   Input,
   OnChanges,
   OnInit,
-  Output,
+  Output, SimpleChange, SimpleChanges,
   TemplateRef,
   TrackByFunction,
   ViewChild
@@ -153,13 +153,21 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
   }
 
 
-  ngOnChanges(): void {
+  ngOnChanges(changes: SimpleChanges): void {
     this.jumpBarKeysToRender = [...this.jumpBarKeys];
     this.resizeJumpBar();
 
     const startIndex = this.jumpbarService.getResumePosition(this.router.url);
     if (startIndex > 0) {
       setTimeout(() => this.virtualScroller.scrollToIndex(startIndex, true, 0, ANIMATION_TIME_MS), 10);
+      return;
+    }
+
+    if (changes.hasOwnProperty('isLoading')) {
+      const loadingChange = changes['isLoading'] as SimpleChange;
+      if (loadingChange.previousValue === true && loadingChange.currentValue === false) {
+        setTimeout(() => this.virtualScroller.scrollToIndex(0, true, 0, ANIMATION_TIME_MS), 10);
+      }
     }
   }
 

UI/Web/src/app/cards/card-item/card-item.component.html

@@ -73,22 +73,28 @@
     </div>
     @if (title.length > 0 || actions.length > 0) {
       <div class="card-title-container">
-        <div>
-          <span class="card-title" placement="top" id="{{title}}_{{entity.id}}" [ngbTooltip]="tooltipTitle" (click)="handleClick($event)" tabindex="0">
-            <app-promoted-icon [promoted]="isPromoted()"></app-promoted-icon>
-            <app-series-format [format]="format"></app-series-format>
-            @if (linkUrl) {
-              <a class="dark-exempt btn-icon" href="javascript:void(0);" [routerLink]="linkUrl">{{title}}</a>
-            } @else {
-              {{title}}
-            }
-          </span>
-          @if (actions && actions.length > 0) {
-            <span class="card-actions float-end">
-              <app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="title"></app-card-actionables>
-            </span>
+        @if (showFormat) {
+          <app-series-format [format]="format"></app-series-format>
+        }
+
+        <span class="card-title" placement="top" id="{{title}}_{{entity.id}}" [ngbTooltip]="tooltipTitle" (click)="handleClick($event)" tabindex="0">
+          @if (isPromoted(); as isPromoted) {
+            <span class="me-1"><app-promoted-icon [promoted]="isPromoted"></app-promoted-icon></span>
           }
-        </div>
+          @if (linkUrl) {
+            <a class="dark-exempt btn-icon" href="javascript:void(0);" [routerLink]="linkUrl">{{title}}</a>
+          } @else {
+            {{title}}
+          }
+        </span>
+
+        @if (actions && actions.length > 0) {
+          <span class="card-actions">
+            <app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="title"></app-card-actionables>
+          </span>
+        } @else {
+        }
+
       </div>
     }
   </div>

UI/Web/src/app/cards/card-item/card-item.component.scss

@@ -1 +1,5 @@
 @use '../../../card-item-common';
+
+.card-title-container {
+  justify-content: center;
+}

UI/Web/src/app/cards/card-item/card-item.component.ts

@@ -149,6 +149,10 @@ export class CardItemComponent implements OnInit {
    * A method that if defined will return the url
    */
   @Input() linkUrl?: string;
+  /**
+   * Show the format of the series
+   */
+  @Input() showFormat: boolean = true;
   /**
    * Event emitted when item is clicked
    */

UI/Web/src/app/cards/chapter-card/chapter-card.component.html

@@ -73,21 +73,21 @@
 
 
     <div class="card-title-container">
-        <span class="card-title" id="{{chapter.id}}" tabindex="0" [ngbTooltip]="chapter.isSpecial ? (chapter.title || chapter.range) : null">
-          <a class="dark-exempt btn-icon" routerLink="/library/{{libraryId}}/series/{{seriesId}}/chapter/{{chapter.id}}">
-            @if (chapter.isSpecial) {
-             {{chapter.title || chapter.range}}
-            } @else {
-              <app-entity-title [entity]="chapter" [prioritizeTitleName]="false"></app-entity-title>
-            }
-          </a>
-        </span>
+      <span class="card-title" id="{{chapter.id}}" tabindex="0" [ngbTooltip]="chapter.isSpecial ? (chapter.title || chapter.range) : null">
+        <a class="dark-exempt btn-icon" routerLink="/library/{{libraryId}}/series/{{seriesId}}/chapter/{{chapter.id}}">
+          @if (chapter.isSpecial) {
+           {{chapter.title || chapter.range}}
+          } @else {
+            <app-entity-title [entity]="chapter" [prioritizeTitleName]="false"></app-entity-title>
+          }
+        </a>
+      </span>
 
-        @if (actions && actions.length > 0) {
-          <span class="card-actions float-end">
-            <app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="chapter.titleName"></app-card-actionables>
-          </span>
-        }
+      @if (actions && actions.length > 0) {
+        <span class="card-actions">
+          <app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="chapter.titleName"></app-card-actionables>
+        </span>
+      }
     </div>
 
   </div>

UI/Web/src/app/cards/series-card/series-card.component.html

@@ -62,15 +62,15 @@
     </div>
 
     <div class="card-title-container">
-        <span class="card-title" [ngbTooltip]="series.name" id="{{series.id}}">
-          <app-series-format [format]="series.format"></app-series-format>
-          <a class="dark-exempt btn-icon ms-1" routerLink="/library/{{libraryId}}/series/{{series.id}}">
-            {{series.name}}
-          </a>
-        </span>
+      <app-series-format [format]="series.format"></app-series-format>
+      <span class="card-title" [ngbTooltip]="series.name" id="{{series.id}}">
+        <a class="dark-exempt btn-icon" routerLink="/library/{{libraryId}}/series/{{series.id}}">
+          {{series.name}}
+        </a>
+      </span>
 
       @if (actions && actions.length > 0) {
-        <span class="card-actions float-end">
+        <span class="card-actions">
             <app-card-actionables (actionHandler)="handleSeriesActionCallback($event, series)" [actions]="actions" [labelBy]="series.name"></app-card-actionables>
         </span>
       }

UI/Web/src/app/cards/volume-card/volume-card.component.html

@@ -60,15 +60,16 @@
 
     <div class="card-title-container">
       <span class="card-title" id="{{volume.id}}" tabindex="0">
-      <a class="dark-exempt btn-icon" routerLink="/library/{{libraryId}}/series/{{seriesId}}/volume/{{volume.id}}">
-        {{volume.name}}
-      </a>
+        <a class="dark-exempt btn-icon" routerLink="/library/{{libraryId}}/series/{{seriesId}}/volume/{{volume.id}}">
+          {{volume.name}}
+        </a>
       </span>
-        @if (actions && actions.length > 0) {
-          <span class="card-actions float-end">
-            <app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="volume.name"></app-card-actionables>
-          </span>
-        }
+
+      @if (actions && actions.length > 0) {
+        <span class="card-actions">
+          <app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="volume.name"></app-card-actionables>
+        </span>
+      }
     </div>