[Datahub]: add comment and discussion module to record page

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

@@ -688,3 +688,83 @@ describe('api form', () => {
       })
   })
 })
+
+describe('userFeedback', () => {
+  describe('when not logged in', () => {
+    beforeEach(() => {
+      cy.visit('/dataset/accroche_velos')
+      cy.get('datahub-record-user-feedbacks').as('userFeedback')
+    })
+    it('should sort comments', () => {
+      cy.get('gn-ui-user-feedback-item')
+        .find('[data-cy="commentText"]')
+        .as('commentText')
+
+      cy.get('@commentText')
+        .first()
+        .then((div) => {
+          const premierCommentaireAvantTri = div.text().trim()
+          cy.get('@userFeedback')
+            .find('gn-ui-dropdown-selector')
+            .openDropdown()
+            .children('button')
+            .eq(1)
+            .click()
+
+          // eslint-disable-next-line cypress/no-unnecessary-waiting
+          cy.wait(1000)
+
+          cy.get('gn-ui-user-feedback-item')
+            .find('[data-cy="commentText"]')
+            .first()
+            .then((div) => {
+              const premierCommentaireApresTri = div.text().trim()
+              expect(premierCommentaireAvantTri).to.not.eq(
+                premierCommentaireApresTri
+              )
+            })
+        })
+    })
+    it("shouldn't be able to comment", () => {
+      cy.get('datahub-record-user-feedbacks')
+        .find('gn-ui-text-area')
+        .should('not.exist')
+    })
+  })
+
+  describe('when logged in', () => {
+    beforeEach(() => {
+      cy.login()
+      cy.visit('/dataset/accroche_velos')
+      cy.get('datahub-record-user-feedbacks').as('userFeedback')
+
+      cy.get('gn-ui-user-feedback-item')
+        .find('[data-cy="commentText"]')
+        .as('commentText')
+    })
+    it('should publish a comment', () => {
+      cy.get('datahub-record-user-feedbacks')
+        .find('gn-ui-text-area')
+        .first()
+        .should('exist')
+        .type('Something')
+
+      cy.get('datahub-record-user-feedbacks')
+        .find('gn-ui-button')
+        .eq(1)
+        .should('exist')
+    })
+    it('should answer to a comment', () => {
+      cy.get('gn-ui-user-feedback-item')
+        .find('gn-ui-text-area')
+        .first()
+        .should('exist')
+        .type('Something')
+
+      cy.get('gn-ui-user-feedback-item')
+        .find('gn-ui-button')
+        .eq(0)
+        .should('exist')
+    })
+  })
+})

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

@@ -69,19 +69,23 @@ import { FormsModule } from '@angular/forms'
 import { UiDatavizModule } from '@geonetwork-ui/ui/dataviz'
 import { LANGUAGES_LIST, UiCatalogModule } from '@geonetwork-ui/ui/catalog'
 import {
+  LOGIN_URL,
   METADATA_LANGUAGE,
+  provideGn4,
   provideRepositoryUrl,
 } from '@geonetwork-ui/api/repository'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
-import { LOGIN_URL, provideGn4 } from '@geonetwork-ui/api/repository'
 import { RecordRelatedRecordsComponent } from './record/record-related-records/record-related-records.component'
 import { RecordMetadataComponent } from './record/record-metadata/record-metadata.component'
 import { RecordOtherlinksComponent } from './record/record-otherlinks/record-otherlinks.component'
 import { RecordDownloadsComponent } from './record/record-downloads/record-downloads.component'
 import { RecordApisComponent } from './record/record-apis/record-apis.component'
 import { MatTabsModule } from '@angular/material/tabs'
+import { UiWidgetsModule } from '@geonetwork-ui/ui/widgets'
+import { RecordUserFeedbacksComponent } from './record/record-user-feedbacks/record-user-feedbacks.component'
 
 export const metaReducers: MetaReducer[] = !environment.production ? [] : []
+
 // https://github.com/nrwl/nx/issues/191
 @NgModule({
   declarations: [
@@ -100,6 +104,7 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
     KeyFiguresComponent,
     NavigationMenuComponent,
     RecordRelatedRecordsComponent,
+    RecordUserFeedbacksComponent,
     RecordMetadataComponent,
     RecordOtherlinksComponent,
     RecordDownloadsComponent,
@@ -144,6 +149,7 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
     UiInputsModule,
     UiCatalogModule,
     MatTabsModule,
+    UiWidgetsModule,
   ],
   providers: [
     importProvidersFrom(FeatureAuthModule),

apps/datahub/src/app/record/record-metadata/record-metadata.component.html

@@ -1,24 +1,24 @@
-<div *ngIf="(facade.error$ | async) === null">
+<div *ngIf="(metadataViewFacade.error$ | async) === null">
   <div
     id="about"
     class="container-lg px-4 mb-9 mt-8 sm:mb-16 sm:mt-10 lg:mx-auto"
   >
     <gn-ui-metadata-info
       class="sm:block"
-      *ngIf="(facade.isPresent$ | async) === false"
+      *ngIf="(metadataViewFacade.isPresent$ | async) === false"
       [metadata]="{}"
       [incomplete]="true"
     >
     </gn-ui-metadata-info>
     <div
-      *ngIf="(facade.isPresent$ | async) === true"
+      *ngIf="(metadataViewFacade.isPresent$ | async) === true"
       class="grid gap-8 grid-cols-1 sm:gap-6 sm:grid-cols-3"
     >
       <div class="sm:col-span-2">
         <gn-ui-metadata-info
           class="sm:block"
-          [metadata]="facade.metadata$ | async"
-          [incomplete]="facade.isIncomplete$ | async"
+          [metadata]="metadataViewFacade.metadata$ | async"
+          [incomplete]="metadataViewFacade.isIncomplete$ | async"
           (keyword)="onInfoKeywordClick($event)"
         >
         </gn-ui-metadata-info>
@@ -32,15 +32,15 @@
         </gn-ui-image-overlay-preview>
         <gn-ui-metadata-contact
           (organizationClick)="onOrganizationClick($event)"
-          [metadata]="facade.metadata$ | async"
+          [metadata]="metadataViewFacade.metadata$ | async"
         >
         </gn-ui-metadata-contact>
         <div *ngIf="metadataQualityDisplay">
           <p class="text text-gray-700 text-xs mb-3 uppercase" translate>
             record.metadata.quality
           </p>
           <gn-ui-metadata-quality
-            [metadata]="facade.metadata$ | async"
+            [metadata]="metadataViewFacade.metadata$ | async"
             [metadataQualityDisplay]="metadataQualityDisplay"
           ></gn-ui-metadata-quality>
         </div>
@@ -138,7 +138,7 @@
       <div class="h-48 overflow-visible">
         <div class="container-lg px-4 lg:mx-auto">
           <datahub-record-related-records
-            [records]="facade.related$ | async"
+            [records]="metadataViewFacade.related$ | async"
           ></datahub-record-related-records>
         </div>
       </div>
@@ -148,14 +148,22 @@
     </div>
   </div>
 </div>
+<div id="userFeedbacks" class="bg-primary-opacity-10 py-16">
+  <div class="container-lg px-4 lg:mx-auto">
+    <datahub-record-user-feedbacks
+      [organisationName$]="organisationName$"
+      [metadataUuid]="metadataUuid$ | async"
+    ></datahub-record-user-feedbacks>
+  </div>
+</div>
 <div
   class="mt-12 p-4 max-w-[600px] m-auto text-[13px]"
-  *ngIf="facade.error$ | async as error"
+  *ngIf="metadataViewFacade.error$ | async as error"
 >
   <gn-ui-search-results-error
     *ngIf="error.notFound"
     [type]="errorTypes.RECORD_NOT_FOUND"
-    [recordId]="(facade.metadata$ | async).uniqueIdentifier"
+    [recordId]="(metadataViewFacade.metadata$ | async).uniqueIdentifier"
   ></gn-ui-search-results-error>
   <gn-ui-search-results-error
     *ngIf="error.otherError"

apps/datahub/src/app/record/record-metadata/record-metadata.component.ts

@@ -21,44 +21,60 @@ export class RecordMetadataComponent {
   @Input() metadataQualityDisplay: boolean
 
   displayMap$ = combineLatest([
-    this.facade.mapApiLinks$,
-    this.facade.geoDataLinks$,
+    this.metadataViewFacade.mapApiLinks$,
+    this.metadataViewFacade.geoDataLinks$,
   ]).pipe(
     map(
       ([mapLinks, geoDataLinks]) =>
         mapLinks?.length > 0 || geoDataLinks?.length > 0
     )
   )
+
   displayData$ = combineLatest([
-    this.facade.dataLinks$,
-    this.facade.geoDataLinks$,
+    this.metadataViewFacade.dataLinks$,
+    this.metadataViewFacade.geoDataLinks$,
   ]).pipe(
     map(
       ([dataLinks, geoDataLinks]) =>
         dataLinks?.length > 0 || geoDataLinks?.length > 0
     )
   )
-  displayDownload$ = this.facade.downloadLinks$.pipe(
+
+  displayDownload$ = this.metadataViewFacade.downloadLinks$.pipe(
+    map((links) => links?.length > 0)
+  )
+  displayApi$ = this.metadataViewFacade.apiLinks$.pipe(
     map((links) => links?.length > 0)
   )
-  displayApi$ = this.facade.apiLinks$.pipe(map((links) => links?.length > 0))
-  displayOtherLinks = this.facade.otherLinks$.pipe(
+
+  displayOtherLinks = this.metadataViewFacade.otherLinks$.pipe(
     map((links) => links?.length > 0)
   )
-  displayRelated$ = this.facade.related$.pipe(
+  displayRelated$ = this.metadataViewFacade.related$.pipe(
     map((records) => records?.length > 0)
   )
 
-  sourceLabel$ = this.facade.metadata$.pipe(
+  organisationName$ = this.metadataViewFacade.metadata$.pipe(
+    map((record) => record?.ownerOrganization?.name),
+    filter(Boolean)
+  )
+
+  metadataUuid$ = this.metadataViewFacade.metadata$.pipe(
+    map((record) => record?.uniqueIdentifier),
+    filter(Boolean)
+  )
+
+  sourceLabel$ = this.metadataViewFacade.metadata$.pipe(
     map((record) => record?.extras?.catalogUuid as string),
     filter((uuid) => !!uuid),
     mergeMap((uuid) => this.sourceService.getSourceLabel(uuid))
   )
 
   errorTypes = ErrorType
+
   selectedTabIndex$ = new BehaviorSubject(0)
 
-  thumbnailUrl$ = this.facade.metadata$.pipe(
+  thumbnailUrl$ = this.metadataViewFacade.metadata$.pipe(
     map((metadata) => {
       // in order to differentiate between metadata not loaded yet
       // and url not defined
@@ -74,7 +90,7 @@ export class RecordMetadataComponent {
   showOverlay = true
 
   constructor(
-    public facade: MdViewFacade,
+    public metadataViewFacade: MdViewFacade,
     private searchService: SearchService,
     private sourceService: SourcesService,
     private orgsService: OrganizationsServiceInterface
@@ -90,6 +106,7 @@ export class RecordMetadataComponent {
   onInfoKeywordClick(keyword: Keyword) {
     this.searchService.updateFilters({ any: keyword.label })
   }
+
   onOrganizationClick(org: Organization) {
     this.orgsService
       .getFiltersForOrgs([org])

apps/datahub/src/app/record/record-user-feedbacks/record-user-feedbacks.component.html

@@ -0,0 +1,101 @@
+<div class="flex flex-row justify-between mb-11">
+  <p class="font-title text-[28px] text-title font-medium" translate>
+    record.metadata.userFeedbacks
+  </p>
+  <div>
+    <gn-ui-dropdown-selector
+      *ngIf="userFeedbacksParents && userFeedbacksParents.length > 1"
+      [title]="'record.metadata.userFeedbacks.sortSelector.label' | translate"
+      (selectValue)="changeSort($event)"
+      [choices]="sortingStrategyList"
+      [selected]="selectedSortingStrategy$ | async"
+    >
+    </gn-ui-dropdown-selector>
+  </div>
+</div>
+
+<ng-container *ngIf="isAllUserFeedbackLoading; else userFeedbacksSection">
+  <div class="flex justify-center h-[300px] pt-[145px]">
+    <gn-ui-spinning-loader></gn-ui-spinning-loader>
+  </div>
+</ng-container>
+
+<ng-template #userFeedbacksSection>
+  <ng-container *ngIf="activeUser; else annonymousUser">
+    <div class="flex flex-col h-auto w-full">
+      <div class="flex flex-row items-center w-full h-auto gap-3 px-6">
+        <mat-icon class="material-symbols-outlined grow-0">edit</mat-icon>
+        <gn-ui-text-area
+          [(value)]="newComment"
+          [disabled]="isAddUserFeedbackLoading"
+          (valueChange)="onNewCommentValueChange()"
+          (keyup.control.enter)="publishNewComment()"
+          [placeholder]="
+            'record.metadata.userFeedbacks.newComment.placeholder' | translate
+          "
+          class="grow"
+          extraClass="bg-transparent border-0 placeholder-primary-darker text-primary-darker h-9"
+        ></gn-ui-text-area>
+        <div
+          *ngIf="!isNewCommentEmpty"
+          id="new-comment-buttons"
+          class="flex flex-row justify-end"
+        >
+          <gn-ui-button
+            [disabled]="isAddUserFeedbackLoading"
+            [type]="'outline'"
+            (buttonClick)="publishNewComment()"
+            title="Publish"
+            extraClass="!p-[0.5em] text-primary-darker border-primary-darker h-9"
+          >
+            <mat-icon
+              class="material-symbols-outlined grow-0"
+              *ngIf="!isAddUserFeedbackLoading"
+            >
+              send
+            </mat-icon>
+            <ng-container *ngIf="isAddUserFeedbackLoading">
+              <div class="flex justify-center w-full">
+                <gn-ui-spinning-loader></gn-ui-spinning-loader>
+              </div>
+            </ng-container>
+          </gn-ui-button>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+  <ng-template #annonymousUser>
+    <div class="flex flex-row items-center gap-3 w-full h-auto px-6">
+      <mat-icon class="material-symbols-outlined grow-0">edit</mat-icon>
+      <span translate>record.metadata.userFeedbacks.anonymousUser</span>
+      <a
+        [href]="this.loginUrl"
+        class="gn-ui-btn-primary uppercase flex flex-row items-center gap-2 ml-auto"
+        translate
+      >
+        <mat-icon class="material-symbols-outlined grow-0"
+          >account_box</mat-icon
+        >
+        button.login
+      </a>
+    </div>
+  </ng-template>
+
+  <div class="mt-4" *ngIf="userFeedbacksParents && userFeedbacksParents.length">
+    <div
+      class="mb-4 w-full"
+      *ngFor="let userFeedbackParent of userFeedbacksParents"
+    >
+      <gn-ui-user-feedback-item
+        [userFeedbackParent]="userFeedbackParent"
+        [userFeedBacksAnswers]="
+          userFeedBacksAnswers.get(userFeedbackParent.uuid)
+        "
+        [isActiveUserEditor]="isActiveUserMetadaEditor"
+        [activeUser]="activeUser"
+        [isAddUserFeedbackLoading]="isAddUserFeedbackLoading"
+        (newUserFeedbackAnswer)="onNewUserFeedbackAnswer($event)"
+      ></gn-ui-user-feedback-item>
+    </div>
+  </div>
+</ng-template>