Merged in coar-CST-12608 (pull request #1007)

[CST-12608] qaevents page improvements

Approved-by: Stefano Maffei

src/app/suggestion-notifications/qa/events/quality-assurance-events.component.html

@@ -4,13 +4,19 @@
       <h2 class="border-bottom pb-2">
         <div class="d-flex justify-content-between">
           {{'notifications.events.title'| translate}}
-          <a class="btn btn-outline-secondary" [routerLink]="['/admin/notifications/quality-assurance']">
+          <a class="btn btn-outline-secondary" (click)="goBack()">
             <i class="fas fa-angle-double-left"></i>
             {{'quality-assurance.events.back' | translate}}
           </a>
         </div>
       </h2>
-      <ds-alert [type]="'alert-info'" [content]="'quality-assurance.events.description'"></ds-alert>
+      <ds-alert *ngIf="!targetId"  [type]="'alert-info'">
+        <span [innerHTML]="'quality-assurance.events.description' | translate : {topic: selectedTopicName, source: sourceId}"></span>
+      </ds-alert>
+      <ds-alert *ngIf="targetId" [type]="'alert-info'">
+        <span [innerHTML]="'quality-assurance.events.description-with-topic-and-target' | translate : {topic: selectedTopicName, source: sourceId}"></span>
+        <a [routerLink]="itemPageUrl" target="_blank">{{(getTargetItemTitle() | async)}}</a>
+      </ds-alert>
     </div>
   </div>
   <div class="row">
@@ -157,7 +163,7 @@
   </div>
   <div class="row text-right">
     <div class="col-md-12">
-      <a class="btn btn-outline-secondary" [routerLink]="['/admin/notifications/quality-assurance']">
+      <a class="btn btn-outline-secondary" (click)="goBack()">
         <i class="fas fa-angle-double-left"></i>
         {{'quality-assurance.events.back' | translate}}
       </a>

src/app/suggestion-notifications/qa/events/quality-assurance-events.component.spec.ts

@@ -42,6 +42,7 @@ import { SortDirection, SortOptions } from '../../../core/cache/models/sort-opti
 import { PaginationService } from '../../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub';
 import { FindListOptions } from '../../../core/data/find-list-options.model';
+import { ItemDataService } from 'src/app/core/data/item-data.service';
 
 describe('QualityAssuranceEventsComponent test suite', () => {
   let fixture: ComponentFixture<QualityAssuranceEventsComponent>;
@@ -118,6 +119,7 @@ describe('QualityAssuranceEventsComponent test suite', () => {
         { provide: NotificationsService, useValue: new NotificationsServiceStub() },
         { provide: TranslateService, useValue: getMockTranslateService() },
         { provide: PaginationService, useValue: paginationService },
+        { provide: ItemDataService, useValue: {} },
         QualityAssuranceEventsComponent
       ],
       schemas: [NO_ERRORS_SCHEMA]

src/app/suggestion-notifications/qa/events/quality-assurance-events.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
 
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
@@ -26,10 +27,12 @@ import {
   ProjectEntryImportModalComponent,
   QualityAssuranceEventData
 } from '../project-entry-import-modal/project-entry-import-modal.component';
-import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
+import { getFirstCompletedRemoteData, getRemoteDataPayload } from '../../../core/shared/operators';
 import { PaginationService } from '../../../core/pagination/pagination.service';
 import { Item } from '../../../core/shared/item.model';
 import { FindListOptions } from '../../../core/data/find-list-options.model';
+import { getItemPageRoute } from '../../../item-page/item-page-routing-paths';
+import { ItemDataService } from '../../../core/data/item-data.service';
 
 /**
  * Component to display the Quality Assurance event list.
@@ -105,6 +108,26 @@ export class QualityAssuranceEventsComponent implements OnInit, OnDestroy {
    */
   protected subs: Subscription[] = [];
 
+  /**
+   * The target item id, retrieved from the topic-id composition.
+   */
+  public targetId: string;
+
+  /**
+   * The URL of the item page/target.
+   */
+  public itemPageUrl: string;
+
+  /**
+   * Plain topic name (without the source id)
+   */
+  public selectedTopicName: string;
+
+  /**
+   * The source id, retrieved from the topic-id composition.
+   */
+  public sourceId: string;
+
   /**
    * Initialize the component variables.
    * @param {ActivatedRoute} activatedRoute
@@ -120,7 +143,9 @@ export class QualityAssuranceEventsComponent implements OnInit, OnDestroy {
     private notificationsService: NotificationsService,
     private qualityAssuranceEventRestService: QualityAssuranceEventDataService,
     private paginationService: PaginationService,
-    private translateService: TranslateService
+    private translateService: TranslateService,
+    private itemService: ItemDataService,
+    private _location: Location
   ) {
   }
 
@@ -137,6 +162,10 @@ export class QualityAssuranceEventsComponent implements OnInit, OnDestroy {
         const regEx = /!/g;
         this.showTopic = id.replace(regEx, '/');
         this.topic = id;
+        const splitList = this.showTopic?.split(':');
+        this.targetId = splitList.length > 2 ? splitList.pop() : null;
+        this.sourceId = splitList[0];
+        this.selectedTopicName = splitList[1];
         return this.getQualityAssuranceEvents();
       })
     ).subscribe((events: QualityAssuranceEventData[]) => {
@@ -423,4 +452,37 @@ export class QualityAssuranceEventsComponent implements OnInit, OnDestroy {
       last()
     );
   }
+
+  /**
+  * Returns the page route for the given item.
+  * @param item The item to get the page route for.
+  * @returns The page route for the given item.
+  */
+  public getItemPageRoute(item: Item): string {
+    return getItemPageRoute(item);
+  }
+
+  /**
+   * Returns an Observable that emits the title of the target item.
+   * The target item is retrieved by its ID using the itemService.
+   * The title is extracted from the first metadata value of the item.
+   * The item page URL is also set in the component.
+   * @returns An Observable that emits the title of the target item.
+   */
+  public getTargetItemTitle(): Observable<string> {
+    return this.itemService.findById(this.targetId).pipe(
+      take(1),
+      getFirstCompletedRemoteData(),
+      getRemoteDataPayload(),
+      tap((item: Item) => this.itemPageUrl = getItemPageRoute(item)),
+      map((item: Item) => item.firstMetadataValue('dc.title'))
+    );
+  }
+
+  /**
+   * Navigates back to the previous location in the browser's history stack.
+   */
+  public goBack() {
+    this._location.back();
+  }
 }

src/app/suggestion-notifications/qa/topics/quality-assurance-topics.component.html

@@ -44,7 +44,7 @@
                       <button
                               class="btn btn-outline-primary btn-sm"
                               title="{{'quality-assurance.button.detail' | translate }}"
-                              [routerLink]="['/admin/notifications/quality-assurance',sourceId, topicElement.id]">
+                              [routerLink]="['/admin/notifications/quality-assurance', sourceId, topicElement.id]">
                         <span class="badge badge-info">{{topicElement.totalEvents}}</span>
                         <i class="fas fa-info fa-fw"></i>
                       </button>

src/assets/i18n/en.json5

@@ -3266,7 +3266,9 @@
 
   "quality-assurance.source.error.service.retrieve": "An error occurred while loading the Quality Assurance source",
 
-  "quality-assurance.events.description": "Below the list of all the suggestions for the selected topic.",
+  "quality-assurance.events.description": "Below the list of all the suggestions for the selected topic <b>{{topic}}</b>, related to <b>{{source}}</b>.",
+
+  "quality-assurance.events.description-with-topic-and-target": "Below the list of all the suggestions for the selected topic <b>{{topic}}</b>, related to <b>{{source}}</b> and ",
 
   "quality-assurance.loading": "Loading ...",