Replaces datepicker with input date in item parameters

e2e/items/item-params-entering-fileds.spec.ts

@@ -0,0 +1,50 @@
+import { expect, test } from '@playwright/test';
+import { initAsUsualUser } from 'e2e/helpers/e2e_auth';
+import { apiUrl } from '../helpers/e2e_http';
+import { convertDateToString } from 'src/app/utils/input-date';
+
+test('checks entering date fields in item permissions', async ({ page }) => {
+  await initAsUsualUser(page);
+  const firstAllowedEnteringTimeLocator = page.getByText('First allowed entering time');
+  const latestAllowedEnteringTimeLocator = page.getByText('Latest allowed entering time');
+  const enteringTimeMinContainerLocator = page.getByTestId('entering-time-min-container');
+  const enteringTimeMinSwitchLocator = page.getByTestId('entering-time-min-container').locator('alg-switch');
+  const enteringTimeMaxSwitchLocator = page.getByTestId('entering-time-max-container').locator('alg-switch');
+  const enteringTimeMinInputDateLocator = enteringTimeMinContainerLocator
+    .locator('alg-input-date')
+    .getByTestId('input-date')
+    .getByRole('textbox');
+  const enteringTimeMaxContainerLocator = page.getByTestId('entering-time-max-container');
+  const enteringTimeMaxInputDateLocator = enteringTimeMaxContainerLocator
+    .locator('alg-input-date')
+    .getByTestId('input-date')
+    .getByRole('textbox');
+
+  await test.step('checks entering date fields are visible', async () => {
+    await page.goto('a/1980584647557587953;p=4702,4102;a=0/parameters');
+    await page.waitForResponse(`${apiUrl}/items/1980584647557587953/navigation?attempt_id=0`);
+    await expect.soft(page.getByTestId('item-title').getByText('L1S1 Computer science')).toBeVisible();
+    await expect.soft(firstAllowedEnteringTimeLocator).toBeVisible();
+    await expect.soft(latestAllowedEnteringTimeLocator).toBeVisible();
+    await expect.soft(enteringTimeMinSwitchLocator).toBeVisible();
+    await enteringTimeMinSwitchLocator.click();
+    await expect.soft(enteringTimeMinInputDateLocator).toBeVisible();
+    await expect.soft(enteringTimeMaxSwitchLocator).toBeVisible();
+    await enteringTimeMaxSwitchLocator.click();
+    await expect.soft(enteringTimeMaxInputDateLocator).toBeVisible();
+  });
+
+  await test.step('checks entering date fields validation', async () => {
+    await enteringTimeMaxInputDateLocator.fill('01/01/2024 22:22');
+    await expect.soft(
+      enteringTimeMaxContainerLocator.getByText(`The date must be greater than: ${ convertDateToString(new Date()) }`)
+    ).toBeVisible();
+    await enteringTimeMinInputDateLocator.fill('33/33/3033 22:22');
+    await expect.soft(enteringTimeMinContainerLocator.getByText('Invalid date')).toBeVisible();
+    await enteringTimeMaxInputDateLocator.fill('33/33/3033 22:22');
+    await expect.soft(enteringTimeMaxContainerLocator.getByText('Invalid date')).toBeVisible();
+    await page.getByRole('button', { name: 'Save' }).click();
+    await expect.soft(page.getByText('You need to solve all the errors displayed in the form to save changes.')).toBeVisible();
+  });
+
+});

src/app/items/containers/item-edit-advanced-parameters/item-edit-advanced-parameters.component.html

@@ -153,51 +153,48 @@ <h2 class="alg-h2 alg-text-normal title" i18n>Participation</h2>
           </div>
         </div>
       </div>
-      <div class="form-item-view form-item-datepicker">
+      <div class="form-item-view form-item-datepicker" data-testid="entering-time-min-container">
         <span class="form-item-label" i18n>First allowed entering time</span>
         <div class="form-item-control another-input">
           <alg-switch
-              class="first-child"
-              formControlName="entering_time_min_enabled"
-              mode="white"
-              (ngModelChange)="onEnteringTimeMinEnabledChange($event)"
+            class="first-child"
+            formControlName="entering_time_min_enabled"
+            (ngModelChange)="onEnteringTimeMinEnabledChange($event)"
           >
           </alg-switch>
           <ng-container *ngIf="!!parentForm.get('entering_time_min_enabled')?.value">
             <div>
-              <p-calendar
-                styleClass="alg-calendar"
-                formControlName="entering_time_min"
-                [showIcon]="true"
-                [showTime]="true"
-                (ngModelChange)="onDateChange()"
-              >
-              </p-calendar>
+              <alg-input-date formControlName="entering_time_min" (change)="onDateChange()"></alg-input-date>
+              @if (parentForm.get('entering_time_min')?.valid) {
+                <p class="alg-text-small date-note" i18n>
+                  The time is entered in your own timezone ({{ currentDate | date: 'zzzz' }})
+                </p>
+              }
             </div>
           </ng-container>
         </div>
       </div>
-      <div class="form-item-view form-item-datepicker">
+      <div class="form-item-view form-item-datepicker" data-testid="entering-time-max-container">
         <span class="form-item-label" i18n>Latest allowed entering time</span>
         <div class="form-item-control another-input">
           <alg-switch
-              class="first-child"
-              formControlName="entering_time_max_enabled"
-              mode="white"
-              (ngModelChange)="onEnteringTimeMaxEnabledChange($event)"
+            class="first-child"
+            formControlName="entering_time_max_enabled"
+            (ngModelChange)="onEnteringTimeMaxEnabledChange($event)"
           >
           </alg-switch>
           <ng-container *ngIf="!!parentForm.get('entering_time_max_enabled')?.value">
             <div>
-              <p-calendar
-                styleClass="alg-calendar"
+              <alg-input-date
                 formControlName="entering_time_max"
-                [showIcon]="true"
-                [showTime]="true"
                 [minDate]="minEnteringTimeMaxDate"
-                (ngModelChange)="onDateChange()"
-              >
-              </p-calendar>
+                (change)="onDateChange()"
+              ></alg-input-date>
+              @if (parentForm.get('entering_time_max')?.valid) {
+                <p class="alg-text-small date-note" i18n>
+                  The time is entered in your own timezone ({{ currentDate | date: 'zzzz' }})
+                </p>
+              }
             </div>
           </ng-container>
         </div>

src/app/items/containers/item-edit-advanced-parameters/item-edit-advanced-parameters.component.scss

@@ -57,9 +57,13 @@
 
 .form-item-datepicker {
   margin: toRem(16) 0;
-  height: toRem(40);
+  height: toRem(62);
 }
 
 .delete-button {
   padding: 1rem 0;
 }
+
+.date-note {
+  margin: var(--alg-space-size-6) 0 0 0;
+}

src/app/items/containers/item-edit-advanced-parameters/item-edit-advanced-parameters.component.ts

@@ -5,14 +5,14 @@ import { HOURS } from 'src/app/utils/duration';
 import { ItemRemoveButtonComponent } from '../../containers/item-remove-button/item-remove-button.component';
 import { FormErrorComponent } from 'src/app/ui-components/form-error/form-error.component';
 import { InputNumberModule } from 'primeng/inputnumber';
-import { CalendarModule } from 'primeng/calendar';
 import { DurationComponent } from 'src/app/ui-components/duration/duration.component';
 import { SelectionComponent } from 'src/app/ui-components/selection/selection.component';
 import { DropdownComponent } from 'src/app/ui-components/dropdown/dropdown.component';
 import { SwitchComponent } from 'src/app/ui-components/switch/switch.component';
 import { InputComponent } from 'src/app/ui-components/input/input.component';
-import { NgIf } from '@angular/common';
+import { DatePipe, NgIf } from '@angular/common';
 import { ItemData } from '../../models/item-data';
+import { InputDateComponent } from 'src/app/ui-components/input-date/input-date.component';
 
 export const DEFAULT_ENTERING_TIME_MIN = '1000-01-01T00:00:00Z';
 export const DEFAULT_ENTERING_TIME_MAX = '9999-12-31T23:59:59Z';
@@ -31,10 +31,11 @@ export const DEFAULT_ENTERING_TIME_MAX = '9999-12-31T23:59:59Z';
     DropdownComponent,
     SelectionComponent,
     DurationComponent,
-    CalendarModule,
     InputNumberModule,
     FormErrorComponent,
-    ItemRemoveButtonComponent
+    ItemRemoveButtonComponent,
+    InputDateComponent,
+    DatePipe
   ],
 })
 export class ItemEditAdvancedParametersComponent implements OnInit {
@@ -81,6 +82,7 @@ export class ItemEditAdvancedParametersComponent implements OnInit {
   }];
 
   minEnteringTimeMaxDate = new Date();
+  currentDate = new Date();
 
   minAdmittedMembersRatioOptions: DropdownOption[] = [{
     label: $localize`All the members must be admitted`,
@@ -121,43 +123,37 @@ export class ItemEditAdvancedParametersComponent implements OnInit {
   }
 
   onEnteringTimeMinEnabledChange(enabled: boolean): void {
-    if (!enabled) {
-      return;
-    }
-
-    const enteringTimeMin = this.parentForm?.get('entering_time_min')?.value as Date;
+    if (!enabled) return;
+    const enteringTimeMin = this.parentForm?.get('entering_time_min')?.value as Date | null;
 
-    if (enteringTimeMin.getTime() === new Date(DEFAULT_ENTERING_TIME_MIN).getTime()) {
+    if (enteringTimeMin && enteringTimeMin.getTime() === new Date(DEFAULT_ENTERING_TIME_MIN).getTime()) {
       this.parentForm?.get('entering_time_min')?.patchValue(
         new Date()
       );
     }
   }
 
   onEnteringTimeMaxEnabledChange(enabled: boolean): void {
-    if (!enabled) {
-      return;
-    }
-
-    const enteringTimeMax = this.parentForm?.get('entering_time_max')?.value as Date;
+    if (!enabled) return;
+    const enteringTimeMax = this.parentForm?.get('entering_time_max')?.value as Date | null;
 
-    if (enteringTimeMax.getTime() === new Date(DEFAULT_ENTERING_TIME_MAX).getTime()) {
+    if (enteringTimeMax && enteringTimeMax.getTime() === new Date(DEFAULT_ENTERING_TIME_MAX).getTime()) {
       const enteringTimeMinEnabled = this.parentForm?.get('entering_time_min_enabled')?.value as boolean;
-      const enteringTimeMin = enteringTimeMinEnabled ? this.parentForm?.get('entering_time_min')?.value as Date : new Date();
-      const newTimeMax = enteringTimeMinEnabled ? enteringTimeMin.getTime() + HOURS : enteringTimeMin.getTime();
-
-      this.parentForm?.get('entering_time_max')?.patchValue(
-        new Date(newTimeMax)
-      );
+      const enteringTimeMin = enteringTimeMinEnabled ? this.parentForm?.get('entering_time_min')?.value as Date | null : new Date();
+      const newTimeMax = enteringTimeMin && (enteringTimeMinEnabled ? enteringTimeMin.getTime() + HOURS : enteringTimeMin.getTime());
+      if (newTimeMax) {
+        this.parentForm?.get('entering_time_max')?.patchValue(
+          new Date(newTimeMax)
+        );
+      }
     }
   }
 
   onDateChange(): void {
     const enteringTimeMinEnabled = this.parentForm?.get('entering_time_min_enabled')?.value as boolean;
-    const enteringTimeMin = this.parentForm?.get('entering_time_min')?.value as Date;
-    const enteringTimeMax = this.parentForm?.get('entering_time_max')?.value as Date;
-
-    this.minEnteringTimeMaxDate = enteringTimeMinEnabled ?
+    const enteringTimeMin = this.parentForm?.get('entering_time_min')?.value as Date | null;
+    const enteringTimeMax = this.parentForm?.get('entering_time_max')?.value as Date | null;
+    this.minEnteringTimeMaxDate = enteringTimeMinEnabled && enteringTimeMin && enteringTimeMax ?
       new Date(Math.min(enteringTimeMin.getTime(), enteringTimeMax.getTime())) : new Date();
   }
 

src/app/items/containers/item-edit-wrapper/item-edit-wrapper.component.ts

@@ -226,22 +226,26 @@ export class ItemEditWrapperComponent implements OnInit, OnChanges, OnDestroy, P
 
       const enteringTimeMinEnabled = formControls.enteringTimeMinEnabled?.value as boolean;
       const hasEnteringTimeMinEnabledChanges = enteringTimeMinEnabled !== this.initialFormData.enteringTimeMinEnabled;
-      const enteringTimeMin = formControls.enteringTimeMin?.value as Date;
-      const hasEnteringTimeMinChanges = enteringTimeMin.getTime()
+      const enteringTimeMin = formControls.enteringTimeMin?.value as Date | null;
+      const hasEnteringTimeMinChanges = enteringTimeMin && enteringTimeMin.getTime()
         !== this.initialFormData.enteringTimeMin.getTime();
 
       if (hasEnteringTimeMinChanges || hasEnteringTimeMinEnabledChanges) {
-        itemFormValues.entering_time_min = enteringTimeMinEnabled ? enteringTimeMin : new Date(DEFAULT_ENTERING_TIME_MIN);
+        itemFormValues.entering_time_min = enteringTimeMinEnabled && enteringTimeMin
+          ? enteringTimeMin
+          : new Date(DEFAULT_ENTERING_TIME_MIN);
       }
 
       const enteringTimeMaxEnabled = formControls.enteringTimeMaxEnabled?.value as boolean;
       const hasEnteringTimeMaxEnabledChanges = enteringTimeMaxEnabled !== this.initialFormData.enteringTimeMaxEnabled;
-      const enteringTimeMax = formControls.enteringTimeMax?.value as Date;
-      const hasEnteringTimeMaxChanges = enteringTimeMax.getTime()
+      const enteringTimeMax = formControls.enteringTimeMax?.value as Date | null;
+      const hasEnteringTimeMaxChanges = enteringTimeMax && enteringTimeMax.getTime()
         !== this.initialFormData.enteringTimeMax.getTime();
 
       if (hasEnteringTimeMaxChanges || hasEnteringTimeMaxEnabledChanges) {
-        itemFormValues.entering_time_max = enteringTimeMaxEnabled ? enteringTimeMax : new Date(DEFAULT_ENTERING_TIME_MAX);
+        itemFormValues.entering_time_max = enteringTimeMaxEnabled && enteringTimeMax
+          ? enteringTimeMax
+          : new Date(DEFAULT_ENTERING_TIME_MAX);
       }
     }
 

src/app/items/containers/item-header/item-header.component.html

@@ -1,7 +1,7 @@
 <div class="item-header-container" *ngIf="itemData">
   <div class="item-header">
     <div class="item-title-container">
-      <h1 class="item-title alg-h1" data-cy="item-title">{{ itemData.item.string.title }}</h1>
+      <h1 class="item-title alg-h1" data-testid="item-title">{{ itemData.item.string.title }}</h1>
       <p class="item-subtitle" *ngIf="itemData.item.string.subtitle">{{ itemData.item.string.subtitle }}</p>
     </div>
   </div>