update button label on select kpi page

NREL · Nov 19, 2024 · 85f5582 · 85f5582
1 parent ca8b951
commit 85f5582
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/src/app/setup-wizard/pre-visit/company-kpi-select/company-kpi-select.component.html b/src/app/setup-wizard/pre-visit/company-kpi-select/company-kpi-select.component.html
@@ -18,7 +18,12 @@ <h5>
             Go Back
         </button>
         <button class="btn nav-btn btn-sm" (click)="goToKpiDetails()">
-            Detail KPIs
+            <ng-template [ngIf]="companyKpis.length > 0" [ngIfElse]="noKPIsBlock">
+                Detail KPIs
+            </ng-template>
+            <ng-template #noKPIsBlock>
+                Facility Details
+            </ng-template>
             <fa-icon [icon]="faChevronRight"></fa-icon>
         </button>
     </div>

diff --git a/src/app/setup-wizard/pre-visit/company-kpi-select/company-kpi-select.component.ts b/src/app/setup-wizard/pre-visit/company-kpi-select/company-kpi-select.component.ts
@@ -5,6 +5,7 @@ import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
 import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
 import { KeyPerformanceIndicatorsIdbService } from 'src/app/indexed-db/key-performance-indicators-idb.service';
 import { IdbKeyPerformanceIndicator } from 'src/app/models/keyPerformanceIndicator';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-company-kpi-select',
@@ -15,12 +16,27 @@ export class CompanyKpiSelectComponent {
   faChartBar: IconDefinition = faChartBar;
   faChevronRight: IconDefinition = faChevronRight;
   faChevronLeft: IconDefinition = faChevronLeft;
+
+  companyKpiSub: Subscription;
+  companyKpis: Array<IdbKeyPerformanceIndicator>;
+  onSiteVisit: IdbOnSiteVisit;
   constructor(private router: Router,
     private onSiteVisitIdbService: OnSiteVisitIdbService,
     private keyPerformanceIndicatorIdbService: KeyPerformanceIndicatorsIdbService,
   ) { }
 
   ngOnInit() {
+    this.onSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
+    this.companyKpiSub = this.keyPerformanceIndicatorIdbService.keyPerformanceIndicators.subscribe(kpis => {
+      let keyPerformanceIndicators: Array<IdbKeyPerformanceIndicator> = this.keyPerformanceIndicatorIdbService.keyPerformanceIndicators.getValue();
+      this.companyKpis = keyPerformanceIndicators.filter(kpi => {
+        return kpi.companyId == this.onSiteVisit.companyId
+      });
+    });
+  }
+
+  ngOnDestroy(){
+    this.companyKpiSub.unsubscribe();
   }
 
   goBack() {
@@ -29,15 +45,10 @@ export class CompanyKpiSelectComponent {
   }
 
   goToKpiDetails() {
-    let onSiteVisit: IdbOnSiteVisit = this.onSiteVisitIdbService.selectedVisit.getValue();
-    let keyPerformanceIndicators: Array<IdbKeyPerformanceIndicator> = this.keyPerformanceIndicatorIdbService.keyPerformanceIndicators.getValue();
-    let companyKpis: Array<IdbKeyPerformanceIndicator> = keyPerformanceIndicators.filter(kpi => {
-      return kpi.companyId == onSiteVisit.companyId
-    });
-    if (companyKpis.length > 0) {
-      this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/company-kpi-detail/' + companyKpis[0].guid);
+    if (this.companyKpis.length > 0) {
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/company-kpi-detail/' + this.companyKpis[0].guid);
     } else {
-      this.router.navigateByUrl('setup-wizard/pre-visit/' + onSiteVisit.guid + '/facility-setup');
+      this.router.navigateByUrl('setup-wizard/pre-visit/' + this.onSiteVisit.guid + '/facility-setup');
     }
   }
 }