@piserve-tech/form-submission 1.3.317 → 1.3.319

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

@@ -1,538 +0,0 @@
-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

@@ -1,85 +0,0 @@
-<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

@@ -1,48 +0,0 @@
-@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

@@ -1,21 +0,0 @@
-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();
-  });
-});