diff --git a/UI/Web/src/app/_models/metadata/v2/filter-statement.ts b/UI/Web/src/app/_models/metadata/v2/filter-statement.ts index f7d4768df..b14fe564d 100644 --- a/UI/Web/src/app/_models/metadata/v2/filter-statement.ts +++ b/UI/Web/src/app/_models/metadata/v2/filter-statement.ts @@ -1,6 +1,6 @@ import {FilterComparison} from "./filter-comparison"; -export interface FilterStatement { +export interface FilterStatement { comparison: FilterComparison; field: T; value: string; diff --git a/UI/Web/src/app/_routes/browse-routing.module.ts b/UI/Web/src/app/_routes/browse-routing.module.ts index ed736ff12..be96e8193 100644 --- a/UI/Web/src/app/_routes/browse-routing.module.ts +++ b/UI/Web/src/app/_routes/browse-routing.module.ts @@ -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 }, diff --git a/UI/Web/src/app/_services/metadata.service.ts b/UI/Web/src/app/_services/metadata.service.ts index 112f17999..fe0702219 100644 --- a/UI/Web/src/app/_services/metadata.service.ts +++ b/UI/Web/src/app/_services/metadata.service.ts @@ -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(field: T, comparison = FilterComparison.Equal, value = '') { + createFilterStatement(field: T, comparison = FilterComparison.Equal, value = '') { return { comparison: comparison, field: field, diff --git a/UI/Web/src/app/_services/toggle.service.ts b/UI/Web/src/app/_services/toggle.service.ts index b02ece82d..0ad9813e3 100644 --- a/UI/Web/src/app/_services/toggle.service.ts +++ b/UI/Web/src/app/_services/toggle.service.ts @@ -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); } } diff --git a/UI/Web/src/app/browse/browse-people/browse-authors.component.html b/UI/Web/src/app/browse/browse-people/browse-authors.component.html deleted file mode 100644 index 94b1c0e1b..000000000 --- a/UI/Web/src/app/browse/browse-people/browse-authors.component.html +++ /dev/null @@ -1,75 +0,0 @@ -
- - -

- {{t('title')}} -

-
{{t('author-count', {num: pagination.totalItems | number})}}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
{{t('series-count', {num: item.seriesCount | compactNumber})}}
-
{{t('issue-count', {num: item.chapterCount | compactNumber})}}
-
- - - - - - -
diff --git a/UI/Web/src/app/browse/browse-people/browse-people.component.html b/UI/Web/src/app/browse/browse-people/browse-people.component.html new file mode 100644 index 000000000..683a5c97b --- /dev/null +++ b/UI/Web/src/app/browse/browse-people/browse-people.component.html @@ -0,0 +1,36 @@ +
+ + +

+ {{t('title')}} +

+
{{t('author-count', {num: pagination.totalItems | number})}}
+ + + + + + + +
+
{{t('series-count', {num: item.seriesCount | compactNumber})}}
+
{{t('issue-count', {num: item.chapterCount | compactNumber})}}
+
+ + + + + + +
diff --git a/UI/Web/src/app/browse/browse-people/browse-authors.component.scss b/UI/Web/src/app/browse/browse-people/browse-people.component.scss similarity index 100% rename from UI/Web/src/app/browse/browse-people/browse-authors.component.scss rename to UI/Web/src/app/browse/browse-people/browse-people.component.scss diff --git a/UI/Web/src/app/browse/browse-people/browse-authors.component.ts b/UI/Web/src/app/browse/browse-people/browse-people.component.ts similarity index 84% rename from UI/Web/src/app/browse/browse-people/browse-authors.component.ts rename to UI/Web/src/app/browse/browse-people/browse-people.component.ts index 021e1744b..182222879 100644 --- a/UI/Web/src/app/browse/browse-people/browse-authors.component.ts +++ b/UI/Web/src/app/browse/browse-people/browse-people.component.ts @@ -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 = []; 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; + if (this.filter == null) { + this.filter = this.metadataService.createDefaultFilterDto('person'); + this.filter.statements.push(this.metadataService.createDefaultFilterStatement('person') as FilterStatement); + } + 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); this.cdRef.markForCheck(); } diff --git a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html index a91bec034..2bf0a2608 100644 --- a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html +++ b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html @@ -35,7 +35,7 @@

} - +
@for (item of scroll.viewPortItems; track trackByIdentity(i, item); let i = $index) {
- +
diff --git a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts index bf3c273e4..2268ce208 100644 --- a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts +++ b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts @@ -81,9 +81,8 @@ export class CardDetailLayoutComponent = input(''); @Input() isLoading: boolean = false; - //@Input() items: any[] = []; @Input() pagination!: Pagination; - items = input.required(); + @Input() items: any[] = []; /** @@ -159,7 +158,7 @@ export class CardDetailLayoutComponent(this.filter?.combination || FilterCombination.Or, [])); this.formGroup.valueChanges.pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef), tap(values => { diff --git a/UI/Web/src/app/metadata-filter/metadata-filter.component.ts b/UI/Web/src/app/metadata-filter/metadata-filter.component.ts index d3bf1c745..d1fc264ef 100644 --- a/UI/Web/src/app/metadata-filter/metadata-filter.component.ts +++ b/UI/Web/src/app/metadata-filter/metadata-filter.component.ts @@ -162,7 +162,6 @@ export class MetadataFilterComponent) { - console.log('handleFilters', filter); this.filterV2 = filter; } @@ -171,11 +170,8 @@ export class MetadataFilterComponent + [cdkDragDisabled]="!editMode" [cdkDragData]="navStream" [editMode]="editMode" icon="fa-users" [title]="t('browse-people')" link="/browse/authors/"> } @case (SideNavStreamType.SmartFilter) { diff --git a/UI/Web/src/assets/langs/en.json b/UI/Web/src/assets/langs/en.json index ba70b0f8e..20798d19f 100644 --- a/UI/Web/src/assets/langs/en.json +++ b/UI/Web/src/assets/langs/en.json @@ -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": {