feat(DH): Add card last created

apps/datahub-e2e/src/e2e/home.cy.ts

@@ -8,4 +8,24 @@ describe('datahub-e2e', () => {
     cy.get('gn-ui-fuzzy-search').should('be.visible')
     cy.get('gn-ui-autocomplete').should('have.length.gt', 0)
   })
+  it('should display results card last created', () => {
+    cy.get('mel-datahub-results-card-last-created').should('be.visible')
+    cy.get('mel-datahub-results-card-last-created').should('have.length.gt', 0)
+    cy.get('mel-datahub-results-card-last-created').as('lastCreatedCard')
+
+    cy.get('@lastCreatedCard').find('h1').should('be.visible')
+    cy.get('@lastCreatedCard').find('.mel-badge-button').should('be.visible')
+  })
+
+  describe('interactions with dataset', () => {
+    beforeEach(() => {
+      cy.get('mel-datahub-results-card-last-created').first().as('firstResult')
+    })
+    it('should open the dataset page in the same application on click', () => {
+      const urlRegex = /http:\/\/[^/]+:\d+\/dataset/
+      cy.get('@firstResult').click()
+      cy.url().should('match', urlRegex)
+      cy.get('mel-datahub-dataset-page').should('be.visible')
+    })
+  })
 })

apps/datahub/src/app/common/results-list-item/results-card-last-created/results-card-last-created.component.html

@@ -1,16 +1,37 @@
-<div
-  class="h-full border bg-blue-200 rounded-sm overflow-hidden transition duration-200 transform hover:scale-105 hover:bg-gray-50 border-gray-300 hover:border-primary hover:text-primary"
+<a
+  [title]="record.title"
+  (click)="mdSelect.emit(record)"
+  class="bg-gray-8 group flex flex-col justify-between relative h-40 p-[16px] w-[330px] rounded border border-gray-6 filter overflow-hidden cursor-pointer hover:drop-shadow-lg"
 >
-  <a [title]="record.abstract" (click)="mdSelect.emit(record)">
-    <div class="flex flex-col min-h-full cursor-pointer">
-      <div class="grow p-4">
-        <h1 class="title-font text-lg font-medium mb-3 clamp-2">
-          {{ record.title }}
-        </h1>
-        <p class="leading-relaxed text-sm text-gray-700 clamp-3">
-          {{ record.abstract }}
-        </p>
-      </div>
+  <h1 class="font-bold text-[17px] line-clamp-2">
+    {{ record.title }}
+  </h1>
+
+  <div class="flex flex-col justify-between w-[calc(100%-80px)]">
+    @if(creationDate){
+    <div class="text-sm mb-[10px] leading-none">{{ creationDate }}</div>
+    } @if(record.keywords?.length) {
+    <div class="flex gap-1">
+      @for(keyword of record.keywords.slice(0, 2); track
+      record.uniqueIdentifier) {
+      <button
+        type="button"
+        [attr.aria-label]="keyword"
+        [title]="keyword"
+        class="mel-badge-button truncate"
+        (click)="onKeywordClick(keyword, $event)"
+      >
+        {{ keyword }}
+      </button>
+      }
     </div>
-  </a>
-</div>
+    }
+  </div>
+
+  @if(shownOrganization?.logoUrl?.href){<gn-ui-thumbnail
+    class="absolute right-[10px] bottom-[10px] w-[80px] h-[80px]"
+    [thumbnailUrl]="shownOrganization?.logoUrl?.href"
+    fit="contain"
+  ></gn-ui-thumbnail
+  >}
+</a>

apps/datahub/src/app/common/results-list-item/results-list-item.component.ts

@@ -8,4 +8,18 @@ import { CatalogRecord } from 'geonetwork-ui/libs/common/domain/src/lib/model/re
 export class ResultsListItemComponent {
   @Input() record: CatalogRecord
   @Output() mdSelect = new EventEmitter<CatalogRecord>()
+  @Output() keyword = new EventEmitter<string>()
+
+  get shownOrganization() {
+    return this.record?.ownerOrganization
+  }
+
+  get creationDate() {
+    return this.record?.recordCreated?.toLocaleDateString('fr')
+  }
+
+  onKeywordClick(keyword: string, event: Event) {
+    event.stopPropagation()
+    this.keyword.emit(keyword)
+  }
 }

apps/datahub/src/app/common/results-list/results-list-carousel/results-list-carousel.component.html

@@ -12,6 +12,7 @@
       [style]="'height: 12em;'"
       [record]="record"
       (mdSelect)="onMetadataSelection($event)"
+      (keyword)="onInfoKeywordClick($event)"
     ></mel-datahub-results-card-last-created>
     } }
   </div>

apps/datahub/src/app/common/results-list/results-list-grid/results-list-grid.component.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { ResultsListComponent } from '../results-list.component'
-
 @Component({
   selector: 'mel-datahub-results-list-grid',
   templateUrl: './results-list-grid.component.html',

apps/datahub/src/app/common/results-list/results-list.component.ts

@@ -4,6 +4,7 @@ import {
   FIELDS_BRIEF,
   RouterFacade,
   SearchFacade,
+  SearchService,
   SearchState,
 } from 'geonetwork-ui'
 import { CatalogRecord } from 'geonetwork-ui/libs/common/domain/src/lib/model/record'
@@ -17,9 +18,10 @@ export class ResultsListComponent implements OnInit {
   @Input() numberOfResults = 10
 
   constructor(
+    protected searchService: SearchService,
     protected searchFacade: SearchFacade,
-    private routerFacade: RouterFacade,
-    private store: Store<SearchState>
+    protected routerFacade: RouterFacade,
+    protected store: Store<SearchState>
   ) {}
 
   ngOnInit() {
@@ -30,6 +32,10 @@ export class ResultsListComponent implements OnInit {
       .setSortBy(['desc', 'createDate'])
   }
 
+  onInfoKeywordClick(keyword: string) {
+    this.routerFacade.updateSearch({ q: keyword })
+  }
+
   onMetadataSelection(metadata: CatalogRecord): void {
     this.routerFacade.goToMetadata(metadata)
   }

apps/datahub/src/app/home/home-header/home-header.component.html

@@ -13,6 +13,7 @@ <h1 class="flex justify-center mel-page-title" translate="">
     <div class="h-64" gnUiSearchStateContainer="headerHome">
       <mel-datahub-results-list-carousel
         [numberOfResults]="6"
+        [favoritesOnly]="false"
       ></mel-datahub-results-list-carousel>
     </div>
   </div>

apps/datahub/src/styles.css

@@ -8,4 +8,8 @@
   .mel-page-title {
     @apply text-black text-5xl font-extrabold font-title;
   }
+
+  .mel-badge-button {
+    @apply inline-block bg-white py-1.5 px-2 rounded font-medium text-primary border border-primary text-sm leading-none hover:border-primary-dark hover:text-gray-8 hover:bg-primary-dark cursor-pointer transition-colors;
+  }
 }

apps/datahub/tailwind.config.js

@@ -1,6 +1,6 @@
-const baseConfig = require('../../node_modules/geonetwork-ui/tailwind.base.config');
-const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
-const { join } = require('path');
+const baseConfig = require('../../node_modules/geonetwork-ui/tailwind.base.config')
+const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind')
+const { join } = require('path')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -14,9 +14,22 @@ module.exports = {
     extend: {
       colors: {
         primary: '#E30513',
+        'primary-dark': '#AB0107',
+        'primary-light': '#FACED2',
         beige: '#F7F5F0',
+        secondary: '#007A80',
+        'secondary-dark': '#004E52',
+        'secondary-light': '#A1DBDE',
+        'gray-1': '#000000',
+        'gray-2': '#4C4C4C',
+        'gray-3': '#646464',
+        'gray-4': '#7C7C7C',
+        'gray-5': '#A1A1A1',
+        'gray-6': '#CCCDD2',
+        'gray-7': '#EEEEEE',
+        'gray-8': '#FFFFFF',
       },
     },
   },
   plugins: [],
-};
+}