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

More cleanup and string changes.

Browse source
This commit is contained in:
Joseph Milazzo 2025-06-13 18:10:39 -05:00
parent 9b35d20510
commit a7fca1400d
14 changed files with 70 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/Web/src/app/_models/metadata/v2/filter-statement.ts
View file

@ -1,6 +1,6 @@
import {FilterComparison} from "./filter-comparison";
export interface FilterStatement<T> {
export interface FilterStatement<T extends number = number> {
comparison: FilterComparison;
field: T;
value: string;

11
UI/Web/src/app/_routes/browse-routing.module.ts
View file

@ -1,12 +1,19 @@
import {Routes} from "@angular/router";
import {BrowseAuthorsComponent} from "../browse/browse-people/browse-authors.component";
import {BrowsePeopleComponent} from "../browse/browse-people/browse-people.component";
import {BrowseGenresComponent} from "../browse/browse-genres/browse-genres.component";
import {BrowseTagsComponent} from "../browse/browse-tags/browse-tags.component";
import {UrlFilterResolver} from "../_resolvers/url-filter.resolver";
export const routes: Routes = [
{path: 'authors', component: BrowseAuthorsComponent, pathMatch: 'full',
// Legacy route
{path: 'authors', component: BrowsePeopleComponent, pathMatch: 'full',
resolve: {
filter: UrlFilterResolver
},
runGuardsAndResolvers: 'always',
},
{path: 'people', component: BrowsePeopleComponent, pathMatch: 'full',
resolve: {
filter: UrlFilterResolver
},

4
UI/Web/src/app/_services/metadata.service.ts
View file

@ -170,11 +170,11 @@ export class MetadataService {
case 'series':
return this.createFilterStatement(FilterField.SeriesName);
case 'person':
return this.createFilterStatement(PersonFilterField.Role, FilterComparison.Contains, `${PersonRole.CoverArtist}, ${PersonRole.Writer}`);
return this.createFilterStatement(PersonFilterField.Role, FilterComparison.Contains, `${PersonRole.CoverArtist},${PersonRole.Writer}`);
}
}
createFilterStatement<T extends number>(field: T, comparison = FilterComparison.Equal, value = '') {
createFilterStatement<T extends number = number>(field: T, comparison = FilterComparison.Equal, value = '') {
return {
comparison: comparison,
field: field,

3
UI/Web/src/app/_services/toggle.service.ts
View file

@ -18,7 +18,6 @@ export class ToggleService {
.pipe(filter(event => event instanceof NavigationStart))
.subscribe((event) => {
this.toggleState = false;
console.log('[toggleservice] collapsing toggle due to navigation event');
this.toggleStateSource.next(this.toggleState);
});
this.toggleStateSource.next(false);
@ -28,7 +27,6 @@ export class ToggleService {
this.toggleState = !this.toggleState;
this.toggleStateSource.pipe(take(1)).subscribe(state => {
this.toggleState = !state;
console.log('[toggleservice] toggling setting filter open status: ', this.toggleState);
this.toggleStateSource.next(this.toggleState);
});
@ -36,7 +34,6 @@ export class ToggleService {
set(state: boolean) {
this.toggleState = state;
console.log('[toggleservice] setting filter open status: ', this.toggleState);
this.toggleStateSource.next(state);
}
}

75
UI/Web/src/app/browse/browse-people/browse-authors.component.html
View file

@ -1,75 +0,0 @@
<div class="main-container container-fluid">
<ng-container *transloco="let t; read:'browse-authors'" >
<app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
<h2 title>
<span>{{t('title')}}</span>
</h2>
<h6 subtitle>{{t('author-count', {num: pagination.totalItems | number})}} </h6>
</app-side-nav-companion-bar>
<!-- <form [formGroup]="filterGroup">-->
<!-- <div class="row mb-3">-->
<!-- <div class="col-md-4 col-auto">-->
<!-- <div class="form-group">-->
<!-- <label for="role-selection">{{t('roles-label')}}</label>-->
<!-- <select2 [data]="allRoles"-->
<!-- id="role-selection"-->
<!-- formControlName="roles"-->
<!-- [hideSelectedItems]="true"-->
<!-- [multiple]="true"-->
<!-- [infiniteScroll]="true"-->
<!-- [resettable]="true"-->
<!-- style="min-width: 200px">-->
<!-- </select2>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-auto ms-auto me-auto">-->
<!-- <div class="form-group">-->
<!-- <label for="query">Filter</label>-->
<!-- <input type="text" id="query" style="min-width: 100px" autocomplete="off" formControlName="query" class="form-control" />-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-auto ms-auto">-->
<!-- <div class="form-group">-->
<!-- <label for="sort">{{t('sort-label')}}</label>-->
<!-- <app-sort-button (update)="onSortUpdate($event)"></app-sort-button>-->
<!-- <select class="form-select" style="min-width: 100px" formControlName="sortField">-->
<!-- <option [value]="PersonSortField.Name">{{t('name-label')}}</option>-->
<!-- <option [value]="PersonSortField.SeriesCount">{{t('series-count-label')}}</option>-->
<!-- <option [value]="PersonSortField.ChapterCount">{{t('issue-count-label')}}</option>-->
<!-- </select>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </form>-->
<!-- [customSort]="filterGroup.get('sortField')!.value !== PersonSortField.Name"-->
<app-card-detail-layout
[isLoading]="isLoading"
[items]="authors"
[pagination]="pagination"
[trackByIdentity]="trackByIdentity"
[jumpBarKeys]="jumpKeys"
[filteringDisabled]="true"
[refresh]="refresh"
[filterSettings]="filterSettings"
[filterOpen]="filterOpen"
(applyFilter)="updateFilter($event)"
>
<ng-template #cardItem let-item let-position="idx">
<app-person-card [entity]="item" [title]="item.name" [imageUrl]="imageService.getPersonImage(item.id)" (clicked)="goToPerson(item)">
<ng-template #subtitle>
<div class="tag-meta">
<div style="font-size: 12px">{{t('series-count', {num: item.seriesCount | compactNumber})}}</div>
<div style="font-size: 12px">{{t('issue-count', {num: item.chapterCount | compactNumber})}}</div>
</div>
</ng-template>
</app-person-card>
</ng-template>
</app-card-detail-layout>
</ng-container>
</div>

36
UI/Web/src/app/browse/browse-people/browse-people.component.html Normal file
View file

@ -0,0 +1,36 @@
<div class="main-container container-fluid">
<ng-container *transloco="let t; read:'browse-people'" >
<app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
<h2 title>
<span>{{t('title')}}</span>
</h2>
<h6 subtitle>{{t('author-count', {num: pagination.totalItems | number})}} </h6>
</app-side-nav-companion-bar>
<app-card-detail-layout
[isLoading]="isLoading"
[items]="authors"
[pagination]="pagination"
[trackByIdentity]="trackByIdentity"
[jumpBarKeys]="jumpKeys"
[filteringDisabled]="true"
[refresh]="refresh"
[filterSettings]="filterSettings"
[filterOpen]="filterOpen"
(applyFilter)="updateFilter($event)"
>
<ng-template #cardItem let-item let-position="idx">
<app-person-card [entity]="item" [title]="item.name" [imageUrl]="imageService.getPersonImage(item.id)" (clicked)="goToPerson(item)">
<ng-template #subtitle>
<div class="tag-meta">
<div style="font-size: 12px">{{t('series-count', {num: item.seriesCount | compactNumber})}}</div>
<div style="font-size: 12px">{{t('issue-count', {num: item.chapterCount | compactNumber})}}</div>
</div>
</ng-template>
</app-person-card>
</ng-template>
</app-card-detail-layout>
</ng-container>
</div>

0
UI/Web/src/app/browse/browse-people/browse-authors.component.scss → UI/Web/src/app/browse/browse-people/browse-people.component.scss
View file

23
UI/Web/src/app/browse/browse-people/browse-authors.component.ts → UI/Web/src/app/browse/browse-people/browse-people.component.ts
View file

@ -4,7 +4,6 @@ import {
} from "../../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component";
import {CardDetailLayoutComponent} from "../../cards/card-detail-layout/card-detail-layout.component";
import {DecimalPipe} from "@angular/common";
import {Series} from "../../_models/series";
import {Pagination} from "../../_models/pagination";
import {JumpKey} from "../../_models/jumpbar/jump-key";
import {ActivatedRoute, Router} from "@angular/router";
@ -25,10 +24,12 @@ import {FilterEvent} from "../../_models/metadata/series-filter";
import {PersonRole} from "../../_models/metadata/person";
import {FilterComparison} from "../../_models/metadata/v2/filter-comparison";
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import {MetadataService} from "../../_services/metadata.service";
import {FilterStatement} from "../../_models/metadata/v2/filter-statement";
@Component({
selector: 'app-browse-authors',
selector: 'app-browse-people',
imports: [
SideNavCompanionBarComponent,
TranslocoDirective,
@ -39,11 +40,11 @@ import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
ReactiveFormsModule,
],
templateUrl: './browse-authors.component.html',
styleUrl: './browse-authors.component.scss',
templateUrl: './browse-people.component.html',
styleUrl: './browse-people.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class BrowseAuthorsComponent {
export class BrowsePeopleComponent {
protected readonly PersonSortField = PersonSortField;
private readonly cdRef = inject(ChangeDetectorRef);
@ -54,9 +55,8 @@ export class BrowseAuthorsComponent {
private readonly route = inject(ActivatedRoute);
private readonly filterUtilityService = inject(FilterUtilitiesService);
protected readonly imageService = inject(ImageService);
protected readonly metadataService = inject(MetadataService);
series: Series[] = [];
isLoading = false;
authors: Array<BrowsePerson> = [];
pagination: Pagination = {currentPage: 0, totalPages: 0, totalItems: 0, itemsPerPage: 0};
@ -77,6 +77,11 @@ export class BrowseAuthorsComponent {
this.route.data.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(data => {
this.filter = data['filter'] as FilterV2<PersonFilterField, PersonSortField>;
if (this.filter == null) {
this.filter = this.metadataService.createDefaultFilterDto('person');
this.filter.statements.push(this.metadataService.createDefaultFilterStatement('person') as FilterStatement<PersonFilterField>);
}
this.filterActiveCheck = this.filterUtilityService.createPersonV2Filter();
this.filterActiveCheck!.statements.push({value: `${PersonRole.Writer},${PersonRole.CoverArtist}`, field: PersonFilterField.Role, comparison: FilterComparison.Contains});
this.filterSettings.presetsV2 = this.filter;
@ -89,8 +94,8 @@ export class BrowseAuthorsComponent {
loadData() {
if (!this.filter) {
this.filter = this.filterUtilityService.createPersonV2Filter();
this.filter.statements.push({value: `${PersonRole.Writer},${PersonRole.CoverArtist}`, field: PersonFilterField.Role, comparison: FilterComparison.Contains});
this.filter = this.metadataService.createDefaultFilterDto('person');
this.filter.statements.push(this.metadataService.createDefaultFilterStatement('person') as FilterStatement<PersonFilterField>);
this.cdRef.markForCheck();
}

4
UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html
View file

@ -35,7 +35,7 @@
<p><ng-container [ngTemplateOutlet]="noDataTemplate"></ng-container></p>
}
<virtual-scroller [ngClass]="{'empty': items.length === 0 && !isLoading}" #scroll [items]="items()" [bufferAmount]="bufferAmount" [parentScroll]="parentScroll">
<virtual-scroller [ngClass]="{'empty': items.length === 0 && !isLoading}" #scroll [items]="items" [bufferAmount]="bufferAmount" [parentScroll]="parentScroll">
<div class="grid row g-0" #container>
@for (item of scroll.viewPortItems; track trackByIdentity(i, item); let i = $index) {
<div class="card col-auto mt-2 mb-2"
@ -56,7 +56,7 @@
</div>
<ng-template #cardTemplate>
<virtual-scroller #scroll [items]="items()" [bufferAmount]="bufferAmount">
<virtual-scroller #scroll [items]="items" [bufferAmount]="bufferAmount">
<div class="grid row g-0" #container>
<div class="card col-auto mt-2 mb-2" *ngFor="let item of scroll.viewPortItems; trackBy:trackByIdentity; index as i" (click)="tryToSaveJumpKey()" id="jumpbar-index--{{i}}" [attr.jumpbar-index]="i">

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

@ -81,9 +81,8 @@ export class CardDetailLayoutComponent<TFilter extends number, TSort extends num
header: Signal<string> = input('');
@Input() isLoading: boolean = false;
//@Input() items: any[] = [];
@Input() pagination!: Pagination;
items = input.required<any[]>();
@Input() items: any[] = [];
/**
@ -159,7 +158,7 @@ export class CardDetailLayoutComponent<TFilter extends number, TSort extends num
}
if (this.pagination === undefined) {
const items = this.items();
const items = this.items;
this.pagination = {currentPage: 1, itemsPerPage: items.length, totalItems: items.length, totalPages: 1};
this.cdRef.markForCheck();
}

2
UI/Web/src/app/metadata-filter/_components/metadata-builder/metadata-builder.component.ts
View file

@ -63,8 +63,6 @@ export class MetadataBuilderComponent<TFilter extends number = number, TSort ext
ngOnInit() {
console.log('metadata builder filter: ', this.filter);
this.formGroup.addControl('comparison', new FormControl<FilterCombination>(this.filter?.combination || FilterCombination.Or, []));
this.formGroup.valueChanges.pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef), tap(values => {

4
UI/Web/src/app/metadata-filter/metadata-filter.component.ts
View file

@ -162,7 +162,6 @@ export class MetadataFilterComponent<TFilter extends number = number, TSort exte
}
handleFilters(filter: FilterV2<TFilter, TSort>) {
console.log('handleFilters', filter);
this.filterV2 = filter;
}
@ -171,11 +170,8 @@ export class MetadataFilterComponent<TFilter extends number = number, TSort exte
this.fullyLoaded = false;
const currentFilterSettings = this.filterSettings();
console.log('BUG HERE filterSettings: ', currentFilterSettings);
this.filterV2 = this.deepClone(currentFilterSettings.presetsV2);
console.log('preset: ', currentFilterSettings.presetsV2);
const defaultSortField = this.sortFieldOptions()[0].value;
this.sortGroup = new FormGroup({

2
UI/Web/src/app/sidenav/_components/side-nav/side-nav.component.html
View file

@ -76,7 +76,7 @@
@case (SideNavStreamType.BrowseAuthors) {
<app-side-nav-item cdkDrag cdkDragBoundary=".side-nav-container" cdkDragPreviewContainer="parent"
[cdkDragDisabled]="!editMode" [cdkDragData]="navStream" [editMode]="editMode" icon="fa-users" [title]="t('browse-authors')" link="/browse/authors/"></app-side-nav-item>
[cdkDragDisabled]="!editMode" [cdkDragData]="navStream" [editMode]="editMode" icon="fa-users" [title]="t('browse-people')" link="/browse/authors/"></app-side-nav-item>
}
@case (SideNavStreamType.SmartFilter) {

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

@ -1036,7 +1036,7 @@
"collections": "Collections",
"reading-lists": "Reading Lists",
"bookmarks": "Bookmarks",
"browse-authors": "Browse Authors",
"browse-people": "Browse People",
"filter-label": "{{common.filter}}",
"all-series": "All Series",
"clear": "{{common.clear}}",
@ -1049,7 +1049,7 @@
"edit": "{{common.edit}}"
},
"browse-authors": {
"browse-people": {
"title": "Browse People",
"author-count": "{{num}} People",
"cover-image-description": "{{edit-series-modal.cover-image-description}}",
@ -2511,7 +2511,7 @@
"reading-lists": "{{side-nav.reading-lists}}",
"bookmarks": "{{side-nav.bookmarks}}",
"all-series": "{{side-nav.all-series}}",
"browse-authors": "{{side-nav.browse-authors}}"
"browse-people": "{{side-nav.browse-people}}"
},
"filter-field-pipe": {