♻️ refactor (IndicatorDetails) P2-903: add short initiative code to i…

…ndicator data model; enhance styles and layout for indicator info display; update HTML structure for improved accessibility
AllianceBioversityCIAT · Dec 16, 2024 · 09a6933 · 09a6933
1 parent 053bd00
commit 09a6933
Show file tree

Hide file tree

Showing 15 changed files with 91 additions and 36 deletions.
diff --git a/onecgiar-pr-client/src/app/pages/outcome-indicator/outcome-indicator.component.html b/onecgiar-pr-client/src/app/pages/outcome-indicator/outcome-indicator.component.html
@@ -1,4 +1,4 @@
-<div class="local_container section_container">
+<div class="local_container section_container" style="position: relative">
   @if (!router.url.includes('/outcome-indicator-module/indicator-details')) {
     <app-pr-select
       [options]="this.api.rolesSE.isAdmin ? this.allInitiatives : this.api.dataControlSE.myInitiativesList"

diff --git a/onecgiar-pr-client/src/app/pages/outcome-indicator/pages/eioi-home/eoio-home.component.html b/onecgiar-pr-client/src/app/pages/outcome-indicator/pages/eioi-home/eoio-home.component.html
@@ -1,7 +1,10 @@
 <header class="eoio_header">
-  <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>
+  <i
+    class="material-icons-round eoio_header_arrow"
+    routerLink="/outcome-indicator-module/home"
+    [queryParams]="{ init: this.outcomeIService.initiativeIdFilter }">
+    arrow_back
+  </i>
   <h1 class="eoio_header_title">End of Initiative Outcome Indicators List</h1>
 </header>
 

diff --git a/onecgiar-pr-client/src/app/pages/outcome-indicator/pages/eioi-home/eoio-home.component.scss b/onecgiar-pr-client/src/app/pages/outcome-indicator/pages/eioi-home/eoio-home.component.scss
@@ -19,20 +19,19 @@
   justify-content: flex-start;
   align-items: center;
   margin-bottom: 2rem;
-  gap: 1rem;
+  gap: 0.5rem;
 
   .eoio_header_arrow {
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: var(--pr-color-primary);
-    border-radius: 3px;
-    padding: 3px;
+    color: var(--pr-color-primary);
     cursor: pointer;
+    font-size: 22px;
   }
 
   .eoio_header_title {
-    font-size: 24px;
+    font-size: 18px;
     font-weight: 600;
     margin: 0;
   }

diff --git a/.../src/app/pages/outcome-indicator/pages/indicator-details/indicator-details.component.html b/.../src/app/pages/outcome-indicator/pages/indicator-details/indicator-details.component.html
@@ -12,6 +12,10 @@ <h1 class="indicator_title">
   </span>
 </h1>
 
+<div class="indicator_info_container">
+  {{ this.indicatorDetailsService.indicatorData().indicator_initiative_short }}
+</div>
+
 <div class="indicator_info">
   <div class="indicator_info_item">
     <div class="indicator_info_item_header">
@@ -63,7 +67,7 @@ <h1 class="indicator_title">
 <app-pr-field-header label="Which results are evidencing the achieved value for this indicator?" [required]="true"></app-pr-field-header>
 <app-alert-status
   inlineStyles="margin: 0"
-  description="If a result is missing , please ensure it is either reported against this outcome or linked to it. If a result is mapped to an incorrect outcome, you may adjust the unsubmitted result or use the “update result” feature to adjust the ToC section for 2024."></app-alert-status>
+  description="Please ensure it is either reported against this outcome or linked <span class='text-underline'>a result which is reported against this outcome</span>. If a result is mapped to an incorrect outcome, you may adjust the unsubmitted result or use the “update result” feature to adjust the ToC section for 2024."></app-alert-status>
 
 <div class="indicator_add_result_container">
   <app-pr-button

diff --git a/.../src/app/pages/outcome-indicator/pages/indicator-details/indicator-details.component.scss b/.../src/app/pages/outcome-indicator/pages/indicator-details/indicator-details.component.scss
@@ -85,3 +85,17 @@ p {
   justify-content: flex-end;
   margin-top: 2rem;
 }
+
+.indicator_info_container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1000;
+  padding: 8px 1.2rem;
+  color: #fff;
+  background-color: #5569dd;
+  border-top-right-radius: 10px;
+  border-bottom-left-radius: 10px;
+  font-weight: 500;
+  font-size: 12px;
+}
diff --git a/...nt/src/app/pages/outcome-indicator/pages/indicator-details/models/indicator-data.model.ts b/...nt/src/app/pages/outcome-indicator/pages/indicator-details/models/indicator-data.model.ts
@@ -14,6 +14,7 @@ export class IndicatorData {
   submission_status: string;
   initiative_official_code: string;
   indicator_initiative: string;
+  indicator_initiative_short: string;
   contributing_results: ContributingResult[];
 }
 

diff --git a/...ages/outcome-indicator/pages/outcome-indicator-home/outcome-indicator-home.component.html b/...ages/outcome-indicator/pages/outcome-indicator-home/outcome-indicator-home.component.html
@@ -1,6 +1,6 @@
 <div class="outcomes">
   <div class="outcomes_title">
-    <i class="material-icons-outlined" style="font-size: 34px">assessment</i>
+    <i class="material-icons-outlined" style="font-size: 30px">assessment</i>
     <h1 class="outcomes_title_text">Outcome Indicator Module</h1>
   </div>
 
@@ -12,7 +12,7 @@ <h1 class="outcomes_title_text">Outcome Indicator Module</h1>
       routerLink="/outcome-indicator-module/eoi-outcome-home"
       [ngClass]="{ disabled: !this.outcomeIService.initiativeIdFilter || !this.api.dataControlSE.reportingCurrentPhase.phaseName }"
       [queryParams]="{ init: this.outcomeIService.initiativeIdFilter }">
-      <i class="pi pi-sign-in" style="font-size: 4rem"></i>
+      <i class="pi pi-sign-in" style="font-size: 3rem"></i>
       <p class="outcomes_actions_item--text">Report progress on End-Of-Initiative Outcomes</p>
     </div>
 
@@ -21,15 +21,21 @@ <h1 class="outcomes_title_text">Outcome Indicator Module</h1>
       routerLink="/outcome-indicator-module/work-package-outcome-home"
       [ngClass]="{ disabled: !this.outcomeIService.initiativeIdFilter || !this.api.dataControlSE.reportingCurrentPhase.phaseName }"
       [queryParams]="{ init: this.outcomeIService.initiativeIdFilter }">
-      <i class="pi pi-box" style="font-size: 4rem"></i>
+      <i class="pi pi-box" style="font-size: 3rem"></i>
       <p class="outcomes_actions_item--text">Report progress on Work Packages Outcomes</p>
     </div>
 
     <div
       class="outcomes_actions_item"
-      [ngClass]="{ disabled: !this.outcomeIService.initiativeIdFilter || !this.api.dataControlSE.reportingCurrentPhase.phaseName }"
+      [ngClass]="{
+        disabled:
+          !this.outcomeIService.initiativeIdFilter ||
+          !this.api.dataControlSE.reportingCurrentPhase.phaseName ||
+          !this.outcomeIService.eoisData.length ||
+          !this.outcomeIService.wpsData.length
+      }"
       (click)="exportIndicatorsToExcel()">
-      <i class="pi pi-file-export" style="font-size: 4rem"></i>
+      <i class="pi pi-file-export" style="font-size: 3rem"></i>
       <p class="outcomes_actions_item--text">Export all the progress reported by indicators</p>
     </div>
   </div>

diff --git a/...ages/outcome-indicator/pages/outcome-indicator-home/outcome-indicator-home.component.scss b/...ages/outcome-indicator/pages/outcome-indicator-home/outcome-indicator-home.component.scss
@@ -16,23 +16,23 @@ p {
     gap: 0.5rem;
 
     .outcomes_title_text {
-      font-size: 28px;
+      font-size: 18px;
       margin: 0;
     }
   }
 
   .outcomes_desc {
-    font-size: 18px;
+    font-size: 14px;
     margin: 0;
-    margin-top: 30px;
+    margin-top: 20px;
   }
 
   .outcomes_actions {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 1.5rem;
     width: 100%;
-    margin-top: 40px;
+    margin-top: 30px;
 
     @media (max-width: 1200px) {
       grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
@@ -45,7 +45,7 @@ p {
       gap: 1.2rem;
       width: 100%;
       background-color: #f3f5ff;
-      padding: 2rem;
+      padding: 1.2rem 2rem;
       border: 1px solid #8a94ce;
       border-radius: 6px;
       box-shadow: 4px 4px 4px 0px #00000040;
@@ -57,7 +57,7 @@ p {
       }
 
       .outcomes_actions_item--text {
-        font-size: 20px;
+        font-size: 16px;
         margin: 0;
         color: #5569dd;
         font-weight: 500;

diff --git a/...s/outcome-indicator/pages/outcome-indicator-home/outcome-indicator-home.component.spec.ts b/...s/outcome-indicator/pages/outcome-indicator-home/outcome-indicator-home.component.spec.ts
@@ -32,9 +32,10 @@ describe('OutcomeIndicatorHomeComponent', () => {
   describe('exportIndicatorsToExcel', () => {
     it('should call exportOutcomesIndicatorsToExcel with correct parameters', () => {
       const exportSpy = jest.spyOn(exportTablesService, 'exportOutcomesIndicatorsToExcel').mockResolvedValue();
-      outcomeIndicatorService.eoisData = [];
-      outcomeIndicatorService.wpsData = [];
+      outcomeIndicatorService.eoisData = [{ indicators: [{ indicator_name: 'test' }] }];
+      outcomeIndicatorService.wpsData = [{ indicators: [{ indicator_name: 'test' }] }];
       outcomeIndicatorService.initiativeIdFilter = 'test';
+      component.api.dataControlSE.reportingCurrentPhase.phaseName = 'test';
 
       component.exportIndicatorsToExcel();
 
@@ -46,5 +47,16 @@ describe('OutcomeIndicatorHomeComponent', () => {
         expect.any(Array)
       );
     });
+
+    it('should not call exportOutcomesIndicatorsToExcel if the conditions are not met', () => {
+      const exportSpy = jest.spyOn(exportTablesService, 'exportOutcomesIndicatorsToExcel').mockResolvedValue();
+      outcomeIndicatorService.eoisData = [];
+      outcomeIndicatorService.wpsData = [];
+      outcomeIndicatorService.initiativeIdFilter = 'test';
+
+      component.exportIndicatorsToExcel();
+
+      expect(exportSpy).not.toHaveBeenCalled();
+    });
   });
 });
diff --git a/.../pages/outcome-indicator/pages/outcome-indicator-home/outcome-indicator-home.component.ts b/.../pages/outcome-indicator/pages/outcome-indicator-home/outcome-indicator-home.component.ts
@@ -22,6 +22,15 @@ export class OutcomeIndicatorHomeComponent {
   ) {}
 
   exportIndicatorsToExcel() {
+    if (
+      !this.outcomeIService.initiativeIdFilter ||
+      !this.api.dataControlSE.reportingCurrentPhase.phaseName ||
+      !this.outcomeIService.eoisData.length ||
+      !this.outcomeIService.wpsData.length
+    ) {
+      return;
+    }
+
     const wscolsEOIs = [
       { header: 'Outcome', key: 'toc_result_title', width: 50 },
       { header: 'Indicator', key: 'indicator_name', width: 50 },

diff --git a/onecgiar-pr-client/src/app/pages/outcome-indicator/pages/wp-home/wp-home.component.html b/onecgiar-pr-client/src/app/pages/outcome-indicator/pages/wp-home/wp-home.component.html
@@ -1,7 +1,10 @@
 <header class="wp_header">
-  <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>
+  <i
+    class="material-icons-round wp_header_arrow"
+    routerLink="/outcome-indicator-module/home"
+    [queryParams]="{ init: this.outcomeIService.initiativeIdFilter }">
+    arrow_back
+  </i>
   <h1 class="wp_header_title">Work Package Outcome Indicators List</h1>
 </header>
 

diff --git a/onecgiar-pr-client/src/app/pages/outcome-indicator/pages/wp-home/wp-home.component.scss b/onecgiar-pr-client/src/app/pages/outcome-indicator/pages/wp-home/wp-home.component.scss
@@ -19,20 +19,19 @@
   justify-content: flex-start;
   align-items: center;
   margin-bottom: 2rem;
-  gap: 1rem;
+  gap: 0.5rem;
 
   .wp_header_arrow {
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: var(--pr-color-primary);
-    border-radius: 3px;
-    padding: 3px;
+    color: var(--pr-color-primary);
     cursor: pointer;
+    font-size: 22px;
   }
 
   .wp_header_title {
-    font-size: 24px;
+    font-size: 18px;
     font-weight: 600;
     margin: 0;
   }

diff --git a/onecgiar-pr-client/src/app/shared/services/export-tables.service.ts b/onecgiar-pr-client/src/app/shared/services/export-tables.service.ts
@@ -204,8 +204,8 @@ export class ExportTablesService {
     try {
       await import('exceljs').then(async ExcelJS => {
         const workbook = new ExcelJS.Workbook();
-        const eoisWorksheet = workbook.addWorksheet('EOIO');
-        const wpsWorksheet = workbook.addWorksheet('WP');
+        const eoisWorksheet = workbook.addWorksheet('EoI outcomes');
+        const wpsWorksheet = workbook.addWorksheet('WP outcomes');
 
         if (wscolsEOIs) eoisWorksheet.columns = wscolsEOIs;
         if (wscolsWPs) wpsWorksheet.columns = wscolsWPs;
@@ -237,7 +237,7 @@ export class ExportTablesService {
 
     const supportingResults = !data.indicators[0]?.indicator_supporting_results
       ? 'Not provided'
-      : data.indicators[0]?.indicator_supporting_results.map(item => `• ${item.result_type} ${item.result_code} - ${item.result_title}`).join('\n');
+      : data.indicators[0]?.indicator_supporting_results.map(item => `• ${item.result_type} ${item.result_code} - ${item.title}`).join('\n');
 
     worksheet.addRow({
       toc_result_title: data.toc_result_title ?? 'Not defined',
@@ -265,7 +265,7 @@ export class ExportTablesService {
           }
           const supportingResults = !indicator.indicator_supporting_results
             ? 'Not provided'
-            : indicator.indicator_supporting_results.map(item => `• ${item.result_type} ${item.result_code} - ${item.result_title}`).join('\n');
+            : indicator.indicator_supporting_results.map(item => `• ${item.result_type} ${item.result_code} - ${item.title}`).join('\n');
 
           worksheet.addRow({
             workpackage_name: `${data.workpackage_short_name}: ${data.workpackage_name}`,

diff --git a/onecgiar-pr-client/src/styles.scss b/onecgiar-pr-client/src/styles.scss
@@ -326,3 +326,7 @@ a {
 .tooltip-w-300 {
   min-width: 300px !important;
 }
+
+.text-underline {
+  text-decoration: underline;
+}
diff --git a/...pi/contribution-to-indicators/repositories/contribution-to-indicator-result.repository.ts b/...pi/contribution-to-indicators/repositories/contribution-to-indicator-result.repository.ts
@@ -28,7 +28,8 @@ 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,
-        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,
+        wp.acronym as workpackage_short_name, concat(ci.official_code, ' - <b>', ci.short_name, '</b> - ', ci.name) as indicator_initiative, 
+        concat(ci.official_code, ' - ', ci.short_name) as indicator_initiative_short, ci.official_code as initiative_official_code,
         (
         	CASE
             when indicator_s.result_status_id = 1 then 0