Merge branch 'dev' of https://github.com/AllianceBioversityCIAT/onecg…

…iar_pr into dev

onecgiar-pr-client/src/app/custom-fields/pr-select/pr-select.component.html

@@ -1,3 +1,4 @@
+<div [style]="inlineStylesContainer">
 <app-pr-field-header [label]="this.label" [description]="this.description" [required]="this.required"
 [showDescriptionLabel]="this.showDescriptionLabel" [descInlineStyles]="this.descInlineStyles"
 [labelDescInlineStyles]="this.labelDescInlineStyles"
@@ -12,7 +13,7 @@
         'Not provided' :
         'Not applicable'))"></div>
     <div class="custom_select" *ngSwitchCase="false">
-        <a class="field" tabindex="0" [id]="this.optionValue+indexReference??''"
+        <a class="field" tabindex="0" [id]="this.optionValue + (indexReference || '')"
             [ngClass]="{'select-disable': this.disabled}" [ngClass]="{'globalDisabled': fieldDisabled}">
             <div class="text"
                 [ngClass]="{'select_placeholder': !(this.optionsIntance | labelName:this.value:this.optionValue:this.optionLabel), 'truncate': this.truncateSelectionText}"
@@ -57,3 +58,4 @@
         description="If you don't find the partner you are looking for, <a class='open_route pSelectP'>request</a> to have it added to the list. Please note that once your partner request is approved, it could take up to an hour to be available in the CLARISA institutions list.">
     </app-alert-status>
 </div>
+</div>

onecgiar-pr-client/src/app/custom-fields/pr-select/pr-select.component.scss

@@ -64,6 +64,10 @@
   }
 }
 
+.pr-field {
+  width: 100%;
+}
+
 .pr-field .read-only {
   padding: 8px 10px;
   box-shadow: 0px 0px 14px 0px #dcdcdc;

onecgiar-pr-client/src/app/custom-fields/pr-select/pr-select.component.ts

@@ -1,4 +1,4 @@
-import { Component, forwardRef, Input, Output, EventEmitter, SimpleChanges } from '@angular/core';
+import { Component, forwardRef, Input, Output, EventEmitter } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { RolesService } from '../../shared/services/global/roles.service';
 import { DataControlService } from '../../shared/services/data-control.service';
@@ -43,6 +43,7 @@ export class PrSelectComponent implements ControlValueAccessor {
   @Input() optionsInlineStyles?: string = '';
   @Input() showDescriptionLabel?: boolean = false;
   @Input() truncateSelectionText?: boolean = false;
+  @Input() inlineStylesContainer?: string = '';
   @Input() _value: string;
 
   @Output() selectOptionEvent = new EventEmitter();
@@ -82,7 +83,7 @@ export class PrSelectComponent implements ControlValueAccessor {
 
   removeFocus(option?) {
     if (option?.disabled) return;
-    const element: any = document.getElementById(this.optionValue + this.indexReference ?? '');
+    const element: any = document.getElementById(this.optionValue + (this.indexReference || ''));
     element.blur();
   }
   get optionsIntance() {

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

@@ -1,5 +1,5 @@
 <div class="local_container section_container">
-  <div class="filters">
+  @if (!router.url.includes('/outcome-indicator-module/indicator-details')) {
     <app-pr-select
       [options]="this.api.rolesSE.isAdmin ? this.allInitiatives : this.api.dataControlSE.myInitiativesList"
       label="Initiative"
@@ -10,18 +10,13 @@
       placeholder="Select Initiative"
       labelDescInlineStyles="color: #5569dd"
       [(ngModel)]="this.outcomeIService.initiativeIdFilter"
+      inlineStylesContainer="display: flex; flex-direction: row; gap: 10px; align-items: center; width: 100%; margin-top: 20px;"
+      labelDescInlineStyles="color: #5569dd; margin: 0;"
       (ngModelChange)="handleInitiativeChange()">
     </app-pr-select>
 
-    <div class="filters_phase">
-      <p class="filters_phase_title">Phase:</p>
-      <p class="filters_phase_text">
-        {{ this.api.dataControlSE.reportingCurrentPhase.phaseName }}
-      </p>
-    </div>
-  </div>
-
-  <div class="separator_line"></div>
+    <div class="separator_line"></div>
+  }
 
   <router-outlet></router-outlet>
 </div>

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

@@ -10,34 +10,6 @@ p {
   margin: 0;
 }
 
-.filters {
-  display: grid;
-  grid-template-columns: 1fr 300px;
-  gap: 2rem;
-  padding: 0;
-
-  .filters_phase {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-
-    .filters_phase_title {
-      margin-top: 20px;
-      margin-bottom: 7px;
-      text-align: left;
-      font-size: 1.1em;
-      font-weight: 500;
-      color: #5569dd;
-    }
-
-    .filters_phase_text {
-      padding: 6px 0;
-      font-size: 15px;
-    }
-  }
-}
-
 .separator_line {
   margin-top: 20px;
   margin-bottom: 20px;

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

@@ -138,4 +138,28 @@ describe('OutcomeIndicatorComponent', () => {
     expect(component.outcomeIService.getWorkPackagesData).toHaveBeenCalled();
     expect(component.outcomeIService.searchText.set).toHaveBeenCalledWith('');
   });
+
+  it('should update query params when not in indicator details route', () => {
+    component.outcomeIService.initiativeIdFilter = 'TEST1';
+    jest.spyOn(component.router, 'navigate');
+    jest.spyOn(component.router, 'url', 'get').mockReturnValue('/outcome-indicator-module');
+
+    component.updateQueryParams();
+
+    expect(component.router.navigate).toHaveBeenCalledWith([], {
+      relativeTo: component.activatedRoute,
+      queryParams: { init: 'TEST1' },
+      queryParamsHandling: 'merge'
+    });
+  });
+
+  it('should not update query params when in indicator details route', () => {
+    component.outcomeIService.initiativeIdFilter = 'TEST1';
+    jest.spyOn(component.router, 'navigate');
+    jest.spyOn(component.router, 'url', 'get').mockReturnValue('/outcome-indicator-module/indicator-details');
+
+    component.updateQueryParams();
+
+    expect(component.router.navigate).not.toHaveBeenCalled();
+  });
 });

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

@@ -77,6 +77,10 @@ export class OutcomeIndicatorComponent implements OnInit {
   }
 
   updateQueryParams(): void {
+    if (this.router.url.includes('/outcome-indicator-module/indicator-details')) {
+      return;
+    }
+
     this.router.navigate([], {
       relativeTo: this.activatedRoute,
       queryParams: { [this.QUERY_PARAM_INITIATIVE]: this.outcomeIService.initiativeIdFilter },

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

@@ -22,54 +22,61 @@ <h1 class="eoio_header_title">Indicator list</h1>
   [rowsPerPageOptions]="[8, 12, 20]"
   [loading]="this.outcomeIService.loading()"
   [showLoader]="false"
-  [first]="this.outcomeIService.searchText && 0"
-  [paginator]="(this.outcomeIService.eoisData | appFilterIndicatorBySearch: this.outcomeIService.searchText())?.length > 0"
+  [first]="this.outcomeIService.searchText() && 0"
+  [paginator]="(this.outcomeIService.eoisData | appFilterIndicatorBySearch: this.outcomeIService.searchText())?.length > 8"
   [tableStyle]="{ 'min-width': '80rem' }">
   <ng-template pTemplate="header">
     <tr>
-      <th pSortableColumn="toc_result_description" style="width: 26%">Outcome <p-sortIcon field="toc_result_description" /></th>
-      <th style="width: 25%">Indicator</th>
-      <th style="width: 20%">Indicator Type</th>
-      <th style="width: 8%">Expected Target</th>
-      <th style="width: 8%">Actual target achieved</th>
-      <th style="width: 8%">Achieved status</th>
-      <th style="width: 5%">Reporting status</th>
+      <th pSortableColumn="toc_result_description" style="width: 26%" id="outcome-header">Outcome <p-sortIcon field="toc_result_description" /></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>
+      <th style="width: 8%" id="actual-target-achieved-header">Actual target achieved</th>
+      <th style="width: 8%" id="achieved-status-header">Achieved status</th>
+      <th style="width: 5%" id="reporting-status-header">Reporting status</th>
     </tr>
   </ng-template>
 
   <ng-template pTemplate="body" let-item>
     @let indicator = item.indicators?.[0];
     <tr>
       <td>{{ item?.toc_result_description ?? 'No data found.' }}</td>
-      <td>{{ indicator?.indicator_description ?? 'No data found.' }}</td>
-      <td>
-        <span style="font-weight: bold">
-          {{ !indicator?.indicator_name ? '' : indicator?.is_indicator_custom ? 'Custom - ' : 'Standard - ' }}
-        </span>
-        {{ indicator?.indicator_name ?? 'No data found.' }}
-      </td>
-      <td style="text-align: center">{{ indicator?.indicator_target_value ?? 'Not defined' }}</td>
-      <td style="text-align: center">{{ indicator?.indicator_achieved_value ?? 'Not defined' }}</td>
-      <td style="text-align: center">
-        {{
-          this.outcomeIService.achievedStatus(indicator?.indicator_target_value, indicator?.indicator_achieved_value) ? 'Achieved' : 'Not Achieved'
-        }}
-      </td>
-      <td>
-        <div
-          style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%"
-          [pTooltip]="
-            this.outcomeIService.achievedStatus(indicator?.indicator_target_value, indicator?.indicator_achieved_value) ? 'Submitted' : 'Editing'
-          "
-          tooltipPosition="top"
-          positionTop="-5">
+      @if (!indicator) {
+        <td colspan="6" style="text-align: center">No indicator data found.</td>
+      } @else {
+        <td
+          routerLink="/outcome-indicator-module/indicator-details"
+          [queryParams]="{ indicatorId: indicator?.indicator_uuid, platform: 'eoi' }"
+          class="indicator_link">
+          {{ indicator?.indicator_description ?? 'No data found.' }}
+        </td>
+        <td>
+          <span style="font-weight: bold">
+            {{ !indicator?.indicator_name ? '' : indicator?.is_indicator_custom ? 'Custom - ' : 'Standard - ' }}
+          </span>
+          {{ indicator?.indicator_name ?? 'No data found.' }}
+        </td>
+        <td style="text-align: center">{{ indicator?.indicator_target_value ?? 'Not defined' }}</td>
+        <td style="text-align: center">{{ indicator?.indicator_achieved_value ?? 'Not defined' }}</td>
+        <td style="text-align: center">
+          {{
+            this.outcomeIService.achievedStatus(indicator?.indicator_target_value, indicator?.indicator_achieved_value) ? 'Achieved' : 'Not Achieved'
+          }}
+        </td>
+        <td>
           <div
-            class="circle"
-            [ngClass]="{
-              'circle-success': this.outcomeIService.achievedStatus(indicator?.indicator_target_value, indicator?.indicator_achieved_value)
-            }"></div>
-        </div>
-      </td>
+            style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%"
+            [pTooltip]="indicator?.indicator_submission_status ? 'Submitted' : 'Editing'"
+            tooltipPosition="top"
+            positionTop="-5">
+            <div
+              class="circle"
+              [ngClass]="{
+                'circle-success': indicator?.indicator_submission_status
+              }"></div>
+          </div>
+        </td>
+      }
     </tr>
   </ng-template>
 

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

@@ -45,3 +45,9 @@
   font-weight: 500;
   color: var(--pr-color-primary);
 }
+
+.indicator_link {
+  color: var(--pr-color-primary);
+  cursor: pointer;
+  font-weight: 600;
+}