@piserve-tech/form-submission 1.3.314 → 1.3.316

package/src/question/question-group/question-group.component.html

@@ -0,0 +1,147 @@
+<div
+  class="outer-container mb-4 px-3"
+  [attr.name]="questionGroup.testElementName"
+  [id]="'question-' + questionGroup.id"
+>
+  <div class="body container pt-3 pb-3 px-3">
+    <div class="tab-content pt-4 pb-3 px-3">
+      <p class="sectionTitle">{{ questionGroup.title }}</p>
+      <p [innerHTML]="decodedDescription" class="description"></p>
+
+      <div class="mt-5">
+        <div *ngFor="let row of questionGroup.rows">
+          <div class="d-flex">
+            <div
+              *ngFor="let grid of row.grid"
+              [ngStyle]="{ 'width.%': grid.element.count * (100 / 12) }"
+            >
+              <div *ngIf="grid.entityType === 'QUESTION' && grid.show">
+                <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"
+                    [rowId]="'0'"
+                  ></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-aggregate-function
+                    *ngSwitchCase="'AGGREGATE_FUNCTION'"
+                    [question]="grid.element"
+                    [rowId]="'0'"
+                  ></lib-aggregate-function>
+                  <lib-hidden-field
+                    *ngSwitchCase="'HIDDEN_FIELD'"
+                    [question]="grid.element"
+                  ></lib-hidden-field>
+                  <lib-iframe-fields
+                    *ngSwitchCase="'IFRAME_WIDGET'"
+                    [question]="grid.element"
+                  ></lib-iframe-fields>
+                </div>
+
+                <!-- <ng-container *ngIf="grid.element.childLogics">
+                    <ng-container *ngIf="getComponentForChildLogics(grid.element.childLogics, 'child', grid.element.answer) as cached">
+                      <ng-container
+                        *ngComponentOutlet="cached.component | async; injector: cached.injector">
+                      </ng-container>
+                    </ng-container>
+                  </ng-container> -->
+
+                <ng-container *ngIf="grid?.element?.childLogics">
+                  <ng-container *ngIf="componentToLoad">
+                    <ng-container
+                      *ngComponentOutlet="
+                        componentToLoad;
+                        inputs: {
+                          grid: grid?.element?.childLogics,
+                          answer: grid?.element?.answer,
+                          state: 'child'
+                        }
+                      "
+                    ></ng-container>
+                  </ng-container>
+                </ng-container>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/question/question-group/question-group.component.scss

@@ -0,0 +1,36 @@
+.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%;
+}

package/src/question/question-group/question-group.component.spec.ts

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

package/src/question/question-group/question-group.component.ts

@@ -0,0 +1,94 @@
+import { Component, EventEmitter, Injector, Input, Output } from '@angular/core';
+import { WhenClauseService } from '../../services/whenClause.service';
+
+
+interface Attachment {
+  fileId: string;
+  fileName: string;
+  fileUrl: string;
+  fileSize?: number;
+}
+
+@Component({
+  selector: 'lib-question-group',
+  templateUrl: './question-group.component.html',
+  styleUrls: ['./question-group.component.scss']
+})
+export class QuestionGroupComponent {
+  @Input() questionGroup: any = {};
+  @Input() edit: boolean = false;
+  @Input() acceptedLanguage: string ='';
+  decodedDescription:string='';
+  grid: any;
+  childLogicCache: { [key: string]: { component: Promise<any>, injector: Injector } } = {};
+  componentToLoad: any;
+  injector!: Injector;
+
+  constructor(private whenClauseService:WhenClauseService){}
+
+  ngOnInit() {
+    this.loadComponent();
+    this.whenClauseService.addGridsFromSubform(this.questionGroup);
+  }
+
+  decodeHtml(html: string): string {
+    const textArea = document.createElement('textarea');
+    textArea.innerHTML = html;
+    return textArea.value;
+  }
+
+  ngOnChanges(): void {
+    if (this.questionGroup.description) {
+      this.decodedDescription = this.decodeHtml(this.questionGroup.description);
+    }
+  }
+
+ removeCircularReferences(obj: any): any {
+  const seen = new WeakSet();
+
+  function recurse(value: any): any {
+    if (value === null || typeof value !== 'object') {
+      return value;
+    }
+
+    if (seen.has(value)) {
+      return '[Circular]';
+    }
+
+    seen.add(value);
+
+    if (Array.isArray(value)) {
+      return value.map(item => recurse(item));
+    }
+
+    const output: any = {};
+    for (const key of Object.keys(value)) {
+      output[key] = recurse(value[key]);
+    }
+
+    seen.delete(value);
+    return output;
+  }
+
+  return recurse(obj);
+}
+
+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' },
+    ],
+  });
+}
+}

package/src/question/question.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '../shared/shared.module';
+import { InlineMultipleSubformComponent } from './inline-multiple-subform/inline-multiple-subform.component';
+import { MultifieldsComponent } from './multifields/multifields.component';
+import { CardSubformComponent } from './card-subform/card-subform.component';
+import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';
+
+
+
+@NgModule({
+  declarations: [ 
+    MultifieldsComponent, ConfirmDialogComponent
+  ],
+  imports: [
+    CommonModule,
+    SharedModule
+  ],
+  exports:[
+  ]
+})
+export class QuestionModule { }

package/src/question/recursive-logic/recursive-logic.component.html

@@ -0,0 +1,33 @@
+<div *ngIf="grid.show">
+  <div *ngIf="grid.entityType === 'QUESTION'">
+    <lib-question
+      [question]="grid?.element"
+      [edit]="edit"
+      [acceptedLanguage]="acceptedLanguage"
+    ></lib-question>
+  </div>
+  <div *ngIf="grid.entityType === 'SECTION'">
+    <lib-section-fields [section]="grid.element"></lib-section-fields>
+  </div>
+  <ng-container *ngIf="grid.entityType === 'SUBFORM'">
+    <lib-sub-form
+      [subForm]="grid.element"
+      [acceptedLanguage]="acceptedLanguage"
+      (subFormChange)="updateSubFormWithSubmissions($event)"
+      [edit]="edit"
+      [pages]="pages"
+    ></lib-sub-form>
+  </ng-container>
+  
+  <ng-container *ngIf="grid.entityType === 'QUESTION_GROUP'">
+    <lib-question-group
+      [questionGroup]="grid.element"
+      [acceptedLanguage]="acceptedLanguage"
+    ></lib-question-group>
+  </ng-container>
+  
+  
+  <ng-container *ngIf="grid.entityType === 'MULTIFIELD'">
+      <lib-multifields [multiFields]="grid.element" [acceptedLanguage]="acceptedLanguage"></lib-multifields>
+  </ng-container>
+</div>

package/src/question/recursive-logic/recursive-logic.component.spec.ts

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

package/src/question/recursive-logic/recursive-logic.component.ts

@@ -0,0 +1,29 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { WhenClauseService } from '../../services/whenClause.service';
+
+@Component({
+  selector: 'lib-recursive-logic',
+  templateUrl: './recursive-logic.component.html',
+  styleUrls: ['./recursive-logic.component.scss']
+})
+export class RecursiveLogicComponent {
+  @Input() grid: any = {};
+  @Input() currentPageIndex: number = 0;
+  @Input() edit : boolean = false;
+  @Input() acceptedLanguage: string ='';
+  @Output() subFormChange = new EventEmitter<any>();
+  @Input() state!: string;
+  @Input() answer!: string;
+  @Input() pages: any[] = [];
+
+  constructor(private whenClauseService:WhenClauseService){}
+
+  ngOnInit(){
+    this.whenClauseService.addGrid(this.grid);
+  }
+
+  updateSubFormWithSubmissions(event:any){
+    this.subFormChange.emit(event);
+  }
+
+}

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

@@ -0,0 +1,254 @@
+<div
+  class="outer-container mb-4 px-3"
+  [id]="'question-' + subForm.id"
+  [attr.name]="subForm.testElementName"
+  *ngIf="!subForm.deleted"
+>
+  <div class="body py-1 px-1">
+    <div class="tab-content pt-4 pb-3 px-3">
+      <ng-container *ngIf="!subForm.copied; else copySubformContainer">
+        <div class="subform-header">
+          <div class="data-container">
+            <p class="sectionTitle">{{ subForm.title }}</p>
+            <p [innerHTML]="decodedDescription" class="description"></p>
+          </div>
+          <div class="d-flex gap-3">
+            <div
+              class="finalScore"
+              *ngFor="let s of subForm?.scores"
+              [ngClass]="{
+                goodScore: s.scoreType === 'GOOD_SCORE',
+                badScore: s.scoreType === 'BAD_SCORE'
+              }"
+            >
+              <span class="scoreTitle">Score</span>
+              <p class="mb-0">{{ s.score }}</p>
+            </div>
+            <div class="icon-container">
+              <img
+                src="assets/icons/copy-icon.svg"
+                alt="copy-icon"
+                (click)="copySubform()"
+                *ngIf="allowCopy"
+              />
+              <img
+                src="assets/icons/delete-icon.svg"
+                class="delete-icon ms-3"
+                alt="delete icon"
+                (click)="deleteMainSubform(subForm.id)"
+                *ngIf="allowDelete"
+              />
+            </div>
+          </div>
+        </div>
+      </ng-container>
+      <ng-template #copySubformContainer>
+        <div class="d-flex justify-content-end gap-4">
+          <div
+              class="finalScore"
+              *ngFor="let s of subForm?.scores"
+              [ngClass]="{
+                goodScore: s.scoreType === 'GOOD_SCORE',
+                badScore: s.scoreType === 'BAD_SCORE'
+              }"
+            >
+              <span class="scoreTitle">Score</span>
+              <p class="mb-0">{{ s.score }}</p>
+            </div>
+          <div class="icon-container" (click)="deleteCopySubform(subForm.id)">
+            <img
+              src="assets/icons/delete-icon.svg"
+              class="delete-icon"
+              alt="delete icon"
+            />
+          </div>
+        </div>
+        <div class="copy-subform-container mb-3">
+          <p>Title</p>
+          <input
+            type="text"
+            class="form-control"
+            [(ngModel)]="subformTitle"
+            (ngModelChange)="updateSubformData($event, subForm.id, 'title')"
+          />
+          <p class="mt-3">Description</p>
+          <quill-editor
+            [(ngModel)]="subformDescription"
+            (ngModelChange)="
+              updateSubformData($event, subForm.id, 'description')
+            "
+            (onEditorCreated)="editorCreated($event)"
+            class="editor"
+            placeholder=""
+          ></quill-editor>
+        </div>
+      </ng-template>
+
+      <div *ngIf="subForm.property.subFormStructure == 'multiple'">
+        <lib-multiple-subform
+          *ngIf="subForm.property.subFormType === 'table'"
+          [subForm]="subForm"
+          (subFormChange)="updateSubFormWithSubmissions($event)"
+          [acceptedLanguage]="acceptedLanguage"
+        ></lib-multiple-subform>
+
+        <lib-inline-multiple-subform
+          *ngIf="subForm.property.subFormType === 'inline'"
+          [subForm]="subForm"
+          (subFormChange)="updateSubFormWithSubmissions($event)"
+          [acceptedLanguage]="acceptedLanguage"
+        ></lib-inline-multiple-subform>
+        <lib-card-subform
+          *ngIf="subForm.property.subFormType === 'card'"
+          [subForm]="subForm"
+          [acceptedLanguage]="acceptedLanguage"
+          (subFormChange)="updateSubFormWithSubmissions($event)"
+          [edit]="edit"
+        ></lib-card-subform>
+      </div>
+      <div *ngIf="subForm.property.subFormStructure == 'single'">
+        <div *ngFor="let row of subForm.rows">
+          <div class="d-flex">
+            <div
+              *ngFor="let grid of row.grid"
+              [ngStyle]="{ 'width.%': grid.element.count * (100 / 12) }"
+            >
+              <div *ngIf="grid.entityType === 'QUESTION' && grid.show">
+                <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"
+                    [rowId]="'0'"
+                  ></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-aggregate-function
+                    *ngSwitchCase="'AGGREGATE_FUNCTION'"
+                    [question]="grid.element"
+                    [rowId]="'0'"
+                  ></lib-aggregate-function>
+                  <lib-hidden-field
+                    *ngSwitchCase="'HIDDEN_FIELD'"
+                    [question]="grid.element"
+                  ></lib-hidden-field>
+                  <lib-iframe-fields
+                    *ngSwitchCase="'IFRAME_WIDGET'"
+                    [question]="grid.element"
+                  ></lib-iframe-fields>
+                </div>
+
+                <!-- <ng-container *ngIf="grid.element.childLogics">
+                  <ng-container
+                    *ngIf="getComponentForChildLogics(grid.element.childLogics, 'child', grid.element.answer) as outlet">
+                    <ng-container *ngComponentOutlet="outlet.component | async; injector: outlet.injector">
+                    </ng-container>
+                  </ng-container>
+                </ng-container> -->
+                <ng-container *ngIf="grid?.element?.childLogics">
+                  <ng-container *ngIf="componentToLoad">
+                    <ng-container
+                      *ngComponentOutlet="
+                        componentToLoad;
+                        inputs: {
+                          grid: grid?.element?.childLogics,
+                          answer: grid?.element?.answer,
+                          state: 'child'
+                        }
+                      "
+                    ></ng-container>
+                  </ng-container>
+                </ng-container>
+              </div>
+
+              <div *ngIf="grid.entityType === 'SECTION' && grid.show">
+                <lib-section-fields
+                  [section]="grid.element"
+                ></lib-section-fields>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div *ngIf="isInvalid" class="error-message mt-4">
+        {{ errorMessage }}
+      </div>
+    </div>
+  </div>
+</div>