feat: add comment and discussion module to record page

feat: add comment and discussion module to record page

css

ajouts

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

@@ -688,3 +688,84 @@ describe('api form', () => {
       })
   })
 })
+
+describe.only('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.component.ts

@@ -8,6 +8,7 @@ import { ThemeService } from '@geonetwork-ui/util/shared'
   styleUrls: ['./app.component.css'],
 })
 export class AppComponent implements OnInit {
+
   ngOnInit(): void {
     const favicon = getThemeConfig().FAVICON
     if (favicon) ThemeService.setFavicon(favicon)

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>
@@ -77,7 +77,7 @@
             <mat-tab [disabled]="(displayMap$ | async) === false">
               <ng-template mat-tab-label>
                 <span class="tab-header-label sm:ml-32" translate
-                  >record.tab.map</span
+                >record.tab.map</span
                 >
               </ng-template>
               <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,25 @@
     </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

@@ -7,58 +7,74 @@ import { filter, map, mergeMap } from 'rxjs/operators'
 import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface'
 import {
   Keyword,
-  Organization,
+  Organization
 } from '@geonetwork-ui/common/domain/model/record'
 import { MdViewFacade } from '@geonetwork-ui/feature/record'
 
 @Component({
   selector: 'datahub-record-metadata',
   templateUrl: './record-metadata.component.html',
   styleUrls: ['./record-metadata.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 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,11 +90,12 @@ export class RecordMetadataComponent {
   showOverlay = true
 
   constructor(
-    public facade: MdViewFacade,
+    public metadataViewFacade: MdViewFacade,
     private searchService: SearchService,
     private sourceService: SourcesService,
     private orgsService: OrganizationsServiceInterface
-  ) {}
+  ) {
+  }
 
   onTabIndexChange(index: number): void {
     this.selectedTabIndex$.next(index)
@@ -90,6 +107,7 @@ export class RecordMetadataComponent {
   onInfoKeywordClick(keyword: Keyword) {
     this.searchService.updateFilters({ any: keyword.label })
   }
+
   onOrganizationClick(org: Organization) {
     this.orgsService
       .getFiltersForOrgs([org])