Merge branch 'P2-903-Tracking-of-outcomes-achievements-against-target…

…s' of https://github.com/AllianceBioversityCIAT/onecgiar_pr into P2-903-Tracking-of-outcomes-achievements-against-targets

onecgiar-pr-client/src/app/pages/outcome-indicator/pages/eioi-home/eoio-home.component.html

@@ -2,7 +2,7 @@
   <div class="eoio_header_arrow" routerLink="/outcome-indicator-module/home" [queryParams]="{ init: this.outcomeIService.initiativeIdFilter }">
     <i class="material-icons-round" style="color: white">arrow_back</i>
   </div>
-  <h1 class="eoio_header_title">Indicator list</h1>
+  <h1 class="eoio_header_title">End of Initiative Outcome Indicators List</h1>
 </header>
 
 <div class="search_input" style="width: 100%; margin-bottom: 2rem">
@@ -27,7 +27,7 @@ <h1 class="eoio_header_title">Indicator list</h1>
   [tableStyle]="{ 'min-width': '80rem' }">
   <ng-template pTemplate="header">
     <tr>
-      <th pSortableColumn="toc_result_title" style="width: 26%" id="outcome-header">Outcome <p-sortIcon field="toc_result_title" /></th>
+      <th pSortableColumn="toc_result_title" style="width: 26%" id="outcome-header">EOI Outcome <p-sortIcon field="toc_result_title" /></th>
       <th style="width: 25%" id="indicator-header">Indicator</th>
       <th style="width: 20%" id="indicator-type-header">Indicator Type</th>
       <th style="width: 8%" id="expected-target-header">Expected Target</th>

onecgiar-pr-client/src/app/pages/outcome-indicator/pages/eioi-home/eoio-home.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, inject, OnDestroy, OnInit, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, OnDestroy } from '@angular/core';
 import { TableModule } from 'primeng/table';
 import { ApiService } from '../../../../shared/services/api/api.service';
 import { ButtonModule } from 'primeng/button';

onecgiar-pr-client/src/app/pages/outcome-indicator/pages/indicator-details/indicator-details.component.html

@@ -13,6 +13,18 @@ <h1 class="indicator_title">
 </h1>
 
 <div class="indicator_info">
+  <div class="indicator_info_item">
+    <div class="indicator_info_item_header">
+      <i class="pi pi-box" style="font-size: 20px"></i>
+
+      <p class="indicator_info_item_label">Work Package</p>
+    </div>
+
+    <p class="indicator_info_item_value">
+      {{ this.indicatorData?.workpackage_short_name ? this.indicatorData.workpackage_short_name + ': ' : '' }}
+      {{ this.indicatorData?.workpackage_name ?? 'Not specified' }}
+    </p>
+  </div>
   @for (item of indicatorInfoItems; track $index) {
     <div class="indicator_info_item">
       <div class="indicator_info_item_header">

onecgiar-pr-client/src/app/pages/outcome-indicator/pages/indicator-details/indicator-details.component.spec.ts

@@ -20,7 +20,9 @@ describe('IndicatorDetailsComponent', () => {
         GET_contributionsToIndicators_indicator: jest.fn().mockReturnValue(of({})),
         POST_contributionsToIndicators: jest.fn().mockReturnValue(of({})),
         PATCH_contributionsToIndicators: jest.fn().mockReturnValue(of({})),
-        POST_contributionsToIndicatorsSubmit: jest.fn().mockReturnValue(of({}))
+        POST_contributionsToIndicatorsSubmit: jest.fn().mockReturnValue(of({})),
+        GET_contributionsToIndicatorsWPS: jest.fn().mockReturnValue(of({})),
+        GET_contributionsToIndicatorsEOIS: jest.fn().mockReturnValue(of({}))
       },
       alertsFe: {
         show: jest.fn().mockImplementationOnce((config, callback) => {
@@ -98,6 +100,34 @@ describe('IndicatorDetailsComponent', () => {
     expect(component.updateIndicatorData).toHaveBeenCalledWith(response);
   });
 
+  it('should update indicator data and set loading to false in updateIndicatorData', () => {
+    const response = { contributionToIndicator: { someData: 'data', initiative_official_code: '123' } };
+    component.updateIndicatorData(response);
+    expect(component.indicatorData).toEqual(response.contributionToIndicator);
+    expect(component.loading).toBe(false);
+  });
+
+  it('should call getWorkPackagesData and getEOIsData if initiativeIdFilter is different', () => {
+    const response = { contributionToIndicator: { someData: 'data', initiative_official_code: '123' } };
+    component.outcomeIService.initiativeIdFilter = '456';
+    jest.spyOn(component.outcomeIService, 'getWorkPackagesData');
+    jest.spyOn(component.outcomeIService, 'getEOIsData');
+    component.updateIndicatorData(response);
+    expect(component.outcomeIService.initiativeIdFilter).toBe('123');
+    expect(component.outcomeIService.getWorkPackagesData).toHaveBeenCalled();
+    expect(component.outcomeIService.getEOIsData).toHaveBeenCalled();
+  });
+
+  it('should not call getWorkPackagesData and getEOIsData if initiativeIdFilter is the same', () => {
+    const response = { contributionToIndicator: { someData: 'data', initiative_official_code: '123' } };
+    component.outcomeIService.initiativeIdFilter = '123';
+    jest.spyOn(component.outcomeIService, 'getWorkPackagesData');
+    jest.spyOn(component.outcomeIService, 'getEOIsData');
+    component.updateIndicatorData(response);
+    expect(component.outcomeIService.getWorkPackagesData).not.toHaveBeenCalled();
+    expect(component.outcomeIService.getEOIsData).not.toHaveBeenCalled();
+  });
+
   it('should handle 404 response in handleGetIndicatorResponse', () => {
     component.indicatorId = '123';
     const response = { status: 404 };

onecgiar-pr-client/src/app/pages/outcome-indicator/pages/indicator-details/indicator-details.component.ts

@@ -28,8 +28,7 @@ export class IndicatorDetailsComponent implements OnInit {
   loading = true;
 
   indicatorInfoItems = [
-    { icon: '', label: 'Work Package', value: 'workpackage_name', iconClass: 'pi pi-box' },
-    { icon: 'login', label: 'Outcome', value: 'outcome_description', iconClass: 'material-icons-round' },
+    { icon: 'login', label: 'Outcome', value: 'outcome_name', iconClass: 'material-icons-round' },
     { icon: 'show_chart', label: 'Unit of measurement', value: 'unit_measurement', iconClass: 'material-icons-round' },
     { icon: '', label: 'Baseline', value: 'indicator_baseline', iconClass: 'pi pi-chart-bar' },
     { icon: '', label: 'Target', value: 'indicator_target', iconClass: 'pi pi-bullseye' }
@@ -89,6 +88,13 @@ export class IndicatorDetailsComponent implements OnInit {
 
   updateIndicatorData(response: any) {
     this.indicatorData = response?.contributionToIndicator;
+
+    if (this.outcomeIService.initiativeIdFilter !== this.indicatorData.initiative_official_code) {
+      this.outcomeIService.initiativeIdFilter = this.indicatorData.initiative_official_code;
+      this.outcomeIService.getWorkPackagesData();
+      this.outcomeIService.getEOIsData();
+    }
+
     this.loading = false;
   }
 

onecgiar-pr-client/src/app/pages/outcome-indicator/pages/indicator-details/models/indicator-data.model.ts

@@ -10,7 +10,10 @@ export class IndicatorData {
   outcome_name: string;
   outcome_description: string;
   workpackage_name: string;
+  workpackage_short_name: string;
   submission_status: string;
+  initiative_official_code: string;
+  indicator_initiative: string;
   contributing_results: ContributingResult[];
 }
 

onecgiar-pr-client/src/app/pages/outcome-indicator/pages/wp-home/wp-home.component.html

@@ -2,7 +2,7 @@
   <div class="wp_header_arrow" routerLink="/outcome-indicator-module/home" [queryParams]="{ init: this.outcomeIService.initiativeIdFilter }">
     <i class="material-icons-round" style="color: white">arrow_back</i>
   </div>
-  <h1 class="wp_header_title">Indicator list</h1>
+  <h1 class="wp_header_title">Work Package Outcome Indicators List</h1>
 </header>
 
 <div class="search_input" style="width: 100%; margin-bottom: 2rem">
@@ -35,7 +35,9 @@ <h1 class="wp_header_title">Indicator list</h1>
   [expandedRowKeys]="this.outcomeIService.expandedRows">
   <ng-template pTemplate="header">
     <tr>
-      <th pSortableColumn="workpackage_short_name" style="width: 26%" id="outcome_header">Outcome <p-sortIcon field="workpackage_short_name" /></th>
+      <th pSortableColumn="workpackage_short_name" style="width: 26%" id="outcome_header">
+        Work Package Outcome <p-sortIcon field="workpackage_short_name" />
+      </th>
       <th style="width: 25%" id="indicator_header">Indicator</th>
       <th style="width: 20%" id="indicator_type_header">Indicator Type</th>
       <th style="width: 8%" id="expected_target_header">Expected Target</th>

onecgiar-pr-server/src/api/contribution-to-indicators/repositories/contribution-to-indicator-result.repository.ts

@@ -28,7 +28,7 @@ export class ContributionToIndicatorResultsRepository extends Repository<Contrib
         tri.unit_messurament as unit_measurement, tri.baseline_value as indicator_baseline,
         trit.target_value as indicator_target, REGEXP_REPLACE(tr.result_title, '^[\s\n\r]+|[\s\n\r]+$', '') as outcome_name,
         REGEXP_REPLACE(tr.result_description, '^[\s\n\r]+|[\s\n\r]+$', '') as outcome_description, wp.name as workpackage_name,
-        concat(ci.official_code, ' - <b>', ci.short_name, '</b> - ', ci.name) as indicator_initiative,
+        wp.acronym as workpackage_short_name, concat(ci.official_code, ' - <b>', ci.short_name, '</b> - ', ci.name) as indicator_initiative, ci.official_code as initiative_official_code,
         (
         	CASE
             when indicator_s.result_status_id = 1 then 0