@piserve-tech/form-submission 1.3.314 → 1.3.316

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

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