@piserve-tech/form-submission 1.3.314 → 1.3.316

package/src/question/inline-multiple-subform/inline-multiple-subform.component.ts

@@ -0,0 +1,425 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Attachment } from '../../models/attachment.model';
+import { SafeHtml } from '@angular/platform-browser';
+import { ScoreCalculationService } from '../../services/score.service';
+import { Answer } from '../../models/answer.model';
+import { Submission } from '../../models/submission.model';
+import { DataService } from '../../services/data.service';
+import { WhenClauseService } from '../../services/whenClause.service';
+
+
+@Component({
+  selector: 'lib-inline-multiple-subform',
+  templateUrl: './inline-multiple-subform.component.html',
+  styleUrls: ['./inline-multiple-subform.component.scss'],
+})
+export class InlineMultipleSubformComponent {
+  @Input() subForm: any = {};
+  @Output() subFormChange = new EventEmitter<any>();
+  @Input() acceptedLanguage: string = '';
+  maxPossibleScore!:number;
+  maxPossibleGoodScore!:number;
+  maxPossibleBadScore!:number
+
+  submissions: Submission[] = [];
+  deletedSubmissions: string[] = [];
+  displayedColumns: string[] = [];
+  addButtonLabel: string = 'Add New';
+  user: string = '';
+  elementsWithWhenClause: any;
+  editableQuestions: string[] = [];
+  constructor(
+    private scoreCalcService: ScoreCalculationService,
+    private dataService:DataService,
+    public whenClauseService: WhenClauseService
+  ){
+    this.dataService.header$.subscribe((data) => {
+      this.user = data.authUser;
+    });
+  }
+
+  ngOnInit() {
+    // this.maxPossibleScore = this.scoreCalcService.getMaxPossibleScore(this.subForm);
+    const { goodMax, badMax } = this.scoreCalcService.getMaxPossibleScore(this.subForm);
+    this.maxPossibleGoodScore = goodMax;
+    this.maxPossibleBadScore = badMax;
+    if (this.subForm?.submissions) {
+      this.submissions = this.subForm.submissions;
+      this.subForm.deletedSubmissions = [];
+    }
+    if (this.subForm?.property?.addButtonLabel) {
+      this.addButtonLabel = this.subForm.property.addButtonLabel;
+    }
+    this.initializeDisplayedColumns();
+    this.elementsWithWhenClause = this.whenClauseService.getWhenClauseElements(
+      this.subForm
+    );
+    this.updateWhenClause();
+    if(this.subForm.submissionCopyConfig?.allowCopyFromOtherSubmissions){
+      this.editableQuestions = this.subForm.submissionCopyConfig.editableQuestions || [];
+    }
+  }
+
+
+  updateWhenClause(){
+    if(this.submissions.length>0){
+      this.submissions.forEach((submission)=>{
+        submission.answers.forEach((ans)=>{
+          this.whenClauseService.evaluateSubformWhenClauses(ans.answer, submission, ans.questionId ||'',this.elementsWithWhenClause);        });
+      })
+    }
+  }
+
+  initializeDisplayedColumns() {
+    this.displayedColumns = this.subForm.rows.flatMap((item: any) =>
+      item.grid
+        .filter((gridItem: any) => gridItem.element?.formElement?.elementType !== 'HIDDEN_FIELD')
+        .map((gridItem: any) => gridItem.element.question)
+    );
+    this.displayedColumns.push('actions');
+  }
+
+  populateHiddenFieldAnswers() {
+    if (!this.submissions?.length) return;
+  
+    this.submissions.forEach((submission: any) => {
+      submission.answers.forEach((ans: any) => {
+        // Find the question definition by questionId
+        const question = this.findQuestionById(this.subForm.rows, ans.questionId);
+  
+        if (question?.formElement?.elementType === 'HIDDEN_FIELD') {
+          const hiddenField = question.formElement.hiddenField;
+          const resolvedAnswer = this.resolveHiddenFieldValue(hiddenField);
+  
+          ans.answer = resolvedAnswer;
+          ans.maximumPossibleScore = 0; // same as your HiddenFieldComponent emit
+        }
+      });
+    });
+  }
+
+  findQuestionById(rows: any[], questionId: string): any {
+    for (const row of rows) {
+      for (const gridItem of row.grid) {
+        if (gridItem.element?.id === questionId) {
+          return gridItem.element;
+        }
+      }
+    }
+    return null;
+  }
+
+  resolveHiddenFieldValue(hiddenField: {
+    value: string | null,
+    valueSource: string | null,
+    key: string | null
+  }): any {
+    if (!hiddenField?.valueSource) return null;
+  
+    switch (hiddenField.valueSource) {
+      case 'CUSTOM_INPUT':
+        // Directly return the provided value
+        return hiddenField.value;
+  
+      case 'LOCAL_STORAGE':
+        if (hiddenField.key) {
+          return localStorage.getItem(hiddenField.key);
+        }
+        return null;
+  
+      case 'SESSION_STORAGE':
+        if (hiddenField.key) {
+          return sessionStorage.getItem(hiddenField.key);
+        }
+        return null;
+  
+      case 'PREDEFINED_VARIABLE':
+        return this.resolvePredefinedVariable(hiddenField.value);
+  
+      default:
+        return null;
+    }
+  }
+
+  private resolvePredefinedVariable(variable: string | null): any {
+    if (!variable) return null;
+  
+    const now = new Date();
+  
+    switch (variable) {
+      case 'CURRENT_DATE':
+        return now.toISOString().split('T')[0]; // e.g. "2025-09-29"
+      case 'CURRENT_TIME':
+        return now.toTimeString().split(' ')[0]; // e.g. "15:42:18"
+      case 'CURRENT_DATE_TIME':
+        return now.toLocaleString(); // full ISO datetime
+      case 'EPOCH_TIME':
+        return now.getTime(); // milliseconds since 1970
+      case 'YEAR':
+        return now.getFullYear();
+      case 'MONTH':
+        return now.getMonth() + 1; // 1-12
+      case 'DAY':
+        return now.getDate(); // 1-31
+      case 'SUBMITTED_BY':
+        return this.user ? this.user : 'Unknown';
+      default:
+        return null;
+    }
+  }
+
+  addNewSubmission() {
+    const emptyAnswers: Answer[] = [];
+    this.subForm.rows.forEach((row: any) => {
+      row.grid.forEach((gridItem: any) => {
+        if (
+          gridItem.entityType === 'QUESTION' &&
+          gridItem.element &&
+          gridItem.element.id
+        ) {
+          emptyAnswers.push({
+            questionId: gridItem.element.id,
+            answer: '',
+            maximumPossibleScore:0,
+            show: gridItem.show,
+            required: gridItem.element.required
+          });
+        }
+      });
+    });
+    const submission: Submission = {
+      submissionId: '',
+      answers: emptyAnswers,
+    };
+    this.submissions.push(submission);
+    this.submissions = [...this.submissions];
+    this.updateSubFormWithSubmissions();
+    this.populateHiddenFieldAnswers();
+  }
+
+  isSubmissionEditable(
+    submission: any,
+    questionId: string
+  ): boolean {
+    if (!this.editableQuestions?.length) {
+      return false;
+    }
+  
+    // Must be a copied submission
+    if (!submission?.sourceSubmissionId && submission?.isCopied !== true) {
+      return false;
+    }
+  
+    // Question must be editable
+    return this.editableQuestions.includes(questionId);
+  }
+
+  updateSubFormWithSubmissions() {
+    this.clearHiddenAnswers();
+    this.subForm.submissions = this.submissions;
+    this.subForm.maxPossibleScore = {
+      'good': this.maxPossibleGoodScore,
+      'bad': this.maxPossibleBadScore
+    }
+    this.subForm.deletedSubmissions = this.deletedSubmissions;
+    this.subFormChange.emit(this.subForm);
+  }
+
+  getSubmissionQuestion(submission: Submission, formElement: any): any {
+    const ansObj = submission.answers.find(
+      (a) => a.questionId === formElement.element.id
+    );
+    const questionClone = { ...formElement.element };
+    questionClone.answer = ansObj ? ansObj.answer : '';
+    questionClone.attachments = ansObj?.attachments ? ansObj.attachments : [];
+    questionClone.copiedAttachments = ansObj?.copiedAttachments ? ansObj.copiedAttachments : [];
+    questionClone.amountInWords = ansObj?.amountInWords ? ansObj.amountInWords : '';
+    questionClone.required = ansObj?.required !== undefined ? ansObj.required : questionClone.required;
+    return questionClone;
+  }
+
+  updateInlineAnswer(submission: Submission, question: any, newAnswerObject: any) {
+    const newAnswer = newAnswerObject.answer;
+    const amountInWords = newAnswerObject?.amountInWords;
+    const currency = newAnswerObject?.currency;
+    this.whenClauseService.evaluateSubformWhenClauses(newAnswer, submission, question.id,this.elementsWithWhenClause);
+    const submissionIndex = this.submissions.indexOf(submission);
+    if (submissionIndex > -1) {
+      const existingAnswer = this.submissions[submissionIndex].answers.find(
+        (a) => a.questionId === question.id
+      );
+
+      if (
+        question.formElement &&
+        question.formElement.elementType === 'FILE_PICKER'
+      ) {
+        // Map file objects to file names.
+        let fileNames: string[] = [];
+        if (newAnswer && Array.isArray(newAnswer)) {
+          fileNames = newAnswer.map((file: any) => file?._file?.name);
+        }
+
+        // Get deleted file IDs from the question (if any).
+        let deletedFiles: string[] = [];
+        if (question.deleteFiles && question.deleteFiles.length > 0) {
+          deletedFiles = question.deleteFiles;
+        }
+
+        if (existingAnswer) {
+          existingAnswer.files = newAnswer;
+          existingAnswer.answer = fileNames;
+          // Initialize deleteFiles if it's not defined.
+          if (!existingAnswer.deleteFiles) {
+            existingAnswer.deleteFiles = [];
+          }
+          // Append any deleted file IDs not already present.
+          deletedFiles.forEach((deletedId: string) => {
+            if (!existingAnswer.deleteFiles!.includes(deletedId)) {
+              existingAnswer.deleteFiles!.push(deletedId);
+            }
+          });
+        } else {
+          const newObj: Answer = {
+            questionId: question.id,
+            files: newAnswer,
+            answer: fileNames,
+            deleteFiles: deletedFiles.length > 0 ? [...deletedFiles] : [],
+          };
+          this.submissions[submissionIndex].answers.push(newObj);
+        }
+      } else {
+        // For non-file picker elements, update normally.
+        if (existingAnswer) {
+          existingAnswer.answer = newAnswer;
+          existingAnswer.maximumPossibleScore = newAnswerObject.maxPossibleScore;
+          existingAnswer.amountInWords = amountInWords;
+          existingAnswer.currencySymbol = currency; 
+        } else {
+          this.submissions[submissionIndex].answers.push({
+            questionId: question.id,
+            answer: newAnswer,
+            maximumPossibleScore: newAnswerObject.maxPossibleScore,
+            amountInWords: amountInWords,
+            currencySymbol: currency
+          });
+        }
+        if(
+          question.formElement &&
+          (question.formElement.elementType === 'DROP_DOWN' ||
+          question.formElement.elementType === 'RADIO_BUTTON' ||
+          question.formElement.elementType === 'CHECK_BOX') &&
+          question.formElement.scoring &&
+          question.formElement.scoring.enableScoring
+        ){
+          submission.answers.forEach((ans) => {
+            if(question.id === ans.questionId){
+              const scoreResult = this.scoreCalcService.calculateScoreFromAnswer(ans.answer, question);
+              // Save total score and individual scores
+              ans.scores = scoreResult?.scores;
+            }
+          });
+          // Check scoring condition
+          if (this.scoreCalcService.shouldCalculateScore(this.subForm, submission)) {
+            // Mark that this submission had all scoring questions answered at least once
+            submission.hasAllScoringAnsweredOnce = true;
+          }
+
+          if (submission.hasAllScoringAnsweredOnce) {
+            // Recalculate score always after once satisfied
+            submission.scores = this.scoreCalcService.calculateSubmissionScore(submission.answers);
+          }
+        }
+      }
+      const hasAnyScore = this.submissions.some(
+        sub => sub.scores?.some(s => s.score !== null && s.score !== undefined)
+      );
+      
+      if (hasAnyScore) {
+        this.subForm.scores = this.scoreCalcService.calculateFinalScore(this.submissions,this.maxPossibleGoodScore,this.maxPossibleBadScore);
+      } else {
+        this.subForm.scores = null; // or 0, depending on how you want to represent "no score yet"
+      }
+      this.updateSubFormWithSubmissions();
+    }
+  }
+
+  updateDeletedFiles(
+    submission: Submission,
+    question: any,
+    deletedFiles: string[]
+  ) {
+    // Find the matching answer object based on the questionId
+    const answerObj = submission.answers.find(
+      (ans) => ans.questionId === question.id
+    );
+
+    if (answerObj) {
+      // Ensure deleteFiles is always an array
+      if (!answerObj.deleteFiles) {
+        answerObj.deleteFiles = [];
+      }
+
+      // Add deleted file IDs to deleteFiles array while avoiding duplicates
+      deletedFiles.forEach((fileId) => {
+        if (!answerObj.deleteFiles!.includes(fileId)) {
+          answerObj.deleteFiles!.push(fileId);
+        }
+      });
+
+      answerObj.copiedAttachments = answerObj.copiedAttachments?.filter(item=>{
+        return !deletedFiles.includes(item);
+      });
+    }
+  }
+
+  deleteSubmission(index: number) {
+    const submission = this.submissions[index];
+    if (submission.submissionId) {
+      this.deletedSubmissions.push(submission.submissionId);
+    }
+    this.submissions.splice(index, 1);
+    this.submissions = [...this.submissions];
+    const totalSubmissions = this.submissions.length;
+    const maxScore = totalSubmissions*this.maxPossibleScore;
+    this.subForm.scores = this.scoreCalcService.calculateFinalScore(this.submissions,this.maxPossibleGoodScore,this.maxPossibleBadScore);
+    this.updateSubFormWithSubmissions();
+  }
+
+  clearEmptySubmissions() {
+    const nonEmptySubmissions: Submission[] = [];
+    const emptySubmissionIds: string[] = [];
+
+    this.submissions.forEach((submission) => {
+      const hasValue = submission.answers.some(
+        (answer) =>
+          answer.answer !== '' &&
+          answer.answer !== null &&
+          answer.answer !== undefined
+      );
+      if (hasValue) {
+        nonEmptySubmissions.push(submission);
+      } else if (submission.submissionId) {
+        emptySubmissionIds.push(submission.submissionId);
+      }
+    });
+
+    this.submissions = nonEmptySubmissions;
+    this.deletedSubmissions.push(...emptySubmissionIds);
+    this.updateSubFormWithSubmissions();
+  }
+  
+  clearHiddenAnswers() {
+    for (const submission of this.submissions) {
+      if (!submission.answers || !Array.isArray(submission.answers)) continue;
+  
+      for (const ans of submission.answers) {
+        // If show flag is explicitly false → clear the answer value
+        if (ans.show === false) {
+          ans.answer = "";   // clear the answer
+          ans.files = [];    // clear files (optional)
+          ans.scores = [];   // clear score (optional)
+        }
+      }
+    }
+  }
+}

package/src/question/multifields/multifields.component.html

@@ -0,0 +1,78 @@
+<div class="outer-container mb-4 px-3 multifields" [attr.name]="multiFields.testElementName"
+[id]="'question-'+ multiFields.id">
+    <div class="d-flex align-items-center">
+      <div [innerHTML]="multiFields.questionNumber"></div><span class="space"></span>
+      <label>{{ multiFields.question }}</label>
+    </div>
+
+    <div class="multifields-row">
+        <ng-container *ngFor="let row of multiFields.rows">
+            <div class="d-flex">
+                <div *ngFor="let grid of row.grid"
+                    [ngStyle]="{'width.%': (grid.element.count) * (100 / 12)}">
+                    <div *ngIf="grid.entityType === 'QUESTION'">
+                        <div [ngSwitch]="grid.element.formElement.elementType">
+                            <lib-check-box-fields *ngSwitchCase="'CHECK_BOX'"
+                                [question]="grid.element"></lib-check-box-fields>
+                            <lib-date-time-fields *ngSwitchCase="'DATE_TIME'"
+                                [question]="grid.element"></lib-date-time-fields>
+                            <lib-drop-down-fields *ngSwitchCase="'DROP_DOWN'"
+                                [question]="grid.element"></lib-drop-down-fields>
+                            <lib-file-picker-fields
+                                *ngSwitchCase="'FILE_PICKER'"
+                                [question]="grid.element"></lib-file-picker-fields>
+                            <lib-location-fields *ngSwitchCase="'LOCATION'"
+                                [question]="grid.element"></lib-location-fields>
+                            <lib-mail-fields *ngSwitchCase="'EMAIL'"
+                                [question]="grid.element"></lib-mail-fields>
+                            <lib-mobile-fields *ngSwitchCase="'MOBILE'"
+                                [question]="grid.element"></lib-mobile-fields>
+                            <lib-number-fields *ngSwitchCase="'NUMBER'"
+                                [question]="grid.element"></lib-number-fields>
+                            <lib-password-fields *ngSwitchCase="'PASSWORD'"
+                                [question]="grid.element"></lib-password-fields>
+                            <lib-radio-button-fields
+                                *ngSwitchCase="'RADIO_BUTTON'"
+                                [question]="grid.element"></lib-radio-button-fields>
+                            <lib-rich-text-editor-fields
+                                *ngSwitchCase="'RICH_TEXT_EDITOR'"
+                                [question]="grid.element"></lib-rich-text-editor-fields>
+                            <lib-selection-matrix-fields
+                                *ngSwitchCase="'SELECTION_MATRIX'"
+                                [question]="grid.element"
+                                [acceptedLanguage]="acceptedLanguage"></lib-selection-matrix-fields>
+                            <lib-signature-fields *ngSwitchCase="'SIGNATURE'"
+                                [question]="grid.element"></lib-signature-fields>
+                            <lib-slider-fields *ngSwitchCase="'SLIDER'"
+                                [question]="grid.element"></lib-slider-fields>
+                            <lib-terms-and-condition-fields
+                                *ngSwitchCase="'TERMS_AND_CONDITION'"
+                                [question]="grid.element"></lib-terms-and-condition-fields>
+                            <lib-text-area-fields *ngSwitchCase="'TEXT_AREA'"
+                                [question]="grid.element"></lib-text-area-fields>
+                            <lib-text-fields *ngSwitchCase="'TEXT_BOX'"
+                                [question]="grid.element"></lib-text-fields>
+                            <lib-toggle-switch-fields
+                                *ngSwitchCase="'TOGGLE_SWITCH'"
+                                [question]="grid.element"
+                                [acceptedLanguage]="acceptedLanguage"></lib-toggle-switch-fields>
+                            <lib-url-fields *ngSwitchCase="'URL'"
+                                [question]="grid.element"></lib-url-fields>
+                            <lib-currency-fields *ngSwitchCase="'CURRENCY'"
+                                [question]="grid.element"></lib-currency-fields>
+                            <lib-hidden-field *ngSwitchCase="'HIDDEN_FIELD'" 
+                                [question]="grid.element"></lib-hidden-field>
+                        </div>
+
+                        <ng-container *ngIf="grid.element.childLogics">
+                            <ng-container
+                                *ngComponentOutlet="loadFormElementsComponent(grid.element.childLogics) | async"></ng-container>
+                        </ng-container>
+                    </div>
+
+                </div>
+            </div>
+
+        </ng-container>
+    </div>
+</div>

package/src/question/multifields/multifields.component.scss

@@ -0,0 +1,6 @@
+::ng-deep .multifields .mb-5 {
+    margin: 0 !important;
+}
+.space{
+    width: 5px;
+}

package/src/question/multifields/multifields.component.spec.ts

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

package/src/question/multifields/multifields.component.ts

@@ -0,0 +1,27 @@
+import { Component, Injector, Input } from '@angular/core';
+
+@Component({
+  selector: 'lib-multifields',
+  templateUrl: './multifields.component.html',
+  styleUrls: ['./multifields.component.scss']
+})
+export class MultifieldsComponent {
+  @Input() multiFields:any = {};
+  @Input() acceptedLanguage: string ='';
+  grid: any;
+  
+  async loadFormElementsComponent(grid: any) {
+      this.grid = grid;
+        const { FormElementsComponent } = await import('../form-elements/form-elements.component');
+        return FormElementsComponent;
+      }
+    
+      createInjector(): Injector {
+        return Injector.create({
+          providers: [
+            { provide: 'grid', useValue: this.grid },
+            { provide: 'state', useValue: 'child' },
+          ],
+        });
+      }
+}