feat/AB#80876-add-geographic-context-in-page

apps/back-office/src/app/components/view-settings-modal/view-settings-modal.component.html

@@ -35,6 +35,15 @@ <h3>{{ 'common.settings' | translate }}</h3>
                 '-mb-4': data.type === 'page'
               }"
             ></app-view-icon-selector>
+            <!-- Features available only for dashboards pages-->
+            <ng-container *ngIf="data.canUpdate && data.type === 'page' && dashboard">
+              <!-- Geographic context  -->
+              <ui-toggle formControlName="geographicContext" class="mb-2">
+                <ng-container ngProjectAs="label">
+                  {{ 'components.application.pages.settings.geographicContext' | translate }}
+                </ng-container>
+              </ui-toggle>
+            </ng-container>
             <!-- Features available only for pages -->
             <ng-container *ngIf="data.type === 'page'">
               <!-- Visibility -->

apps/back-office/src/app/components/view-settings-modal/view-settings-modal.component.ts

@@ -159,6 +159,16 @@ export class ViewSettingsModalComponent
             this.onUpdateVisibility(value);
           }
         });
+
+      if (this.dashboard) {
+        this.settingsForm?.controls.geographicContext?.valueChanges
+          .pipe(takeUntil(this.destroy$))
+          .subscribe((value: boolean | null) => {
+            if (!isNil(value)) {
+              this.onUpdateGeographicContext(value);
+            }
+          });
+      }
     }
 
     if (this.dashboard) {
@@ -257,6 +267,13 @@ export class ViewSettingsModalComponent
       // initializes icon field with data info
       icon: this.fb.control(this.data.icon ?? ''),
       visible: this.fb.control(this.data.visible ?? true),
+      ...(this.dashboard &&
+        this.data.canUpdate &&
+        this.data.type === 'page' && {
+          geographicContext: this.fb.control(
+            this.page?.geographicContext?.enabled ?? false
+          ),
+        }),
       ...(this.dashboard && {
         gridOptions: this.fb.group({
           minCols: this.fb.control(
@@ -371,4 +388,32 @@ export class ViewSettingsModalComponent
     };
     this.dashboardService.editGridOptions(gridOptions, callback);
   }
+
+  /**
+   * Enable/disable dashboard page geographic context on change.
+   *
+   * @param enabled boolean
+   */
+  private onUpdateGeographicContext(enabled: boolean): void {
+    const geographicContext = {
+      ...this.page?.geographicContext,
+      enabled,
+    };
+    const callback = () => {
+      this.page = {
+        ...this.page,
+        geographicContext,
+      };
+      // Updates parent component
+      const updates = { geographicContext };
+      this.onUpdate.emit(updates);
+    };
+    this.applicationService.updatePageGeographicContext(
+      {
+        id: this.page?.id,
+        geographicContext,
+      },
+      callback
+    );
+  }
 }

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

@@ -137,6 +137,7 @@ <h1 class="!m-0 overflow-hidden text-ellipsis">
           'models.dashboard.context.edition.element' | translate
         }}</ui-alert>
       </ng-container>
+      <!-- DATASOURCE CONTEXT -->
       <span>
         <!-- Selection of record, to see dashboard per record -->
         <div
@@ -184,6 +185,43 @@ <h1 class="!m-0 overflow-hidden text-ellipsis">
           </ui-select-menu>
         </div>
       </span>
+      <!-- GEOGRAPHIC CONTEXT -->
+      <span *ngIf="dashboard.page?.geographicContext?.enabled">
+        <!-- Regions -->
+        <div uiFormFieldDirective [outline]="false">
+          <label>{{ 'components.user.summary.region' | translate }}</label>
+          <ui-select-menu
+            (selectedOption)="onSearchChangeGeographicContext($event, 'region')"
+            [filterable]="true"
+            [formControl]="regionCode"
+          >
+            <ui-select-option
+              *ngFor="let region of geographicContextRegions"
+              [value]="region.code"
+            >
+              {{ region.name }}
+            </ui-select-option>
+          </ui-select-menu>
+        </div>
+        <!-- Countries -->
+        <div uiFormFieldDirective [outline]="false">
+          <label>{{ 'components.user.summary.country' | translate }}</label>
+          <ui-select-menu
+            [formControl]="countryCode"
+            (selectedOption)="
+              onSearchChangeGeographicContext($event, 'country')
+            "
+            [filterable]="true"
+          >
+            <ui-select-option
+              *ngFor="let country of geographicContextCountries"
+              [value]="country.code"
+            >
+              {{ country.name }}
+            </ui-select-option>
+          </ui-select-menu>
+        </div>
+      </span>
     </ng-container>
   </ng-container>
   <!-- Widgets -->

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

@@ -28,6 +28,7 @@ import {
   DashboardQueryResponse,
   EditDashboardMutationResponse,
   RecordQueryResponse,
+  PageGeographicContextType,
 } from '@oort-front/shared';
 import { EDIT_DASHBOARD } from './graphql/mutations';
 import {
@@ -54,6 +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 geographicContext from 'assets/geographic-context-data.json';
 
 /** Default number of records fetched per page */
 const ITEMS_PER_PAGE = 10;
@@ -117,6 +119,14 @@ export class DashboardComponent
   public editionActive = true;
   /** Additional grid configuration */
   public gridOptions: GridsterConfig = {};
+  /** Regions static list for geographic context */
+  public geographicContextRegions = geographicContext.regions;
+  /** Countries for geographic context */
+  public geographicContextCountries = geographicContext.countries;
+  /** Geographic context country form control */
+  public countryCode = new FormControl<string | undefined>('');
+  /** Geographic context region form control */
+  public regionCode = new FormControl<string | undefined>('');
 
   /** @returns type of context element */
   get contextType() {
@@ -311,6 +321,17 @@ export class DashboardComponent
             ...this.dashboard?.gridOptions,
             scrollToNewItems: false,
           };
+          if (this.dashboard.page?.geographicContext?.enabled) {
+            this.countryCode.setValue(
+              this.dashboard.page?.geographicContext?.country
+            );
+            this.regionCode.setValue(
+              this.dashboard.page?.geographicContext?.region
+            );
+          } else {
+            this.countryCode.setValue('');
+            this.regionCode.setValue('');
+          }
           this.initContext();
           this.updateContextOptions();
           this.canUpdate =
@@ -849,4 +870,36 @@ export class DashboardComponent
       });
     }
   }
+
+  /**
+   * Update query based on text search.
+   *
+   * @param value value selected
+   * @param geographicType geographic data type
+   */
+  public onSearchChangeGeographicContext(
+    value: string | string[],
+    geographicType: 'region' | 'country'
+  ): void {
+    const geographicContext = {
+      ...this.dashboard?.page?.geographicContext,
+      ...(value && { [geographicType]: value }),
+    };
+    const callback = () => {
+      this.dashboard = {
+        ...this.dashboard,
+        page: {
+          ...this.dashboard?.page,
+          geographicContext: geographicContext as PageGeographicContextType,
+        },
+      };
+    };
+    this.applicationService.updatePageGeographicContext(
+      {
+        id: this.dashboard?.page?.id,
+        geographicContext: geographicContext as PageGeographicContextType,
+      },
+      callback
+    );
+  }
 }

apps/back-office/src/app/dashboard/pages/dashboard/graphql/queries.ts

@@ -37,6 +37,7 @@ export const GET_DASHBOARD_BY_ID = gql`
         context
         content
         contentWithContext
+        geographicContext
       }
       step {
         id

apps/back-office/tsconfig.json

@@ -7,7 +7,8 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": false,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true
   },
   "files": [],
   "include": [],

apps/front-office/src/app/application/pages/dashboard/graphql/queries.ts

@@ -39,6 +39,7 @@ export const GET_DASHBOARD_BY_ID = gql`
         context
         content
         contentWithContext
+        geographicContext
       }
     }
   }

apps/web-widgets/src/app/widgets/app-widget/application/pages/dashboard/graphql/queries.ts

@@ -38,6 +38,7 @@ export const GET_DASHBOARD_BY_ID = gql`
         context
         content
         contentWithContext
+        geographicContext
       }
     }
   }