geonetwork-ui 2.4.0-dev.8f04e899 → 2.4.0-dev.9121e5f4

package/src/libs/feature/search/src/index.ts

@@ -21,4 +21,4 @@ export * from './lib/results-hits-number/results-hits.container.component'
 export * from './lib/results-layout/results-layout.component'
 export * from './lib/sort-by/sort-by.component'
 export * from './lib/state/container/search-state.container.directive'
-export * from './lib/results-table/results-table.component'
+export * from './lib/results-table/results-table-container.component'

package/src/libs/feature/search/src/lib/results-table/results-table-container.component.html

@@ -0,0 +1,9 @@
+<gn-ui-results-table
+  [records]="records$ | async"
+  [recordHasDraft]="hasDraft"
+  [selectedRecordsIdentifiers]="selectedRecords$ | async"
+  [sortOrder]="sortBy$ | async"
+  (recordClick)="handleRecordClick($event)"
+  (recordsSelectedChange)="handleRecordsSelectedChange($event[0], $event[1])"
+  (sortByChange)="handleSortByChange($event[0], $event[1])"
+></gn-ui-results-table>

package/src/libs/feature/search/src/lib/results-table/results-table-container.component.ts

@@ -0,0 +1,49 @@
+import { Component, EventEmitter, Output } from '@angular/core'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { SearchFacade } from '../state/search.facade'
+import { SelectionService } from '../../../../../../libs/api/repository/src'
+import { SearchService } from '../utils/service/search.service'
+import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
+import { ResultsTableComponent } from '../../../../../../libs/ui/search/src'
+import { CommonModule } from '@angular/common'
+
+@Component({
+  selector: 'gn-ui-results-table-container',
+  templateUrl: './results-table-container.component.html',
+  styleUrls: ['./results-table-container.component.css'],
+  standalone: true,
+  imports: [CommonModule, ResultsTableComponent],
+})
+export class ResultsTableContainerComponent {
+  @Output() recordClick = new EventEmitter<CatalogRecord>()
+
+  records$ = this.searchFacade.results$
+  selectedRecords$ = this.selectionService.selectedRecordsIdentifiers$
+  sortBy$ = this.searchFacade.sortBy$
+
+  hasDraft = (record: CatalogRecord): boolean =>
+    this.recordsRepository.recordHasDraft(record.uniqueIdentifier)
+
+  constructor(
+    private searchFacade: SearchFacade,
+    private searchService: SearchService,
+    private selectionService: SelectionService,
+    private recordsRepository: RecordsRepositoryInterface
+  ) {}
+
+  handleRecordClick(item: unknown) {
+    this.recordClick.emit(item as CatalogRecord)
+  }
+
+  handleSortByChange(col: string, order: 'asc' | 'desc') {
+    this.searchService.setSortBy([order, col])
+  }
+
+  handleRecordsSelectedChange(records: CatalogRecord[], selected: boolean) {
+    if (!selected) {
+      this.selectionService.deselectRecords(records)
+    } else {
+      this.selectionService.selectRecords(records)
+    }
+  }
+}

package/src/libs/feature/search/src/lib/state/search.facade.ts

@@ -37,6 +37,7 @@ import {
   getSearchResultsLoading,
   getSearchSortBy,
   getSpatialFilterEnabled,
+  isBeginningOfResults,
   isEndOfResults,
   totalPages,
 } from './selectors'
@@ -58,6 +59,7 @@ export class SearchFacade {
   layout$: Observable<string>
   sortBy$: Observable<SortByField>
   isLoading$: Observable<boolean>
+  isBeginningOfResults$: Observable<boolean>
   isEndOfResults$: Observable<boolean>
   totalPages$: Observable<number>
   currentPage$: Observable<number>
@@ -98,6 +100,9 @@ export class SearchFacade {
     this.isLoading$ = this.store.pipe(select(getSearchResultsLoading, searchId))
     this.searchFilters$ = this.store.pipe(select(getSearchFilters, searchId))
     this.resultsHits$ = this.store.pipe(select(getSearchResultsHits, searchId))
+    this.isBeginningOfResults$ = this.store.pipe(
+      select(isBeginningOfResults, searchId)
+    )
     this.isEndOfResults$ = this.store.pipe(select(isEndOfResults, searchId))
     this.totalPages$ = this.store.pipe(select(totalPages, searchId))
     this.currentPage$ = this.store.pipe(select(currentPage, searchId))

package/src/libs/feature/search/src/lib/state/selectors.ts

@@ -50,6 +50,13 @@ export const getSearchResultsHits = createSelector(
   (state: SearchStateSearch) => state.results.count
 )
 
+export const isBeginningOfResults = createSelector(
+  getSearchStateSearch,
+  (state: SearchStateSearch) => {
+    return state.params.currentPage === 0
+  }
+)
+
 export const isEndOfResults = createSelector(
   getSearchStateSearch,
   (state: SearchStateSearch) => {

package/src/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html

@@ -1,14 +1,14 @@
 <a href (click)="clickOrganisation($event)" [attr.href]="organisationUrl">
   <div
     class="group cursor-pointer rounded-lg h-full flex flex-col"
-    [title]="organisation.name"
+    [title]="organization.name"
   >
     <div
       class="shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36"
     >
       <gn-ui-thumbnail
         class="relative h-full w-full"
-        [thumbnailUrl]="organisation.logoUrl"
+        [thumbnailUrl]="organization.logoUrl"
         [fit]="'contain'"
       >
       </gn-ui-thumbnail>
@@ -18,22 +18,24 @@
         class="shrink-0 mb-3 mt-5 font-title text-21 text-title group-hover:text-primary line-clamp-2 sm:mt-2 transition-colors"
         data-cy="organizationName"
       >
-        {{ organisation.name }}</span
+        {{ organization.name }}</span
       >
       <p
         class="abstract mt-4 mb-5 sm:mb-2 sm:mt-0 grow shrink-1 overflow-hidden"
         data-cy="organizationDesc"
       >
-        {{ organisation.description }}
+        {{ organization.description }}
       </p>
       <div class="shrink-0 text-primary opacity-50 flex leading-6">
         <mat-icon class="material-symbols-outlined text-primary opacity-50 mr-1"
           >folder_open
         </mat-icon>
         <span class="mx-1" data-cy="organizationRecordsCount">{{
-          organisation.recordCount
+          organization.recordCount
         }}</span>
-        <span translate>record.metadata.publications</span>
+        <span translate [translateParams]="{ count: organization.recordCount }"
+          >record.metadata.publications</span
+        >
       </div>
     </div>
   </div>

package/src/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.ts

@@ -14,12 +14,12 @@ import { Organization } from '../../../../../../libs/common/domain/src/lib/model
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class OrganisationPreviewComponent {
-  @Input() organisation: Organization
+  @Input() organization: Organization
   @Input() organisationUrl: string
   @Output() clickedOrganisation = new EventEmitter<Organization>()
 
   clickOrganisation(event: Event) {
     event.preventDefault()
-    this.clickedOrganisation.emit(this.organisation)
+    this.clickedOrganisation.emit(this.organization)
   }
 }

package/src/libs/ui/catalog/src/lib/ui-catalog.module.ts

@@ -9,6 +9,7 @@ import { OrganisationsFilterComponent } from './organisations-filter/organisatio
 import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { LanguageSwitcherComponent } from './language-switcher/language-switcher.component'
 import { OrganisationsResultComponent } from './organisations-result/organisations-result.component'
+import { RouterLink } from '@angular/router'
 
 @NgModule({
   declarations: [
@@ -24,6 +25,7 @@ import { OrganisationsResultComponent } from './organisations-result/organisatio
     UiElementsModule,
     UiInputsModule,
     MatIconModule,
+    RouterLink,
   ],
   exports: [
     CatalogTitleComponent,

package/src/libs/ui/dataviz/src/lib/figure/figure.component.html

@@ -1,7 +1,13 @@
 <div
-  translate
   class="flex flex-row justify-start items-center overflow-hidden"
-  [title]="hoverTitle"
+  data-test="figureTitle"
+  [title]="
+    figure.toString() +
+    ' ' +
+    unit +
+    ' ' +
+    (title | translate: { count: figure })
+  "
 >
   <mat-icon
     class="material-symbols-outlined {{ bgClass }} {{
@@ -13,7 +19,9 @@
   </mat-icon>
   <div class="shrink overflow-hidden">
     <div class="figure-block text-[1.5em] text-black">
-      <span class="figure font-medium mr-[0.3em]">{{ figure }}</span>
+      <span class="figure font-medium mr-[0.3em]" data-test="figure">{{
+        figure
+      }}</span>
       <span class="unit text-[0.665em]">{{ unit }}</span>
     </div>
     <div translate class="title truncate" [translateParams]="{ count: figure }">

package/src/libs/ui/dataviz/src/lib/figure/figure.component.ts

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 
 @Component({
   selector: 'gn-ui-figure',
@@ -10,17 +10,13 @@ export class FigureComponent {
   @Input() icon!: string
   @Input() title!: string
   @Input() figure!: string | number
-  @Input() unit?: string
+  @Input() unit = ''
   @Input() color: 'primary' | 'secondary' = 'primary'
 
-  get hoverTitle() {
-    return `${this.figure.toString()} ${this.unit || ''}
-${this.title}`
-  }
-
   get textClass() {
     return this.color === 'primary' ? 'text-primary' : 'text-secondary'
   }
+
   get bgClass() {
     return this.color === 'primary' ? 'bg-primary-white' : 'bg-secondary-white'
   }

package/src/libs/ui/elements/src/index.ts

@@ -8,7 +8,6 @@ export * from './lib/image-overlay-preview/image-overlay-preview.component'
 export * from './lib/link-card/link-card.component'
 export * from './lib/markdown-editor/markdown-editor.component'
 export * from './lib/markdown-parser/markdown-parser.component'
-export * from './lib/max-lines/max-lines.component'
 export * from './lib/metadata-catalog/metadata-catalog.component'
 export * from './lib/metadata-contact/metadata-contact.component'
 export * from './lib/metadata-info/metadata-info.component'

package/src/libs/ui/elements/src/lib/error/error.component.html

@@ -8,11 +8,11 @@
     <div class="relative opacity-40">
       <mat-icon class="material-symbols-outlined face">face</mat-icon>
       <mat-icon class="material-symbols-outlined question-mark1"
-        >question_mark</mat-icon
-      >
+        >question_mark
+      </mat-icon>
       <mat-icon class="material-symbols-outlined question-mark2"
-        >question_mark</mat-icon
-      >
+        >question_mark
+      </mat-icon>
     </div>
     <div translate>search.error.couldNotReachApi</div>
   </div>
@@ -32,6 +32,15 @@
     <div translate>search.error.receivedError</div>
     <div *ngIf="error">{{ error }}</div>
   </div>
+  <div *ngIf="type === types.ORGANIZATION_HAS_NO_DATASET">
+    <div class="relative opacity-40">
+      <mat-icon class="material-symbols-outlined computer">computer</mat-icon>
+      <mat-icon class="material-symbols-outlined computer-question-mark"
+        >question_mark
+      </mat-icon>
+    </div>
+    <div translate>search.error.organizationHasNoDataset</div>
+  </div>
   <div
     *ngIf="type === types.RECORD_NOT_FOUND"
     data-test="record-not-found-error"
@@ -39,12 +48,27 @@
     <div class="relative opacity-40">
       <mat-icon class="material-symbols-outlined computer">computer</mat-icon>
       <mat-icon class="material-symbols-outlined computer-question-mark"
-        >question_mark</mat-icon
-      >
+        >question_mark
+      </mat-icon>
     </div>
     <div translate [translateParams]="{ id: recordId }">
       search.error.recordNotFound
     </div>
     <div *ngIf="error">{{ error }}</div>
   </div>
+  <div
+    *ngIf="type === types.ORGANIZATION_NOT_FOUND"
+    data-test="org-not-found-error"
+  >
+    <div class="relative opacity-40">
+      <mat-icon class="material-symbols-outlined computer">computer</mat-icon>
+      <mat-icon class="material-symbols-outlined computer-question-mark"
+        >question_mark
+      </mat-icon>
+    </div>
+    <div translate [translateParams]="{ id: recordId }">
+      search.error.organizationNotFound
+    </div>
+    <div *ngIf="error">{{ error }}</div>
+  </div>
 </div>

package/src/libs/ui/elements/src/lib/error/error.component.ts

@@ -5,6 +5,8 @@ export enum ErrorType {
   RECEIVED_ERROR,
   RECORD_NOT_FOUND,
   DATASET_HAS_NO_LINK,
+  ORGANIZATION_HAS_NO_DATASET,
+  ORGANIZATION_NOT_FOUND,
 }
 
 @Component({

package/src/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html

@@ -1,5 +1,5 @@
 <a
-  class="w-72 h-96 overflow-hidden rounded-lg bg-white cursor-pointer block hover:-translate-y-2 duration-[180ms]"
+  [class]="classList"
   [routerLink]="['/dataset', record.uniqueIdentifier]"
   target="_blank"
 >

package/src/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 '../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
@@ -8,5 +8,26 @@ import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/mode
   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}`
+  }
 }

package/src/libs/ui/elements/src/lib/ui-elements.module.ts

@@ -10,7 +10,7 @@ import { DownloadItemComponent } from './download-item/download-item.component'
 import { DownloadsListComponent } from './downloads-list/downloads-list.component'
 import { ApiCardComponent } from './api-card/api-card.component'
 import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
-import { UiLayoutModule } from '../../../../../libs/ui/layout/src'
+import { MaxLinesComponent, UiLayoutModule } from '../../../../../libs/ui/layout/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { RelatedRecordCardComponent } from './related-record-card/related-record-card.component'
 import { MetadataContactComponent } from './metadata-contact/metadata-contact.component'
@@ -26,7 +26,6 @@ import { AvatarComponent } from './avatar/avatar.component'
 import { UserPreviewComponent } from './user-preview/user-preview.component'
 import { GnUiLinkifyDirective } from './metadata-info/linkify.directive'
 import { PaginationButtonsComponent } from './pagination-buttons/pagination-buttons.component'
-import { MaxLinesComponent } from './max-lines/max-lines.component'
 import { RecordApiFormComponent } from './record-api-form/record-api-form.component'
 import { MarkdownParserComponent } from './markdown-parser/markdown-parser.component'
 import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-overlay-preview.component'
@@ -50,6 +49,7 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     ThumbnailComponent,
     TimeSincePipe,
     BadgeComponent,
+    MaxLinesComponent,
   ],
   declarations: [
     MetadataInfoComponent,
@@ -68,7 +68,6 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     UserPreviewComponent,
     GnUiLinkifyDirective,
     PaginationButtonsComponent,
-    MaxLinesComponent,
     RecordApiFormComponent,
     UserFeedbackItemComponent,
     ImageOverlayPreviewComponent,
@@ -90,7 +89,6 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     AvatarComponent,
     UserPreviewComponent,
     PaginationButtonsComponent,
-    MaxLinesComponent,
     RecordApiFormComponent,
     MarkdownParserComponent,
     UserFeedbackItemComponent,

package/src/libs/ui/layout/src/index.ts

@@ -3,6 +3,7 @@ export * from './lib/carousel/carousel.component'
 export * from './lib/expandable-panel-button/expandable-panel-button.component'
 export * from './lib/expandable-panel/expandable-panel.component'
 export * from './lib/form-field-wrapper/form-field-wrapper.component'
+export * from './lib/max-lines/max-lines.component'
 export * from './lib/interactive-table/interactive-table-column/interactive-table-column.component'
 export * from './lib/interactive-table/interactive-table.component'
 export * from './lib/sticky-header/sticky-header.component'

package/src/libs/ui/{elements → layout}/src/lib/max-lines/max-lines.component.html

@@ -14,6 +14,7 @@
   *ngIf="showToggleButton"
   (click)="toggleDisplay()"
   class="text-secondary cursor-pointer pt-2.5"
+  data-cy="readMoreButton"
 >
   {{ (isExpanded ? 'ui.readLess' : 'ui.readMore') | translate }}
 </div>

package/src/libs/ui/{elements → layout}/src/lib/max-lines/max-lines.component.ts

@@ -1,19 +1,23 @@
 import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
-  Input,
   ElementRef,
-  ChangeDetectionStrategy,
-  AfterViewInit,
-  ViewChild,
+  Input,
   OnDestroy,
-  ChangeDetectorRef,
+  ViewChild,
 } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-max-lines',
   templateUrl: './max-lines.component.html',
   styleUrls: ['./max-lines.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, TranslateModule],
 })
 export class MaxLinesComponent implements AfterViewInit, OnDestroy {
   @Input() maxLines = 6

package/src/libs/ui/layout/src/lib/ui-layout.module.ts

@@ -6,7 +6,6 @@ import { StickyHeaderComponent } from './sticky-header/sticky-header.component'
 import { AnchorLinkDirective } from './anchor-link/anchor-link.directive'
 import { ExpandablePanelButtonComponent } from './expandable-panel-button/expandable-panel-button.component'
 import { MatIconModule } from '@angular/material/icon'
-import { CarouselComponent } from './carousel/carousel.component'
 
 @NgModule({
   imports: [CommonModule, MatIconModule, TranslateModule.forChild()],

package/src/libs/ui/search/src/index.ts

@@ -17,3 +17,4 @@ export * from './lib/record-preview-title/record-preview-title.component'
 export * from './lib/record-metric/record-metric.component'
 export * from './lib/results-list-item/results-list-item.component'
 export * from './lib/results-hits-number/results-hits-number.component'
+export * from './lib/results-table/results-table.component'

package/src/libs/{feature → ui}/search/src/lib/results-table/results-table.component.html

@@ -1,13 +1,13 @@
 <gn-ui-interactive-table
-  [items]="records$ | async"
+  [items]="records"
   (itemClick)="handleRecordClick($event)"
 >
   <!-- SELECTED COLUMN -->
   <gn-ui-interactive-table-column>
     <ng-template #header>
       <gn-ui-checkbox
-        [checked]="isAllSelected() | async"
-        [indeterminate]="isSomeSelected() | async"
+        [checked]="isAllSelected()"
+        [indeterminate]="isSomeSelected()"
         (changed)="toggleSelectAll()"
         type="default"
         class="-m-2 mr-3"
@@ -16,7 +16,7 @@
     </ng-template>
     <ng-template #cell let-item>
       <gn-ui-checkbox
-        [checked]="isChecked(item) | async"
+        [checked]="isChecked(item)"
         (changed)="handleRecordSelectedChange($event, item)"
         class="-m-2"
         type="default"
@@ -27,7 +27,7 @@
   <!-- TITLE COLUMN -->
   <gn-ui-interactive-table-column
     [sortable]="true"
-    [activeSort]="isSortedBy('resourceTitleObject.default.keyword') | async"
+    [activeSort]="isSortedBy('resourceTitleObject.default.keyword')"
     (sortChange)="setSortBy('resourceTitleObject.default.keyword', $event)"
   >
     <ng-template #header>
@@ -37,7 +37,7 @@
       <div class="flex flex-row items-center gap-2 max-w-full">
         <span class="overflow-hidden text-ellipsis">{{ item.title }}</span>
         <gn-ui-badge
-          *ngIf="hasDraft(item)"
+          *ngIf="recordHasDraft(item)"
           [style.--gn-ui-badge-padding]="'0.4em 0.6em'"
           [style.--gn-ui-badge-text-color]="'#3d2006'"
           [style.--gn-ui-badge-background-color]="'#ffbc7b'"
@@ -85,7 +85,7 @@
   <!-- OWNER COLUMN -->
   <gn-ui-interactive-table-column
     [sortable]="true"
-    [activeSort]="isSortedBy('recordOwner') | async"
+    [activeSort]="isSortedBy('recordOwner')"
     (sortChange)="setSortBy('recordOwner', $event)"
   >
     <ng-template #header>
@@ -110,7 +110,7 @@
   <!-- UPDATE DATE COLUMN -->
   <gn-ui-interactive-table-column
     [sortable]="true"
-    [activeSort]="isSortedBy('changeDate') | async"
+    [activeSort]="isSortedBy('changeDate')"
     (sortChange)="setSortBy('changeDate', $event)"
   >
     <ng-template #header>