Skip to content

Commit

Permalink
feat(datahub): finish organization-page
Browse files Browse the repository at this point in the history
  • Loading branch information
Romuald Caplier committed Jun 14, 2024
1 parent 96cc908 commit eca730f
Show file tree
Hide file tree
Showing 23 changed files with 269 additions and 51 deletions.
125 changes: 125 additions & 0 deletions apps/datahub-e2e/src/e2e/organization-page.cy.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
import 'cypress-real-events'

describe('organizations', () => {
beforeEach(() => {
cy.visit('organization/Barbie%20Inc.')

// aliases
cy.get('gn-ui-navigation-button').as('backButton')
cy.get('[data-cy="organizationHeaderName"]').as('organizationHeaderName')
cy.get('[data-cy="organizationHeaderWebsiteLink"]').as(
'organizationHeaderWebsiteLink'
)
cy.get('[data-cy="organizationDescription"]').as('organizationDescription')
cy.get('gn-ui-max-lines').contains('Read more').as('readMoreButton')
cy.get('[data-cy="organizationLogo"]').as('organizationLogo')
cy.get('[data-cy="organizationDatasetCount"]').as(
'organizationDatasetCount'
)
cy.get('[data-cy="organizationEmail"]').as('organizationEmail')
cy.get('[data-cy="organizationPageLastPublishedDatasets"]').as(
'organizationPageLastPublishedDatasets'
)
cy.get(
'[data-cy="organizationDetailsLastPublishedDatasetsSearchAllButton"]'
).as('organizationDetailsLastPublishedDatasetsSearchAllButton')
})

describe('general display', () => {
describe('header', () => {
describe('back button', () => {
beforeEach(() => {
// Simulate that we come from the organizations search page
cy.visit('organisations')
cy.visit('organization/Barbie%20Inc.')
})

it('back button goes to the previous visited page', () => {
cy.get('@backButton').click()
cy.url().should('include', '/organisations')
})
})

it('should display the organization name', () => {
cy.get('@organizationHeaderName').should('contain', 'Barbie Inc.')
})

it('should display the organization website link', () => {
cy.get('@organizationHeaderWebsiteLink')
.should('be.visible')
.should('have.attr', 'href', 'https://www.barbie-inc.com/')
.and('have.attr', 'target', '_blank')
})
})

describe('details', () => {
describe('left column', () => {
it('should display the organization description', () => {
cy.get('@organizationDescription').should('be.visible')
})

it('click on read more should expand the organization description', () => {
let initialDescription
let newDescription

cy.get('@organizationDescription').then((firstDescription) => {
initialDescription = firstDescription
cy.get('@readMoreButton').trigger('click')
cy.get('@organizationDescription').then((secondDescription) => {
newDescription = secondDescription
expect(newDescription).to.not.equal(initialDescription)
})
})
})
})

describe('right column', () => {
it('should display the organization logo', () => {
cy.get('@organizationLogo').should('be.visible')
})

it('should display the organization dataset count', () => {
cy.get('@organizationDatasetCount').should('be.visible')
})

it('a click on the organization dataset count should open the dataset search page filtered on the organization', () => {
cy.get('@organizationDatasetCount').then(($link) => {
const url = $link.prop('href')
cy.wrap($link).click()

cy.url().should('eq', url)
})
})

it('should display the organization email', () => {
cy.get('@organizationEmail')
.should('be.visible')
.and('have.attr', 'href', 'mailto:[email protected]')
})
})

describe('last published datasets', () => {
it('should display the last published datasets', () => {
cy.get('@organizationPageLastPublishedDatasets').should('be.visible')
})

it('should display the search all button', () => {
cy.get(
'@organizationDetailsLastPublishedDatasetsSearchAllButton'
).should('be.visible')
})

it('a click on the search all button should open the dataset search page filtered on the organization', () => {
cy.get(
'@organizationDetailsLastPublishedDatasetsSearchAllButton'
).then(($link) => {
const url = $link.prop('href')
cy.wrap($link).click()

cy.url().should('eq', url)
})
})
})
})
})
})
9 changes: 5 additions & 4 deletions apps/datahub-e2e/src/e2e/organizations.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -77,14 +77,15 @@ describe('organizations', () => {
})

describe('list features', () => {
it('should search with a filter on the selected org on click', () => {
it('should open the organization page', () => {
cy.get('@organizationsName')
.eq(10)
.then(($clickedName) => {
cy.get('@organizations').eq(10).click()
cy.url()
.should('include', 'publisher=')
.and('include', encodeURIComponent($clickedName.text().trim()))
cy.url().should(
'contain',
`organization/${encodeURIComponent($clickedName.text().trim())}`
)
})
})
})
Expand Down
2 changes: 1 addition & 1 deletion apps/datahub/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { BrowserModule } from '@angular/platform-browser'
import { Router, RouterModule } from '@angular/router'
import {
FeatureCatalogModule,
ORGANIZATION_PAGE_URL_TOKEN,
ORGANIZATION_URL_TOKEN,
} from '@geonetwork-ui/feature/catalog'
import {
Expand Down Expand Up @@ -94,7 +95,6 @@ import { UiWidgetsModule } from '@geonetwork-ui/ui/widgets'
import { RecordUserFeedbacksComponent } from './record/record-user-feedbacks/record-user-feedbacks.component'
import { LetDirective } from '@ngrx/component'
import { OrganizationPageComponent } from './organization/organization-page/organization-page.component'
import { ORGANIZATION_PAGE_URL_TOKEN } from '../../../../libs/feature/catalog/src/lib/organization-url.token'

export const metaReducers: MetaReducer[] = !environment.production ? [] : []

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.list-page-dot {
width: 6px;
height: 6px;
border-radius: 6px;
position: relative;
}

.list-page-dot:after {
content: '';
position: absolute;
left: -7px;
top: -7px;
width: 20px;
height: 20px;
}
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<gn-ui-max-lines [maxLines]="2" *ngIf="organization.description">
<div>
<gn-ui-markdown-parser
data-cy="organizationDescription"
data-test="organizationDescription"
[textContent]="organization.description"
></gn-ui-markdown-parser>
Expand All @@ -26,6 +27,7 @@
class="w-[300px] flex flex-col gap-5"
>
<div
data-cy="organizationLogo"
class="bg-white border border-[#d8d8d8] w-full h-[185px] rounded-lg p-[30px] -mt-28"
>
<gn-ui-thumbnail
Expand All @@ -36,6 +38,7 @@
</gn-ui-thumbnail>
</div>
<a
data-cy="organizationDatasetCount"
[routerLink]="['/', ROUTER_ROUTE_SEARCH]"
[queryParams]="{ publisher: organization.name }"
>
Expand All @@ -50,6 +53,7 @@
</a>

<a
data-cy="organizationEmail"
data-test="organizationEmail"
[href]="'mailto:' + organization.email"
>
Expand Down Expand Up @@ -93,6 +97,7 @@
[routerLink]="['/', ROUTER_ROUTE_SEARCH]"
[queryParams]="{ publisher: organization.name }"
class="gn-ui-btn-primary h-[34px] rounded-lg"
data-cy="organizationDetailsLastPublishedDatasetsSearchAllButton"
data-test="organizationDetailsLastPublishedDatasetsSearchAllButton"
>
Search all
Expand All @@ -111,6 +116,7 @@
>
<div
class="mb-4 flex flex-wrap gap-9 justify-center sm:justify-start px-[25px]"
data-cy="organizationPageLastPublishedDatasets"
data-test="organizationPageLastPublishedDatasets"
>
<gn-ui-related-record-card
Expand All @@ -119,6 +125,20 @@
[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"
>
<button
*ngFor="let page of pages"
class="list-page-dot"
(click)="goToPage(page)"
[ngClass]="
currentPage === page ? 'bg-primary' : 'bg-gray-400'
"
></button>
</div>
</ng-container>
</ng-container>

Expand All @@ -132,9 +152,9 @@
</ng-container>

<ng-template #orgHasNoDataset>
<gn-ui-search-results-error
<gn-ui-error
[type]="ErrorType.ORGANIZATION_HAS_NO_DATASET"
></gn-ui-search-results-error>
></gn-ui-error>
</ng-template>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,6 @@ class OrganisationsServiceMock {
}

const anOrganizationWithManyDatasets: Organization = ORGANISATIONS_FIXTURE[0]
const anOrganizationWithOnlyOneDataset: Organization = {
...ORGANISATIONS_FIXTURE[0],
recordCount: 1,
}

const oneDataset = [DATASET_RECORDS[0]]
const manyDatasets = DATASET_RECORDS.concat(DATASET_RECORDS[0])
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,13 @@ import {
ChangeDetectorRef,
Component,
Input,
OnChanges,
OnDestroy,
OnInit,
SimpleChanges,
ViewChild,
} from '@angular/core'
import { AsyncPipe, NgForOf, NgIf } from '@angular/common'
import { AsyncPipe, NgClass, NgForOf, NgIf } from '@angular/common'
import {
CatalogRecord,
Organization,
Expand All @@ -32,7 +34,7 @@ import {
} from '@geonetwork-ui/ui/elements'
import { UiSearchModule } from '@geonetwork-ui/ui/search'
import { SearchFacade } from '@geonetwork-ui/feature/search'
import { Observable, of, Subscription, switchMap } from 'rxjs'
import { BehaviorSubject, Observable, of, Subscription, switchMap } from 'rxjs'
import { UiDatavizModule } from '@geonetwork-ui/ui/dataviz'
import { RouterLink } from '@angular/router'
import { ROUTER_ROUTE_SEARCH } from '@geonetwork-ui/feature/router'
Expand Down Expand Up @@ -63,15 +65,19 @@ import { UiWidgetsModule } from '@geonetwork-ui/ui/widgets'
UiDatavizModule,
RouterLink,
UiWidgetsModule,
NgClass,
],
})
export class OrganizationDetailsComponent
implements OnInit, AfterViewInit, OnDestroy
implements OnInit, AfterViewInit, OnDestroy, OnChanges
{
protected readonly Error = Error
protected readonly ErrorType = ErrorType
protected readonly ROUTER_ROUTE_SEARCH = ROUTER_ROUTE_SEARCH

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

lastPublishedDatasets$: Observable<CatalogRecord[]> = of([])

Expand All @@ -84,6 +90,11 @@ export class OrganizationDetailsComponent
isFirstPage = this.currentPage === 1
isLastPage = false

organizationHasChanged$ = new BehaviorSubject<void>(undefined)

@Input() organization: Organization
@Input() paginationContainerClass = 'w-full bottom-0 top-auto'

@ViewChild(BlockListComponent) list: BlockListComponent

constructor(
Expand All @@ -95,19 +106,29 @@ export class OrganizationDetailsComponent
ngOnInit(): void {
this.searchFacade.setPageSize(3)

this.lastPublishedDatasets$ = this.organizationsService
.getFiltersForOrgs([this.organization])
.pipe(
switchMap((filters) => {
return this.searchFacade
.setFilters(filters)
.setSortBy(['desc', 'changeDate']).results$
})
)
this.lastPublishedDatasets$ = this.organizationHasChanged$.pipe(
switchMap(() => {
return this.organizationsService
.getFiltersForOrgs([this.organization])
.pipe(
switchMap((filters) => {
return this.searchFacade
.setFilters(filters)
.setSortBy(['desc', 'changeDate']).results$
})
)
})
)

this.manageSubscriptions()
}

ngOnChanges(changes: SimpleChanges): void {
if (changes['organization']) {
this.organizationHasChanged$.next()
}
}

ngAfterViewInit() {
// this is required to show the pagination correctly
this.changeDetector.detectChanges()
Expand All @@ -129,6 +150,10 @@ export class OrganizationDetailsComponent
}
}

goToPage(page: number) {
this.searchFacade.paginate(page)
}

private manageSubscriptions() {
this.subscriptions$.add(
this.searchFacade.isLoading$.subscribe(
Expand Down Expand Up @@ -161,6 +186,4 @@ export class OrganizationDetailsComponent
)
)
}

protected readonly ROUTER_ROUTE_SEARCH = ROUTER_ROUTE_SEARCH
}
Loading

0 comments on commit eca730f

Please sign in to comment.