New UX Part 1.5 (#3105)

UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.ts

@@ -18,7 +18,7 @@ import { ReadingList } from 'src/app/_models/reading-list';
 import { CollectionTagService } from 'src/app/_services/collection-tag.service';
 import {CommonModule} from "@angular/common";
 import {FilterPipe} from "../../../_pipes/filter.pipe";
-import {translate, TranslocoDirective, TranslocoService} from "@ngneat/transloco";
+import {translate, TranslocoDirective, TranslocoService} from "@jsverse/transloco";
 
 @Component({
   selector: 'app-bulk-add-to-collection',

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

@@ -25,7 +25,7 @@ import {UploadService} from 'src/app/_services/upload.service';
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {DatePipe, DecimalPipe, NgIf, NgTemplateOutlet} from "@angular/common";
 import {CoverImageChooserComponent} from "../../cover-image-chooser/cover-image-chooser.component";
-import {translate, TranslocoDirective} from "@ngneat/transloco";
+import {translate, TranslocoDirective} from "@jsverse/transloco";
 import {ScrobbleProvider} from "../../../_services/scrobbling.service";
 import {FilterPipe} from "../../../_pipes/filter.pipe";
 import {AccountService} from "../../../_services/account.service";

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

@@ -401,12 +401,14 @@
               <app-cover-image-chooser [(imageUrls)]="imageUrls" (imageSelected)="updateSelectedIndex($event)" (selectedBase64Url)="updateSelectedImage($event)" [showReset]="series.coverImageLocked" (resetClicked)="handleReset()"></app-cover-image-chooser>
             </ng-template>
           </li>
+
           <li [ngbNavItem]="tabs[TabID.Related]">
             <a ngbNavLink>{{t(tabs[TabID.Related])}}</a>
             <ng-template ngbNavContent>
               <app-edit-series-relation [series]="series" [save]="saveNestedComponents"></app-edit-series-relation>
             </ng-template>
           </li>
+
           <li [ngbNavItem]="tabs[TabID.Info]">
             <a ngbNavLink>{{t(tabs[TabID.Info])}}</a>
             <ng-template ngbNavContent>
@@ -492,6 +494,19 @@
               </ul>
             </ng-template>
           </li>
+
+          <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>
+              }
+            </ng-template>
+          </li>
         </ul>
       </form>
 

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

@@ -49,14 +49,18 @@ import {PublicationStatusPipe} from "../../../_pipes/publication-status.pipe";
 import {BytesPipe} from "../../../_pipes/bytes.pipe";
 import {ImageComponent} from "../../../shared/image/image.component";
 import {DefaultValuePipe} from "../../../_pipes/default-value.pipe";
-import {translate, TranslocoModule} from "@ngneat/transloco";
-import {TranslocoDatePipe} from "@ngneat/transloco-locale";
+import {translate, TranslocoModule} from "@jsverse/transloco";
+import {TranslocoDatePipe} from "@jsverse/transloco-locale";
 import {UtcToLocalTimePipe} from "../../../_pipes/utc-to-local-time.pipe";
 import {EditListComponent} from "../../../shared/edit-list/edit-list.component";
 import {AccountService} from "../../../_services/account.service";
 import {LibraryType} from "../../../_models/library/library";
 import {ToastrService} from "ngx-toastr";
 import {Volume} from "../../../_models/volume";
+import {Action, ActionFactoryService, ActionItem} from "../../../_services/action-factory.service";
+import {SettingButtonComponent} from "../../../settings/_components/setting-button/setting-button.component";
+import {ActionService} from "../../../_services/action.service";
+import {DownloadService} from "../../../shared/_services/download.service";
 
 enum TabID {
   General = 0,
@@ -66,6 +70,7 @@ enum TabID {
   CoverImage = 4,
   Related = 5,
   Info = 6,
+  Tasks = 7
 }
 
 export interface EditSeriesModalCloseResult {
@@ -75,6 +80,10 @@ export interface EditSeriesModalCloseResult {
   updateExternal: boolean
 }
 
+const blackList = [Action.Edit, Action.Info, Action.IncognitoRead, Action.Read, Action.SendTo,
+  Action.AddToWantToReadList, Action.AddToCollection, Action.AddToReadingList, Action.RemoveFromWantToReadList,
+  Action.RemoveFromWantToReadList];
+
 @Component({
   selector: 'app-edit-series-modal',
   standalone: true,
@@ -104,6 +113,7 @@ export interface EditSeriesModalCloseResult {
     TranslocoDatePipe,
     UtcToLocalTimePipe,
     EditListComponent,
+    SettingButtonComponent,
   ],
   templateUrl: './edit-series-modal.component.html',
   styleUrls: ['./edit-series-modal.component.scss'],
@@ -123,10 +133,14 @@ export class EditSeriesModalComponent implements OnInit {
   public readonly accountService = inject(AccountService);
   private readonly destroyRef = inject(DestroyRef);
   private readonly toastr = inject(ToastrService);
+  private readonly actionFactoryService = inject(ActionFactoryService);
+  private readonly actionService = inject(ActionService);
+  private readonly downloadService = inject(DownloadService);
 
   protected readonly TabID = TabID;
   protected readonly PersonRole = PersonRole;
   protected readonly Breakpoint = Breakpoint;
+  protected readonly Action = Action;
 
   @Input({required: true}) series!: Series;
 
@@ -137,9 +151,9 @@ export class EditSeriesModalComponent implements OnInit {
    * A copy of the series from init. This is used to compare values for name fields to see if lock was modified
    */
   initSeries!: Series;
-
+  tasks = this.actionFactoryService.getActionablesForSettingsPage(this.actionFactoryService.getSeriesActions(this.runTask.bind(this)), blackList);
   volumeCollapsed: any = {};
-  tabs = ['general-tab', 'metadata-tab', 'people-tab', 'web-links-tab', 'cover-image-tab', 'related-tab', 'info-tab'];
+  tabs = ['general-tab', 'metadata-tab', 'people-tab', 'web-links-tab', 'cover-image-tab', 'related-tab', 'info-tab', 'tasks-tab'];
   active = this.tabs[0];
   editSeriesForm!: FormGroup;
   libraryName: string | undefined = undefined;
@@ -646,4 +660,32 @@ export class EditSeriesModalComponent implements OnInit {
     this.cdRef.markForCheck();
   }
 
+  async runTask(action: ActionItem<Series>) {
+    switch (action.action) {
+      case Action.Scan:
+        await this.actionService.scanSeries(this.series);
+        break;
+      case Action.RefreshMetadata:
+        await this.actionService.refreshSeriesMetadata(this.series);
+        break;
+      case Action.GenerateColorScape:
+        await this.actionService.refreshSeriesMetadata(this.series, undefined, false);
+        break;
+      case Action.AnalyzeFiles:
+        this.actionService.analyzeFilesForSeries(this.series);
+        break;
+      case Action.MarkAsRead:
+        this.actionService.markSeriesAsRead(this.series);
+        break;
+      case Action.MarkAsUnread:
+        this.actionService.markSeriesAsUnread(this.series);
+        break;
+      case Action.Delete:
+        await this.actionService.deleteSeries(this.series);
+        break;
+      case Action.Download:
+        this.downloadService.download('series', this.series);
+        break;
+    }
+  }
 }