chore: close button tidying

e-picsa · Feb 28, 2025 · 7154675 · 7154675
1 parent 35a3ff8
commit 7154675
Showing 1 changed file with 15 additions and 5 deletions.
diff --git a/...sa-tools/forecasts-tool/src/app/components/forecast-viewer/forecast-viewer.component.html b/...sa-tools/forecasts-tool/src/app/components/forecast-viewer/forecast-viewer.component.html
@@ -1,18 +1,28 @@
 <div class="text-right">
-  <button mat-button color="primary" class="ml-auto" (click)="closeClicked.emit()">
-    {{ 'Close' | translate }}
-    <mat-icon>close</mat-icon>
-  </button>
+  <!-- Top close button -->
+  @if(!pdfForecastData()){
+  <ng-container *ngTemplateOutlet="closeButton"></ng-container>
+  }
 </div>
 @if(errorMessage(); as errorMessage){
 <div>{{ errorMessage | translate }}</div>
 }
 <!-- PDF -->
 @if(pdfForecastData(); as pdfForecastData){
-<picsa-pdf-viewer [src]="pdfForecastData"> </picsa-pdf-viewer>
+<picsa-pdf-viewer [src]="pdfForecastData">
+  <ng-container *ngTemplateOutlet="closeButton"></ng-container>
+</picsa-pdf-viewer>
 }
 
 <!-- HTML -->
 @if(htmlForecastData(); as htmlForecastData){
 <div class="p-4 overflow-auto" [innerHTML]="htmlForecastData"></div>
 }
+
+<!-- Reusable close button - displayed in pdf viewer or at top of page-->
+<ng-template #closeButton>
+  <button mat-button color="primary" class="ml-auto" (click)="closeClicked.emit()">
+    {{ 'Close' | translate }}
+    <mat-icon>close</mat-icon>
+  </button>
+</ng-template>