Must Contains Filter (#2249)

* Removed docker-compose.yml as it's not used and may confuse users.

* Added ability to delete single collections from card actions. Updated transloco library which fixes older iOS browsers not being able to load Kavita.

* Added a Must Contains comparison which will make so all values must exist.

* Fixed up multiselect dropdowns not reseting value when changing filter field

UI/Web/package-lock.json

@@ -23,7 +23,7 @@
         "@iplab/ngx-file-upload": "^16.0.1",
         "@microsoft/signalr": "^7.0.10",
         "@ng-bootstrap/ng-bootstrap": "^15.1.1",
-        "@ngneat/transloco": "^5.0.6",
+        "@ngneat/transloco": "^5.0.7",
         "@ngneat/transloco-locale": "^5.1.1",
         "@ngneat/transloco-persist-lang": "^5.0.0",
         "@ngneat/transloco-persist-translations": "^5.0.0",
@@ -3170,9 +3170,9 @@
       }
     },
     "node_modules/@ngneat/transloco": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/@ngneat/transloco/-/transloco-5.0.6.tgz",
-      "integrity": "sha512-pt0jiU0co0nT72bhodT9ervBvSgl1jVUrTbLsHwjtP3WoJZxfOmXN21j5MSA/GJFRkolceI8+yWqtG7jux+WDg==",
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/@ngneat/transloco/-/transloco-5.0.7.tgz",
+      "integrity": "sha512-x1c2e+7cOYPPVFPgqGcN3R6d7f18a4sMHzxsCamcxS2w7vWXcEzWKZ8JcI1TdpxrM+RKuj2NRfEEcr1HjAI/4w==",
       "dependencies": {
         "@ngneat/transloco-utils": "^5.0.0",
         "flat": "5.0.2",

UI/Web/package.json

@@ -28,7 +28,7 @@
     "@iplab/ngx-file-upload": "^16.0.1",
     "@microsoft/signalr": "^7.0.10",
     "@ng-bootstrap/ng-bootstrap": "^15.1.1",
-    "@ngneat/transloco": "^5.0.6",
+    "@ngneat/transloco": "^5.0.7",
     "@ngneat/transloco-locale": "^5.1.1",
     "@ngneat/transloco-persist-lang": "^5.0.0",
     "@ngneat/transloco-persist-translations": "^5.0.0",

UI/Web/src/app/_models/metadata/v2/filter-comparison.ts

@@ -9,11 +9,12 @@ export enum FilterComparison {
     /// </summary>
     /// <remarks>Only works with IList</remarks>
     Contains = 5,
+    MustContains = 6,
     /// <summary>
     /// Performs a LIKE %value%
     /// </summary>
-    Matches = 6,
-    NotContains = 7,
+    Matches = 7,
+    NotContains = 8,
     /// <summary>
     /// Not Equal to
     /// </summary>
@@ -42,4 +43,4 @@ export enum FilterComparison {
     /// Is Date not between now and X seconds ago
     /// </summary>
     IsNotInLast = 15,
-}
+}

UI/Web/src/app/_services/action-factory.service.ts

@@ -247,6 +247,14 @@ export class ActionFactoryService {
         requiresAdmin: true,
         children: [],
       },
+      {
+        action: Action.Delete,
+        title: 'delete',
+        callback: this.dummyCallback,
+        requiresAdmin: false,
+        class: 'danger',
+        children: [],
+      },
     ];
 
     this.seriesActions = [

UI/Web/src/app/_services/collection-tag.service.ts

@@ -41,4 +41,8 @@ export class CollectionTagService {
   tagNameExists(name: string) {
     return this.httpClient.get<boolean>(this.baseUrl + 'collection/name-exists?name=' + name);
   }
+
+  deleteTag(tagId: number) {
+    return this.httpClient.delete<string>(this.baseUrl + 'collection?tagId=' + tagId, TextResonse);
+  }
 }

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

@@ -166,8 +166,8 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
   }
 
   hasCustomSort() {
-    return this.filter.sortOptions?.sortField != SortField.SortName || !this.filter.sortOptions.isAscending
-      || this.filterSettings.presetsV2?.sortOptions?.sortField != SortField.SortName || !this.filterSettings.presetsV2?.sortOptions?.isAscending;
+    return this.filter?.sortOptions?.sortField != SortField.SortName || !this.filter?.sortOptions.isAscending
+      || this.filterSettings?.presetsV2?.sortOptions?.sortField != SortField.SortName || !this.filterSettings?.presetsV2?.sortOptions?.isAscending;
   }
 
   performAction(action: ActionItem<any>) {

UI/Web/src/app/collections/_components/all-collections/all-collections.component.html

@@ -12,7 +12,7 @@
   >
     <ng-template #cardItem let-item let-position="idx">
       <app-card-item [title]="item.title" [entity]="item" [actions]="collectionTagActions"
-                     [imageUrl]="imageSerivce.getCollectionCoverImage(item.id)"
+                     [imageUrl]="imageService.getCollectionCoverImage(item.id)"
                      (clicked)="loadCollection(item)"></app-card-item>
     </ng-template>
 

UI/Web/src/app/collections/_components/all-collections/all-collections.component.ts

@@ -1,31 +1,35 @@
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
-  Component, DestroyRef,
+  Component,
+  DestroyRef,
   EventEmitter,
   inject,
   OnInit
 } from '@angular/core';
-import { Title } from '@angular/platform-browser';
-import { Router } from '@angular/router';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { map, of} from 'rxjs';
-import { Observable } from 'rxjs/internal/Observable';
-import { EditCollectionTagsComponent } from 'src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component';
-import { CollectionTag } from 'src/app/_models/collection-tag';
-import { JumpKey } from 'src/app/_models/jumpbar/jump-key';
-import { Tag } from 'src/app/_models/tag';
-import { AccountService } from 'src/app/_services/account.service';
-import { ActionItem, ActionFactoryService, Action } from 'src/app/_services/action-factory.service';
-import { CollectionTagService } from 'src/app/_services/collection-tag.service';
-import { ImageService } from 'src/app/_services/image.service';
-import { JumpbarService } from 'src/app/_services/jumpbar.service';
+import {Title} from '@angular/platform-browser';
+import {Router} from '@angular/router';
+import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
+import {map, of} from 'rxjs';
+import {Observable} from 'rxjs/internal/Observable';
+import {EditCollectionTagsComponent} from 'src/app/cards/_modals/edit-collection-tags/edit-collection-tags.component';
+import {CollectionTag} from 'src/app/_models/collection-tag';
+import {JumpKey} from 'src/app/_models/jumpbar/jump-key';
+import {Tag} from 'src/app/_models/tag';
+import {AccountService} from 'src/app/_services/account.service';
+import {Action, ActionFactoryService, ActionItem} from 'src/app/_services/action-factory.service';
+import {CollectionTagService} from 'src/app/_services/collection-tag.service';
+import {ImageService} from 'src/app/_services/image.service';
+import {JumpbarService} from 'src/app/_services/jumpbar.service';
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
-import { NgIf, AsyncPipe, DecimalPipe } from '@angular/common';
-import { CardItemComponent } from '../../../cards/card-item/card-item.component';
-import { CardDetailLayoutComponent } from '../../../cards/card-detail-layout/card-detail-layout.component';
-import { SideNavCompanionBarComponent } from '../../../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component';
+import {AsyncPipe, DecimalPipe, NgIf} from '@angular/common';
+import {CardItemComponent} from '../../../cards/card-item/card-item.component';
+import {CardDetailLayoutComponent} from '../../../cards/card-detail-layout/card-detail-layout.component';
+import {
+  SideNavCompanionBarComponent
+} from '../../../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component';
 import {TranslocoDirective, TranslocoService} from "@ngneat/transloco";
+import {ToastrService} from "ngx-toastr";
 
 
 @Component({
@@ -49,11 +53,12 @@ export class AllCollectionsComponent implements OnInit {
   filterOpen: EventEmitter<boolean> = new EventEmitter();
   private readonly destroyRef = inject(DestroyRef);
   private readonly translocoService = inject(TranslocoService);
+  private readonly toastr = inject(ToastrService);
 
   constructor(private collectionService: CollectionTagService, private router: Router,
     private actionFactoryService: ActionFactoryService, private modalService: NgbModal,
     private titleService: Title, private jumpbarService: JumpbarService,
-    private readonly cdRef: ChangeDetectorRef, public imageSerivce: ImageService,
+    private readonly cdRef: ChangeDetectorRef, public imageService: ImageService,
     public accountService: AccountService) {
     this.router.routeReuseStrategy.shouldReuseRoute = () => false;
     this.titleService.setTitle('Kavita - ' + this.translocoService.translate('all-collections.title'));
@@ -87,6 +92,11 @@ export class AllCollectionsComponent implements OnInit {
 
   handleCollectionActionCallback(action: ActionItem<CollectionTag>, collectionTag: CollectionTag) {
     switch (action.action) {
+      case(Action.Delete):
+        this.collectionService.deleteTag(collectionTag.id).subscribe(res => {
+          this.toastr.success(res);
+        });
+        break;
       case(Action.Edit):
         const modalRef = this.modalService.open(EditCollectionTagsComponent, { size: 'lg', scrollable: true });
         modalRef.componentInstance.tag = collectionTag;

UI/Web/src/app/metadata-filter/_components/metadata-filter-row/metadata-filter-row.component.ts

@@ -3,23 +3,15 @@ import {
   ChangeDetectorRef,
   Component,
   DestroyRef,
-  EventEmitter, inject,
+  EventEmitter,
+  inject,
   Input,
   OnInit,
   Output,
 } from '@angular/core';
 import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {FilterStatement} from '../../../_models/metadata/v2/filter-statement';
-import {
-  BehaviorSubject,
-  distinctUntilChanged, filter,
-  map,
-  Observable,
-  of,
-  startWith,
-  switchMap,
-  tap
-} from 'rxjs';
+import {BehaviorSubject, distinctUntilChanged, filter, map, Observable, of, startWith, switchMap, tap} from 'rxjs';
 import {MetadataService} from 'src/app/_services/metadata.service';
 import {mangaFormatFilters} from 'src/app/_models/metadata/series-filter';
 import {PersonRole} from 'src/app/_models/metadata/person';
@@ -50,6 +42,16 @@ const DropdownFields = [FilterField.PublicationStatus, FilterField.Languages, Fi
     FilterField.Formats, FilterField.CollectionTags, FilterField.Tags
 ];
 
+const DropdownFieldsWithoutMustContains = [
+  FilterField.Libraries, FilterField.Formats, FilterField.AgeRating, FilterField.PublicationStatus
+];
+const DropdownFieldsThatIncludeNumberComparisons = [
+  FilterField.AgeRating
+];
+const NumberFieldsThatIncludeDateComparisons = [
+  FilterField.ReleaseYear
+];
+
 const StringComparisons = [FilterComparison.Equal,
   FilterComparison.NotEqual,
   FilterComparison.BeginsWith,
@@ -65,7 +67,8 @@ const NumberComparisons = [FilterComparison.Equal,
 const DropdownComparisons = [FilterComparison.Equal,
   FilterComparison.NotEqual,
   FilterComparison.Contains,
-  FilterComparison.NotContains];
+  FilterComparison.NotContains,
+  FilterComparison.MustContains];
 
 @Component({
   selector: 'app-metadata-row-filter',
@@ -113,7 +116,7 @@ export class MetadataFilterRowComponent implements OnInit {
 
   get MultipleDropdownAllowed() {
     const comp = parseInt(this.formGroup.get('comparison')?.value, 10) as FilterComparison;
-    return comp === FilterComparison.Contains || comp === FilterComparison.NotContains;
+    return comp === FilterComparison.Contains || comp === FilterComparison.NotContains || comp === FilterComparison.MustContains;
   }
 
   constructor(private readonly metadataService: MetadataService, private readonly libraryService: LibraryService,
@@ -148,6 +151,12 @@ export class MetadataFilterRowComponent implements OnInit {
         value: this.formGroup.get('filterValue')?.value!
       };
 
+      // Some ids can get through and be numbers, convert them to strings for the backend
+      if (typeof stmt.value === 'number' && !Number.isNaN(stmt.value)) {
+        stmt.value = stmt.value + '';
+      }
+
+      console.log('Trying to update parent with new stmt: ', stmt.value);
       if (!stmt.value && stmt.field !== FilterField.SeriesName) return;
       console.log('updating parent with new statement: ', stmt.value)
       this.filterStatement.emit(stmt);
@@ -188,7 +197,6 @@ export class MetadataFilterRowComponent implements OnInit {
 
   getDropdownObservable(): Observable<Select2Option[]> {
       const filterField = parseInt(this.formGroup.get('input')?.value, 10) as FilterField;
-      console.log('Getting dropdown observable: ', filterField);
       switch (filterField) {
         case FilterField.PublicationStatus:
           return this.metadataService.getAllPublicationStatus().pipe(map(pubs => pubs.map(pub => {
@@ -252,15 +260,15 @@ export class MetadataFilterRowComponent implements OnInit {
       this.predicateType$.next(PredicateType.Text);
 
       if (this.loaded) {
-        this.formGroup.get('filterValue')?.patchValue('',{emitEvent: false});
+        this.formGroup.get('filterValue')?.patchValue('');
         console.log('setting filterValue to empty string', this.formGroup.get('filterValue')?.value)
-      } // BUG: undefined is getting set and the input value isn't updating and emitting to the backend
+      }
       return;
     }
 
     if (NumberFields.includes(inputVal)) {
       const comps = [...NumberComparisons];
-      if (inputVal === FilterField.ReleaseYear) {
+      if (NumberFieldsThatIncludeDateComparisons.includes(inputVal)) {
         comps.push(...DateComparisons);
       }
       this.validComparisons$.next(comps);
@@ -270,12 +278,16 @@ export class MetadataFilterRowComponent implements OnInit {
     }
 
     if (DropdownFields.includes(inputVal)) {
-      const comps = [...DropdownComparisons];
-      if (inputVal === FilterField.AgeRating) {
+      let comps = [...DropdownComparisons];
+      if (DropdownFieldsThatIncludeNumberComparisons.includes(inputVal)) {
         comps.push(...NumberComparisons);
       }
+      if (DropdownFieldsWithoutMustContains.includes(inputVal)) {
+        comps = comps.filter(c => c !== FilterComparison.MustContains);
+      }
       this.validComparisons$.next(comps);
       this.predicateType$.next(PredicateType.Dropdown);
+      if (this.loaded) this.formGroup.get('filterValue')?.patchValue(0);
       return;
     }
   }

UI/Web/src/app/metadata-filter/_pipes/filter-comparison.pipe.ts

@@ -40,6 +40,8 @@ export class FilterComparisonPipe implements PipeTransform {
         return translate('filter-comparison-pipe.is-in-last');
       case FilterComparison.IsNotInLast:
         return translate('filter-comparison-pipe.is-not-in-last');
+      case FilterComparison.MustContains:
+        return translate('filter-comparison-pipe.must-contains');
       default:
         throw new Error(`Invalid FilterComparison value: ${value}`);
     }

UI/Web/src/assets/langs/en.json

@@ -1751,7 +1751,8 @@
         "is-before": "Is before",
         "is-after": "Is after",
         "is-in-last": "Is in last",
-        "is-not-in-last": "Is not in last"
+        "is-not-in-last": "Is not in last",
+        "must-contains": "Must Contains"
     },
 
     "toasts": {

UI/Web/src/theme/components/_typeahead.scss

@@ -66,7 +66,3 @@
   /* hint */
   --select2-hint-text-color: #888;
 }
-
-//.select2-selection__rendered {
-//  padding-top: 4px;
-//}