feat: search pages

apps/NwaifuAnime/src/app/components/home/home.component.html

@@ -47,7 +47,7 @@
     <div
       class="flex md:flex-row flex-col flex-nowrap md:flex-wrap gap-2 justify-start items-center w-full px-3 mt-3 md:mx-12"
     >
-      @for (item of items; track $index) {
+      @for (item of currentPageItems; track $index) {
         <a
           routerLink="/detail"
           [queryParams]="{ url: item.slug_url }"
@@ -71,9 +71,31 @@
         </a>
       }
     </div>
-    <div class="flex flex-row items-center justify-between">
-      <button *ngIf="currentPage > 0">Назад</button>
-      <button *ngIf="currentPage < items.length / 8 - 1">Вперед</button>
+    @if (items.length) {
+      <div class="flex flex-row items-center justify-between w-full px-3">
+        <button
+          [ngClass]="{
+            'bg-slate-600 text-white p-3 rounded-md hover:scale-105': 1,
+            'opacity-15': currentPage === 0,
+          }"
+          [disabled]="currentPage === 0"
+          (click)="previousSearchPage()"
+        >
+          Назад
+        </button>
+        <p>Страница {{ currentPage + 1 }} из {{ maxPages + 1 }}</p>
+        <button
+          [ngClass]="{
+            'bg-slate-600 text-white p-3 rounded-md hover:scale-105': 1,
+            'opacity-15': currentPage === maxPages,
+          }"
+          [disabled]="currentPage === maxPages"
+          *ngIf="currentPage < items.length / 8"
+          (click)="nextSearchPage()"
+        >
+          Вперед
+        </button>
       </div>
+    }
   </div>
 }

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