Merge pull request #11 from camptocamp/dataset-abstract

[Dataset page] Main block

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

@@ -0,0 +1,93 @@
+describe('datasets', () => {
+  describe('when not logged in', () => {
+    beforeEach(() => cy.visit('/dataset/8698bf0b-fceb-4f0f-989b-111e7c4af0a4'))
+
+    it('should display the favorite button disabled', () => {
+      cy.get('mel-datahub-button-primary')
+        .eq(0)
+        .find('button')
+        .as('favoriteButton')
+      cy.get('@favoriteButton').should('be.disabled')
+      cy.get('@favoriteButton').should('have.class', 'bg-primary-light')
+    })
+
+    it('should scroll down when clicking on download button', () => {
+      cy.get('mel-datahub-button-primary').eq(1).as('downloadButton')
+      cy.get('@downloadButton').click()
+      cy.get('@downloadButton').should(() => {
+        const scrollPosition = Cypress.dom.getWindowByElement(
+          cy.state('window')
+        ).scrollY
+        expect(scrollPosition).to.be.greaterThan(0)
+      })
+    })
+
+    it('should scroll down when clicking on api button', () => {
+      cy.get('mel-datahub-button-primary').eq(2).as('apiButton')
+      cy.get('@apiButton').click()
+      cy.get('@apiButton').should(() => {
+        const scrollPosition = Cypress.dom.getWindowByElement(
+          cy.state('window')
+        ).scrollY
+        expect(scrollPosition).to.be.greaterThan(0)
+      })
+    })
+
+    it('should display the title', () => {
+      cy.get('.mel-page-title').should('be.visible')
+      cy.get('.mel-page-title').should('have.text', ' Alpenkonvention ')
+    })
+
+    it('should display the abstract in collapsed mode applying gradient', () => {
+      cy.get('mel-datahub-text-expand').should('be.visible')
+      cy.get('mel-datahub-text-expand')
+        .find('mel-datahub-button-primary')
+        .should('have.text', ' En savoir plus ')
+      cy.get('mel-datahub-text-expand')
+        .find('mel-datahub-button-primary')
+        .find('img')
+        .should('have.attr', 'src', '/assets/icons/arrow.svg')
+      cy.get('mel-datahub-text-expand')
+        .find('.bg-gradient-to-b')
+        .should('have.css', 'max-height', '72px')
+    })
+
+    it('should display the abstract in expanded mode without gradient', () => {
+      cy.get('mel-datahub-text-expand').should('be.visible')
+      cy.get('mel-datahub-text-expand')
+        .find('mel-datahub-button-primary')
+        .click()
+      cy.get('mel-datahub-text-expand')
+        .find('mel-datahub-button-primary')
+        .should('have.text', ' Reduire ')
+      cy.get('mel-datahub-text-expand')
+        .find('mel-datahub-button-primary')
+        .find('img')
+        .should('have.attr', 'src', '/assets/icons/arrow-up.svg')
+      cy.get('mel-datahub-text-expand')
+        .find('.bg-gradient-to-b')
+        .should('not.exist')
+      cy.get('mel-datahub-text-expand')
+        .find('.ease-in')
+        .should('have.css', 'max-height')
+        .and('satisfy', (maxHeight) => parseInt(maxHeight, 10) > 110)
+    })
+  })
+  describe('when logged in', () => {
+    beforeEach(() => {
+      cy.login()
+      cy.clearFavorites()
+      cy.visit('/dataset/8698bf0b-fceb-4f0f-989b-111e7c4af0a4')
+    })
+    it('should toggle the favorite button', () => {
+      cy.get('mel-datahub-button-primary').eq(0).as('favoriteButton')
+      cy.get('@favoriteButton')
+        .find('img')
+        .should('have.attr', 'src', '/assets/icons/heart.svg')
+      cy.get('@favoriteButton').click()
+      cy.get('@favoriteButton')
+        .find('img')
+        .should('have.attr', 'src', '/assets/icons/heart-filled.svg')
+    })
+  })
+})

apps/datahub-e2e/src/support/commands.ts

@@ -14,22 +14,77 @@
 declare namespace Cypress {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface Chainable<Subject> {
-    login(email: string, password: string): void;
+    login(username?: string, password?: string, redirect?: boolean)
+    signOut(): void
+    clearFavorites()
   }
 }
 
-// -- This is a parent command --
-Cypress.Commands.add('login', (email, password) => {
-  console.log('Custom command example: Login', email, password);
-});
-//
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+Cypress.Commands.add(
+  'login',
+  (username = 'admin', password = 'admin', redirect = false) => {
+    // first request to get the XSRF cookie
+    cy.request({
+      method: 'GET',
+      url: '/geonetwork/srv/api/me',
+      headers: {
+        Accept: 'application/json',
+      },
+    })
+    cy.getCookie('XSRF-TOKEN').then((xsrfTokenCookie) => {
+      cy.request({
+        method: 'POST',
+        url: '/geonetwork/signin',
+        body: `username=${username}&password=${password}&_csrf=${xsrfTokenCookie.value}`,
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        followRedirect: false,
+      })
+    })
+    if (redirect) return cy.visit('/')
+    else return cy.window()
+  }
+)
+
+Cypress.Commands.add('signOut', () => {
+  cy.visit('/geonetwork/srv/eng/catalog.search#/home')
+  cy.get('a[title="User details"]').click()
+  cy.get('a[title="Sign out"]').click()
+})
+
+/**
+ * This will most likely fail if the user is not logged in!
+ */
+Cypress.Commands.add('clearFavorites', () => {
+  cy.request({
+    url: '/geonetwork/srv/api/me',
+    headers: { accept: 'application/json' },
+  })
+    .its('body')
+    .its('id')
+    .as('myId')
+
+  cy.window().then(function () {
+    cy.request({
+      url: `/geonetwork/srv/api/userselections/0/${this.myId}`,
+      headers: { accept: 'application/json' },
+    })
+      .its('body')
+      .as('favoritesId')
+  })
+
+  return cy
+    .getCookie('XSRF-TOKEN')
+    .its('value')
+    .then(function (token) {
+      const favoritesId = this.favoritesId || []
+      cy.request({
+        url: `/geonetwork/srv/api/userselections/0/${
+          this.myId
+        }?uuid=${favoritesId.join('&uuid=')}`,
+        method: 'DELETE',
+        headers: { accept: 'application/json', 'X-XSRF-TOKEN': token },
+      })
+    })
+})

apps/datahub/src/app/app.module.ts

@@ -46,6 +46,12 @@ import { ResultsCardSearchComponent } from './common/results-list-item/results-c
 import { MatTabsModule } from '@angular/material/tabs'
 import { DatasetApisComponent } from './dataset/dataset-apis/dataset-apis.component'
 import { MelDatahubMetadataQualityComponent } from './common/metadata-quality/mel-datahub-metadata-quality.component'
+import { DatasetHeaderComponent } from './dataset/dataset-header/dataset-header.component'
+import { ButtonPrimaryComponent } from './common/button-primary/button-primary.component'
+import { DatasetDownloadsComponent } from './dataset/dataset-downloads/dataset-downloads.component'
+import { FavoriteHeartComponent } from './common/favorites/favorite-heart/favorite-heart.component'
+import { HeartToggleComponent } from './common/favorites/heart-toggle/heart-toggle.component'
+import { TextExpandComponent } from './common/text-expand/text-expand.component'
 
 @NgModule({
   declarations: [
@@ -66,6 +72,12 @@ import { MelDatahubMetadataQualityComponent } from './common/metadata-quality/me
     DatasetPageComponent,
     DatasetApisComponent,
     MelDatahubMetadataQualityComponent,
+    DatasetHeaderComponent,
+    ButtonPrimaryComponent,
+    DatasetDownloadsComponent,
+    FavoriteHeartComponent,
+    HeartToggleComponent,
+    TextExpandComponent,
   ],
   imports: [
     BrowserModule,

apps/datahub/src/app/common/button-primary/button-primary.component.html

@@ -0,0 +1,10 @@
+<button
+  class="h-11 flex justify-center items-center gap-2 text-white text-[15px] font-extrabold leading-[18px] py-2 px-[18px] rounded border hover:bg-primary-dark"
+  [class]="disabled ? 'bg-primary-light' : 'bg-primary'"
+  [disabled]="disabled"
+>
+  {{ label }}
+  @if(src){
+  <img [src]="src" [alt]="placeholder" />
+  }
+</button>

apps/datahub/src/app/common/button-primary/button-primary.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'mel-datahub-button-primary',
+  templateUrl: './button-primary.component.html',
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ButtonPrimaryComponent {
+  @Input() label: string
+  @Input() set icon(fileName: string) {
+    if (fileName) {
+      this.src = `/assets/icons/${fileName}.svg`
+      this.placeholder = fileName
+    }
+  }
+  @Input() disabled = false
+  src?: string
+  placeholder?: string
+}

apps/datahub/src/app/common/favorites/favorite-heart/favorite-heart.component.html

@@ -0,0 +1,5 @@
+<mel-datahub-heart-toggle
+  [toggled]="isFavorite$ | async"
+  (newValue)="toggleFavorite($event)"
+  [disabled]="loading || (isAnonymous$ | async)"
+></mel-datahub-heart-toggle>

apps/datahub/src/app/common/favorites/favorite-heart/favorite-heart.component.ts

@@ -0,0 +1,19 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  ViewChild,
+} from '@angular/core'
+import { FavoriteStarComponent } from 'geonetwork-ui'
+import { HeartToggleComponent } from '../heart-toggle/heart-toggle.component'
+
+@Component({
+  selector: 'mel-datahub-favorite-heart',
+  templateUrl: './favorite-heart.component.html',
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FavoriteHeartComponent extends FavoriteStarComponent {
+  @ViewChild(HeartToggleComponent, { read: ElementRef })
+  override starToggleRef: ElementRef
+}

apps/datahub/src/app/common/favorites/heart-toggle/heart-toggle.component.html

@@ -0,0 +1,6 @@
+<mel-datahub-button-primary
+  [label]="'mel.dataset.favorite' | translate"
+  [icon]="toggled ? 'heart-filled' : 'heart'"
+  [disabled]="disabled"
+  (click)="toggle($event)"
+></mel-datahub-button-primary>

apps/datahub/src/app/common/favorites/heart-toggle/heart-toggle.component.ts

@@ -0,0 +1,29 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { propagateToDocumentOnly } from 'geonetwork-ui'
+
+@Component({
+  selector: 'mel-datahub-heart-toggle',
+  templateUrl: './heart-toggle.component.html',
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HeartToggleComponent {
+  @Input() toggled!: boolean
+  @Input() disabled = false
+  @Output() newValue = new EventEmitter<boolean>()
+
+  toggle(event: Event) {
+    if (!this.disabled) {
+      this.toggled = !this.toggled
+      this.newValue.emit(this.toggled)
+    }
+    propagateToDocumentOnly(event)
+    event.preventDefault()
+  }
+}

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

@@ -3,7 +3,7 @@
   [tabIndex]="0"
   (click)="mdSelect.emit(record)"
   (keyup.enter)="mdSelect.emit(record)"
-  class="bg-gray-8 group flex flex-col gap-[9px] justify-between h-[110px] py-3 px-4 w-[330px] rounded-lg border border-gray-6 filter hover:drop-shadow-lg z-0"
+  class="mel-card group gap-[9px] h-[110px] py-3 px-4 z-0"
   ><div class="flex justify-between">
     <h1 class="font-bold text-[17px] line-clamp-1">
       {{ record.title }}

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

@@ -3,7 +3,7 @@
   [tabIndex]="0"
   (click)="mdSelect.emit(record)"
   (keyup.enter)="mdSelect.emit(record)"
-  class="bg-gray-8 group flex flex-col justify-between relative h-40 p-4 w-[330px] rounded border border-gray-6 filter overflow-hidden cursor-pointer hover:drop-shadow-lg"
+  class="mel-card group relative h-40 p-4 overflow-hidden"
 >
   <h1 class="font-bold text-[17px] line-clamp-2">
     {{ record.title }}

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

@@ -1,30 +1,34 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, Input, OnDestroy, OnInit } from '@angular/core'
 import { Store } from '@ngrx/store'
 import {
   FIELDS_BRIEF,
+  FavoritesService,
   RouterFacade,
   SearchFacade,
   SearchService,
   SearchState,
 } from 'geonetwork-ui'
 import { CatalogRecord } from 'geonetwork-ui/libs/common/domain/src/lib/model/record'
+import { Subscription } from 'rxjs'
 
 @Component({
   selector: 'mel-datahub-results-list',
   template: '',
 })
-export class ResultsListComponent implements OnInit {
+export class ResultsListComponent implements OnInit, OnDestroy {
   @Input() set favoritesOnly(value: boolean) {
     this.favoritesOnlyValue = value
     this.searchFacade.setFavoritesOnly(value)
   }
   favoritesOnlyValue: boolean
   @Input() numberOfResults = 10
+  myFavoritesSubscription: Subscription
 
   constructor(
     protected searchService: SearchService,
     protected searchFacade: SearchFacade,
     protected routerFacade: RouterFacade,
+    protected favoritesService: FavoritesService,
     protected store: Store<SearchState>
   ) {}
 
@@ -33,6 +37,14 @@ export class ResultsListComponent implements OnInit {
       .setConfigRequestFields([...FIELDS_BRIEF, 'createDate', 'changeDate'])
       .setPageSize(this.numberOfResults)
       .setSortBy(['desc', 'createDate'])
+    this.myFavoritesSubscription =
+      this.favoritesService.myFavoritesUuid$.subscribe(() => {
+        if (this.favoritesOnlyValue) this.searchFacade.setFavoritesOnly(true)
+      })
+  }
+
+  ngOnDestroy() {
+    this.myFavoritesSubscription.unsubscribe()
   }
 
   onInfoKeywordClick(keyword: string) {

apps/datahub/src/app/common/text-expand/text-expand.component.html

@@ -0,0 +1,19 @@
+<div
+  #container
+  class="overflow-hidden transition-[max-height] duration-300 mb-8"
+  [ngClass]="
+    isExpanded || !showToggleButton
+      ? 'ease-in'
+      : 'ease-out bg-gradient-to-b from-black to-beige text-transparent bg-clip-text'
+  "
+  [style.maxHeight]="maxHeight"
+>
+  <ng-content></ng-content>
+</div>
+@if(showToggleButton){
+<mel-datahub-button-primary
+  [label]="(isExpanded ? 'mel.dataset.less' : 'mel.dataset.more') | translate"
+  [icon]="isExpanded ? 'arrow-up' : 'arrow'"
+  (click)="toggleDisplay()"
+></mel-datahub-button-primary>
+}