Merge branch 'bcgov:main' into wfprev-484

Author: yzlucas

client/wfprev-war/src/main/angular/src/app/components/edit-project/activities/activities.component.html

@@ -98,7 +98,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="form-item three-columns" *ngIf="projectTypeCode ==='FUEL_MGMT'">
+                        <div class="form-item three-columns">
                             <label>Activity Base
                                 <span class="required" *ngIf="activityForms[i]?.value?.isResultsReportableInd">*</span>
                             </label>

client/wfprev-war/src/main/angular/src/app/components/search-filter/search-filter.component.html

@@ -20,7 +20,7 @@
     <div class="field search-input filter-search-input">
       <mat-label class="label">Business Area</mat-label>
       <mat-form-field appearance="fill" class="filter-item">
-        <mat-select [(ngModel)]="selectedBusinessArea" placeholder="Select"
+        <mat-select [(ngModel)]="selectedBusinessArea" placeholder="Select" [panelClass]="'filter-dropdown'"
           (selectionChange)="onOptionToggled($event,'selectedBusinessArea', businessAreaOptions)"
           multiple>
         <mat-option *ngFor="let option of businessAreaOptions" [value]="option.value" (onSelectionChange)="syncAllWithItemToggle($event, option.value, 'selectedBusinessArea', businessAreaOptions)">
@@ -33,7 +33,7 @@
     <div class="field search-input filter-search-input">
       <mat-label class="label">Fiscal Year(s)</mat-label>
       <mat-form-field appearance="fill" class="filter-item">
-        <mat-select [(ngModel)]="selectedFiscalYears" placeholder="Select"
+        <mat-select [(ngModel)]="selectedFiscalYears" placeholder="Select" [panelClass]="'filter-dropdown'"
                     (selectionChange)="onOptionToggled($event,'selectedFiscalYears', fiscalYearOptions)"
                     multiple>
           <mat-option *ngFor="let option of fiscalYearOptions" [value]="option.value" (onSelectionChange)="syncAllWithItemToggle($event, option.value, 'selectedFiscalYears', fiscalYearOptions)">
@@ -46,7 +46,7 @@
     <div class="field search-input filter-search-input">
       <mat-label class="label">Activity Category</mat-label>
       <mat-form-field appearance="fill" class="filter-item">
-        <mat-select [(ngModel)]="selectedActivity" placeholder="Select"
+        <mat-select [(ngModel)]="selectedActivity" placeholder="Select" [panelClass]="'filter-dropdown'"
                     (selectionChange)="onOptionToggled($event,'selectedActivity', activityOptions)"
                     multiple>
           <mat-option *ngFor="let option of activityOptions" [value]="option.value" (onSelectionChange)="syncAllWithItemToggle($event, option.value, 'selectedActivity', activityOptions)">
@@ -59,7 +59,7 @@
     <div class="field search-input filter-search-input">
       <mat-label class="label">Forest Region</mat-label>
       <mat-form-field appearance="fill" class="filter-item">
-        <mat-select [(ngModel)]="selectedForestRegion" placeholder="Select"
+        <mat-select [(ngModel)]="selectedForestRegion" placeholder="Select" [panelClass]="'filter-dropdown'"
                     (ngModelChange)="onForestRegionChange()"
                     (selectionChange)="onOptionToggled($event,'selectedForestRegion', forestRegionOptions)"
                     multiple>
@@ -73,7 +73,7 @@
     <div class="field search-input filter-search-input">
       <mat-label class="label">Forest District</mat-label>
       <mat-form-field appearance="fill" class="filter-item">
-        <mat-select [(ngModel)]="selectedForestDistrict" placeholder="Select"
+        <mat-select [(ngModel)]="selectedForestDistrict" placeholder="Select" [panelClass]="'filter-dropdown'"
                     (selectionChange)="onOptionToggled($event,'selectedForestDistrict', forestDistrictOptions)"
                     multiple>
           <mat-option *ngFor="let option of forestDistrictOptions" [value]="option.value" (onSelectionChange)="syncAllWithItemToggle($event, option.value, 'selectedForestDistrict', forestDistrictOptions)">
@@ -86,7 +86,7 @@
     <div class="field search-input filter-search-input">
       <mat-label class="label">Fire Centre</mat-label>
       <mat-form-field appearance="fill" class="filter-item">
-        <mat-select [(ngModel)]="selectedFireCentre" placeholder="Select"
+        <mat-select [(ngModel)]="selectedFireCentre" placeholder="Select" [panelClass]="'filter-dropdown'"
                     (selectionChange)="onOptionToggled($event,'selectedFireCentre', fireCentreOptions)"
                     multiple>
           <mat-option *ngFor="let option of fireCentreOptions" [value]="option.value" (onSelectionChange)="syncAllWithItemToggle($event, option.value, 'selectedFireCentre', fireCentreOptions)">
@@ -99,7 +99,7 @@
     <div class="field search-input filter-search-input">
       <mat-label class="label">Fiscal Status</mat-label>
       <mat-form-field appearance="fill" class="filter-item">
-        <mat-select [(ngModel)]="selectedFiscalStatus" placeholder="Select"
+        <mat-select [(ngModel)]="selectedFiscalStatus" placeholder="Select" [panelClass]="'filter-dropdown'"
                     (selectionChange)="onOptionToggled($event,'selectedFiscalStatus', fiscalStatusOptions)"
                     multiple>
           <mat-option *ngFor="let option of fiscalStatusOptions" [value]="option.value" (onSelectionChange)="syncAllWithItemToggle($event, option.value, 'selectedFiscalStatus', fiscalStatusOptions)">

client/wfprev-war/src/main/angular/src/app/components/search-filter/search-filter.component.scss

@@ -1,3 +1,17 @@
+::ng-deep .filter-dropdown .mat-pseudo-checkbox {
+  margin-top: 1.2rem;
+  align-self: baseline; 
+}
+
+::ng-deep .filter-dropdown .mat-mdc-option {
+  align-items: flex-start !important; 
+}
+
+::ng-deep .filter-dropdown .mdc-list-item__primary-text {
+  margin-top: 1rem !important;
+  white-space: normal !important; 
+}
+
 .search-filter-bar {
   padding: 5px;
   background-color: white;
@@ -91,4 +105,4 @@
 ::ng-deep .mdc-text-field--outlined .mat-mdc-form-field-infix,
 ::ng-deep .mdc-text-field--no-label .mat-mdc-form-field-infix {
   padding-top: 10px !important;
-}
+}

client/wfprev-war/src/main/angular/src/app/components/shared-layout/app-header/app-header.component.ts

@@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { CommonModule } from '@angular/common';
 import { TokenService } from 'src/app/services/token.service';
 import { AppConfigService } from 'src/app/services/app-config.service';
+import { EnvironmentIndicators } from 'src/app/utils/constants';
 
 @Component({
   selector: 'wfprev-app-header',
@@ -32,6 +33,7 @@ export class AppHeaderComponent implements OnInit {
   environment: string = ''
   title: string = 'PREVENTION'
   currentUser: string = 'User_1'
+  readonly EnvironmentIndicators = EnvironmentIndicators;
 
   ngOnInit(): void {
     this.tokenService.credentialsEmitter.subscribe(() => {
@@ -44,7 +46,7 @@ export class AppHeaderComponent implements OnInit {
     // Display no environment indicator in prod
     // Case sensitive checking, set the variable as upper case 
     const env = (this.appConfigService.getConfig()?.application?.environment || '').toUpperCase();
-    this.environment = env === 'PROD' ? '' : env;
+    this.environment = EnvironmentIndicators[env] || '';
   }
 
 

client/wfprev-war/src/main/angular/src/app/utils/constants.ts

@@ -57,4 +57,10 @@ export const FiscalYearColors: Record<'past' | 'present' | 'future', string> = {
 
 export const MapColors = {
   PROJECT_BOUNDARY: '#3f3f3f',
+};
+
+export const EnvironmentIndicators: { [key: string]: string } = {
+  LOCAL: 'WFLOCAL',
+  DEV: 'WFDEV',
+  TEST: 'WFTST'
 };