Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pagination components refactoring #1062

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -529,12 +529,12 @@ describe('dataset pages', () => {
})
it('should not display carousel dot button for 4 link cards', () => {
cy.get('datahub-record-otherlinks')
.find('.carousel-step-dot')
.find('.pagination-dot')
.should('exist')
})
it('should not display carousel dot button for 2 API cards', () => {
cy.get('datahub-record-apis')
.find('.carousel-step-dot')
.find('.pagination-dot')
.should('not.exist')
})
})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,7 @@
<gn-ui-previous-next-buttons
data-test="orgDetailsNavBtn"
*ngIf="hasPagination"
[isFirst]="isFirstPage"
[isLast]="isLastPage"
(directionButtonClicked)="changeStepOrPage($event)"
[listComponent]="this"
></gn-ui-previous-next-buttons>
<div class="ml-auto">
<a
Expand Down Expand Up @@ -107,20 +105,11 @@
[extraClass]="'w-[300px]'"
></gn-ui-related-record-card>
</div>
<div
*ngIf="totalPages > 1"
class="flex flex-row justify-center gap-[14px] p-1 mx-auto"
[ngClass]="paginationContainerClass"
<gn-ui-pagination-dots
[listComponent]="this"
[containerClass]="paginationContainerClass"
>
<button
*ngFor="let page of pages"
class="list-page-dot"
(click)="goToPage(page)"
[ngClass]="
currentPage === page ? 'bg-primary' : 'bg-gray-400'
"
></button>
</div>
</gn-ui-pagination-dots>
</ng-container>

<ng-container *ngIf="isSearchFacadeLoading">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
DebugElement,
NO_ERRORS_SCHEMA,
} from '@angular/core'
import { ChangeDetectionStrategy, DebugElement } from '@angular/core'
import { ComponentFixture, TestBed } from '@angular/core/testing'
import { SearchFacade } from '@geonetwork-ui/feature/search'
import { TranslateModule } from '@ngx-translate/core'
Expand All @@ -14,33 +9,13 @@ import {
datasetRecordsFixture,
someOrganizationsFixture,
} from '@geonetwork-ui/common/fixtures'
import { AsyncPipe, NgForOf, NgIf } from '@angular/common'
import {
ButtonComponent,
PreviousNextButtonsComponent,
} from '@geonetwork-ui/ui/inputs'
import {
BlockListComponent,
CarouselComponent,
MaxLinesComponent,
} from '@geonetwork-ui/ui/layout'
import { LetDirective } from '@ngrx/component'
import { LinkCardComponent, UiElementsModule } from '@geonetwork-ui/ui/elements'
import { UiSearchModule } from '@geonetwork-ui/ui/search'
import { UiDatavizModule } from '@geonetwork-ui/ui/dataviz'
import { RouterLink } from '@angular/router'
import { UiWidgetsModule } from '@geonetwork-ui/ui/widgets'
import { Organization } from '@geonetwork-ui/common/domain/model/record'
import { RouterTestingModule } from '@angular/router/testing'
import { By } from '@angular/platform-browser'
import { ROUTER_ROUTE_SEARCH } from '@geonetwork-ui/feature/router'

let getHTMLElement: (dataTest: string) => HTMLElement | undefined

const changeDetectorRefMock: Partial<ChangeDetectorRef> = {
markForCheck: jest.fn(),
}

class OrganisationsServiceMock {
getFiltersForOrgs = jest.fn((orgs) =>
of({
Expand All @@ -58,7 +33,7 @@ const manyDatasets = datasetRecordsFixture().concat(datasetRecordsFixture()[0])

const organizationIsLoading = new BehaviorSubject(false)
const totalPages = new BehaviorSubject(10)
const currentPage = new BehaviorSubject(0)
const currentPage = new BehaviorSubject(1)
const results = new BehaviorSubject(manyDatasets)

const desiredPageSize = 3
Expand All @@ -72,11 +47,9 @@ class SearchFacadeMock {
results$ = results.asObservable()
isLoading$ = organizationIsLoading.asObservable()
totalPages$ = totalPages.asObservable()
isBeginningOfResults$ = of(currentPage.getValue() === 1)
isEndOfResults$ = of(totalPages.getValue() === currentPage.getValue())
currentPage$ = currentPage.asObservable()
paginate = jest.fn(() => {
currentPage.next(currentPage.getValue() + 1)
paginate = jest.fn((newPage) => {
currentPage.next(newPage)
return new SearchFacadeMock()
})
}
Expand All @@ -89,25 +62,8 @@ describe('OrganizationDetailsComponent', () => {

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [],
schemas: [NO_ERRORS_SCHEMA],
imports: [
AsyncPipe,
NgIf,
ButtonComponent,
TranslateModule,
CarouselComponent,
BlockListComponent,
LetDirective,
LinkCardComponent,
NgForOf,
PreviousNextButtonsComponent,
UiElementsModule,
UiSearchModule,
MaxLinesComponent,
UiDatavizModule,
RouterLink,
UiWidgetsModule,
OrganizationDetailsComponent,
TranslateModule.forRoot(),
RouterTestingModule,
],
Expand All @@ -120,10 +76,6 @@ describe('OrganizationDetailsComponent', () => {
provide: SearchFacade,
useClass: SearchFacadeMock,
},
{
provide: ChangeDetectorRef,
useValue: changeDetectorRefMock,
},
],
})
.overrideComponent(OrganizationDetailsComponent, {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,23 @@ import {
Input,
OnDestroy,
OnInit,
ViewChild,
} from '@angular/core'
import { CommonModule } from '@angular/common'
import {
CatalogRecord,
Organization,
} from '@geonetwork-ui/common/domain/model/record'
import {
ButtonComponent,
PreviousNextButtonsComponent,
} from '@geonetwork-ui/ui/inputs'
import { TranslateModule } from '@ngx-translate/core'
import {
BlockListComponent,
CarouselComponent,
MaxLinesComponent,
Paginable,
PaginationDotsComponent,
PreviousNextButtonsComponent,
} from '@geonetwork-ui/ui/layout'
import { LetDirective } from '@ngrx/component'
import {
ErrorComponent,
ErrorType,
LinkCardComponent,
RelatedRecordCardComponent,
UiElementsModule,
} from '@geonetwork-ui/ui/elements'
Expand Down Expand Up @@ -57,12 +52,8 @@ import { startWith } from 'rxjs/operators'
standalone: true,
imports: [
CommonModule,
ButtonComponent,
TranslateModule,
CarouselComponent,
BlockListComponent,
LetDirective,
LinkCardComponent,
PreviousNextButtonsComponent,
UiElementsModule,
UiSearchModule,
Expand All @@ -73,33 +64,25 @@ import { startWith } from 'rxjs/operators'
ErrorComponent,
SpinningLoaderComponent,
RelatedRecordCardComponent,
PaginationDotsComponent,
],
})
export class OrganizationDetailsComponent implements OnInit, OnDestroy {
export class OrganizationDetailsComponent
implements OnInit, OnDestroy, Paginable
{
protected readonly ErrorType = ErrorType
protected readonly ROUTER_ROUTE_SEARCH = ROUTER_ROUTE_SEARCH

protected get pages() {
return new Array(this.totalPages).fill(0).map((_, i) => i + 1)
}

subscriptions$: Subscription = new Subscription()

isSearchFacadeLoading = true

totalPages = 0
currentPage = 1
isFirstPage = this.currentPage === 1
isLastPage = false

currentOrganization$ = new BehaviorSubject<Organization>(null)
@Input() set organization(value: Organization) {
this.currentOrganization$.next(value)
}
@Input() paginationContainerClass = 'w-full bottom-0 top-auto'

@ViewChild(BlockListComponent) list: BlockListComponent

lastPublishedDatasets$: Observable<CatalogRecord[]> =
this.currentOrganization$.pipe(
switchMap((organization) =>
Expand Down Expand Up @@ -129,17 +112,31 @@ export class OrganizationDetailsComponent implements OnInit, OnDestroy {
}

get hasPagination() {
return this.totalPages > 1
return this.pagesCount > 1
}

changeStepOrPage(direction: string) {
if (direction === 'next') {
this.searchFacade.paginate(this.currentPage + 1)
} else {
this.searchFacade.paginate(this.currentPage - 1)
}
}
pagesCount_ = 0
currentPage_ = 1

// Paginable API
get currentPage() {
return this.currentPage_
}
get pagesCount() {
return this.pagesCount_
}
get isFirstPage() {
return this.currentPage === 1
}
get isLastPage() {
return this.currentPage === this.pagesCount
}
goToPrevPage() {
this.searchFacade.paginate(this.currentPage - 1)
}
goToNextPage() {
this.searchFacade.paginate(this.currentPage + 1)
}
goToPage(page: number) {
this.searchFacade.paginate(page)
}
Expand All @@ -149,24 +146,12 @@ export class OrganizationDetailsComponent implements OnInit, OnDestroy {
combineLatest([
this.searchFacade.isLoading$.pipe(distinctUntilChanged()),
this.searchFacade.totalPages$.pipe(distinctUntilChanged()),
this.searchFacade.isBeginningOfResults$.pipe(distinctUntilChanged()),
this.searchFacade.isEndOfResults$.pipe(distinctUntilChanged()),
this.searchFacade.currentPage$.pipe(distinctUntilChanged()),
]).subscribe(
([
isSearchFacadeLoading,
totalPages,
isBeginningOfResults,
isEndOfResults,
currentPage,
]) => {
this.isSearchFacadeLoading = isSearchFacadeLoading
this.totalPages = totalPages
this.isFirstPage = isBeginningOfResults
this.isLastPage = isEndOfResults
this.currentPage = currentPage
}
)
]).subscribe(([isSearchFacadeLoading, totalPages, currentPage]) => {
this.isSearchFacadeLoading = isSearchFacadeLoading
this.pagesCount_ = totalPages
this.currentPage_ = currentPage
})
)
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,15 @@
record.metadata.api
</p>
<gn-ui-previous-next-buttons
*ngIf="hasPagination"
[isFirst]="isFirstStep"
[isLast]="isLastStep"
(directionButtonClicked)="changeStepOrPage($event)"
*ngIf="carousel.pagesCount > 1"
[listComponent]="carousel"
></gn-ui-previous-next-buttons>
</div>
<gn-ui-carousel (currentStepChange)="updateView()" containerClass="gap-4 py-10">
<gn-ui-carousel
(currentStepChange)="updateView()"
containerClass="gap-4 py-10"
#carousel
>
<gn-ui-api-card
*ngFor="let link of apiLinks$ | async"
[title]="link.name"
Expand Down
26 changes: 4 additions & 22 deletions apps/datahub/src/app/record/record-apis/record-apis.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,10 @@ import {
} from '@angular/core'
import { DatasetServiceDistribution } from '@geonetwork-ui/common/domain/model/record'
import { MdViewFacade } from '@geonetwork-ui/feature/record'
import { CarouselComponent } from '@geonetwork-ui/ui/layout'
import { PreviousNextButtonsComponent } from '@geonetwork-ui/ui/inputs'
import {
CarouselComponent,
PreviousNextButtonsComponent,
} from '@geonetwork-ui/ui/layout'
import {
ApiCardComponent,
RecordApiFormComponent,
Expand Down Expand Up @@ -58,22 +60,10 @@ export class RecordApisComponent implements OnInit {
this.selectedApiLink = undefined
}

get hasPagination() {
return this.carousel?.stepsCount > 1
}

updateView() {
this.changeDetector.detectChanges()
}

get isFirstStep() {
return this.carousel?.isFirstStep
}

get isLastStep() {
return this.carousel?.isLastStep
}

openRecordApiForm(link: DatasetServiceDistribution) {
this.selectedApiLink = link
this.setStyle(link)
Expand All @@ -88,12 +78,4 @@ export class RecordApisComponent implements OnInit {
this.maxHeight = link === undefined ? '0px' : '500px'
this.opacity = link === undefined ? 0 : 1
}

changeStepOrPage(direction: string) {
if (direction === 'next') {
this.carousel?.slideToNext()
} else {
this.carousel?.slideToPrevious()
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,8 @@
record.metadata.links
</p>
<gn-ui-previous-next-buttons
*ngIf="hasPagination"
[isFirst]="isFirstStepOrPage"
[isLast]="isLastStepOrPage"
(directionButtonClicked)="changeStepOrPage($event)"
*ngIf="paginableElement?.pagesCount > 1"
[listComponent]="paginableElement"
></gn-ui-previous-next-buttons>
</div>
<ng-container *ngrxLet="otherLinks$ as otherLinks">
Expand Down
Loading
Loading