Merge pull request #404 from geonetwork/link-org-group

Rework organisation hydration

apps/datahub/src/app/home/news-page/key-figures/key-figures.component.spec.ts

@@ -15,7 +15,7 @@ class RecordsServiceMock {
 }
 
 class OrganisationsServiceMock {
-  countOrganisations = () => of(456)
+  organisationsCount$ = of(456)
 }
 
 describe('KeyFiguresComponent', () => {

apps/datahub/src/app/home/news-page/key-figures/key-figures.component.ts

@@ -18,7 +18,7 @@ import {
 })
 export class KeyFiguresComponent {
   recordsCount$ = this.catalogRecords.recordsCount$.pipe(startWith('-'))
-  orgsCount$ = this.catalogOrgs.countOrganisations().pipe(startWith('-'))
+  orgsCount$ = this.catalogOrgs.organisationsCount$.pipe(startWith('-'))
   ROUTE_SEARCH = `/${ROUTER_ROUTE_HOME}/${ROUTER_ROUTE_SEARCH}`
   ROUTE_ORGANISATIONS = `/${ROUTER_ROUTE_HOME}/${ROUTER_ROUTE_ORGANISATIONS}`
 

libs/feature/catalog/src/lib/group/group.service.spec.ts

@@ -0,0 +1,44 @@
+import { TestBed } from '@angular/core/testing'
+import { GroupsApiService } from '@geonetwork-ui/data-access/gn4'
+import { of } from 'rxjs'
+
+import { GroupService } from './group.service'
+
+const groupsApiMock = [
+  {
+    name: 'agence',
+    label: { eng: 'AGENCE-DE-TEST' },
+    description: 'une agence',
+    logo: 'logo-ag.png',
+  },
+  {
+    name: 'association',
+    label: { eng: 'Association National du testing' },
+    description: 'une association',
+    logo: 'logo-asso.png',
+  },
+]
+
+const groupsApiServiceMock = {
+  getGroups: jest.fn(() => of(groupsApiMock)),
+}
+
+describe('GroupsService', () => {
+  let service: GroupService
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        {
+          provide: GroupsApiService,
+          useValue: groupsApiServiceMock,
+        },
+      ],
+    })
+    service = TestBed.inject(GroupService)
+  })
+
+  it('should be created', () => {
+    expect(service).toBeTruthy()
+  })
+})

libs/feature/catalog/src/lib/group/group.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core'
+import { GroupApiModel, GroupsApiService } from '@geonetwork-ui/data-access/gn4'
+import { Observable } from 'rxjs'
+import { shareReplay } from 'rxjs/operators'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GroupService {
+  groups$: Observable<GroupApiModel[]> = this.groupsApiService
+    .getGroups()
+    .pipe(shareReplay())
+
+  constructor(private groupsApiService: GroupsApiService) {}
+}

libs/feature/catalog/src/lib/organisations/organisations.component.html

@@ -4,11 +4,16 @@
 <div
   class="grid grid-cols-1 mt-6 gap-x-6 gap-y-8 sm:grid-cols-2 lg:grid-cols-3"
 >
-  <gn-ui-organisation-preview
+  <gn-ui-content-ghost
+    ghostClass="h-36 mb-36"
     *ngFor="let organisation of organisations$ | async; trackBy: trackByIndex"
-    [organisation]="organisation"
-    (clickedOrganisation)="searchByOrganisation($event)"
-  ></gn-ui-organisation-preview>
+    [showContent]="organisation.description !== null"
+  >
+    <gn-ui-organisation-preview
+      [organisation]="organisation"
+      (clickedOrganisation)="searchByOrganisation($event)"
+    ></gn-ui-organisation-preview>
+  </gn-ui-content-ghost>
 </div>
 <div class="py-20">
   <gn-ui-pagination

libs/feature/catalog/src/lib/organisations/organisations.component.spec.ts

@@ -7,14 +7,15 @@ import {
   Output,
 } from '@angular/core'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { readFirst } from '@nrwl/angular/testing'
 import { By } from '@angular/platform-browser'
+import { SearchService } from '@geonetwork-ui/feature/search'
+import { ContentGhostComponent } from '@geonetwork-ui/ui/elements'
 import { Organisation } from '@geonetwork-ui/util/shared'
 import { ORGANISATIONS_FIXTURE } from '@geonetwork-ui/util/shared/fixtures'
+import { readFirst } from '@nrwl/angular/testing'
 import { of } from 'rxjs'
 import { OrganisationsComponent } from './organisations.component'
 import { OrganisationsService } from './organisations.service'
-import { SearchService } from '@geonetwork-ui/feature/search'
 
 @Component({
   selector: 'gn-ui-organisations-sort',
@@ -43,7 +44,7 @@ class PaginationMockComponent {
 }
 
 class OrganisationsServiceMock {
-  getOrganisationsWithGroups = jest.fn(() => of(ORGANISATIONS_FIXTURE))
+  hydratedOrganisations$ = of(ORGANISATIONS_FIXTURE)
 }
 
 class SearchServiceMock {
@@ -73,6 +74,7 @@ describe('OrganisationsComponent', () => {
         OrganisationsSortMockComponent,
         OrganisationPreviewMockComponent,
         PaginationMockComponent,
+        ContentGhostComponent,
       ],
       providers: [
         {
@@ -111,9 +113,6 @@ describe('OrganisationsComponent', () => {
     beforeEach(() => {
       paginationComponentDE = de.query(By.directive(PaginationMockComponent))
     })
-    it('should call getOrganisationsWithGroups', () => {
-      expect(organisationsService.getOrganisationsWithGroups).toHaveBeenCalled()
-    })
     describe('pass organisations to ui preview components', () => {
       beforeEach(() => {
         orgPreviewComponents = de

libs/feature/catalog/src/lib/organisations/organisations.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { SearchService } from '@geonetwork-ui/feature/search'
 import { Organisation } from '@geonetwork-ui/util/shared'
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs'
-import { map, tap } from 'rxjs/operators'
+import { map, startWith, tap } from 'rxjs/operators'
 import { OrganisationsService } from './organisations.service'
 
 @Component({
@@ -23,7 +23,9 @@ export class OrganisationsComponent {
   sortBy$ = new BehaviorSubject('name-asc')
 
   organisationsSorted$: Observable<Organisation[]> = combineLatest([
-    this.organisationsService.getOrganisationsWithGroups(),
+    this.organisationsService.hydratedOrganisations$.pipe(
+      startWith(Array(this.itemsOnPage).fill({}))
+    ),
     this.sortBy$,
   ]).pipe(
     map(([organisations, sortBy]) =>