MAL Interest Stacks (#2932)

UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.html

@@ -48,51 +48,53 @@
         </ng-template>
       </li>
 
-      <li [ngbNavItem]="TabID.Series">
-        <a ngbNavLink>{{t(TabID.Series)}}</a>
-        <ng-template ngbNavContent>
-          @if (!isLoading) {
-            <div class="list-group">
-              <form [formGroup]="formGroup">
-                <div class="row g-0 mb-3">
-                  <div class="col-md-12">
-                    <label for="filter" class="visually-hidden">{{t('filter-label')}}</label>
-                    <div class="input-group">
-                      <input id="filter" type="text" class="form-control" [placeholder]="t('filter-label')" formControlName="filter" />
+      @if (tag.source === ScrobbleProvider.Kavita) {
+        <li [ngbNavItem]="TabID.Series">
+          <a ngbNavLink>{{t(TabID.Series)}}</a>
+          <ng-template ngbNavContent>
+            @if (!isLoading) {
+              <div class="list-group">
+                <form [formGroup]="formGroup">
+                  <div class="row g-0 mb-3">
+                    <div class="col-md-12">
+                      <label for="filter" class="visually-hidden">{{t('filter-label')}}</label>
+                      <div class="input-group">
+                        <input id="filter" type="text" class="form-control" [placeholder]="t('filter-label')" formControlName="filter" />
+                      </div>
                     </div>
                   </div>
+                </form>
+                <div class="form-check">
+                  <input id="select-all" type="checkbox" class="form-check-input" [disabled]="tag.source !== ScrobbleProvider.Kavita"
+                         [ngModel]="selectAll" (change)="toggleAll()" [indeterminate]="hasSomeSelected">
+                  <label for="select-all" class="form-check-label">{{selectAll ? t('deselect-all') : t('select-all')}}</label>
                 </div>
-              </form>
-              <div class="form-check">
-                <input id="select-all" type="checkbox" class="form-check-input" [disabled]="tag.source !== ScrobbleProvider.Kavita"
-                       [ngModel]="selectAll" (change)="toggleAll()" [indeterminate]="hasSomeSelected">
-                <label for="select-all" class="form-check-label">{{selectAll ? t('deselect-all') : t('select-all')}}</label>
-              </div>
-              <ul>
-                @for (item of series | filter: filterList; let i = $index; track item.id) {
-                  <li class="list-group-item">
-                    <div class="form-check">
-                      <input id="series-{{i}}" type="checkbox" class="form-check-input" [disabled]="tag.source !== ScrobbleProvider.Kavita"
-                             [ngModel]="selections.isSelected(item)" (change)="handleSelection(item)">
-                      <label for="series-{{i}}" class="form-check-label">{{item.name}} ({{libraryName(item.libraryId)}})</label>
-                    </div>
-                  </li>
+                <ul>
+                  @for (item of series | filter: filterList; let i = $index; track item.id) {
+                    <li class="list-group-item">
+                      <div class="form-check">
+                        <input id="series-{{i}}" type="checkbox" class="form-check-input" [disabled]="tag.source !== ScrobbleProvider.Kavita"
+                               [ngModel]="selections.isSelected(item)" (change)="handleSelection(item)">
+                        <label for="series-{{i}}" class="form-check-label">{{item.name}} ({{libraryName(item.libraryId)}})</label>
+                      </div>
+                    </li>
+                  }
+                </ul>
+                @if (pagination && series.length !== 0 && pagination.totalPages > 1) {
+                  <div class="d-flex justify-content-center">
+                    <ngb-pagination
+                      [(page)]="pagination.currentPage"
+                      [pageSize]="pagination.itemsPerPage"
+                      (pageChange)="onPageChange($event)"
+                      [rotate]="false" [ellipses]="false" [boundaryLinks]="true"
+                      [collectionSize]="pagination.totalItems"></ngb-pagination>
+                  </div>
                 }
-              </ul>
-              @if (pagination && series.length !== 0 && pagination.totalPages > 1) {
-                <div class="d-flex justify-content-center">
-                  <ngb-pagination
-                    [(page)]="pagination.currentPage"
-                    [pageSize]="pagination.itemsPerPage"
-                    (pageChange)="onPageChange($event)"
-                    [rotate]="false" [ellipses]="false" [boundaryLinks]="true"
-                    [collectionSize]="pagination.totalItems"></ngb-pagination>
-                </div>
-              }
-            </div>
-          }
-        </ng-template>
-      </li>
+              </div>
+            }
+          </ng-template>
+        </li>
+      }
 
       <li [ngbNavItem]="TabID.CoverImage">
         <a ngbNavLink>{{t(TabID.CoverImage)}}</a>
@@ -102,6 +104,43 @@
                                    (resetClicked)="handleReset()"></app-cover-image-chooser>
         </ng-template>
       </li>
+
+      @if (tag.source !== ScrobbleProvider.Kavita) {
+        <li [ngbNavItem]="TabID.Info">
+          <a ngbNavLink>{{t(TabID.Info)}}</a>
+          <ng-template ngbNavContent>
+            <div class="row g-0 mb-2">
+              <div class="col-md-6">
+                <div>{{t('last-sync-title')}}</div>
+                <div>{{tag.lastSyncUtc | date:'shortDate' | defaultDate}}</div>
+              </div>
+              <div class="col-md-6">
+                <div>{{t('source-url-title')}}</div>
+                <a [href]="tag.sourceUrl | safeUrl" rel="noopener noreferrer" target="_blank">{{tag.sourceUrl}}</a>
+              </div>
+            </div>
+            <div class="row g-0 mb-2">
+              <div class="col-md-6">
+                <div>{{t('total-series-title')}}</div>
+                <div>{{tag.totalSourceCount | number}}</div>
+              </div>
+              <div class="col-md-6">
+                <div>{{t('missing-series-title')}}</div>
+                <div>{{tag.totalSourceCount - series.length}}</div>
+              </div>
+            </div>
+
+
+            @if (tag.missingSeriesFromSource !== null && (tag.totalSourceCount - series.length) > 0) {
+              <h6>{{t('missing-series-title')}}</h6>
+              <div class="row g-0">
+                <p [innerHTML]="tag.missingSeriesFromSource | safeHtml"></p>
+              </div>
+            }
+          </ng-template>
+        </li>
+      }
+
     </ul>
 
     <div [ngbNavOutlet]="nav" class="tab-content {{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'mt-3' : 'ms-4 flex-fill'}}"></div>

UI/Web/src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component.ts

@@ -24,26 +24,34 @@ import {LibraryService} from 'src/app/_services/library.service';
 import {SeriesService} from 'src/app/_services/series.service';
 import {UploadService} from 'src/app/_services/upload.service';
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
-import {CommonModule, NgTemplateOutlet} from "@angular/common";
+import {CommonModule, DatePipe, DecimalPipe, NgIf, NgTemplateOutlet} from "@angular/common";
 import {CoverImageChooserComponent} from "../../cover-image-chooser/cover-image-chooser.component";
 import {translate, TranslocoDirective} from "@ngneat/transloco";
 import {ScrobbleProvider} from "../../../_services/scrobbling.service";
 import {FilterPipe} from "../../../_pipes/filter.pipe";
 import {ScrobbleError} from "../../../_models/scrobbling/scrobble-error";
 import {AccountService} from "../../../_services/account.service";
+import {DefaultDatePipe} from "../../../_pipes/default-date.pipe";
+import {ReadMoreComponent} from "../../../shared/read-more/read-more.component";
+import {SafeHtmlPipe} from "../../../_pipes/safe-html.pipe";
+import {SafeUrlPipe} from "../../../_pipes/safe-url.pipe";
+import {MangaFormatPipe} from "../../../_pipes/manga-format.pipe";
+import {SentenceCasePipe} from "../../../_pipes/sentence-case.pipe";
+import {TagBadgeComponent} from "../../../shared/tag-badge/tag-badge.component";
 
 
 enum TabID {
   General = 'general-tab',
   CoverImage = 'cover-image-tab',
-  Series = 'series-tab'
+  Series = 'series-tab',
+  Info = 'info-tab'
 }
 
 @Component({
   selector: 'app-edit-collection-tags',
   standalone: true,
   imports: [NgbNav, NgbNavItem, NgbNavLink, NgbNavContent, ReactiveFormsModule, FormsModule, NgbPagination,
-    CoverImageChooserComponent, NgbNavOutlet, NgbTooltip, TranslocoDirective, NgTemplateOutlet, FilterPipe],
+    CoverImageChooserComponent, NgbNavOutlet, NgbTooltip, TranslocoDirective, NgTemplateOutlet, FilterPipe, DatePipe, DefaultDatePipe, ReadMoreComponent, SafeHtmlPipe, SafeUrlPipe, MangaFormatPipe, NgIf, SentenceCasePipe, TagBadgeComponent, DecimalPipe],
   templateUrl: './edit-collection-tags.component.html',
   styleUrls: ['./edit-collection-tags.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush

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

@@ -2,9 +2,9 @@
   <div class="card-item-container card {{selected ? 'selected-highlight' : ''}}">
     <div class="overlay" (click)="handleClick($event)">
       @if (total > 0 || suppressArchiveWarning) {
-        <app-image borderRadius=".25rem .25rem 0 0" height="230px" width="158px"  [imageUrl]="imageUrl"></app-image>
+        <app-image height="230px" width="158px" [styles]="{'border-radius': '.25rem .25rem 0 0'}" [imageUrl]="imageUrl"></app-image>
       } @else if (total === 0 && !suppressArchiveWarning) {
-        <app-image borderRadius=".25rem .25rem 0 0" height="230px" width="158px" [imageUrl]="imageService.errorImage"></app-image>
+        <app-image height="230px" width="158px" [styles]="{'border-radius': '.25rem .25rem 0 0'}" [imageUrl]="imageService.errorImage"></app-image>
       }
 
       <div class="progress-banner">

UI/Web/src/app/cards/external-list-item/external-list-item.component.html

@@ -1,17 +1,17 @@
 <div class="list-item-container d-flex flex-row g-0 mb-2 p-2">
   <div class="pe-2">
-    <app-image [imageUrl]="imageUrl" [height]="imageHeight" maxHeight="200px" [width]="imageWidth"></app-image>
+    <app-image [imageUrl]="imageUrl" [height]="imageHeight" [styles]="{'max-height': '200px'}" [width]="imageWidth"></app-image>
   </div>
   <div class="flex-grow-1">
     <div class="g-0">
       <h5 class="mb-0">
         <ng-content select="[title]"></ng-content>
       </h5>
-      <ng-container *ngIf="summary && summary.length > 0">
+      @if (summary && summary.length > 0) {
         <div class="mt-2 ps-2">
           <app-read-more [text]="summary" [maxLength]="250"></app-read-more>
         </div>
-      </ng-container>
+      }
     </div>
   </div>
 </div>

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

@@ -3,7 +3,7 @@
     <div class="card-item-container card clickable">
       <div class="overlay" (click)="handleClick()">
         <ng-container>
-          <app-image borderRadius=".25rem .25rem 0 0" height="230px" width="158px" [imageUrl]="data.coverUrl"></app-image>
+          <app-image [styles]="{'border-radius': '.25rem .25rem 0 0'}" height="230px" width="158px" [imageUrl]="data.coverUrl"></app-image>
         </ng-container>
 
 

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

@@ -1,7 +1,7 @@
 <ng-container *transloco="let t; read: 'list-item'">
   <div class="list-item-container d-flex flex-row g-0 mb-2 p-2">
     <div class="pe-2">
-      <app-image [imageUrl]="imageUrl" [height]="imageHeight" maxHeight="200px" [width]="imageWidth"></app-image>
+      <app-image [imageUrl]="imageUrl" [height]="imageHeight" [styles]="{'max-height': '200px'}" [width]="imageWidth"></app-image>
       <div class="not-read-badge" *ngIf="pagesRead === 0 && totalPages > 0"></div>
       <span class="download">
             <app-download-indicator [download$]="download$"></app-download-indicator>

UI/Web/src/app/cards/next-expected-card/next-expected-card.component.html

@@ -1,6 +1,6 @@
 <div class="card-item-container card">
   <div class="overlay">
-    <app-image borderRadius=".25rem .25rem 0 0" height="230px" width="158px" classes="extreme-blur"  [imageUrl]="imageUrl"></app-image>
+    <app-image [styles]="{'border-radius': '.25rem .25rem 0 0'}" height="230px" width="158px" classes="extreme-blur"  [imageUrl]="imageUrl"></app-image>
 
     <div class="card-overlay"></div>
     <ng-container *ngIf="entity.title | safeHtml as info">