@piserve-tech/form-submission 1.3.314 → 1.3.316

package/src/form-fields/check-box-fields/check-box-fields.component.ts

@@ -0,0 +1,538 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormService } from '../../services/form.service';
+import { ElementTrackerService } from '../../services/element-tracker.service';
+import { ValidationService } from '../../services/validation.service';
+import { ScoreCalculationService } from '../../services/score.service';
+import { WhenClauseService } from '../../services/whenClause.service';
+
+@Component({
+  selector: 'lib-check-box-fields',
+  templateUrl: './check-box-fields.component.html',
+  styleUrls: ['./check-box-fields.component.scss'],
+})
+export class CheckBoxFieldsComponent {
+  @Input() question: any = {};
+  @Input() inLine: boolean = false;
+  @Input() inCard: boolean = false;
+  @Input() submissionIndex!: number;
+  @Output() answerChange = new EventEmitter<{
+    answer: any;
+    maxPossibleScore?: number;
+  }>();
+   @Input() rowId: number = 0;
+
+  count: number = 0;
+  required: boolean = false;
+  hint: string = '';
+  selectionType: string = '';
+  minimumSelection?: number;
+  maximumSelection?: number;
+  optionType: string = '';
+  lookupTable: any = {};
+  customOptions: any[] = [];
+  database: any = {};
+  api: any = {};
+  apiOptions: any[] = [];
+  selectedOptions: any[] = [];
+  validationFailed: boolean = false;
+  displayOptionsInColumn: boolean = false;
+  validationMessage: string = '';
+  private elementId: string = '';
+  maxPossibleScore?: number;
+  @Input() disableEdit: boolean = false;
+
+  constructor(
+    private formService: FormService,
+    private validationService: ValidationService,
+    private tracker: ElementTrackerService,
+    private scoreCalcService: ScoreCalculationService,
+    private whenClauseService:WhenClauseService
+  ) {}
+
+  ngOnInit() {
+    this.valueAssigned();
+  }
+
+  valueAssigned() {
+    this.count = this.question.count;
+    this.required = this.question.required;
+    this.hint = this.question.hint;
+    this.selectionType = this.question.formElement.appearance.selectionType;
+    this.displayOptionsInColumn =
+      this.question.formElement.appearance.displayOptionsInColumn ?? false;
+    this.minimumSelection =
+      this.question.formElement.validation.minimumSelection;
+    this.maximumSelection =
+      this.question.formElement.validation.maximumSelection;
+    this.optionType = this.question.formElement.option.optionType;
+    switch (this.optionType) {
+      case 'OPTION':
+        this.customOptions = this.question.formElement.option.customOptions;
+        this.customOptions = this.question.formElement.option.customOptions.map(
+          (option: any) => ({
+            value: option.value,
+            label: option.value,
+          })
+        );
+        if (this.question.answer) {
+          this.initializeCustomOption();
+        }
+        break;
+      case 'LOOKUP':
+        this.lookupTable = this.question.formElement.option.lookupTable;
+        this.fetchDataFromLookup();
+        break;
+      case 'DATABASE':
+        this.database = this.question.formElement.option.database;
+        this.fetchDataFromDatabase();
+        break;
+      case 'API':
+        this.api = this.question.formElement.option.api;
+        this.fetchDataFromAPI();
+        break;
+      default:
+        console.warn('Unknown option type:', this.optionType);
+    }
+
+    if (this.selectionType === 'SINGLE') {
+      this.minimumSelection = 1;
+      this.maximumSelection = 1;
+    }
+
+    if (
+      this.selectionType === 'MULTIPLE' &&
+      !this.minimumSelection &&
+      !this.maximumSelection
+    ) {
+      this.minimumSelection = undefined;
+      this.maximumSelection = undefined;
+    }
+    if (
+      this.question.formElement.scoring &&
+      this.question.formElement.scoring.enableScoring
+    ) {
+      this.maxPossibleScore =
+        this.scoreCalcService.getMaxPossibleScoreForQuestion(this.question);
+      this.question.maxPossibleScore = this.maxPossibleScore;
+    }
+  }
+
+  initializeCustomOption() {
+    this.selectedOptions = [];
+    this.customOptions?.forEach((option: any) => {
+      if (
+        this.question?.answer?.find((a: any) => {
+          if (typeof a === 'string' && a.includes('|')) {
+            const parts = a.split('|');
+            return parts[1] === option.value.toString();
+          }
+          return a.toString() === option.value.toString();
+        })
+      ) {
+        this.selectedOptions.push(option);
+      }
+    });
+    setTimeout(() => {
+      const answers = Array.isArray(this.question.answer) ? this.question.answer : [];
+      const parsedAnswers = answers.map((ans:any) => ans.split('|')[1]);
+      this.whenClauseService.setQuestionAnswer(this.question.id,parsedAnswers,true);
+    });
+    if (this.question.childLogics && this.question.answer) {
+      this.updateChildLogics(this.question);
+    }
+  }
+
+  onCheckboxChange(option: any, event: any) {
+    if (this.selectionType === 'SINGLE') {
+      if (event.target.checked) {
+        this.selectedOptions = [option];
+        this.question.answer = [`${option.label}|${option.value}`];
+      } else {
+        this.selectedOptions = [];
+        this.question.answer = [];
+      }
+      this.isMinimumSelectionValid();
+    } else if (this.selectionType === 'MULTIPLE') {
+      if (event.target.checked) {
+        if (!this.selectedOptions.includes(option)) {
+          this.selectedOptions.push(option);
+        }
+      } else {
+        this.selectedOptions = this.selectedOptions.filter(
+          (item) => item !== option
+        );
+      }
+      this.question.answer = this.selectedOptions.map(
+        (item) => `${item.label}|${item.value}`
+      );
+      this.isMinimumSelectionValid();
+    }
+
+    if (
+      this.maximumSelection !== undefined &&
+      this.selectedOptions.length > this.maximumSelection
+    ) {
+      event.target.checked = false;
+      this.selectedOptions = this.selectedOptions.filter(
+        (item) => item !== option
+      );
+      this.question.answer = this.selectedOptions.map(
+        (item) => `${item.label}|${item.value}`
+      );
+      this.isMinimumSelectionValid();
+    }
+
+    if (this.question.childLogics) {
+      this.updateChildLogics(this.question);
+    }
+    const scoreResult = this.scoreCalcService.calculateScoreFromAnswer(
+      this.question.answer,
+      this.question
+    );
+    this.question.score = scoreResult?.scores;
+    this.answerChange.emit({
+      answer: this.question.answer,
+      maxPossibleScore: this.maxPossibleScore,
+    });
+    const answers = Array.isArray(this.question.answer) ? this.question.answer : [];
+    const parsedAnswers = answers.map((ans:any) => ans.split('|')[1]);
+    this.whenClauseService.setQuestionAnswer(this.question.id,parsedAnswers);
+  }
+
+  updateChildLogics(question: any) {
+    if (question.childLogics && Array.isArray(question.childLogics)) {
+      question.childLogics.forEach((childLogic: any) => {
+        if (this.selectionType === 'SINGLE') {
+          if (this.selectedOptions.length === 0) {
+            childLogic.showLogic = false;
+            this.clearAnswersRecursively(childLogic);
+          } else {
+            if (
+              this.evaluateCondition(
+                this.selectedOptions[0]?.label,
+                childLogic.condition,
+                childLogic.inputValue
+              )
+            ) {
+              childLogic.showLogic = true;
+            } else {
+              childLogic.showLogic = false;
+              this.clearAnswersRecursively(childLogic);
+            }
+          }
+        } else if (this.selectionType === 'MULTIPLE') {
+          if (this.selectedOptions.length === 0) {
+            childLogic.showLogic = false;
+            this.clearAnswersRecursively(childLogic);
+          } else {
+            const selectedLabels = this.selectedOptions.map(
+              (item: any) => item.label
+            );
+            if (
+              this.evaluateMultipleCondition(
+                selectedLabels,
+                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: string, inputValue: any): boolean {
+    const inputValues = Array.isArray(inputValue)
+      ? inputValue.map((val) => val.toString())
+      : [inputValue.toString()];
+
+    switch (condition) {
+      case '!=':
+        return !inputValues.includes(answer);
+      case '=':
+        return inputValues.includes(answer);
+      case 'IN':
+        return inputValues.includes(answer);
+      case 'NOT IN':
+        return !inputValues.includes(answer);
+      default:
+        return false;
+    }
+  }
+
+  evaluateMultipleCondition(
+    answers: any[],
+    condition: string,
+    inputValue: any
+  ): boolean {
+    const inputValues = Array.isArray(inputValue)
+      ? inputValue.map((val) => val.toString())
+      : [inputValue.toString()];
+
+    switch (condition) {
+      case '!=':
+        return answers.every((answer) => !inputValues.includes(answer));
+      case '=':
+        return answers.some((answer) => inputValues.includes(answer));
+      case 'IN':
+        return answers.some((answer) => inputValues.includes(answer));
+      case 'NOT IN':
+        return answers.every((answer) => !inputValues.includes(answer));
+      default:
+        return false;
+    }
+  }
+
+  fetchDataFromLookup() {
+    this.formService.fetchDataFromLookup(this.lookupTable).subscribe(
+      (response) => {
+        this.customOptions = response.result.values.map(
+          (item: { value: string; label: string }) => ({
+            value: item.value,
+            label: item.label,
+          })
+        );
+        if (this.question.answer) {
+          this.initializeCustomOption();
+        }
+      },
+      (error) => {
+        console.error('HTTP Error:', error);
+      }
+    );
+  }
+
+  fetchDataFromDatabase() {
+    const transformedDatabase = this.transformDatabaseObject(this.database);
+    this.formService.fetchDataFromDatabase(transformedDatabase).subscribe(
+      (response) => {
+        if (response.success) {
+          this.customOptions =  response.result?.content?.map(
+            (item: { value: string; label: string }) => ({
+              value: item.value,
+              label: item.label,
+            })
+          );
+          if (this.question.answer) {
+            this.initializeCustomOption();
+          }
+        } else {
+          console.error('Error fetching data from database:', response.message);
+        }
+      },
+      (error) => {
+        console.error('HTTP Error:', error);
+      }
+    );
+  }
+
+  transformDatabaseObject(database: any) {
+    return {
+      tableName: database.tableName,
+      valueField: database.valueField,
+      labelField: database.labelField,
+      labelPattern: database?.labelPattern,
+      criteria: database.criteria.map((criteria: any) => ({
+        field: criteria?.field,
+        valueSource: criteria?.valueSource,
+        condition: criteria?.condition,
+        value: criteria?.inputValue,
+        logicalOperator: criteria?.logicalOperator,
+      })),
+    };
+  }
+
+  fetchDataFromAPI() {
+    const allowedChars = ['.', ',', '-', '_', '(', ')', ''];
+    const apiConfig = this.api;
+    this.formService.fetchDataFromExternalAPI(apiConfig).subscribe(
+      (response) => {
+        let data;
+        if (apiConfig.pathToValue) {
+          data = this.extractDataByPath(response, apiConfig.pathToValue);
+        } else {
+          data = response;
+        }
+
+        this.customOptions = data.map((item: any) => {
+          if (
+            apiConfig.labelPattern &&
+            Array.isArray(apiConfig.labelPattern) &&
+            apiConfig.labelPattern.length > 0
+          ) {
+            let label = '';
+            apiConfig.labelPattern.forEach((pattern: string) => {
+              pattern = pattern.trim();
+              if (allowedChars.includes(pattern)) {
+                label += pattern;
+              } else {
+                if (item[pattern] !== undefined && item[pattern] !== null) {
+                  label += item[pattern] + ' ';
+                }
+              }
+            });
+            return {
+              value: item[apiConfig.valueField.trim()],
+              label: label,
+            };
+          } else {
+            return {
+              value: item[apiConfig.valueField.trim()],
+              label: item[apiConfig.labelField.trim()],
+            };
+          }
+        });
+        if (this.question.answer) {
+          this.initializeCustomOption();
+        }
+      },
+      (error) => {
+        console.error('HTTP Error:', error);
+      }
+    );
+  }
+
+  extractDataByPath(data: any, path: string) {
+    return path.split('.').reduce((acc, part) => acc && acc[part], data);
+  }
+
+  isMinimumSelectionValid() {
+    this.validationFailed = false;
+
+    if (this.selectedOptions.length == 0 && this.required) {
+      this.validationService.clearInvalid(this.buildElementId());
+      this.validationFailed = true;
+      this.validationMessage = 'This is a required question';
+      this.question.validationMessage = 'This is a required question';
+      this.question.validation = false;
+    } else if (this.minimumSelection !== undefined) {
+      if (this.selectionType == 'SINGLE') {
+        this.validationService.clearInvalid(this.buildElementId());
+        if (
+          this.selectedOptions.length < this.minimumSelection &&
+          this.required
+        ) {
+          this.validationFailed = true;
+          this.validationMessage = `Minimum ${this.minimumSelection}  selection(s) required.`;
+          this.question.validationMessage = `Minimum ${this.minimumSelection}  selection(s) required.`;
+          this.question.validation = false;
+        } else {
+          this.validationService.clearInvalid(this.buildElementId());
+          this.question.validation = true;
+        }
+      } else {
+        if (this.selectedOptions.length < this.minimumSelection) {
+          this.validationService.clearInvalid(this.buildElementId());
+          this.validationFailed = true;
+          this.validationMessage = `Minimum ${this.minimumSelection}  selection(s) required.`;
+          this.question.validationMessage = `Minimum ${this.minimumSelection}  selection(s) required.`;
+          this.question.validation = false;
+        } else {
+          this.validationService.clearInvalid(this.buildElementId());
+          this.question.validation = true;
+        }
+      }
+    } else {
+      this.validationService.clearInvalid(this.buildElementId());
+      this.question.validation = true;
+    }
+  }
+
+  getOptions() {
+    if (this.optionType === 'OPTION') {
+      return this.customOptions;
+    } else if (this.optionType === 'LOOKUP') {
+      return Object.values(this.lookupTable);
+    } else if (this.optionType === 'API') {
+      return this.apiOptions.map((option) => option.valueField);
+    } else {
+      return [];
+    }
+  }
+
+  isOptionDisabled(option: any): boolean {
+    return (
+      this.maximumSelection !== undefined &&
+      this.selectedOptions.length >= this.maximumSelection &&
+      !this.selectedOptions.includes(option)
+    );
+  }
+
+  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/currency-fields/currency-fields.component.html

@@ -0,0 +1,85 @@
+<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>
+
+  <div class="currency-input inside">
+    <span *ngIf="symbolPosition === 'Before the value'" class="currency-symbol left">
+      {{ currencySymbol }}
+    </span>
+
+    <input
+    type="text"
+    class="form-control mb-2 height"
+    [placeholder]="placeholder"
+    [class.hide-spin-buttons]="true"
+    (blur)="validateNumber()"
+    [(ngModel)]="enteredAmount"
+    [class.invalid]="validationFailed"
+    [class.invalid-question]="isInvalid && (!inLine || !enteredAmount)"
+    (input)="validateInput($event)"
+    [attr.min]="min"
+    [attr.max]="max"
+    (wheel)="preventNumberScroll($event)"
+    [disabled]="disableEdit"
+    />
+
+    <span *ngIf="symbolPosition === 'After the value'" class="currency-symbol right">
+        {{ currencySymbol }}
+    </span>
+
+  </div>
+  <div *ngIf="showAmountInWords && amountInWordsText" class="amount-in-words">
+    {{ amountInWordsText }}
+  </div>
+  <div *ngIf="isInvalid && (!inLine || !enteredAmount)" class="error-message">
+    {{ errorMessage }}
+  </div>
+  <div *ngIf="validationFailed && !isInvalid" class="text-danger error-message">
+    {{ validationMessage }}
+  </div>
+</div>

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

@@ -0,0 +1,48 @@
+@import '../../styles/shared-style.scss';
+
+.hide-spin-buttons::-webkit-outer-spin-button,
+.hide-spin-buttons::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+
+.invalid-question {
+  border: 2px solid #f44336; /* Material red */
+  border-radius: 4px;
+  padding: 8px;
+  margin-bottom: 4px;
+}
+
+.currency-input.inside {
+    position: relative;
+  }
+  
+  .currency-input.inside input {
+    padding-left: 0.75rem;   /* fallback */
+    padding-right: 0.75rem;  /* fallback */
+  }
+  
+  .currency-input.inside .currency-symbol {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #444;
+    font-weight: bold;
+    pointer-events: none;
+    white-space: nowrap; /* prevent wrapping for AED, USD, etc. */
+  }
+
+  .currency-input.inside .currency-symbol.left{
+    left: 1%;
+  }
+  
+  /* Add padding depending on symbol position */
+  .currency-input.inside .currency-symbol.left + input {
+    padding-left: calc(1ch * 6); /* 4 character widths (enough for AED + space) */
+  }
+  
+  .currency-input.inside input + .currency-symbol.right {
+    right: 10px;
+    padding-right: calc(1ch * 4);
+  }

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

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