feat/AB#80876-add-geographic-context-in-page refactor: region and country assignation in the html template without the $any cast refactor: move region list to the countries.json file in order to keep all geographic context related in the same place. Renamed countries.json file to geographic-context-data.json

Author: unai-reliefapp

apps/back-office/src/app/dashboard/pages/dashboard/dashboard.component.html

@@ -189,11 +189,9 @@ <h1 class="!m-0 overflow-hidden text-ellipsis">
       <span *ngIf="dashboard.page?.geographicContext?.enabled">
         <!-- Regions -->
         <div uiFormFieldDirective [outline]="false">
-          <label>{{
-            'components.user.summary.region' | translate
-          }}</label>
+          <label>{{ 'components.user.summary.region' | translate }}</label>
           <ui-select-menu
-            (selectedOption)="onSearchChangeGeographicContext({ region: $any($event) })"
+            (selectedOption)="onSearchChangeGeographicContext($event, 'region')"
             [filterable]="true"
             [formControl]="regionCode"
           >
@@ -207,12 +205,12 @@ <h1 class="!m-0 overflow-hidden text-ellipsis">
         </div>
         <!-- Countries -->
         <div uiFormFieldDirective [outline]="false">
-          <label>{{
-            'components.user.summary.country' | translate
-          }}</label>
-          <ui-select-menu 
+          <label>{{ 'components.user.summary.country' | translate }}</label>
+          <ui-select-menu
             [formControl]="countryCode"
-            (selectedOption)="onSearchChangeGeographicContext({ country: $any($event) })"
+            (selectedOption)="
+              onSearchChangeGeographicContext($event, 'country')
+            "
             [filterable]="true"
           >
             <ui-select-option

apps/back-office/src/app/dashboard/pages/dashboard/dashboard.component.ts

@@ -55,7 +55,7 @@ import { ContextService, CustomWidgetStyleComponent } from '@oort-front/shared';
 import { DOCUMENT } from '@angular/common';
 import { Clipboard } from '@angular/cdk/clipboard';
 import { GridsterConfig } from 'angular-gridster2';
-import countries from 'assets/countries.json';
+import geographicContext from 'assets/geographic-context-data.json';
 
 /** Default number of records fetched per page */
 const ITEMS_PER_PAGE = 10;
@@ -120,38 +120,9 @@ export class DashboardComponent
   /** Additional grid configuration */
   public gridOptions: GridsterConfig = {};
   /** Regions static list for geographic context */
-  public geographicContextRegions = [
-    {
-      code: 'AF',
-      name: 'AFRO',
-    },
-    {
-      code: 'AM',
-      name: 'AMRO',
-    },
-    {
-      code: 'EM',
-      name: 'EMRO',
-    },
-    {
-      code: 'EU',
-      name: 'EURO',
-    },
-    {
-      code: 'SE',
-      name: 'SEARO',
-    },
-    {
-      code: 'WP',
-      name: 'WPRO',
-    },
-    {
-      code: 'HQ',
-      name: 'HQ',
-    },
-  ];
+  public geographicContextRegions = geographicContext.regions;
   /** Countries for geographic context */
-  public geographicContextCountries = countries;
+  public geographicContextCountries = geographicContext.countries;
   /** Geographic context country form control */
   public countryCode = new FormControl<string | undefined>('');
   /** Geographic context region form control */
@@ -903,18 +874,16 @@ export class DashboardComponent
   /**
    * Update query based on text search.
    *
-   * @param update values to update in the page geographicContext
-   * @param update.region region selected
-   * @param update.country country selected
+   * @param value value selected
+   * @param geographicType geographic data type
    */
-  public onSearchChangeGeographicContext(update: {
-    region?: string;
-    country?: string;
-  }): void {
+  public onSearchChangeGeographicContext(
+    value: string | string[],
+    geographicType: 'region' | 'country'
+  ): void {
     const geographicContext = {
       ...this.dashboard?.page?.geographicContext,
-      ...(update.region && { region: update.region }),
-      ...(update.country && { country: update.country }),
+      ...(value && { [geographicType]: value }),
     };
     const callback = () => {
       this.dashboard = {