@piserve-tech/form-submission 1.3.314 → 1.3.316

package/src/form-fields/number-fields/number-fields.component.ts

@@ -0,0 +1,256 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Logic } from '../../models/logic.model';
+import { ValidationService } from '../../services/validation.service';
+import { ElementTrackerService } from '../../services/element-tracker.service';
+import { AggregationFunctionService } from '../../services/aggregate.service';
+import { WhenClauseService } from '../../services/whenClause.service';
+
+@Component({
+  selector: 'lib-number-fields',
+  templateUrl: './number-fields.component.html',
+  styleUrls: ['./number-fields.component.scss'],
+})
+export class NumberFieldsComponent {
+  @Input() question: any = {};
+  @Input() inLine: boolean = false;
+  @Input() inCard: boolean = false;
+  @Input() submissionIndex!: number;
+  @Output() answerChange = new EventEmitter<{ answer: any; maxPossibleScore?: number }>();
+  @Input() rowId: any;
+
+  count: number = 0;
+  required: boolean = false;
+  hint: string = '';
+  upDown!: boolean;
+  allowNegativeValues!: boolean;
+  placeholder: string = '';
+  min!: number;
+  max!: number;
+  enteredNumber!: number;
+  validationFailed: boolean = false;
+  validationMessage: string = '';
+  defaultValue!: number;
+  @Input() disableEdit: boolean = false;
+  private elementId: string='';
+  private subscribedToWhenClause = false;
+  constructor(
+      private validationService: ValidationService,
+      private tracker: ElementTrackerService,
+      private aggregateService:AggregationFunctionService,
+      private whenClauseService:WhenClauseService
+    ) {
+    }
+
+
+  ngOnInit() {
+    this.valueAssigned();
+  }
+
+  valueAssigned() {
+    this.count = this.question.count;
+    this.required = this.question.required;
+    this.hint = this.question.hint;
+    this.upDown = this.question.formElement.appearance.upAndDownButton;
+    this.allowNegativeValues =
+      this.question.formElement.appearance.allowNegativeValues;
+    this.placeholder = this.question.formElement?.appearance?.placeholder || '';
+    this.min = this.question.formElement.validation.min;
+    this.max = this.question.formElement.validation.max;
+    this.defaultValue = this.question?.defaultValue;
+    this.disableEdit = this.disableEdit ?? this.question?.disableEdit ?? false;
+    this.enteredNumber = this.defaultValue;
+    if(this.question.answer){
+      this.enteredNumber = this.question?.answer;
+      setTimeout(() => {
+        this.whenClauseService.setQuestionAnswer(this.question.id,this.enteredNumber,true);
+      });
+    }else if(this.defaultValue && !this.question.answer){
+      this.question.answer = this.defaultValue;
+      setTimeout(() => {
+        this.whenClauseService.setQuestionAnswer(this.question.id,this.question.answer,true);
+      });
+    } else{
+      setTimeout(() => {
+        this.whenClauseService.setQuestionAnswer(this.question.id,'',true);
+      });
+    }
+    if (this.question.childLogics && this.question.answer) {
+      this.updateChildLogics(this.question);
+    }
+    this.aggregateService.setNumberField(this.rowId,this.question.id,this.question.answer);
+  }
+
+  preventNumberScroll(event: WheelEvent) {
+    if (document.activeElement === event.target) {
+      event.preventDefault();
+    }
+  }
+
+  validateNumber() {
+    this.validationFailed = false;
+    this.validationService.clearInvalid(this.buildElementId());
+    this.validationMessage = '';
+    if (this.required && !this.enteredNumber && this.question.required) {
+      this.validationFailed = true;
+      this.validationMessage = `Please enter a valid number`;
+      this.question.validation = false;
+      this.question.validationMessage = `Please enter a valid number`;
+           if (!this.subscribedToWhenClause) {
+        this.subscribedToWhenClause = true;
+        this.whenClauseService.onQuestionChange().subscribe(change => {
+          this.validateNumber();
+    });
+  }
+    } else if (!this.allowNegativeValues && this.enteredNumber < 0) {
+      this.validationFailed = true;
+      this.validationMessage = 'Please enter a positive number';
+      this.question.validation = false;
+      this.question.validationMessage = 'Please enter a positive number';
+    } else if (
+      (this.min !== undefined && this.enteredNumber < this.min) ||
+      (this.max !== undefined && this.enteredNumber > this.max)
+    ) {
+      this.validationFailed = true;
+
+      // Construct appropriate validation message based on whether min, max, or both are provided
+      if (this.min !== undefined && this.max !== undefined) {
+        this.validationMessage = `Please enter a valid number between ${this.min} and ${this.max}`;
+        this.question.validationMessage = `Please enter a valid number between ${this.min} and ${this.max}`;
+      } else if (this.min !== undefined) {
+        this.validationMessage = `Please enter a number greater than or equal to ${this.min}`;
+        this.question.validationMessage = `Please enter a number greater than or equal to ${this.min}`;
+      } else if (this.max !== undefined) {
+        this.validationMessage = `Please enter a number less than or equal to ${this.max}`;
+        this.question.validationMessage = `Please enter a number less than or equal to ${this.max}`;
+      }
+
+      this.question.validation = false;
+    } else {
+      this.question.validation = true;
+    }
+    if (this.question.childLogics) {
+      this.updateChildLogics(this.question);
+    }
+  }
+
+  validateInput(event: any) {
+    this.validationService.clearInvalid(this.buildElementId());
+    this.question.answer = event.target.value;
+    this.aggregateService.setNumberField(this.rowId,this.question.id, event.target.value);
+    if (this.question.childLogics) {
+      this.updateChildLogics(this.question);
+    }
+    this.answerChange.emit({answer:this.question.answer,maxPossibleScore:0});
+    this.whenClauseService.setQuestionAnswer(this.question.id,this.question.answer);
+  }
+
+  updateChildLogics(question: any) {
+    if (question.childLogics && Array.isArray(question.childLogics)) {
+      question.childLogics.forEach((childLogic: any) => {
+        if (
+          this.evaluateCondition(
+            question.answer,
+            childLogic.condition,
+            childLogic.inputValue
+          )
+        ) {
+          childLogic.showLogic = true;
+        } else {
+          childLogic.showLogic = false;
+          this.clearAnswersRecursively(childLogic);
+        }
+      });
+    }
+  }
+
+  clearAnswersRecursively(logic: any) {
+    if (!logic || !logic.rows) return;
+
+    logic.rows.forEach((row: any) => {
+      row.grid.forEach((item: any) => {
+        const element = item.element;
+
+        if (item.entityType === 'QUESTION' && element) {
+          // Clear answer if present
+          if ('answer' in element) {
+            element.answer = '';
+          }
+
+          // Recursively clear childLogics if any
+          if (element.childLogics && element.childLogics.length > 0) {
+            element.childLogics.forEach((childLogic: any) => {
+              this.clearAnswersRecursively(childLogic);
+            });
+          }
+        }
+
+        if (item.entityType === 'SUBFORM' && element && element.rows) {
+          // SUBFORM contains its own rows structure like a form
+          this.clearAnswersRecursively({ rows: element.rows });
+        }
+      });
+    });
+  }
+
+  evaluateCondition(answer: any, condition: any, inputValue: any) {
+    switch (condition) {
+      case '>':
+        return answer > Number(inputValue);
+      case '<':
+        return answer < Number(inputValue);
+      case '>=':
+        return answer >= Number(inputValue);
+      case '<=':
+        return answer <= Number(inputValue);
+      case '=':
+        return answer == inputValue;
+      case '!=':
+        return answer != inputValue;
+      default:
+        return false;
+    }
+  }
+
+
+
+  handleValidation(isValid: boolean, message: string = 'This field is required') {
+    if (isValid) {
+      this.validationService.clearInvalid(this.buildElementId());
+    } else {
+      // this.validationService.setInvalid(this.question.id, message);
+    }
+  }
+
+  private buildElementId(): string {
+    return (this.inLine || this.inCard)
+      ? `${this.submissionIndex}-${this.question.id}`
+      : `${this.question.id}`;
+  }
+
+  get isInvalid(): boolean {
+    return !!this.validationService.getErrorMessage(this.buildElementId());
+  }
+
+  get errorMessage(): string | null {
+    return this.validationService.getErrorMessage(this.buildElementId());
+  }
+
+  ngAfterViewInit() {
+    if (this.inLine || this.inCard) {
+      this.elementId = `question-${this.submissionIndex}-${this.question.id}`;
+    } else {
+      this.elementId = `question-${this.question.id}`;
+    }
+
+    this.tracker.registerElement(this.elementId);
+    setTimeout(() => {
+      this.whenClauseService.markLoadCompleted();
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.elementId) {
+      this.tracker.unregisterElement(this.elementId);
+    }
+  }
+}

package/src/form-fields/password-fields/password-fields.component.html

@@ -0,0 +1,113 @@
+<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 [for]="'passwordField' + questionId">{{ 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>
+    <div class="passwordWrapper">
+      <input
+      type="password"
+      class="form-control mb-2 height"
+      [id]="'passwordField' + questionId"
+      (blur)="validatePassword()"
+      [(ngModel)]="enteredPassword"
+      [class.invalid]="validationFailed"
+      [class.invalid-question]="isInvalid && (!inLine || !enteredPassword)"
+      (input)="validateInput($event)"
+      [disabled]="disableEdit"
+    />
+    <button
+      id="togglePasswordBtn"
+      class="toggle-password-btn"
+      (click)="togglePasswordVisibility()"
+      *ngIf="viewButton"
+    >
+      <i class="bi bi-eye-fill" [id]="'passwordEyeIcon' + questionId"></i>
+    </button>
+    </div>
+  <div class="password-strength-meter" *ngIf="displayStrength">
+    <div class="progress">
+      <div
+        class="progress-bar"
+        role="progressbar"
+        [style.width]="passwordStrength + '%'"
+        [class.bg-danger]="passwordStrength < 30"
+        [class.bg-warning]="passwordStrength >= 30 && passwordStrength < 70"
+        [class.bg-success]="passwordStrength >= 70"
+      ></div>
+    </div>
+  </div>
+  <div *ngIf="isInvalid && (!inLine || !enteredPassword)" class="error-message">
+    {{ errorMessage }}
+  </div>
+  <div *ngIf="validationFailed && !isInvalid" class="text-danger mb-2">
+    {{ validationMessage }}
+  </div>
+
+  <div class="cnfrmPasswordWrapper" *ngIf="confirmPassword">
+    <label for="'cnfrmPasswordField'+questionId">Confirm password</label>
+    <input
+      type="password"
+      class="form-control mb-2 height"
+      [id]="'cnfrmPasswordField' + questionId"
+      (blur)="checkPasswordMatch()"
+      [(ngModel)]="enteredCnfrmPassword"
+      [class.invalid]="validatedCnfrmPassword"
+      (input)="validateCnfrm($event)"
+      [disabled]="disableEdit"
+    />
+    <button
+      id="toggleCnfrmPasswordBtn"
+      class="toggle-password-btn"
+      (click)="toggleCnfrmPasswordVisibility()"
+      *ngIf="viewButton"
+    >
+      <i class="bi bi-eye-fill" [id]="'CnfrmPasswordEyeIcon' + questionId"></i>
+    </button>
+  </div>
+  <div *ngIf="validatedCnfrmPassword" class="text-danger error-message">
+    {{ cnfrmValidationMessage }}
+  </div>
+</div>

package/src/form-fields/password-fields/password-fields.component.scss

@@ -0,0 +1,61 @@
+@import '../../styles/shared-style.scss';
+
+.form-control{
+  position: relative;
+}
+
+.password-input-wrapper {
+  position: relative;
+}
+
+.password-input {
+  padding-right: 40px; 
+}
+
+.toggle-password-btn {
+  position: absolute;
+  top: 70%;
+  right: 15px;
+  transform: translateY(-50%);
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.toggle-password-btn:focus {
+  outline: none;
+}
+
+.passwordWrapper{
+  position: relative;
+}
+
+.cnfrmPasswordWrapper{
+  position: relative;
+}
+
+.password-strength-meter {
+  width: 40%;
+  margin-top: 10px;
+  margin-left: auto;
+}
+.progress{
+  height: 10px;
+}
+.progress-bar {
+  transition: width 0.3s ease-in-out;
+}
+.bi{
+ font-size: 20px;
+}
+
+
+.invalid-question {
+  border: 2px solid #f44336; /* Material red */
+  border-radius: 4px;
+  padding: 8px;
+  margin-bottom: 4px;
+}
+
+
+

package/src/form-fields/password-fields/password-fields.component.spec.ts

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