♻️ refactor(IndicatorDetails) P2-903: replace indicatorDetailsService…

… loading with component-level signal; update related tests
AllianceBioversityCIAT · Dec 16, 2024 · d12abf7 · d12abf7
1 parent e78dd25
commit d12abf7
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 17 deletions.
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
@@ -96,7 +96,7 @@ <h1 class="indicator_title">
 
 <p-toast position="bottom-right" key="br" />
 
-@if (this.indicatorDetailsService.loading()) {
+@if (this.loading()) {
   <div class="spinner" style="position: fixed">
     <div class="info">
       <img src="assets/icons/spinner.png" class="rotating" alt="" srcset="" />

diff --git a/...c/app/pages/outcome-indicator/pages/indicator-details/indicator-details.component.spec.ts b/...c/app/pages/outcome-indicator/pages/indicator-details/indicator-details.component.spec.ts
@@ -61,8 +61,6 @@ describe('IndicatorDetailsComponent', () => {
     component = fixture.componentInstance;
     apiService = TestBed.inject(ApiService);
     location = TestBed.inject(Location);
-    activatedRoute = TestBed.inject(ActivatedRoute);
-    authService = TestBed.inject(AuthService);
   });
 
   it('should create', () => {
@@ -114,7 +112,7 @@ describe('IndicatorDetailsComponent', () => {
     const response = { contributionToIndicator: { someData: 'data', initiative_official_code: '123' } };
     component.updateIndicatorData(response);
     expect(component.indicatorDetailsService.indicatorData()).toEqual(response.contributionToIndicator);
-    expect(component.indicatorDetailsService.loading()).toBe(false);
+    expect(component.loading()).toBe(false);
   });
 
   it('should not call getWorkPackagesData and getEOIsData if initiativeIdFilter is the same', () => {
@@ -159,7 +157,7 @@ describe('IndicatorDetailsComponent', () => {
     const response = { contributionToIndicator: { someData: 'data' } };
     component.updateIndicatorData(response);
     expect(component.indicatorDetailsService.indicatorData()).toEqual(response.contributionToIndicator);
-    expect(component.indicatorDetailsService.loading()).toBe(false);
+    expect(component.loading()).toBe(false);
   });
 
   it('should go back when goBack is called', () => {

diff --git a/...nt/src/app/pages/outcome-indicator/pages/indicator-details/indicator-details.component.ts b/...nt/src/app/pages/outcome-indicator/pages/indicator-details/indicator-details.component.ts
@@ -1,5 +1,5 @@
 import { CommonModule, Location } from '@angular/common';
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { CustomFieldsModule } from '../../../../custom-fields/custom-fields.module';
 import { InputNumberModule } from 'primeng/inputnumber';
@@ -41,6 +41,8 @@ export class IndicatorDetailsComponent implements OnInit {
     { icon: '', label: 'Target', value: 'indicator_target', iconClass: 'pi pi-bullseye' }
   ];
 
+  loading = signal<boolean>(true);
+
   constructor(
     public location: Location,
     public api: ApiService,
@@ -91,7 +93,6 @@ export class IndicatorDetailsComponent implements OnInit {
 
   updateIndicatorData(response: any) {
     this.indicatorDetailsService.indicatorData.set(response?.contributionToIndicator);
-    console.log(this.indicatorDetailsService.indicatorData());
     this.indicatorDetailsService.getIndicatorDetailsResults(this.indicatorDetailsService.indicatorData().initiative_official_code);
 
     if (this.outcomeIService.initiativeIdFilter !== this.indicatorDetailsService.indicatorData().initiative_official_code) {
@@ -101,12 +102,12 @@ export class IndicatorDetailsComponent implements OnInit {
         this.outcomeIService.getEOIsData();
       }, 800);
     }
-    this.indicatorDetailsService.loading.set(false);
+    this.loading.set(false);
   }
 
   handleError(error: any) {
     console.error('Error loading initiatives:', error);
-    this.indicatorDetailsService.loading.set(false);
+    this.loading.set(false);
     this.messageService.add({ severity: 'error', summary: 'Error', detail: 'An error occurred', key: 'br' });
   }
 
@@ -118,7 +119,6 @@ export class IndicatorDetailsComponent implements OnInit {
   }
 
   handleSaveIndicatorData() {
-    this.indicatorDetailsService.loading.set(true);
     this.api.resultsSE
       .PATCH_contributionsToIndicators(this.indicatorDetailsService.indicatorData(), this.indicatorDetailsService.indicatorId())
       .subscribe({
@@ -146,7 +146,7 @@ export class IndicatorDetailsComponent implements OnInit {
       return;
     }
 
-    this.indicatorDetailsService.loading.set(true);
+    this.loading.set(true);
 
     this.api.resultsSE
       .PATCH_contributionsToIndicators(this.indicatorDetailsService.indicatorData(), this.indicatorDetailsService.indicatorId())
@@ -181,7 +181,7 @@ export class IndicatorDetailsComponent implements OnInit {
         confirmText: 'Yes, un-submit'
       },
       () => {
-        this.indicatorDetailsService.loading.set(true);
+        this.loading.set(true);
         this.onSubmitIndicator(true);
       }
     );

diff --git a/...app/pages/outcome-indicator/pages/indicator-details/services/indicator-details.service.ts b/...app/pages/outcome-indicator/pages/indicator-details/services/indicator-details.service.ts
@@ -1,5 +1,4 @@
-import { Injectable } from '@angular/core';
-import { signal } from '@angular/core';
+import { Injectable, signal } from '@angular/core';
 import { IndicatorData } from '../models/indicator-data.model';
 import { ResultsApiService } from '../../../../../shared/services/api/results-api.service';
 import { AuthService } from '../../../../../shared/services/api/auth.service';
@@ -11,16 +10,15 @@ export class IndicatorDetailsService {
   indicatorData = signal<IndicatorData>(new IndicatorData());
   indicatorId = signal<string>('');
   platformId = signal<string>('');
-  loading = signal<boolean>(true);
 
   // Modal
   indicatorResultsModal = signal<{ value: boolean }>({ value: false });
   textToSearch = signal<{ value: string }>({ value: '' });
   indicatorResults = signal<any[]>([]);
 
   constructor(
-    private resultsApiService: ResultsApiService,
-    private authSE: AuthService
+    private readonly resultsApiService: ResultsApiService,
+    private readonly authSE: AuthService
   ) {}
 
   getIndicatorDetailsResults(initiativeId: string) {