@piserve-tech/form-submission 1.3.314 → 1.3.316

package/src/question/card-subform/card-subform.component.ts

@@ -0,0 +1,407 @@
+import {
+  Component,
+  EventEmitter,
+  Injector,
+  Input,
+  Output,
+} from '@angular/core';
+import { SubForm } from '../../models/subForm.model';
+import { Submission } from '../../models/submission.model';
+import { Answer } from '../../models/answer.model';
+import { ScoreCalculationService } from '../../services/score.service';
+import { v4 as uuidv4 } from 'uuid';
+import { WhenClauseService } from '../../services/whenClause.service';
+
+@Component({
+  selector: 'lib-card-subform',
+  templateUrl: './card-subform.component.html',
+  styleUrls: ['./card-subform.component.scss'],
+})
+export class CardSubformComponent {
+  @Input() subForm: any = {};
+  @Input() acceptedLanguage: string = '';
+  @Input() edit: boolean = false;
+  grid: any;
+  componentToLoad: any;
+  addButtonLabel: string = 'Add New Submission';
+  injector!: Injector;
+  submissions: Submission[] = [];
+  deletedSubmissions: string[] = [];
+  maxPossibleGoodScore!: number;
+  maxPossibleBadScore!: number;
+  @Output() subFormChange = new EventEmitter<any>();
+  Math = Math;
+  elementsWithWhenClause: any;
+  editableQuestions: string[] = [];
+  constructor(
+    private scoreCalcService: ScoreCalculationService,
+    public whenClauseService: WhenClauseService
+  ) {}
+
+  ngOnInit() {
+    const { goodMax, badMax } = this.scoreCalcService.getMaxPossibleScore(
+      this.subForm
+    );
+    this.maxPossibleGoodScore = goodMax;
+    this.maxPossibleBadScore = badMax;
+
+    this.loadComponent();
+    if (this.subForm?.submissions) {
+      this.submissions = this.subForm.submissions;
+      this.subForm.deletedSubmissions = [];
+    } else {
+      this.submissions = this.generateSubmissionsFromDefaultAnswers(
+        this.subForm
+      );
+    }
+    if (this.submissions?.length) {
+      this.updateSubFormWithSubmissions();
+    }
+    if (this.subForm?.property?.addButtonLabel) {
+      this.addButtonLabel = this.subForm.property.addButtonLabel;
+    }
+    this.elementsWithWhenClause = this.whenClauseService.getWhenClauseElements(
+      this.subForm
+    );
+    this.updateWhenClause();
+    if(this.subForm.submissionCopyConfig?.allowCopyFromOtherSubmissions){
+      this.editableQuestions = this.subForm.submissionCopyConfig.editableQuestions || [];
+    }
+  }
+
+  ngOnChanges() {
+    if (this.subForm?.submissions) {
+      this.submissions = this.subForm.submissions;
+      this.subForm.deletedSubmissions = [];
+      this.updateSubFormWithSubmissions();
+    }
+  }
+
+  updateWhenClause(){
+    if(this.submissions.length>0){
+      this.submissions.forEach((submission)=>{
+        submission.answers.forEach((ans)=>{
+          this.whenClauseService.evaluateSubformWhenClauses(ans.answer, submission, ans.questionId ||'',this.elementsWithWhenClause);        });
+      })
+    }
+  }
+
+  private async loadComponent(): Promise<void> {
+    this.componentToLoad = await this.loadFormElementsComponent();
+    this.injector = this.createInjector();
+  }
+
+  private async loadFormElementsComponent() {
+    const { FormElementsComponent } = await import(
+      '../form-elements/form-elements.component'
+    );
+    return FormElementsComponent;
+  }
+
+  createInjector(): Injector {
+    return Injector.create({
+      providers: [
+        { provide: 'grid', useValue: this.grid?.element.childLogics },
+        { provide: 'state', useValue: 'child' },
+      ],
+    });
+  }
+
+  generateSubmissionsFromDefaultAnswers(subForm: SubForm): Submission[] {
+    if (
+      !subForm.defaultAnswers ||
+      !Array.isArray(subForm.defaultAnswers.answers)
+    ) {
+      return [];
+    }
+
+    return subForm.defaultAnswers.answers.map((answerGroup) => {
+      const submission: Submission = {
+        submissionId: '', // Generate a unique ID for each submission
+        configuration: {
+          isDefault: true,
+          allowDelete: answerGroup.isDeleteEnable,
+        },
+        answers: answerGroup.defaultQuestionsAnswers.map((qa) => {
+          const answer: Answer = {
+            questionId: qa.questionId,
+            answer: qa.defaultAnswer,
+            attachments: [], // No attachments from defaultAnswers
+          };
+          return answer;
+        }),
+      };
+
+      return submission;
+    });
+  }
+
+  trackBySubmissionId(index: number, submission: Submission): string | number {
+    return submission?.submissionId || index;
+  }
+
+  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.defaultValue = '';
+    questionClone.disableEdit = submission.configuration?.isDefault
+      ? questionClone.disableEdit
+      : false;
+    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;
+    questionClone.answerCurrency = ansObj?.answerCurrency ? ansObj.answerCurrency : '';
+    return questionClone;
+  }
+
+  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);
+  }
+
+  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: uuidv4(),
+      answers: emptyAnswers,
+      configuration: {
+        isDefault: false,
+        allowDelete: true,
+      },
+    };
+
+    emptyAnswers.forEach((ans) => {
+      this.whenClauseService.evaluateSubformWhenClauses(ans.answer, submission, ans.questionId ||'',this.elementsWithWhenClause);
+    })
+
+    this.submissions.push(submission);
+    this.submissions = [...this.submissions];
+    this.updateSubFormWithSubmissions();
+  }
+
+  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);
+  }
+
+  updateAnswer(submission: Submission, question: any, newAnswerObject: any) {
+    const newAnswer = newAnswerObject.answer;
+    const amountInWords = newAnswerObject?.amountInWords;
+    const currency = newAnswerObject?.currency;
+    if(question.formElement.elementType === 'FILE_PICKER'){
+      let fileLength = newAnswer?.length || 0;
+      this.whenClauseService.evaluateSubformWhenClauses(fileLength, submission, question.id,this.elementsWithWhenClause);
+    } else{
+      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 {
+        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];
+    this.subForm.scores = this.scoreCalcService.calculateFinalScore(
+      this.submissions,
+      this.maxPossibleGoodScore,
+      this.maxPossibleBadScore
+    );
+    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/confirm-dialog/confirm-dialog.component.html

@@ -0,0 +1,32 @@
+<div class="" id="checkdeleteModal" tabindex="-1">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modalHeader">
+        <div class="title-div">
+        </div>
+        <div class="header-btn">
+            <img (click)="closeModal()" src="/assets/icons/close-sidebar-mark-icon.svg" alt="Close Sidebar Icon">          
+        </div>
+    </div>
+      <div class="modalBody">
+        <div class="row text-center">
+            <img class="delete-icon" src="/assets/icons/delete-no-outline-icon.svg" alt="Delete Icon"> 
+            <p class="delete-confirm">{{messageHeader}}</p>
+            <p class="delete-dialog">{{message}}</p>
+        </div>
+      </div>
+      <div class="modalFooter">
+        <div class="footer-btn ">
+        <button type="button" class="delete-btn"
+        (click)="dialogRef.close(true)"
+       >Yes</button>
+        <button class="cancel-btn"
+        (click)="dialogRef.close(false)"
+        type="button">
+            No
+        </button>
+      </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/question/confirm-dialog/confirm-dialog.component.scss

@@ -0,0 +1,109 @@
+.modalHeader {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    .title-div {
+      width: 90%;
+      display: flex;
+      justify-content: center;
+      margin-top: 5%;
+      .title {
+        width: 105px;
+        height: 24px;
+        font-style: normal;
+        font-weight: 600;
+        font-size: 24px;
+        font-weight: 550;
+        line-height: 24px;
+        text-align: center;
+        color: #1D252D;
+        letter-spacing: 0.5px;
+      }
+    }
+    .header-btn {
+      width: 10%;
+      margin-top: 4%;
+  
+      img {
+        width: 2em;
+        cursor: pointer;
+      }
+    }
+  } 
+  .modalBody{
+    padding: 4%;
+  }
+  .appearanceInput {
+    box-sizing: border-box;
+    width: 100%;
+    left: 1043px;
+    top: 346px;
+    background: #FFFFFF;
+    border: 1px solid #D8D8D8;
+    box-shadow: 0px 4px 4px -5px rgba(0, 0, 0, 0.25);
+    border-radius: 6px;
+    margin-bottom: 3%;
+    padding: 3%;
+  }
+  .hintModalFooter{
+    margin: 5%;
+    display: flex;
+    justify-content: flex-end;
+    .footer-btn {
+      button {
+        width: 102px;
+        height: 46px;
+        border-radius: 23px;
+        background: #084fff;
+        color: #fff;
+        border: 0;
+      }
+    }
+  }
+  .modalFooter {
+    .footer-btn {
+      margin-bottom:11%;
+      display: flex;
+      justify-content: center;
+      .delete-btn {
+        width: 102px;
+        height: 46px;
+        border-radius: 23px;
+        background: #084fff;
+        color: #fff;
+        border: 0;
+        margin-left: 2%;
+        font-size: 14px;
+        font-weight: 500;
+      }
+      .cancel-btn{
+        width: 102px;
+        height: 46px;
+        border-radius: 23px;
+        background: rgba(142, 154, 160, 1);
+        color: #fff;
+        border: 0;
+        margin-left: 2%;
+        font-size: 14px;
+        font-weight: 500;
+      }
+    }
+  }
+  .modal-dialog{
+    top: 30%;
+  }
+  .delete-confirm{
+    font-size: 24px;
+    font-weight: 500;
+    margin-top: 2%;
+  }
+  .delete-dialog{
+    font-size: 15px;
+    font-weight: 400;
+    color: rgba(142, 154, 160, 1);
+    margin-top: 2%;
+  }
+  .delete-icon {
+    width: 70px;
+    margin: 0 auto;
+  }

package/src/question/confirm-dialog/confirm-dialog.component.spec.ts

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

package/src/question/confirm-dialog/confirm-dialog.component.ts

@@ -0,0 +1,24 @@
+import { Component, Inject, Input } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'lib-confirm-dialog',
+  templateUrl: './confirm-dialog.component.html',
+  styleUrls: ['./confirm-dialog.component.scss']
+})
+export class ConfirmDialogComponent {
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any,
+  public dialogRef: MatDialogRef<ConfirmDialogComponent>){
+    this.messageHeader=data.messageHeader;
+   this.message=data.message;
+  }
+
+  message:string='';
+  messageHeader:string='';
+  closeModal() {
+    this.dialogRef.close();
+  }
+  
+}

package/src/question/form-elements/form-elements.component.html

@@ -0,0 +1,28 @@
+<ng-container *ngIf="state === 'child'; else parentBlock">
+  <div *ngFor="let childLogic of grid">
+    <div *ngIf="childLogic.showLogic && answer">
+      <div *ngFor="let row of childLogic.rows">
+        <div *ngFor="let grid of row.grid">
+          <lib-recursive-logic
+            [grid]="grid"
+            [edit]="edit"
+            [acceptedLanguage]="acceptedLanguage"
+            [pages]="pages"
+            (subFormChange)="updateSubFormWithSubmissions($event)"
+          >
+          </lib-recursive-logic>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-container>
+<ng-template #parentBlock>
+  <lib-recursive-logic
+    [grid]="grid"
+    [edit]="edit"
+    [acceptedLanguage]="acceptedLanguage"
+    [pages]="pages"
+    (subFormChange)="updateSubFormWithSubmissions($event)"
+  >
+  </lib-recursive-logic>
+</ng-template>

package/src/question/form-elements/form-elements.component.spec.ts

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

package/src/question/form-elements/form-elements.component.ts

@@ -0,0 +1,41 @@
+import {
+  Component,
+  EventEmitter,
+  Inject,
+  Input,
+  Optional,
+  Output
+} from '@angular/core';
+
+@Component({
+  selector: 'lib-form-elements',
+  templateUrl: './form-elements.component.html',
+  styleUrls: ['./form-elements.component.scss'],
+})
+export class FormElementsComponent {
+  @Input() currentPageIndex: number = 0;
+  @Input() edit : boolean = false;
+  @Input() acceptedLanguage: string ='';
+  @Output() subFormChange = new EventEmitter<any>();
+  @Input() answer!: string;
+  @Input() grid: any;
+  @Input() state!: string;
+  @Input() pages: any[] = [];
+
+  constructor(
+    @Inject('grid') @Optional() private injectedGrid: any,
+    @Inject('state') @Optional() private injectedState: string,
+    @Inject('answer') @Optional() private injectedAnswer: string
+  ) {}
+
+
+  ngOnInit() {
+    this.grid = this.injectedGrid ?? this.grid;
+    this.state = this.injectedState ?? this.state;
+    this.answer = this.injectedAnswer ?? this.answer;
+  }
+
+  updateSubFormWithSubmissions(event:any){
+    this.subFormChange.emit(event);
+  }
+}