@piserve-tech/form-submission 1.3.317 → 1.3.319

package/src/form-fields/radio-button-fields/radio-button-fields.component.ts

@@ -1,391 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { FormService } from '../../services/form.service';
-import { ValidationService } from '../../services/validation.service';
-import { ElementTrackerService } from '../../services/element-tracker.service';
-import { ScoreCalculationService } from '../../services/score.service';
-import { WhenClauseService } from '../../services/whenClause.service';
-
-@Component({
-  selector: 'lib-radio-button-fields',
-  templateUrl: './radio-button-fields.component.html',
-  styleUrls: ['./radio-button-fields.component.scss'],
-})
-export class RadioButtonFieldsComponent {
-  @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 = '';
-  color: string = '';
-  minimumSelection: number = 0;
-  maximumSelection: number = 0;
-  optionType: string = '';
-  lookupTable: string = '';
-  customOptions: any[] = [];
-  database: any = {};
-  api: any = {};
-  apiOptions: any[] = [];
-  selectedOption: any;
-  validationFailed!: boolean;
-  validationMessage: string = '';
-  displayOptionsInColumn: boolean = false;
-  maxPossibleScore?: number;
-  @Input() disableEdit: boolean = false;
-
-  private elementId: string = '';
-  private subscribedToWhenClause = 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.color = this.question.formElement.appearance.color;
-    this.displayOptionsInColumn =
-      this.question.formElement.appearance.displayOptionsInColumn;
-    this.optionType = this.question.formElement.option.optionType;
-
-    switch (this.optionType) {
-      case 'OPTION':
-        this.customOptions = this.question.formElement.option.customOptions.map(
-          (option: any) => ({
-            value: option.value,
-            label: option.value,
-          })
-        );
-        this.initializeOption();
-        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.question.childLogics && this.question.answer) {
-      this.updateChildLogics(this.question);
-    }
-    if (
-      this.question.formElement.scoring &&
-      this.question.formElement.scoring.enableScoring
-    ) {
-      this.maxPossibleScore =
-        this.scoreCalcService.getMaxPossibleScoreForQuestion(this.question);
-      this.question.maxPossibleScore = this.maxPossibleScore;
-    }
-  }
-
-  initializeOption() {
-    if (this.question.answer) {
-      const dataType = typeof this.customOptions[0]?.value;
-      let convertedAnswer;
-
-      switch (dataType) {
-        case 'number':
-          convertedAnswer = Number(this.question.answer);
-          break;
-        case 'boolean':
-          convertedAnswer = this.question.answer === 'true';
-          break;
-        case 'string':
-          convertedAnswer = String(this.question.answer);
-          break;
-        default:
-          convertedAnswer = this.question.answer;
-      }
-      this.selectedOption = convertedAnswer;
-      setTimeout(() => {
-        const answers = this.question.answer.split('|')[1]
-        this.whenClauseService.setQuestionAnswer(this.question.id,answers,true);
-      });
-    }
-  }
-
-  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,
-          })
-        );
-        this.initializeOption();
-      },
-      (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,
-            })
-          );
-          this.initializeOption();
-        } 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 apiConfig = this.api;
-     const allowedChars = ['.', ',', '-', '_', '(', ')', ''];
-
-    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()],
-              };
-            }
-          });
-        this.initializeOption();
-      },
-      (error) => {
-        console.error('HTTP Error:', error);
-      }
-    );
-  }
-
-  extractDataByPath(data: any, path: string) {
-    return path.split('.').reduce((acc, part) => acc && acc[part], data);
-  }
-
-  validateInput() {
-    this.question.answer = this.selectedOption;
-    const scoreResult = this.scoreCalcService.calculateScoreFromAnswer(
-      this.question.answer,
-      this.question
-    );
-    this.question.score = scoreResult?.scores;
-    this.validationFailed = false;
-    this.validationService.clearInvalid(this.buildElementId());
-    this.validationMessage = '';
-    if (this.required && !this.selectedOption && this.question.required) {
-      this.validationFailed = true;
-      this.validationMessage = 'This is a required question';
-      this.question.validation = false;
-      this.question.validationMessage = 'This is a required question';
-
-           if (!this.subscribedToWhenClause) {
-        this.subscribedToWhenClause = true;
-        this.whenClauseService.onQuestionChange().subscribe(change => {
-          this.validateInput();
-    });
-  }
-    } else {
-      this.question.validation = true;
-    }
-    if (this.question.childLogics) {
-      this.updateChildLogics(this.question);
-    }
-    this.answerChange.emit({
-      answer: this.question.answer,
-      maxPossibleScore: this.maxPossibleScore,
-    });
-    const answers = this.question.answer.split('|')[1]
-    this.whenClauseService.setQuestionAnswer(this.question.id,answers);
-  }
-
-  updateChildLogics(question: any) {
-    if (question.childLogics && Array.isArray(question.childLogics)) {
-      question.childLogics.forEach((childLogic: any) => {
-        if (
-          this.evaluateCondition(
-            this.selectedOption,
-            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 {
-    let answerLabel = answer;
-    if (typeof answer === 'string' && answer.includes('|')) {
-      answerLabel = answer.split('|')[0];
-    }
-
-    const stringInputValue = Array.isArray(inputValue)
-      ? inputValue.map((val) => val.toString())
-      : inputValue;
-
-    switch (condition) {
-      case '!=':
-        return answerLabel != stringInputValue;
-      case '=':
-        return answerLabel == stringInputValue;
-      case 'IN':
-        return stringInputValue.includes(answerLabel);
-      case 'NOT IN':
-        return !stringInputValue.includes(answerLabel);
-      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/rich-text-editor-fields/rich-text-editor-fields.component.html

@@ -1,67 +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>
-  <quill-editor
-    [(ngModel)]="htmlContent"
-    (ngModelChange)="updateAnswer($event)"
-    (onEditorCreated)="editorCreated($event)"
-    (blur)="validateEditor()"
-    class="editor"
-    [ngClass]="{
-      'inSubform': inSubForm && !disableEdit,
-      'disable': disableEdit
-    }"
-    placeholder=""
-    [disabled]="disableEdit"
-  ></quill-editor>
-  <div *ngIf="isInvalid && (!inLine || !htmlContent)" class="error-message">
-    {{ errorMessage }}
-  </div>
-  <div *ngIf="validationFailed && !isInvalid" class="text-danger error-message">
-    {{ validationMessage }}
-  </div>
-</div>

package/src/form-fields/rich-text-editor-fields/rich-text-editor-fields.component.scss

@@ -1,23 +0,0 @@
-@import '../../styles/shared-style.scss';
-.invalid-question {
-    border: 2px solid #f44336; /* Material red */
-    border-radius: 4px;
-    padding: 8px;
-    margin-bottom: 4px;
-  }
-  
-
-  .editor{
-    width: 100%;
-  }
-  
-   ::ng-deep .ql-container {
-    min-height: 150px;
-  }
-  .inSubform{
-    background: #fff !important;
-  }
-
-  .disable{
-    background: #e9ecef;
-  }

package/src/form-fields/rich-text-editor-fields/rich-text-editor-fields.component.spec.ts

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

package/src/form-fields/rich-text-editor-fields/rich-text-editor-fields.component.ts

@@ -1,145 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { ValidationService } from '../../services/validation.service';
-import { ElementTrackerService } from '../../services/element-tracker.service';
-
-@Component({
-  selector: 'lib-rich-text-editor-fields',
-  templateUrl: './rich-text-editor-fields.component.html',
-  styleUrls: ['./rich-text-editor-fields.component.scss'],
-})
-export class RichTextEditorFieldsComponent {
-  @Input() question: any = {};
-  @Input() inLine: boolean = false;
-  @Input() inSubForm: boolean = false;
-  @Input() inCard: boolean = false;
-  @Input() submissionIndex!: number;
-  @Output() answerChange = new EventEmitter<{ answer: any; maxPossibleScore?: number }>();
-
-  count: number = 0;
-  required: boolean = false;
-  hint: string = '';
-  numberOfRows!: number;
-  limitedCharacters: boolean = false;
-  counts: number = 0;
-  htmlContent: string = '';
-  characterCount!: number;
-  validationFailed: boolean = false;
-  validationMessage: string = '';
-  private elementId: string='';
-  defaultValue: string = '';
-  @Input() disableEdit: boolean = false;
-  constructor(
-      private validationService: ValidationService,
-      private tracker: ElementTrackerService
-    )  { }
-  editor: any;
-
-  ngOnInit() {
-    this.valueAssigned();    
-  }
-
-  valueAssigned() {
-    this.count = this.question.count;
-    this.required = this.question.required;
-    this.hint = this.question.hint;
-    this.numberOfRows = this.question.formElement.appearance.numberOfRows;
-    this.limitedCharacters =
-      this.question.formElement.validation.limitedCharacters;
-    this.counts = this.question.formElement.validation.count;
-    this.numberOfRows = this.question.formElement.appearance.numberOfRows;
-    this.limitedCharacters =
-      this.question.formElement.validation.limitedCharacters;
-    if (this.limitedCharacters) {
-      this.characterCount = this.question.formElement.validation.count;
-    }
-    this.defaultValue = this.question?.defaultValue;
-    this.disableEdit = this.disableEdit ?? this.question?.disableEdit ?? false;
-    this.htmlContent = this.defaultValue;
-    if(this.question.answer){
-      this.htmlContent = this.question?.answer;
-    }else if(this.defaultValue && !this.question.answer){
-      this.question.answer = this.defaultValue;
-    }
-  }
-  editorCreated(editorInstance: any) {
-    this.editor = editorInstance;
-    this.updateEditorContent(this.htmlContent);
-    this.editor.on('selection-change', (range: any) => {
-      if (range === null) {
-        this.validateEditor();
-      }
-    });
-  }
-
-  // When you receive data from API
-  updateEditorContent(content: string) {
-    if (this.editor) {
-      // this.editor.clipboard.dangerouslyPasteHTML(content);
-      const delta = this.editor.clipboard.convert(content);
-      this.editor.setContents(delta, 'silent');
-    }
-    this.htmlContent = content;
-  }
-  validateEditor() {
-    this.validationService.clearInvalid(this.buildElementId());
-    this.validationFailed = false;
-    this.validationMessage = '';
-    if (!this.htmlContent && this.required) {
-      this.validationFailed = true;
-      this.validationMessage = 'This is a required question';
-      this.question.validationMessage = 'This is a required question';
-    }
-  }
-
-
-
-  updateAnswer(content: string) {
-    this.question.answer = content;
-    this.validationService.clearInvalid(this.buildElementId());
-    if (this.htmlContent?.length >= this.characterCount) {
-      this.htmlContent = this.htmlContent.substring(0, this.characterCount);
-    }
-    this.question.answer = this.htmlContent;
-    this.validateEditor();
-    this.answerChange.emit({answer:this.question.answer,maxPossibleScore:0});
-  }
-
-  
-  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);
-  }
-
-  ngOnDestroy() {
-    if (this.elementId) {
-      this.tracker.unregisterElement(this.elementId);
-    }
-  }
-}

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

@@ -1,4 +0,0 @@
-<div class="mb-4 px-3" [attr.name]="section.testElementName">
-  <p class="sectionTitle">{{ section.title }}</p>
-  <p [innerHTML]="decodedDescription" class="description"></p>
-</div>

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

@@ -1,37 +0,0 @@
-.sectionTitle {
-  font-size: 19px;
-  font-weight: bold;
-  margin-bottom: 20px;
-  word-break: break-word;
-}
-
-.description {
-  font-size: 17px;
-  font-weight: 500;
-  margin-bottom: 18px;
-  word-break: break-word;
-}
-
-::ng-deep .description img{
-  max-width: 100%;
-}
-
-.invalid-question {
-  border: 2px solid #f44336; /* Material red */
-  border-radius: 4px;
-  padding: 8px;
-  margin-bottom: 4px;
-}
-
-.error-message {
-  color: #f44336;
-  font-size: 0.8em;
-  margin-top: 4px;
-  padding: 0 8px;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(-5px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-