AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

IsEmpty Filter and other small fixes (#3142)

Browse source 
Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>
This commit is contained in:
Joe Milazzo 2024-09-13 15:15:01 -07:00 • committed by GitHub
parent e574caf7eb
commit 07a36176de
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
96 changed files with 1361 additions and 1135 deletions
Download patch file Download diff file Expand all files Collapse all files

36
UI/Web/src/_card-item-common.scss
View file

@ -149,9 +149,6 @@ $image-width: 160px;
}
.card-actions {
position: absolute;
bottom: 0;
right: 0;
z-index: 115;
}
@ -161,8 +158,41 @@ $image-width: 160px;
margin-top: 0px;
}
.card-title-container {
display: flex;
justify-content: end;
align-items: center;
padding: 0 5px;
.card-title {
font-size: 0.8rem;
margin: 0;
padding: 10px 0;
text-align: center;
max-width: 120px;
a {
overflow: hidden;
text-overflow: ellipsis;
}
}
}
::ng-deep app-card-actionables .dropdown .dropdown-toggle {
padding: 0 5px;
}
.card-title {
font-size: 0.8rem;
margin: 0;
padding: 10px;
text-align: center;
max-width: 120px;
a {
overflow: hidden;
text-overflow: ellipsis;
}
}
.card-body > div:nth-child(2) {

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

@ -43,4 +43,5 @@ export enum FilterComparison {
/// Is Date not between now and X seconds ago
/// </summary>
IsNotInLast = 15,
IsEmpty = 16
}

7
UI/Web/src/app/_models/metadata/v2/query-context.ts Normal file
View file

@ -0,0 +1,7 @@
export enum QueryContext
{
None = 1,
Search = 2,
Recommended = 3,
Dashboard = 4,
}

4
UI/Web/src/app/_pipes/book-page-layout-mode.pipe.ts
View file

@ -1,6 +1,7 @@
import { Pipe, PipeTransform } from '@angular/core';
import {translate} from "@jsverse/transloco";
import {BookPageLayoutMode} from "../_models/readers/book-page-layout-mode";
import {ScalingOption} from "../_models/preferences/scaling-option";
@Pipe({
name: 'bookPageLayoutMode',
@ -9,7 +10,8 @@ import {BookPageLayoutMode} from "../_models/readers/book-page-layout-mode";
export class BookPageLayoutModePipe implements PipeTransform {
transform(value: BookPageLayoutMode): string {
switch (value) {
const v = parseInt(value + '', 10) as BookPageLayoutMode;
switch (v) {
case BookPageLayoutMode.Column1: return translate('preferences.1-column');
case BookPageLayoutMode.Column2: return translate('preferences.2-column');
case BookPageLayoutMode.Default: return translate('preferences.scroll');

2
UI/Web/src/app/_pipes/filter-comparison.pipe.ts
View file

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

4
UI/Web/src/app/_pipes/layout-mode.pipe.ts
View file

@ -1,6 +1,7 @@
import { Pipe, PipeTransform } from '@angular/core';
import {translate} from "@jsverse/transloco";
import {LayoutMode} from "../manga-reader/_models/layout-mode";
import {ScalingOption} from "../_models/preferences/scaling-option";
@Pipe({
name: 'layoutMode',
@ -9,7 +10,8 @@ import {LayoutMode} from "../manga-reader/_models/layout-mode";
export class LayoutModePipe implements PipeTransform {
transform(value: LayoutMode): string {
switch (value) {
const v = parseInt(value + '', 10) as LayoutMode;
switch (v) {
case LayoutMode.Single: return translate('preferences.single');
case LayoutMode.Double: return translate('preferences.double');
case LayoutMode.DoubleReversed: return translate('preferences.double-manga');

4
UI/Web/src/app/_pipes/page-split-option.pipe.ts
View file

@ -1,6 +1,7 @@
import { Pipe, PipeTransform } from '@angular/core';
import {translate} from "@jsverse/transloco";
import {PageSplitOption} from "../_models/preferences/page-split-option";
import {ScalingOption} from "../_models/preferences/scaling-option";
@Pipe({
name: 'pageSplitOption',
@ -9,7 +10,8 @@ import {PageSplitOption} from "../_models/preferences/page-split-option";
export class PageSplitOptionPipe implements PipeTransform {
transform(value: PageSplitOption): string {
switch (value) {
const v = parseInt(value + '', 10) as PageSplitOption;
switch (v) {
case PageSplitOption.FitSplit: return translate('preferences.fit-to-screen');
case PageSplitOption.NoSplit: return translate('preferences.no-split');
case PageSplitOption.SplitLeftToRight: return translate('preferences.split-left-to-right');

3
UI/Web/src/app/_pipes/pdf-scroll-mode.pipe.ts
View file

@ -9,7 +9,8 @@ import {PdfScrollMode} from "../_models/preferences/pdf-scroll-mode";
export class PdfScrollModePipe implements PipeTransform {
transform(value: PdfScrollMode): string {
switch (value) {
const v = parseInt(value + '', 10) as PdfScrollMode;
switch (v) {
case PdfScrollMode.Wrapped: return translate('preferences.pdf-multiple');
case PdfScrollMode.Page: return translate('preferences.pdf-page');
case PdfScrollMode.Horizontal: return translate('preferences.pdf-horizontal');

4
UI/Web/src/app/_pipes/pdf-spread-mode.pipe.ts
View file

@ -1,6 +1,7 @@
import { Pipe, PipeTransform } from '@angular/core';
import {PdfSpreadMode} from "../_models/preferences/pdf-spread-mode";
import {translate} from "@jsverse/transloco";
import {ScalingOption} from "../_models/preferences/scaling-option";
@Pipe({
name: 'pdfSpreadMode',
@ -9,7 +10,8 @@ import {translate} from "@jsverse/transloco";
export class PdfSpreadModePipe implements PipeTransform {
transform(value: PdfSpreadMode): string {
switch (value) {
const v = parseInt(value + '', 10) as PdfSpreadMode;
switch (v) {
case PdfSpreadMode.None: return translate('preferences.pdf-none');
case PdfSpreadMode.Odd: return translate('preferences.pdf-odd');
case PdfSpreadMode.Even: return translate('preferences.pdf-even');

4
UI/Web/src/app/_pipes/pdf-theme.pipe.ts
View file

@ -1,6 +1,7 @@
import { Pipe, PipeTransform } from '@angular/core';
import {PdfTheme} from "../_models/preferences/pdf-theme";
import {translate} from "@jsverse/transloco";
import {ScalingOption} from "../_models/preferences/scaling-option";
@Pipe({
name: 'pdfTheme',
@ -9,7 +10,8 @@ import {translate} from "@jsverse/transloco";
export class PdfThemePipe implements PipeTransform {
transform(value: PdfTheme): string {
switch (value) {
const v = parseInt(value + '', 10) as PdfTheme;
switch (v) {
case PdfTheme.Dark: return translate('preferences.pdf-dark');
case PdfTheme.Light: return translate('preferences.pdf-light');
}

3
UI/Web/src/app/_pipes/reading-direction.pipe.ts
View file

@ -9,7 +9,8 @@ import {translate} from "@jsverse/transloco";
export class ReadingDirectionPipe implements PipeTransform {
transform(value: ReadingDirection): string {
switch (value) {
const v = parseInt(value + '', 10) as ReadingDirection;
switch (v) {
case ReadingDirection.LeftToRight: return translate('preferences.left-to-right');
case ReadingDirection.RightToLeft: return translate('preferences.right-to-left');
}

4
UI/Web/src/app/_pipes/reading-mode.pipe.ts
View file

@ -1,6 +1,7 @@
import { Pipe, PipeTransform } from '@angular/core';
import {ReaderMode} from "../_models/preferences/reader-mode";
import {translate} from "@jsverse/transloco";
import {ScalingOption} from "../_models/preferences/scaling-option";
@Pipe({
name: 'readerMode',
@ -9,7 +10,8 @@ import {translate} from "@jsverse/transloco";
export class ReaderModePipe implements PipeTransform {
transform(value: ReaderMode): string {
switch (value) {
const v = parseInt(value + '', 10) as ReaderMode;
switch (v) {
case ReaderMode.UpDown: return translate('preferences.up-to-down');
case ReaderMode.Webtoon: return translate('preferences.webtoon');
case ReaderMode.LeftRight: return translate('preferences.left-to-right');

4
UI/Web/src/app/_pipes/scaling-option.pipe.ts
View file

@ -1,6 +1,7 @@
import { Pipe, PipeTransform } from '@angular/core';
import {translate} from "@jsverse/transloco";
import {ScalingOption} from "../_models/preferences/scaling-option";
import {ReadingDirection} from "../_models/preferences/reading-direction";
@Pipe({
name: 'scalingOption',
@ -9,7 +10,8 @@ import {ScalingOption} from "../_models/preferences/scaling-option";
export class ScalingOptionPipe implements PipeTransform {
transform(value: ScalingOption): string {
switch (value) {
const v = parseInt(value + '', 10) as ScalingOption;
switch (v) {
case ScalingOption.Automatic: return translate('preferences.automatic');
case ScalingOption.FitToHeight: return translate('preferences.fit-to-height');
case ScalingOption.FitToWidth: return translate('preferences.fit-to-width');

5
UI/Web/src/app/_pipes/utc-to-local-time.pipe.ts
View file

@ -16,7 +16,10 @@ type UtcToLocalTimeFormat = 'full' | 'short' | 'shortDate' | 'shortTime';
export class UtcToLocalTimePipe implements PipeTransform {
transform(utcDate: string | undefined | null, format: UtcToLocalTimeFormat = 'short'): string {
if (utcDate === undefined || utcDate === null) return '';
if (utcDate === '' || utcDate === null || utcDate === undefined || utcDate.split('T')[0] === '0001-01-01') {
return '';
}
const browserLanguage = navigator.language;
const dateTime = DateTime.fromISO(utcDate, { zone: 'utc' }).toLocal().setLocale(browserLanguage);

4
UI/Web/src/app/_pipes/writing-style.pipe.ts
View file

@ -1,6 +1,7 @@
import { Pipe, PipeTransform } from '@angular/core';
import {translate} from "@jsverse/transloco";
import {WritingStyle} from "../_models/preferences/writing-style";
import {ScalingOption} from "../_models/preferences/scaling-option";
@Pipe({
name: 'writingStyle',
@ -9,7 +10,8 @@ import {WritingStyle} from "../_models/preferences/writing-style";
export class WritingStylePipe implements PipeTransform {
transform(value: WritingStyle): string {
switch (value) {
const v = parseInt(value + '', 10) as WritingStyle;
switch (v) {
case WritingStyle.Horizontal: return translate('preferences.horizontal');
case WritingStyle.Vertical: return translate('preferences.vertical');
}

19
UI/Web/src/app/_services/account.service.ts
View file

@ -14,6 +14,7 @@ import { AgeRating } from '../_models/metadata/age-rating';
import { AgeRestriction } from '../_models/metadata/age-restriction';
import { TextResonse } from '../_types/text-response';
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import {Action} from "./action-factory.service";
export enum Role {
Admin = 'Admin',
@ -78,6 +79,18 @@ export class AccountService {
});
}
canInvokeAction(user: User, action: Action) {
const isAdmin = this.hasAdminRole(user);
const canDownload = this.hasDownloadRole(user);
const canPromote = this.hasPromoteRole(user);
if (isAdmin) return true;
if (action === Action.Download) return canDownload;
if (action === Action.Promote || action === Action.UnPromote) return canPromote;
if (action === Action.Delete) return isAdmin;
return true;
}
hasAnyRole(user: User, roles: Array<Role>) {
if (!user || !user.roles) {
return false;
@ -168,7 +181,7 @@ export class AccountService {
);
}
setCurrentUser(user?: User) {
setCurrentUser(user?: User, refreshConnections = true) {
if (user) {
user.roles = [];
const roles = this.getDecodedToken(user.token).role;
@ -189,6 +202,8 @@ export class AccountService {
this.currentUser = user;
this.currentUserSource.next(user);
if (!refreshConnections) return;
this.stopRefreshTokenTimer();
if (this.currentUser) {
@ -311,7 +326,7 @@ export class AccountService {
return this.httpClient.post<Preferences>(this.baseUrl + 'users/update-preferences', userPreferences).pipe(map(settings => {
if (this.currentUser !== undefined && this.currentUser !== null) {
this.currentUser.preferences = settings;
this.setCurrentUser(this.currentUser);
this.setCurrentUser(this.currentUser, false);
// Update the locale on disk (for logout and compact-number pipe)
localStorage.setItem(AccountService.localeKey, this.currentUser.preferences.locale);

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

@ -161,6 +161,7 @@ export class ActionFactoryService {
isAdmin = false;
constructor(private accountService: AccountService, private deviceService: DeviceService) {
this.accountService.currentUser$.subscribe((user) => {
if (user) {

2
UI/Web/src/app/_services/colorscape.service.ts
View file

@ -39,7 +39,7 @@ const colorScapeSelector = 'colorscape';
})
export class ColorscapeService {
private colorSubject = new BehaviorSubject<ColorSpaceRGBA | null>(null);
public colors$ = this.colorSubject.asObservable();
public readonly colors$ = this.colorSubject.asObservable();
private minDuration = 1000; // minimum duration
private maxDuration = 4000; // maximum duration

5
UI/Web/src/app/_services/series.service.ts
View file

@ -20,6 +20,7 @@ import {Rating} from "../_models/rating";
import {Recommendation} from "../_models/series-detail/recommendation";
import {ExternalSeriesDetail} from "../_models/series-detail/external-series-detail";
import {NextExpectedChapter} from "../_models/series-detail/next-expected-chapter";
import {QueryContext} from "../_models/metadata/v2/query-context";
@Injectable({
providedIn: 'root'
@ -33,12 +34,12 @@ export class SeriesService {
constructor(private httpClient: HttpClient, private imageService: ImageService,
private utilityService: UtilityService) { }
getAllSeriesV2(pageNum?: number, itemsPerPage?: number, filter?: SeriesFilterV2) {
getAllSeriesV2(pageNum?: number, itemsPerPage?: number, filter?: SeriesFilterV2, context: QueryContext = QueryContext.None) {
let params = new HttpParams();
params = this.utilityService.addPaginationIfExists(params, pageNum, itemsPerPage);
const data = filter || {};
return this.httpClient.post<PaginatedResult<Series[]>>(this.baseUrl + 'series/all-v2', data, {observe: 'response', params}).pipe(
return this.httpClient.post<PaginatedResult<Series[]>>(this.baseUrl + 'series/all-v2?context=' + context, data, {observe: 'response', params}).pipe(
map((response: any) => {
return this.utilityService.createPaginatedResult(response, this.paginatedResults);
})

7
UI/Web/src/app/_services/server.service.ts
View file

@ -17,6 +17,9 @@ export class ServerService {
constructor(private http: HttpClient) { }
getVersion(apiKey: string) {
return this.http.get<string>(this.baseUrl + 'plugin/version?apiKey=' + apiKey, TextResonse);
}
getServerInfo() {
return this.http.get<ServerInfoSlim>(this.baseUrl + 'server/server-info-slim');
@ -38,6 +41,10 @@ export class ServerService {
return this.http.post(this.baseUrl + 'server/analyze-files', {});
}
syncThemes() {
return this.http.post(this.baseUrl + 'server/sync-themes', {});
}
checkForUpdate() {
return this.http.get<UpdateVersionEvent | null>(this.baseUrl + 'server/check-update');
}

2
UI/Web/src/app/_single-module/card-actionables/card-actionables.component.html
View file

@ -21,7 +21,7 @@
} @else {
@if (shouldRenderSubMenu(action, action.children?.[0].dynamicList | async)) {
<!-- Submenu items -->
<div ngbDropdown #subMenuHover="ngbDropdown" placement="right-top"
<div ngbDropdown #subMenuHover="ngbDropdown" placement="right left"
(click)="preventEvent($event); openSubmenu(action.title, subMenuHover)"
(mouseover)="preventEvent($event); openSubmenu(action.title, subMenuHover)"
(mouseleave)="preventEvent($event)">

4
UI/Web/src/app/_single-module/details-tab/details-tab.component.html
View file

@ -2,7 +2,7 @@
<div class="details pb-3">
<div class="mb-3">
<h4 class="header">{{t('genres-title')}}</h4>
<app-badge-expander [includeComma]="true" [items]="genres">
<app-badge-expander [includeComma]="true" [items]="genres" [itemsTillExpander]="3">
<ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
<a href="javascript:void(0)" class="dark-exempt btn-icon" (click)="openGeneric(FilterField.Genres, item.id)">{{item.title}}</a>
</ng-template>
@ -11,7 +11,7 @@
<div class="mb-3">
<h4 class="header">{{t('tags-title')}}</h4>
<app-badge-expander [includeComma]="true" [items]="tags">
<app-badge-expander [includeComma]="true" [items]="tags" [itemsTillExpander]="3">
<ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
<a href="javascript:void(0)" class="dark-exempt btn-icon" (click)="openGeneric(FilterField.Tags, item.id)">{{item.title}}</a>
</ng-template>

861
UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.html
View file

@ -10,463 +10,478 @@
<ul ngbNav #nav="ngbNav" [(activeId)]="activeId" class="nav-pills" orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 135px;">
<!-- General Tab -->
<li [ngbNavItem]="TabID.General">
<a ngbNavLink>{{t(TabID.General)}}</a>
<ng-template ngbNavContent>
<div class="row g-0">
<div class="col-md-9 col-sm-12 mb-3">
<app-setting-item [title]="t('title-label')" [showEdit]="false" [toggleOnViewClick]="false">
<ng-template #view>
@if (editForm.get('titleName'); as formControl) {
<div class="input-group" [ngClass]="{'lock-active': chapter.titleNameLocked}">
<ng-container [ngTemplateOutlet]="lock" [ngTemplateOutletContext]="{ item: chapter, field: 'titleNameLocked' }"></ng-container>
<input class="form-control" formControlName="titleName" type="text"
[class.is-invalid]="formControl.invalid && formControl.touched">
@if (formControl.errors; as errors) {
<div class="invalid-feedback">
@if (errors.required) {
<div>{{t('required-field')}}</div>
}
</div>
}
</div>
}
</ng-template>
</app-setting-item>
</div>
<div class="col-md-3 col-sm-12 mb-3">
<app-setting-item [title]="t('sort-order-label')" [showEdit]="false" [toggleOnViewClick]="false">
<ng-template #view>
@if (editForm.get('sortOrder'); as formControl) {
<div class="input-group" [ngClass]="{'lock-active': chapter.sortOrderLocked}">
<ng-container [ngTemplateOutlet]="lock" [ngTemplateOutletContext]="{ item: chapter, field: 'sortOrderLocked' }"></ng-container>
<input class="form-control" formControlName="sortOrder" type="number" min="0" step="0.1" inputmode="numeric"
[class.is-invalid]="formControl.invalid && formControl.touched">
@if (formControl.errors; as errors) {
<div class="invalid-feedback">
@if (errors.required) {
<div>{{t('required-field')}}</div>
}
</div>
}
</div>
}
</ng-template>
</app-setting-item>
</div>
</div>
<div class="row g-0">
<div class="col-md-9 col-sm-12 mb-3">
<app-setting-item [title]="t('isbn-label')" [showEdit]="false" [toggleOnViewClick]="false">
<ng-template #view>
@if (editForm.get('isbn'); as formControl) {
<div class="input-group" [ngClass]="{'lock-active': chapter.isbnLocked}">
<ng-container [ngTemplateOutlet]="lock" [ngTemplateOutletContext]="{ item: chapter, field: 'isbnLocked' }"></ng-container>
<input class="form-control" formControlName="isbn" type="text"
[class.is-invalid]="formControl.invalid && formControl.touched">
@if (formControl.errors; as errors) {
<div class="invalid-feedback">
@if (errors.required) {
<div>{{t('required-field')}}</div>
}
</div>
}
</div>
}
</ng-template>
</app-setting-item>
</div>
<div class="col-md-3 col-sm-12 mb-3">
<app-setting-item [title]="t('age-rating-label')" [showEdit]="false" [toggleOnViewClick]="false">
<ng-template #view>
@if (editForm.get('ageRating'); as formControl) {
<div class="input-group" [ngClass]="{'lock-active': chapter.ageRatingLocked}">
<ng-container [ngTemplateOutlet]="lock" [ngTemplateOutletContext]="{ item: chapter, field: 'ageRatingLocked' }"></ng-container>
<select class="form-select" id="age-rating" formControlName="ageRating">
@for(opt of ageRatings; track opt.value) {
<option [value]="opt.value">{{opt.title | titlecase}}</option>
@if (user && accountService.hasAdminRole(user))
{
<li [ngbNavItem]="TabID.General">
<a ngbNavLink>{{t(TabID.General)}}</a>
<ng-template ngbNavContent>
<div class="row g-0">
<div class="col-md-9 col-sm-12 mb-3">
<app-setting-item [title]="t('title-label')" [showEdit]="false" [toggleOnViewClick]="false">
<ng-template #view>
@if (editForm.get('titleName'); as formControl) {
<div class="input-group" [ngClass]="{'lock-active': chapter.titleNameLocked}">
<ng-container [ngTemplateOutlet]="lock" [ngTemplateOutletContext]="{ item: chapter, field: 'titleNameLocked' }"></ng-container>
<input class="form-control" formControlName="titleName" type="text"
[class.is-invalid]="formControl.invalid && formControl.touched">
@if (formControl.errors; as errors) {
<div class="invalid-feedback">
@if (errors.required) {
<div>{{t('required-field')}}</div>
}
</div>
}
</select>
</div>
}
</ng-template>
</app-setting-item>
</div>
</div>
</div>
}
</ng-template>
</app-setting-item>
</div>
<div class="row g-0">
<div class="col-lg-9 col-md-12">
<div class="mb-3">
<app-setting-item [title]="t('language-label')" [toggleOnViewClick]="false" [showEdit]="false">
<div class="col-md-3 col-sm-12 mb-3">
<app-setting-item [title]="t('sort-order-label')" [showEdit]="false" [toggleOnViewClick]="false">
<ng-template #view>
<app-typeahead (selectedData)="updateLanguage($event)" [settings]="languageSettings"
[(locked)]="chapter.languageLocked" (onUnlock)="chapter.languageLocked = false"
(newItemAdded)="chapter.languageLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.title}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.title}} ({{item.isoCode}})
</ng-template>
</app-typeahead>
@if (editForm.get('sortOrder'); as formControl) {
<div class="input-group" [ngClass]="{'lock-active': chapter.sortOrderLocked}">
<ng-container [ngTemplateOutlet]="lock" [ngTemplateOutletContext]="{ item: chapter, field: 'sortOrderLocked' }"></ng-container>
<input class="form-control" formControlName="sortOrder" type="number" min="0" step="0.1" inputmode="numeric"
[class.is-invalid]="formControl.invalid && formControl.touched">
@if (formControl.errors; as errors) {
<div class="invalid-feedback">
@if (errors.required) {
<div>{{t('required-field')}}</div>
}
</div>
}
</div>
}
</ng-template>
</app-setting-item>
</div>
</div>
<div class="col-lg-3 col-md-12">
<div class="mb-3">
<app-setting-item [title]="t('release-date-label')" [toggleOnViewClick]="false" [showEdit]="false">
<div class="row g-0">
<div class="col-md-9 col-sm-12 mb-3">
<app-setting-item [title]="t('isbn-label')" [showEdit]="false" [toggleOnViewClick]="false">
<ng-template #view>
<div class="input-group" [ngClass]="{'lock-active': chapter.releaseDateLocked}">
<ng-container [ngTemplateOutlet]="lock" [ngTemplateOutletContext]="{ item: chapter, field: 'releaseDateLocked' }"></ng-container>
<input
class="form-control"
formControlName="releaseDate"
type="date"
/>
</div>
@if (editForm.get('isbn'); as formControl) {
<div class="input-group" [ngClass]="{'lock-active': chapter.isbnLocked}">
<ng-container [ngTemplateOutlet]="lock" [ngTemplateOutletContext]="{ item: chapter, field: 'isbnLocked' }"></ng-container>
<input class="form-control" formControlName="isbn" type="text"
[class.is-invalid]="formControl.invalid && formControl.touched">
@if (formControl.errors; as errors) {
<div class="invalid-feedback">
@if (errors.required) {
<div>{{t('required-field')}}</div>
}
</div>
}
</div>
}
</ng-template>
</app-setting-item>
</div>
<div class="col-md-3 col-sm-12 mb-3">
<app-setting-item [title]="t('age-rating-label')" [showEdit]="false" [toggleOnViewClick]="false">
<ng-template #view>
@if (editForm.get('ageRating'); as formControl) {
<div class="input-group" [ngClass]="{'lock-active': chapter.ageRatingLocked}">
<ng-container [ngTemplateOutlet]="lock" [ngTemplateOutletContext]="{ item: chapter, field: 'ageRatingLocked' }"></ng-container>
<select class="form-select" id="age-rating" formControlName="ageRating">
@for(opt of ageRatings; track opt.value) {
<option [value]="opt.value">{{opt.title | titlecase}}</option>
}
</select>
</div>
}
</ng-template>
</app-setting-item>
</div>
</div>
</div>
<div class="row g-0">
<div class="mb-3" style="width: 100%">
<app-setting-item [title]="t('summary-label')" [showEdit]="false" [toggleOnViewClick]="false">
<ng-template #view>
@if (editForm.get('summary'); as formControl) {
<div class="input-group" [ngClass]="{'lock-active': chapter.summaryLocked}">
<ng-container [ngTemplateOutlet]="lock" [ngTemplateOutletContext]="{ item: chapter, field: 'summaryLocked' }"></ng-container>
<textarea id="summary" class="form-control" formControlName="summary" rows="4"></textarea>
</div>
}
</ng-template>
</app-setting-item>
<div class="row g-0">
<div class="col-lg-9 col-md-12">
<div class="mb-3">
<app-setting-item [title]="t('language-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updateLanguage($event)" [settings]="languageSettings"
[(locked)]="chapter.languageLocked" (onUnlock)="chapter.languageLocked = false"
(newItemAdded)="chapter.languageLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.title}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.title}} ({{item.isoCode}})
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
</div>
</div>
<div class="col-lg-3 col-md-12">
<div class="mb-3">
<app-setting-item [title]="t('release-date-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<div class="input-group" [ngClass]="{'lock-active': chapter.releaseDateLocked}">
<ng-container [ngTemplateOutlet]="lock" [ngTemplateOutletContext]="{ item: chapter, field: 'releaseDateLocked' }"></ng-container>
<input
class="form-control"
formControlName="releaseDate"
type="date"
/>
</div>
</ng-template>
</app-setting-item>
</div>
</div>
</div>
</div>
</ng-template>
</li>
<div class="row g-0">
<div class="mb-3" style="width: 100%">
<app-setting-item [title]="t('summary-label')" [showEdit]="false" [toggleOnViewClick]="false">
<ng-template #view>
@if (editForm.get('summary'); as formControl) {
<div class="input-group" [ngClass]="{'lock-active': chapter.summaryLocked}">
<ng-container [ngTemplateOutlet]="lock" [ngTemplateOutletContext]="{ item: chapter, field: 'summaryLocked' }"></ng-container>
<textarea id="summary" class="form-control" formControlName="summary" rows="4"></textarea>
</div>
}
</ng-template>
</app-setting-item>
</div>
</div>
</ng-template>
</li>
}
<!-- Tags Tab -->
<li [ngbNavItem]="TabID.Tags">
<a ngbNavLink>{{t(TabID.Tags)}}</a>
<ng-template ngbNavContent>
<!-- genre & tag -->
<div class="row g-0">
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('genres-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updateGenres($event);chapter.genresLocked = true" [settings]="genreSettings"
[(locked)]="chapter.genresLocked" (onUnlock)="chapter.genresLocked = false"
(newItemAdded)="chapter.genresLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.title}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.title}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
@if (user && accountService.hasAdminRole(user))
{
<li [ngbNavItem]="TabID.Tags">
<a ngbNavLink>{{t(TabID.Tags)}}</a>
<ng-template ngbNavContent>
<!-- genre & tag -->
<div class="row g-0">
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('genres-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updateGenres($event);chapter.genresLocked = true" [settings]="genreSettings"
[(locked)]="chapter.genresLocked" (onUnlock)="chapter.genresLocked = false"
(newItemAdded)="chapter.genresLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.title}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.title}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
</div>
</div>
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('tags-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updateTags($event);chapter.tagsLocked = true" [settings]="tagsSettings"
[(locked)]="chapter.tagsLocked" (onUnlock)="chapter.tagsLocked = false"
(newItemAdded)="chapter.tagsLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('tags-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updateTags($event);chapter.tagsLocked = true" [settings]="tagsSettings"
[(locked)]="chapter.tagsLocked" (onUnlock)="chapter.tagsLocked = false"
(newItemAdded)="chapter.tagsLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
<!-- imprint & publisher -->
<div class="row g-0">
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('imprint-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.Imprint);chapter.imprintLocked = true" [settings]="getPersonsSettings(PersonRole.Imprint)"
[(locked)]="chapter.imprintLocked" (onUnlock)="chapter.imprintLocked = false"
(newItemAdded)="chapter.imprintLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
</div>
</div>
</div>
</div>
<!-- imprint & publisher -->
<div class="row g-0">
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('imprint-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.Imprint);chapter.imprintLocked = true" [settings]="getPersonsSettings(PersonRole.Imprint)"
[(locked)]="chapter.imprintLocked" (onUnlock)="chapter.imprintLocked = false"
(newItemAdded)="chapter.imprintLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('publisher-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.Publisher);chapter.publisherLocked = true" [settings]="getPersonsSettings(PersonRole.Publisher)"
[(locked)]="chapter.publisherLocked" (onUnlock)="chapter.publisherLocked = false"
(newItemAdded)="chapter.publisherLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('publisher-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.Publisher);chapter.publisherLocked = true" [settings]="getPersonsSettings(PersonRole.Publisher)"
[(locked)]="chapter.publisherLocked" (onUnlock)="chapter.publisherLocked = false"
(newItemAdded)="chapter.publisherLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
<!-- team & location -->
<div class="row g-0">
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('team-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.Team);chapter.teamLocked = true" [settings]="getPersonsSettings(PersonRole.Team)"
[(locked)]="chapter.teamLocked" (onUnlock)="chapter.teamLocked = false"
(newItemAdded)="chapter.teamLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
</div>
</div>
</div>
</div>
<!-- team & location -->
<div class="row g-0">
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('team-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.Team);chapter.teamLocked = true" [settings]="getPersonsSettings(PersonRole.Team)"
[(locked)]="chapter.teamLocked" (onUnlock)="chapter.teamLocked = false"
(newItemAdded)="chapter.teamLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('location-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.Location);chapter.locationLocked = true" [settings]="getPersonsSettings(PersonRole.Location)"
[(locked)]="chapter.locationLocked" (onUnlock)="chapter.locationLocked = false"
(newItemAdded)="chapter.locationLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('location-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.Location);chapter.locationLocked = true" [settings]="getPersonsSettings(PersonRole.Location)"
[(locked)]="chapter.locationLocked" (onUnlock)="chapter.locationLocked = false"
(newItemAdded)="chapter.locationLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
<!-- character -->
<div class="row g-0">
<div class="col-lg-12 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('character-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.Character);chapter.characterLocked = true" [settings]="getPersonsSettings(PersonRole.Character)"
[(locked)]="chapter.characterLocked" (onUnlock)="chapter.characterLocked = false"
(newItemAdded)="chapter.characterLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
</div>
</div>
</div>
</div>
<!-- character -->
<div class="row g-0">
<div class="col-lg-12 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('character-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.Character);chapter.characterLocked = true" [settings]="getPersonsSettings(PersonRole.Character)"
[(locked)]="chapter.characterLocked" (onUnlock)="chapter.characterLocked = false"
(newItemAdded)="chapter.characterLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
</div>
</div>
</div>
</ng-template>
</li>
}
</ng-template>
</li>
<!-- People Tab -->
<li [ngbNavItem]="TabID.People">
<a ngbNavLink>{{t(TabID.People)}}</a>
<ng-template ngbNavContent>
<!-- writer & cover artist -->
<div class="row g-0">
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('writer-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.Writer);chapter.writerLocked = true" [settings]="getPersonsSettings(PersonRole.Writer)"
[(locked)]="chapter.writerLocked" (onUnlock)="chapter.writerLocked = false"
(newItemAdded)="chapter.writerLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
@if (user && accountService.hasAdminRole(user))
{
<li [ngbNavItem]="TabID.People">
<a ngbNavLink>{{t(TabID.People)}}</a>
<ng-template ngbNavContent>
<!-- writer & cover artist -->
<div class="row g-0">
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('writer-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.Writer);chapter.writerLocked = true" [settings]="getPersonsSettings(PersonRole.Writer)"
[(locked)]="chapter.writerLocked" (onUnlock)="chapter.writerLocked = false"
(newItemAdded)="chapter.writerLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
</div>
</div>
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('cover-artist-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.CoverArtist);chapter.coverArtistLocked = true" [settings]="getPersonsSettings(PersonRole.CoverArtist)"
[(locked)]="chapter.coverArtistLocked" (onUnlock)="chapter.coverArtistLocked = false"
(newItemAdded)="chapter.coverArtistLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('cover-artist-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.CoverArtist);chapter.coverArtistLocked = true" [settings]="getPersonsSettings(PersonRole.CoverArtist)"
[(locked)]="chapter.coverArtistLocked" (onUnlock)="chapter.coverArtistLocked = false"
(newItemAdded)="chapter.coverArtistLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
<!-- penciller & colorist -->
<div class="row g-0">
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('penciller-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.Penciller);chapter.pencillerLocked = true" [settings]="getPersonsSettings(PersonRole.Penciller)"
[(locked)]="chapter.pencillerLocked" (onUnlock)="chapter.pencillerLocked = false"
(newItemAdded)="chapter.pencillerLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
</div>
</div>
</div>
</div>
<!-- penciller & colorist -->
<div class="row g-0">
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('penciller-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.Penciller);chapter.pencillerLocked = true" [settings]="getPersonsSettings(PersonRole.Penciller)"
[(locked)]="chapter.pencillerLocked" (onUnlock)="chapter.pencillerLocked = false"
(newItemAdded)="chapter.pencillerLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('colorist-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.Colorist);chapter.coloristLocked = true" [settings]="getPersonsSettings(PersonRole.Colorist)"
[(locked)]="chapter.coloristLocked" (onUnlock)="chapter.coloristLocked = false"
(newItemAdded)="chapter.coloristLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('colorist-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.Colorist);chapter.coloristLocked = true" [settings]="getPersonsSettings(PersonRole.Colorist)"
[(locked)]="chapter.coloristLocked" (onUnlock)="chapter.coloristLocked = false"
(newItemAdded)="chapter.coloristLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
<!-- inker & letterer -->
<div class="row g-0">
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('inker-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.Inker);chapter.inkerLocked = true" [settings]="getPersonsSettings(PersonRole.Inker)"
[(locked)]="chapter.inkerLocked" (onUnlock)="chapter.inkerLocked = false"
(newItemAdded)="chapter.inkerLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
</div>
</div>
</div>
</div>
<!-- inker & letterer -->
<div class="row g-0">
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('inker-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.Inker);chapter.inkerLocked = true" [settings]="getPersonsSettings(PersonRole.Inker)"
[(locked)]="chapter.inkerLocked" (onUnlock)="chapter.inkerLocked = false"
(newItemAdded)="chapter.inkerLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('letterer-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.Letterer);chapter.lettererLocked = true" [settings]="getPersonsSettings(PersonRole.Letterer)"
[(locked)]="chapter.lettererLocked" (onUnlock)="chapter.lettererLocked = false"
(newItemAdded)="chapter.lettererLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('letterer-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.Letterer);chapter.lettererLocked = true" [settings]="getPersonsSettings(PersonRole.Letterer)"
[(locked)]="chapter.lettererLocked" (onUnlock)="chapter.lettererLocked = false"
(newItemAdded)="chapter.lettererLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
<!-- translator -->
<div class="row g-0">
<div class="col-lg-12 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('translator-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.Translator);chapter.translatorLocked = true" [settings]="getPersonsSettings(PersonRole.Translator)"
[(locked)]="chapter.translatorLocked" (onUnlock)="chapter.translatorLocked = false"
(newItemAdded)="chapter.translatorLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
</div>
</div>
</div>
</div>
<!-- translator -->
<div class="row g-0">
<div class="col-lg-12 col-md-12 pe-2">
<div class="mb-3">
<app-setting-item [title]="t('translator-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
<app-typeahead (selectedData)="updatePerson($event, PersonRole.Translator);chapter.translatorLocked = true" [settings]="getPersonsSettings(PersonRole.Translator)"
[(locked)]="chapter.translatorLocked" (onUnlock)="chapter.translatorLocked = false"
(newItemAdded)="chapter.translatorLocked = true">
<ng-template #badgeItem let-item let-position="idx">
{{item.name}}
</ng-template>
<ng-template #optionItem let-item let-position="idx">
{{item.name}}
</ng-template>
</app-typeahead>
</ng-template>
</app-setting-item>
</div>
</div>
</div>
</ng-template>
</li>
}
</ng-template>
</li>
<!-- Cover Tab -->
<li [ngbNavItem]="TabID.CoverImage">
<a ngbNavLink>{{t(TabID.CoverImage)}}</a>
<ng-template ngbNavContent>
<p class="alert alert-warning" role="alert">
{{t('cover-image-description')}}
</p>
<app-cover-image-chooser [(imageUrls)]="imageUrls" (imageSelected)="updateSelectedIndex($event)" (selectedBase64Url)="updateSelectedImage($event)"
[showReset]="chapter.coverImageLocked" (resetClicked)="handleReset()"></app-cover-image-chooser>
</ng-template>
</li>
@if (user && accountService.hasAdminRole(user))
{
<li [ngbNavItem]="TabID.CoverImage">
<a ngbNavLink>{{t(TabID.CoverImage)}}</a>
<ng-template ngbNavContent>
<p class="alert alert-warning" role="alert">
{{t('cover-image-description')}}
</p>
<app-cover-image-chooser [(imageUrls)]="imageUrls" (imageSelected)="updateSelectedIndex($event)" (selectedBase64Url)="updateSelectedImage($event)"
[showReset]="chapter.coverImageLocked" (resetClicked)="handleReset()"></app-cover-image-chooser>
</ng-template>
</li>
}
<!-- Info Tab -->
<li [ngbNavItem]="TabID.Info">
@ -539,30 +554,34 @@
@if (WebLinks.length > 0) {
<div class="setting-section-break"></div>
<div class="row g-0">
<div class="col-auto">
<app-icon-and-title [label]="t('links-title')" [clickable]="false" fontClasses="fa-solid fa-link" [title]="t('links-title')">
<div class="container-fluid mb-3">
<div class="row g-0">
<h6 class="section-title">{{t('links-label')}}</h6>
<div class="col-auto">
@for(link of WebLinks; track link) {
<a class="me-1" [href]="link | safeHtml" target="_blank" rel="noopener noreferrer" [title]="link">
<app-image height="24px" width="24px" aria-hidden="true" [imageUrl]="imageService.getWebLinkImage(link)"
[errorImage]="imageService.errorWebLinkImage"></app-image>
</a>
}
</app-icon-and-title>
</div>
</div>
</div>
}
@if (accountService.isAdmin$ | async) {
<app-setting-item [title]="t('files-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
@for (file of chapter.files; track file.id) {
<div>
<span>{{file.filePath}}</span><span class="ms-2 me-2">•</span><span>{{file.bytes | bytes}}</span>
</div>
}
</ng-template>
</app-setting-item>
<div class="row g-0">
<app-setting-item [title]="t('files-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
@for (file of chapter.files; track file.id) {
<div>
<span>{{file.filePath}}</span><span class="ms-2 me-2">•</span><span>{{file.bytes | bytes}}</span>
</div>
}
</ng-template>
</app-setting-item>
</div>
}
</ng-template>
@ -581,11 +600,13 @@
<a ngbNavLink>{{t(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>
@if (accountService.canInvokeAction(user, 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>

18
UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.ts
View file

@ -36,7 +36,7 @@ import {ActionService} from "../../_services/action.service";
import {DownloadService} from "../../shared/_services/download.service";
import {SettingItemComponent} from "../../settings/_components/setting-item/setting-item.component";
import {TypeaheadComponent} from "../../typeahead/_components/typeahead.component";
import {forkJoin, Observable, of} from "rxjs";
import {forkJoin, Observable, of, tap} from "rxjs";
import {map} from "rxjs/operators";
import {EntityTitleComponent} from "../../cards/entity-title/entity-title.component";
import {SettingButtonComponent} from "../../settings/_components/setting-button/setting-button.component";
@ -55,6 +55,8 @@ import {SafeHtmlPipe} from "../../_pipes/safe-html.pipe";
import {ReadTimePipe} from "../../_pipes/read-time.pipe";
import {ChapterService} from "../../_services/chapter.service";
import {AgeRating} from "../../_models/metadata/age-rating";
import {User} from "../../_models/user";
import {SettingTitleComponent} from "../../settings/_components/setting-title/setting-title.component";
enum TabID {
General = 'general-tab',
@ -109,7 +111,8 @@ const blackList = [Action.Edit, Action.IncognitoRead, Action.AddToReadingList];
SafeHtmlPipe,
DecimalPipe,
DatePipe,
ReadTimePipe
ReadTimePipe,
SettingTitleComponent
],
templateUrl: './edit-chapter-modal.component.html',
styleUrl: './edit-chapter-modal.component.scss',
@ -163,6 +166,7 @@ export class EditChapterModalComponent implements OnInit {
initChapter!: Chapter;
imageUrls: Array<string> = [];
size: number = 0;
user!: User;
get WebLinks() {
if (this.chapter.webLinks === '') return [];
@ -176,7 +180,16 @@ export class EditChapterModalComponent implements OnInit {
this.imageUrls.push(this.imageService.getChapterCoverImage(this.chapter.id));
this.size = this.utilityService.asChapter(this.chapter).files.reduce((sum, v) => sum + v.bytes, 0);
this.accountService.currentUser$.pipe(takeUntilDestroyed(this.destroyRef), tap(u => {
if (!u) return;
this.user = u;
if (!this.accountService.hasAdminRole(this.user)) {
this.activeId = TabID.Info;
}
this.cdRef.markForCheck();
})).subscribe();
this.editForm.addControl('titleName', new FormControl(this.chapter.titleName, []));
this.editForm.addControl('sortOrder', new FormControl(this.chapter.sortOrder, [Validators.required, Validators.min(0)]));
@ -239,6 +252,7 @@ export class EditChapterModalComponent implements OnInit {
}
close() {
this.modal.dismiss();
}

40
UI/Web/src/app/_single-module/edit-volume-modal/edit-volume-modal.component.html
View file

@ -8,18 +8,6 @@
<form [formGroup]="editForm">
<ul ngbNav #nav="ngbNav" [(activeId)]="activeId" class="nav-pills" orientation="{{utilityService.getActiveBreakpoint() === Breakpoint.Mobile ? 'horizontal' : 'vertical'}}" style="min-width: 135px;">
<!-- Cover Tab -->
<li [ngbNavItem]="TabID.CoverImage">
<a ngbNavLink>{{t(TabID.CoverImage)}}</a>
<ng-template ngbNavContent>
<p class="alert alert-warning" role="alert">
{{t('cover-image-description')}}
</p>
<app-cover-image-chooser [(imageUrls)]="imageUrls" (imageSelected)="updateSelectedIndex($event)" (selectedBase64Url)="updateSelectedImage($event)"
[showReset]="true" (resetClicked)="handleReset()"></app-cover-image-chooser>
</ng-template>
</li>
<!-- Info Tab -->
<li [ngbNavItem]="TabID.Info">
<a ngbNavLink>{{t(TabID.Info)}}</a>
@ -88,7 +76,7 @@
</div>
</div>
@if (accountService.isAdmin$ | async) {
@if (user && accountService.hasAdminRole(user)) {
<app-setting-item [title]="t('files-label')" [toggleOnViewClick]="false" [showEdit]="false">
<ng-template #view>
@for (file of files; track file.id) {
@ -103,6 +91,20 @@
</ng-template>
</li>
<!-- Cover Tab -->
@if (user && accountService.hasAdminRole(user)) {
<li [ngbNavItem]="TabID.CoverImage">
<a ngbNavLink>{{t(TabID.CoverImage)}}</a>
<ng-template ngbNavContent>
<p class="alert alert-warning" role="alert">
{{t('cover-image-description')}}
</p>
<app-cover-image-chooser [(imageUrls)]="imageUrls" (imageSelected)="updateSelectedIndex($event)" (selectedBase64Url)="updateSelectedImage($event)"
[showReset]="true" (resetClicked)="handleReset()"></app-cover-image-chooser>
</ng-template>
</li>
}
<!-- Progress Tab -->
<li [ngbNavItem]="TabID.Progress">
<a ngbNavLink>{{t(TabID.Progress)}}</a>
@ -120,11 +122,13 @@
<a ngbNavLink>{{t(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>
@if (accountService.canInvokeAction(user, 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>

15
UI/Web/src/app/_single-module/edit-volume-modal/edit-volume-modal.component.ts
View file

@ -40,6 +40,8 @@ import {forkJoin} from "rxjs";
import { MangaFormat } from 'src/app/_models/manga-format';
import {MangaFile} from "../../_models/manga-file";
import {VolumeService} from "../../_services/volume.service";
import {User} from "../../_models/user";
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
enum TabID {
General = 'general-tab',
@ -121,10 +123,11 @@ export class EditVolumeModalComponent implements OnInit {
@Input({required: true}) libraryId!: number;
@Input({required: true}) seriesId!: number;
activeId = TabID.CoverImage;
activeId = TabID.Info;
editForm: FormGroup = new FormGroup({});
selectedCover: string = '';
coverImageReset = false;
user!: User;
tasks = this.actionFactoryService.getActionablesForSettingsPage(this.actionFactoryService.getVolumeActions(this.runTask.bind(this)), blackList);
@ -136,6 +139,16 @@ export class EditVolumeModalComponent implements OnInit {
size: number = 0;
files: Array<MangaFile> = [];
constructor() {
this.accountService.currentUser$.subscribe(user => {
this.user = user!;
if (!this.accountService.hasAdminRole(user!)) {
this.activeId = TabID.Info;
}
this.cdRef.markForCheck();
});
}
ngOnInit() {

4
UI/Web/src/app/_single-modules/related-tab/related-tab.component.html
View file

@ -13,7 +13,7 @@
<ng-template #carouselItem let-item>
<app-card-item [title]="item.title" [entity]="item"
[suppressLibraryLink]="true" [imageUrl]="imageService.getCollectionCoverImage(item.id)"
(clicked)="openCollection(item)" [linkUrl]="'/collections/' + item.id"></app-card-item>
(clicked)="openCollection(item)" [linkUrl]="'/collections/' + item.id" [showFormat]="false"></app-card-item>
</ng-template>
</app-carousel-reel>
}
@ -24,7 +24,7 @@
<ng-template #carouselItem let-item>
<app-card-item [title]="item.title" [entity]="item"
[suppressLibraryLink]="true" [imageUrl]="imageService.getReadingListCoverImage(item.id)"
(clicked)="openReadingList(item)" [linkUrl]="'/lists/' + item.id"></app-card-item>
(clicked)="openReadingList(item)" [linkUrl]="'/lists/' + item.id" [showFormat]="false"></app-card-item>
</ng-template>
</app-carousel-reel>
}

83
UI/Web/src/app/admin/edit-user/edit-user.component.html
View file

@ -9,42 +9,49 @@
<div class="modal-body scrollable-modal">
<form [formGroup]="userForm">
<div class="row g-0">
<div class="col-md-6 col-sm-12 pe-4">
<div class="mb-3">
<label for="username" class="form-label">{{t('username')}}</label>
<input id="username" class="form-control" formControlName="username" type="text"
[class.is-invalid]="userForm.get('username')?.invalid && userForm.get('username')?.touched" aria-describedby="username-validations">
<div id="username-validations" class="invalid-feedback" *ngIf="userForm.dirty || userForm.touched">
<div *ngIf="userForm.get('username')?.errors?.required">
{{t('required')}}
</div>
<div *ngIf="userForm.get('username')?.errors?.pattern">
{{t('username-pattern', {characters: allowedCharacters})}}
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="mb-3" style="width:100%">
<label for="email" class="form-label">{{t('email')}}</label>
<input class="form-control" inputmode="email" type="email" id="email"
[class.is-invalid]="userForm.get('email')?.invalid && userForm.get('email')?.touched"
formControlName="email" aria-describedby="email-validations">
<div id="email-validations" class="invalid-feedback"
*ngIf="userForm.dirty || userForm.touched">
<div *ngIf="userForm.get('email')?.errors?.required">
{{t('required')}}
</div>
<div *ngIf="userForm.get('email')?.errors?.email">
{{t('not-valid-email')}}
</div>
</div>
</div>
</div>
</div>
<h4>{{t('account-detail-title')}}</h4>
<div class="row g-0 mb-2">
<div class="col-md-6 col-sm-12 pe-4">
<div class="mb-3">
<label for="username" class="form-label">{{t('username')}}</label>
<input id="username" class="form-control" formControlName="username" type="text"
[class.is-invalid]="userForm.get('username')?.invalid && userForm.get('username')?.touched" aria-describedby="username-validations">
<div id="username-validations" class="invalid-feedback" *ngIf="userForm.dirty || userForm.touched">
<div *ngIf="userForm.get('username')?.errors?.required">
{{t('required')}}
</div>
<div *ngIf="userForm.get('username')?.errors?.pattern">
{{t('username-pattern', {characters: allowedCharacters})}}
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="mb-3" style="width:100%">
<label for="email" class="form-label">{{t('email')}}</label>
<input class="form-control" inputmode="email" type="email" id="email"
[class.is-invalid]="userForm.get('email')?.invalid && userForm.get('email')?.touched"
formControlName="email" aria-describedby="email-validations">
<div id="email-validations" class="invalid-feedback"
*ngIf="userForm.dirty || userForm.touched">
<div *ngIf="userForm.get('email')?.errors?.required">
{{t('required')}}
</div>
<div *ngIf="userForm.get('email')?.errors?.email">
{{t('not-valid-email')}}
</div>
</div>
</div>
</div>
</div>
<div class="row g-0">
<div class="row g-0 mb-3">
<div class="col-md-12">
<app-restriction-selector (selected)="updateRestrictionSelection($event)" [isAdmin]="hasAdminRoleSelected" [member]="member"></app-restriction-selector>
</div>
</div>
<div class="row g-0 mb-3">
<div class="col-md-6 pe-4">
<app-role-selector (selected)="updateRoleSelection($event)" [allowAdmin]="true" [member]="member"></app-role-selector>
</div>
@ -53,12 +60,6 @@
<app-library-selector (selected)="updateLibrarySelection($event)" [member]="member"></app-library-selector>
</div>
</div>
<div class="row g-0 mt-3">
<div class="col-md-12">
<app-restriction-selector (selected)="updateRestrictionSelection($event)" [isAdmin]="hasAdminRoleSelected" [member]="member"></app-restriction-selector>
</div>
</div>
</form>
</div>

18
UI/Web/src/app/admin/manage-library/manage-library.component.html
View file

@ -5,6 +5,8 @@
</button>
</div>
<!-- TODO: We need a filter bar when there is more than 10 libraries -->
<table class="table table-striped">
<thead>
<tr>
@ -31,15 +33,13 @@
{{library.lastScanned | timeAgo | defaultDate}}
</td>
<td>
<div class="float-end">
@if (useActionables$ | async) {
<app-card-actionables [actions]="actions" (actionHandler)="performAction($event, library)"></app-card-actionables>
} @else {
<button class="btn btn-secondary me-2 btn-sm" (click)="scanLibrary(library)" placement="top" [ngbTooltip]="t('scan-library')" [attr.aria-label]="t('scan-library')"><i class="fa fa-sync-alt" aria-hidden="true"></i></button>
<button class="btn btn-danger me-2 btn-sm" [disabled]="deletionInProgress" (click)="deleteLibrary(library)"><i class="fa fa-trash" placement="top" [ngbTooltip]="t('delete-library')" [attr.aria-label]="t('delete-library-by-name', {name: library.name | sentenceCase})"></i></button>
<button class="btn btn-primary btn-sm" (click)="editLibrary(library)"><i class="fa fa-pen" placement="top" [ngbTooltip]="t('edit-library')" [attr.aria-label]="t('edit-library-by-name', {name: library.name | sentenceCase})"></i></button>
}
</div>
@if (useActionables$ | async) {
<app-card-actionables [actions]="actions" (actionHandler)="performAction($event, library)"></app-card-actionables>
} @else {
<button class="btn btn-secondary me-2 btn-sm" (click)="scanLibrary(library)" placement="top" [ngbTooltip]="t('scan-library')" [attr.aria-label]="t('scan-library')"><i class="fa fa-sync-alt" aria-hidden="true"></i></button>
<button class="btn btn-danger me-2 btn-sm" [disabled]="deletionInProgress" (click)="deleteLibrary(library)"><i class="fa fa-trash" placement="top" [ngbTooltip]="t('delete-library')" [attr.aria-label]="t('delete-library-by-name', {name: library.name | sentenceCase})"></i></button>
<button class="btn btn-primary btn-sm" (click)="editLibrary(library)"><i class="fa fa-pen" placement="top" [ngbTooltip]="t('edit-library')" [attr.aria-label]="t('edit-library-by-name', {name: library.name | sentenceCase})"></i></button>
}
</td>
</tr>
}

6
UI/Web/src/app/admin/manage-tasks-settings/manage-tasks-settings.component.ts
View file

@ -105,6 +105,12 @@ export class ManageTasksSettingsComponent implements OnInit {
api: this.serverService.analyzeFiles(),
successMessage: 'analyze-files-task-success'
},
{
name: 'sync-themes-task',
description: 'sync-themes-desc',
api: this.serverService.syncThemes(),
successMessage: 'sync-themes-success'
},
{
name: 'check-for-updates-task',
description: 'check-for-updates-task-desc',

29
UI/Web/src/app/all-filters/all-filters.component.html
View file

@ -1,20 +1,19 @@
<ng-container *transloco="let t; read: 'all-filters'">
<app-side-nav-companion-bar [hasFilter]="false">
<h2 title>
{{t('title')}}
</h2>
<div subtitle>
<h6>
<span>{{t('count', {count: filters.length | number})}}</span>
<a class="ms-2" href="/all-series?name=New%20Filter">{{t('create')}}</a>
</h6>
</div>
</app-side-nav-companion-bar>
<app-manage-smart-filters></app-manage-smart-filters>
<div class="main-container">
<app-side-nav-companion-bar [hasFilter]="false">
<h4 title>
{{t('title')}}
</h4>
<div subtitle>
<h6>
<span>{{t('count', {count: filters.length | number})}}</span>
<a class="ms-2" href="/all-series?name=New%20Filter">{{t('create')}}</a>
</h6>
</div>
</app-side-nav-companion-bar>
<app-manage-smart-filters></app-manage-smart-filters>
</div>
</ng-container>

6
UI/Web/src/app/all-filters/all-filters.component.scss
View file

@ -1,2 +1,4 @@
.main-container {
margin-top: 10px;
padding: 0 0 0 10px;
}

4
UI/Web/src/app/all-series/_components/all-series/all-series.component.scss
View file

@ -0,0 +1,4 @@
.main-container {
margin-top: 10px;
padding: 0 0 0 10px;
}

4
UI/Web/src/app/announcements/_components/announcements/announcements.component.html
View file

@ -1,9 +1,9 @@
<div class="main-container container-fluid">
<ng-container *transloco="let t; read: 'announcements'">
<app-side-nav-companion-bar>
<h2 title>
<h4 title>
{{t('title')}}
</h2>
</h4>
</app-side-nav-companion-bar>
<app-changelog></app-changelog>

4
UI/Web/src/app/announcements/_components/announcements/announcements.component.scss
View file

@ -0,0 +1,4 @@
.main-container {
margin-top: 10px;
padding: 0 0 0 10px;
}

59
UI/Web/src/app/app.component.ts
View file

@ -22,6 +22,7 @@ import {ServerService} from "./_services/server.service";
import {OutOfDateModalComponent} from "./announcements/_components/out-of-date-modal/out-of-date-modal.component";
import {PreferenceNavComponent} from "./sidenav/preference-nav/preference-nav.component";
import {Breakpoint, UtilityService} from "./shared/_services/utility.service";
import {translate} from "@jsverse/transloco";
@Component({
selector: 'app-root',
@ -88,6 +89,8 @@ export class AppComponent implements OnInit {
if (!user) return false;
return user.preferences.noTransitions;
}), takeUntilDestroyed(this.destroyRef));
}
@HostListener('window:resize', ['$event'])
@ -110,28 +113,40 @@ export class AppComponent implements OnInit {
const user = this.accountService.getUserFromLocalStorage();
this.accountService.setCurrentUser(user);
if (user) {
// Bootstrap anything that's needed
this.themeService.getThemes().subscribe();
this.libraryService.getLibraryNames().pipe(take(1), shareReplay({refCount: true, bufferSize: 1})).subscribe();
if (!user) return;
// Every hour, have the UI check for an update. People seriously stay out of date
interval(2* 60 * 60 * 1000) // 2 hours in milliseconds
.pipe(
switchMap(() => this.accountService.currentUser$),
filter(u => u !== undefined && this.accountService.hasAdminRole(u)),
switchMap(_ => this.serverService.checkHowOutOfDate()),
filter(versionOutOfDate => {
return !isNaN(versionOutOfDate) && versionOutOfDate > 2;
}),
tap(versionOutOfDate => {
if (!this.ngbModal.hasOpenModals()) {
const ref = this.ngbModal.open(OutOfDateModalComponent, {size: 'xl', fullscreen: 'md'});
ref.componentInstance.versionsOutOfDate = versionOutOfDate;
}
})
)
.subscribe();
}
// Bootstrap anything that's needed
this.themeService.getThemes().subscribe();
this.libraryService.getLibraryNames().pipe(take(1), shareReplay({refCount: true, bufferSize: 1})).subscribe();
// Get the server version, compare vs localStorage, and if different bust locale cache
this.serverService.getVersion(user.apiKey).subscribe(version => {
const cachedVersion = localStorage.getItem('kavita--version');
if (cachedVersion == null || cachedVersion != version) {
// Bust locale cache
localStorage.removeItem('@transloco/translations/timestamp');
localStorage.removeItem('@transloco/translations');
location.reload();
}
localStorage.setItem('kavita--version', version);
});
// Every hour, have the UI check for an update. People seriously stay out of date
interval(2* 60 * 60 * 1000) // 2 hours in milliseconds
.pipe(
switchMap(() => this.accountService.currentUser$),
filter(u => u !== undefined && this.accountService.hasAdminRole(u)),
switchMap(_ => this.serverService.checkHowOutOfDate()),
filter(versionOutOfDate => {
return !isNaN(versionOutOfDate) && versionOutOfDate > 2;
}),
tap(versionOutOfDate => {
if (!this.ngbModal.hasOpenModals()) {
const ref = this.ngbModal.open(OutOfDateModalComponent, {size: 'xl', fullscreen: 'md'});
ref.componentInstance.versionsOutOfDate = versionOutOfDate;
}
})
)
.subscribe();
}
}

4
UI/Web/src/app/bookmark/_components/bookmarks/bookmarks.component.scss
View file

@ -0,0 +1,4 @@
.main-container {
margin-top: 10px;
padding: 0 0 0 10px;
}

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

@ -712,12 +712,16 @@
<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>
@if (accountService.currentUser$ | async; as user) {
@for(task of tasks; track task.action) {
@if (accountService.canInvokeAction(user, 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>

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

@ -12,7 +12,7 @@ import {
Input,
OnChanges,
OnInit,
Output,
Output, SimpleChange, SimpleChanges,
TemplateRef,
TrackByFunction,
ViewChild
@ -153,13 +153,21 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
}
ngOnChanges(): void {
ngOnChanges(changes: SimpleChanges): void {
this.jumpBarKeysToRender = [...this.jumpBarKeys];
this.resizeJumpBar();
const startIndex = this.jumpbarService.getResumePosition(this.router.url);
if (startIndex > 0) {
setTimeout(() => this.virtualScroller.scrollToIndex(startIndex, true, 0, ANIMATION_TIME_MS), 10);
return;
}
if (changes.hasOwnProperty('isLoading')) {
const loadingChange = changes['isLoading'] as SimpleChange;
if (loadingChange.previousValue === true && loadingChange.currentValue === false) {
setTimeout(() => this.virtualScroller.scrollToIndex(0, true, 0, ANIMATION_TIME_MS), 10);
}
}
}

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

@ -73,22 +73,28 @@
</div>
@if (title.length > 0 || actions.length > 0) {
<div class="card-title-container">
<div>
<span class="card-title" placement="top" id="{{title}}_{{entity.id}}" [ngbTooltip]="tooltipTitle" (click)="handleClick($event)" tabindex="0">
<app-promoted-icon [promoted]="isPromoted()"></app-promoted-icon>
<app-series-format [format]="format"></app-series-format>
@if (linkUrl) {
<a class="dark-exempt btn-icon" href="javascript:void(0);" [routerLink]="linkUrl">{{title}}</a>
} @else {
{{title}}
}
</span>
@if (actions && actions.length > 0) {
<span class="card-actions float-end">
<app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="title"></app-card-actionables>
</span>
@if (showFormat) {
<app-series-format [format]="format"></app-series-format>
}
<span class="card-title" placement="top" id="{{title}}_{{entity.id}}" [ngbTooltip]="tooltipTitle" (click)="handleClick($event)" tabindex="0">
@if (isPromoted(); as isPromoted) {
<span class="me-1"><app-promoted-icon [promoted]="isPromoted"></app-promoted-icon></span>
}
</div>
@if (linkUrl) {
<a class="dark-exempt btn-icon" href="javascript:void(0);" [routerLink]="linkUrl">{{title}}</a>
} @else {
{{title}}
}
</span>
@if (actions && actions.length > 0) {
<span class="card-actions">
<app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="title"></app-card-actionables>
</span>
} @else {
}
</div>
}
</div>

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

@ -1 +1,5 @@
@use '../../../card-item-common';
.card-title-container {
justify-content: center;
}

4
UI/Web/src/app/cards/card-item/card-item.component.ts
View file

@ -149,6 +149,10 @@ export class CardItemComponent implements OnInit {
* A method that if defined will return the url
*/
@Input() linkUrl?: string;
/**
* Show the format of the series
*/
@Input() showFormat: boolean = true;
/**
* Event emitted when item is clicked
*/

28
UI/Web/src/app/cards/chapter-card/chapter-card.component.html
View file

@ -73,21 +73,21 @@
<div class="card-title-container">
<span class="card-title" id="{{chapter.id}}" tabindex="0" [ngbTooltip]="chapter.isSpecial ? (chapter.title || chapter.range) : null">
<a class="dark-exempt btn-icon" routerLink="/library/{{libraryId}}/series/{{seriesId}}/chapter/{{chapter.id}}">
@if (chapter.isSpecial) {
{{chapter.title || chapter.range}}
} @else {
<app-entity-title [entity]="chapter" [prioritizeTitleName]="false"></app-entity-title>
}
</a>
</span>
<span class="card-title" id="{{chapter.id}}" tabindex="0" [ngbTooltip]="chapter.isSpecial ? (chapter.title || chapter.range) : null">
<a class="dark-exempt btn-icon" routerLink="/library/{{libraryId}}/series/{{seriesId}}/chapter/{{chapter.id}}">
@if (chapter.isSpecial) {
{{chapter.title || chapter.range}}
} @else {
<app-entity-title [entity]="chapter" [prioritizeTitleName]="false"></app-entity-title>
}
</a>
</span>
@if (actions && actions.length > 0) {
<span class="card-actions float-end">
<app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="chapter.titleName"></app-card-actionables>
</span>
}
@if (actions && actions.length > 0) {
<span class="card-actions">
<app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="chapter.titleName"></app-card-actionables>
</span>
}
</div>
</div>

14
UI/Web/src/app/cards/series-card/series-card.component.html
View file

@ -62,15 +62,15 @@
</div>
<div class="card-title-container">
<span class="card-title" [ngbTooltip]="series.name" id="{{series.id}}">
<app-series-format [format]="series.format"></app-series-format>
<a class="dark-exempt btn-icon ms-1" routerLink="/library/{{libraryId}}/series/{{series.id}}">
{{series.name}}
</a>
</span>
<app-series-format [format]="series.format"></app-series-format>
<span class="card-title" [ngbTooltip]="series.name" id="{{series.id}}">
<a class="dark-exempt btn-icon" routerLink="/library/{{libraryId}}/series/{{series.id}}">
{{series.name}}
</a>
</span>
@if (actions && actions.length > 0) {
<span class="card-actions float-end">
<span class="card-actions">
<app-card-actionables (actionHandler)="handleSeriesActionCallback($event, series)" [actions]="actions" [labelBy]="series.name"></app-card-actionables>
</span>
}

17
UI/Web/src/app/cards/volume-card/volume-card.component.html
View file

@ -60,15 +60,16 @@
<div class="card-title-container">
<span class="card-title" id="{{volume.id}}" tabindex="0">
<a class="dark-exempt btn-icon" routerLink="/library/{{libraryId}}/series/{{seriesId}}/volume/{{volume.id}}">
{{volume.name}}
</a>
<a class="dark-exempt btn-icon" routerLink="/library/{{libraryId}}/series/{{seriesId}}/volume/{{volume.id}}">
{{volume.name}}
</a>
</span>
@if (actions && actions.length > 0) {
<span class="card-actions float-end">
<app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="volume.name"></app-card-actionables>
</span>
}
@if (actions && actions.length > 0) {
<span class="card-actions">
<app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="volume.name"></app-card-actionables>
</span>
}
</div>

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

@ -19,7 +19,7 @@
[linkUrl]="'/collections/' + item.id"
(clicked)="loadCollection(item)"
(selection)="bulkSelectionService.handleCardSelection('collection', position, collections.length, $event)"
[selected]="bulkSelectionService.isCardSelected('collection', position)" [allowSelection]="true">
[selected]="bulkSelectionService.isCardSelected('collection', position)" [allowSelection]="true" [showFormat]="false">
<ng-template #subtitle>
<app-collection-owner [collection]="item"></app-collection-owner>

5
UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.html
View file

@ -7,11 +7,12 @@
{{collectionTag.title}}<span class="ms-1" *ngIf="collectionTag.promoted">(<i aria-hidden="true" class="fa fa-angle-double-up"></i>)</span>
<app-card-actionables [disabled]="actionInProgress" (actionHandler)="performAction($event)" [actions]="collectionTagActions" [labelBy]="collectionTag.title" iconClass="fa-ellipsis-v"></app-card-actionables>
</h4>
<h5 subtitle class="subtitle-with-actionables">{{t('item-count', {num: series.length})}}</h5>
</ng-container>
</app-side-nav-companion-bar>
</div>
<div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid pt-2" *ngIf="collectionTag !== undefined" #scrollingBlock>
<div class="container-fluid" *ngIf="collectionTag !== undefined">
@if (summary.length > 0 || collectionTag.source !== ScrobbleProvider.Kavita) {
<div class="row mb-3">
<div class="col-md-2 col-xs-4 col-sm-6 d-none d-sm-block">
@ -43,13 +44,11 @@
<app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
<app-card-detail-layout *ngIf="filter"
[header]="t('series-header')"
[isLoading]="isLoading"
[items]="series"
[pagination]="pagination"
[filterSettings]="filterSettings"
[filterOpen]="filterOpen"
[parentScroll]="scrollingBlock"
[trackByIdentity]="trackByIdentity"
[jumpBarKeys]="jumpbarKeys"
(applyFilter)="updateFilter($event)">

14
UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.scss
View file

@ -1,3 +1,9 @@
.main-container {
margin-top: 10px;
padding: 0 0 0 10px;
}
.poster {
width: 100%;
max-width: 300px;
@ -30,14 +36,6 @@
max-height: calc(var(--vh)*100 - 170px);
}
// This is responsible for ensuring we scroll down and only tabs and companion bar is visible
.main-container {
// Height set dynamically by get ScrollingBlockHeight()
overflow-y: auto;
position: relative;
overscroll-behavior-y: none;
}
h2 {
margin-bottom: 0;
word-break: break-all;

3
UI/Web/src/app/dashboard/_components/dashboard.component.ts
View file

@ -34,6 +34,7 @@ import {ScrobbleProvider, ScrobblingService} from "../../_services/scrobbling.se
import {ToastrService} from "ngx-toastr";
import {SettingsTabId} from "../../sidenav/preference-nav/preference-nav.component";
import {ReaderService} from "../../_services/reader.service";
import {QueryContext} from "../../_models/metadata/v2/query-context";
enum StreamId {
OnDeck,
@ -157,7 +158,7 @@ export class DashboardComponent implements OnInit {
case StreamType.SmartFilter:
s.api = this.filterUtilityService.decodeFilter(s.smartFilterEncoded!).pipe(
switchMap(filter => {
return this.seriesService.getAllSeriesV2(0, 20, filter);
return this.seriesService.getAllSeriesV2(0, 20, filter, QueryContext.Dashboard);
}))
.pipe(map(d => d.result),tap(() => this.increment()), takeUntilDestroyed(this.destroyRef), shareReplay({bufferSize: 1, refCount: true}));
break;

2
UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.ts
View file

@ -1721,7 +1721,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
// menu only code
savePref() {
const modelSettings = this.generalSettingsForm.value;
const modelSettings = this.generalSettingsForm.getRawValue();
// Get latest preferences from user, overwrite with what we manage in this UI, then save
this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
if (!user) return;

99
UI/Web/src/app/metadata-filter/_components/metadata-filter-row/metadata-filter-row.component.html
View file

@ -9,62 +9,69 @@
<div class="col-md-2 me-2 col-10 mb-2">
<select class="col-auto form-select" formControlName="comparison">
<option *ngFor="let comparison of validComparisons$ | async" [value]="comparison">{{comparison | filterComparison}}</option>
@for(comparison of validComparisons$ | async; track comparison) {
<option [value]="comparison">{{comparison | filterComparison}}</option>
}
</select>
</div>
<div class="col-md-4 col-10 mb-2">
@if (formGroup.get('comparison')?.value != FilterComparison.IsEmpty) {
<ng-container *ngIf="predicateType$ | async as predicateType">
<ng-container [ngSwitch]="predicateType">
<ng-container *ngSwitchCase="PredicateType.Text">
<input type="text" class="form-control me-2" autocomplete="true" formControlName="filterValue">
</ng-container>
<ng-container *ngSwitchCase="PredicateType.Number">
<input type="number" inputmode="numeric" class="form-control me-2" formControlName="filterValue" min="0">
</ng-container>
<ng-container *ngSwitchCase="PredicateType.Boolean">
<input type="checkbox" class="form-check-input mt-2 me-2" style="font-size: 1.5rem" formControlName="filterValue">
</ng-container>
<ng-container *ngSwitchCase="PredicateType.Date">
<div class="input-group">
<input
class="form-control"
placeholder="yyyy-mm-dd"
name="dp"
formControlName="filterValue"
(dateSelect)="onDateSelect($event)"
(blur)="updateIfDateFilled()"
ngbDatepicker
#d="ngbDatepicker"
/>
<button class="btn btn-outline-secondary fa-solid fa-calendar-days" (click)="d.toggle()" type="button"></button>
</div>
</ng-container>
<ng-container *ngSwitchCase="PredicateType.Dropdown">
<ng-container *ngIf="dropdownOptions$ | async as opts">
<ng-container *ngTemplateOutlet="dropdown; context: { options: opts, multipleAllowed: MultipleDropdownAllowed }"></ng-container>
<ng-template #dropdown let-options="options" let-multipleAllowed="multipleAllowed">
<select2 [data]="options"
formControlName="filterValue"
[hideSelectedItems]="true"
[multiple]="multipleAllowed"
[infiniteScroll]="true"
[resettable]="true">
</select2>
</ng-template>
</ng-container>
</ng-container>
<ng-container [ngSwitch]="predicateType">
<ng-container *ngSwitchCase="PredicateType.Text">
<input type="text" class="form-control me-2" autocomplete="true" formControlName="filterValue">
</ng-container>
<ng-container *ngSwitchCase="PredicateType.Number">
<input type="number" inputmode="numeric" class="form-control me-2" formControlName="filterValue" min="0">
</ng-container>
<ng-container *ngSwitchCase="PredicateType.Boolean">
<input type="checkbox" class="form-check-input mt-2 me-2" style="font-size: 1.5rem" formControlName="filterValue">
</ng-container>
<ng-container *ngSwitchCase="PredicateType.Date">
<div class="input-group">
<input
class="form-control"
placeholder="yyyy-mm-dd"
name="dp"
formControlName="filterValue"
(dateSelect)="onDateSelect($event)"
(blur)="updateIfDateFilled()"
ngbDatepicker
#d="ngbDatepicker"
/>
<button class="btn btn-outline-secondary fa-solid fa-calendar-days" (click)="d.toggle()" type="button"></button>
</div>
</ng-container>
<ng-container *ngSwitchCase="PredicateType.Dropdown">
<ng-container *ngIf="dropdownOptions$ | async as opts">
<ng-container *ngTemplateOutlet="dropdown; context: { options: opts, multipleAllowed: MultipleDropdownAllowed }"></ng-container>
<ng-template #dropdown let-options="options" let-multipleAllowed="multipleAllowed">
<select2 [data]="options"
formControlName="filterValue"
[hideSelectedItems]="true"
[multiple]="multipleAllowed"
[infiniteScroll]="true"
[resettable]="true">
</select2>
</ng-template>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
}
</div>
<div class="col pt-2 ms-2">
<ng-container *ngIf="UiLabel !== null">
<span class="text-muted">{{t(UiLabel.unit)}}</span>
<i *ngIf="UiLabel.tooltip" class="fa fa-info-circle ms-1" aria-hidden="true" [ngbTooltip]="t(UiLabel.tooltip)"></i>
</ng-container>
@if (UiLabel !== null) {
<span class="text-muted">{{t(UiLabel.unit)}}</span>
@if (UiLabel.tooltip) {
<i class="fa fa-info-circle ms-1" aria-hidden="true" [ngbTooltip]="t(UiLabel.tooltip)"></i>
}
}
</div>
<ng-content #removeBtn></ng-content>

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

@ -55,6 +55,7 @@ const unitLabels: Map<FilterField, FilterRowUi> = new Map([
[FilterField.ReadingDate, new FilterRowUi('unit-reading-date')],
[FilterField.AverageRating, new FilterRowUi('unit-average-rating')],
[FilterField.ReadProgress, new FilterRowUi('unit-reading-progress')],
[FilterField.UserRating, new FilterRowUi('unit-user-rating')],
]);
const StringFields = [FilterField.SeriesName, FilterField.Summary, FilterField.Path, FilterField.FilePath];
@ -80,6 +81,17 @@ const NumberFieldsThatIncludeDateComparisons = [
FilterField.ReleaseYear
];
const FieldsThatShouldIncludeIsEmpty = [
FilterField.Summary, FilterField.UserRating, FilterField.Genres,
FilterField.CollectionTags, FilterField.Tags, FilterField.ReleaseYear,
FilterField.Translators, FilterField.Characters, FilterField.Publisher,
FilterField.Editor, FilterField.CoverArtist, FilterField.Letterer,
FilterField.Colorist, FilterField.Inker, FilterField.Penciller,
FilterField.Writers, FilterField.Imprint, FilterField.Team,
FilterField.Location,
];
const StringComparisons = [
FilterComparison.Equal,
FilterComparison.NotEqual,
@ -221,7 +233,10 @@ export class MetadataFilterRowComponent implements OnInit {
stmt.value = stmt.value + '';
}
if (!stmt.value && (![FilterField.SeriesName, FilterField.Summary].includes(stmt.field) && !BooleanFields.includes(stmt.field))) return;
if (stmt.comparison !== FilterComparison.IsEmpty) {
if (!stmt.value && (![FilterField.SeriesName, FilterField.Summary].includes(stmt.field) && !BooleanFields.includes(stmt.field))) return;
}
this.filterStatement.emit(stmt);
}
@ -317,8 +332,15 @@ export class MetadataFilterRowComponent implements OnInit {
handleFieldChange(val: string) {
const inputVal = parseInt(val, 10) as FilterField;
if (StringFields.includes(inputVal)) {
this.validComparisons$.next(StringComparisons);
const comps = [...StringComparisons];
if (FieldsThatShouldIncludeIsEmpty.includes(inputVal)) {
comps.push(FilterComparison.IsEmpty);
}
this.validComparisons$.next(comps);
this.predicateType$.next(PredicateType.Text);
if (this.loaded) {
@ -330,9 +352,14 @@ export class MetadataFilterRowComponent implements OnInit {
if (NumberFields.includes(inputVal)) {
const comps = [...NumberComparisons];
if (NumberFieldsThatIncludeDateComparisons.includes(inputVal)) {
comps.push(...DateComparisons);
}
if (FieldsThatShouldIncludeIsEmpty.includes(inputVal)) {
comps.push(FilterComparison.IsEmpty);
}
this.validComparisons$.next(comps);
this.predicateType$.next(PredicateType.Number);
if (this.loaded) {
@ -343,7 +370,12 @@ export class MetadataFilterRowComponent implements OnInit {
}
if (DateFields.includes(inputVal)) {
this.validComparisons$.next(DateComparisons);
const comps = [...DateComparisons];
if (FieldsThatShouldIncludeIsEmpty.includes(inputVal)) {
comps.push(FilterComparison.IsEmpty);
}
this.validComparisons$.next(comps);
this.predicateType$.next(PredicateType.Date);
if (this.loaded) {
@ -354,7 +386,12 @@ export class MetadataFilterRowComponent implements OnInit {
}
if (BooleanFields.includes(inputVal)) {
this.validComparisons$.next(BooleanComparisons);
const comps = [...DateComparisons];
if (FieldsThatShouldIncludeIsEmpty.includes(inputVal)) {
comps.push(FilterComparison.IsEmpty);
}
this.validComparisons$.next(comps);
this.predicateType$.next(PredicateType.Boolean);
if (this.loaded) {
@ -372,6 +409,10 @@ export class MetadataFilterRowComponent implements OnInit {
if (DropdownFieldsWithoutMustContains.includes(inputVal)) {
comps = comps.filter(c => c !== FilterComparison.MustContains);
}
if (FieldsThatShouldIncludeIsEmpty.includes(inputVal)) {
comps.push(FilterComparison.IsEmpty);
}
this.validComparisons$.next(comps);
this.predicateType$.next(PredicateType.Dropdown);
if (this.loaded) {
@ -391,4 +432,5 @@ export class MetadataFilterRowComponent implements OnInit {
this.propagateFilterUpdate();
}
protected readonly FilterComparison = FilterComparison;
}

2
UI/Web/src/app/nav/_components/events-widget/events-widget.component.scss
View file

@ -117,7 +117,7 @@
}
.btn-close {
top: 10px;
top: 35px;
right: 10px;
font-size: 11px;
position: absolute;

11
UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.scss
View file

@ -1,3 +1,10 @@
.main-container {
margin-top: 10px;
padding: 0 0 0 10px;
}
.content-container {
width: 100%;
}
@ -24,8 +31,8 @@
flex-direction: row;
height: calc((var(--vh) *100) - 173px);
margin-bottom: 10px;
&.empty {
height: auto;
}
}
}

2
UI/Web/src/app/reading-list/_components/reading-lists/reading-lists.component.html
View file

@ -26,7 +26,7 @@
[linkUrl]="'/lists/' + item.id"
(clicked)="handleClick(item)"
(selection)="bulkSelectionService.handleCardSelection('readingList', position, lists.length, $event)"
[selected]="bulkSelectionService.isCardSelected('readingList', position)" [allowSelection]="true"></app-card-item>
[selected]="bulkSelectionService.isCardSelected('readingList', position)" [allowSelection]="true" [showFormat]="false"></app-card-item>
</ng-template>
<ng-template #noData>

4
UI/Web/src/app/reading-list/_components/reading-lists/reading-lists.component.scss
View file

@ -0,0 +1,4 @@
.main-container {
margin-top: 10px;
padding: 0 0 0 10px;
}

8
UI/Web/src/app/registration/_components/confirm-email-change/confirm-email-change.component.html
View file

@ -2,9 +2,9 @@
<app-splash-container>
<ng-container title><h2>{{t('title')}}</h2></ng-container>
<ng-container body>
<p *ngIf="!confirmed; else confirmedMessage">{{t('non-confirm-description')}}</p>
<ng-template #confirmedMessage>
@if (!confirmed) {
{{t('non-confirm-description')}}
} @else {
<div class="card">
<div class="card-body">
<div class="card-title">
@ -13,7 +13,7 @@
<p>{{t('confirm-description')}}</p>
</div>
</div>
</ng-template>
}
</ng-container>
</app-splash-container>
</ng-container>

3
UI/Web/src/app/registration/_components/confirm-email-change/confirm-email-change.component.ts
View file

@ -4,7 +4,6 @@ import { ToastrService } from 'ngx-toastr';
import { AccountService } from 'src/app/_services/account.service';
import { NavService } from 'src/app/_services/nav.service';
import { ThemeService } from 'src/app/_services/theme.service';
import { NgIf } from '@angular/common';
import { SplashContainerComponent } from '../splash-container/splash-container.component';
import {translate, TranslocoDirective} from "@jsverse/transloco";
@ -17,7 +16,7 @@ import {translate, TranslocoDirective} from "@jsverse/transloco";
styleUrls: ['./confirm-email-change.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [SplashContainerComponent, NgIf, TranslocoDirective]
imports: [SplashContainerComponent, TranslocoDirective]
})
export class ConfirmEmailChangeComponent implements OnInit {

62
UI/Web/src/app/registration/_components/confirm-email/confirm-email.component.html
View file

@ -3,37 +3,48 @@
<ng-container title><h2>{{t('title')}}</h2></ng-container>
<ng-container body>
<p>{{t('description')}}</p>
<div class="text-danger" *ngIf="errors.length > 0">
<p>{{t('error-label')}}</p>
<ul>
<li *ngFor="let error of errors">{{error}}</li>
</ul>
</div>
@if (errors.length > 0) {
<div class="text-danger">
<p>{{t('error-label')}}</p>
<div class="mb-2">
@for (error of errors; track error) {
<div>{{error}}</div>
}
</div>
</div>
}
<form [formGroup]="registerForm" (ngSubmit)="submit()">
<div class="mb-3">
<label for="username" class="form-label">{{t('username-label')}}</label>
<input id="username" class="form-control" formControlName="username" type="text"
aria-describeby="inviteForm-username-validations"
[class.is-invalid]="registerForm.get('username')?.invalid && registerForm.get('username')?.touched">
<div id="inviteForm-username-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
<div *ngIf="registerForm.get('username')?.errors?.required">
{{t('required-field')}}
@if (registerForm.dirty || registerForm.touched) {
<div id="inviteForm-username-validations" class="invalid-feedback">
@if (registerForm.get('username')?.errors?.required) {
<div>{{t('required-field')}}</div>
}
</div>
</div>
}
</div>
<div class="mb-3" style="width:100%">
<label for="email" class="form-label">{{t('email-label')}}</label>
<input class="form-control" type="email" inputmode="email" id="email" formControlName="email" required readonly
[class.is-invalid]="registerForm.get('email')?.invalid && registerForm.get('email')?.touched">
<div id="inviteForm-email-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
<div *ngIf="registerForm.get('email')?.errors?.required">
{{t('required-field')}}
@if (registerForm.dirty || registerForm.touched) {
<div id="inviteForm-email-validations" class="invalid-feedback">
@if (registerForm.get('email')?.errors?.required) {
<div>{{t('required-field')}}</div>
}
@if (registerForm.get('email')?.errors?.email) {
<div>{{t('valid-email')}}</div>
}
</div>
<div *ngIf="registerForm.get('email')?.errors?.email">
{{t('valid-email')}}
</div>
</div>
}
</div>
<div class="mb-3">
@ -43,14 +54,17 @@
</ng-template>
<span class="visually-hidden" id="password-help"><ng-container [ngTemplateOutlet]="passwordTooltip"></ng-container></span>
<input id="password" class="form-control" maxlength="256" minlength="6" pattern="^.{6,256}$" formControlName="password" type="password" aria-describedby="password-help">
<div id="inviteForm-password-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
<div *ngIf="registerForm.get('password')?.errors?.required">
{{t('required-field')}}
@if (registerForm.dirty || registerForm.touched) {
<div id="inviteForm-password-validations" class="invalid-feedback">
@if (registerForm.get('password')?.errors?.required) {
<div>{{t('required-field')}}</div>
}
@if (registerForm.get('password')?.errors?.minlength || registerForm.get('password')?.errors?.maxLength || registerForm.get('password')?.errors?.pattern) {
<div>{{t('password-validation')}}</div>
}
</div>
<div *ngIf="registerForm.get('password')?.errors?.minlength || registerForm.get('password')?.errors?.maxLength || registerForm.get('password')?.errors?.pattern">
{{t('password-validation')}}
</div>
</div>
}
</div>
<div class="float-end">

4
UI/Web/src/app/registration/_components/confirm-email/confirm-email.component.ts
View file

@ -6,7 +6,7 @@ import { ThemeService } from 'src/app/_services/theme.service';
import { AccountService } from 'src/app/_services/account.service';
import { NavService } from 'src/app/_services/nav.service';
import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
import { NgTemplateOutlet } from '@angular/common';
import { SplashContainerComponent } from '../splash-container/splash-container.component';
import {translate, TranslocoDirective} from "@jsverse/transloco";
import {take} from "rxjs/operators";
@ -17,7 +17,7 @@ import {take} from "rxjs/operators";
styleUrls: ['./confirm-email.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [SplashContainerComponent, NgIf, NgFor, ReactiveFormsModule, NgbTooltip, NgTemplateOutlet, TranslocoDirective]
imports: [SplashContainerComponent, ReactiveFormsModule, NgbTooltip, NgTemplateOutlet, TranslocoDirective]
})
export class ConfirmEmailComponent implements OnDestroy {
/**

2
UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html
View file

@ -96,7 +96,7 @@
}
<div class="col-auto ms-2 d-none d-md-block">
<div class="card-actions" [ngbTooltip]="t('more-alt')">
<div class="card-actions mt-2" [ngbTooltip]="t('more-alt')">
<app-card-actionables (actionHandler)="performAction($event)" [actions]="seriesActions" [labelBy]="series.name" iconClass="fa-ellipsis-h" btnClass="btn-secondary-outline btn"></app-card-actionables>
</div>
</div>

2
UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss
View file

@ -6,7 +6,7 @@
left: 20px;
}
.card-container{
.card-container {
display: grid;
grid-template-columns: repeat(auto-fill, 160px);
grid-gap: 0.5rem;

4
UI/Web/src/app/shared/series-format/series-format.component.html
View file

@ -1,8 +1,8 @@
@if (format !== MangaFormat.UNKNOWN) {
@if (useTitle) {
<i class="{{format | mangaFormatIcon}} me-1" aria-hidden="true" title="{{format | mangaFormat}}"></i>
<i class="{{format | mangaFormatIcon}}" aria-hidden="true" title="{{format | mangaFormat}}"></i>
} @else {
<i class="{{format | mangaFormatIcon}} me-1" aria-hidden="true" ngbTooltip="{{format | mangaFormat}}"></i>
<i class="{{format | mangaFormatIcon}}" aria-hidden="true" ngbTooltip="{{format | mangaFormat}}"></i>
}
<ng-content></ng-content>
}

3
UI/Web/src/app/shared/series-format/series-format.component.scss
View file

@ -0,0 +1,3 @@
i {
padding: 0 5px;
}

2
UI/Web/src/app/sidenav/_components/manage-external-sources/manage-external-sources.component.html
View file

@ -13,7 +13,7 @@
<button class="btn btn-outline-secondary" type="button" id="reset-input" (click)="resetFilter()">{{t('clear')}}</button>
</div>
</div>
<div class="col-2 ms-2">
<div class="col-auto ms-2 float-end">
<button class="btn btn-primary" style="margin-top: 30px" (click)="addNewExternalSource()">{{t('add-source')}}</button>
</div>
</form>

2
UI/Web/src/app/sidenav/_components/manage-smart-filters/manage-smart-filters.component.html
View file

@ -19,7 +19,7 @@
<i class="fa-solid fa-triangle-exclamation red me-2" [ngbTooltip]="t('errored')"></i>
<span class="visually-hidden">{{t('errored')}}</span>
}
<a [href]="'all-series?' + f.filter" target="_blank">{{f.name}}</a>
<a [href]="'/all-series?' + f.filter" target="_blank">{{f.name}}</a>
</span>
<button class="btn btn-danger float-end" (click)="deleteFilter(f)">
<i class="fa-solid fa-trash" aria-hidden="true"></i>

4
UI/Web/src/app/statistics/_components/user-stats-info-cards/user-stats-info-cards.component.ts
View file

@ -35,7 +35,7 @@ export class UserStatsInfoCardsComponent {
const ref = this.modalService.open(GenericListModalComponent, { scrollable: true });
ref.componentInstance.items = yearCounts.map(t => {
const countStr = translate('user-stats-info-cards.pages-count', {num: numberPipe.transform(t.value)});
return `${t.name}: ${countStr})`;
return `${t.name}: ${countStr}s`;
});
ref.componentInstance.title = translate('user-stats-info-cards.pages-read-by-year-title');
});
@ -47,7 +47,7 @@ export class UserStatsInfoCardsComponent {
const ref = this.modalService.open(GenericListModalComponent, { scrollable: true });
ref.componentInstance.items = yearCounts.map(t => {
const countStr = translate('user-stats-info-cards.words-count', {num: numberPipe.transform(t.value)});
return `${t.name}: ${countStr})`;
return `${t.name}: ${countStr}`;
});
ref.componentInstance.title = translate('user-stats-info-cards.words-read-by-year-title');
});

2
UI/Web/src/app/user-settings/manga-user-preferences/manage-user-preferences.component.html
View file

@ -353,7 +353,7 @@
<div class="col-10">
<input type="range" class="form-range" id="fontsize" min="50" max="300" step="10"
formControlName="bookReaderFontSize">
</div>
<span class="ps-2 col-2 align-middle">{{settingsForm.get('bookReaderFontSize')?.value + '%'}}</span>
</div>

32
UI/Web/src/app/user-settings/theme-manager/theme-manager.component.html
View file

@ -1,7 +1,7 @@
<ng-container *transloco="let t; read:'theme-manager'">
<div class="position-relative">
@if (selectedTheme !== undefined && (hasAdmin$ | async)) {
@if ((hasAdmin$ | async)) {
<button class="btn btn-primary-outline position-absolute custom-position" (click)="selectTheme(undefined)" [title]="t('add')">
<i class="fa fa-plus" aria-hidden="true"></i><span class="phone-hidden ms-1">{{t('add')}}</span>
</button>
@ -16,12 +16,20 @@
<div class="pe-2">
<ul style="height: 100%" class="list-group list-group-flush">
@for (theme of themeService.themes$ | async; track theme.name) {
<ng-container [ngTemplateOutlet]="themeOption" [ngTemplateOutletContext]="{ $implicit: theme}"></ng-container>
<li class="list-group-item d-flex justify-content-between align-items-start" style="height: 40px" aria-hidden="true">
<div class="fw-bold section-header">{{t('downloaded')}}</div>
</li>
@for (theme of downloadedThemes; track theme.name) {
<ng-container [ngTemplateOutlet]="themeOption" [ngTemplateOutletContext]="{ $implicit: theme, downloaded: true}"></ng-container>
}
<li class="list-group-item d-flex justify-content-between align-items-start" style="height: 40px" aria-hidden="true">
<div class="fw-bold section-header">{{t('downloadable')}}</div>
</li>
@for (theme of downloadableThemes; track theme.name) {
<ng-container [ngTemplateOutlet]="themeOption" [ngTemplateOutletContext]="{ $implicit: theme}"></ng-container>
<ng-container [ngTemplateOutlet]="themeOption" [ngTemplateOutletContext]="{ $implicit: theme, downloaded: false}"></ng-container>
}
</ul>
</div>
@ -114,25 +122,27 @@
</div>
<ng-template #themeOption let-item>
<ng-template #themeOption let-item let-downloaded="downloaded">
@if (item !== undefined) {
<li class="list-group-item d-flex justify-content-between align-items-start {{selectedTheme && selectedTheme.name === item.name ? 'active' : ''}}" (click)="selectTheme(item)">
<div class="ms-2 me-auto">
<div class="fw-bold">{{item.name | sentenceCase}}</div>
@if (item.hasOwnProperty('provider')) {
<span class="pill p-1 me-1 provider">{{item.provider | siteThemeProvider}}</span>
@if (item.provider !== ThemeProvider.System && item.compatibleVersion) {
<span class="pill p-1 me-1 version">v{{item.compatibleVersion}}</span>
} @else if (item.hasOwnProperty('lastCompatibleVersion')) {
<span class="pill p-1 me-1 provider">{{ThemeProvider.Custom | siteThemeProvider}}</span><span class="pill p-1 me-1 version">v{{item.lastCompatibleVersion}}</span>
<span class="pill p-1 me-1 version">v{{item.lastCompatibleVersion}}</span>
}
@if (currentTheme && item.name === currentTheme.name) {
<span class="pill p-1 active">{{t('active-theme')}}</span>
}
@if (item.hasOwnProperty('isDefault') && item.isDefault) {
<span class="pill p-1 ms-1">{{t('default-theme')}}</span>
}
</div>
@if (item.hasOwnProperty('isDefault') && item.isDefault) {
<i class="fa-solid fa-star" [attr.aria-label]="t('default-theme')"></i>
}
</li>
}
</ng-template>

8
UI/Web/src/app/user-settings/theme-manager/theme-manager.component.scss
View file

@ -37,11 +37,15 @@
background-color: var(--card-bg-color);
border-radius: 5px;
}
}
.list-group-item, .list-group-item.active {
border-top-width: 0;
border-bottom-width: 0;
}
.card {
@ -68,3 +72,7 @@ ngx-file-drop ::ng-deep > div {
right: 15px;
top: -42px;
}
.section-header {
color: var(--primary-color);
}

25
UI/Web/src/app/user-settings/theme-manager/theme-manager.component.ts
View file

@ -6,7 +6,7 @@ import {
inject,
} from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import {distinctUntilChanged, map, take} from 'rxjs';
import {distinctUntilChanged, map, take, tap} from 'rxjs';
import { ThemeService } from 'src/app/_services/theme.service';
import {SiteTheme, ThemeProvider} from 'src/app/_models/preferences/site-theme';
import { User } from 'src/app/_models/user';
@ -65,9 +65,11 @@ export class ThemeManagerComponent {
user: User | undefined;
selectedTheme: ThemeContainer | undefined;
downloadableThemes: Array<DownloadableSiteTheme> = [];
downloadedThemes: Array<SiteTheme> = [];
hasAdmin$ = this.accountService.currentUser$.pipe(
takeUntilDestroyed(this.destroyRef), shareReplay({refCount: true, bufferSize: 1}),
map(c => c && this.accountService.hasAdminRole(c))
takeUntilDestroyed(this.destroyRef),
map(c => c && this.accountService.hasAdminRole(c)),
shareReplay({refCount: true, bufferSize: 1}),
);
files: NgxFileDropEntry[] = [];
@ -78,6 +80,11 @@ export class ThemeManagerComponent {
constructor() {
this.themeService.themes$.pipe(tap(themes => {
this.downloadedThemes = themes;
this.cdRef.markForCheck();
})).subscribe();
this.loadDownloadableThemes();
this.themeService.currentTheme$.pipe(takeUntilDestroyed(this.destroyRef), distinctUntilChanged()).subscribe(theme => {
@ -118,7 +125,6 @@ export class ThemeManagerComponent {
pref.theme = theme;
this.accountService.updatePreferences(pref).subscribe();
// Updating theme emits the new theme to load on the themes$
});
}
@ -152,8 +158,15 @@ export class ThemeManagerComponent {
}
downloadTheme(theme: DownloadableSiteTheme) {
this.themeService.downloadTheme(theme).subscribe(theme => {
this.removeDownloadedTheme(theme);
this.themeService.downloadTheme(theme).subscribe(downloadedTheme => {
this.removeDownloadedTheme(downloadedTheme);
this.themeService.getThemes().subscribe(themes => {
this.downloadedThemes = themes;
const oldTheme = this.downloadedThemes.filter(d => d.name === theme.name)[0];
this.selectTheme(oldTheme);
this.cdRef.markForCheck();
});
});
}

2
UI/Web/src/app/volume-detail/volume-detail.component.html
View file

@ -76,7 +76,7 @@
}
<div class="col-auto ms-2 d-none d-md-block">
<div class="card-actions" [ngbTooltip]="t('more-alt')">
<div class="card-actions mt-2" [ngbTooltip]="t('more-alt')">
<app-card-actionables (actionHandler)="performAction($event)" [actions]="volumeActions" [labelBy]="series.name + ' ' + volume.minNumber" iconClass="fa-ellipsis-h" btnClass="btn-secondary-outline btn"></app-card-actionables>
</div>
</div>

86
UI/Web/src/app/want-to-read/_components/want-to-read/want-to-read.component.html
View file

@ -1,47 +1,49 @@
<ng-container *transloco="let t; read:'want-to-read'">
<div #companionBar>
<app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
<ng-container title>
<h4>
{{t('title')}}
</h4>
</ng-container>
<h5 subtitle>{{t('series-count', {num: (pagination.totalItems | number)})}}</h5>
</app-side-nav-companion-bar>
</div>
<div class="main-container container-fluid">
<ng-container *transloco="let t; read:'want-to-read'">
<div #companionBar>
<app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
<ng-container title>
<h4>
{{t('title')}}
</h4>
</ng-container>
<h5 subtitle>{{t('series-count', {num: (pagination.totalItems | number)})}}</h5>
</app-side-nav-companion-bar>
</div>
<div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid ps-0" #scrollingBlock>
<app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
<div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid ps-0" #scrollingBlock>
<app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
<app-card-detail-layout *ngIf="filter"
[isLoading]="isLoading"
[items]="series"
[pagination]="pagination"
[filterSettings]="filterSettings"
[filterOpen]="filterOpen"
[jumpBarKeys]="jumpbarKeys"
[trackByIdentity]="trackByIdentity"
[refresh]="refresh"
(applyFilter)="updateFilter($event)">
<ng-template #cardItem let-item let-position="idx">
<app-series-card [series]="item" [libraryId]="item.libraryId" (reload)="removeSeries($event)"
(selection)="bulkSelectionService.handleCardSelection('series', position, series.length, $event)"
[selected]="bulkSelectionService.isCardSelected('series', position)" [allowSelection]="true"
></app-series-card>
</ng-template>
<app-card-detail-layout *ngIf="filter"
[isLoading]="isLoading"
[items]="series"
[pagination]="pagination"
[filterSettings]="filterSettings"
[filterOpen]="filterOpen"
[jumpBarKeys]="jumpbarKeys"
[trackByIdentity]="trackByIdentity"
[refresh]="refresh"
(applyFilter)="updateFilter($event)">
<ng-template #cardItem let-item let-position="idx">
<app-series-card [series]="item" [libraryId]="item.libraryId" (reload)="removeSeries($event)"
(selection)="bulkSelectionService.handleCardSelection('series', position, series.length, $event)"
[selected]="bulkSelectionService.isCardSelected('series', position)" [allowSelection]="true"
></app-series-card>
</ng-template>
<div *ngIf="!filterActive && series.length === 0">
<ng-template #noData>
{{t('no-items')}}
</ng-template>
</div>
<div *ngIf="!filterActive && series.length === 0">
<ng-template #noData>
{{t('no-items')}}
</ng-template>
</div>
<div *ngIf="filterActive && series.length === 0">
<ng-template #noData>
{{t('no-items-filtered')}}
</ng-template>
</div>
<div *ngIf="filterActive && series.length === 0">
<ng-template #noData>
{{t('no-items-filtered')}}
</ng-template>
</div>
</app-card-detail-layout>
</div>
</ng-container>
</app-card-detail-layout>
</div>
</ng-container>
</div>

52
UI/Web/src/app/want-to-read/_components/want-to-read/want-to-read.component.scss
View file

@ -1,48 +1,4 @@
.virtual-scroller, virtual-scroller {
width: 100%;
height: calc(100vh - 85px);
max-height: calc(var(--vh)*100 - 170px);
}
// This is responsible for ensuring we scroll down and only tabs and companion bar is visible
.main-container {
// Height set dynamically by get ScrollingBlockHeight()
overflow: auto;
position: relative;
overscroll-behavior-y: none;
scrollbar-gutter: stable;
scrollbar-width: thin;
// For firefox
@supports (-moz-appearance:none) {
scrollbar-color: transparent transparent;
scrollbar-width: thin;
}
&::-webkit-scrollbar {
background-color: transparent; /*make scrollbar space invisible */
width: inherit;
display: none;
visibility: hidden;
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: transparent; /*makes it invisible when not hovering*/
}
&:hover {
scrollbar-width: thin;
overflow-y: auto;
// For firefox
@supports (-moz-appearance:none) {
scrollbar-color: rgba(255,255,255,0.3) rgba(0, 0, 0, 0);
}
&::-webkit-scrollbar-thumb {
visibility: visible;
background-color: rgba(255,255,255,0.3); /*On hover, it will turn grey*/
}
}
}
.main-container {
margin-top: 10px;
padding: 0 0 0 10px;
}

32
UI/Web/src/assets/langs/en.json
View file

@ -27,7 +27,8 @@
"not-valid-email": "{{validation.valid-email}}",
"cancel": "{{common.cancel}}",
"saving": "Saving…",
"update": "Update"
"update": "Update",
"account-detail-title": "Account Details"
},
"user-scrobble-history": {
@ -199,8 +200,10 @@
"description": "Kavita comes in my colors, find a color scheme that meets your needs or build one yourself and share it. Themes may be applied for your account or applied to all accounts.",
"site-themes": "Site Themes",
"set-default": "Set Default",
"default-theme": "Default theme",
"default-theme": "Default",
"download": "{{changelog.download}}",
"downloaded": "Downloaded",
"downloadable": "Downloadable",
"apply": "{{common.apply}}",
"applied": "Applied",
"active-theme": "Active",
@ -258,7 +261,7 @@
"title": "Edit Device",
"device-name-label": "{{manage-devices.name-label}}",
"platform-label": "{{manage-devices.platform-label}}",
"email-label": "{{common.email}}",
"email-tooltip": "This email will be used to accept the file via Send To",
"device-platform-label": "Device Platform",
@ -731,7 +734,6 @@
"confirm-email": {
"title": "Register",
"description": "Complete the form to complete your registration",
"error-label": "Errors: ",
"username-label": "{{common.username}}",
"password-label": "{{common.password}}",
"email-label": "{{common.email}}",
@ -853,7 +855,8 @@
"teams-title": "Teams",
"locations-title": "Locations",
"language-title": "Language",
"age-rating-title": "Age Rating"
"age-rating-title": "Age Rating",
"links-title": "Weblinks"
},
"download-button": {
@ -1356,6 +1359,10 @@
"analyze-files-task-desc": "Runs a long-running task which will analyze files to generate extension and size. This should only be ran once for the v0.7 release. Not needed if you installed post v0.7.",
"analyze-files-task-success": "File analysis has been queued",
"sync-themes-task": "Sync Themes",
"sync-themes-task-desc": "Synchronize downloaded themes with upstream changes if version matches.",
"sync-themes-success": "Synchronization of themes has been queued",
"check-for-updates-task": "Check for Updates",
"check-for-updates-task-desc": "See if there are any Stable releases ahead of your version."
},
@ -1463,7 +1470,8 @@
"title-alt": "Kavita - {{collectionName}} Collection",
"series-header": "Series",
"sync-progress": "Series Collected: {{title}}",
"last-sync": "Last Sync: {{date}}"
"last-sync": "Last Sync: {{date}}",
"item-count": "{{common.item-count}}"
},
"all-collections": {
@ -1783,8 +1791,9 @@
"metadata-filter-row": {
"unit-reading-date": "Date",
"unit-average-rating": "Average Rating (Kavita+) - only for cached series",
"unit-reading-progress": "Percent"
"unit-average-rating": "Kavita+ external rating, percent",
"unit-reading-progress": "Percent",
"unit-user-rating": "{{metadata-filter-row.unit-reading-progress}}"
},
"sort-field-pipe": {
@ -1946,7 +1955,7 @@
"pages-count": "{{edit-chapter-modal.pages-count}}",
"words-count": "{{edit-chapter-modal.words-count}}",
"reading-time-label": "{{edit-chapter-modal.reading-time-label}}",
"date-added-label": "{{edit-chapter-modal.date-added-title}}",
"date-added-label": "{{edit-chapter-modal.date-added-label}}",
"size-label": "{{edit-chapter-modal.size-label}}",
"id-label": "{{edit-chapter-modal.id-label}}",
"links-label": "{{series-metadata-detail.links-label}}",
@ -2223,7 +2232,8 @@
"is-after": "Is after",
"is-in-last": "Is in last",
"is-not-in-last": "Is not in last",
"must-contains": "Must Contains"
"must-contains": "Must Contains",
"is-empty": "Is Empty"
},
@ -2450,7 +2460,7 @@
"validation": {
"required-field": "This field is required",
"valid-email": "This must be a valid email",
"password-validation": "Password must be between 6 and 32 characters in length",
"password-validation": "Password must be between 6 and 256 characters in length",
"year-validation": "This must be a valid year greater than 1000 and 4 characters long"
},