Feat/forecasts page

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 yarn lint-staged

apps/picsa-tools/climate-tool/src/app/pages/forecast/forecast.page.html

@@ -7,22 +7,13 @@
     }
   </div>
 
-  <div class="card-container">
-    <mat-card class="mat-card" (click)="openAnnualForeCast()">
-      <mat-card-header>
-        <div>{{'Annual Forecast' | translate}}</div>
-      </mat-card-header>
-      <mat-card-content class="card-content">
-        <mat-icon>assessment</mat-icon>
-      </mat-card-content>
-    </mat-card>
-    <mat-card class="mat-card" (click)="openAnnualForeCast()">
-      <mat-card-header>
-        <div>{{'Downscaled Forecast' | translate}}</div>
-      </mat-card-header>
-      <mat-card-content class="card-content">
-        <mat-icon>map</mat-icon>
-      </mat-card-content>
-    </mat-card>
-  </div>
+  <h2>{{'Seasonal Forecast' | translate}}</h2>
+  @for(forecast of seasonalForecasts(); track forecast.id){
+  <resource-item-file [resource]="forecast"></resource-item-file>
+  }
+
+  <h2>{{'Downscaled Forecasts' | translate}}</h2>
+  @for(forecast of downscaledForecasts(); track forecast.id){
+  <mat-card>{{forecast.title}}</mat-card>
+  }
 </div>

apps/picsa-tools/climate-tool/src/app/pages/forecast/forecast.page.scss

@@ -1,25 +1,3 @@
-.card-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  gap: 48px;
-  flex-wrap: wrap;
-}
-
-.mat-card {
-  min-width: 200px;
-  display: flex;
-  cursor: pointer;
-  justify-content: center;
-  align-items: center;
-}
-.card-content {
-  display: flex;
-  padding: 1rem;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-}
 .pdf-container {
   position: fixed;
   z-index: 2;

apps/picsa-tools/climate-tool/src/app/pages/forecast/forecast.page.ts

@@ -1,8 +1,12 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { Component, effect, signal } from '@angular/core';
+import { ConfigurationService } from '@picsa/configuration';
+import { ICountryCode } from '@picsa/data';
+import { ResourcesComponentsModule } from '@picsa/resources/src/app/components/components.module';
+import { IResourceFile } from '@picsa/resources/src/app/schemas';
 import { PdfViewerComponent } from '@picsa/shared/features';
 import { PicsaTranslateModule } from '@picsa/shared/modules';
+import { SupabaseStorageService } from '@picsa/shared/services/core/supabase/services/supabase-storage.service';
 
 import { ClimateToolComponentsModule } from '../../components/climate-tool-components.module';
 
@@ -11,13 +15,37 @@ import { ClimateToolComponentsModule } from '../../components/climate-tool-compo
   templateUrl: './forecast.page.html',
   styleUrls: ['./forecast.page.scss'],
   standalone: true,
-  imports: [CommonModule, ClimateToolComponentsModule, PicsaTranslateModule, PdfViewerComponent],
+  imports: [
+    CommonModule,
+    ClimateToolComponentsModule,
+    PicsaTranslateModule,
+    PdfViewerComponent,
+    ResourcesComponentsModule,
+  ],
 })
 export class ClimateForecastComponent {
   forecastTypes = ['Annual', 'Downscaled'];
   public page = 1;
   public pdfSrc?: string;
-  constructor(private route: ActivatedRoute) {}
+
+  public seasonalForecasts = signal<IResourceFile[]>([]);
+
+  public downscaledForecasts = signal<IResourceFile[]>([]);
+
+  constructor(private configurationService: ConfigurationService, private storageService: SupabaseStorageService) {
+    effect(
+      () => {
+        const { country_code } = this.configurationService.deploymentSettings();
+        this.loadForecasts(country_code);
+      },
+      { allowSignalWrites: true }
+    );
+  }
+
+  private loadForecasts(country_code: ICountryCode) {
+    // TODO
+  }
+
   // ngOnInit() {}
   openAnnualForeCast() {
     this.pdfSrc = '/assets/forecast-assets/forecastDoc.pdf';