@piserve-tech/form-submission 1.3.317 → 1.3.319

package/src/form-fields/drop-down-fields/drop-down-fields.component.ts

@@ -1,698 +0,0 @@
-import { Logic } from './../../models/logic.model';
-import {
-  ChangeDetectorRef,
-  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';
-
-interface DropDownData {
-  value: string;
-  label: string;
-  image: string;
-}
-
-@Component({
-  selector: 'lib-drop-down-fields',
-  templateUrl: './drop-down-fields.component.html',
-  styleUrls: ['./drop-down-fields.component.scss'],
-})
-export class DropDownFieldsComponent {
-  @Input() question: any = {};
-  @Input() inLine: 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 = '';
-  selectionType: string = '';
-  minimumSelection: number = 0;
-  maximumSelection: number = 0;
-  optionType: string = '';
-  lookupTable: string = '';
-  customOptions: DropDownData[] = [];
-  originalOptions: DropDownData[] = [];
-  database: any = {};
-  api: any = {};
-  originalApi: any = {};
-  selectedValue: any[] = [];
-  validationFailed!: boolean;
-  validationMessage: string = '';
-  private elementId: string = '';
-  hasMoreData: boolean = true;
-  maxPossibleScore?: number;
-  selectedValues: any[] = [];
-  dbPageIndex: number = 0;
-  dbPageSize: number = 10;
-  dbTotalPages: number = 0;
-  @Input() disableEdit: boolean = false;
-
-  constructor(
-    private formService: FormService,
-    private cdr: ChangeDetectorRef,
-    private validationService: ValidationService,
-    private tracker: ElementTrackerService,
-    private scoreCalcService: ScoreCalculationService,
-    private whenClauseService:WhenClauseService
-  ) {}
-
-  ngOnInit() {
-    this.valueAssigned();
-  }
-
-  onValueChange(newValue: any) {
-    this.selectedValue = newValue;
-    this.selectItems();
-  }
-
-  valueAssigned() {
-    this.count = this.question.count;
-    this.required = this.question.required;
-    this.hint = this.question.hint;
-    this.selectionType = this.question.formElement.appearance.selectionType;
-    this.minimumSelection =
-      this.question.formElement.validation.minimumSelection;
-    this.maximumSelection =
-      this.question.formElement.validation.maximumSelection;
-    this.optionType = this.question.formElement.option.optionType;
-
-    // --- Check if answer is present ---
-    if (this.question.answer && Array.isArray(this.question.answer)) {
-      if (this.optionType === 'API') {
-        this.api = this.question.formElement.option.api;
-        this.originalApi = JSON.parse(JSON.stringify(this.api));
-        // ✅ Check if pagination is enabled (pageIndex + pageSize exist in params with valueSource)
-        const hasPagination =
-          this.api?.params?.some((p: any) => p.valueSource === 'PAGE_INDEX') &&
-          this.api?.params?.some((p: any) => p.valueSource === 'PAGE_SIZE');
-
-        if (hasPagination) {
-          // ✅ Populate selected values from answer
-          this.selectedValues = this.question.answer.map((ans: string) => {
-            const parts = ans.split('|');
-            return parts.length > 1 ? parts[1] : parts[0];
-          });
-        }
-      }
-
-       else if (this.optionType === 'DATABASE') {
-        this.selectedValues = this.question.answer.map((ans: string) => {
-          const parts = ans.split('|');
-          return parts.length > 1 ? parts[1] : parts[0];
-        })};
-    }
-
-
-    // --- Handle different option types ---
-    switch (this.optionType) {
-      case 'OPTION':
-        this.customOptions = this.question.formElement.option.customOptions.map(
-          (option: { value: string }) => ({
-            label: option.value,
-            value: option.value,
-            image: '',
-          })
-        );
-        this.originalOptions = [...this.customOptions];
-        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':
-        if (!this.api || Object.keys(this.api).length === 0) {
-          this.api = this.question.formElement.option.api;
-          this.originalApi = JSON.parse(JSON.stringify(this.api));
-        }
-        this.fetchDataFromAPI();
-        break;
-
-      default:
-        console.warn('Unknown option type:', this.optionType);
-    }
-
-    // --- Scoring ---
-    if (
-      this.question.formElement.scoring &&
-      this.question.formElement.scoring.enableScoring
-    ) {
-      this.maxPossibleScore =
-        this.scoreCalcService.getMaxPossibleScoreForQuestion(this.question);
-      this.question.maxPossibleScore = this.maxPossibleScore;
-    }
-  }
-
-  initializeCustomOption() {
-
-    this.customOptions.forEach((option: any) => {
-      const isMatch = this.question?.answer?.some((a: any) => {
-        const parts = a.trim().split('|');
-        if (parts.length === 2) {
-          const label = parts[0];
-          const value = parts[1];
-          return value == option.value && label == option.label;
-        } else {
-          return false;
-        }
-      });
-      if (isMatch) {
-        const alreadyExists = this.selectedValue.some(
-      (item: any) => item.value === option.value
-    );
-
-    if (!alreadyExists) {
-      this.selectedValue = [...this.selectedValue, 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);
-      }
-    });
-
-    this.cdr.detectChanges();
-  }
-
-  transformDatabaseObject(database: any,selectedValues:string[]=[]) {
-    return {
-      tableName: database.tableName,
-      valueField: database.valueField,
-      labelField: database.labelField,
-      labelPattern: database?.labelPattern,
-      selectedValues: selectedValues,
-      criteria: database.criteria.map((criteria: any) => ({
-        field: criteria.field,
-        valueSource: criteria?.valueSource,
-        condition: criteria.condition,
-        value: criteria.inputValue,
-        logicalOperator: criteria.logicalOperator,
-      })),
-    };
-  }
-
-  fetchDataFromDatabase(searchString:string='') {
-   const value= this.question?.answer?.map((a: string) => {
-    const [label, value] = a.split('|');
-    return {
-      label,
-      value
-    };
-  })
-    const transformedDatabase = this.transformDatabaseObject(this.database,value);
-    this.formService.fetchDataFromDatabase(transformedDatabase,this.dbPageIndex,this.dbPageSize,searchString,true).subscribe(
-      (response) => {
-        if (response.success) {
-          this.dbTotalPages = response.result.totalPages;
-          const newOptions =
-            response.result?.content?.map(
-              (item: { value: string; label: string }) => ({
-                value: item.value,
-                label: item.label,
-              })
-            ) || [];
-          if (this.dbPageIndex === 0) {
-            this.customOptions = [...newOptions];
-          }
-          else {
-            this.customOptions = [
-              ...this.customOptions,
-              ...newOptions,
-            ];
-          }
-
-
-          this.originalOptions = [...this.customOptions];
-
-          if (this.question.answer) {
-            this.initializeCustomOption();
-          }
-        } else {
-          console.error('Error fetching data from database:', response.message);
-        }
-        this.cdr.detectChanges();
-      },
-      (error) => {
-        console.error('HTTP Error:', error);
-        this.cdr.detectChanges();
-      }
-    );
-  }
-
-  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.originalOptions = [...this.customOptions];
-        if (this.question.answer) {
-          this.initializeCustomOption();
-        }
-      },
-      (error) => {
-        console.error('HTTP Error:', error);
-      }
-    );
-  }
-
-  fetchDataFromAPI(append: boolean = false, search: boolean = false) {
-    const apiConfig = JSON.parse(JSON.stringify(this.api));
-    if (!this.hasMoreData && append) {
-      // If no more data from last call and this is an append call, skip API
-      return;
-    }
-    const allowedChars = ['.', ',', '-', '_', '(', ')', ''];
-
-    if (search) {
-      if (apiConfig.params) {
-        apiConfig.params = apiConfig.params.filter(
-          (p: any) => p.valueSource !== 'SELECTED_VALUES'
-        );
-      }
-      if (apiConfig.headers) {
-        apiConfig.headers = apiConfig.headers.filter(
-          (h: any) => h.valueSource !== 'SELECTED_VALUES'
-        );
-      }
-    }
-
-    this.formService
-      .fetchDataFromExternalAPI(apiConfig, this.selectedValues)
-      .subscribe(
-        (response) => {
-          let data;
-          if (apiConfig.pathToValue) {
-            data = this.extractDataByPath(response, apiConfig.pathToValue);
-          } else {
-            data = response;
-          }
-
-          const newOptions = 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 (append) {
-            this.customOptions = [...this.customOptions, ...newOptions];
-          } else {
-            this.customOptions = newOptions;
-          }
-          this.originalOptions = [...this.customOptions];
-
-          // If no new data returned, mark as last page
-          if (!newOptions.length) {
-            this.hasMoreData = false;
-          }
-
-          if (this.question.answer && !append && !search) {
-            this.initializeCustomOption();
-          }
-        },
-        (error) => {
-          console.error('HTTP Error:', error);
-        }
-      );
-  }
-
-  extractDataByPath(data: any, path: string) {
-    return path.split('.').reduce((acc, part) => acc && acc[part], data);
-  }
-
-  selectItems(event?: any) {
-    this.selectedValue = event;
-
-    const valuesArray = this.selectedValue.map(
-      (item) => `${item.label}|${item.value}`
-    );
-    this.question.answer = valuesArray;
-    const scoreResult = this.scoreCalcService.calculateScoreFromAnswer(
-      this.question.answer,
-      this.question
-    );
-    this.question.score = scoreResult?.scores;
-
-    this.validationFailed = false;
-    this.validationMessage = '';
-    if (this.selectedValue.length == 0 && this.required) {
-      this.validationFailed = true;
-      this.validationService.clearInvalid(this.buildElementId());
-      this.validationMessage = `This is a required question`;
-      this.question.validation = false;
-      this.question.validationMessage = `This is a required question`;
-    } else if (
-      this.selectedValue.length < this.minimumSelection ||
-      this.selectedValue.length > this.maximumSelection
-    ) {
-      this.validationService.clearInvalid(this.buildElementId());
-      this.validationFailed = true;
-      this.validationMessage = `selected options must be between ${this.minimumSelection} & ${this.maximumSelection}`;
-      this.question.validation = false;
-      this.question.validationMessage = `selected options must be between ${this.minimumSelection} & ${this.maximumSelection}`;
-    } else {
-      this.validationService.clearInvalid(this.buildElementId());
-      this.question.validation = true;
-    }
-    if (this.question.childLogics) {
-      this.updateChildLogics(this.question);
-    }
-    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.selectedValue.length == 0) {
-            childLogic.show = false;
-            this.clearAnswersRecursively(childLogic);
-          } else {
-            const selectedValue = this.selectedValue[0]?.label;
-            if (
-              this.evaluateCondition(
-                selectedValue,
-                childLogic.condition,
-                childLogic.inputValue
-              )
-            ) {
-              childLogic.showLogic = true;
-            } else {
-              childLogic.showLogic = false;
-              this.clearAnswersRecursively(childLogic);
-            }
-          }
-        } else if (this.selectionType === 'MULTIPLE') {
-          if (this.selectedValue.length == 0) {
-            childLogic.show = false;
-            this.clearAnswersRecursively(childLogic);
-          } else {
-            const selectedValues = this.selectedValue.map(
-              (item: any) => item.label
-            );
-            if (
-              this.evaluateMultipleCondition(
-                selectedValues,
-                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 stringInputValue = Array.isArray(inputValue)
-      ? inputValue.map((val) => val.toString().toLowerCase())
-      : inputValue.toLowerCase();
-    answer = Array.isArray(answer)
-      ? answer?.map((ans) => ans.toLowerCase())
-      : answer.toLowerCase();
-    switch (condition) {
-      case '!=':
-        return answer != inputValue;
-      case '=':
-        return answer == inputValue;
-      case 'IN':
-        return stringInputValue.includes(answer);
-      case 'NOT IN':
-        return !stringInputValue.includes(answer);
-      default:
-        return false;
-    }
-  }
-
-  evaluateMultipleCondition(
-    answers: any,
-    condition: string,
-    inputValue: any
-  ): boolean {
-    const stringInputValue = Array.isArray(inputValue)
-      ? inputValue.map((val) => val.toString())
-      : inputValue.toString();
-    answers = Array.isArray(answers)
-      ? answers?.map((answer) => answer.toLowerCase())
-      : answers.toLowerCase();
-    switch (condition) {
-      case '!=':
-        return answers.every((answer: any) => answer != stringInputValue);
-      case '=':
-        return answers.some((answer: any) => answer == stringInputValue);
-      case 'IN':
-        return answers.some((answer: any) => stringInputValue.includes(answer));
-      case 'NOT IN':
-        return answers.every(
-          (answer: any) => !stringInputValue.includes(answer)
-        );
-      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());
-  }
-
-  private hasPagination(apiConfig: any): boolean {
-    const checkValueSource = (arr: any[]) =>
-      Array.isArray(arr) &&
-      arr.some(
-        (item) =>
-          item?.valueSource === 'PAGE_INDEX' ||
-          item?.valueSource === 'PAGE_SIZE'
-      );
-
-    return (
-      checkValueSource(apiConfig.headers) ||
-      checkValueSource(apiConfig.params) ||
-      checkValueSource(apiConfig.pathVariables)
-    );
-  }
-
-  getNextSetOfItems(event: any) {
-    const element = event.target;
-    if (
-      Math.floor(element.scrollHeight - element.scrollTop) <=
-        element.clientHeight &&
-      this.hasPagination(this.api) // Only if pagination is configured
-    ) {
-      this.loadNextPage();
-    }
-
-
-
-    else if( this.optionType === 'DATABASE' && this.dbPageIndex < this.dbTotalPages){
-      this.dbPageIndex +=1;
-      this.fetchDataFromDatabase();
-    }
-  }
-
-  private loadNextPage() {
-    if (!this.hasMoreData) return;
-    // Find the PAGE_INDEX param/header/pathVar and increment it
-    const updateValueSource = (arr: any[]) => {
-      if (!Array.isArray(arr)) return;
-      arr.forEach((item) => {
-        if (item.valueSource === 'PAGE_INDEX') {
-          let currentPage = parseInt(item.inputValue || '0', 10);
-          item.inputValue = (currentPage + 1).toString();
-        }
-      });
-    };
-
-    updateValueSource(this.api.headers);
-    updateValueSource(this.api.params);
-    updateValueSource(this.api.pathVariables);
-
-    // Call your fetch function again
-    this.fetchDataFromAPI(true);
-  }
-
-  search(searchTerm: string) {
-    if( this.optionType ==='DATABASE'){
-      this.dbPageIndex =0;
-      this.fetchDataFromDatabase(searchTerm.trim());
-    }
-    else if (this.optionType !== 'API') {
-      // 🔹 Local search
-      if (searchTerm && searchTerm.trim() !== '') {
-        const lowerSearch = searchTerm.toLowerCase();
-        this.customOptions = this.originalOptions.filter((option) =>
-          option.label?.toLowerCase().includes(lowerSearch)
-        );
-      } else {
-        // Reset to full list when search is cleared
-        this.customOptions = [...this.originalOptions];
-      }
-    }
-    else {
-      // 🔹 API search
-      if (searchTerm && searchTerm.trim() !== '') {
-        // Inject search term into API config (headers or params)
-        this.injectSearchString(searchTerm.trim());
-      } else {
-        // 🔹 Clear the search string from API config when input is empty
-        this.injectSearchString('');
-      }
-
-      // Reset pagination
-      this.hasMoreData = true;
-      // Fetch fresh results
-      this.fetchDataFromAPI(false, true);
-    }
-  }
-
-  injectSearchString(searchTerm: string) {
-    // Always work on a fresh copy, don’t mutate this.api directly
-    this.api = JSON.parse(JSON.stringify(this.originalApi));
-
-    if (this.api?.params) {
-      this.api.params.forEach((p: any) => {
-        if (p.valueSource === 'SEARCH_STRING') {
-          p.inputValue = searchTerm;
-        }
-      });
-    }
-
-    if (this.api?.headers) {
-      this.api.headers.forEach((h: any) => {
-        if (h.valueSource === 'SEARCH_STRING') {
-          h.inputValue = searchTerm;
-        }
-      });
-    }
-  }
-
-  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);
-    }
-  }
-}