From 597c93339fad211dfd32560c5a883017c9abb736 Mon Sep 17 00:00:00 2001 From: Keksonoid Date: Mon, 12 May 2025 10:37:56 +0500 Subject: [PATCH] add query params to cpage companies --- .../companies-page.component.html | 1 + .../companies-page.component.ts | 42 ++++++++++++++++--- .../pagination-buttons.component.ts | 38 ++++++++++------- 3 files changed, 61 insertions(+), 20 deletions(-) diff --git a/src/app/modules/companies/components/companies-page/companies-page.component.html b/src/app/modules/companies/components/companies-page/companies-page.component.html index 40e48106..19a29843 100644 --- a/src/app/modules/companies/components/companies-page/companies-page.component.html +++ b/src/app/modules/companies/components/companies-page/companies-page.component.html @@ -85,6 +85,7 @@
diff --git a/src/app/modules/companies/components/companies-page/companies-page.component.ts b/src/app/modules/companies/components/companies-page/companies-page.component.ts index add28476..6a302be6 100644 --- a/src/app/modules/companies/components/companies-page/companies-page.component.ts +++ b/src/app/modules/companies/components/companies-page/companies-page.component.ts @@ -1,5 +1,5 @@ import { Component, OnDestroy, OnInit } from "@angular/core"; -import { Router } from "@angular/router"; +import { Router, ActivatedRoute } from "@angular/router"; import { Company } from "@models/companies.model"; import { defaultPageParams, PageParams } from "@models/page-params"; import { PaginatedList } from "@models/paginated-list"; @@ -24,13 +24,18 @@ export class CompaniesPageComponent implements OnInit, OnDestroy { private readonly service: CompaniesService, private readonly title: TitleService, private readonly router: Router, + private readonly route: ActivatedRoute, private readonly gtag: GoogleAnalyticsService, ) { this.title.setTitle("Отзывы к IT компаниям"); } ngOnInit(): void { - this.loadData(1); + this.route.queryParams.pipe(untilDestroyed(this)).subscribe(params => { + this.currentPage = params['page'] ? Number(params['page']) : 1; + this.searchQuery = params['search'] || ''; + this.loadData(this.currentPage, false); + }); } search(): void { @@ -40,7 +45,7 @@ export class CompaniesPageComponent implements OnInit, OnDestroy { "company_reviews", this.searchQuery, ); - this.loadData(1); + this.updateUrlParams(1); } } @@ -61,13 +66,24 @@ export class CompaniesPageComponent implements OnInit, OnDestroy { "company_reviews", this.searchQuery, ); - this.loadData(1); + + this.router.navigate([], { + relativeTo: this.route, + queryParams: {}, + }); + + this.loadData(1, false); } - loadData(pageToLoad: number): void { + loadData(pageToLoad: number, updateUrl: boolean = true): void { this.companies = null; this.source = null; - this.currentPage = pageToLoad; + + if (updateUrl) { + this.updateUrlParams(pageToLoad); + } else { + this.currentPage = pageToLoad; + } this.service .all({ @@ -82,6 +98,20 @@ export class CompaniesPageComponent implements OnInit, OnDestroy { }); } + private updateUrlParams(page: number): void { + const queryParams: any = { page }; + + if (this.searchQuery && this.searchQuery.length >= 3) { + queryParams.search = this.searchQuery; + } + + this.router.navigate([], { + relativeTo: this.route, + queryParams, + queryParamsHandling: 'merge', + }); + } + navigateToCompany(id: string): void { this.router.navigate(["/companies", id]); } diff --git a/src/app/shared/components/pagination-buttons/pagination-buttons.component.ts b/src/app/shared/components/pagination-buttons/pagination-buttons.component.ts index bd9d9b1d..9a808f89 100644 --- a/src/app/shared/components/pagination-buttons/pagination-buttons.component.ts +++ b/src/app/shared/components/pagination-buttons/pagination-buttons.component.ts @@ -10,6 +10,9 @@ export class PaginationButtonsComponent implements OnInit { @Input() source: PaginatedModel | null = null; + @Input() + currentPage: number | null = null; + @Output() pageChange: EventEmitter = new EventEmitter(); @@ -17,16 +20,18 @@ export class PaginationButtonsComponent implements OnInit { lastPage: number | null = null; get disablePreviousButton(): boolean { + const current = this.currentPage || (this.source ? this.source.currentPage : 1); return ( this.source != null && - (this.source.currentPage === 1 || this.source.totalItems === 0) + (current === 1 || this.source.totalItems === 0) ); } get disableNextButton(): boolean { + const current = this.currentPage || (this.source ? this.source.currentPage : 1); return ( this.source != null && - (this.source.currentPage === this.lastPage || + (current === this.lastPage || this.source.totalItems === 0) ); } @@ -37,24 +42,26 @@ export class PaginationButtonsComponent implements OnInit { const allPages = Array.from(Array(this.lastPage).keys()).map( (i) => i + 1, ); + + const current = this.currentPage || this.source.currentPage; if (allPages.length > 7) { if ( - this.source.currentPage > 3 && - this.source.currentPage < this.lastPage - 2 + current > 3 && + current < this.lastPage - 2 ) { this.pages = [ 1, 2, null, - this.source.currentPage - 1, - this.source.currentPage, - this.source.currentPage + 1, + current - 1, + current, + current + 1, null, this.lastPage - 1, this.lastPage, ]; - } else if (this.source.currentPage <= 3) { + } else if (current <= 3) { this.pages = [1, 2, 3, 4, 5, null, this.lastPage - 1, this.lastPage]; } else { this.pages = [ @@ -75,18 +82,20 @@ export class PaginationButtonsComponent implements OnInit { } previous(): void { - if (this.source && this.source.currentPage > 1) { - this.pageClicked(this.source.currentPage - 1); + const current = this.currentPage || (this.source ? this.source.currentPage : 1); + if (this.source && current > 1) { + this.pageClicked(current - 1); } } next(): void { + const current = this.currentPage || (this.source ? this.source.currentPage : 1); if ( this.source && this.lastPage && - this.source.currentPage < this.lastPage + current < this.lastPage ) { - this.pageClicked(this.source.currentPage + 1); + this.pageClicked(current + 1); } } @@ -100,7 +109,8 @@ export class PaginationButtonsComponent implements OnInit { if (page == null) { return ""; } - - return this.source && this.source.currentPage === page ? "active" : ""; + + const current = this.currentPage || (this.source ? this.source.currentPage : 1); + return this.source && current === page ? "active" : ""; } }