fix(dh): request calculation validation issues

libs/dh/globalization/assets-localization/src/assets/i18n/da.json

@@ -1085,6 +1085,7 @@
       "gridArea": "Netområde",
       "request": "Anmod",
       "maxPeriodLength": "Perioden må max være 31 dage",
+      "monthOnlyError": "Perioden skal være en hel måned",
       "calculationTypes": {
         "BALANCE_FIXING": "Balancefiksering",
         "AGGREGATION": "Aggregering",

libs/dh/globalization/assets-localization/src/assets/i18n/en.json

@@ -1086,6 +1086,7 @@
       "gridarea": "Grid area",
       "request": "Request",
       "maxPeriodLength": "Period cannot be longer than 31 days",
+      "monthOnlyError": "Period must be a full month",
       "calculationTypes": {
         "BALANCE_FIXING": "Balance fixing",
         "AGGREGATION": "Aggregation",

libs/dh/wholesale/feature-request-calculation/src/lib/dh-wholesale-request-calculation.html

@@ -16,7 +16,7 @@
 -->
 @if (isReady) {
 <watt-card vater inset="0" *transloco="let t; read: 'wholesale.requestCalculation'">
-  <form [formGroup]="form" (ngSubmit)="requestCalculation()">
+  <form [formGroup]="form" (ngSubmit)="form.valid && requestCalculation()">
     <vater-flex fill="vertical" gap="m">
       <vater-stack align="flex-start" direction="column" gap="s">
         <watt-dropdown
@@ -38,6 +38,8 @@
         >
           @if (form.controls.period.errors?.max31DaysDateRange) {
           <watt-field-error> {{ t('maxPeriodLength')}} </watt-field-error>
+          } @else if (form.controls.period.errors?.monthOnly) {
+          <watt-field-error> {{ t('monthOnlyError')}} </watt-field-error>
           }
         </watt-datepicker>
 

libs/dh/wholesale/feature-request-calculation/src/lib/dh-wholesale-request-calculation.ts

@@ -27,7 +27,7 @@ import {
 import { RxPush } from '@rx-angular/template/push';
 import { Apollo, MutationResult } from 'apollo-angular';
 import { TranslocoDirective, TranslocoService } from '@ngneat/transloco';
-import { catchError, filter, map, of, startWith, switchMap, tap } from 'rxjs';
+import { catchError, filter, map, of, tap } from 'rxjs';
 
 import {
   RequestCalculationDocument,
@@ -244,23 +244,15 @@ export class DhWholesaleRequestCalculationComponent {
             this.form.controls.energySupplierId.setValue(glnOrEicNumber);
           }
         }),
-        switchMap(({ marketRole }) =>
-          this.form.controls.calculationType.valueChanges.pipe(
-            startWith(this.form.controls.calculationType.value),
-            exists(),
-            map((value) => wholesaleCalculationTypes.includes(value)),
-            tap((isWholesale) => {
-              if (isWholesale && marketRole !== EicFunction.GridAccessProvider) {
-                this.gridAreaIsRequired.set(false);
-                this.form.controls.gridArea.removeValidators(Validators.required);
-              } else {
-                this.gridAreaIsRequired.set(true);
-                this.form.controls.gridArea.setValidators(Validators.required);
-              }
-            }),
-            tap(() => this.form.controls.gridArea.updateValueAndValidity())
-          )
-        ),
+        tap(({ marketRole }) => {
+          if (marketRole !== EicFunction.GridAccessProvider) {
+            this.gridAreaIsRequired.set(false);
+            this.form.controls.gridArea.removeValidators(Validators.required);
+          } else {
+            this.gridAreaIsRequired.set(true);
+            this.form.controls.gridArea.setValidators(Validators.required);
+          }
+        }),
         takeUntilDestroyed()
       )
       .subscribe();

libs/watt/src/lib/components/picker/datepicker/watt-datepicker.component.html

@@ -29,7 +29,7 @@
         aria-label="start-date-input"
         matStartDate
         #startDateInput
-        [readOnly]="rangeMonthOnlyMode"
+        [readOnly]="rangeMonthOnlyMode()"
         autocomplete="off"
         spellcheck="false"
         [hidden]="true"
@@ -40,7 +40,7 @@
         aria-label="end-date-input"
         matEndDate
         #endDateInput
-        [readOnly]="rangeMonthOnlyMode"
+        [readOnly]="rangeMonthOnlyMode()"
         autocomplete="off"
         spellcheck="false"
         [hidden]="true"
@@ -65,8 +65,8 @@
     />
 
     <mat-date-range-picker
-      [panelClass]="rangeMonthOnlyMode ? 'watt-datepicker-range__panel--month-only' : ''"
-      [startView]="rangeMonthOnlyMode ? 'multi-year' : 'month'"
+      [panelClass]="rangeMonthOnlyMode() ? 'watt-datepicker-range__panel--month-only' : ''"
+      [startView]="rangeMonthOnlyMode() ? 'multi-year' : 'month'"
       [startAt]="startAt"
       (monthSelected)="onMonthSelected($event)"
       (closed)="rangePickerClosed()"

libs/watt/src/lib/components/picker/datepicker/watt-datepicker.component.ts

@@ -27,8 +27,10 @@ import {
   computed,
   inject,
   input,
+  AfterViewInit,
+  effect,
 } from '@angular/core';
-import { NgControl } from '@angular/forms';
+import { AbstractControl, NgControl, Validator } from '@angular/forms';
 import {
   MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER,
   MatCalendarCellClassFunction,
@@ -48,7 +50,7 @@ import { WattLocaleService } from '@energinet-datahub/watt/locale';
 import { MaskitoModule } from '@maskito/angular';
 import { maskitoDateOptionsGenerator, maskitoDateRangeOptionsGenerator } from '@maskito/kit';
 import { WattSupportedLocales } from '../../../configuration/watt-date-adapter';
-import { WattDateRange, dayjs } from '../../../utils/date';
+import { WattDateRange, WattRange, dayjs } from '../../../utils/date';
 import { WattButtonComponent } from '../../button';
 import { WattPlaceholderMaskComponent } from '../shared/placeholder-mask/watt-placeholder-mask.component';
 import { WattPickerBase } from '../shared/watt-picker-base';
@@ -84,7 +86,7 @@ export const danishTimeZoneIdentifier = 'Europe/Copenhagen';
     WattPlaceholderMaskComponent,
   ],
 })
-export class WattDatepickerComponent extends WattPickerBase {
+export class WattDatepickerComponent extends WattPickerBase implements Validator, AfterViewInit {
   protected override elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
   protected override changeDetectionRef = inject(ChangeDetectorRef);
   protected override ngControl = inject(NgControl, { optional: true, self: true });
@@ -94,9 +96,9 @@ export class WattDatepickerComponent extends WattPickerBase {
 
   max = input<Date>();
   min = input<Date>();
+  rangeMonthOnlyMode = input(false);
 
   @Input() startAt: Date | null = null;
-  @Input() rangeMonthOnlyMode = false;
   @Input() label = '';
 
   /**
@@ -205,6 +207,25 @@ export class WattDatepickerComponent extends WattPickerBase {
         this.datePlaceholder = this.getPlaceholderByLocale(locale);
         this.rangePlaceholder = this.getRangePlaceholder();
       });
+
+    effect(() => {
+      this.rangeMonthOnlyMode();
+      this.ngControl?.control?.updateValueAndValidity();
+    });
+  }
+
+  override ngAfterViewInit() {
+    this.ngControl?.control?.setValidators(this.validate.bind(this));
+  }
+
+  validate({ value }: AbstractControl<WattRange<string>>) {
+    if (!value?.end || !value?.start) return null;
+    if (!this.rangeMonthOnlyMode()) return null;
+    const start = dayjs(value.start);
+    const end = dayjs(value.end);
+    return start.isSame(start.startOf('month')) && end.isSame(start.endOf('month'))
+      ? null
+      : { monthOnly: true };
   }
 
   protected initSingleInput() {
@@ -242,7 +263,7 @@ export class WattDatepickerComponent extends WattPickerBase {
   }
 
   onMonthSelected(date: Date) {
-    if (this.rangeMonthOnlyMode && date) {
+    if (this.rangeMonthOnlyMode() && date) {
       this.matDateRangePicker.select(dayjs(date).startOf('month').toDate());
       this.matDateRangePicker.select(dayjs(date).endOf('month').toDate());
       this.matDateRangePicker.close();