Issue 264: Maintenance Cost KPI

src/app/setup-wizard/data-collection/on-site-assessment/neb-forms-accordion/neb-setup-form/performance-metric-impact-form/performance-metric-impact-form.component.html

@@ -53,12 +53,13 @@
                 </div>
             </div>
         </div>
+        <div class="form-block">
+            <app-kpm-details-form [keyPerformanceMetric]="keyPerformanceMetric"
+                [disableForm]="(metricHasOtherImpacts && !overrideBaseline)" (emitSave)="savePerformanceMetric()"
+                (emitCalculate)="calculateCostFromKPM($event)" [context]="'onSite'"></app-kpm-details-form>
 
-        <ng-template [ngIf]="keyPerformanceMetric.isQuantitative" [ngIfElse]="qualitativeMetricBlock">
-            <div class="form-block">
-                <app-kpm-details-form [keyPerformanceMetric]="keyPerformanceMetric"
-                    [disableForm]="(metricHasOtherImpacts && !overrideBaseline)" (emitSave)="savePerformanceMetric()"
-                    (emitCalculate)="calculateCost()" [context]="'onSite'"></app-kpm-details-form>
+
+            <ng-template [ngIf]="keyPerformanceMetric.isQuantitative">
                 <div class="row">
                     <label class="col-sm-6 col-form-label" for="modificationValue">
                         Impact on KPM
@@ -111,13 +112,8 @@
                         </ng-template>
                     </div>
                 </div>
-            </div>
-        </ng-template>
-        <ng-template #qualitativeMetricBlock>
-            <div class="alert alert-info small">
-                Quantitative results unavailable at this time.
-            </div>
-        </ng-template>
+            </ng-template>
+        </div>
     </div>
 </ng-template>
 <ng-template #missingMetricBlock>

src/app/setup-wizard/data-collection/on-site-assessment/neb-forms-accordion/neb-setup-form/performance-metric-impact-form/performance-metric-impact-form.component.ts

@@ -83,6 +83,14 @@ export class PerformanceMetricImpactFormComponent {
     await this.keyPerformanceMetricImpactIdbService.asyncUpdate(this.keyPerformanceMetricImpact);
   }
 
+  calculateCostFromKPM(kpmChanges: {modifiedMethod: boolean, updateBaseline: boolean}){
+    if(kpmChanges.modifiedMethod){
+      this.keyPerformanceMetricImpact.modificationValue = undefined;
+    }
+    this.calculateCost();
+  }
+
+
   calculateCost() {
     if (this.keyPerformanceMetric.calculationMethod == 'costPerUnit') {
       this.keyPerformanceMetricImpact.costAdjustment = (this.keyPerformanceMetricImpact.modificationValue * this.keyPerformanceMetric.costPerValue);

src/app/setup-wizard/pre-visit/company-kpi-details/company-kpi-details.component.html

@@ -95,10 +95,34 @@ <h6>
                                 Associated Key Performance Metrics
                             </div>
                             <div>
-                                <button class="btn btn-outline-metric btn-sm" (click)="addPerformanceMetric()">
-                                    <fa-icon [icon]="faPlus"></fa-icon>
-                                    Add New Metric
-                                </button>
+                                <ng-template [ngIf]="keyPerformanceIndicator.optionValue != 'other'"
+                                    [ngIfElse]="customAddBlock">
+                                    <div class="dropdown">
+                                        <button class="btn btn-outline-metric btn-sm dropdown-toggle" type="button"
+                                            data-bs-toggle="dropdown" aria-expanded="false"
+                                            (click)="toggleAddMetricDropdown()">
+                                            <fa-icon [icon]="faPlus"></fa-icon> Add Performance Metric
+                                        </button>
+                                        <ul class="dropdown-menu" [ngClass]="{'show': showAddMetricDropdown}">
+                                            <li>
+                                                <a class="dropdown-item" (click)="addPerformanceMetric()">
+                                                    <fa-icon [icon]="faPlus"></fa-icon> Add Custom Performance Metric
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a class="dropdown-item" (click)="showSuggestedMetrics()">
+                                                    <fa-icon [icon]="faSearchPlus"></fa-icon> Search Performance Metric
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </ng-template>
+                                <ng-template #customAddBlock>
+                                    <button class="btn btn-outline-metric btn-sm" (click)="addPerformanceMetric()">
+                                        <fa-icon [icon]="faPlus"></fa-icon>
+                                        Add Custom Performance Metric
+                                    </button>
+                                </ng-template>
                             </div>
                         </div>
                     </h6>
@@ -244,4 +268,8 @@ <h6>
                 KPM</button>
         </div>
     </ng-template>
-</div>
+</div>
+
+
+<app-kpm-database-modal *ngIf="displayAddMetricModal" (emitClose)="closeSuggestedMetrics()"
+    [keyPerformanceIndicator]="keyPerformanceIndicator" (emitAddMetrics)="addMetrics($event)"></app-kpm-database-modal>

src/app/setup-wizard/pre-visit/company-kpi-details/company-kpi-details.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { IconDefinition, faBullseye, faChartBar, faChevronLeft, faChevronRight, faCircleQuestion, faClose, faContactBook, faPlus, faScaleUnbalancedFlip, faTrash, faUser } from '@fortawesome/free-solid-svg-icons';
+import { IconDefinition, faBullseye, faChartBar, faChevronLeft, faChevronRight, faCircleQuestion, faClose, faContactBook, faPlus, faScaleUnbalancedFlip, faSearchPlus, faTrash, faUser } from '@fortawesome/free-solid-svg-icons';
 import { IdbOnSiteVisit } from 'src/app/models/onSiteVisit';
 import { OnSiteVisitIdbService } from 'src/app/indexed-db/on-site-visit-idb.service';
 import { CompanyIdbService } from 'src/app/indexed-db/company-idb.service';
@@ -30,6 +30,7 @@ export class CompanyKpiDetailsComponent {
   faContactBook: IconDefinition = faContactBook;
   faClose: IconDefinition = faClose;
   faTrash: IconDefinition = faTrash;
+  faSearchPlus: IconDefinition = faSearchPlus;
 
   keyPerformanceIndicator: IdbKeyPerformanceIndicator;
   primaryKPIs: Array<PrimaryKPI> = PrimaryKPIs;
@@ -61,6 +62,9 @@ export class CompanyKpiDetailsComponent {
 
   timeOptions: Array<string> = ['day', 'week', 'month', 'year'];
   dropdownMenuGuid: string;
+
+  displayAddMetricModal: boolean = false;
+  showAddMetricDropdown: boolean = false;
   constructor(private router: Router,
     private onSiteVisitIdbService: OnSiteVisitIdbService,
     private keyPerformanceIndicatorIdbService: KeyPerformanceIndicatorsIdbService,
@@ -90,6 +94,7 @@ export class CompanyKpiDetailsComponent {
       let kpiGuid: string = params['id'];
       this.keyPerformanceIndicator = this.keyPerformanceIndicatorIdbService.getByGuid(kpiGuid);
       this.setIndexValues();
+      this.showAddMetricDropdown = false;
     });
   }
 
@@ -172,6 +177,9 @@ export class CompanyKpiDetailsComponent {
   }
 
   addPerformanceMetric() {
+    if (this.showAddMetricDropdown) {
+      this.showAddMetricDropdown = false;
+    }
     let newCustomKPM: KeyPerformanceMetric = getCustomKPM(this.keyPerformanceIndicator.optionValue, this.keyPerformanceIndicator.guid);
     this.keyPerformanceIndicator.performanceMetrics.unshift(newCustomKPM);
     this.saveChanges();
@@ -211,4 +219,27 @@ export class CompanyKpiDetailsComponent {
       this.dropdownMenuGuid = undefined;
     }
   }
+
+  toggleAddMetricDropdown() {
+    this.showAddMetricDropdown = !this.showAddMetricDropdown;
+  }
+
+  showSuggestedMetrics() {
+    if (this.showAddMetricDropdown) {
+      this.showAddMetricDropdown = false;
+    }
+    this.displayAddMetricModal = true;
+  }
+
+  closeSuggestedMetrics() {
+    this.displayAddMetricModal = false;
+  }
+
+  addMetrics(metrics: Array<KeyPerformanceMetric>) {
+    metrics.forEach(metric => {
+      this.keyPerformanceIndicator.performanceMetrics.unshift(metric);
+    })
+    this.saveChanges();
+  }
+
 }

src/app/setup-wizard/pre-visit/company-kpi-details/kpm-database-modal/kpm-database-modal.component.css

@@ -0,0 +1,3 @@
+.popup-header{
+    font-weight: normal;
+}

src/app/setup-wizard/pre-visit/company-kpi-details/kpm-database-modal/kpm-database-modal.component.html

@@ -0,0 +1,45 @@
+<div [ngClass]="{'window-overlay': displayModal}"></div>
+<div class="popup" [ngClass]="{'open': displayModal }">
+    <div class="popup-header">KPMs Typically Associated With
+        <span class="bold" [innerHTML]="keyPerformanceIndicator.htmlLabel"></span>
+        <button type="button" class="btn-close float-end" aria-label="Close" (click)="closeModal()"></button>
+    </div>
+    <div class="popup-body">
+        <ng-template [ngIf]="keyPerformanceMetricOptions.length > 0" [ngIfElse]="noOptionsBlock">
+            <table class="table table-bordered table-hover table-sm">
+                <tbody>
+                    <tr class="clickable" (click)="toggleMetric(performanceMetric)"
+                        *ngFor="let performanceMetric of keyPerformanceMetricOptions">
+                        <td class="add-td text-center">
+                            <a class="click-link">
+                                <ng-template [ngIf]="addMetricValues.includes(performanceMetric.value)"
+                                    [ngIfElse]="addMetricBlock">
+                                    <fa-icon [icon]="faCheck"></fa-icon>
+                                </ng-template>
+                                <ng-template #addMetricBlock>
+                                    <fa-icon [icon]="faPlus"></fa-icon>
+                                </ng-template>
+                            </a>
+                        </td>
+                        <td>
+                            <span [innerHTML]="performanceMetric.htmlLabel"></span>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </ng-template>
+        <ng-template #noOptionsBlock>
+            <div class="alert alert-info">
+                All metrics in our system that are associated with <span class="bold"
+                    [innerHTML]="keyPerformanceIndicator.htmlLabel"></span> are being tracked.
+            </div>
+        </ng-template>
+        <hr>
+    </div>
+    <div class="popup-footer d-flex justify-content-end">
+        <button class="btn btn-secondary btn-sm me-2" (click)="closeModal()">Cancel</button>
+        <button class="btn btn-sm btn-success" (click)="addMetrics()" [disabled]="addMetricValues.length == 0"><fa-icon
+                [icon]="faPlus"></fa-icon> Add {{addMetricValues.length}}
+            Metrics</button>
+    </div>
+</div>

src/app/setup-wizard/pre-visit/company-kpi-details/kpm-database-modal/kpm-database-modal.component.spec.ts

@@ -0,0 +1,34 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KpmDatabaseModalComponent } from './kpm-database-modal.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { getNewKeyPerformanceIndicator } from 'src/app/models/keyPerformanceIndicator';
+import { KeyPerformanceIndicatorOption } from 'src/app/shared/constants/keyPerformanceIndicatorOptions';
+
+describe('KpmDatabaseModalComponent', () => {
+  let component: KpmDatabaseModalComponent;
+  let fixture: ComponentFixture<KpmDatabaseModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FontAwesomeModule],
+      declarations: [KpmDatabaseModalComponent]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(KpmDatabaseModalComponent);
+    component = fixture.componentInstance;
+    let tmpIndicatorOption: KeyPerformanceIndicatorOption = {
+      primaryKPI: 'Operations',
+      label: '',
+      htmlLabel: '',
+      optionValue: 'chemicalEmissions'
+    }
+    component.keyPerformanceIndicator = getNewKeyPerformanceIndicator('', '', tmpIndicatorOption, false)
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/setup-wizard/pre-visit/company-kpi-details/kpm-database-modal/kpm-database-modal.component.ts

@@ -0,0 +1,71 @@
+import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { faCheck, faPlus, IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { IdbKeyPerformanceIndicator } from 'src/app/models/keyPerformanceIndicator';
+import { getPerformanceMetrics, KeyPerformanceMetric, KeyPerformanceMetricValue } from 'src/app/shared/constants/keyPerformanceMetrics';
+
+@Component({
+  selector: 'app-kpm-database-modal',
+  templateUrl: './kpm-database-modal.component.html',
+  styleUrl: './kpm-database-modal.component.css'
+})
+export class KpmDatabaseModalComponent {
+  @Output('emitClose')
+  emitClose: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Input({ required: true })
+  keyPerformanceIndicator: IdbKeyPerformanceIndicator;
+  @Output()
+  emitAddMetrics: EventEmitter<Array<KeyPerformanceMetric>> = new EventEmitter<Array<KeyPerformanceMetric>>();
+
+  faPlus: IconDefinition = faPlus;
+  faCheck: IconDefinition = faCheck;
+  displayModal: boolean = false;
+
+  keyPerformanceMetricOptions: Array<KeyPerformanceMetric>;
+  addMetricValues: Array<KeyPerformanceMetricValue> = [];
+  constructor(private cd: ChangeDetectorRef) {
+
+  }
+
+  ngOnInit() {
+    let currentTrackedMetrics: Array<KeyPerformanceMetricValue> = this.keyPerformanceIndicator.performanceMetrics.flatMap(metric => {
+      return metric.value;
+    })
+
+    this.keyPerformanceMetricOptions = new Array();
+
+    let tmpKeyPerformanceMetricOptions: Array<KeyPerformanceMetric> = getPerformanceMetrics(this.keyPerformanceIndicator.optionValue, this.keyPerformanceIndicator.guid)
+    tmpKeyPerformanceMetricOptions.forEach(option => {
+      if (currentTrackedMetrics.includes(option.value) == false) {
+        this.keyPerformanceMetricOptions.push(option);
+      }
+    });
+  }
+
+  ngAfterViewInit() {
+    this.displayModal = true;
+    this.cd.detectChanges();
+  }
+
+  closeModal() {
+    this.displayModal = false;
+    this.emitClose.emit(true);
+  }
+
+  toggleMetric(keyPerformanceMetric: KeyPerformanceMetric) {
+    if (this.addMetricValues.includes(keyPerformanceMetric.value)) {
+      this.addMetricValues = this.addMetricValues.filter(value => {
+        return value != keyPerformanceMetric.value
+      });
+    } else {
+      this.addMetricValues.push(keyPerformanceMetric.value);
+    }
+  }
+
+  addMetrics() {
+    let metricsToAdd: Array<KeyPerformanceMetric> = this.keyPerformanceMetricOptions.filter(option => {
+      return this.addMetricValues.includes(option.value)
+    })
+    this.emitAddMetrics.emit(metricsToAdd);
+    this.closeModal();
+  }
+}

src/app/setup-wizard/setup-wizard.module.ts

@@ -62,6 +62,7 @@ import { SetupWizardHelpPanelModule } from './setup-wizard-help-panel/setup-wiza
 import { LabelWithTooltipModule } from '../shared/label-with-tooltip/label-with-tooltip.module';
 import { KpmDetailsFormModule } from '../shared/kpm-details-form/kpm-details-form.module';
 import { KpiDescriptionPipe } from './pre-visit/company-kpi-details/kpi-description.pipe';
+import { KpmDatabaseModalComponent } from './pre-visit/company-kpi-details/kpm-database-modal/kpm-database-modal.component';
 
 @NgModule({
   declarations: [
@@ -114,7 +115,8 @@ import { KpiDescriptionPipe } from './pre-visit/company-kpi-details/kpi-descript
     KpmImpactsTableComponent,
     EnergyOpportunityNebsTableComponent,
     EnergyOpportunityNebsListPipe,
-    KpiDescriptionPipe
+    KpiDescriptionPipe,
+    KpmDatabaseModalComponent
   ],
   imports: [
     CommonModule,

src/app/shared/constants/keyPerformanceIndicatorOptions.ts

@@ -19,6 +19,7 @@ export type KeyPerformanceIndicatorValue =
     'improveSpaceUtilization' |
     'employeeEngagementWorkforceDevelopment' |
     'employeeEngagementWorkingEnvironment' | 
+    'maintenanceExpense' |
     'other';
 
 export interface KeyPerformanceIndicatorOption {
@@ -67,8 +68,8 @@ export const KeyPerformanceIndicatorOptions: Array<KeyPerformanceIndicatorOption
     },
     {
         primaryKPI: 'Operations',
-        label: 'Reduce Expense Cost',
-        htmlLabel: 'Reduce Expense Cost',
+        label: 'Expense Cost',
+        htmlLabel: 'Expense Cost',
         optionValue: 'reduceExpenseCost'
     },
     {
@@ -137,4 +138,10 @@ export const KeyPerformanceIndicatorOptions: Array<KeyPerformanceIndicatorOption
         htmlLabel: 'Employee Engagement - Workforce Development',
         optionValue: 'employeeEngagementWorkforceDevelopment'
     },
+    {
+        primaryKPI: 'Operations',
+        label: 'Maintenance Expense',
+        htmlLabel: 'Maintenance Expense',
+        optionValue: 'maintenanceExpense'
+    },
 ]