diff --git a/apps/NwaifuAnime/src/app/components/home/home.component.html b/apps/NwaifuAnime/src/app/components/home/home.component.html index f853d4c..698e9b2 100644 --- a/apps/NwaifuAnime/src/app/components/home/home.component.html +++ b/apps/NwaifuAnime/src/app/components/home/home.component.html @@ -47,7 +47,7 @@
- @for (item of items; track $index) { + @for (item of currentPageItems; track $index) { }
-
- - -
+ @if (items.length) { +
+ +

Страница {{ currentPage + 1 }} из {{ maxPages + 1 }}

+ +
+ } } diff --git a/apps/NwaifuAnime/src/app/components/home/home.component.ts b/apps/NwaifuAnime/src/app/components/home/home.component.ts index 267c8cf..a620165 100644 --- a/apps/NwaifuAnime/src/app/components/home/home.component.ts +++ b/apps/NwaifuAnime/src/app/components/home/home.component.ts @@ -1,7 +1,7 @@ import { CommonModule } from "@angular/common"; import { Component, Input, OnDestroy, OnInit } from "@angular/core"; -import { ActivatedRoute, RouterLink } from "@angular/router"; -import { map, Subject, Subscription, takeUntil } from "rxjs"; +import { ActivatedRoute, Router, RouterLink } from "@angular/router"; +import { Subject, Subscription, map, takeUntil } from "rxjs"; import { RulibAuthService } from "../../services/parsers/rulib/rulib.auth.service"; import { IRuLIBPopular } from "../../services/parsers/rulib/rulib.popular.dto"; import { Datum } from "../../services/parsers/rulib/rulib.search.dto"; @@ -29,6 +29,7 @@ export class HomeComponent implements OnDestroy, OnInit { private searchService: SearchService, private route: ActivatedRoute, private ruLibAuthService: RulibAuthService, + private router: Router, ) { this.searchService.setMangalibParser(); } @@ -77,11 +78,41 @@ export class HomeComponent implements OnDestroy, OnInit { return Array.from(this.popularItemsMap.entries()).sort((a, b) => (a[0] > b[0] ? 1 : -1)); } + get currentPageItems() { + return this.items.slice( + 8 * this.currentPage, + Math.min(this.items.length, 8 * (this.currentPage + 1)), + ); + } + + get maxPages() { + return Math.ceil(this.items.length / 8) - 1; + } + + nextSearchPage() { + this.currentPage = Math.min(this.currentPage + 1, Math.ceil(this.items.length / 8) - 1); + this.router.navigate([], { + queryParams: { page: this.currentPage }, + relativeTo: this.route, + queryParamsHandling: "merge", + }); + } + + previousSearchPage() { + this.currentPage = Math.max(this.currentPage - 1, 0); + this.router.navigate([], { + queryParams: { page: this.currentPage }, + relativeTo: this.route, + queryParamsHandling: "merge", + }); + } + ngOnInit(): void { this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => { + if (this.search && params["search"] && this.search === params["search"]) return; this.search = params["search"] ?? ""; try { - this.currentPage = +params["page"] ?? 0; + this.currentPage = Math.max(0, +params["page"] || 0); } catch { this.currentPage = 0; } @@ -95,7 +126,8 @@ export class HomeComponent implements OnDestroy, OnInit { .subscribe((data) => { this.loading = false; this.items = data.data; - const maxPage = Math.floor(this.items.length / 8) - 1; + const maxPage = Math.ceil(this.items.length / 8) - 1; + console.log(maxPage); this.currentPage = Math.min(this.currentPage, maxPage); this.notFound = this.items.length === 0; });