Automatic Collection Creation (#1768)

* Made the unread badges slightly smaller and rounded on top right.

* A bit more tweaks on the not read badges. Looking really nice now.

* In order to start the work on managing collections from ScanLoop, I needed to refactor collection apis into the service layer and add unit tests.

Removed ToUpper Normalization for new tags.

* Hooked up ability to auto generate collections from SeriesGroup metadata tag.

UI/Web/src/app/_models/library.ts

@@ -15,4 +15,5 @@ export interface Library {
     includeInDashboard: boolean;
     includeInRecommended: boolean;
     includeInSearch: boolean;
+    manageCollections: boolean;
 }

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

@@ -151,16 +151,15 @@ export class EditCollectionTagsComponent implements OnInit, OnDestroy {
   async save() {
     const selectedIndex = this.collectionTagForm.get('coverImageIndex')?.value || 0;
     const unselectedIds = this.selections.unselected().map(s => s.id);
-    const tag: CollectionTag = {...this.tag};
-    tag.summary = this.collectionTagForm.get('summary')?.value;
-    tag.coverImageLocked = this.collectionTagForm.get('coverImageLocked')?.value;
-    tag.promoted  = this.collectionTagForm.get('promoted')?.value;
+    const tag = this.collectionTagForm.value;
+    tag.id = this.tag.id;
     
     if (unselectedIds.length == this.series.length && !await this.confirmSerivce.confirm('Warning! No series are selected, saving will delete the tag. Are you sure you want to continue?')) {
       return;
     }
 
-    const apis = [this.collectionService.updateTag(tag),
+    const apis = [
+      this.collectionService.updateTag(tag),
       this.collectionService.updateSeriesForTag(tag, this.selections.unselected().map(s => s.id))
     ];
     

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

@@ -17,7 +17,12 @@
         Cannot Read
       </div>
       
-      <div class="not-read-badge" *ngIf="read === 0 && total > 0"></div>
+      <ng-container *ngIf="read === 0 && total > 0">
+        <div class="badge-container">
+          <div class="not-read-badge" ></div>
+        </div>
+      </ng-container>
+      
       <div class="bulk-mode {{bulkSelectionService.hasSelections() ? 'always-show' : ''}}" (click)="handleSelection($event)" *ngIf="allowSelection">
         <input type="checkbox" class="form-check-input" attr.aria-labelledby="{{title}}_{{entity.id}}" [ngModel]="selected" [ngModelOptions]="{standalone: true}">
       </div>

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

@@ -67,15 +67,28 @@ $image-width: 160px;
     right: 30%;
 }
 
+.badge-container {
+    border-radius: 4px;
+    display: block;
+    height: $image-height;
+    left: 0;
+    overflow: hidden;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    width: 158px;
+    
+}
+
 .not-read-badge {
     position: absolute;
-    top: 0px;
-    right: 0px;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 0 var(--card-progress-triangle-size) var(--card-progress-triangle-size) 0;
-    border-color: transparent var(--primary-color) transparent transparent;
+    top: calc(-1 * (var(--card-progress-triangle-size) / 2));
+    right: -14px;
+    z-index: 1000;
+    height: var(--card-progress-triangle-size);
+    width: var(--card-progress-triangle-size);
+    background-color: var(--primary-color);
+    transform: rotate(45deg);
 }
 
 
@@ -109,8 +122,8 @@ $image-width: 160px;
 
 .overlay {
     height: $image-height;
-
-    
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
     
     &:hover {
         visibility: visible;
@@ -169,4 +182,6 @@ $image-width: 160px;
     height: $image-height;
     z-index: 10;
     transition: all 0.2s;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
 }

UI/Web/src/app/sidenav/_modals/library-settings-modal/library-settings-modal.component.html

@@ -92,6 +92,19 @@
             <li [ngbNavItem]="TabID.Advanced" [disabled]="isAddLibrary && setupStep < 3">
                 <a ngbNavLink>{{TabID.Advanced}}</a>
                 <ng-template ngbNavContent>
+                    <div class="row">
+                        <div class="col-md-12 col-sm-12 pe-2 mb-2">
+                            <div class="mb-3 mt-1">
+                                <div class="form-check form-switch">
+                                    <input type="checkbox" id="manage-collections" role="switch" formControlName="manageCollections" class="form-check-input" aria-labelledby="auto-close-label">
+                                    <label class="form-check-label" for="manage-collections">Manage Collections</label>
+                                </div>
+                            </div>
+                            <p class="accent">
+                                Should Kavita create and update Collections from SeriesGroup tags found within ComicInfo.xml files
+                            </p>
+                        </div>
+                    </div>
 
                     <div class="row">
                         <div class="col-md-12 col-sm-12 pe-2 mb-2">

UI/Web/src/app/sidenav/_modals/library-settings-modal/library-settings-modal.component.ts

@@ -46,6 +46,7 @@ export class LibrarySettingsModalComponent implements OnInit, OnDestroy {
     includeInDashboard: new FormControl<boolean>(true, { nonNullable: true, validators: [Validators.required] }),
     includeInRecommended: new FormControl<boolean>(true, { nonNullable: true, validators: [Validators.required] }),
     includeInSearch: new FormControl<boolean>(true, { nonNullable: true, validators: [Validators.required] }),
+    manageCollections: new FormControl<boolean>(true, { nonNullable: true, validators: [Validators.required] }),
   });
 
   selectedFolders: string[] = [];
@@ -117,6 +118,7 @@ export class LibrarySettingsModalComponent implements OnInit, OnDestroy {
       this.libraryForm.get('includeInDashboard')?.setValue(this.library.includeInDashboard);
       this.libraryForm.get('includeInRecommended')?.setValue(this.library.includeInRecommended);
       this.libraryForm.get('includeInSearch')?.setValue(this.library.includeInSearch);
+      this.libraryForm.get('manageCollections')?.setValue(this.library.manageCollections);
       this.selectedFolders = this.library.folders;
       this.madeChanges = false;
       this.cdRef.markForCheck();

UI/Web/src/theme/themes/dark.scss

@@ -201,7 +201,7 @@
     --card-progress-bar-color: var(--primary-color);
     --card-overlay-bg-color: rgba(0, 0, 0, 0);
     --card-overlay-hover-bg-color: rgba(0, 0, 0, 0.2);
-    --card-progress-triangle-size: 20px;
+    --card-progress-triangle-size: 28px;
 
     /* Slider */
     --slider-text-color: white;