@piserve-tech/form-submission 1.3.314 → 1.3.316

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

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

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

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

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

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

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

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