@piserve-tech/form-submission 1.3.314 → 1.3.316

package/src/question/sub-form/sub-form.component.scss

@@ -0,0 +1,83 @@
+.outer-container {
+  background-color: white;
+  position: relative;
+  @media (max-width: 576px) {
+    padding: 8px;
+  }
+}
+
+.body {
+  position: relative;
+  // z-index: 1;
+  background: #efefef;
+  border-radius: 6px;
+}
+
+.tab-content {
+  background-color: white;
+}
+
+.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%;
+}
+
+.subform-header{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.icon-container{
+  cursor: pointer;
+}
+
+.delete-icon{
+  height: 36px;
+  width: 36px;
+}
+
+.finalScore {
+  width: 57px;
+  height: 52px;
+  border-radius: 6px;
+  border: 1px solid #c8c8c8;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-weight: 500;
+}
+.goodScore {
+  border-color: rgb(80, 245, 80);
+}
+
+.badScore {
+  border-color: lightcoral;
+}
+
+.scoreTitle{
+  font-weight: 400;
+  font-size: 14px;
+  color: #2B2E3E80;
+}
+
+.error-message {
+  color: #f44336;
+  font-size: 1em;
+  margin-top: 4px;
+  padding: 0 8px;
+}

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

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

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

@@ -0,0 +1,421 @@
+import {
+  Component,
+  EventEmitter,
+  HostListener,
+  Injector,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { SubformCopyService } from '../../services/subform-copy.service';
+import { ConfirmDialogComponent } from '../confirm-dialog/confirm-dialog.component';
+import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
+import { Submission } from '../../models/submission.model';
+import { Answer } from '../../models/answer.model';
+import { v4 as uuidv4 } from 'uuid';
+import { DataService } from '../../services/data.service';
+import { FormService } from '../../services/form.service';
+import { WhenClauseService } from '../../services/whenClause.service';
+import { ValidationService } from '../../services/validation.service';
+import { ScoreCalculationService } from '../../services/score.service';
+
+@Component({
+  selector: 'lib-sub-form',
+  templateUrl: './sub-form.component.html',
+  styleUrls: ['./sub-form.component.scss'],
+})
+export class SubFormComponent implements OnInit {
+  @Input() subForm: any = {};
+  @Input() edit: boolean = false;
+  @Output() subFormChange = new EventEmitter<any>();
+  @Input() acceptedLanguage: string = '';
+  @Input() pages: any[] = [];
+  decodedDescription: string = '';
+  grid: any;
+  state!: string;
+  childLogicCache: { [key: string]: { component: Promise<any>, injector: Injector } } = {};
+  componentToLoad: any;
+  injector!: Injector;
+  copySubFormdata:any;
+  subformDescription:string = '';
+  subformTitle: string= '';
+  editor: any;
+  allowCopy: boolean = false;
+  allowDelete: boolean = false;
+  private dialogRef?: MatDialogRef<ConfirmDialogComponent>;
+  subformData:any;
+  previousSubmissions:any[]=[];
+  maxPossibleGoodScore!: number;
+  maxPossibleBadScore!: number;
+
+  constructor(
+    private subformCopyService:SubformCopyService,
+    public dialog: MatDialog,
+    private dataService: DataService,
+    private formService:FormService,
+    private whenClauseService:WhenClauseService,
+    private validationService: ValidationService,
+    private scoreCalcService: ScoreCalculationService
+  ){
+    this.dataService.subform$.subscribe((data)=>{
+      this.subformData = data;
+      this.tryLoadPreviousSubmissions();
+    })
+  }
+
+  private tryLoadPreviousSubmissions(): void {
+    if (
+      this.subformData &&
+      this.subForm &&
+      !this.edit &&
+      this.subForm.submissionCopyConfig?.allowCopyFromOtherSubmissions
+    ) {
+      this.loadPreviousSubmissions();
+    }
+  }
+
+
+  loadPreviousSubmissions() {
+    if (this.subformData && Object.keys(this.subformData).length > 0 && !this.edit) {
+      this.formService.getSubformSubmissions(this.subformData)?.subscribe({
+        next: (response: any) => {
+          this.previousSubmissions = response;
+          const targetSubForms: string[] =
+            this.subformData?.duplicateSubmission?.targetSubForm ?? [];
+  
+          if (
+            Array.isArray(targetSubForms) &&
+            targetSubForms.includes(this.subForm.title)
+          ) {
+  
+            // ✅ Filter submissions belonging to this subform
+            const filteredSubmissions = this.previousSubmissions.filter(
+              (submission: any) =>
+                submission.title === this.subForm.title
+            );
+  
+            const loadedSubmissions = this.createSubmissionsFromApi(
+              filteredSubmissions,
+              this.subForm
+            );
+  
+            const existingSubmissions = this.subForm.submissions ?? [];
+  
+            this.subForm = {
+              ...this.subForm,
+              submissions: [
+                ...existingSubmissions,
+                ...loadedSubmissions
+              ]
+            };
+  
+            const hasAnyScore = this.subForm.submissions.some((sub: any) =>
+              sub.scores?.some(
+                (s: any) => s.score !== null && s.score !== undefined
+              )
+            );
+  
+            if (hasAnyScore) {
+              this.subForm.scores = this.scoreCalcService.calculateFinalScore(
+                this.subForm.submissions,
+                this.maxPossibleGoodScore,
+                this.maxPossibleBadScore
+              );
+            } else {
+              this.subForm.scores = null;
+            }
+          }
+        },
+        error: (error: any) => {}
+      });
+    }
+  }
+  
+
+  ngOnInit() {
+    this.allowCopy = this.subForm.property?.allowCopy;
+    this.allowDelete = this.subForm.property?.allowDelete;
+    this.copySubFormdata = this.subForm?.copySubformMeta;
+    this.tryLoadPreviousSubmissions();
+    if (this.subForm.property.subFormStructure == 'single') {
+      this.bindAnswersToFormElements();
+      this.loadComponent();
+      this.whenClauseService.addGridsFromSubform(this.subForm);
+    }
+
+    const { goodMax, badMax } = this.scoreCalcService.getMaxPossibleScore(
+      this.subForm
+    );
+    this.maxPossibleGoodScore = goodMax;
+    this.maxPossibleBadScore = badMax;
+  }
+
+  editorCreated(editorInstance: any) {
+    this.editor = editorInstance;
+  }
+
+  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' },
+      ],
+    });
+  }
+
+  decodeHtml(html: string): string {
+    const textArea = document.createElement('textarea');
+    textArea.innerHTML = html;
+    return textArea.value;
+  }
+
+  bindAnswersToFormElements() {
+    const bindAnswers = (formElements: any[], submissions: any[]) => {
+      formElements?.forEach((grids: any) => {
+        grids?.grid?.forEach(
+          (formElement: { entityType: string; element: any }) => {
+            if (formElement.entityType === 'QUESTION') {
+              const submission = submissions.find((sub: { answers: any[] }) =>
+                sub.answers.some(
+                  (ans: { questionId: any }) =>
+                    ans.questionId === formElement.element.id
+                )
+              );
+
+              if (submission) {
+                const answer = submission.answers.find(
+                  (ans: { questionId: any }) =>
+                    ans.questionId === formElement.element.id
+                );
+                if (answer) {
+                  formElement.element.answer = answer.answer;
+                  formElement.element.answerId = answer.answerId;
+                  formElement.element.validation = true;
+                  formElement.element.attachments = answer.attachments;
+                  formElement.element.amountInWords = answer.amountInWords;
+                  this.subForm.submissionId = submission.submissionId;
+                  formElement.element.answerCurrency = answer.answerCurrency;
+                }
+              }
+
+              if (formElement.element.childLogics) {
+                formElement.element.childLogics.forEach(
+                  (childLogic: { rows: any[] }) => {
+                    bindAnswers(childLogic.rows, submissions);
+                  }
+                );
+              }
+            }
+          }
+        );
+      });
+    };
+
+    if (this.subForm && this.subForm.rows && this.subForm.submissions) {
+      bindAnswers(this.subForm.rows, this.subForm.submissions);
+    }
+  }
+
+  updateSubFormWithSubmissions(event: any) {
+    this.subForm = event;
+    this.subFormChange.emit(this.subForm);
+  }
+
+  ngOnChanges(): void {
+    if (this.subForm.description) {
+      this.decodedDescription = this.decodeHtml(this.subForm.description);
+    }
+  }
+
+  copySubform() {
+    const { updatedPages } = this.subformCopyService.copySubform(this.subForm, this.pages);
+
+    this.pages = updatedPages;
+    // Emit updated pages or subFormChange if needed
+
+    // Optionally pass meta to parent if needed
+    // this.copyMeta.emit(copySubFormMeta);
+  }
+
+
+  updateSubformData(event: any, subformId: string, field: 'title' | 'description') {
+    if(this.copySubFormdata.id == subformId){
+      this.copySubFormdata[field] = event;
+    }
+  }
+
+  deleteCopySubform(subformId: string) {
+    const dialogConfig = new MatDialogConfig();
+    dialogConfig.data = {
+      messageHeader: "Are you sure?",
+      message: "Do you want to delete this subform?"
+    };
+    dialogConfig.hasBackdrop = true;
+    dialogConfig.disableClose = true;
+
+    this.dialogRef = this.dialog.open(ConfirmDialogComponent, dialogConfig);
+
+    this.dialogRef.afterClosed().subscribe((result: any) => {
+      if (result) {
+        // 1. Remove the copied subform from the pages
+        for (const page of this.pages) {
+          const rowIndex = page.rows.findIndex((row: any) =>
+            row.grid.some((grid: any) =>
+              grid.entityType === 'SUBFORM' &&
+              grid.element?.id === subformId &&
+              grid.element?.copied
+            )
+          );
+
+          if (rowIndex !== -1) {
+            page.rows.splice(rowIndex, 1);
+            break;
+          }
+        }
+
+        // 2. Remove this subformId from any subform's copiedForms array
+        for (const page of this.pages) {
+          for (const row of page.rows) {
+            for (const grid of row.grid) {
+              if (grid.entityType === 'SUBFORM' && grid.element?.copiedForms) {
+                const index = grid.element.copiedForms.indexOf(subformId);
+                if (index !== -1) {
+                  grid.element.copiedForms.splice(index, 1);
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+  }
+
+
+  deleteMainSubform(subformId: string): void {
+    const dialogConfig = new MatDialogConfig();
+    dialogConfig.data = {
+      messageHeader: "Are you sure?",
+      message: "Do you want to delete this subform?"
+    };
+    dialogConfig.hasBackdrop = true;
+    dialogConfig.disableClose = true;
+
+    this.dialogRef = this.dialog.open(ConfirmDialogComponent, dialogConfig);
+
+    this.dialogRef.afterClosed().subscribe((result: any) => {
+      if (result) {
+        for (const page of this.pages) {
+          for (const row of page.rows) {
+            for (const gridItem of row.grid) {
+              if (
+                gridItem.entityType === 'SUBFORM' &&
+                gridItem.element?.id === subformId
+              ) {
+                gridItem.element.deleted = true;
+                return; // stop after the first match
+              }
+            }
+          }
+        }
+      }
+    });
+  }
+
+  createSubmissionsFromApi(apiSubmissions: any[], subform: any): Submission[] {
+    return apiSubmissions.map(apiSubmission => {
+      const answers: Answer[] = [];
+
+      subform.rows.forEach((row: any) => {
+        row.grid.forEach((gridItem: any) => {
+          if (gridItem.entityType !== 'QUESTION') return;
+
+          const element = gridItem.element;
+          const questionKey = element.question;
+          if (!apiSubmission.answers || !apiSubmission.answers[questionKey]) {
+            return;
+          }
+          const apiAnswer = apiSubmission.answers[questionKey];
+          // ✅ CASE 1: File upload (array with name & url)
+          if (
+            Array.isArray(apiAnswer) &&
+            apiAnswer.length &&
+            apiAnswer[0].name &&
+            apiAnswer[0].url
+          ) {
+            answers.push({
+              questionId: element.id,
+              answer: null,
+              attachments: apiAnswer.map((file: any) => ({
+                fileId: file.id,
+                fileName: file.name,
+                fileUrl: file.url
+              })),
+              copiedAttachments: apiAnswer.map((file: any) => file.id)
+            });
+            return;
+          }
+
+          // ✅ CASE 2: Normal question object
+          answers.push({
+            questionId: element.id,
+            answer: apiAnswer.answer ?? null,
+            attachments: apiAnswer.file
+              ? apiAnswer.file.map((file: any) => ({
+                  fileName: file.name,
+                  fileUrl: file.url
+                }))
+              : undefined,
+            scores: apiAnswer.scores,
+            maximumPossibleScore: apiAnswer.maximumPossibleScore
+          });
+        });
+      });
+
+      return {
+        submissionId: uuidv4(),
+        sourceSubmissionId: apiSubmission.submissionId,
+        answers,
+        configuration: {
+          isDefault: false,
+          allowDelete: true
+        },
+        scores: apiSubmission.score
+      };
+    });
+  }
+
+  get isInvalid(): boolean {
+    return !!this.validationService.getErrorMessage(this.subForm.id);
+  }
+
+  get errorMessage(): string | null {
+    return this.validationService.getErrorMessage(this.subForm.id);
+  }
+
+  clearInvalid(){
+    this.validationService.clearInvalid(this.subForm.id);
+  }
+
+  @HostListener('click', ['$event'])
+    onAnyClick(event: MouseEvent): void {
+    this.clearInvalid();
+  }
+
+  ngOnDestroy(): void {
+    if (this.dialogRef) {
+      this.dialogRef.close();
+    }
+  }
+
+
+}

package/src/services/aggregate.service.ts

@@ -0,0 +1,148 @@
+import { Injectable, OnDestroy } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AggregationFunctionService {
+
+  // New structure: { [rowId]: Map<fieldId, fieldData> }
+private aggregateFieldsMap = new Map<string, Map<string, { id: string; operation: string; formula: string; result?: number }>>();
+private numberFieldsMap = new Map<string, Map<string, { id: string; answer: number }>>();
+
+  private aggregateFieldResultsSubject = new BehaviorSubject<{ id: string; result: number,evaluated:boolean } | null>(null);
+  aggregateFieldResults$ = this.aggregateFieldResultsSubject.asObservable();
+
+  constructor() {}
+
+  /**
+   * Store or update an aggregate field in the map
+   */
+  setAggregateField(rowId: string, fieldId: string, operation: string, formula: string): void {
+    if (!this.aggregateFieldsMap.has(rowId)) {
+      this.aggregateFieldsMap.set(rowId, new Map());
+    }
+    this.aggregateFieldsMap.get(rowId)!.set(fieldId, { id: fieldId, operation, formula });
+  }
+
+  /**
+   * Store or update a number field in the map
+   */
+  setNumberField(rowId: string, fieldId: string, answer: number): void {
+    if (!this.numberFieldsMap.has(rowId)) {
+      this.numberFieldsMap.set(rowId, new Map());
+    }
+    this.numberFieldsMap.get(rowId)!.set(fieldId, { id: fieldId, answer });
+    this.checkAndEvaluateFormulas(rowId);
+  }
+
+  private emitAggregateResult(id: string, result: number,evaluated:boolean): void {
+    this.aggregateFieldResultsSubject.next({ id, result,evaluated });
+  }
+
+
+  evaluateCustomFormula(rowId: string, formula: string): number | null {
+    
+    const rowNumberFields = this.numberFieldsMap.get(rowId);
+    if (!formula || !rowNumberFields) return null;
+  
+    const uuidRegex = /[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}/g;/[0-9a-fA-F\-]{36}/g;
+    const uuidMatches = formula.match(uuidRegex) || [];
+  
+    const allHaveAnswers = uuidMatches.every(uuid => {
+      const field = rowNumberFields.get(uuid);
+      return field !== undefined && 
+             field.answer !== undefined && 
+             field.answer !== null &&
+             String(field.answer).trim() !== '';
+    });
+  
+    if (!allHaveAnswers) return null;
+  
+    const replacedFormula = formula.replace(uuidRegex, (match) => {
+      const field = rowNumberFields.get(match);
+      return field?.answer?.toString() || '0';
+    });
+  
+    try {
+      return new Function(`return ${replacedFormula};`)();
+    } catch (error) {
+      console.error('Error evaluating formula:', error);
+      return null;
+    }
+  }
+  
+  evaluatePredefinedOperation(rowId: string, operation: string, formula: string): number | null {
+    const rowNumberFields = this.numberFieldsMap.get(rowId);
+    if (!rowNumberFields) return null;
+  
+    const uuidList = formula.split(',').map(id => id.trim());
+    const values: number[] = [];
+    let hasAnyAnswer = false;
+
+    for (const uuid of uuidList) {
+      const field = rowNumberFields.get(uuid);
+      const val = field?.answer;
+  
+      // If the field doesn't exist or value is invalid, push 0 as default
+      if (val !== undefined && val !== null && String(val).trim() !== '') {
+        hasAnyAnswer = true;
+        values.push(Number(val));
+      } else {
+        values.push(0); // Still push 0 to keep array length, but flag stays false unless at least one answer exists
+      }
+    }
+    if (!hasAnyAnswer) return null;
+    let result = 0;
+    switch (operation) {
+      case 'SUM':
+        result = values.reduce((acc, val) => acc + val, 0);
+        break;
+      case 'SUBTRACTION':
+        result = values.reduce((acc, val) => acc - val);
+        break;
+      case 'MULTIPLICATION':
+        result = values.reduce((acc, val) => acc * val, 1);
+        break;
+      default:
+        console.warn(`Unsupported operation: ${operation}`);
+        return null;
+    }
+  
+    return result;
+  }
+
+  checkAndEvaluateFormulas(rowId: string): void {
+    const aggregateFields = this.aggregateFieldsMap.get(rowId);
+    if (!aggregateFields) return;
+  
+    aggregateFields.forEach((aggregateField, id) => {
+      let result: number | null = null;
+  
+      if (aggregateField.operation === 'CUSTOM') {
+        result = this.evaluateCustomFormula(rowId, aggregateField.formula);
+      } else {
+        result = this.evaluatePredefinedOperation(rowId, aggregateField.operation, aggregateField.formula);
+      }
+  
+      if (result !== null) {
+        aggregateField.result = result;
+        this.aggregateFieldsMap.get(rowId)!.set(id, aggregateField);
+        this.emitAggregateResult(`${rowId}:${id}`, result,true);
+      } else {
+        this.emitAggregateResult(`${rowId}:${id}`, 0,false);
+      }
+    });
+  }
+
+  clearAll(): void {
+    this.aggregateFieldsMap.clear();
+    this.numberFieldsMap.clear();
+    this.aggregateFieldResultsSubject.next(null);
+  }
+  
+  ngOnDestroy(): void {
+    this.clearAll();
+  }
+}