Popover de campos desabilitados

src/app/simulator/access-and-offer/enrollment-by-stage-series/enrollment-by-stage-series.component.html

@@ -20,7 +20,11 @@
                         projection.sourceInformations[0].indice : ''}})</sup></th>
                     <th>Oferta atual <sup>({{projection.sourceInformations ? projection.sourceInformations[1].indice :
                         ''}})</sup></th>
-                    <th [colSpan]="data.years.length">Projeção da oferta</th>
+                    <th [colSpan]="data.years.length">
+                      <span [class.projection-title]="disabledData" [popover]="popoverText" placement="bottom"
+                        container="body" [triggers]="popoverTriggers" [isOpen]="disabledData"
+                        containerClass="popover-simcaq result">Projeção da oferta</span>
+                    </th>
                   </tr>
                   <tr>
                     <th>{{data.offerYear}}</th>
@@ -60,7 +64,7 @@
                           [(ngModel)]="enrollment.quantity" (keyup)="calculateTotals(projection)" maxlength="13"
                           currencyMask
                           [options]="{ prefix: '', align: 'right', precision: 0, thousands: '.', decimal: ',' }"
-                          [disabled]="disableOfferProjection()">
+                          [disabled]="disabledData">
 
                         <input type="text" disabled class="form-control enrollment-quantity"
                           *ngIf="!showEnrollmentQuantity(projection.periods[0], stageEnrollments.id)">

src/app/simulator/access-and-offer/enrollment-by-stage-series/enrollment-by-stage-series.component.scss

@@ -9,6 +9,10 @@
     min-width: 70px;
 }
 
+.projection-title {
+    cursor: pointer;
+}
+
 .relative-projection {
     background-color: #ebf0f3;
     font-weight: bold;

src/app/simulator/access-and-offer/enrollment-by-stage-series/enrollment-by-stage-series.component.ts

-import { Component, Injector } from '@angular/core';
+import { Component, Injector, OnInit } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { takeUntil, debounceTime } from 'rxjs/operators';
 
@@ -19,11 +19,15 @@ import { SelectLocation } from 'app/simulator/select-location/entities/select-lo
   templateUrl: './enrollment-by-stage-series.component.html',
   styleUrls: ['./enrollment-by-stage-series.component.scss']
 })
-export class EnrollmentByStageSeriesComponent extends BaseNavigableComponent<EnrollmentByStageSeries> {
+export class EnrollmentByStageSeriesComponent extends BaseNavigableComponent<EnrollmentByStageSeries> implements OnInit {
 
   data: EnrollmentByStageSeries = new EnrollmentByStageSeries();
   functionality: FunctionalityInfo = Functionality.enrollmentByStageAndSeries;
   inconsistencies: Array<Inconsistency>;
+  disabledData: boolean = true;
+  popoverTriggers: string;
+  popoverText: string = 'Esses parâmetros só podem ser alterados para simulações em nível municipal. ' +
+    'Para simulações em nível nacional ou estadual, são apresentados resultados dos valores municipais agregados internamente pelo simulador.';
 
   private calculateTotalsSubject: Subject<Projection> = new Subject<Projection>();
   private calculateTotalsObserver: Observable<Projection> = this.calculateTotalsSubject.asObservable();
@@ -32,6 +36,11 @@ export class EnrollmentByStageSeriesComponent extends BaseNavigableComponent<Enr
     super(injector);
   }
 
+  ngOnInit(): void {
+    super.ngOnInit();
+    this.processDisabledData();
+  }
+
   processData(): Observable<EnrollmentByStageSeries> {
     return this.enrollmentByStageSeriesService.getData();
   }
@@ -76,9 +85,12 @@ export class EnrollmentByStageSeriesComponent extends BaseNavigableComponent<Enr
     return period !== Period.nocturnal || (stage !== nursery && stage !== preSchool);
   }
 
-  disableOfferProjection(): boolean {
-
-    return (this.sessionService.getItem<SelectLocation>(Functionality.selectLocation.key).selectedCity === undefined) ? true : false;
+  processDisabledData(): void {
+    const selectLocationData: SelectLocation = this.sessionService.getItem<SelectLocation>(Functionality.selectLocation.key);
+    this.disabledData = !selectLocationData || !selectLocationData.selectedCity;
 
+    if (this.disabledData) {
+      this.popoverTriggers = 'mouseenter:mouseleave';
+    }
   }
 }