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 18, 2024
1 parent 96cc908 commit a1ac3ff
Show file tree
Hide file tree
Showing 33 changed files with 346 additions and 155 deletions.
118 changes: 118 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,118 @@
import 'cypress-real-events'

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

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

describe('general display', () => {
describe('header', () => {
describe('back button', () => {
beforeEach(() => {
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('@orgPageLasPubDat').should('be.visible')
})

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

it('a click on the search all button should open the dataset search page filtered on the organization', () => {
cy.get('@orgDetailsSearchAllBtn').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 @@ -2,9 +2,6 @@
<div id="organization-details-container" class="flex flex-col gap-[72px]">
<div class="h-full container-lg mx-auto px-[25px] w-full">
<div class="flex flex-row justify-between gap-[70px]">
<!------------------->
<!-- LEFT COLUMN -->
<!------------------->
<div id="organization-details-left" class="w-2/3 mt-14">
<div class="flex flex-col gap-11">
<gn-ui-max-lines [maxLines]="2" *ngIf="organization.description">
Expand All @@ -17,15 +14,12 @@
</gn-ui-max-lines>
</div>
</div>

<!-------------------->
<!-- RIGHT COLUMN -->
<!-------------------->
<div
id="organization-details-right"
class="w-[300px] flex flex-col gap-5"
>
<div
data-test="organizationLogo"
class="bg-white border border-[#d8d8d8] w-full h-[185px] rounded-lg p-[30px] -mt-28"
>
<gn-ui-thumbnail
Expand All @@ -36,6 +30,7 @@
</gn-ui-thumbnail>
</div>
<a
data-test="organizationDatasetCount"
[routerLink]="['/', ROUTER_ROUTE_SEARCH]"
[queryParams]="{ publisher: organization.name }"
>
Expand All @@ -52,13 +47,10 @@
<a
data-test="organizationEmail"
[href]="'mailto:' + organization.email"
target="_top"
class="uppercase w-full h-[44px] gn-ui-btn-primary rounded-lg"
>
<gn-ui-button
type="primary"
[extraClass]="'h-[34px] uppercase w-full h-[44px] rounded-lg'"
>
<span translate> organization.details.mailContact </span>
</gn-ui-button>
<span translate> organization.details.mailContact </span>
</a>
</div>
</div>
Expand All @@ -81,7 +73,7 @@
"
>
<gn-ui-previous-next-buttons
data-test="organizationDetailsLastPublishedDatasetsPreviousNextButtons"
data-test="orgDetailsNavBtn"
*ngIf="hasPagination"
[isFirst]="isFirstPage"
[isLast]="isLastPage"
Expand All @@ -93,9 +85,10 @@
[routerLink]="['/', ROUTER_ROUTE_SEARCH]"
[queryParams]="{ publisher: organization.name }"
class="gn-ui-btn-primary h-[34px] rounded-lg"
data-test="organizationDetailsLastPublishedDatasetsSearchAllButton"
data-test="orgDetailsSearchAllBtn"
translate
>
Search all
organization.lastPublishedDatasets.searchAllButton
</a>
</div>
</ng-container>
Expand All @@ -111,30 +104,44 @@
>
<div
class="mb-4 flex flex-wrap gap-9 justify-center sm:justify-start px-[25px]"
data-test="organizationPageLastPublishedDatasets"
data-test="orgPageLasPubDat"
>
<gn-ui-related-record-card
*ngFor="let dataset of lastPublishedDatasets"
[record]="dataset"
[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>

<ng-container *ngIf="isOrganizationsLoading">
<div
data-test="organizationPageIsOrganizationLoading"
data-test="orgPageIsOrgLoading"
class="flex justify-center w-full h-[200px] items-center"
>
<gn-ui-spinning-loader></gn-ui-spinning-loader>
</div>
</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
Loading

0 comments on commit a1ac3ff

Please sign in to comment.