New UX Part 1.5 (#3105)
This commit is contained in:
Joe Milazzo
GitHub
parent
c188e0f23b
commit
ac21b04fa4
239 changed files with 1626 additions and 776 deletions
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { Action, ActionFactoryService, ActionItem } from 'src/app/_services/acti
|
|||
import { BulkSelectionService } from '../bulk-selection.service';
|
||||
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
|
||||
import {AsyncPipe, CommonModule} from "@angular/common";
|
||||
import {TranslocoModule} from "@ngneat/transloco";
|
||||
import {TranslocoModule} from "@jsverse/transloco";
|
||||
import {NgbTooltip} from "@ng-bootstrap/ng-bootstrap";
|
||||
import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component";
|
||||
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ import {BytesPipe} from "../../_pipes/bytes.pipe";
|
|||
import {BadgeExpanderComponent} from "../../shared/badge-expander/badge-expander.component";
|
||||
import {TagBadgeComponent} from "../../shared/tag-badge/tag-badge.component";
|
||||
import {PersonBadgeComponent} from "../../shared/person-badge/person-badge.component";
|
||||
import {translate, TranslocoDirective} from "@ngneat/transloco";
|
||||
import {translate, TranslocoDirective} from "@jsverse/transloco";
|
||||
import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component";
|
||||
import {EditChapterProgressComponent} from "../edit-chapter-progress/edit-chapter-progress.component";
|
||||
|
||||
|
|
@ -144,7 +144,7 @@ export class CardDetailDrawerComponent implements OnInit {
|
|||
|
||||
this.chapterActions = this.actionFactoryService.getChapterActions(this.handleChapterActionCallback.bind(this))
|
||||
.filter(item => item.action !== Action.Edit);
|
||||
this.chapterActions.push({title: 'read', action: Action.Read, callback: this.handleChapterActionCallback.bind(this), requiresAdmin: false, children: []});
|
||||
this.chapterActions.push({title: 'read', description: 'read-tooltip', action: Action.Read, callback: this.handleChapterActionCallback.bind(this), requiresAdmin: false, children: []});
|
||||
if (this.isChapter) {
|
||||
const chapter = this.utilityService.asChapter(this.data);
|
||||
this.chapterActions = this.actionFactoryService.filterSendToAction(this.chapterActions, chapter);
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ import {LoadingComponent} from "../../shared/loading/loading.component";
|
|||
|
||||
import {NgbTooltip} from "@ng-bootstrap/ng-bootstrap";
|
||||
import {MetadataFilterComponent} from "../../metadata-filter/metadata-filter.component";
|
||||
import {TranslocoDirective} from "@ngneat/transloco";
|
||||
import {TranslocoDirective} from "@jsverse/transloco";
|
||||
import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component";
|
||||
import {SeriesFilterV2} from "../../_models/metadata/v2/series-filter-v2";
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ import {MangaFormatIconPipe} from "../../_pipes/manga-format-icon.pipe";
|
|||
import {SentenceCasePipe} from "../../_pipes/sentence-case.pipe";
|
||||
import {DecimalPipe, NgTemplateOutlet} from "@angular/common";
|
||||
import {RouterLink, RouterLinkActive} from "@angular/router";
|
||||
import {TranslocoModule} from "@ngneat/transloco";
|
||||
import {TranslocoModule} from "@jsverse/transloco";
|
||||
import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component";
|
||||
import {NextExpectedChapter} from "../../_models/series-detail/next-expected-chapter";
|
||||
import {UtcToLocalTimePipe} from "../../_pipes/utc-to-local-time.pipe";
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
|
|||
import {CommonModule} from "@angular/common";
|
||||
import {BadgeExpanderComponent} from "../../shared/badge-expander/badge-expander.component";
|
||||
import {PersonBadgeComponent} from "../../shared/person-badge/person-badge.component";
|
||||
import {TranslocoDirective} from "@ngneat/transloco";
|
||||
import {TranslocoDirective} from "@jsverse/transloco";
|
||||
import {Chapter} from "../../_models/chapter";
|
||||
|
||||
@Component({
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ import { KEY_CODES } from 'src/app/shared/_services/utility.service';
|
|||
import { UploadService } from 'src/app/_services/upload.service';
|
||||
import {CommonModule, DOCUMENT} from '@angular/common';
|
||||
import {ImageComponent} from "../../shared/image/image.component";
|
||||
import {translate, TranslocoModule} from "@ngneat/transloco";
|
||||
import {translate, TranslocoModule} from "@jsverse/transloco";
|
||||
|
||||
@Component({
|
||||
selector: 'app-cover-image-chooser',
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { Download } from 'src/app/shared/_models/download';
|
|||
import { DownloadEvent } from 'src/app/shared/_services/download.service';
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {CircularLoaderComponent} from "../../shared/circular-loader/circular-loader.component";
|
||||
import {TranslocoDirective} from "@ngneat/transloco";
|
||||
import {TranslocoDirective} from "@jsverse/transloco";
|
||||
|
||||
@Component({
|
||||
selector: 'app-download-indicator',
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import {DefaultValuePipe} from "../../_pipes/default-value.pipe";
|
|||
import {UtcToLocalTimePipe} from "../../_pipes/utc-to-local-time.pipe";
|
||||
import {FullProgress} from "../../_models/readers/full-progress";
|
||||
import {ReaderService} from "../../_services/reader.service";
|
||||
import {TranslocoDirective} from "@ngneat/transloco";
|
||||
import {TranslocoDirective} from "@jsverse/transloco";
|
||||
import {FormArray, FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
|
||||
import {SentenceCasePipe} from "../../_pipes/sentence-case.pipe";
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ import { SeriesService } from 'src/app/_services/series.service';
|
|||
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
|
||||
import {TypeaheadComponent} from "../../typeahead/_components/typeahead.component";
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {TranslocoModule} from "@ngneat/transloco";
|
||||
import {TranslocoModule} from "@jsverse/transloco";
|
||||
import {RelationshipPipe} from "../../_pipes/relationship.pipe";
|
||||
import {WikiLink} from "../../_models/wiki";
|
||||
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@ import {CompactNumberPipe} from "../../_pipes/compact-number.pipe";
|
|||
import {AgeRatingPipe} from "../../_pipes/age-rating.pipe";
|
||||
import {NgbTooltip} from "@ng-bootstrap/ng-bootstrap";
|
||||
import {MetadataDetailComponent} from "../../series-detail/_components/metadata-detail/metadata-detail.component";
|
||||
import {TranslocoModule} from "@ngneat/transloco";
|
||||
import {TranslocoLocaleModule} from "@ngneat/transloco-locale";
|
||||
import {TranslocoModule} from "@jsverse/transloco";
|
||||
import {TranslocoLocaleModule} from "@jsverse/transloco-locale";
|
||||
import {FilterField} from "../../_models/metadata/v2/filter-field";
|
||||
import {UtcToLocalTimePipe} from "../../_pipes/utc-to-local-time.pipe";
|
||||
import {ImageComponent} from "../../shared/image/image.component";
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { Chapter, LooseLeafOrDefaultNumber } from 'src/app/_models/chapter';
|
|||
import { LibraryType } from 'src/app/_models/library/library';
|
||||
import { Volume } from 'src/app/_models/volume';
|
||||
import {CommonModule, NgSwitch} from "@angular/common";
|
||||
import {TranslocoModule} from "@ngneat/transloco";
|
||||
import {TranslocoModule} from "@jsverse/transloco";
|
||||
|
||||
/**
|
||||
* This is primarily used for list item
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import {RouterLinkActive} from "@angular/router";
|
|||
import {ImageComponent} from "../../shared/image/image.component";
|
||||
import {NgbOffcanvas, NgbProgressbar, NgbTooltip} from "@ng-bootstrap/ng-bootstrap";
|
||||
import {ReactiveFormsModule} from "@angular/forms";
|
||||
import {TranslocoDirective} from "@ngneat/transloco";
|
||||
import {TranslocoDirective} from "@jsverse/transloco";
|
||||
import {SeriesPreviewDrawerComponent} from "../../_single-module/series-preview-drawer/series-preview-drawer.component";
|
||||
import {ProviderImagePipe} from "../../_pipes/provider-image.pipe";
|
||||
import {SafeHtmlPipe} from "../../_pipes/safe-html.pipe";
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ import {ImageComponent} from "../../shared/image/image.component";
|
|||
import {DownloadIndicatorComponent} from "../download-indicator/download-indicator.component";
|
||||
import {EntityInfoCardsComponent} from "../entity-info-cards/entity-info-cards.component";
|
||||
import {NgbProgressbar, NgbTooltip} from "@ng-bootstrap/ng-bootstrap";
|
||||
import {translate, TranslocoDirective} from "@ngneat/transloco";
|
||||
import {translate, TranslocoDirective} from "@jsverse/transloco";
|
||||
import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component";
|
||||
|
||||
@Component({
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import {ImageComponent} from "../../shared/image/image.component";
|
|||
import {NextExpectedChapter} from "../../_models/series-detail/next-expected-chapter";
|
||||
import {UtcToLocalTimePipe} from "../../_pipes/utc-to-local-time.pipe";
|
||||
import {SafeHtmlPipe} from "../../_pipes/safe-html.pipe";
|
||||
import {translate} from "@ngneat/transloco";
|
||||
import {translate} from "@jsverse/transloco";
|
||||
|
||||
@Component({
|
||||
selector: 'app-next-expected-card',
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ import {CommonModule} from "@angular/common";
|
|||
import {CardItemComponent} from "../card-item/card-item.component";
|
||||
import {RelationshipPipe} from "../../_pipes/relationship.pipe";
|
||||
import {Device} from "../../_models/device/device";
|
||||
import {translate, TranslocoService} from "@ngneat/transloco";
|
||||
import {translate, TranslocoService} from "@jsverse/transloco";
|
||||
import {SeriesPreviewDrawerComponent} from "../../_single-module/series-preview-drawer/series-preview-drawer.component";
|
||||
|
||||
function deepClone(obj: any): any {
|
||||
|
|
@ -122,6 +122,7 @@ export class SeriesCardComponent implements OnInit, OnChanges {
|
|||
othersAction.children.push({
|
||||
action: Action.RemoveFromOnDeck,
|
||||
title: 'remove-from-on-deck',
|
||||
description: '',
|
||||
callback: (action: ActionItem<Series>, series: Series) => this.handleSeriesActionCallback(action, series),
|
||||
class: 'danger',
|
||||
requiresAdmin: false,
|
||||
|
|
@ -148,6 +149,9 @@ export class SeriesCardComponent implements OnInit, OnChanges {
|
|||
case(Action.RefreshMetadata):
|
||||
this.refreshMetadata(series);
|
||||
break;
|
||||
case(Action.GenerateColorScape):
|
||||
this.refreshMetadata(series, false);
|
||||
break;
|
||||
case(Action.Delete):
|
||||
this.deleteSeries(series);
|
||||
break;
|
||||
|
|
@ -199,8 +203,8 @@ export class SeriesCardComponent implements OnInit, OnChanges {
|
|||
});
|
||||
}
|
||||
|
||||
async refreshMetadata(series: Series) {
|
||||
await this.actionService.refreshMetdata(series);
|
||||
async refreshMetadata(series: Series, forceUpdate = false) {
|
||||
await this.actionService.refreshSeriesMetadata(series, undefined, forceUpdate);
|
||||
}
|
||||
|
||||
async scanLibrary(series: Series) {
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ import {TimeAgoPipe} from "../../_pipes/time-ago.pipe";
|
|||
import {CompactNumberPipe} from "../../_pipes/compact-number.pipe";
|
||||
import {MangaFormatIconPipe} from "../../_pipes/manga-format-icon.pipe";
|
||||
import {NgbTooltip} from "@ng-bootstrap/ng-bootstrap";
|
||||
import {TranslocoDirective} from "@ngneat/transloco";
|
||||
import {TranslocoDirective} from "@jsverse/transloco";
|
||||
|
||||
@Component({
|
||||
selector: 'app-series-info-cards',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue