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;
});