diff --git a/apps/datahub-e2e/src/e2e/organization-page.cy.ts b/apps/datahub-e2e/src/e2e/organization-page.cy.ts new file mode 100644 index 0000000000..af3b7783a1 --- /dev/null +++ b/apps/datahub-e2e/src/e2e/organization-page.cy.ts @@ -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:contact@barbie-inc.com') + }) + }) + + 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) + }) + }) + }) + }) + }) +}) diff --git a/apps/datahub-e2e/src/e2e/organizations.cy.ts b/apps/datahub-e2e/src/e2e/organizations.cy.ts index b39da4ca39..ded2dc026d 100644 --- a/apps/datahub-e2e/src/e2e/organizations.cy.ts +++ b/apps/datahub-e2e/src/e2e/organizations.cy.ts @@ -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())}` + ) }) }) }) diff --git a/apps/datahub/src/app/app.module.ts b/apps/datahub/src/app/app.module.ts index 534338f09d..0c69562559 100644 --- a/apps/datahub/src/app/app.module.ts +++ b/apps/datahub/src/app/app.module.ts @@ -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 { @@ -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 ? [] : [] diff --git a/apps/datahub/src/app/organization/organization-details/organization-details.component.css b/apps/datahub/src/app/organization/organization-details/organization-details.component.css index e69de29bb2..c0d50f2d1c 100644 --- a/apps/datahub/src/app/organization/organization-details/organization-details.component.css +++ b/apps/datahub/src/app/organization/organization-details/organization-details.component.css @@ -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; +} diff --git a/apps/datahub/src/app/organization/organization-details/organization-details.component.html b/apps/datahub/src/app/organization/organization-details/organization-details.component.html index 9ef5da0aef..d149ccd760 100644 --- a/apps/datahub/src/app/organization/organization-details/organization-details.component.html +++ b/apps/datahub/src/app/organization/organization-details/organization-details.component.html @@ -10,6 +10,7 @@
@@ -26,6 +27,7 @@ class="w-[300px] flex flex-col gap-5" >
@@ -50,6 +53,7 @@ @@ -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 @@ -111,6 +116,7 @@ >
+
+ +
@@ -132,9 +152,9 @@ - + >
diff --git a/apps/datahub/src/app/organization/organization-details/organization-details.component.spec.ts b/apps/datahub/src/app/organization/organization-details/organization-details.component.spec.ts index 6e4d6078ac..1fff01d88f 100644 --- a/apps/datahub/src/app/organization/organization-details/organization-details.component.spec.ts +++ b/apps/datahub/src/app/organization/organization-details/organization-details.component.spec.ts @@ -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]) diff --git a/apps/datahub/src/app/organization/organization-details/organization-details.component.ts b/apps/datahub/src/app/organization/organization-details/organization-details.component.ts index 23ab3fd7a2..ac116a314b 100644 --- a/apps/datahub/src/app/organization/organization-details/organization-details.component.ts +++ b/apps/datahub/src/app/organization/organization-details/organization-details.component.ts @@ -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, @@ -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' @@ -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 = of([]) @@ -84,6 +90,11 @@ export class OrganizationDetailsComponent isFirstPage = this.currentPage === 1 isLastPage = false + organizationHasChanged$ = new BehaviorSubject(undefined) + + @Input() organization: Organization + @Input() paginationContainerClass = 'w-full bottom-0 top-auto' + @ViewChild(BlockListComponent) list: BlockListComponent constructor( @@ -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() @@ -129,6 +150,10 @@ export class OrganizationDetailsComponent } } + goToPage(page: number) { + this.searchFacade.paginate(page) + } + private manageSubscriptions() { this.subscriptions$.add( this.searchFacade.isLoading$.subscribe( @@ -161,6 +186,4 @@ export class OrganizationDetailsComponent ) ) } - - protected readonly ROUTER_ROUTE_SEARCH = ROUTER_ROUTE_SEARCH } diff --git a/apps/datahub/src/app/organization/header-organization/organization-header.component.css b/apps/datahub/src/app/organization/organization-header/organization-header.component.css similarity index 100% rename from apps/datahub/src/app/organization/header-organization/organization-header.component.css rename to apps/datahub/src/app/organization/organization-header/organization-header.component.css diff --git a/apps/datahub/src/app/organization/header-organization/organization-header.component.html b/apps/datahub/src/app/organization/organization-header/organization-header.component.html similarity index 95% rename from apps/datahub/src/app/organization/header-organization/organization-header.component.html rename to apps/datahub/src/app/organization/organization-header/organization-header.component.html index 9c16ff9bc0..cd68f67fbd 100644 --- a/apps/datahub/src/app/organization/header-organization/organization-header.component.html +++ b/apps/datahub/src/app/organization/organization-header/organization-header.component.html @@ -22,6 +22,7 @@
@@ -41,6 +42,7 @@

•

 { - const orgName = user.organization + const orgName = user.organisation const org = orgs.find((org) => org.name === orgName) const logoUrl = org?.logoUrl?.toString() const recordCount = org?.recordCount const userList = allUsers.filter( - (user) => user.organization === orgName + (user) => user.organisation === orgName ) const userCount = userList.length return { diff --git a/libs/feature/catalog/src/lib/organisations/organisations.component.spec.ts b/libs/feature/catalog/src/lib/organisations/organisations.component.spec.ts index 70e97b09b7..138e62fdeb 100644 --- a/libs/feature/catalog/src/lib/organisations/organisations.component.spec.ts +++ b/libs/feature/catalog/src/lib/organisations/organisations.component.spec.ts @@ -4,6 +4,7 @@ import { DebugElement, EventEmitter, Input, + NO_ERRORS_SCHEMA, Output, } from '@angular/core' import { ComponentFixture, TestBed } from '@angular/core/testing' @@ -27,8 +28,8 @@ class OrganisationsFilterMockComponent { template: '
', }) class OrganisationPreviewMockComponent { - @Input() organisation: Organization - @Output() clickedOrganisation = new EventEmitter() + @Input() organization: Organization + @Output() clickedOrganization = new EventEmitter() } @Component({ @@ -85,6 +86,7 @@ describe('OrganisationsComponent', () => { useClass: OrganisationsServiceMock, }, ], + schemas: [NO_ERRORS_SCHEMA], }) .overrideComponent(OrganisationsComponent, { set: { changeDetection: ChangeDetectionStrategy.Default }, @@ -118,10 +120,10 @@ describe('OrganisationsComponent', () => { .map((debugElement) => debugElement.componentInstance) }) it('should pass first organisation (sorted by name-asc) to first ui preview component', () => { - expect(orgPreviewComponents[0].organisation.name).toEqual('A Data Org') + expect(orgPreviewComponents[0].organization.name).toEqual('A Data Org') }) it('should pass 6th organisation (sorted by name-asc) on page to 6th ui preview component', () => { - expect(orgPreviewComponents[5].organisation.name).toEqual('E Data Org') + expect(orgPreviewComponents[5].organization.name).toEqual('E Data Org') }) }) describe('pass params to ui pagination component', () => { @@ -152,13 +154,13 @@ describe('OrganisationsComponent', () => { expect(paginationComponentDE.componentInstance.currentPage).toEqual(2) }) it('should pass first organisation of second page (sorted by name-asc) to first ui preview component', () => { - expect(orgPreviewComponents[0].organisation.name).toEqual( + expect(orgPreviewComponents[0].organization.name).toEqual( 'é Data Org' ) }) it('should pass last organisation of second page (sorted by name-asc) to last ui preview component', () => { expect( - orgPreviewComponents[orgPreviewComponents.length - 1].organisation + orgPreviewComponents[orgPreviewComponents.length - 1].organization .name ).toEqual('J Data Org') }) @@ -193,12 +195,12 @@ describe('OrganisationsComponent', () => { expect(organisations[0]).toEqual(ORGANISATIONS_FIXTURE[5]) }) it('should pass organisation with max recordCount to first preview component', () => { - expect(orgPreviewComponents[0].organisation).toEqual( + expect(orgPreviewComponents[0].organization).toEqual( ORGANISATIONS_FIXTURE[5] ) }) it('should pass organisation with 6th highest recordCount to 6th preview component', () => { - expect(orgPreviewComponents[5].organisation).toEqual( + expect(orgPreviewComponents[5].organization).toEqual( ORGANISATIONS_FIXTURE[3] ) }) diff --git a/libs/ui/elements/src/lib/error/error.component.html b/libs/ui/elements/src/lib/error/error.component.html index 0b0c302281..15c324ed59 100644 --- a/libs/ui/elements/src/lib/error/error.component.html +++ b/libs/ui/elements/src/lib/error/error.component.html @@ -42,19 +42,20 @@
search.error.organizationHasNoDataset
-
-
- computer - question_mark +
+
+ computer + question_mark +
+
+ search.error.recordNotFound +
+
{{ error }}
-
- search.error.recordNotFound -
-
{{ error }}
diff --git a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html index 932c405b23..85fb920c14 100644 --- a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html +++ b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html @@ -1,5 +1,5 @@ diff --git a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.ts b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.ts index f883b3c31b..c166ea575d 100644 --- a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.ts +++ b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.ts @@ -1,4 +1,4 @@ -import { Component, ChangeDetectionStrategy, Input } from '@angular/core' +import { ChangeDetectionStrategy, Component, Input } from '@angular/core' import { CatalogRecord } from '@geonetwork-ui/common/domain/model/record' @Component({ @@ -8,5 +8,26 @@ import { CatalogRecord } from '@geonetwork-ui/common/domain/model/record' changeDetection: ChangeDetectionStrategy.OnPush, }) export class RelatedRecordCardComponent { + private readonly baseClasses: string + @Input() record: CatalogRecord + @Input() extraClass = '' + + constructor() { + this.baseClasses = [ + 'w-72', + 'h-96', + 'overflow-hidden', + 'rounded-lg', + 'bg-white', + 'cursor-pointer', + 'block', + 'hover:-translate-y-2 ', + 'duration-[180ms]', + ].join(' ') + } + + get classList() { + return `${this.baseClasses} ${this.extraClass}` + } } diff --git a/libs/ui/layout/src/lib/max-lines/max-lines.component.spec.ts b/libs/ui/layout/src/lib/max-lines/max-lines.component.spec.ts index dc28d6869c..075b5aae7c 100644 --- a/libs/ui/layout/src/lib/max-lines/max-lines.component.spec.ts +++ b/libs/ui/layout/src/lib/max-lines/max-lines.component.spec.ts @@ -4,6 +4,13 @@ import { MaxLinesComponent } from './max-lines.component' import { Component, importProvidersFrom } from '@angular/core' import { TranslateModule } from '@ngx-translate/core' +// Mock implementation of ResizeObserver +class ResizeObserverMock { + observe = jest.fn() + unobserve = jest.fn() + disconnect = jest.fn() +} + @Component({ template: ` @@ -22,10 +29,12 @@ describe('MaxLinesComponent', () => { let maxLinesComponent: MaxLinesComponent beforeEach(() => { + ;(window as any).ResizeObserver = ResizeObserverMock + TestBed.configureTestingModule({ - imports: [TranslateModule.forRoot()], + imports: [TranslateModule.forRoot(), MaxLinesComponent], providers: [importProvidersFrom(TranslateModule.forRoot())], - declarations: [MaxLinesComponent, TestHostComponent], + declarations: [TestHostComponent], }) fixture = TestBed.createComponent(TestHostComponent) hostComponent = fixture.componentInstance diff --git a/libs/ui/layout/src/lib/max-lines/max-lines.component.stories.ts b/libs/ui/layout/src/lib/max-lines/max-lines.component.stories.ts index c93ce310e2..1a811f97ab 100644 --- a/libs/ui/layout/src/lib/max-lines/max-lines.component.stories.ts +++ b/libs/ui/layout/src/lib/max-lines/max-lines.component.stories.ts @@ -10,7 +10,7 @@ import { TranslateModule } from '@ngx-translate/core' import { TRANSLATE_DEFAULT_CONFIG, UtilI18nModule, -} from '../../../../../util/i18n/src' +} from '@geonetwork-ui/util/i18n' import { importProvidersFrom } from '@angular/core' export default { diff --git a/support-services/docker-entrypoint-initdb.d/dump b/support-services/docker-entrypoint-initdb.d/dump index 0a433c68ec..f1f88acdff 100644 Binary files a/support-services/docker-entrypoint-initdb.d/dump and b/support-services/docker-entrypoint-initdb.d/dump differ