@piserve-tech/form-submission 1.3.314 → 1.3.316

package/src/form-fields/date-time-fields/date-time-fields.component.html

@@ -0,0 +1,268 @@
+<div
+  [ngClass]="{ 'mb-4': !inLine }"
+  class="px-3"
+  [id]="(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id"
+  [attr.name]="question.testElementName"
+>
+  <div class="input-wrapper mb-2" *ngIf="!inLine">
+    <div *ngIf="question.questionNumber" [innerHTML]="question.questionNumber"></div>
+    <span *ngIf="question.questionNumber" class="space"></span> <label>{{ question.question }}</label
+    >&nbsp;
+    <span class="text-danger" *ngIf="question?.required">*</span>
+    <div
+      class="svg-wrapper mb-2 hintIcon"
+      [attr.data-title]="hint"
+      *ngIf="hint"
+    >
+      <svg
+        class="hintSvg"
+        viewBox="0 0 30 30"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  </div>
+  <ng-container *ngIf="dateType === 'DATE_ONLY'">
+    <!-- Date only picker -->
+    <div class="input-container">
+      <input
+        class="form-control height"
+        #datepickerYMD="bsDatepicker"
+        bsDatepicker
+        [minDate]="minDate ? minDate : undefined"
+        [maxDate]="maxDate ? maxDate : undefined"
+        [bsConfig]="{ dateInputFormat: format, containerClass: 'theme-custom' }"
+        [(ngModel)]="selectedDate"
+        (blur)="validateField()"
+        (ngModelChange)="validateField()"
+        [class.invalid]="validationFailed"
+        placeholder="Select date"
+        container="body"
+        placement="top"
+        [class.invalid-question]="isInvalid && (!inLine || !selectedDate)"
+        [disabled]="disableEdit"
+      />
+      <i
+        class="fa-solid fa-calendar-days calendar-icon text-primary fs-5"
+        (click)="openDatePicker()"
+      ></i>
+    </div>
+    <div *ngIf="isInvalid && (!inLine || !selectedDate)" class="error-message">
+      {{ errorMessage }}
+    </div>
+    <div *ngIf="validationFailed && !isInvalid" class="text-danger error-message mt-2">
+      {{ validationMessage }}
+    </div>
+  </ng-container>
+
+  <ng-container *ngIf="dateType === 'MONTH_YEAR'">
+    <div class="input-container">
+      <input
+        class="form-control height"
+        #datepickerYMD="bsDatepicker"
+        bsDatepicker
+        [minDate]="minDate ? minDate : undefined"
+        [maxDate]="maxDate ? maxDate : undefined"
+        [bsConfig]="{
+          containerClass: 'theme-dark-blue',
+          isAnimated: true,
+          adaptivePosition: true,
+          showWeekNumbers: false,
+          minMode: 'month',
+          dateInputFormat: format
+        }"
+        [(ngModel)]="selectedDate"
+        (blur)="validateField()"
+        (ngModelChange)="validateField()"
+        [class.invalid]="validationFailed"
+        placeholder="Select date"
+        container="body"
+        placement="top"
+        [class.invalid-question]="isInvalid && (!inLine || !selectedDate)"
+        [disabled]="disableEdit"
+      />
+      <i
+        class="fa-solid fa-calendar-days calendar-icon text-primary fs-5"
+        (click)="openDatePicker()"
+      ></i>
+    </div>
+    <div *ngIf="isInvalid && (!inLine || !selectedDate)" class="error-message">
+      {{ errorMessage }}
+    </div>
+    <div *ngIf="validationFailed && !isInvalid" class="text-danger mt-2">
+      {{ validationMessage }}
+    </div>
+  </ng-container>
+
+  <ng-container *ngIf="dateType === 'TIME_ONLY'">
+    <!-- Time picker -->
+
+    <div class="input-container">
+      <input
+        class="form-control height appearanceInput mt-3"
+        aria-label="Select time"
+        placeholder="Select time"
+        readonly
+        [format]="timeFormat === '24' ? 24 : 12"
+        [ngxTimepicker]="fullTime3"
+        [(ngModel)]="selectedTime"
+        [max]="maxTime"
+        [min]="minTime"
+        (ngModelChange)="validateField()"
+        [class.invalid]="validationFailed"
+        [class.invalid-question]="isInvalid && (!inLine || !selectedTime)"
+        container="body"
+        placement="top"
+        [disabled]="disableEdit"
+      />
+
+      <i
+        id="startDateIcon"
+        class="fa-solid fa-clock text-primary fs-6 clock-icon"
+        (click)="fullTime3.open()"
+        style="cursor: pointer"
+      ></i>
+      <ngx-material-timepicker #fullTime3></ngx-material-timepicker>
+    </div>
+    <div *ngIf="isInvalid && (!inLine || !selectedTime)" class="error-message">
+      {{ errorMessage }}
+    </div>
+    <div *ngIf="validationFailed && !isInvalid" class="text-danger mt-2">
+      {{ validationMessage }}
+    </div>
+  </ng-container>
+
+  <ng-container *ngIf="dateType === 'DATE_AND_TIME'">
+    <!-- Date and time picker -->
+    <div class="input-container">
+      <input
+        #dateAndTimePicker="bsDatepicker"
+        type="text"
+        class="form-control height"
+        [minDate]="minDate ? minDate : undefined"
+        [maxDate]="maxDate ? maxDate : undefined"
+        [bsConfig]="{
+          dateInputFormat: format,
+          containerClass: 'theme-custom'
+        }"
+        placeholder="Select date"
+        container="body"
+        placement="top"
+        bsDatepicker
+        [class.invalid]="validationFailed"
+        [(ngModel)]="selectedDateAndTime"
+        (blur)="validateField()"
+        (ngModelChange)="validateField()"
+        [class.invalid-question]="isInvalid"
+        [disabled]="disableEdit"
+      />
+      <i
+        class="fa-solid fa-calendar-days calendar-icon text-primary fs-5"
+        (click)="openDateAndTimePicker()"
+      ></i>
+    </div>
+    <div
+      class="input-container"
+      *ngIf="selectedDateAndTime && selectedDateAndTime != null"
+    >
+      <input
+        class="form-control height appearanceInput mt-3"
+        aria-label="Select time"
+        placeholder="Select time"
+        readonly
+        [format]="timeFormat === '24' ? 24 : 12"
+        [ngxTimepicker]="fullTime4"
+        [(ngModel)]="selectedTime"
+        [max]="maxTime"
+        [min]="minTime"
+        (ngModelChange)="validateField()"
+        (focus)="closeDatepicker()"
+        [class.invalid]="timeValidationFailed"
+        [class.invalid-question]="isInvalid && (!inLine || !selectedTime)"
+        container="body"
+        placement="top"
+        [disabled]="disableEdit"
+      />
+
+      <i
+        id="startDateIcon"
+        class="fa-solid fa-clock text-primary fs-6 clock-icon"
+        (click)="fullTime4.open()"
+        style="cursor: pointer"
+      ></i>
+      <ngx-material-timepicker #fullTime4></ngx-material-timepicker>
+    </div>
+    <!-- <div *ngIf="isInvalid" class="error-message"> -->
+    <div *ngIf="isInvalid && (!inLine || !selectedTime)" class="error-message">
+      {{ errorMessage }}
+    </div>
+    <div
+      *ngIf="(validationFailed || timeValidationFailed)  && !isInvalid"
+      class="text-danger mt-2"
+    >
+      {{ validationMessage }}
+    </div>
+  </ng-container>
+
+  <ng-container *ngIf="dateType === 'DATE_RANGE'">
+    <!-- Date range picker -->
+    <div class="input-container">
+      <input
+        type="text"
+        class="form-control height"
+        #daterangepicker="bsDaterangepicker"
+        bsDaterangepicker
+        placeholder="Select date"
+        [minDate]="minDate"
+        [maxDate]="maxDate"
+        [bsConfig]="{
+          rangeInputFormat: format,
+          dateInputFormat: format,
+          containerClass: 'theme-custom',
+          displayOneMonthRange: true
+        }"
+        [(ngModel)]="selectedDateRange"
+        (blur)="validateField()"
+        (ngModelChange)="validateField()"
+        [class.invalid]="validationFailed"
+        [class.invalid-question]="isInvalid && (!inLine || !selectedDateRange)"
+        container="body"
+        placement="top"
+        [disabled]="disableEdit"
+      />
+      <i
+        class="fa-solid fa-calendar-days calendar-icon text-primary fs-5"
+        (click)="openDateRangePicker()"
+      ></i>
+    </div>
+    <div *ngIf="isInvalid && (!inLine || !selectedDateRange)" class="error-message">
+      {{ errorMessage }}
+    </div>
+    <div *ngIf="validationFailed && !isInvalid" class="text-danger mt-2">
+      {{ validationMessage }}
+    </div>
+  </ng-container>
+</div>

package/src/form-fields/date-time-fields/date-time-fields.component.scss

@@ -0,0 +1,88 @@
+@import '../../styles/shared-style.scss';
+
+
+.input-container {
+  position: relative;
+}
+
+.input-container .form-control {
+  padding-right: 30px; 
+}
+
+.input-container .calendar-icon {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+
+.clock-icon {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+.appearanceInput{
+ background-color: #fff;
+}
+
+::ng-deep ngx-material-timepicker-content{
+  --body-background-color: #fff;
+  --button-color: #08bff6 !important;
+  --dial-active-color: #fff;
+  --dial-inactive-color: rgba(255, 255, 255, .5);
+  --dial-background-color: #08bff6 !important;
+  --dial-editable-active-color: #08bff6!important;
+  --dial-editable-background-color: #fff;
+  --clock-face-time-active-color: #fff;
+  --clock-face-time-inactive-color: #6c6c6c;
+  --clock-face-inner-time-inactive-color: #929292;
+  --clock-face-time-disabled-color: #c5c5c5;
+  --clock-face-background-color: #f0f0f0;
+  --clock-hand-color: #08bff6 !important;
+  position: relative;
+  z-index: 99999999;
+}
+
+::ng-deep ngx-material-timepicker-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, .32); /* Black backdrop with opacity */
+  z-index: 99998; /* Behind the timepicker content */
+}
+
+.theme-custom .bs-datepicker-head {
+  background-color: #08bff6 !important;
+}
+
+.timepicker__header{
+  background-color: #08bff6 !important;
+}
+
+.invalid-question {
+  border: 2px solid #f44336; /* Material red */
+  border-radius: 4px;
+  padding: 8px;
+  margin-bottom: 4px;
+}
+
+
+
+.bs-datepicker-body table td span.selected,
+.bs-datepicker-body table td.selected span {
+  color: #fff !important;
+  background-color: #08bff6 !important; 
+  border-radius: 50%; 
+}
+
+.bs-datepicker-body table td span.selected,
+.bs-datepicker-body table td.selected span {
+  color: #fff !important;
+  background-color: #08bff6 !important; 
+  border-radius: 50%; 
+}

package/src/form-fields/date-time-fields/date-time-fields.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DateTimeFieldsComponent } from './date-time-fields.component';
+
+describe('DateTimeFieldsComponent', () => {
+  let component: DateTimeFieldsComponent;
+  let fixture: ComponentFixture<DateTimeFieldsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [DateTimeFieldsComponent]
+    });
+    fixture = TestBed.createComponent(DateTimeFieldsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});